/*
  Laris 2026 — nagłówek, menu i oddechy.

  Punkt odniesienia: shop.laris.ua. Tamten serwis trzyma nagłówek niski
  (cienki pasek informacyjny, jeden rząd z logo i wyszukiwarką, pod nim
  wąska belka kategorii), a przestrzeń między sekcjami daje spokojną,
  „katalogową” lekturę strony.

  Tutaj zbieramy trzy rzeczy, których nie ma sens rozsypywać po innych
  arkuszach: wysokość nagłówka, rozwijane menu kategorii jako mega-panel
  i rytm odstępów. Plik ładuje się jako ostatni, więc wygrywa kaskadę.
*/

/* ═══ wysokość nagłówka ═══ */

/* Nagłówek jest przypięty do okna (`.top { position: fixed }`), więc treść
   musi zaczynać się poniżej. Motyw nadrzędny wpisywał te odstępy trzy razy
   różnymi liczbami; po obniżeniu nagłówka wszystkie trzy się rozjechały.
   Trzymamy jedną wartość w zmiennej — zmierzoną na żywej stronie:
   112 px na desktopie, 159 px w paśmie, gdzie belka kategorii łamie się
   na dwa rzędy, 68 px na telefonie. W zmiennej stoi o 3 px więcej, żeby
   treść nie dotykała krawędzi paska.

   Uwaga: powiększenie logotypu z 44 na 52 px NIE zmieniło desktopu (tam
   o wysokości decyduje pole wyszukiwania), ale w paśmie tabletu podniosło
   nagłówek o 28 px, a na telefonie o 8. Po każdej zmianie logotypu mierzyć
   wszystkie trzy progi. */
:root {
  --l-header-h: 115px;
}

.pagewhitecontent,
.pagebaner {
  margin-top: var(--l-header-h);
}

/* Wartości zmierzone na żywej stronie po ściśnięciu nagłówka, na wszystkich
   trzech językach i na 768, 900 i 992 px.

   Wcześniej pasmo tabletu wymagało 194 px, bo niemiecki i angielski miały
   tam nagłówek o 24 px wyższy od polskiego (191 wobec 167) i jedna wspólna
   liczba musiała pokryć najgorszy przypadek. Po zmniejszeniu logo i pola
   wyszukiwania wszystkie trzy języki dają równe 131 px, więc zapas zniknął
   sam. Gdyby ktoś wrócił do większego logo — zmierzyć wszystkie trzy. */
@media (max-width: 992px) {
  :root {
    --l-header-h: 162px;
  }
}

@media (max-width: 767px) {
  :root {
    --l-header-h: 71px;
  }
}

/* ═══ przełączniki menu i wyszukiwarki na telefonie ═══ */

/* Były <div>-ami, są <button>-ami — inaczej nie dało się ich dosięgnąć
   z klawiatury. Przycisk przynosi ze sobą własne tło, obramowanie, padding
   i krój pisma, więc zdejmujemy je: reguły położenia i wyglądu zostają
   te z motywu nadrzędnego (#burger-menu, #search-btn w style.css:2702). */
#burger-menu,
#search-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

#burger-menu:focus-visible,
#search-btn:focus-visible {
  outline: 2px solid var(--l-teal);
  outline-offset: 4px;
  border-radius: 3px;
}

/* Zwinięte menu i wyszukiwarka chowają się przez „max-height: 0; opacity: 0”
   (style.css:2486). To zabiera je oczom, ale nie tabulatorowi: linki wewnątrz
   nadal łapią fokus, więc idący klawiaturą po telefonie wpadał w kilkanaście
   niewidocznych przystanków, w tym w pole wyszukiwania. „visibility” wyjmuje
   je z kolejności, a wraca razem z klasą otwarcia. */
@media (max-width: 767px) {
  .category-navbar,
  .search-top {
    visibility: hidden;
  }

  .category-navbar.navbar-active,
  .search-top.search-active {
    visibility: visible;
  }
}

/* ═══ nagłówek: niższy ═══ */

/* Pasek informacyjny — sama linia tekstu, bez zbędnej wysokości. */
.top .header-top {
  font-size: 13px;
}

/* „margin: 0” obowiązkowo. Pasek miał 70 px przy najwyższej treści 39 —
   resztę dokładał domyślny odstęp <ul> przeglądarki (1em góra i dół).
   Sama wyściółka go nie ruszała, bo to margines, nie padding. */
.top .header-top .navbar-top ul {
  margin: 0;
  padding: 5px 0;
}

.middle-nav-header {
  padding: 7px 0;
}

/* Logo prowadzi wysokość całego rzędu — u nadrzędnego motywu było
   najwyższym elementem nagłówka. */
.middle-nav-header .logo img {
  max-height: 52px;
  width: auto;
  display: block;
}

/* Przycisk „Katalog” tuż przy logotypie.

   Rząd nagłówka stoi na „justify-content: space-between”, więc wolne
   miejsce rozkładało się PO RÓWNO między cztery elementy i między logo
   a przyciskiem zostawało 97 px — przycisk wyglądał, jakby nie miał
   z logotypem nic wspólnego. Oddajemy cały zapas polu wyszukiwania:
   rośnie ono, a nie odstępy, i przycisk siada przy logotypie. */
.middle-nav-header .row-flex .laris-cat {
  margin-left: 14px;
}

.middle-nav-header .row-flex .search-top {
  flex: 1 1 auto;
  margin: 0 26px;
}

.search-top .search-field {
  padding: 8px 18px;
  font-size: 13.5px;
}

.search-top .search-submit {
  padding: 7px 22px;
  margin: 3px;
  font-size: 13.5px;
}

.laris-cat-btn {
  padding: 10px 18px;
}

.navbar-shop-buttons img {
  max-height: 24px;
}

/* Belka kategorii — węższa, ale z zachowanym polem kliknięcia. */
.category-navbar > nav > ul {
  padding: 6px 0;
}

.category-navbar > nav > ul > li > a,
.category-navbar .menu-item > a {
  padding: 10px 0;
  font-size: 14.5px;
}

.contact-us a {
  font-size: 14px;
}

/* Pasmo 768–992 px: kontener ma sztywne 700 px (style.css:2070), więc sześć
   pozycji nie mieści się w jednym rzędzie i belka łamie się na dwa. Samo
   w sobie jest to w porządku — nie w porządku było łamanie w środku wyrazu:
   przeglądarka dzieli po dywizie i „E-katalog” stawał się „E-” i „katalog”
   w dwóch wierszach. Zawijamy między pozycjami, nigdy wewnątrz nich. */
@media (min-width: 768px) and (max-width: 992px) {
  /* Dwie reguły, które trzymają się razem — osobno każda psuje belkę.

     Pozycje są nierozdzielne: „white-space: nowrap” na <li>, a nie na samym
     odnośniku, bo strzałka rozwinięcia to „li::after” o „display:inline-block”
     (style.css:402) — przy nowrap tylko na „a” tekst zostawał w wierszu,
     a strzałka spadała pod niego.

     Ale sama lista MUSI móc się zawinąć. Motyw nadrzędny trzyma ją na
     „display:flex; flex-wrap:nowrap” (style.css:1964), a kontener w tym
     paśmie ma sztywne 700 px. Przy nierozdzielnych pozycjach lista rozdyma
     się do 816 px i dwie ostatnie — „Promocje!” i „E-katalog” — wychodzą
     poza kontener; przy 768 i 900 px po prostu poza ekran, czyli stają się
     nieosiągalne. Wcześniej mieściły się tylko dlatego, że łamały się
     w środku wyrazu, co samo w sobie było brzydkie.

     Zawijamy więc MIĘDZY pozycjami: dwa rzędy zamiast jednego obciętego. */
  .category-navbar > nav > ul {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2px;
  }

  .category-navbar > nav > ul > li,
  .category-navbar > nav > ul > li > a {
    white-space: nowrap;
  }

  /* …ale wewnątrz panelu wracamy do normalnego łamania — „white-space”
     dziedziczy się, a nazwy podkategorii bywają dłuższe niż kolumna. */
  .category-navbar > nav > ul > li > ul.sub-menu,
  .category-navbar > nav > ul > li > ul.sub-menu > li,
  .category-navbar > nav > ul > li > ul.sub-menu > li > a {
    white-space: normal;
  }
}

/* ═══ przełącznik waluty ═══ */

/* Motyw nadrzędny zostawiał go w kolorze tła — „PLN” było praktycznie
   niewidoczne, a to jedyne miejsce, w którym kupujący z zagranicy widzi,
   w czym liczymy cenę. */
/* Tylko od 768 px. Na telefonie motyw nadrzędny chowa ten blok
   („.switchers-top { position: absolute; top: 74vh; display: none }”,
   style.css:2432) i pokazuje go dopiero razem z otwartym menu pod burgerem,
   klasą „.switchers-active”. Nasze bezwarunkowe „display: flex” wygrywało
   kaskadę — arkusz ładuje się ostatni — więc przełączniki były widoczne
   zawsze i lądowały na 74vh, czyli w połowie pierwszego ekranu, przykrywając
   go z „z-index: 999” odziedziczonym po „.top”. Na telefonie 844 px
   dawało to dokładnie 625 px od góry. */
@media (min-width: 768px) {
  .switchers-top {
    display: flex;
    align-items: center;
    gap: 14px;
  }
}

/* Pasmo 768–992 px: motyw nadrzędny przycina ten blok do 165 px
   (style.css:2079), a to za mało na flagę z nazwą języka i pigułkę waluty —
   strzałki obu list zawijały się do drugiego wiersza. */
@media (min-width: 768px) and (max-width: 992px) {
  .switchers-top {
    width: auto;
    flex-wrap: nowrap;
    gap: 10px;
  }
}

.switchers-top select.woocommerce-currency-switcher,
.switchers-top .woocommerce-currency-switcher {
  color: var(--l-ink);
  font-family: var(--l-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 10px;
  border: 1px solid var(--l-line-strong);
  border-radius: var(--l-r-btn);
  background: var(--l-surface);
  cursor: pointer;
  opacity: 1;
}

.switchers-top select.woocommerce-currency-switcher:hover {
  border-color: var(--l-teal);
  color: var(--l-teal-dark);
}

.switchers-top .woocommerce-currency-switcher-form {
  margin: 0;
}

/* ═══ przełączniki języka i waluty: jeden wygląd ═══

   Znacznik: inc/przelaczniki.php. Dwa przełączniki obok siebie robiły
   wcześniej co innego — język ciemną listą motywu nadrzędnego na najechanie,
   waluta gołym polem `<select>`, którego listę rysuje przeglądarka (i przy
   belce na górze ekranu rozwijała ją DO GÓRY, na wierzch strony). Teraz oba
   to ten sam przycisk i ta sama biała karta pod nim. */
.laris-przel {
  position: relative;
}

.laris-przel-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: var(--l-r-btn);
  background: transparent;
  color: var(--l-ink);
  font-family: var(--l-font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.laris-przel-btn:hover,
.laris-przel-btn[aria-expanded="true"] {
  border-color: var(--l-line-strong);
  background: var(--l-surface);
  color: var(--l-teal-dark);
}

.laris-przel-btn img {
  width: 16px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 2px;
}

.laris-przel-strzalka {
  display: flex;
  color: var(--l-muted);
  transition: transform .16s ease;
}

.laris-przel-btn[aria-expanded="true"] .laris-przel-strzalka {
  transform: rotate(180deg);
}

/* Karta zawsze POD przyciskiem i wyrównana do prawej krawędzi belki —
   przełączniki stoją w prawym górnym rogu, więc lista rozwijana w lewo
   nie wyjdzie za okno. */
.laris-przel-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1200;
  min-width: 150px;
  padding: 6px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  box-shadow: var(--l-shadow);
}

.laris-przel-panel[hidden] {
  display: none;
}

.laris-przel-poz {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--l-r-sm);
  background: transparent;
  color: var(--l-ink);
  font-family: var(--l-font-body);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.laris-przel-poz:hover {
  background: var(--l-bg);
  color: var(--l-teal-dark);
}

.laris-przel-poz.jest-czynna {
  color: var(--l-teal-dark);
  font-weight: 700;
}

.laris-przel-poz img {
  width: 16px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 2px;
}

/* Na telefonie przełączniki wchodzą w rozwinięte menu pod burgerem, gdzie
   nie ma nad nimi belki — karta idzie wtedy w zwykłym przepływie, żeby nie
   wisiała nad treścią menu. */
@media (max-width: 767px) {
  .laris-przel {
    width: 100%;
  }

  .laris-przel-btn {
    width: 100%;
    justify-content: center;
    border-color: var(--l-line-strong);
    background: var(--l-surface);
  }

  .laris-przel-panel {
    position: static;
    margin-top: 6px;
    min-width: 0;
    box-shadow: none;
  }
}

/* ═══ mega-menu kategorii ═══ */

/* Na shop.laris.ua kategorie rozwijają się szerokim panelem, a nie wąską
   listą pod jednym słowem. Robimy to samo bez ruszania szablonu: pozycję
   liczymy od belki, a nie od pojedynczego punktu menu, i układamy pozycje
   w kolumny.

   Próg 768 px, nie 993. Wcześniej panel zaczynał się dopiero od 993 px,
   bo założyliśmy, że niżej menu zwija się do burgera. Tak nie jest: burger
   pojawia się dopiero poniżej 768 px, a w paśmie 768–992 belka kategorii
   jest w pełni widoczna. Podmenu spadało tam gołą listą motywu nadrzędnego,
   bez tła i bez ramki, wprost na nagłówek pierwszego ekranu — przez litery
   „Seria ELITE” prześwitywał tekst strony. */

@media (min-width: 768px) {
  /* Panel liczy szerokość od całego rzędu, nie od samej belki kategorii —
     inaczej kończyłby się w miejscu, gdzie zaczyna się infolinia. */
  .top .container > .row-flex {
    position: relative;
  }

  .category-navbar {
    position: static;
  }

  .category-navbar > nav > ul > li.menu-item-has-children {
    position: static;
  }

  .category-navbar > nav > ul > li.menu-item-has-children > ul.sub-menu {
    left: 0;
    right: 0;
    width: 100%;
    /* Motyw nadrzędny daje podmenu „position: absolute; left: 0”, ale nie
       podaje „top” (style.css:669). Przy naszym „position: static” na pozycji
       menu przeglądarka bierze wtedy miejsce statyczne — tuż pod odnośnikiem,
       a nie pod całą belką. Na desktopie różnica była niewidoczna, w paśmie
       768–992 px belka jest wyższa i panel wchodził na nią o 33 px, ścinając
       w pół „Suszarki elektryczne” i „Promocje!”. Wiążemy go z dołem rzędu. */
    top: 100%;
    margin-top: 0;
    display: grid;
    /* auto-fill, a nie sztywne cztery kolumny: gałęzie mają od dwóch
       do kilkunastu pozycji i przy sztywnej siatce dwie pozycje rozjeżdżały
       się na pół ekranu. */
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0 30px;
    padding: 0 26px;
    background: var(--l-surface);
    border: 1px solid var(--l-line);
    border-top: 2px solid var(--l-teal);
    border-radius: 0 0 var(--l-r) var(--l-r);
    box-shadow: var(--l-shadow-lg);
  }

  /* „:focus-within” obok „:hover”: bez tego panel otwierała wyłącznie mysz,
     a idący tabulatorem trafiał w linki podmenu przy zerowej wysokości
     kontenera — czyli w nic. */
  .category-navbar > nav > ul > li.menu-item-has-children:hover > ul.sub-menu,
  .category-navbar > nav > ul > li.menu-item-has-children:focus-within > ul.sub-menu {
    max-height: 460px;
    padding: 22px 26px 26px;
  }

  /* Widoczny fokus klawiatury — motyw nadrzędny zdejmuje obrys wszędzie. */
  .category-navbar > nav > ul > li > a:focus-visible,
  .category-navbar > nav > ul > li.menu-item-has-children > ul.sub-menu > li > a:focus-visible {
    outline: 2px solid var(--l-teal);
    outline-offset: 2px;
    border-radius: 3px;
  }

  .category-navbar > nav > ul > li.menu-item-has-children > ul.sub-menu > li {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    text-align: left;
  }

  .category-navbar > nav > ul > li.menu-item-has-children > ul.sub-menu > li > a {
    display: block;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.35;
    color: var(--l-ink-soft);
    border-bottom: 1px solid var(--l-line);
  }

  .category-navbar > nav > ul > li.menu-item-has-children > ul.sub-menu > li:last-child > a {
    border-bottom: 0;
  }

  .category-navbar > nav > ul > li.menu-item-has-children > ul.sub-menu > li > a:hover {
    color: var(--l-teal-dark);
  }
}

/* ═══ rytm strony ═══ */

/* Sekcje na stronie głównej stały zbyt blisko siebie — na jasnym tle
   wszystko zlewało się w jeden ciąg. Odstęp bierzemy z systemu, żeby
   nie mnożyć wartości. */
.pagewhitecontent > .container {
  padding-top: 8px;
  padding-bottom: var(--l-section);
}

.pagewhitecontent > .container:first-child {
  padding-top: var(--l-section);
}

.pagewhitecontent .row-margin {
  margin-bottom: 0;
}

.pagewhitecontent > .container > h3,
.pagewhitecontent > .container > .row-flex > h3 {
  margin-bottom: 28px;
}

/* Rząd zakładek „Polecamy” — tytuł i zakładki w jednej linii, z powietrzem. */
.pagewhitecontent .row-flex .tab-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tab-links .laris-tab {
  padding: 8px 18px;
  border: 1px solid transparent;
  border-radius: var(--l-r-btn);
  background: transparent;
  color: var(--l-ink-soft);
  font-family: var(--l-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.tab-links .laris-tab:hover {
  color: var(--l-teal-dark);
  border-color: var(--l-line-strong);
}

.tab-links .laris-tab.is-active {
  background: var(--l-teal-tint);
  border-color: var(--l-teal-tint);
  color: var(--l-teal-dark);
}

/* ═══ „Polecamy”: równo DWA rzędy ═══

   Prośba klienta: „на главной делаем только 2 ряда под Polecamy”. Wcześniej
   każda zakładka wypisywała szesnaście towarów, czyli trzy rzędy i urwany
   czwarty — strona główna rosła o pół ekranu na nic.

   Same zapytania schudły do dwunastu (front-page.php), a tutaj pilnujemy,
   żeby rzędy były PEŁNE na każdej szerokości. Siatka katalogu liczy kolumny
   sama („auto-fill”), więc dwanaście kart daje przy pięciu kolumnach dwa
   i pół rzędu. Dlatego w tym jednym bloku liczba kolumn jest podana wprost,
   a nadmiar kart chowamy — zawsze zostaje 2 × liczba kolumn.

   Na szerokich monitorach kolumn jest sześć: klient prosił, żeby dobrać
   „ещё 2 продукта до полного ряда” — czyli dwanaście na dwa pełne rzędy. */
#oferta .products-selected .woocommerce ul.products {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#oferta .products-selected .woocommerce ul.products li.product:nth-child(n+13) {
  display: none;
}

@media (max-width: 1499px) {
  #oferta .products-selected .woocommerce ul.products {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  #oferta .products-selected .woocommerce ul.products li.product:nth-child(n+11) {
    display: none;
  }
}

@media (max-width: 1199px) {
  #oferta .products-selected .woocommerce ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #oferta .products-selected .woocommerce ul.products li.product:nth-child(n+9) {
    display: none;
  }
}

@media (max-width: 991px) {
  #oferta .products-selected .woocommerce ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #oferta .products-selected .woocommerce ul.products li.product:nth-child(n+7) {
    display: none;
  }
}

@media (max-width: 767px) {
  #oferta .products-selected .woocommerce ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #oferta .products-selected .woocommerce ul.products li.product:nth-child(n+5) {
    display: none;
  }
}

.grey-content,
.counters-row {
  padding: var(--l-section) 0;
}

/* „Nowości naszej marki” — powietrze nad nagłówkiem.

   Klient: „новости нашей марки — сильно прижато”. Zmierzone: pas
   z licznikami kończył się na 2677, a nagłówek zaczynał na 2685. Osiem
   pikseli — tyle daje „p-top” motywu nadrzędnego, a blok stoi tuż pod
   pełnoszerokościowym pasem, więc wyglądało to, jakby nagłówek do niego
   przykleiła. Rytm bierzemy ten sam, co reszta sekcji.

   Selektor z „.pagewhitecontent” z przodu, nie sama klasa: osiem pikseli
   bierze się z reguły „.pagewhitecontent > .container” niżej w tym pliku,
   a ta ma dwa człony i wygrywa z jednym. */
.pagewhitecontent > .container.laris-nowosci {
  padding-top: var(--l-section);
}

@media (max-width: 992px) {
  .pagewhitecontent > .container.laris-nowosci {
    padding-top: 36px;
  }
}

/* ── podpis sekcji łamał się w połowie nazwy firmy ──

   Klient: „подпись тут не красиво переносится, лучше не переносить”.
   „Niżej znajdują się nasze porady i nowości firmy Laris-Perfect” schodziło
   na drugi wiersz jednym słowem, i to rozciętym: „Laris-” zostawało u góry,
   „Perfect” samo pod spodem.

   Dwie przyczyny, obie do zdjęcia.

   Pierwsza — szerokość. Motyw nadrzędny trzyma cały blok podpisu na
   „max-width: 400px” (style.css:870), a zdanie potrzebuje 441 px. Czterdzieści
   jeden pikseli — i dlatego łamało się dokładnie na ostatnim słowie.
   Podnosimy próg do 620: przy 1366 i przy 768 px podpis mieści się w jednej
   linijce (zmierzone), a blok nadal jest wąską kolumną pod nagłówkiem,
   a nie akapitem na całą stronę.

   Druga — dywiz. „Laris-Perfect” przeglądarka ma prawo złamać PO myślniku,
   bo to zwykłe miejsce podziału; szerokość sama tego nie wyklucza, tylko
   odsuwa. „word-break: keep-all” takie podziały wewnątrz wyrazu wyłącza,
   więc nazwa firmy zostaje w całości nawet wtedy, gdy zdanie i tak musi
   się złamać — czyli na telefonie.

   Do tego „text-wrap: balance”: na 390 px zdanie schodzi na dwa wiersze
   po 230 i 207 px zamiast długiego i sierotki. Przeglądarki bez tej
   właściwości po prostu łamią jak dotąd. */
.header-section {
  max-width: 620px;
}

.header-section p {
  word-break: keep-all;
  text-wrap: balance;
}

/* Podstrony tekstowe: treść nie może zaczynać się tuż pod belką. */
.subpagecontent,
.txt-content {
  padding-bottom: 24px;
}

@media (max-width: 992px) {
  .pagewhitecontent > .container {
    padding-bottom: 36px;
  }

  .grey-content,
  .counters-row {
    padding: 36px 0;
  }
}

/* Wygląd „E-katalogu” przeniesiony do css/strony.css — ten arkusz leci na
   każdej stronie serwisu, a tamten tylko na czterech, na których jest
   potrzebny. */

/* ═══ przycisk „Katalog" przy logotypie ═══ */

/* Wzorzec: shop.laris.ua — logo, zaraz obok przycisk katalogu, dalej
   wyszukiwarka. Panel rozwija się pod samym przyciskiem, a nie na całą
   szerokość: przy sześciu gałęziach pełnoekranowa płachta to dużo pustki. */

.laris-cat {
  position: relative;
  display: none;              /* na telefonie rządzi burger */
  flex: 0 0 auto;
  margin-left: 18px;
}

@media (min-width: 768px) {
  .laris-cat {
    display: block;
  }
}

.laris-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--l-r-btn);
  background: var(--l-brand-dark);
  color: #fff;
  font-family: var(--l-font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease;
  -webkit-appearance: none;
  appearance: none;
}

.laris-cat-btn:hover,
.laris-cat-btn.is-open {
  background: var(--l-brand-deep);
  color: #fff;
}

/* Ikona-kratka z czterech kwadracików. Rysowana elementami, nie plikiem:
   cztery <span> w gridzie są lżejsze niż osobne żądanie po SVG i skalują
   się razem z krojem. */
.laris-cat-ico {
  display: grid;
  grid-template-columns: repeat(2, 6px);
  grid-template-rows: repeat(2, 6px);
  gap: 3px;
}

.laris-cat-ico span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
}

.laris-cat-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}

.laris-cat-btn.is-open .laris-cat-arrow {
  transform: rotate(-135deg) translate(-3px, -3px);
}

/* ——— panel ——— */

.laris-cat-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1000;
  min-width: 900px;
  padding: 22px 24px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-top: 2px solid var(--l-brand);
  border-radius: var(--l-r);
  box-shadow: var(--l-shadow-lg);
}

.laris-cat-panel[hidden] {
  display: none;
}

/* Dwie kolumny: po lewej działy, po prawej podkategorie tego, na którym
   stoi kursor.

   Droga do tego układu była długa. Najpierw wszystko leżało w kolumnach
   tekstowych („column-count: 3”) — dział mógł zacząć się w połowie
   wysokości sąsiada, a czytało się w dół i dopiero potem w prawo. Potem
   była zwykła siatka 3 × 2: rzędy równe, ale nadal cała zawartość na
   wierzchu naraz i nie było widać, co do czego należy.

   Teraz struktura jest widoczna sama z siebie: lewa szyna to spis działów,
   prawa kolumna należy zawsze do jednego z nich. */
.laris-cat-panel {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 0;
}

.laris-cat-rail {
  margin: 0;
  padding: 0 18px 0 0;
  border-right: 1px solid var(--l-line);
  list-style: none;
}

.laris-cat-panes {
  position: relative;
  padding-left: 24px;
  min-height: 260px;
}

.laris-cat-pane {
  display: none;
}

.laris-cat-pane.jest-czynny {
  display: block;
}

/* Dział, na którym stoi kursor — podświetlony, żeby było widać, czyja
   jest prawa kolumna. */
.laris-cat-top.jest-czynny {
  background: var(--l-brand-tint);
  color: var(--l-brand-dark);
}

.laris-cat-top.jest-czynny .laris-cat-name::after {
  opacity: .75;
  transform: translateY(-50%) translateX(3px) rotate(45deg);
}

/* Przejście do całego działu — także dla „Promocji” i „E-katalogu”,
   które podkategorii nie mają wcale i bez tego zostawiałyby pustkę. */
.laris-cat-przejdz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 9px 16px;
  border-radius: var(--l-r-btn);
  background: var(--l-brand-tint);
  color: var(--l-brand-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.laris-cat-przejdz:hover {
  background: var(--l-brand-dark);
  color: #fff;
}

/* Podkategorie w dwóch kolumnach — dziesięć serii suszarek w jednym
   słupku zrobiłoby z panelu drabinę na pół ekranu. */
.laris-cat-sub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.laris-cat-col {
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.laris-cat-top {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--l-font-body);
  font-size: 15px;
  font-weight: 600;
  /* Odziedziczone 1,8 rozrzucało dwuwierszowe nazwy („Suszarki elektryczne",
     „Akcesoria do łazienki") tak, że wyglądały na dwie osobne pozycje. */
  line-height: 1.25;
  color: var(--l-ink);
  text-decoration: none;
  padding-bottom: 8px;
}

.laris-cat-top:hover {
  color: var(--l-brand-dark);
}

/* ——— miniatury kategorii w panelu ———

   Ramka o stałym rozmiarze stoi także pusta. Zdjęcia kategorii są pionowe
   (120 × 175), więc „contain" zostawia po bokach powietrze — bez ramki
   o stałej szerokości podpisy sąsiednich gałęzi zaczynałyby się w różnych
   miejscach i kolumna wyglądałaby na złamaną. */
.laris-cat-thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  background: var(--l-surface-2);
  border-radius: var(--l-r-sm);
}

/* Klasa, a nie „:empty" — między znacznikami stoją wcięcia szablonu, więc
   selektor pustego elementu nigdy się nie łapie i „E-katalog" świecił szarym
   kwadratem. Miejsce zostaje zajęte, żeby podpisy trzymały jedną linię. */
.laris-cat-thumb--pusta {
  background: transparent;
}

.laris-cat-thumb-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Nazwa musi móc się zawinąć — „Akcesoria do łazienki" nie mieści się
   w kolumnie w jednym wierszu obok ramki. */
.laris-cat-name {
  min-width: 0;
}

.laris-cat-sub {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* „display: block" obowiązkowo: motyw nadrzędny ustawia pozycje list
   w nagłówku na inline-block (style.css:1969), przez co „Seria ELITE"
   i „Seria CLASSIC" sklejały się w jeden wiersz. */
.laris-cat-sub li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Podpozycje wyglądały jak zwykły tekst: bez tła, bez podkreślenia, pole
   kliknięcia wysokości samej linijki. Klient: „nie wiadomo, gdzie nacisnąć”.
   Dajemy im wyraźne pole — wcięcie, wysokość 34 px i tło pod kursorem. */
.laris-cat-sub a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  margin-left: -12px;
  border-radius: var(--l-r-sm);
  font-size: 15px;
  line-height: 1.35;
  color: var(--l-ink);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.laris-cat-sub a:hover {
  color: var(--l-brand-dark);
  background: var(--l-brand-tint);
}

/* Nazwa działu też jest odnośnikiem — i wyglądała identycznie jak nagłówek
   kolumny, czyli na nic nieprowadzący podpis. Strzałka pojawia się pod
   kursorem, żeby było widać, że to przejście do kategorii. */
/* Wysokość rzędu w szynie. Działy stały ciasno jeden pod drugim i przy
   sześciu pozycjach lewa kolumna czytała się jak zbity blok — a to jest
   spis, po którym się wędruje kursorem. */
.laris-cat-top {
  padding: 12px 12px;
  margin-left: -12px;
  border-radius: var(--l-r-sm);
  transition: background-color .15s ease, color .15s ease;
}

.laris-cat-top:hover {
  background: var(--l-brand-tint);
}

.laris-cat-name {
  position: relative;
  padding-right: 16px;
}

.laris-cat-name::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  width: 6px;
  height: 6px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
  transform: translateY(-50%) rotate(45deg);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}

.laris-cat-top:hover .laris-cat-name::after {
  opacity: .75;
  transform: translateY(-50%) translateX(3px) rotate(45deg);
}

/* Wąskie okna. Panel jest przypięty do lewej krawędzi przycisku, a przycisk
   stoi już spory kawałek od brzegu — przy 768 px kontener ma 700 px i panel
   wychodził poza ekran w prawo. Poniżej 993 px odczepiamy go od przycisku
   i wyśrodkowujemy względem nagłówka. */
@media (max-width: 992px) {
  .laris-cat-panel {
    min-width: 0;
    width: min(92vw, 640px);
    left: 50%;
    transform: translateX(-50%);
  }

  /* „position: static" na opakowaniu, żeby „left: 50%" liczyło się
     od nagłówka, a nie od samego przycisku. */
  .laris-cat {
    position: static;
  }

  .middle-nav-header .row-flex {
    position: relative;
  }

  .laris-cat-list {
    column-count: 2;
  }
}

/* Pasmo 768–992 px: kontener ma tu sztywne 700 px i przed naszą zmianą
   mieścił dokładnie logo + wyszukiwarkę + ikony. Dołożony przycisk „Katalog"
   przeważył szalę i ikony konta z koszykiem spadały pod logotyp.

   Zwężanie wyszukiwarki nie wystarczyło — przy 664 px sumy rząd i tak się
   łamał, bo dochodzą jeszcze marginesy pozycji. Zostawiamy więc sam znaczek
   kratki bez podpisu: ikona zajmuje 54 px zamiast 139 i wszystko wraca do
   jednego wiersza. Nazwa „Katalog" trafia do atrybutu dostępnościowego,
   więc czytnik ekranu nadal ją przeczyta. */
@media (min-width: 768px) and (max-width: 992px) {
  .laris-cat-label {
    display: none;
  }

  .laris-cat {
    margin-left: 12px;
  }

  .laris-cat-btn {
    padding: 12px 14px;
    gap: 8px;
  }

  /* ── znaczki spod logotypu z powrotem na swoje miejsce ──

     Klient o planszecie: „иконки wish list, koszyk, личный кабинет сверху
     все сжатые”. Zmierzone przy 768 px: rząd ma 670 px, a jego zawartość
     81 (logotyp) + 59 (Katalog) + 464 (szukajka) + 125 (znaczki) = 729 px.
     Rząd jest zawijany, więc znaczki spadały do drugiego wiersza i lądowały
     POD logotypem, ciasną kupką przy lewej krawędzi.

     Brakuje 59 px i wziąć je można tylko z szukajki — ale ona się nie
     kurczyła: pole tekstowe ma własną szerokość domyślną, a „min-width:
     auto” u elementu elastycznego nie pozwala zejść poniżej niej. Stąd
     zerowanie minimum na obu poziomach: na kolumnie i na samym polu. */
  .top .search-top {
    min-width: 0;
  }

  .top .search-top .search-field {
    width: 100%;
    min-width: 0;
  }

  /* Znaczki trzymają się prawej krawędzi rzędu, cokolwiek zostanie po
     szukajce — inaczej przy krótszym polu zawisłyby pośrodku. */
  .top .navbar-shop-buttons {
    margin-left: auto;
  }
}

/* ═══ rząd kategorii znika, gdy jest przycisk „Katalog" ═══ */

/* Od 768 px nawigację po kategoriach przejmuje przycisk przy logotypie,
   więc osobny rząd z nazwami jest zbędny — to on zjadał 50 px wysokości
   nagłówka i to on łamał się na dwa wiersze w paśmie 768–992.
   Poniżej 768 px rząd zostaje: tam mieszka menu spod burgera. */
@media (min-width: 768px) {
  .top > .container:last-of-type {
    display: none;
  }
}

/* Infolinia w górnym pasku — po przeniesieniu z rzędu kategorii. */
.laris-top-tel {
  display: none;
  align-items: center;
  gap: 6px;
  /* Bez „margin-left: auto". Wyglądało niewinnie — miało dosunąć numer
     w prawo — a zjadało całą wolną przestrzeń rzędu i dosuwało go do samej
     krawędzi. Przełącznikom języka i waluty nie zostawało już miejsca
     i spadały do drugiego wiersza, przez co górny pasek rósł z 69 do 100 px.
     Po polsku było tego nie widać, po niemiecku i angielsku od razu.

     Nie ma tu też własnego marginesu z prawej. Rząd stoi na
     „justify-content: space-between", więc odstępy rozdziela sam. Dodane
     przeze mnie 18 px przeważało szalę o dwa piksele: po niemiecku przy
     kontenerze 940 px wychodziło 942 i przełączniki znowu spadały niżej. */
  color: var(--l-ink);
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .laris-top-tel {
    display: inline-flex;
  }
}

.laris-top-tel img {
  max-width: 16px;
  height: auto;
}

.laris-top-tel b {
  color: var(--l-brand-dark);
  font-weight: 700;
}

.laris-top-tel:hover b {
  color: var(--l-brand-deep);
}

/* W paśmie 768–1270 px motyw nadrzędny zwęża kontener (700 px, potem 940 px),
   a górny pasek musi pomieścić menu, infolinię i dwa przełączniki. Po niemiecku
   sama treść potrzebowała 974 px przy 940 do dyspozycji, więc pasek łamał się
   na dwa wiersze i nagłówek rósł o 27–51 px. Zdejmujemy słowo „Infolinia" —
   ikona słuchawki mówi to samo, a numer zostaje. */
@media (max-width: 1270px) {
  .laris-top-tel span {
    display: none;
  }
}

/* Pasmo 993–1270 px: kontener ma 940 px, a w środkowym rzędzie stoi teraz
   o jeden element więcej — przycisk „Katalog" (139 px). Po niemiecku
   i angielsku rząd przestawał się mieścić i „koszyk z kontem" spadał do
   drugiego wiersza, przez co nagłówek rósł o 27–51 px.

   Zdejmujemy podpis przy ikonie konta („Zaloguj się / lub zarejestruj",
   ~120 px). Motyw nadrzędny robi dokładnie to samo poniżej 992 px
   (style.css:2100), więc zachowanie jest spójne, a same ikony zostają. */
@media (min-width: 993px) and (max-width: 1270px) {
  .navbar-shop-buttons span:not(.h-badge):not(.h-amount) {
    display: none;
  }

  /* Górne menu o pół stopnia mniejsze i z ciaśniejszymi odstępami.
     Po niemiecku „Lieferung und Bezahlung" i „Zusammenarbeit" robiły z paska
     924 px przy 940 do dyspozycji — arytmetycznie mieściło się, ale
     przeglądarka i tak łamała rząd. Zamiast walczyć o dwa piksele dajemy
     wyraźny zapas: to zdejmuje z menu około 60 px. */
  .top .header-top .navbar-top a {
    font-size: 12px;
  }

  .top .header-top .navbar-top li {
    padding-right: 6px;
  }

  .laris-cat-btn {
    padding: 12px 16px;
  }

  .laris-cat {
    margin-left: 12px;
  }
}

/* ═══ szerokie ekrany: jedna siatka dla wszystkiego ═══

   Motyw nadrzędny trzyma „.container" na sztywnych 1360 px i powyżej tej
   szerokości nie robi już nic. Przy 1920 px zostawało po 280 px pustego
   marginesu z każdej strony i strona wyglądała na wciśniętą w środek okna.

   Podnosimy kontener razem z pierwszym ekranem, jednym zapisem — inaczej
   któryś z nich znowu wyjdzie poza drugi i lewe krawędzie się rozjadą.
   Próg 1600 px, a nie 1441: przy 1440 px kontener 1560 nie zmieściłby się
   wcale, a przy 1536 zostałoby po 12 px na margines. */
@media (min-width: 1600px) {
  .container {
    width: 1560px;
  }

  .laris-prod-inner,
  .laris-prod-facts-inner {
    max-width: 1560px;
  }
}

/* ═══ liczniki przy sercu i koszyku ═══

   Motyw nadrzędny stawia je NA znaku: „right: -3px; bottom: 1px”
   (style.css:610). Kółko z liczbą siadało w dolnym rogu serca i w środku
   koszyka — przy pełnym koszyku wyglądało to jak dziura w rysunku, a nie
   jak licznik. Przenosimy je na zewnątrz, do prawego górnego rogu, i
   odcinamy białym pierścieniem, żeby nie zlewało się z kreską znaku. */
.navbar-shop-buttons .h-amount {
  top: -7px;
  right: -9px;
  bottom: auto;
  height: 17px;
  width: 17px;
  min-width: 17px;
  line-height: 17px;
  font-size: 10.5px;
  margin-left: 0;
  box-shadow: 0 0 0 2px var(--l-surface);
}

/* Kółko licznika zostaje kółkiem także po przewinięciu strony.

   Klient: „при скролле кружочки трансформируются в хедере”. Zmierzone:
   licznik koszyka ma 17 × 17 px u góry strony i 17 × 12 px po przewinięciu,
   czyli zamienia się w owal.

   Powód to zderzenie dwóch arkuszy. Motyw nadrzędny zmniejsza licznik przy
   zwężonym nagłówku („.top.scrolled .navbar-shop-buttons .h-amount”:
   12 × 12 px, style.css:463), a my wyżej dajemy mu „min-width: 17px”, żeby
   dwucyfrowa liczba się mieściła. Szerokość wygrywa minimum, wysokość idzie
   za nadrzędnym — i z koła robi się owal.

   Zostawiamy jeden rozmiar w obu stanach: 17 px to i tak mały znak, a jego
   zmniejszanie przy przewijaniu niczego nie daje poza tym błędem. Waga
   selektora ta sama, co u nadrzędnego (trzy klasy), a nasz arkusz jedzie
   później — więc wygrywa bez „!important”. */
.top.scrolled .navbar-shop-buttons .h-amount {
  width: 17px;
  height: 17px;
  min-width: 17px;
  line-height: 17px;
  font-size: 10.5px;
}

/* Zero to nie informacja, tylko szum — chowa je skrypt w header.php,
   bo licznik ulubionych wypełnia JavaScript motywu nadrzędnego. */
.navbar-shop-buttons .h-amount.laris-zero {
  display: none;
}

/* Trzy znaki w jednym rzędzie miały trzy różne wysokości: serce i koszyk
   po 28 px z „max-width”, a kółko konta rysowane w innej skali. Równamy
   pole każdego znaku, a nie sam obrazek — inaczej odstępy między nimi
   liczą się od różnych krawędzi. */
.navbar-shop-buttons img {
  width: 26px;
  height: 26px;
  max-width: 26px;
  object-fit: contain;
}

.navbar-shop-buttons a {
  margin-left: 26px;
}

/* ═══ martwy pas nad treścią ═══

   „theme.css:10” motywu nadrzędnego rezerwuje miejsce pod przypięty nagłówek
   sztywną liczbą: „body { padding-top: 208px }”. Liczba pochodzi sprzed
   obniżenia nagłówka — dziś ma on 153 px, więc nad treścią każdej podstrony
   zostawało 55 px pustki. Klient zgłaszał to jako „odstęp nie usunięty”.

   Wiążemy z tą samą zmienną, co reszta odstępów, więc wartość poprawia się
   sama przy każdej zmianie wysokości nagłówka i we wszystkich trzech progach.
   Strony głównej to nie dotyczy: „body.home” i „body.home.laris-hero-on”
   są bardziej szczegółowe i wygrywają niezależnie od kolejności arkuszy. */
body {
  padding-top: var(--l-header-h);
}

/* ═══ strona „Kontakt” ═══

   Znacznik: inc/kontakt.php (lewa kolumna) plus szablon nadrzędny
   „template-contact.php” (prawa kolumna z formularzem). */
/* Lewa kolumna: kontakt bezpośredni → adresy → dane rejestrowe.
   Jeden rytm odstępów na wszystkie trzy bloki. */
.laris-kontakt-kolumna {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Kontakt bezpośredni — telefon i poczta, na podkładzie marki.

   Klient: „блоки карточек … все как-то сжаты, некрасиво”. Telefon i dwa
   e-maile siedziały wewnątrz pierwszej karty adresowej i rozpychały ją
   do 315 px, podczas gdy druga karta miała sam adres i połowę wysokości
   wypełniała pustką. Teraz to osobny blok na pełną szerokość — a karty
   adresowe zrobiły się niskie i równe. */
.laris-kontakt-bezposredni {
  padding: 20px 24px;
  background: var(--l-brand-tint);
  border-radius: var(--l-r);
}

.laris-kontakt-tel {
  display: inline-block;
  font-family: var(--l-font-head);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .5px;
  color: var(--l-brand-dark);
}

.laris-kontakt-tel:hover {
  color: var(--l-brand-deep);
}

.laris-kontakt-etykieta {
  margin: 0 0 2px;
  color: var(--l-muted);
  font-size: 12.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.laris-kontakt-etykieta--mail {
  margin-top: 16px;
}

.laris-kontakt-maile {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Adresy poczty pigułkami — dwa adresy pod sobą czytało się jak jeden
   długi ciąg znaków, a to dwie różne skrzynki. */
.laris-kontakt-maile a {
  display: inline-block;
  padding: 7px 14px;
  background: var(--l-surface);
  border-radius: var(--l-r-btn);
  color: var(--l-brand-dark);
  font-size: 14.5px;
  font-weight: 500;
}

.laris-kontakt-maile a:hover {
  background: var(--l-brand-dark);
  color: #fff;
}

.laris-kontakt-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin: 0;
}

.laris-kontakt-karta,
.laris-kontakt-rejestr {
  padding: 18px 20px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

/* Odnośnik do map zawsze na dole karty — inaczej przy adresach różnej
   długości wisi na dwóch różnych wysokościach. */
.laris-kontakt-karta {
  display: flex;
  flex-direction: column;
}

.laris-kontakt-karta .laris-kontakt-mapa {
  margin-top: auto;
}

/* Przez kolumnę, nie przez siatkę: „Dane rejestrowe” stoją teraz OBOK
   siatki adresów, a nie w niej, i przy selektorze `.laris-kontakt-siatka …`
   ten jeden nagłówek wypadał na ogólną regułę h2 — 30 px wersalikami,
   największy napis w lewej kolumnie. */
.laris-kontakt-kolumna .laris-kontakt-tytul {
  margin: 0 0 12px;
  font-family: var(--l-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--l-ink);
}

.laris-kontakt-adres {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--l-ink);
}

/* Reguły „.laris-kontakt-wiersz”, „…-etykieta” w starym kształcie
   i „…-mocny” zdjęte razem ze znacznikami: telefon i poczta wyszły
   z karty adresowej do własnego bloku wyżej. */

.laris-kontakt-mapa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--l-teal-dark);
  font-size: 14px;
  font-weight: 600;
}

.laris-kontakt-mapa:hover span {
  transform: translateX(3px);
}

.laris-kontakt-mapa span {
  transition: transform .16s ease;
}

.laris-kontakt-rejestr dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  margin: 0;
}

.laris-kontakt-rejestr dt {
  margin: 0;
  color: var(--l-muted);
  font-size: 12.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.laris-kontakt-rejestr dd {
  margin: 2px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--l-ink);
}

/* ── formularz kontaktowy ──

   Klient: „форма некрасивая”. Zmierzone: pola szły jedno pod drugim przez
   całą szerokość 650 px, pole treści miało 254 px wysokości, a zgoda RODO
   stała tym samym stopniem co treść strony i zajmowała SZEŚĆ wierszy —
   najdłuższy tekst na stronie był drobnym drukiem. Cała kolumna urastała
   do 801 px, podczas gdy lewa kończyła się na 505, i pod adresami zostawał
   pusty ekran.

   Trzy zmiany: formularz dostaje ramkę karty (przestaje wisieć w powietrzu),
   imię i e-mail siadają obok siebie, a zgoda schodzi do drobnego druku,
   którym w istocie jest. Znaczników CF7 nie ruszamy — to treść klienta
   w panelu wtyczki. */
body.laris-kontakt .contact-right h2 {
  margin: 0 0 16px;
  font-size: clamp(20px, 2vw, 26px);
}

body.laris-kontakt .contact-left h1 {
  margin: 0 0 18px;
}

body.laris-kontakt .wpcf7 {
  padding: 24px 26px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

/* Sześć akapitów w kolejności: imię, e-mail, temat, treść, zgoda, przycisk.
   Dwie pierwsze pozycje w rzędzie, reszta na całą szerokość. */
body.laris-kontakt .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
}

body.laris-kontakt .wpcf7-form > p,
body.laris-kontakt .wpcf7-form > .wpcf7-response-output,
body.laris-kontakt .wpcf7-form > .hidden-fields-container {
  grid-column: 1 / -1;
}

body.laris-kontakt .wpcf7-form > p:nth-of-type(1) {
  grid-column: 1 / 2;
}

body.laris-kontakt .wpcf7-form > p:nth-of-type(2) {
  grid-column: 2 / 3;
}

@media (max-width: 640px) {
  body.laris-kontakt .wpcf7-form > p:nth-of-type(1),
  body.laris-kontakt .wpcf7-form > p:nth-of-type(2) {
    grid-column: 1 / -1;
  }
}

body.laris-kontakt .wpcf7 p {
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: .2px;
  color: var(--l-muted);
}

body.laris-kontakt .wpcf7 input[type="text"],
body.laris-kontakt .wpcf7 input[type="email"],
body.laris-kontakt .wpcf7 input[type="tel"],
body.laris-kontakt .wpcf7 textarea {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 11px 14px;
  border: 1px solid var(--l-line-strong);
  border-radius: var(--l-r-field);
  font-size: 15px;
  color: var(--l-ink);
  background: var(--l-surface);
}

/* „height”, nie „min-height”: CF7 wypisuje textarea z rows="10" i to ono
   dawało 254 px — samo min-height niczego nie skracało. */
body.laris-kontakt .wpcf7 textarea {
  height: 140px;
  min-height: 140px;
  resize: vertical;
}

/* Zgoda RODO — drobny druk, i tak ma wyglądać. Znacznik zaczyna się od
   <input type=checkbox>, więc kwadracik trzymamy w rzędzie z tekstem
   flexem na etykiecie, żeby druga linijka nie podjeżdżała pod niego. */
body.laris-kontakt .wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

body.laris-kontakt .wpcf7-acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--l-muted);
}

body.laris-kontakt .wpcf7-acceptance input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--l-brand-dark);
}

body.laris-kontakt .wpcf7 .wpcf7-submit {
  width: 100%;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--l-r-btn);
  background: var(--l-brand-dark);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .16s ease;
}

body.laris-kontakt .wpcf7 .wpcf7-submit:hover {
  background: var(--l-brand-deep);
}

/* ═══ wpis blogu ═══

   Klient: „стили блога ещё поправляем … тут всё поплыло и не красиво”.
   Zmierzone na „/hvacwarsaw2024/” przy oknie 1440 px: kolumna tekstu
   1330 px, akapit 15 px z interlinią 27 px — blisko dwustu znaków w wierszu,
   czyli oko gubi początek następnego. Nad tytułem stało zdjęcie w surowym
   rozmiarze (641 × 466) bez ramki, a pod tytułem nie było daty.

   Ten sam zabieg, co na stronach tekstowych: węższa kolumna i większy
   stopień pisma. Klasę „laris-wpis” stawia template.php, więc reguły nie
   dotykają zwykłych stron. */
body .txt-content.subpagecontent.laris-wpis {
  display: flex;
  flex-direction: column;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Tytuł przed zdjęciem, choć w znacznikach jest po nim: szablon nadrzędny
   wypisuje miniaturę pierwszą, a artykuł zaczyna się od tytułu. */
.laris-wpis > h1 {
  order: -2;
  margin: 0 0 10px;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.18;
}

.laris-wpis .laris-wpis-data {
  order: -1;
  margin: 0 0 22px;
  color: var(--l-muted);
  font-size: 14px;
}

/* Zdjęcie wiodące: ramka jak wszędzie w serwisie i sufit wysokości, żeby
   pionowy plik nie zajmował całego pierwszego ekranu.

   „width: auto”, nie „100%”: przy stu procentach znacznik rozciągał się na
   całe 820 px kolumny, a plik ma 540 — „object-fit: contain” wpasowywał
   obraz w środek i po bokach zostawały dwa szare pasy po 140 px. Ramka ma
   obejmować zdjęcie, a nie zdjęcie pływać w ramce. */
.laris-wpis > img,
.laris-wpis .attachment-post-thumbnail {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  margin: 0 auto 26px;
  padding: 8px;
  background: var(--l-bg);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

/* Wpis idzie tą samą skalą stopni, co strony tekstowe („O firmie”,
   „Gwarancja”, „Dostawa”). Wcześniej miał własną — 34 / 23 / 19 / 16,5 —
   i po przejściu z jednej strony na drugą tekst zmieniał rozmiar bez
   powodu. To ten sam zarzut, który klient postawił stronie „O firmie”. */
.laris-wpis {
  --laris-txt-h2: 20px;
  --laris-txt-tekst: 16px;
  --laris-txt-lh: 1.7;
}

.laris-wpis p {
  max-width: 72ch;
  margin: 0 0 18px;
  font-size: var(--laris-txt-tekst);
  line-height: var(--laris-txt-lh);
  color: var(--l-ink-soft);
}

.laris-wpis strong {
  color: var(--l-ink);
  font-weight: 600;
}

/* Nagłówki w treści. Bez tego wszystkie h2 łapały regułę „.txt-content h2”
   z design-system.css — wersaliki 30 px, czyli w każdym śródtytule drugi
   tytuł strony. Krój tytułowy i wersaliki, tak samo jak na stronach
   tekstowych: różnicę między tytułem wpisu a śródtytułem robi rozmiar. */
.laris-wpis h2 {
  margin: 34px 0 12px;
  font-family: var(--l-font-head);
  font-size: var(--laris-txt-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.laris-wpis h3 {
  margin: 26px 0 10px;
  font-family: var(--l-font-body);
  font-size: var(--laris-txt-tekst);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}

.laris-wpis ul,
.laris-wpis ol {
  max-width: 72ch;
  margin: 0 0 18px;
  padding-left: 22px;
}

.laris-wpis li {
  margin: 0 0 6px;
  font-size: var(--laris-txt-tekst);
  line-height: var(--laris-txt-lh);
  color: var(--l-ink-soft);
}

/* Punktory. Motyw nadrzędny gasi znaczniki na WSZYSTKICH listach
   („list-style: none” w jego arkuszu), co w menu i w kafelkach jest
   w porządku, ale we wpisie zamienia wyliczenie w zbitek wierszy.
   Zmierzone na wpisie o grzejniku wodnym i elektrycznym: dziewiętnaście
   pozycji, żadnego punktora i żadnego wcięcia — z odległości metra lista
   niczym nie różni się od akapitów wokół. Wracają kropki, ale wyłącznie
   w treści wpisu. */
.laris-wpis ul {
  list-style: disc outside;
}

.laris-wpis ol {
  list-style: decimal outside;
}

.laris-wpis li::marker {
  color: var(--l-muted);
}

/* Zdjęcia wstawione w tekst. Miniatura wiodąca ma ramkę i sufit wysokości
   (reguła wyżej), a obrazek z edytora szedł bez niczego: plik 850 px
   rozpychał się na całe 790 px kolumny i przy 527 px wysokości zajmował
   ponad połowę ekranu. Ten sam kadr, co u miniatury, żeby wpis miał jedną
   ramkę, a nie dwie różne. */
.laris-wpis figure.wp-block-image {
  margin: 26px auto;
  text-align: center;
}

.laris-wpis figure.wp-block-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  margin: 0 auto;
  padding: 8px;
  background: var(--l-bg);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

.laris-wpis figure.wp-block-image figcaption {
  margin: 8px 0 0;
  color: var(--l-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* ═══ okruchy ═══

   Klient: „сверху хлебные крошки имеют какую-то серую тень, потом ещё
   другое, там не видно”. Dwie rzeczy naraz. Pas ma u nadrzędnego
   „background: #f3f3f3”, a strona pod nim #f5f7f9 — dwie szarości różniące
   się o dwa punkty, czyli pod nagłówkiem widać smugę, której nikt nie
   zamawiał. A napis w nim jest #929292: na tym tle 2,86:1, czyli faktycznie
   „не видно”. Pas idzie w tło strony, napis schodzi na naszą szarość
   (5,06:1), bieżąca pozycja jest ciemna. */
.breadcrumbs-container {
  background-color: transparent;
  padding: 18px 0 0;
  margin-bottom: 30px;
}

.breadcrumbs-container a,
.breadcrumbs-container span {
  color: var(--l-muted);
  font-size: 13px;
}

.breadcrumbs-container a:hover {
  color: var(--l-brand-dark);
}

/* Ostatni okruch to miejsce, w którym kupujący stoi — ma być czytelny,
   a nie najbledszy napis na stronie. */
.breadcrumbs-container .current-item,
.breadcrumbs-container [property="itemListElement"]:last-child span {
  color: var(--l-ink-soft);
}

/* ═══ lista wpisów: rubryka blogu, tagi, archiwum ═══

   Znaczniki: index.php motywu potomnego. Co było u nadrzędnego i dlaczego
   zostało przepisane — w nagłówku tamtego pliku. */
.laris-blog > h1 {
  margin-bottom: 10px;
}

.laris-blog-opis {
  max-width: 72ch;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--l-ink-soft);
}

.laris-blog-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
}

.laris-blog-karta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  box-shadow: var(--l-shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.laris-blog-karta:hover {
  box-shadow: var(--l-shadow);
  border-color: var(--l-line-strong);
  transform: translateY(-3px);
}

/* Stała proporcja kadru — to ona wyrównuje rząd. Wcześniej wysokość brała
   się z pliku i sąsiednie kafle różniły się o ponad sto pikseli. */
.laris-blog-kadr {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--l-bg);
  overflow: hidden;
}

.laris-blog-kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.laris-blog-karta:hover .laris-blog-kadr img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .laris-blog-karta:hover .laris-blog-kadr img {
    transform: none;
  }
}

.laris-blog-tresc {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px 20px;
}

.laris-blog-data {
  margin: 0;
  color: var(--l-muted);
  font-size: 13px;
}

.laris-blog-tytul {
  margin: 0;
  font-family: var(--l-font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.laris-blog-tytul a {
  color: var(--l-ink);
}

.laris-blog-tytul a:hover {
  color: var(--l-brand-dark);
}

.laris-blog-zajawka {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--l-ink-soft);
}

/* „Czytaj więcej” to <span>, nie odnośnik: cały kafel i tak prowadzi
   do wpisu przez tytuł i kadr, a trzeci odnośnik do tego samego miejsca
   czytnik ekranu ogłaszałby trzy razy. */
.laris-blog-wiecej {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--l-brand-dark);
  font-size: 14px;
  font-weight: 600;
}

.laris-blog-strzalka {
  transition: transform .16s ease;
}

.laris-blog-karta:hover .laris-blog-strzalka {
  transform: translateX(3px);
}

.laris-blog .navigation.pagination {
  margin-top: 34px;
}

.laris-blog .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.laris-blog .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--l-line-strong);
  border-radius: var(--l-r-btn);
  background: var(--l-surface);
  color: var(--l-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.laris-blog .page-numbers:hover {
  border-color: var(--l-brand);
  color: var(--l-brand-dark);
}

.laris-blog .page-numbers.current {
  background: var(--l-brand-dark);
  border-color: var(--l-brand-dark);
  color: #fff;
}

.laris-blog-pusto {
  margin: 0;
  padding: 28px 0;
  color: var(--l-ink-soft);
}

.laris-wpis a:not(.button) {
  color: var(--l-teal-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Zdjęcia w treści wpisu — tak samo oprawione jak wiodące, ale bez sufitu:
   bywają to zrzuty i plany stoiska, na których liczy się każdy szczegół. */
.laris-wpis figure,
.laris-wpis .wp-block-image {
  margin: 0 0 24px;
}

.laris-wpis figure img,
.laris-wpis .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--l-r-sm);
}

.laris-wpis figcaption {
  margin-top: 8px;
  color: var(--l-muted);
  font-size: 13.5px;
}

.laris-wpis blockquote {
  margin: 0 0 22px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--l-teal);
  color: var(--l-ink);
  font-size: 17px;
  line-height: 1.6;
}

.laris-wpis table {
  width: 100%;
  margin: 0 0 24px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}

.laris-wpis table th,
.laris-wpis table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--l-line);
  font-size: 15px;
  text-align: left;
}

.laris-wpis table tr:last-child th,
.laris-wpis table tr:last-child td {
  border-bottom: 0;
}

/* ═══ pas zalet nad stopką ═══

   Klient: „эти иконки преимущества сильно прижаты”. I rzeczywiście: pas ma
   54 px wysokości, ZERO wyściółki u dołu i od razu pod nim zaczyna się
   ciemna stopka — cztery zalety wciśnięte w szczelinę między treścią
   i stopką. Ikony mają po 50 px, napis 15 px w jednej linijce, a na
   najechanie motyw nadrzędny przesuwa i ikonę, i napis o (10, −10) px,
   czyli pas jeszcze skacze.

   Dajemy mu oddech i spokój: wyściółka u dołu, ikony trochę mniejsze,
   napis dwie linijki bez ściskania, a z najechania zostaje sama zmiana
   koloru ikony. */
.container.services {
  padding-bottom: 40px;
}

.services .flex-content {
  padding: 0 22px;
  gap: 0;
}

.services .flex-content img {
  width: 42px;
  height: auto;
}

.services .flex-content h5 {
  max-width: 200px;
  padding-left: 14px;
  font-size: 14.5px;
  line-height: 1.35;
}

/* Kreska między zaletami była wysoka na 65 px przy pasie 54 px — wystawała
   ponad treść. Skracamy do wysokości napisu. */
.services .flex-content:after {
  height: 44px;
}

.services .flex-content:hover img,
.services .flex-content:hover h5 {
  transform: none;
}

@media (max-width: 767px) {
  .container.services {
    padding-bottom: 28px;
  }

  /* Klient: „иконки преимуществ поломаны”. Rozjazd bierze się ze spotkania
     dwóch reguł, z których każda z osobna jest w porządku.

     Motyw nadrzędny poniżej 992 px rozkłada zaletę PIONOWO: „display:
     inline-block; text-align: center” (style.css:2149), czyli ikona nad
     napisem, oba na środku. Do tego zeruje wcięcie napisu i zdejmuje mu
     ograniczenie szerokości — bo w pionie żadne z nich nie ma sensu.

     Nasza reguła wyżej w tym pliku (ikony w rzędzie, napis w dwóch
     linijkach) tych dwóch wartości nie odwoływała: „max-width: 200px”
     i „padding-left: 14px” zostawały także na telefonie. Blok o stałej
     szerokości nie łapie się na „text-align: center” rodzica — środkuje mu
     tylko TEKST W ŚRODKU — więc napis stawał przy lewej krawędzi, ikona
     na środku, a między nimi jeszcze 14 px wcięcia znikąd. Zmierzone
     na 390 px: kafel 360 px, ikona w środku, napis w słupku 200 px
     dosuniętym do lewej.

     Wracamy do rzędu, tylko po jednej zalecie na linię: ikona z lewej,
     napis obok niej. Wtedy i „max-width”, i wcięcie znowu znaczą to,
     do czego były pisane. */
  .services .flex-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 0;
  }

  .services .flex-content h5 {
    max-width: none;
    padding: 0 0 0 14px;
  }

  /* Na telefonie zalety idą jedna pod drugą, więc pionowa kreska między
     nimi nie ma czego dzielić. */
  .services .flex-content:after {
    display: none;
  }
}

/* ═══ stopka ═══ */

/* ——— jeden blok zamiast trzech ———

   Zastane: jasny pas z czterema kolumnami menu (295 px), pod nim ciemny pas
   z pełnym drzewem kategorii wraz z podkategoriami, a na końcu prawa
   autorskie — razem 633 px. Na shop.laris.ua cała stopka ma 483 px i jest
   jednym blokiem. Tutaj wychodzi jeszcze mniej, bo z kategorii zostają
   same działy.

   Kolumn jest pięć, ale nie „repeat(5, 1fr)”: kolumna kontaktu potrzebuje
   miejsca na adres, a „Moje konto” to trzy krótkie hasła. Stąd auto-fit
   z minimum — przy wąskim oknie kolumny same schodzą do dwóch i jednej. */
.laris-stopka {
  padding: 40px 0 0;
}

.laris-stopka-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 28px 30px;
  padding-bottom: 32px;
}

.laris-stopka .navbar-footer-column {
  min-width: 0;
  font-size: 14px;
  line-height: 1.7;
}

.laris-stopka .navbar-footer-column ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.laris-stopka .navbar-footer-column li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.laris-stopka .navbar-footer-column span {
  display: block;
}

.laris-stopka .navbar-footer-column .phone a {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

/* Nagłówki kolumn stoją teraz na ciemnym tle — grafitowy z jasnej wersji
   był na nim nieczytelny (1,2:1). */
.laris-stopka .navbar-footer-column h5 {
  margin: 0 0 14px;
  color: #fff;
}

/* Dolny pasek: prawa autorskie po lewej, znaki płatności po prawej. */
.laris-stopka-dol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.laris-stopka-dol .copyright,
.laris-stopka-dol .copyright p {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 767px) {
  .laris-stopka {
    padding-top: 30px;
  }

  .laris-stopka-siatka {
    gap: 22px 24px;
    padding-bottom: 24px;
  }

  .laris-stopka-dol {
    justify-content: flex-start;
  }
}

/* Na telefonie „auto-fit” z minimum 190 px daje jedną kolumnę i stopka
   rozciąga się na 1150 px — pięć list jedna pod drugą. Dwie kolumny skracają
   ją o połowę, a hasła i tak są krótkie. */
@media (max-width: 599px) {
  .laris-stopka-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
  }

  .laris-stopka .navbar-footer-column {
    font-size: 13.5px;
  }
}

/* ——— formy płatności ———

   Zamiast jednego JPG-a z sześcioma znakami na wspólnym białym tle —
   sześć osobnych płytek. Tamten plik kładł się na ciemnej stopce białą
   łatą z ostrymi rogami; znaki muszą zostać na białym (takie są ich zasady
   użycia), ale białe ma być tło znaku, a nie prostokąt przez pół stopki. */
.laris-pay {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.laris-pay li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.laris-pay img {
  display: block;
  width: 64px;
  height: 38px;
  background: #fff;
  border-radius: 7px;
  /* Delikatna ramka, żeby biała płytka nie wyglądała jak dziura w stopce. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

@media (max-width: 991px) {
  .laris-pay {
    justify-content: flex-start;
    margin-top: 16px;
  }
}

/* ——— nagłówki kolumn ———

   Były zwykłym <h5> w tym samym szarym co odnośniki pod nimi: kolumny
   zlewały się w jedną listę i nie było widać, gdzie kończy się jedna,
   a zaczyna druga. Wersaliki i kreska w kolorze marki — tak samo jak
   na kaflach „Współpracy”, żeby serwis czytał się jednolicie. */
.navbar-footer-column h5 {
  margin: 0 0 18px;
  font-family: var(--l-font-head, "Manrope", "Segoe UI", system-ui, Arial, sans-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--l-ink);
}

.navbar-footer-column h5::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 8px;
  background: var(--l-brand);
}

/* Reguły dla „navbar-footer-categories” zdjęte razem z tamtym paskiem:
   pełne drzewo kategorii ze stopki zniknęło, a klasa nie występuje już
   nigdzie w szablonach. */

/* ═══ opinie i aktualności na stronie głównej ═══ */

/* Równa wysokość kafli w obu karuzelach.

   Slick nadaje każdemu slajdowi wysokość osobno, więc kafle opinii miały
   151, 151, 178 i 232 px — rząd wyglądał na rozsypany. „display: flex” na
   torze i „height: auto” na slajdzie sprawiają, że wszystkie ciągną się
   do najwyższego. */
.slider-clients .slick-track,
.slider-news .slick-track {
  display: flex;
  align-items: stretch;
}

.slider-clients .slick-slide,
.slider-news .slick-slide {
  height: auto;
}

.slider-clients .slick-slide > div,
.slider-news .slick-slide > div {
  height: 100%;
}

/* ——— opinie ———

   Zdjęcie klienta wisiało NAD kaflem („position: absolute; top: -32px”,
   style.css:847) i wchodziło na imię pod spodem. Do tego jest to jeden
   i ten sam zastępczy znaczek „user.svg” dla wszystkich — jako portret nic
   nie wnosi, jako znak przy imieniu wygląda sensownie.

   Znaczniki to trzy elementy obok siebie (img, h4, p), więc układamy je
   siatką zamiast przepinać w PHP. */
.slider-clients .slider-article-content {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "portret imie"
    "tekst   tekst";
  column-gap: 13px;
  row-gap: 15px;
  align-items: center;
  padding: 26px 24px;
  overflow: visible;
}

.slider-clients .slider-article-content img {
  grid-area: portret;
  position: static;
  width: 44px;
  height: 44px;
  padding: 9px;
  background: var(--l-brand-tint);
  border-radius: 100%;
  box-sizing: border-box;
}

.slider-clients .slider-article-content h4 {
  grid-area: imie;
  /* „static”, żeby cudzysłów liczył się od kafla, a nie od samego imienia —
     przy dłuższym nazwisku lądował dotąd w środku wiersza. */
  position: static;
  margin: 0;
  font-size: 15.5px;
}

.slider-clients .slider-article-content p {
  grid-area: tekst;
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--l-ink-soft);
}

.slider-clients .slider-article-content h4::after {
  top: 20px;
  right: 22px;
  bottom: auto;
  width: 26px;
  height: 17px;
  opacity: .5;
}

/* ——— aktualności ———

   Zdjęcia wpisów mają różne proporcje: baner targowy jest szeroki, rysunek
   techniczny prawie kwadratowy i na białym tle. W rzędzie dawało to kafle
   o różnej wysokości obrazu. Wspólny kadr 16:9 równa rząd; „cover”, bo
   przycięcie boków szkodzi tu mniej niż pasy nad i pod. */
.slider-news .slider-article-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 22px;
  overflow: hidden;
}

.slider-news .slider-article-content > a:first-child {
  display: block;
  margin: 0;
}

.slider-news .slider-article-content img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--l-surface-2);
}

.slider-news .slider-article-content time,
.slider-news .slider-article-content h4,
.slider-news .slider-article-content .bluetxt {
  margin-left: 22px;
  margin-right: 22px;
}

.slider-news .slider-article-content time {
  font-size: 13px;
  color: var(--l-muted);
}

.slider-news .slider-article-content h4 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.35;
}

/* Odnośnik do wpisu spychamy na sam dół, żeby we wszystkich kaflach
   stał na jednej wysokości niezależnie od długości tytułu. */
.slider-news .slider-article-content .bluetxt {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
}

/* ——— miniatury podpozycji ———

   Podkategorie prawie nigdy nie mają własnej miniatury, więc niosą zdjęcie
   pierwszego towaru — i to jest tu lepsze niż powtórzony kadr kategorii
   nadrzędnej: widać, co konkretnie kryje się pod nazwą.

   Ramka mniejsza niż przy gałęzi (32 px wobec 52), żeby podpozycja nadal
   czytała się jako podpozycja, a nie jako drugi rząd działów. */
/* Miniatura podpozycji bez szarej płytki pod spodem. Z płytką panel robił
   się ścianą kwadratów: sześć dużych przy działach i siedem małych pod
   nimi, wszystkie w ramkach. Zdjęcie towaru na białym tle wystarczy samo. */
.laris-cat-subthumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  background: transparent;
}

.laris-cat-subthumb.laris-cat-thumb--pusta {
  background: transparent;
}

.laris-cat-subname {
  min-width: 0;
}

/* ═══ podpowiedzi wyszukiwarki ═══ */

/* Kotwica dla listy. Pole wyszukiwania w nagłówku nie miało własnego
   układu współrzędnych, więc lista spadałaby na początek strony. */
.search-top {
  position: relative;
}

.laris-szukaj-lista {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 1200;
  max-height: 420px;
  overflow-y: auto;
  padding: 6px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-top: 2px solid var(--l-brand);
  border-radius: var(--l-r);
  box-shadow: var(--l-shadow-lg);
}

.laris-szukaj-lista[hidden] {
  display: none;
}

.laris-szukaj-poz {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--l-r-sm);
  color: var(--l-ink);
  text-decoration: none;
}

/* Jedna klasa na najechanie i na wybór z klawiatury — inaczej idący
   klawiaturą nie widzi, na czym stoi. */
.laris-szukaj-poz:hover,
.laris-szukaj-poz.jest-wybrany,
.laris-szukaj-wszystkie:hover,
.laris-szukaj-wszystkie.jest-wybrany {
  background: var(--l-brand-tint);
}

.laris-szukaj-poz img {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--l-surface-2);
  border-radius: var(--l-r-sm);
}

.laris-szukaj-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.laris-szukaj-nazwa {
  font-size: 14px;
  line-height: 1.3;
  color: var(--l-ink);
}

.laris-szukaj-cena {
  font-size: 13px;
  font-weight: 600;
  color: var(--l-brand-dark);
}

.laris-szukaj-info {
  margin: 0;
  padding: 14px 12px;
  font-size: 14px;
  color: var(--l-muted);
}

.laris-szukaj-wszystkie {
  display: block;
  margin-top: 4px;
  padding: 10px 12px;
  border-top: 1px solid var(--l-line);
  border-radius: 0 0 var(--l-r-sm) var(--l-r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--l-brand-dark);
  text-decoration: none;
}

/* Wąskie okna: panel ma tu 640 px, więc szyna działów o stałej szerokości
   268 zjadałaby prawie połowę, a podkategorie w dwóch kolumnach łamałyby
   się po jednym słowie. Szyna węższa, podkategorie w jednym słupku. */
@media (max-width: 992px) {
  .laris-cat-panel {
    grid-template-columns: 196px minmax(0, 1fr);
  }

  .laris-cat-rail {
    padding-right: 12px;
  }

  .laris-cat-panes {
    padding-left: 16px;
  }

  .laris-cat-sub {
    grid-template-columns: minmax(0, 1fr);
  }

  .laris-cat-thumb {
    width: 40px;
    height: 40px;
  }

  .laris-cat-subthumb {
    width: 38px;
    height: 38px;
  }

  .laris-cat-top {
    padding: 9px 10px;
  }
}

/* ═══ nagłówek po przewinięciu ═══

   Motyw nadrzędny zmniejsza po przewinięciu logo i ikony
   („.top.scrolled …”, style.css:446). Nasze „max-height: 52px” na logotypie
   ładuje się później i wygrywało kaskadę, więc logo zostawało duże,
   a rząd — ściśnięty. Zmierzone: pasek 106 px z logotypem 52.

   Do tego lista języków wychodziła 6 px POD dolną krawędź paska — to jest
   to „obcięcie”. Zamykamy ją w obrysie. */
/* Nagłówek po przewinięciu NIE jedzie do góry.

   Motyw nadrzędny chował pasek informacyjny, wciągając cały nagłówek
   ujemnym marginesem: „.top.scrolled { margin-top: -58px }” (style.css:442).
   Liczba 58 była dobrana pod ówczesną wysokość paska. Po ściśnięciu
   nagłówka pasek ma 34 px, więc te 58 zabierały dodatkowe 24 px z rzędu
   pod nim — z nagłówka zostawało 35 px zamiast 93 i wyglądał na ucięty
   w połowie. Dokładnie to zgłosił klient.

   Zamiast poprawiać liczbę (a jest jeszcze druga, −48 px, w paśmie
   tabletu) chowamy sam pasek. Wtedy nie ma czego przesuwać i nic się
   nie rozjedzie przy następnej zmianie wysokości. */
.top.scrolled {
  margin-top: 0;
  margin-bottom: 0;
}

.top.scrolled .header-top {
  display: none;
}

.top.scrolled .middle-nav-header .logo img {
  max-height: 38px;
}

.top.scrolled .middle-nav-header {
  padding: 5px 0;
}

.top.scrolled .header-top .navbar-top ul {
  padding: 3px 0;
}

.top.scrolled .search-top .search-field {
  padding: 6px 16px;
}

.top.scrolled .search-top .search-submit {
  padding: 5px 20px;
}

.top.scrolled .switchers-top .menu-language-switcher-container,
.top.scrolled .switchers-top .menu {
  max-height: 100%;
}

/* ═══ odstępy sekcji na stronie głównej ═══

   Motyw nadrzędny daje karuzeli opinii „padding-bottom: 120px”
   (style.css:844) — pod kaflami zostawał pas pustki wysokości pół ekranu
   telefonu. Kropki nawigacji siedzą w tym paskiem, więc miejsce na nie
   zostaje, ale bez przesady. */
.slider-clients {
  padding-bottom: 62px;
}

.pagewhitecontent .slider-clients .slick-dots {
  bottom: 18px;
}

/* ═══ brakujący rdzeń slicka ═══

   Motyw nadrzędny wczytuje TYLKO „slick-theme.css” — czyli skórkę: strzałki,
   kropki, kolory. Samego „slick.css”, który daje karuzeli układ, nie ma
   nigdzie. Skutek widać na każdej stronie z karuzelą: „.slick-list” zostaje
   z „overflow: visible”, więc slajdy stojące poza kadrem wychodzą na
   sąsiednią treść. Na stronie towaru dorobek „zalet” nachodził na siebie —
   zmierzone: lista 226 px, a tor 452.

   Nie dokładamy kolejnego pliku do wczytania (każdy kosztuje na wszystkich
   stronach) — wystarczy kilkanaście reguł, które są w rdzeniu naprawdę
   potrzebne. Reguły są ogólne, więc nasze wcześniejsze zapisy dla opinii
   i aktualności (dwie klasy) nadal wygrywają. */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track::before,
.slick-track::after {
  display: table;
  content: "";
}

.slick-track::after {
  clear: both;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-slide img {
  display: block;
}

/* ═══ strona towaru: główne działanie ═══

   Przycisk „do koszyka” miał 182 × 36 px przy zdjęciu 636 × 636 i cenie
   pisanej trzydziestką — najważniejsze działanie na stronie było najmniejsze
   ze wszystkiego. */
.woocommerce div.product form.cart .button.single_add_to_cart_button {
  min-height: 50px;
  padding: 14px 34px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--l-r-btn);
}

/* ══════════════════════════════════════════════════════════════════════
   TELEFON: nagłówek, menu działów, przełączniki

   Klient, oglądając serwis na telefonie: „настраиваем иконки поиска,
   иконки в 1 ряд — тут полный хаос”, „тут меню в левую часть”,
   „поправляем субкатегории меню, они не открываются”, „делаем удобный
   переключатель валют/языков”.

   Zmierzone na 390 px przed poprawką — pięć znaków w nagłówku stało
   w trzech różnych rozmiarach i na trzech różnych liniach:

     logo        x  15 →  96   y 7    52 px wysokości
     serce       x 135 → 161   y 27   24 px
     koszyk      x 187 → 213   y 27   24 px
     konto       x 239 → 265   y 27   24 px
     szukaj      x 285 → 310   y 29   27 px
     hamburger   x 330 → 360   y 29   20 px

   Stąd wrażenie chaosu: nic nie jest tej samej wielkości, nic nie stoi
   na jednej linii, a odstępy między znakami są przypadkowe.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

  /* Jeden rząd, jedna linia, jedna wielkość.

     Rząd nagłówka układamy elastycznie i pozwalamy mu wyrównać wszystko
     w pionie. Hamburger idzie na LEWO — klient poprosił o menu po lewej
     stronie, a to jest miejsce, w którym szuka się go kciukiem. */
  .middle-nav-header .row.row-flex {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  /* Wszystkie trzy grupy znaków motyw nadrzędny ustawia BEZWZGLĘDNIE,
     każdą z własnym „top”: hamburger 7 px, lupa 7 px, a serce/koszyk/konto
     20 px. Dlatego stały na trzech różnych liniach, i dlatego samo
     „align-items: center” na rzędzie niczego nie dawało — pozycjonowanie
     bezwzględne wyjmuje element z układu elastycznego.

     Zdejmujemy je z pozycjonowania i oddajemy rzędowi. Dopiero wtedy
     wyrównanie w pionie zaczyna cokolwiek znaczyć. */
  #burger-menu,
  #search-btn,
  .navbar-shop-buttons {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    transform: none;
  }

  /* …ale hamburgerowi „static” zabrać nie wolno, i to nas kosztowało pas
     kresek przez cały nagłówek.

     Trzy kreski hamburgera to <span>-y, którym motyw nadrzędny daje
     „position: absolute; width: 100%; left: 0” (style.css:2738). Punktem
     odniesienia był dla nich sam przycisk — dopóki stał na „absolute”.
     Reguła wyżej przestawiła go na „static”, więc kreski zaczęły liczyć
     się od NAJBLIŻSZEGO USTAWIONEGO PRZODKA, a jest nim „.middle-nav-header”
     (dostaje „position: relative” kilkadziesiąt wierszy niżej, dla pola
     wyszukiwania).

     Zmierzone na 390 px przed poprawką: przycisk 40 × 40, a kreski
     360 × 2 px na y = 7, 17 i 27 — trzy czarne pasy przez całą szerokość
     ekranu, nad logotypem. Dokładnie to, co widać na zdjęciu od klienta.

     „relative” wraca im właściwy układ odniesienia, nie ruszając układu
     rzędu: element ustawiony względnie bez przesunięć stoi tam, gdzie
     stałby zwyczajnie. */
  #burger-menu {
    position: relative;
    order: -1;
    margin-right: 4px;
  }

  /* Kreski liczone od pola dotyku 40 × 40: szerokość 22 px (tyle mają
     rysunki lupy, serca i koszyka obok), grupa 13–27 px, czyli środek
     w środku pola.

     Kolor pełny zamiast przelewki. Nadrzędny maluje kreski gradientem
     „od czerni do rgba(202,205,198)” (style.css:2738) — przy kresce
     rozciągniętej na całą szerokość nagłówka przejście było płynne,
     a na 22 px robi z hamburgera znak wyblakły w połowie, tuż obok
     trzech zupełnie czarnych rysunków sklepu. */
  #burger-menu span {
    width: 22px;
    left: 9px;
    background: var(--l-ink);
  }

  #burger-menu span:nth-child(1) { top: 13px; }
  #burger-menu span:nth-child(2) { top: 19px; }
  #burger-menu span:nth-child(3) { top: 25px; }

  /* Krzyżyk po otwarciu.

     Klient: „что с крестиком?”. Nadrzędny obraca kreski wokół LEWEGO
     środka i dosuwa je własnymi „top/left” liczonymi od kresek na 0
     i 20 px (style.css:2778). Przy obrocie wokół lewego końca ramiona
     krzyżują się nie tam, gdzie środek przycisku: zmierzone na 390 px —
     przecięcie wypadało w (18, 20) przy środku pola (20, 20), czyli
     krzyżyk siedział o dwa piksele w lewo i wyglądał na przekrzywiony.

     Składamy go inaczej: obie kreski kładziemy na jednej linii przez
     środek pola i obracamy wokół WŁASNEGO środka. Wtedy przecięcie
     wypada dokładnie w (20, 20), a ramiona są równe. */
  #burger-menu.open span:nth-child(1),
  #burger-menu.open span:nth-child(3) {
    top: 19px;
    left: 9px;
    width: 22px;
    transform-origin: center;
  }

  #burger-menu.open span:nth-child(1) {
    transform: rotate(45deg);
  }

  #burger-menu.open span:nth-child(3) {
    transform: rotate(-45deg);
  }

  .middle-nav-header .logo {
    margin-right: auto;
  }

  /* Pole wyszukiwarki wypadało z rzędu i spychało znaki sklepu do drugiej
     linii — zmierzone: „.search-top” ma „flex: 1 1 auto”, więc rozpychało
     się na całą wolną szerokość, a nagłówek rósł z 66 na 110 px.

     Na telefonie wyszukiwarka nie ma stać w rzędzie: otwiera ją lupa
     i wtedy ma spaść POD nagłówek, na całą szerokość. Wyjmujemy ją więc
     z układu (pozycjonowanie bezwzględne) i przypinamy do dołu nagłówka. */
  .middle-nav-header .search-top {
    position: absolute;
    /* Punktem odniesienia jest „.row.row-flex” (motyw nadrzędny ustawia mu
       „position: relative”), a ten rząd stoi już wewnątrz wyściółki strony —
       dlatego zero, a nie piętnaście. */
    left: 0;
    right: 0;
    top: 100%;
    z-index: 40;
    flex: 0 0 auto;
    width: auto;
  }

  .middle-nav-header {
    position: relative;
  }

  /* Pole dotyku 40 × 40 dla KAŻDEGO znaku — tyle wynosi minimum, przy
     którym palec trafia bez powiększania. Sam rysunek zostaje mały. */
  #burger-menu,
  #search-btn,
  .navbar-shop-buttons > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    margin: 0;
    background: none;
    border: 0;
  }

  #search-btn img,
  .navbar-shop-buttons > a img {
    width: 22px;
    height: 22px;
    max-width: 22px;
    object-fit: contain;
  }

  .navbar-shop-buttons {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    float: none;
  }

  /* Licznik przy koszyku liczony od pola 40 px, a nie od rysunku. */
  .navbar-shop-buttons > a {
    position: relative;
  }

  .navbar-shop-buttons .h-amount {
    top: 4px;
    right: 2px;
  }

  /* ── rozwijanie działów w menu ──────────────────────────────────────

     Pozycja z podmenu dostaje przycisk ze strzałką (skrypt w
     inc/menu-mobilne.php). Sama nazwa nadal prowadzi do działu. */
  .top li.laris-podmenu-jest {
    position: relative;
  }

  .top li.laris-podmenu-jest > a {
    padding-right: 52px;
  }

  .laris-podmenu-btn {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  /* Strzałka rysowana krawędziami — bez pliku i bez fontu ikon. */
  .laris-podmenu-btn span {
    width: 9px;
    height: 9px;
    border: solid var(--l-ink-soft, #4a525c);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .18s ease;
  }

  .laris-podmenu-btn[aria-expanded="true"] span {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* Podmenu schowane, dopóki nikt go nie rozwinął. Reguła jest po klasie
     rodzica, a nie po „:hover” — na dotyku najechania nie ma. */
  .top li.laris-podmenu-jest > ul {
    display: none;
  }

  /* Rozwinięte podmenu musi dostać TRZY rzeczy naraz, nie samo „display”.

     Klient: „дропдаун в меню на телефоне не работает”. I nie działał,
     choć przycisk przełączał klasę poprawnie. Zmierzone po kliknięciu:
     „display: block”, ale przy tym „max-height: 0px”, „overflow: hidden”
     i „opacity: 0” — czyli lista rozwijała się do zera i przezroczysta.
     Pozycje były na swoim miejscu (dwie po 42 px), tylko przycięte.

     To zwijanie motywu nadrzędnego, wspólne dla całego menu. Moje
     wcześniejsze sprawdzenia patrzyły wyłącznie na „display” i dlatego
     przepuściły usterkę — stąd trzy rundy „poprawione”, a u klienta
     dalej nic. */
  .top li.laris-podmenu-jest.laris-podmenu-otwarte > ul,
  .category-navbar li.laris-podmenu-jest.laris-podmenu-otwarte > ul {
    display: block;
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    padding-left: 16px;
  }

  /* ── rozwinięte podmenu to zwykły blok, a nie panel ──

     Klient: „что ты тут сделал с дропдаун меню на телефоне”. Zmierzone
     na 390 px: rozwinięta lista serii miała „position: absolute”
     i SZEROKOŚĆ 15 px, a pozycje wystawały z niej na 67 i 90 px.

     To nie jest skutek wyrównania do lewej — to zastane zachowanie
     motywu nadrzędnego, który podmenu w menu działów zawsze rysuje jako
     panel wiszący. Poprawka na to istniała, ale wyłącznie od 768 px
     (blok „@media (min-width: 768px)” wyżej w tym pliku), więc telefonu
     nie obejmowała. Dopóki pozycje były wyśrodkowane, krzywizna nie
     rzucała się w oczy; po dosunięciu ich do lewej stało się widać,
     że lista jest wąska na piętnaście pikseli.

     Na telefonie żaden panel nie jest potrzebny: podmenu ma być kolejnymi
     wierszami tej samej listy, wciętymi o jeden poziom. */
  .category-navbar li.menu-item-has-children > ul.sub-menu,
  .category-navbar > nav > ul > li.menu-item-has-children > ul.sub-menu,
  .top li.laris-podmenu-jest > ul {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    margin: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
  }

  /* ── przełączniki języka i waluty w menu ────────────────────────────

     W nagłówku są schowane poniżej 992 px (pole 0 × 0), więc na telefonie
     nie było czym zmienić ani języka, ani waluty. Skrypt przenosi je na
     górę otwartego menu; tu tylko wygląd. */
  .laris-menu-przelaczniki {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--l-line, #e9edf1);
  }

  .laris-menu-przelaczniki .laris-przel {
    display: block;
    position: relative;
  }

  .laris-menu-przelaczniki .laris-przel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--l-line, #e9edf1);
    border-radius: var(--l-r-btn, 999px);
    background: var(--l-surface, #fff);
    font-size: 14px;
  }

  .laris-menu-przelaczniki .laris-przel-panel {
    position: absolute;
    z-index: 30;
    min-width: 160px;
  }

  /* ── uwagi klienta do menu na telefonie ─────────────────────────────
     „сделай лого больше”, „гамбургер в правую сторону”, „все пункты меню
     в левую выровнять”, „убрать двойные стрелочки вниз”, „зачем тут
     2 меню — оставляем 1”. Zmierzone przed zmianą na 390 px: logo 81 × 52,
     hamburger przy lewej krawędzi (x = 15), wszystkie pozycje wyśrodkowane
     (x = 122, 99, 80, 87 — każda inaczej), dwa osobne bloki menu
     (y 66–370 i y 375–628) i dwie identyczne strzałki w dół obok siebie
     nad listą. */

  /* 1. Logotyp większy. 104 px szerokości przy proporcji pliku daje 67 px
        wysokości — nagłówek rośnie z 66 do ok. 78 px i to jest cała cena. */
  .middle-nav-header .logo img {
    width: 104px;
    max-width: 104px;
    height: auto;
    /* „max-height: 52px” trzymało logotyp przy dawnej wysokości i samo
       podniesienie szerokości tylko je rozciągało — zmierzone: 104 × 52
       zamiast 104 × 67 przy proporcji pliku. */
    max-height: none;
  }

  /* 2. Hamburger na prawo. Rząd nagłówka jest elastyczny, a logo ma
        „margin-right: auto”, więc wystarczy przestawić kolejność:
        „order: 10” stawia przycisk za znakami sklepu, czyli przy prawej
        krawędzi. Wcześniej stało tu „-1”, czyli przed wszystkim. */
  #burger-menu {
    order: 10;
    margin-left: 6px;
    margin-right: 0;
  }

  /* 3. Pozycje do lewej. Nadrzędny centruje je razem z całym menu; przy
        wyśrodkowaniu każda linijka zaczyna się w innym miejscu i oko nie
        ma się o co oprzeć. Wcięcie 15 px — tyle, ile ma wyściółka strony,
        więc menu staje w jednej linii z resztą treści.

     Wyrównanie trzeba postawić na LIŚCIE I NA POZYCJI, nie na samym
     odnośniku: nadrzędny centruje przez „.category-navbar ul” oraz
     „.category-navbar ul li” (style.css), a odnośnik jest w środku
     pudełkiem liniowo-blokowym. „text-align” na nim ustawia tylko tekst
     WEWNĄTRZ pudełka — samo pudełko nadal wędrowało na środek pozycji.
     Stąd „display: block” na odnośniku i lewa krawędź na wszystkich
     trzech poziomach. */
  .category-navbar,
  .category-navbar > nav > ul,
  .category-navbar ul,
  .category-navbar ul li,
  .category-navbar .navbar-top-mobile > ul {
    justify-content: flex-start;
    text-align: left;
  }

  /* Wcięcie MUSI iść przez „ul li a”, nie przez „li > a”.

     Klient: „в меню нет отступа”. Zmierzone: „padding-left: 0px”, napisy
     przyklejone do lewej krawędzi ekranu. Nadrzędny ustawia pozycjom
     „padding: 10px 0” selektorem o jednym typie więcej od naszego, więc
     wygrywał na samej lewej stronie wyściółki — pion (10 px) brał się
     właśnie stamtąd i to było widać, a wcięcie nie.

     Piętnaście pikseli, bo tyle ma wyściółka strony: menu staje wtedy
     w jednej linii z resztą treści.

     Za pierwszym razem napisałem to jako „.category-navbar ul li > a”
     i dalej nie działało — bo o wyniku nie decyduje długość selektora,
     tylko rodzaj jego części. Nasza wersja miała jedną klasę i cztery
     typy (0,1,4), a przebić trzeba było „.category-navbar .menu-item > a”
     (0,2,1) z tego samego pliku: DWIE klasy biją cztery typy. Stąd
     „li.menu-item” — (0,2,2). */
  .category-navbar li.menu-item > a,
  .category-navbar > nav > ul > li.menu-item > a {
    display: block;
    text-align: left;
    padding: 10px 15px;
  }

  /* Strzałka motywu nadrzędnego — zdjęta, i to jest sprzątanie po mojej
     poprzedniej poprawce.

     Nadrzędny rysuje daszek pseudoelementem „li::after” (obrazek 10 × 12,
     „display: inline-block”). Dopóki odnośnik był pudełkiem liniowo-
     -blokowym, daszek stał obok napisu w tej samej linii. Kiedy dosunąłem
     pozycje do lewej i dałem odnośnikowi „display: block”, pseudoelement
     został wypchnięty do WŁASNEGO wiersza — i tak powstały te wiszące
     daszki na środku menu, o które pyta klient. Zmierzone: pozycja
     z podmenu miała 69 px wysokości zamiast 42.

     Własną strzałkę i tak rysuje przycisk „.laris-podmenu-btn” po prawej,
     więc nadrzędna jest tu zbędna podwójnie. */
  .category-navbar li::after,
  .category-navbar li.menu-item-has-children::after {
    display: none;
  }

  .top li.laris-podmenu-jest.laris-podmenu-otwarte > ul {
    padding-left: 0;
  }

  /* Podkategorie odsunięte samym wcięciem odnośnika, żeby ich lewa
     krawędź nadal była widoczna jako drugi poziom. Ta sama para
     selektorów co wyżej — z tego samego powodu. */
  .category-navbar li.laris-podmenu-jest > ul li.menu-item > a {
    padding-left: 31px;
  }

  /* 4. Dwie strzałki w dół nad listą to strzałki przełączników języka
        i waluty. Sam przycisk zostaje i nadal się otwiera — schodzi tylko
        rysunek, bo dwa identyczne daszki obok siebie czytają się jak
        usterka, a nie jak podpowiedź. */
  .laris-menu-przelaczniki .laris-przel-strzalka {
    display: none;
  }

  /* 5. Jedno menu zamiast dwóch. Pozycje z drugiego bloku przenosi do
        pierwszej listy skrypt (inc/menu-mobilne.php) — tutaj chowamy
        opróżnione opakowanie, żeby nie zostawiało po sobie odstępu. */
  .category-navbar .navbar-top-mobile.laris-menu-scalone {
    display: none;
  }
}

/* ═══ strony prawne: „Polityka prywatności” i „Regulamin” ═══

   Właściciel: „можно на двух страницах чтобы текст не был такой широкий,
   чуть уже для удобного чтения”.

   Zmierzone na „Regulaminie” przy oknie 1366 px, PRZED zmianą:

     kontener   1360 px
     akapit     1330 px
     krój         15 px / interlinia 27 px
     w wierszu   154 znaki      ← sedno

   Wygodna miara to 65–75 znaków. Przy 154 oko po dojściu do prawej
   krawędzi nie trafia w początek następnego wiersza — przy dokumencie
   na 2363 słowa to męczy po pierwszym akapicie.

   Miarę zadajemy w „ch”, nie w pikselach: jednostka liczy się od
   szerokości znaku, więc kolumna zostanie właściwa także wtedy, gdy
   ktoś kiedyś zmieni krój albo stopień. 70ch przy Poppinsie daje około
   72 znaków w wierszu.

   Stopień idzie z 15 na 16 px i interlinia na 1,75 — dokument prawny
   czyta się długo, a 15 px z interlinią 1,8 to stopień przypisu.

   Klasę „laris-prawne” dokłada inc/strony-tresci.php. Tam też opisane,
   dlaczego te dwie strony NIE dostają pełnego układu „laris-txt”. */

body.laris-prawne .txt-content.subpagecontent {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

body.laris-prawne .subpagecontent p,
body.laris-prawne .subpagecontent li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--l-ink-soft);
}

body.laris-prawne .subpagecontent h1,
body.laris-prawne .subpagecontent h2,
body.laris-prawne .subpagecontent h3,
body.laris-prawne .subpagecontent h4 {
  margin-top: 34px;
  margin-bottom: 12px;
}

/* Paragrafy („§ 1”, „§ 2”) są w tym dokumencie osiami nawigacji —
   po nich klient szuka właściwego ustępu. Dajemy im powietrze nad sobą
   i wyraźniejszy stopień niż akapitowi, ale bez wersalików: w tekście
   prawnym one utrudniają czytanie. */
body.laris-prawne .subpagecontent h2,
body.laris-prawne .subpagecontent h3 {
  font-family: var(--l-font-head);
  font-size: 19px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--l-ink);
}

body.laris-prawne .subpagecontent ol,
body.laris-prawne .subpagecontent ul {
  padding-left: 22px;
}

body.laris-prawne .subpagecontent li + li {
  margin-top: 6px;
}

@media (max-width: 767px) {
  body.laris-prawne .subpagecontent p,
  body.laris-prawne .subpagecontent li {
    font-size: 15.5px;
    line-height: 1.7;
  }
}