/* ==========================================================================
   Liikye - stopka z trescia oraz strony tresciowe

   Zakres: stopka (kolumny, pasek platnosci, dolny pasek), dlugie strony
   tresciowe (regulaminy, polityki), blog, wyniki wyszukiwania i strona 404.

   Zasady te same, co w arkuszu rdzenia: wartosci wylacznie z tokenow, uklad na
   wlasnosciach logicznych (arabski jest pisany od prawej), selektory klasowe,
   zero !important poza jednym wyjatkiem opisanym w miejscu uzycia.

   Arkusz laduje sie po liikye.css, wiec regula o tej samej sile wygrywa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Stopka: ciemna powierzchnia

   System projektowy konczy strone ciemna stopka (ink-900). Zamiast przepisywac
   kilkanascie regul rdzenia, podmieniamy na samym elemencie stopki wartosci
   aliasow, na ktorych te reguly stoja. Dzieki temu tlo, obwodki, naglowki
   kolumn, listy i przelaczniki jezyka odwracaja sie razem, a kontrast pozostaje
   policzony: ink-300 na ink-900 to 11,7:1, ink-400 to 7,5:1, orange-400 to
   7,5:1. Pomaranczowy 700 jako napis dziala tylko na bieli, wiec w stopce
   napisem akcentowym jest 400.
   -------------------------------------------------------------------------- */

.lk-stopka {
  --lk-tusz:         var(--white);
  --lk-tusz-2:       var(--ink-300);
  --lk-przygaszony:  var(--ink-400);
  --lk-linia:        rgba(255, 255, 255, .14);
  --lk-papier:       var(--ink-800);
  --lk-papier-2:     var(--ink-900);
  --lk-akcent-tekst: var(--orange-400);

  margin-block-start: var(--space-20);
  padding-block: var(--space-16) var(--space-6);
  border-block-start: 0;
  color: var(--ink-300);
}

/* Kolumna marki jest szersza od kolumn z linkami: miesci znak, zdanie i ma
   zostawic powietrze. Ponizej 900 px wchodzi uklad dwoch kolumn, ktory skraca
   stopke na telefonie o mniej wiecej polowe. */
@media (min-width: 900px) {
  .lk-stopka__gora {
    grid-template-columns: minmax(230px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-10) var(--space-12);
    align-items: start;
    padding-block-end: var(--space-12);
  }
}

@media (max-width: 899px) {
  .lk-stopka__gora {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }

  .lk-stopka__marka { grid-column: 1 / -1; }
}

@media (max-width: 479px) {
  .lk-stopka__gora { grid-template-columns: minmax(0, 1fr); }
}

/* Na telefonie stopka zaczyna sie blizej tresci: 64 px odstepu nad nia bylo
   liczone dla ukladu czterech kolumn na szerokim ekranie. */
@media (max-width: 899px) {
  .lk-stopka {
    margin-block-start: var(--space-12);
    padding-block: var(--space-10) var(--space-6);
  }
}

.lk-stopka__opis {
  max-width: 38ch;
  line-height: var(--lh-body);
}

/* KOLOR ODNOSNIKOW USTAWIAMY JAWNIE, nie dziedziczeniem po .lk-stopka.

   Na stronach produktu i koszyka zyje jeszcze meta _wpb_post_custom_css po
   starym motywie kumplo (687 wpisow), a w niej goly selektor a z granatowym
   #1f5bbd. Goly selektor bije DZIEDZICZENIE koloru, wiec cala stopka robila
   sie granatowa na kazdej stronie /buy/. Wlasna regula ma wyzsza wage i to
   zamyka, ale samej mety nie sprzata - to osobna robota, bo ten sam blok
   maluje przycisk zakupu wtyczki cleafs_smm. */
.lk-stopka a {
  color: var(--lk-tusz-2);
}

.lk-stopka a:hover,
.lk-stopka a:focus-visible {
  color: var(--lk-akcent-tekst);
}

.lk-stopka .lk-widget__title {
  color: var(--white);
  letter-spacing: var(--tracking-caps);
}

/* Odstep miedzy pozycjami listy robi juz rdzen; tutaj tylko powiekszamy pole
   klikniecia i dajemy najechaniu widoczna zmiane bez skoku ukladu. */
.lk-stopka__lista a {
  display: inline-block;
  padding-block: 2px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.lk-stopka__blok { margin-block-end: 0; }

/* Tytul kolumny jest na telefonie przyciskiem (skrypt liikye-stopka.js
   przepisuje go w momencie startu). Na komputerze ma wygladac i zachowywac
   sie jak zwykly naglowek: bez tla, bez kursora, bez strzalki. */
.lk-stopka__przelacznik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: start;
  text-transform: inherit;
  cursor: default;
}

.lk-stopka__strzalka {
  display: none;
  flex: none;
  color: var(--lk-przygaszony);
  transition: transform var(--dur-base) var(--ease-standard);
}

@media (max-width: 899px) {
  /* Zwinieta sekcja zajmuje cala szerokosc, jedna pod druga. W ukladzie
     dwukolumnowym (tym dla rozwinietych kolumn) paski akordeonu wychodza
     rozne i czytaja sie jak usterka, a nie jak lista do rozwiniecia. */
  .lk-stopka--zwijana .lk-stopka__gora {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    padding-block-end: var(--space-6);
  }

  .lk-stopka--zwijana .lk-stopka__kolumna { margin-block-end: 0; }

  .lk-stopka--zwijana .lk-widget__title {
    margin-block-end: 0;
    border-block-end: 1px solid var(--lk-linia);
  }

  .lk-stopka--zwijana .lk-stopka__przelacznik {
    min-height: var(--tap-min);
    cursor: pointer;
  }

  .lk-stopka--zwijana .lk-stopka__strzalka { display: block; }

  .lk-stopka--zwijana .lk-stopka__przelacznik[aria-expanded="true"] .lk-stopka__strzalka {
    transform: rotate(180deg);
  }

  .lk-stopka--zwijana .lk-stopka__lista { padding-block: var(--space-3) var(--space-4); }
}

/* --------------------------------------------------------------------------
   2. Pas platform

   UWAGA NA NAZWY: klasy lk-platformy i lk-platforma nalezaly wczesniej do
   PASKA KATEGORII W KATALOGU (inc/sklep-katalog.php) i do mega-menu. Ten
   arkusz laduje sie pod kazdym widokiem, bo stopka stoi wszedzie, wiec
   regula bez przodka .lk-stopka przejmuje tamte elementy - 14.09.2026
   zrobila z paska filtrow siatke pieciu kolumn z bialym tekstem na bialym
   tle. Kazdy selektor ponizej MUSI zaczynac sie od .lk-stopka.

   Stopka otwiera sie siatka wszystkich kategorii glownych sklepu (dzis
   pietnascie). Kolumn ubywa razem z szerokoscia okna, a ponizej 900 px kafel
   przestawia sie w pion i gubi liste uslug: na telefonie liczy sie to, zeby
   piec rzedow po trzy kaflowalo sie palcem, a nie zeby przeczytac wszystko.

   Barwy znakow: cztery pierwsze maja swoje tokeny w systemie projektowym,
   pozostale stoja tutaj, bo tokens-ds.css jest lustrem projektu w Claude
   Design i nie dokladamy do niego wartosci po stronie motywu.
   -------------------------------------------------------------------------- */

.lk-stopka .lk-platformy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block-end: var(--space-10);
}

.lk-stopka .lk-platformy__tytul {
  margin: 0;
  color: var(--lk-przygaszony);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.lk-stopka .lk-platformy__lista {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-stopka .lk-platformy__pozycja { margin-block-end: 0; }

.lk-stopka .lk-platforma {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius-md);
  background: var(--lk-papier);
  color: var(--lk-tusz-2);
  text-decoration: none;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

.lk-stopka .lk-platforma:hover,
.lk-stopka .lk-platforma:focus-visible {
  background: #212429;
  border-color: rgba(255, 84, 54, .45);
}

.lk-stopka .lk-platforma__rysunek { flex: none; }

/* Znak wgrany w panelu (miniatura kategorii). Wymiary sa tu powtorzone mimo
   atrybutow na obrazku, bo pliki SVG z panelu czesto nie niosa wlasnych
   proporcji, a wtedy przegladarka rozciaga je na cala szerokosc kafla.

   Zaokraglenie nakladamy TU, na obrazek, a nie licząc na pliki: znaki marek
   przychodza w roznych ksztaltach (kwadrat ostry, kwadrat zaokraglony, kolo)
   i bez tego pas wyglada jak zlozony z przypadkowych naklejek. Na ksztaltach
   okraglych regula nie zmienia nic. */
.lk-stopka .lk-platforma__ikona {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  object-fit: contain;
}

/* Znak X jest CALY czarny, a litera to dziura w tle - bez podkladu widac przez
   nia ciemny kafel i znak ginie. Bialy podklad zapala litere. */
.lk-stopka .lk-platforma--twitter .lk-platforma__ikona { background: var(--white); }

.lk-stopka .lk-platforma__tresc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lk-stopka .lk-platforma__nazwa {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--white);
}

.lk-stopka .lk-platforma__uslugi {
  font-size: var(--fs-micro);
  line-height: var(--lh-snug);
  color: var(--lk-przygaszony);
}

/* Barwy znakow. Instagram, TikTok, YouTube i Facebook maja tokeny; TikTok
   i X sa czarne w oryginale, wiec na ciemnym tle ida bielą. */
.lk-stopka .lk-platforma__rysunek { color: var(--lk-tusz-2); }
.lk-stopka .lk-platforma--instagram .lk-platforma__rysunek { color: var(--platform-instagram); }
.lk-stopka .lk-platforma--facebook .lk-platforma__rysunek { color: var(--platform-facebook); }
.lk-stopka .lk-platforma--youtube .lk-platforma__rysunek { color: var(--platform-youtube); }
.lk-stopka .lk-platforma--tiktok .lk-platforma__rysunek,
.lk-stopka .lk-platforma--twitter .lk-platforma__rysunek { color: var(--white); }
.lk-stopka .lk-platforma--telegram .lk-platforma__rysunek { color: #229ed9; }
.lk-stopka .lk-platforma--soundcloud .lk-platforma__rysunek { color: #ff8a00; }
.lk-stopka .lk-platforma--kick .lk-platforma__rysunek { color: #53fc18; }
.lk-stopka .lk-platforma--linkedin .lk-platforma__rysunek { color: #0a66c2; }
.lk-stopka .lk-platforma--twitch .lk-platforma__rysunek { color: #9146ff; }
.lk-stopka .lk-platforma--pinterest .lk-platforma__rysunek { color: #e60023; }
.lk-stopka .lk-platforma--spotify .lk-platforma__rysunek { color: #1db954; }
.lk-stopka .lk-platforma--discord .lk-platforma__rysunek { color: #5865f2; }
.lk-stopka .lk-platforma--seo .lk-platforma__rysunek { color: var(--lk-akcent-tekst); }

@media (max-width: 1199px) {
  .lk-stopka .lk-platformy__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  /* Piec rzedow kafli plus cztery bloki linkow to na telefonie latwo poltora
     ekranu samej stopki (tyle miala ta sprzed 14.09.2026). Kafel schodzi wiec
     do 54 px i rysunku 20 px - nadal powyzej progu celu dotykowego, bo caly
     kafel jest klikalny, a nie sama ikona. */
  .lk-stopka .lk-platformy {
    gap: var(--space-3);
    padding-block-end: var(--space-6);
  }

  .lk-stopka .lk-platformy__lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .lk-stopka .lk-platforma {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    min-height: 54px;
    padding: 8px 4px;
    text-align: center;
  }

  .lk-stopka .lk-platforma__rysunek,
  .lk-stopka .lk-platforma__ikona {
    width: 20px;
    height: 20px;
  }

  .lk-stopka .lk-platforma__nazwa { font-size: 12px; }

  /* Nazwy uslug schodza z ekranu, nie znikaja z dokumentu: kafel ma zostac
     celem wielkosci palca, a nie kartka do czytania. */
  .lk-stopka .lk-platforma__uslugi {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 379px) {
  .lk-stopka .lk-platformy__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dorobek sieci pod opisem marki. Kropka jest ozdoba, wiec nie ma jej
   w dokumencie - stawia ja pseudoelement na pustym elemencie z aria-hidden. */
.lk-stopka__dorobek {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-block: var(--space-1) 0;
  font-size: var(--fs-xs);
  color: var(--lk-przygaszony);
}

.lk-stopka__dorobek strong {
  color: var(--white);
  font-weight: var(--fw-semibold);
}

.lk-stopka__kropka {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--status-success-fill);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
}

/* --------------------------------------------------------------------------
   3. Pasek metod platnosci

   Wychodzi razem z lista linkow prawnych, bo dolny pasek stopki nie ma
   wlasnego punktu zaczepienia w footer.php. Ustawiamy go jako pierwszy
   element tego paska i na cala szerokosc, wiec czyta sie jak osobny wiersz.
   -------------------------------------------------------------------------- */

.lk-platnosci {
  flex: 1 0 100%;
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--lk-linia);
}

.lk-platnosci__tytul {
  margin: 0;
  color: var(--ink-400);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.lk-platnosci__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-platnosci__znak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 34px;
  margin-block-end: 0;
  padding-inline: var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--white);
  color: var(--ink-800);
}

.lk-platnosci__ikona { display: block; }

/* Media spolecznosciowe: ten sam wiersz, po prawej (inc/stopka-social.php). */
.lk-obserwuj {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin-inline-start: auto;
}

.lk-obserwuj__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-obserwuj__lista li { margin-block-end: 0; }

.lk-obserwuj__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-xs);
  opacity: .85;
}

.lk-obserwuj__link:hover,
.lk-obserwuj__link:focus-visible { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Dolny pasek
   -------------------------------------------------------------------------- */

.lk-stopka__dol {
  row-gap: var(--space-5);
  padding-block-start: var(--space-6);
}

.lk-stopka__prawne { font-size: var(--fs-sm); }

.lk-stopka__prawa {
  max-width: 60ch;
  line-height: var(--lh-snug);
}

/* Przelacznik jezyka i waluty na ciemnym tle: kontrolka zostaje kontrolka,
   tylko powierzchnia jest ciemniejsza od tla stopki. */
.lk-stopka .lk-jezyki__przycisk,
.lk-stopka .lk-waluty select {
  background: rgba(255, 255, 255, .06);
  color: var(--ink-300);
}

.lk-stopka .lk-waluty select { border-color: var(--lk-linia); }

.lk-stopka .lk-jezyki__lista {
  background: var(--ink-800);
  border-color: var(--lk-linia);
}

.lk-stopka .lk-jezyki__lista a:hover { background: rgba(255, 255, 255, .08); }

/* --------------------------------------------------------------------------
   5. Stopka nie wisi w polowie ekranu

   Krotka strona tresciowa (404, pusty wynik wyszukiwania) konczyla sie w
   polowie okna, a pod stopka zostawal pas bieli. Obszar tresci ma rosnac,
   stopka zostaje na swoim marginesie. Dotyczy tylko stron poza sklepem, zeby
   nie ruszac ukladu koszyka i kasy.
   -------------------------------------------------------------------------- */

body {
  /* MIARA WIERSZA. Nie uzywamy jednostki ch, bo liczy sie ona po szerokosci
     cyfry zero, a w kroju tresci (Jakarta) cyfra jest wyjatkowo szeroka:
     70ch wychodzi 920 px, czyli okolo 107 znakow tekstu. Przecietny znak tego
     kroju ma okolo 0,52 em, wiec 70 znakow to 41rem przy tresci 18 px.
     Miara szeroka sluzy elementom, ktore maja byc szersze od tekstu, ale nadal
     w tej samej kolumnie: naglowek wpisu i obrazek wyrozniajacy. */
  --lk-miara: 41rem;
  --lk-miara-szeroka: 48rem;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Na telefonie pasek adresu zjada kawalek 100vh, dvh liczy sie po widocznej
   czesci okna. */
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}

/* Element ustawiony w flexie ma domyslnie min-width: auto, wiec cokolwiek
   szerokiego w srodku (na telefonie robi to pasek naglowka) rozepchneloby cale
   body ponad szerokosc ekranu i strona jechalaby w bok. Zerujemy to: nadmiar
   zostaje w swoim elemencie, dokladnie jak przed wlaczeniem flexa. */
body.lk-tresc > * { min-width: 0; }

body.lk-tresc > .lk-kontener { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   6. Strony tresciowe: miara wiersza i rytm

   Tresc stron idzie z poprzedniego motywu i jest zapakowana w zagniezdzone
   kontenery kreatora (wpb, vc_row), wiec miary nie da sie ustawic na samym
   .lk-proza. Ustawiamy ja na elementach tekstowych, niezaleznie od zagniezdzenia.
   Okolo 70 znakow to dlugosc, przy ktorej oko trafia w poczatek nastepnego
   wiersza bez szukania.
   -------------------------------------------------------------------------- */

.lk-tresc .lk-proza {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--text-body);
  overflow-wrap: break-word;
}

.lk-tresc .lk-proza p,
.lk-tresc .lk-proza ul,
.lk-tresc .lk-proza ol,
.lk-tresc .lk-proza h2,
.lk-tresc .lk-proza h3,
.lk-tresc .lk-proza h4,
.lk-tresc .lk-proza blockquote,
.lk-tresc .lk-proza figcaption {
  max-width: var(--lk-miara, 41rem);
}

.lk-tresc .lk-proza h2,
.lk-tresc .lk-proza h3,
.lk-tresc .lk-proza h4 {
  color: var(--text-strong);
  text-wrap: balance;
}

.lk-tresc .lk-proza h2 { font-size: var(--lk-t-h3); }
.lk-tresc .lk-proza h3 { font-size: var(--fs-h4-lg); }

.lk-tresc .lk-proza li { margin-block-end: var(--space-3); }
.lk-tresc .lk-proza li:last-child { margin-block-end: 0; }

.lk-tresc .lk-proza ul,
.lk-tresc .lk-proza ol { padding-inline-start: 1.5em; }

.lk-tresc .lk-proza ol > li::marker {
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}

.lk-tresc .lk-proza a {
  color: var(--lk-akcent-tekst);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.lk-tresc .lk-proza a:hover { color: var(--text-link-hover); }

/* Tytul sekcji. Regulaminy sklepu maja trzy rozne budowy (prawdziwe h2,
   akapit z samym pogrubieniem, brak podzialu), wiec modul PHP sprowadza je do
   jednego naglowka. Kreska nad nim porzadkuje dlugi tekst prawny. */
.lk-proza__sekcja {
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--lk-linia);
}

.lk-tresc .lk-proza h2,
.lk-tresc .lk-proza h3 {
  scroll-margin-block-start: calc(var(--lk-naglowek-h) + var(--space-5));
}

/* Tabela w dlugim tekscie: na waskim ekranie przewija sie w poziomie zamiast
   rozpychac cala strone. */
@media (max-width: 640px) {
  .lk-tresc .lk-proza table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* JEDYNY WYJATEK OD ZASADY BEZ !important. Tresc z kreatora ma wpisane w
   atrybut style wyrownanie do lewej. W jezyku pisanym od prawej daje to tekst
   przyklejony do zlej krawedzi, a atrybut style wygrywa z kazda regula
   arkusza. Dotyczy wylacznie wersji arabskiej. */
[dir="rtl"] .lk-proza [style*="text-align: left"] {
  text-align: start !important;
}

/* --------------------------------------------------------------------------
   7. Spis tresci
   -------------------------------------------------------------------------- */

.lk-spis {
  max-width: var(--lk-miara, 41rem);
  margin-block: 0 var(--space-10);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
  background: var(--surface-sunken);
}

.lk-spis__tytul {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-strong);
  cursor: pointer;
}

.lk-spis[open] .lk-spis__tytul { margin-block-end: var(--space-4); }

.lk-spis__lista {
  margin: 0;
  padding-inline-start: 1.4em;
  columns: 2;
  column-gap: var(--space-8);
  font-size: var(--fs-sm);
}

.lk-spis__lista li {
  margin-block-end: var(--space-2);
  break-inside: avoid;
}

.lk-spis__lista a { text-decoration: none; }
.lk-spis__lista a:hover { color: var(--lk-akcent-tekst); text-decoration: underline; }

@media (max-width: 700px) {
  .lk-spis__lista { columns: 1; }
  .lk-spis__lista li { margin-block-end: var(--space-3); }
}

/* --------------------------------------------------------------------------
   8. Resztki po poprzednim motywie

   Tresc stron siedzi w wierszach i kolumnach kreatora. Jego arkusz nadal jest
   wczytywany, ale rozstawia elementy pod uklad, ktorego juz nie ma: ujemne
   marginesy wierszy potrafia wypchnac tresc poza kontener i zrobic poziomy
   pasek przewijania. Zerujemy wiec to, co wystaje.

   Osieroconych znacznikow [cws_sc_...] arkusz nie ukryje, bo to goly tekst w
   akapicie, a nie element. Usuwa je modul PHP przy wyswietlaniu, razem z
   pustymi pojemnikami, ktore po nich zostaja.
   -------------------------------------------------------------------------- */

.lk-proza .vc_row {
  margin-inline: 0;
  width: auto;
}

.lk-proza .vc_column-inner,
.lk-proza .wpb_column { padding-inline: 0; }

.lk-proza .wpb_text_column:last-child,
.lk-proza .wpb_content_element:last-child { margin-block-end: 0; }

.lk-proza .wpb_wrapper > *:last-child { margin-block-end: 0; }

/* Wiersz kreatora, w ktorym nie ma juz zadnego elementu tresci, to sam odstep
   po skasowanym obrazku albo po martwym znaczniku. Znika w calosci, zeby
   strona nie miala w srodku pustych przerw na dwa ekrany. Kolumna bez tresci
   znika tak samo, a jej sasiadka dostaje cala szerokosc wiersza.
   Przegladarka bez :has() po prostu zostawia odstepy, nic sie nie psuje. */
.lk-proza .vc_row:not(:has(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, img, picture, svg, iframe, video, form, input, blockquote, hr, article, section)) {
  display: none;
}

.lk-proza .wpb_column:not(:has(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, img, picture, svg, iframe, video, form, input, blockquote, hr, article, section)) {
  display: none;
}

.lk-proza .vc_row:has(> .wpb_column:not(:has(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, img, picture, svg, iframe, video, form, input, blockquote, hr, article, section))) > .wpb_column {
  width: 100%;
}

/* Wiersz, w ktorym zostala jedna kolumna (obok stal obrazek, ktorego juz nie
   ma), daje jej cala szerokosc. Bez tego tekst siedzi w polowie ekranu
   z pustka obok. */
.lk-proza .vc_row > .wpb_column:only-child { width: 100%; }

/* --------------------------------------------------------------------------
   9. Blog: lista wpisow (pojedynczy wpis ma wlasny arkusz liikye-wpis.css, klasy .lk-wpis*)
   -------------------------------------------------------------------------- */

.lk-lista-wpisow { gap: var(--space-6); }

.lk-karta--wpis .lk-karta__tytul { font-size: var(--fs-h4-lg); }

.lk-karta--wpis .lk-karta__meta {
  margin-block-end: var(--space-2);
  color: var(--text-muted);
}

/* Karta bez zajawki nie zostawia pustego wiersza. Opisy produktow w sklepie sa
   puste, a wyniki wyszukiwania jada tym samym szablonem karty. */
.lk-karta__zajawka:empty { display: none; }

/* Wyszukiwarka pokazuje takze produkty. Data dodania produktu do sklepu nic
   klientowi nie mowi, a przy uslugach sprzed czterech lat wyglada jak zarzut. */
.lk-karta--wpis.type-product .lk-karta__meta { display: none; }

.lk-strona .lk-proza { max-width: 100%; }

/* --------------------------------------------------------------------------
   10. Wyniki wyszukiwania i strona 404
   -------------------------------------------------------------------------- */

.search .lk-naglowek-strony__tytul,
.error404 .lk-naglowek-strony__tytul { overflow-wrap: break-word; }

.lk-pustka {
  max-width: var(--container-narrow);
  margin-inline: auto;
  border: 1px solid var(--lk-linia);
}

.lk-pustka__tytul { margin-block-end: var(--space-2); }

.lk-pustka p { color: var(--text-body); }

.error404 .lk-szukaj { margin-block: var(--space-6) var(--space-6); }

/* Pole wyszukiwarki (wtyczka Cleafs Wyszukiwarka) zamiast formularza na 404: ta szerokosc i srodek co formularz,
   ktory zastepuje; 32 px pod polem (rzad Popularne) wg planszy E5-liikye. Opakowanie wypisuje 404.php tylko wtedy,
   gdy wtyczka zwraca pole. */
.lk-szukaj-pole {
  max-width: 520px;
  margin-block: var(--space-6) var(--space-8);
  margin-inline: auto;
}

@media (max-width: 560px) {
  .lk-szukaj {
    flex-wrap: wrap;
    width: 100%;
  }

  .lk-szukaj__pole { flex: 1 0 100%; }

  .lk-szukaj__przycisk { width: 100%; }
}

/* --------------------------------------------------------------------------
   11. Telefon
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .lk-stopka {
    margin-block-start: var(--space-16);
    padding-block: var(--space-12) var(--space-6);
  }

  /* Palec trafia w link stopki tak samo jak w kontrolke. */
  .lk-stopka__lista a,
  .lk-platnosci__znak {
    min-height: var(--lk-tap-min);
    display: inline-flex;
    align-items: center;
  }

  .lk-stopka__dol { align-items: flex-start; }

  .lk-obserwuj { margin-inline-start: 0; }

  .lk-obserwuj__link {
    width: var(--lk-tap-min);
    height: var(--lk-tap-min);
  }

  .lk-tresc .lk-proza { font-size: var(--fs-body); }
}

/* --------------------------------------------------------------------------
   12. Pomocnicze
   -------------------------------------------------------------------------- */

/* Nazwa dla czytnika ekranu. Wlasna klasa zamiast .lk-pomijacz, bo tamta
   pokazuje sie przy przejsciu klawiatura, a to nie jest odnosnik. */
.lk-tylko-czytnik {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Uzytkownik z ustawieniem ograniczenia ruchu nie dostaje plynnego przewijania
   po klikanym spisie tresci. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ZNALEZISKO Z RECENZJI: przyklejenie stopki do dolu bylo zalozone wylacznie
   na body.lk-tresc, a widoki sklepu (koszyk, konto, kasa) tej klasy nie maja,
   wiec na krotkich stronach stopka wisiala w polowie ekranu. Regula obejmuje
   teraz kazdy widok. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > .lk-stopka { margin-block-start: auto; }