/* ==========================================================================
   Liikye - konfigurator zamowienia (strona produktu)

   WAZNE: HTML tej sekcji generuje WTYCZKA cleafs_smm, wspolna dla trzech
   sklepow. Motyw go nie przebudowuje, tylko przejmuje jej klasy i uklada je
   po swojemu. Dzieki temu wypromowani i kumplo zostaja nietkniete.

   Arkusz laduje sie PO cleafs-smm-product (zaleznosc ustawiona w inc/assets.php),
   wiec nie potrzebuje lasu wykrzyknikow. Wyjatki sa opisane w miejscu uzycia.

   Cel ukladu: klient wchodzi z wyszukiwarki na fraze sprzedazowa i ma kupic
   bez zastanowienia. Kolejnosc decyzji: ile -> jaka jakosc -> gdzie dostarczyc
   -> (opcjonalnie dodatki) -> cena -> kup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Zastepnik siatki Bootstrapa
   Konfigurator uzywa klas row i col-*, ktore wczesniej dawal motyw. Nowy motyw
   Bootstrapa nie ma, wiec dostarczamy minimum potrzebne tej sekcji.
   -------------------------------------------------------------------------- */

.lk-konfigurator .row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(var(--lk-s-2) * -1);
}

.lk-konfigurator [class*="col-"] {
  flex: 1 1 100%;
  max-width: 100%;
  padding-inline: var(--lk-s-2);
}

/* --------------------------------------------------------------------------
   2. Karta zakupu

   Konfigurator dostaje wiecej miejsca niz galeria. Powod jest sprzedazowy:
   klient wchodzi z wyszukiwarki po konkretna usluge, wiec decyduje przy karcie
   zakupu, a nie przy zdjeciu. Przy waskiej kolumnie kafle ilosci schodzily do
   dwoch w rzedzie i konfigurator ciagnal sie przez dwa ekrany.
   -------------------------------------------------------------------------- */

.woocommerce div.product {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}

.woocommerce div.product form.cart {
  padding: var(--lk-s-5);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-3);
  background: var(--lk-papier);
  box-shadow: var(--lk-cien-2);
}

.lk-krok {
  margin-block-end: var(--lk-s-5);
}

.lk-krok__tytul {
  display: flex;
  align-items: center;
  gap: var(--lk-s-2);
  margin-block-end: var(--lk-s-3);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-baza);
  font-weight: 700;
  color: var(--lk-tusz);
}

/* Numer kroku rysuje licznik CSS z sekcji na koncu pliku (jeden dla naglowkow
   motywu i wtyczki). Osobnego znacznika .lk-krok__numer juz nie ma. */

/* --------------------------------------------------------------------------
   3. Ilosc jako kafle
   Oryginalny select zostaje w dokumencie (wtyczka na nim stoi), tylko schodzi
   z oczu. Kafle sa nakladka, ktora go ustawia i wysyla zdarzenie change.
   -------------------------------------------------------------------------- */

.lk-konfigurator .variations select,
.lk-konfigurator .variations .reset_variations {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* KAFEL DZIELONY 6D (plansze k6d, e1-zlozenie, de1-zlozenie z 26.10.2026).
   Gora: emoji z danych nad liczba, szare tlo. Dol: cena biezaca w kolorze marki,
   pod nia przekreslona cena sprzed obnizki (bez procentow). Zakladka "Most popular"
   wystaje 19 px nad kafel, stad odstep nad siatka i wiekszy odstep miedzy rzedami.
   Wybrany kafel jest caly pomaranczowy (gora orange-400, dol orange-500).
   Znaczniki to kontrakt dla zadan B2 (dwa wymiary) i B4 (kafle jakosci). */
.lk-ilosci {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--lk-s-2);
  row-gap: 24px;
  padding-block-start: 12px;
}

.lk-kd {
  position: relative;
  display: flex;
  flex-direction: column;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink-200);
  background: #fff;
  color: var(--ink-900);
  font: inherit;
  text-align: center;
  cursor: pointer;
}

/* Najechanie tylko tam, gdzie jest mysz: na ekranie dotykowym :hover zostaje po dotknieciu i kafel swiecilby obwodka (M2). */
@media (hover: hover) {
  .lk-kd:hover:not(.is-wybrany):not(:disabled) { border-color: var(--orange-500); }
}

.lk-kd:focus-visible {
  outline: none;
  box-shadow: 0 3px 0 var(--ink-200), var(--ring-focus);
}

.lk-kd__gora {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 4px 10px;
  border-radius: 13px 13px 0 0;
  background: var(--ink-50);
}

.lk-kd__emoji {
  display: block;
  margin-block-end: 6px;
  font-size: 22px;
  line-height: 1;
}

.lk-kd__liczba {
  display: block;
  font-family: var(--lk-font-naglowek);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
  white-space: nowrap;
}

.lk-kd__dol {
  flex: none;
  display: block;
  padding: 7px 4px 8px;
  border-top: 1px solid var(--ink-200);
  border-radius: 0 0 13px 13px;
}

.lk-kd__cena,
.lk-kd__stara {
  display: block;
  white-space: nowrap;
}

.lk-kd__cena {
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--orange-600);
}

.lk-kd__stara {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink-500);
  text-decoration: line-through;
}

.lk-kd__zakladka {
  position: absolute;
  inset-block-start: -19px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% + 16px);
  padding: 5px 9px;
  border-radius: 8px 8px 0 0;
  background: var(--ink-900);
  color: #fff;
  font-family: var(--lk-font-tresc);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lk-kd__zakladka[hidden] { display: none; }

/* Wybrany kafel: pelny pomaranczowy, tekst bialy wymuszony na potomkach. */
.lk-kd.is-wybrany {
  border-color: var(--orange-600);
  box-shadow: 0 3px 0 var(--orange-700);
}

.lk-kd.is-wybrany:focus-visible { box-shadow: 0 3px 0 var(--orange-700), var(--ring-focus); }

.lk-kd.is-wybrany .lk-kd__gora { background: var(--orange-400); }

.lk-kd.is-wybrany .lk-kd__dol {
  background: var(--orange-500);
  border-top-color: var(--orange-600);
}

.lk-kd.is-wybrany .lk-kd__liczba,
.lk-kd.is-wybrany .lk-kd__cena { color: #fff; }

.lk-kd.is-wybrany .lk-kd__stara { color: rgba(255, 255, 255, .75); }

/* Para bez wariantu (S5A, decyzja z 26.10.2026): kafel ZNIKA, bez wygaszenia i bez komunikatu.
   Reguly .lk-kd ustawiaja display, wiec atrybut hidden potrzebuje wlasnej reguly. */
.lk-kd[hidden] { display: none; }

/* Kafel jednoczesciowy (wymiar bez ceny, plansza w7a): sama gora, zaokraglona ze wszystkich stron. */
.lk-kd.is-jeden .lk-kd__gora {
  border-radius: 13px;
  padding-block-end: 11px;
}

/* Etykieta nie bedaca sama liczba (zakres "1K-2.5K", nazwa reakcji, czas): pismo 15 px na kazdej szerokosci
   (plansza w7a: .kd .g .t), a liczby dwu- i trzycyfrowe zostaja duze. */
.lk-kd--tekst .lk-kd__liczba {
  font-size: 15px;
  line-height: 1.15;
  /* Plansza ma jedna linie ("5 posts"), ale etykiety sa danymi sklepu i w innych jezykach bywaja dluzsze
     ("30 neue Beitraege"): lamia sie w kaflu zamiast z niego wychodzic. */
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Dol kafla wymiaru kontekstowego: oszczednosc ("save 19%") albo "standard" (opcja bazowa). */
.lk-kd__zysk {
  display: block;
  font-family: var(--lk-font-naglowek);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--green-700);
  white-space: nowrap;
}

.lk-kd__zysk.is-standard {
  font-weight: 600;
  color: var(--ink-500);
}

.lk-kd.is-wybrany .lk-kd__zysk { color: #fff; }

/* Piec kolumn na szerszym ekranie (plansza de1-zlozenie), wiekszy odstep nad siatka. */
@media (min-width: 641px) {
  .lk-ilosci { padding-block-start: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); }

  .lk-kd__liczba { font-size: 22px; }
}

/* Wezsza karta (dwie kolumny strony, 1024-1279): pieciocyfrowe liczby dalej musza sie zmiescic. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lk-kd__liczba { font-size: 18px; }
}

/* Najwezsze telefony: "100.000" przy 20 px nie miesci sie w trzeciej czesci karty. */
@media (max-width: 380px) {
  .lk-kd__liczba { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   6. Pole celu (link do profilu lub posta)
   -------------------------------------------------------------------------- */

.lk-konfigurator .link-header,
.lk-konfigurator .cleafs-smm-required-label {
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  color: var(--lk-tusz);
}

.lk-konfigurator input[type="text"],
.lk-konfigurator textarea {
  margin-block-start: var(--lk-s-2);
}

/* --------------------------------------------------------------------------
   7. Cena i przycisk
   -------------------------------------------------------------------------- */

.lk-podsumowanie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lk-s-4);
  padding-block-start: var(--lk-s-4);
  border-block-start: 1px solid var(--lk-linia);
}

.lk-konfigurator .buba-apo-summary {
  display: flex;
  align-items: baseline;
  gap: var(--lk-s-2);
  font-family: var(--lk-font-naglowek);
  font-size: 2rem;
  font-weight: 800;
  color: var(--lk-tusz);
}

.lk-konfigurator .woocommerce-variation-price .price { font-size: 2rem; font-weight: 800; }

.lk-konfigurator .woocommerce-variation-add-to-cart { display: block; }

.lk-konfigurator .variations_button .button,
.lk-konfigurator button.single_add_to_cart_button {
  width: 100%;
  padding: 1.125rem 2rem;
  font-size: var(--lk-t-duzy);
}

/* Komunikat o niedostepnosci pokazujemy dopiero, gdy klient faktycznie wybral
   wariant. Przy wejsciu z wyszukiwarki straszyl napisem na powitanie. */
.lk-konfigurator .stock.out-of-stock { color: var(--lk-blad); font-weight: 700; }

.lk-konfigurator:not(.jest-wybrany-wariant) .stock.out-of-stock { display: none; }

@media (max-width: 640px) {
  .woocommerce div.product form.cart { padding: var(--lk-s-4); }

  .lk-konfigurator .buba-apo-summary { font-size: 1.75rem; }
}

/* ==========================================================================
   Elementy sprzedazowe wokol konfiguratora
   Uklad wg ekranu Category z systemu projektowego: dowod spoleczny pod
   naglowkiem, gwarancja pod przyciskiem, pasek zaufania pod calym blokiem.
   ========================================================================== */

/* Dowod spoleczny: ocena i stan realizacji */
.lk-dowod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lk-s-3) var(--lk-s-5);
  margin-block-end: var(--lk-s-4);
  font-size: var(--lk-t-maly);
}

.lk-ocena {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.lk-ocena__gwiazdka { color: var(--lk-linia); display: inline-flex; }
.lk-ocena__gwiazdka.jest-pelna { color: var(--star-fill); }

.lk-ocena__wartosc {
  margin-inline-start: var(--lk-s-2);
  font-family: var(--lk-font-naglowek);
  font-weight: 800;
  color: var(--lk-tusz);
}

.lk-ocena__liczba {
  margin-inline-start: var(--lk-s-2);
  color: var(--lk-przygaszony);
}

/* Blok gwarancji pod przyciskiem zakupu usuniety 2026-08-06: powtarzal tresc
   paska zaufania (dwa razy to samo zdanie o hasle, kilkanascie centymetrow od
   siebie). Zostal jeden komplet obietnic - pasek nizej. */

/* ZNALEZISKO BLOKUJACE Z RECENZJI: strona produktu nigdy nie skladala sie do
   jednej kolumny na telefonie. Regula dwukolumnowa z linii 43 tego pliku ma
   wieksza wage niz jednokolumnowa z arkusza sklepu, wiec przy 390 px galeria
   i podsumowanie zostawaly obok siebie (100 px + 201 px), a siatka ilosci
   wychodzila poza ekran. Stad poziome przewijanie widoczne na zrzutach. */
@media (max-width: 900px) {
  /* minmax(0, 1fr), a NIE samo 1fr. Zapis 1fr znaczy minmax(auto, 1fr), gdzie
     auto to szerokosc najszerszej zawartosci, wiec kolumna nie potrafi zwezic
     sie ponizej tego, co ja rozpycha (tu: siatka kafli i konfigurator wtyczki).
     Efekt byl taki, ze uklad skladal sie do jednej kolumny, ale strona i tak
     wychodzila poza ekran telefonu. Zero jako minimum pozwala jej sie skurczyc. */
  .woocommerce div.product {
    grid-template-columns: minmax(0, 1fr);
  }

  /* To samo zabezpieczenie dla samych elementow ukladu: element siatki tez ma
     domyslnie min-width auto i potrafi rozepchnac rodzica od srodka. */
  .woocommerce div.product > *,
  .woocommerce div.product .summary,
  .lk-konfigurator,
  .lk-ilosci {
    min-width: 0;
  }
}


/* ==========================================================================
   ZERO MIGOTANIA: style dzialaja od pierwszej klatki

   Klasa .lk-konfigurator jest teraz na formularzu JUZ Z SERWERA (szablon
   variable.php), a nie dopisywana skryptem. Dzieki temu ponizsze reguly lapia
   wyglad wtyczki od razu i klient nie oglada najpierw gradientow, a potem
   plaskich kafli. Selektory celuja w ORYGINALNE klasy wtyczki, nie w te
   nadawane przez skrypt.
   ========================================================================== */

/* Pole wyboru sklepu: schowane wzrokowo, ale obecne i dzialajace. */
.lk-wariant-pole,
.lk-konfigurator .variations .reset_variations {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Slowo laczace warianty jakosci wtyczka wypisuje po polsku niezaleznie od
   jezyka sklepu. Do czasu poprawki po stronie panelu chowamy je: kafle i tak
   czytelnie pokazuja, ze to wybor jednej z opcji. */
.lk-konfigurator .container-option + .lub,
.lk-konfigurator .lub { display: none; }

/* --------------------------------------------------------------------------
   POLA TEKSTOWE KONFIGURATORA (nazwa konta, odnosnik do wpisu, uwagi)

   To sa pola, bez ktorych nie da sie zlozyc zamowienia, a wygladaly jak
   przypadkowy tekst w tresci. Dostaja ramke, etykiete i pelna szerokosc.
   -------------------------------------------------------------------------- */

.lk-konfigurator input[type="text"],
.lk-konfigurator input[type="url"],
.lk-konfigurator input[type="email"],
.lk-konfigurator textarea {
  width: 100%;
  margin-block: var(--lk-s-2) var(--lk-s-4);
  padding: .85rem 1rem;
  border: 1.5px solid var(--lk-linia);
  border-radius: var(--lk-r-1);
  background: var(--lk-papier);
  color: var(--lk-tusz);
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-baza);
  line-height: 1.4;
}

.lk-konfigurator input[type="text"]:focus,
.lk-konfigurator textarea:focus {
  border-color: var(--lk-akcent);
  outline: none;
  box-shadow: var(--ring-focus);
}

/* Etykiety pol wtyczki: czytelne, spojne z krokami konfiguratora. */
.lk-konfigurator p.label,
.lk-konfigurator .link-header,
.lk-konfigurator .cleafs-smm-required-label {
  display: block;
  margin: var(--lk-s-4) 0 0;
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  color: var(--lk-tusz);
}

/* Naglowki sekcji wtyczki (Quality, Source of traffic, Additional options)
   wygladaly jak zagubiony tekst miedzy kaflami. */
.lk-konfigurator .buba-apo-summary,
.lk-konfigurator > .row > .col-xl-12 > b,
.lk-konfigurator b {
  font-family: var(--lk-font-naglowek);
}

/* ==========================================================================
   POPRAWKI Z UWAG WLASCICIELA (2026-08-01, druga runda)

   Zmiana u podstawy: skrypt NIE PRZENOSI juz nic w dokumencie. Caly uklad
   robi ten arkusz na oryginalnych klasach wtyczki, dzieki czemu strona nie
   skacze w trakcie ladowania i nie zostaja osierocone naglowki sekcji.
   ========================================================================== */

/* 1. Naglowki sekcji wtyczki (Quality, Source of traffic, Additional options)
      wygladaja jak kroki konfiguratora, a nie jak zgubiony tekst. */
.lk-konfigurator p.link-header {
  margin: var(--lk-s-5) 0 var(--lk-s-3);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-baza);
  font-weight: 700;
  color: var(--lk-tusz);
}

/* 3. Slowo LUB pochodzi z arkusza wtyczki (pseudo-element z trescia po polsku,
      wiec na angielskim sklepie wyglada jak blad). Zdejmujemy je: dwa kafle
      obok siebie i tak czytelnie mowia, ze to wybor jednego z dwoch. */
.lk-konfigurator .col-xl-12.buba-apo-label-1-0:first-child::after {
  content: none !important;
  margin: 0 !important;
}

/* 6. Komunikaty walidacji wtyczki: czytelne, a nie surowy tekst pod opcjami. */
.lk-konfigurator .cleafs-smm-required-label small {
  display: block;
  margin-block: var(--lk-s-2);
  padding: var(--lk-s-2) var(--lk-s-3);
  border-radius: var(--lk-r-1);
  background: var(--lk-blad-tlo);
  color: var(--lk-blad) !important;
  font-size: var(--lk-t-maly);
  font-weight: 600;
}

/* 7. Pole na nazwe konta i odnosnik: wyrazna sekcja, nie zagubiony tekst. */
.lk-konfigurator .link-header + input[type="text"],
.lk-konfigurator p.label + input[type="text"] {
  margin-block-start: var(--lk-s-2);
}

.lk-konfigurator p.label {
  display: block;
  margin: var(--lk-s-4) 0 0;
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  color: var(--lk-tusz);
}

/* ==========================================================================
   POLA WTYCZKI: nazwa konta, odnosnik, komentarze

   PULAPKA, KTORA UKRYWALA POLE NA NAZWE KONTA: wtyczka trzyma kazde pole w
   tabeli z klasa "variations" (ta sama, ktorej WooCommerce uzywa dla wyboru
   wariantu), a pole razem z etykieta siedzi w komorce class="label". Regula
   ukrywajaca etykiete listy wariantow wycinala wiec CALA komorke razem
   z polem. Pole bylo w dokumencie, ale niewidoczne, i wygladalo to na brak
   konfiguracji po stronie panelu. Tamta regula zostala usunieta.

   Tabele pol maja inline display:none i pokazuje je skrypt wtyczki zaleznie
   od rodzaju uslugi (type z mapowania: ig_name, link, autolajki...). Nie
   ruszamy tego zachowania, tylko ubieramy to, co wtyczka pokaze.
   ========================================================================== */

.lk-konfigurator table.variations[id] {
  width: 100%;
  margin: 0 0 var(--lk-s-4) !important;
  border: 0;
  border-collapse: collapse;
}

.lk-konfigurator table.variations[id] td.label {
  display: block;
  width: 100%;
  padding: 0;
  border: 0 !important;
}

.lk-konfigurator table.variations[id] td.label > label { display: block; width: 100%; }

.lk-konfigurator table.variations[id] p.label,
.lk-konfigurator table.variations[id] label#ilosckomentarzy {
  display: block;
  margin: 0 0 var(--lk-s-2);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  color: var(--lk-tusz);
}

.lk-konfigurator table.variations[id] input[type="text"],
.lk-konfigurator table.variations[id] textarea {
  width: 100%;
  margin: 0;
  padding: .85rem 1rem;
  border: 1.5px solid var(--lk-linia);
  border-radius: var(--lk-r-1);
  background: var(--lk-papier);
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-baza);
}

.lk-konfigurator table.variations[id] input[type="text"]:focus,
.lk-konfigurator table.variations[id] textarea:focus {
  border-color: var(--lk-akcent);
  outline: none;
  box-shadow: var(--ring-focus);
}

/* ==========================================================================
   RUNDA CZWARTA: szeroki ekran, spojne zaznaczenia, jedna numeracja krokow
   (2026-08-06, uwagi wlasciciela do widoku na komputerze)

   Cztery rzeczy do naprawy, wszystkie widoczne dopiero na duzym ekranie:
   karta zakupu zajmowala jedna trzecia szerokosci, wybor jakosci wygladal
   inaczej niz wybor ilosci, kulka przelacznika wychodzila poza tor, a numery
   krokow pochodzily z trzech roznych zrodel.

   UWAGA NA KOLEJNOSC: ta sekcja jest CELOWO na koncu pliku. Czesc regul
   powyzej ma juz wykrzykniki (bo bija sie z arkuszem wtyczki), wiec zeby je
   przebic, trzeba i pozniejszej pozycji, i wyzszej specyficznosci.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NUMERACJA KROKOW Z JEDNEGO ZRODLA

   Bylo: krok pierwszy mial numer w kolku (motyw), "Quality" nie mial nic,
   a "Additional options" dostawal emoji "3" z arkusza wtyczki. Trzy style
   naraz i luka w srodku, bo numer 2 nie istnial.

   Jest: licznik CSS na formularzu numeruje po kolei KAZDY naglowek kroku,
   niezaleznie od tego, czy rysuje go motyw czy wtyczka. Numery same sie
   przesuwaja, gdy wtyczka pokaze dodatkowe pole (np. link do wpisu), i same
   znikaja dla sekcji ukrytych - element z display:none nie tworzy
   pseudo-elementu, wiec nie zabiera numeru.
   -------------------------------------------------------------------------- */

.lk-konfigurator { counter-reset: lk-krok; }

.lk-konfigurator .lk-krok__tytul,
.lk-konfigurator .buba-apo-container > p.link-header,
.lk-konfigurator table.variations[id] p.label,
.lk-konfigurator table.variations[id] p#link-header,
.lk-konfigurator table.variations[id] label#ilosckomentarzy {
  display: flex;
  align-items: center;
  gap: var(--lk-s-2);
  margin: var(--lk-s-5) 0 var(--lk-s-3);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-baza);
  font-weight: 700;
  line-height: 1.3;
  color: var(--lk-tusz);
}

.lk-konfigurator .lk-krok__tytul { margin-block-start: 0; }

.lk-konfigurator .lk-krok__tytul::before,
.lk-konfigurator .buba-apo-container > p.link-header::before,
.lk-konfigurator table.variations[id] p.label::before,
.lk-konfigurator table.variations[id] p#link-header::before,
.lk-konfigurator table.variations[id] label#ilosckomentarzy::before {
  counter-increment: lk-krok;
  content: counter(lk-krok) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--lk-akcent);
  color: #fff;
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-mikro);
  font-weight: 700;
  line-height: 1;
  /* Emoji z arkusza wtyczki mialo wlasne odstepy i tlo obrazkowe. */
  margin: 0 !important;
  padding: 0 !important;
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   5. DUZY EKRAN: karta zakupu korzysta z miejsca, ktore ma

   Po zdjeciu woocommerce-layout.css (inc/assets.php) karta dostala pelna
   szerokosc swojej kolumny, czyli ponad dwa razy wiecej niz miala. Same kafle
   zostaly jednak przy wymiarach liczonych dla waskiej kolumny, wiec rozjezdzaly
   sie na siedem w rzedzie. Ponizsze reguly ustawiaja proporcje dla szerokiej
   karty; telefon zostaje bez zmian, bo ten uklad byl od poczatku robiony pod
   niego (mobile first).
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .woocommerce div.product form.cart { padding: var(--lk-s-6); }

}

/* --------------------------------------------------------------------------
   6. DOPRACOWANIE PO PIERWSZYM SPOJRZENIU NA SZEROKI EKRAN (2026-08-06)

   Poszerzenie karty odslonilo trzy rzeczy, ktorych przy 343 px nie bylo widac.
   -------------------------------------------------------------------------- */

/* a) Sekcje POD produktem naleza do siatki strony produktu, wiec ladowaly do
      waskiej lewej kolumny: polecane uslugi staly jedna pod druga na jedna
      trzecia szerokosci. Ida przez cala szerokosc, bo nie sa czescia ukladu
      "zdjecie obok karty zakupu". */
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .product_meta,
.woocommerce div.product > .woocommerce-product-details__short-description {
  grid-column: 1 / -1;
}

/* d) Przycisk zakupu: WooCommerce puszcza go w float, przez co przy szerokiej
      karcie zostawial obok siebie pusty pas i wychodzil poza rytm sekcji. */
.woocommerce div.product form.cart .single_add_to_cart_button {
  float: none;
  width: 100%;
}

/* --------------------------------------------------------------------------
   7. PROPORCJE KARTY I KAFLI JAKOSCI (2026-08-06, po ogledzinach na 1440 px)

   Pelna szerokosc kolumny to nie zawsze dobra szerokosc formularza. Przy
   karcie ponad 900 px kafle jakosci robily sie paskami na caly ekran z para
   slow po lewej stronie, a wiersz dodatku mial kilkanascie centymetrow pustki
   miedzy nazwa a kwota. Karta ma gorna granice, a to, co zostaje, oddajemy
   marginesowi - strona oddycha, zamiast rozciagac formularz.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .woocommerce div.product form.cart { max-width: 880px; }
}

/* --------------------------------------------------------------------------
   8. DROBIAZGI Z TRZECIEJ ODSLONY (2026-08-06)
   -------------------------------------------------------------------------- */

/* Przycisk zakupu jest wylaczony do czasu podania celu uslugi (nazwa konta
   albo odnosnik) - tak dziala walidacja wtyczki i to jest w porzadku. Ale
   przygaszony pomaranczowy wygladal jak zepsuty przycisk marki. Stan wylaczony
   ma wygladac na wylaczony: szary, z kursorem mowiacym "jeszcze nie". */
.woocommerce div.product form.cart .single_add_to_cart_button:disabled,
.woocommerce div.product form.cart .single_add_to_cart_button.disabled {
  background: var(--lk-ink-300) !important;
  border-color: var(--lk-ink-300) !important;
  color: #fff !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* ==========================================================================
   RUNDA PIATA: poprawki wlasciciela do widoku po pierwszej przebudowie
   (2026-08-06)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CENA WARIANTU ZNIKA Z SEKCJI POD KAFLAMI

   WooCommerce wypisuje cene wybranego wariantu osobnym blokiem. Ta sama kwota
   stoi juz na kaflu, ktory klient przed chwila kliknal, wiec drugi raz nic nie
   wnosi, a rozbija rytm krokow. Komunikat o dostepnosci z tego samego bloku
   ZOSTAJE - to jedyne miejsce, w ktorym sklep mowi, ze progu chwilowo nie ma.
   -------------------------------------------------------------------------- */

.lk-konfigurator .woocommerce-variation-price { display: none; }

/* --------------------------------------------------------------------------
   4. PODSUMOWANIE CENY: WYSRODKOWANE, NA WLASNYM TLE

   Kwota do zaplaty to ostatnia rzecz, na ktora klient patrzy przed
   klknieciem. Stala przyklejona do lewej krawedzi, w jednym ciagu z reszta
   formularza. Teraz jest osobnym blokiem: podpis drobnym drukiem, kwota duza,
   calosc na jasnym tle akcentu, tuz nad przyciskiem.
   -------------------------------------------------------------------------- */

/* PULAPKA: klasa buba-apo-summary jest w dokumencie DWA razy. Widoczny blok
   to ten z podpisem i kwota (.how-much + #bubaAPOTotal); drugi to UKRYTA
   tabela rozbicia ceny wtyczki, w ktorej siedzi surowy JSON nazwy opcji i
   napis "Prices include VAT" sprzeczny z regulaminem liikye. Regula z samym
   display:flex ujawnila ten drugi. Selektor musi wskazywac na zawartosc. */
.lk-konfigurator .buba-apo-summary:has(> #bubaAPOTotal) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-block: var(--lk-s-4) var(--lk-s-3);
  padding: var(--lk-s-4) var(--lk-s-5);
  border-radius: var(--lk-r-2);
  background: var(--lk-akcent-tlo);
  text-align: center;
}

.lk-konfigurator .buba-apo-summary:has(> #bubaAPOTotal) .how-much {
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-maly);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--lk-tusz-2);
  text-transform: uppercase;
}

.lk-konfigurator .buba-apo-summary:has(> #bubaAPOTotal) #bubaAPOTotal {
  font-family: var(--lk-font-naglowek);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--lk-tusz);
}

/* Pole celu uslugi zajmuje cala szerokosc karty - to pole obowiazkowe i ma
   byc widoczne jak przycisk, a nie jak przypis. */
.lk-konfigurator table.variations[id] input[type="text"],
.lk-konfigurator table.variations[id] textarea,
.lk-konfigurator input[type="text"],
.lk-konfigurator input[type="url"],
.lk-konfigurator textarea { max-width: none; width: 100%; }

/* ==========================================================================
   RUNDA SZOSTA: szczegoly po drugim przegladzie (2026-08-06)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. OKNO ZACHETY PRZY ZEJSCIU Z PREMIUM

   Wtyczka pokazuje je przy zmianie jakosci na nizsza (Quality Upsell Widget,
   klasy cleafs-qup-*). Przycisk mial firmowy niebieski wtyczki, ktory na tej
   stronie nie wystepuje nigdzie indziej. Dostaje kolor marki; reszta okna
   zostaje, bo jego tresc i uklad sa w porzadku.
   -------------------------------------------------------------------------- */

.lk-konfigurator .cleafs-qup-add,
.cleafs-qup-overlay .cleafs-qup-add {
  background: var(--lk-akcent) !important;
  border-color: var(--lk-akcent) !important;
  color: #fff !important;
  font-family: var(--lk-font-naglowek);
  font-weight: 700;
  border-radius: var(--lk-r-1) !important;
}

.lk-konfigurator .cleafs-qup-add:hover,
.cleafs-qup-overlay .cleafs-qup-add:hover {
  background: var(--lk-akcent-ciemny) !important;
  border-color: var(--lk-akcent-ciemny) !important;
}

/* --------------------------------------------------------------------------
   3. PODSUMOWANIE: TLO TYLKO NA KWOCIE

   Wzorzec z kumplo (#bubaAPOTotal: ciemne tlo, biale cyfry, maly promien).
   Wczesniejsza wersja malowala caly pas na jasny pomarancz i wygladala jak
   komunikat, a nie jak kwota do zaplaty.
   -------------------------------------------------------------------------- */

.lk-konfigurator .buba-apo-summary:has(> #bubaAPOTotal) {
  display: block !important;
  margin-block: var(--lk-s-4) var(--lk-s-3);
  padding: 0;
  border-radius: 0;
  background: none;
  text-align: center;
}

.lk-konfigurator .buba-apo-summary:has(> #bubaAPOTotal) .how-much {
  display: block;
  margin-block-end: var(--lk-s-2);
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-maly);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--lk-tusz-2);
  text-transform: uppercase;
}

.lk-konfigurator .buba-apo-summary:has(> #bubaAPOTotal) #bubaAPOTotal {
  display: inline-block;
  padding: .35rem .9rem;
  border-radius: var(--lk-r-1);
  background: var(--lk-tusz);
  color: #fff;
  font-family: var(--lk-font-naglowek);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   4. PRZYCISK ZAKUPU: ZYWY GRADIENT

   Zyczenie wlasciciela wzorowane na buzzoid.com: gradient w ruchu zamiast
   plaskiego wypelnienia. To SWIADOME odstepstwo od zasady "marka liikye jest
   plaska, zero gradientow" - dotyczy wylacznie przycisku zakupu, czyli
   jedynego miejsca, ktore ma przyciagac wzrok mocniej niz reszta strony.

   Ruch jest wolny (osiem sekund na cykl) i zatrzymuje sie, gdy system prosi
   o ograniczenie animacji.
   -------------------------------------------------------------------------- */

@keyframes lk-gradient-cta {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.woocommerce div.product form.cart .single_add_to_cart_button:not(:disabled):not(.disabled) {
  /* PULAPKA, PRZEZ KTORA ANIMACJA STALA W MIEJSCU: skrocona wlasnosc background
     ustawia rowniez background-position, a deklaracja z wykrzyknikiem bije
     animacje w kaskadzie (klatki maja pierwszenstwo nad zwyklymi regulami, ale
     NIE nad !important). Gradient idzie wiec przez background-image, a pozycje
     tla zostawiamy klatkom. */
  background-color: transparent !important;
  background-image: linear-gradient(
    45deg,
    var(--orange-600) 0%,
    var(--orange-500) 25%,
    var(--orange-400) 50%,
    var(--orange-500) 75%,
    /* Byl tu orange-700 (#bd2c13); ten odcien schodzi z motywu decyzja
       Mateusza z 06.08.2026. Fala potrzebuje jednak ciemniejszego konca, bo
       inaczej przycisk staje sie plaska plama i animacja przestaje byc widoczna
       - stad orange-600, ten sam odcien, ktory zamyka gradient od drugiej
       strony. */
    var(--orange-600) 100%
  ) !important;
  background-repeat: no-repeat !important;
  background-size: 300% 300% !important;
  animation: lk-gradient-cta 8s ease infinite;
  border: 0 !important;
  color: #fff !important;
  font-family: var(--lk-font-naglowek);
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px rgba(255, 84, 54, .28);
  transition: box-shadow var(--lk-czas) var(--lk-ease),
              transform var(--lk-czas) var(--lk-ease);
}

.woocommerce div.product form.cart .single_add_to_cart_button:not(:disabled):not(.disabled):hover {
  box-shadow: 0 10px 26px rgba(255, 84, 54, .38);
  transform: translateY(-1px);
}

.woocommerce div.product form.cart .single_add_to_cart_button:not(:disabled):not(.disabled):active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce div.product form.cart .single_add_to_cart_button:not(:disabled):not(.disabled) {
    animation: none;
    background-position: 50% 50%;
  }
}

/* --------------------------------------------------------------------------
   5. KOMORKA Z POLEM CELU BEZ WCIECIA Z PRAWEJ

   Wtyczka daje komorce padding-right 16 px, przez co pole na nazwe konta bylo
   o te 16 px wezsze od kafli, dodatkow i przycisku. Teraz konczy sie w tej
   samej linii co reszta karty.
   -------------------------------------------------------------------------- */

.lk-konfigurator table.variations[id] td.label {
  padding-inline: 0 !important;
}

/* ==========================================================================
   WSKAZNIK DZIALANIA USLUGI (2026-08-06)

   Zielona kropka z tetnem, zdanie o dzialaniu uslugi i godzina ostatniego
   sprawdzenia. Stoi pod krotkim opisem, czyli w miejscu, w ktorym klient
   podejmuje decyzje "czy ten sklep w ogole zyje".

   Tetno jest wolne i delikatne. Ma sygnalizowac, ze cos jest sprawdzane na
   biezaco, a nie migac przez cala wizyte - dlatego trzy sekundy na cykl i
   zatrzymanie przy prefers-reduced-motion.
   ========================================================================== */

.lk-status-uslugi {
  display: flex;
  align-items: center;
  gap: var(--lk-s-2);
  flex-wrap: wrap;
  margin-block: var(--lk-s-3) var(--lk-s-4);
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-maly);
  line-height: 1.4;
}

.lk-status-uslugi__kropka {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lk-sukces);
}

/* Fala wokol kropki: osobny pseudo-element, zeby sama kropka byla nieruchoma
   i czytelna, a ruch dotyczyl tylko poswiaty. */
.lk-status-uslugi__kropka::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--lk-sukces);
  opacity: .35;
  animation: lk-tetno 3s ease-out infinite;
}

@keyframes lk-tetno {
  0%   { transform: scale(.6); opacity: .45; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

.lk-status-uslugi__tekst {
  font-weight: 600;
  color: var(--lk-sukces-tekst);
}

.lk-status-uslugi__czas {
  color: var(--lk-przygaszony);
}

.lk-status-uslugi__czas::before {
  content: "·";
  margin-inline-end: var(--lk-s-2);
  color: var(--lk-linia);
}

@media (prefers-reduced-motion: reduce) {
  .lk-status-uslugi__kropka::after { animation: none; opacity: .28; }
}

/* ==========================================================================
   KREATOR: CZTERY KROKI ZAMIAST JEDNEJ DLUGIEJ LISTY (2026-08-06)

   Cala oferta naraz (16 progow, jakosc, 5-7 dodatkow, pole celu, cena,
   przycisk) przytlaczala na pierwszy rzut oka. Klient przechodzi teraz przez
   cztery decyzje: ile, jaka jakosc, co dolozyc, gdzie dostarczyc.

   ZERO MIGOTANIA: formularz ma data-krok="1" JUZ Z SERWERA (variable.php),
   wiec ponizsze reguly chowaja dalsze kroki od pierwszej klatki. Skrypt
   zmienia tylko wartosc atrybutu - nie przebudowuje dokumentu i niczego nie
   przenosi. Gdy skryptu zabraknie, znacznik <noscript> przywraca caly
   formularz naraz, wiec zamowienie zlozyc sie da.

   PODZIAL bierze te same selektory, na ktorych stoi caly wyglad tej sekcji:
   kafle ilosci naleza do motywu, a rzad .row to wybor jakosci, kazdy
   .container-option.checkbox-item to dodatek, zagniezdzony blok
   .woocommerce-variation-add-to-cart to pole celu uslugi.
   ========================================================================== */

/* Domyslnie chowamy wszystko poza pierwszym krokiem.

   POLA CELU chowamy POJEDYNCZO, a nie razem z ich kontenerem: w tym samym
   kontenerze siedzi podsumowanie ceny, ktore ma towarzyszyc klientowi na
   kazdym kroku. Wykrzyknik jest tu konieczny, bo wtyczka pokazuje wlasciwe
   pole stylem osadzonym w atrybucie (zaleznie od rodzaju uslugi) - w kroku
   czwartym tej reguly nie ma, wiec wtyczka znow decyduje sama.

   PRZYCISK ZAKUPU wymaga pelnej sciezki selektora, bo arkusz sklepu nadaje
   przyciskom display: inline-flex z wyzsza specyficznoscia niz sama klasa. */
.lk-kreator .buba-apo-container > p.link-header,
.lk-kreator .buba-apo-container > .row,
.lk-kreator .buba-apo-container > .container-option.checkbox-item { display: none; }

.lk-kreator:not([data-krok="3"]) .woocommerce-variation-add-to-cart .woocommerce-variation-add-to-cart table.variations[id] { display: none !important; }

.woocommerce div.product form.lk-kreator:not([data-krok="3"]) .single_add_to_cart_button,
.woocommerce div.product form.lk-kreator:not([data-krok="3"]) .cleafs-atc-guard {
  /* Wykrzyknik: przycisk zakupu dostaje display rowniez ze skryptu wtyczki
     (straznik cleafs-atc-guard przestawia go w locie), a to bije zwykla
     regule arkusza niezaleznie od specyficznosci. */
  display: none !important;
}

/* Krok 2: jakosc NAD dodatkami. Oba wybory podnosza wartosc zamowienia, a
   kolejnosc wynika z dokumentu - wtyczka rysuje rzad jakosci przed wierszami
   dodatkow, wiec nic nie trzeba przestawiac. */
.lk-kreator[data-krok="2"] .lk-krok--ilosc { display: none; }
.lk-kreator[data-krok="2"] .buba-apo-container > .row { display: grid; }
.lk-kreator[data-krok="2"] .buba-apo-container > .container-option.checkbox-item { display: block; }

/* Krok 3: samo pole celu i zakup. */
.lk-kreator[data-krok="3"] .lk-krok--ilosc { display: none; }

/* Naglowek kroku 1 ("Choose the amount") juz nie jest potrzebny: jego role przejal pasek
   etapow nad trescia, a powtarzanie tej samej nazwy dwa razy na jednym ekranie tylko zabiera
   miejsce. ZOSTAJE etykieta pola celu ("Instagram account name") - to nie naglowek
   kroku, tylko instrukcja, co wpisac. */
.lk-kreator .lk-krok__tytul { display: none !important; }

/* Naglowki wtyczki ("Quality", "Additional options") wracaja w kroku 2 (plansze s1-krok2 i s9a, sekcja "KROK 2" na koncu
   arkusza): kafle i wiersze maja podpis, a pasek etapow niesie tylko nazwe kroku. W pozostalych krokach zostaja schowane. */
.lk-kreator:not([data-krok="2"]) .buba-apo-container > p.link-header { display: none !important; }

/* Pola celu i przycisk zakupu wracaja same: reguly chowajace maja warunek
   :not([data-krok="2"]) i :not([data-krok="3"]). */



/* --------------------------------------------------------------------------
   Pasek etapow i przyciski
   -------------------------------------------------------------------------- */

.lk-kreator__pasek[hidden] { display: none; }

.lk-kreator__pasek {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  align-items: center;
  gap: var(--lk-s-2);
  /* Odstepy z makiet (kroki: 14 px pod numerami, 18 px pod kreska). */
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-block-end: 1px solid var(--lk-linia);
  list-style: none;
}

.lk-kreator__etap {
  display: flex;
  align-items: center;
  gap: var(--lk-s-2);
  min-width: 0;
  color: var(--lk-przygaszony);
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-maly);
  font-weight: 600;
}

.lk-kreator__etap-numer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  border: 1.5px solid var(--lk-linia);
  background: var(--lk-papier);
  color: var(--lk-przygaszony);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-mikro);
  font-weight: 700;
  transition: background var(--lk-czas) var(--lk-ease),
              border-color var(--lk-czas) var(--lk-ease),
              color var(--lk-czas) var(--lk-ease);
}

.lk-kreator__etap-nazwa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Etap biezacy: pelny akcent, jak wybrany kafel. */
.lk-kreator__etap.jest-biezacy { color: var(--lk-tusz); }

.lk-kreator__etap.jest-biezacy .lk-kreator__etap-numer {
  border-color: var(--lk-akcent);
  background: var(--lk-akcent);
  color: #fff;
}

/* Etap zamkniety: ptaszek zamiast numeru, zeby postep bylo widac jednym rzutem oka. */
.lk-kreator__etap.jest-zrobiony { color: var(--lk-tusz-2); cursor: pointer; }

.lk-kreator__etap.jest-zrobiony .lk-kreator__etap-numer {
  border-color: var(--lk-sukces);
  background: var(--lk-sukces);
  color: #fff;
  font-size: 0;
}

.lk-kreator__etap.jest-zrobiony .lk-kreator__etap-numer::after {
  content: "✓";
  font-size: var(--lk-t-mikro);
  line-height: 1;
}

/* Rezerwa 108 px po prawej (miejsce na zielona plakietke kwoty w rogu karty) zdjeta razem z plakietka (B3, B4): ucinala
   nazwe kroku ("Quality and ext...") na telefonie, a plansze maja pelna nazwe ("Quality and extras"). */

/* Numery przy naglowkach sekcji schodza, gdy dziala kreator: numeracje niesie
   pasek etapow, a licznik CSS liczy tylko sekcje WIDOCZNE, wiec na kroku
   czwartym pole celu dostawalo numer "1" i klient widzial dwie sprzeczne
   numeracje naraz. Same naglowki zostaja - daja kontekst w obrebie kroku. */
.lk-kreator .lk-krok__tytul::before,
.lk-kreator .buba-apo-container > p.link-header::before,
.lk-kreator table.variations[id] p.label::before,
.lk-kreator table.variations[id] p#link-header::before,
.lk-kreator table.variations[id] label#ilosccomentarzy::before,
.lk-kreator table.variations[id] label#ilosckomentarzy::before {
  display: none !important;
}

/* --------------------------------------------------------------------------
   ANIMACJE KREATORA (2026-08-06)

   Krotka animacja pokazuje, ze tresc kroku sie ZMIENILA (bez niej przejscie
   wyglada jak przeladowanie kawalka strony). Przycisk "Dalej" nie przenosi
   klienta dalej sam po wyborze progu; dawny blysk na nim zdjety w zadaniu B3
   (kwota i przycisk siedza w pasku, zmiana kwoty daje znac o wyborze).

   Wylacza sie przy prefers-reduced-motion.
   -------------------------------------------------------------------------- */

@keyframes lk-krok-naprzod {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes lk-krok-wstecz {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

/* Animujemy zawartosc kroku, nie caly formularz: pasek etapow, kwota i
   przyciski maja stac nieruchomo, zeby oko mialo sie czego trzymac. */
.lk-kreator.jest-w-ruchu[data-kierunek="naprzod"] .lk-krok--ilosc,
.lk-kreator.jest-w-ruchu[data-kierunek="naprzod"] .buba-apo-container > .row,
.lk-kreator.jest-w-ruchu[data-kierunek="naprzod"] .buba-apo-container > .container-option.checkbox-item,
.lk-kreator.jest-w-ruchu[data-kierunek="naprzod"] table.variations[id] {
  animation: lk-krok-naprzod .26s var(--lk-ease) both;
}

.lk-kreator.jest-w-ruchu[data-kierunek="wstecz"] .lk-krok--ilosc,
.lk-kreator.jest-w-ruchu[data-kierunek="wstecz"] .buba-apo-container > .row,
.lk-kreator.jest-w-ruchu[data-kierunek="wstecz"] .buba-apo-container > .container-option.checkbox-item,
.lk-kreator.jest-w-ruchu[data-kierunek="wstecz"] table.variations[id] {
  animation: lk-krok-wstecz .26s var(--lk-ease) both;
}

/* Dodatki wchodza jeden po drugim - piec wierszy naraz wyglada jak mrugniecie,
   a schodkowo widac, ze to lista. */
.lk-kreator.jest-w-ruchu .buba-apo-container > .container-option.checkbox-item:nth-child(n+2) { animation-delay: .04s; }
.lk-kreator.jest-w-ruchu .buba-apo-container > .container-option.checkbox-item:nth-child(n+3) { animation-delay: .08s; }
.lk-kreator.jest-w-ruchu .buba-apo-container > .container-option.checkbox-item:nth-child(n+4) { animation-delay: .12s; }
.lk-kreator.jest-w-ruchu .buba-apo-container > .container-option.checkbox-item:nth-child(n+5) { animation-delay: .16s; }

/* Zmiana etapu w pasku: numer biezacego lekko "siada" na miejsce. */
@keyframes lk-etap-wejscie {
  from { transform: scale(.82); }
  to   { transform: none; }
}

.lk-kreator.jest-w-ruchu .lk-kreator__etap.jest-biezacy .lk-kreator__etap-numer {
  animation: lk-etap-wejscie .26s var(--lk-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .lk-kreator.jest-w-ruchu .lk-krok--ilosc,
  .lk-kreator.jest-w-ruchu .buba-apo-container > .row,
  .lk-kreator.jest-w-ruchu .buba-apo-container > .container-option.checkbox-item,
  .lk-kreator.jest-w-ruchu table.variations[id],
  .lk-kreator.jest-w-ruchu .lk-kreator__etap-numer { animation: none; }
}


/* --------------------------------------------------------------------------
   KARTA KREATORA (2026-08-06, kwota z rogu karty zdjeta 26.10.2026)

   Kwota do zaplaty nie siedzi juz w rogu karty: od zadania B3 jest w pasku
   .lk-pasek (telefon) i w wierszu na dole karty (komputer). Formularz zostaje
   punktem odniesienia dla elementow pozycjonowanych wewnatrz karty.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.lk-kreator { position: relative; }

/* Pasek etapow: same numery, bez podpisow. Nazwy zostaja w dokumencie dla
   czytnikow ekranu (klasa screen-reader-text z arkusza rdzenia). */
.lk-kreator__etap { gap: 0; }



/* --------------------------------------------------------------------------
   NAZWA BIEZACEGO KROKU (2026-08-06)

   Same numery nie mowia, gdzie klient stoi - i dotyczy to kazdej szerokosci,
   nie tylko telefonu. Biezacy krok pokazuje wiec nazwe, pozostale zostaja
   kolkami. Nazwy krokow nieaktywnych siedza dalej w dokumencie dla czytnikow
   ekranu.

   Wykrzykniki sa konieczne: klasa screen-reader-text z arkusza rdzenia chowa
   tekst przez position: absolute !important, wiec bez nich nazwa renderuje sie
   poza paskiem (zmierzone: y=138 zamiast w linii etapow).
   -------------------------------------------------------------------------- */

.lk-kreator__etap.jest-biezacy { gap: var(--lk-s-2); }

.lk-kreator__etap.jest-biezacy .lk-kreator__etap-nazwa {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: nowrap;
  font-size: var(--lk-t-maly);
  font-weight: 700;
  color: var(--lk-tusz);
}

/* --------------------------------------------------------------------------
   DROBIAZGI Z TELEFONU (2026-08-06)
   -------------------------------------------------------------------------- */

/* Etykieta pola celu bez wlasnego marginesu: odstepy w kroku daje juz karta
   i sam rzad przyciskow, a dodatkowy margines odsuwal pole od paska etapow
   bardziej niz reszte tresci. */
.lk-konfigurator table.variations[id] p#link-header,
.lk-konfigurator table.variations[id] p.label {
  margin: 0 !important;
}

/* ==========================================================================
   BLOK "PLATNOSCI I BEZPIECZENSTWO" (2026-08-06)

   Kolumna ze zdjeciem konczyla sie w polowie wysokosci karty zakupu i dalej
   byla pusta. Blok wypelnia to miejsce dwiema informacjami, ktorych klient
   przy przycisku nie mial nigdzie: czym zaplaci i czy to bezpieczne.

   UMIEJSCOWIENIE W SIATCE: strona produktu to grid o dwoch kolumnach, a blok
   stoi w dokumencie miedzy galeria a karta zakupu. Bez korekty wpadlby do
   drugiego rzedu POD karta (na duzym ekranie) i PRZED nia (na telefonie).
   Dlatego karta rozciaga sie na dwa rzedy, a blok siada w drugim rzedzie
   pierwszej kolumny, czyli dokladnie pod zdjeciem.
   ========================================================================== */

/* Kolumna ze zdjeciem: zdjecie i blok w jednym kontenerze, wiec zaden z nich
   nie zalezy od wysokosci karty zakupu obok. */
.lk-kolumna { display: flex; flex-direction: column; min-width: 0; }

.lk-zaufanie-box {
  /* Zdjecie ma wlasny dolny margines (32 px z arkusza sklepu), wiec blok
     doklada juz tylko tyle, zeby oba nie sklejaly sie w jedna plame. */
  margin-block-start: var(--lk-s-2);
  padding: var(--lk-s-4);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-3);
  background: var(--lk-papier);
}

.lk-zaufanie__tytul {
  margin: 0 0 var(--lk-s-3);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-baza);
  font-weight: 800;
  color: var(--lk-tusz);
}

.lk-zaufanie__metody {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s-1);
  margin: 0 0 var(--lk-s-3);
  padding: 0;
  list-style: none;
}

/* Znaki metod platnosci niosa wlasne tlo i wlasna ramke (32x24 od Mollie),
   wiec element listy jest tu tylko uchwytem - zadnego pudelka wokol pudelka. */
.lk-zaufanie__metody li {
  display: flex;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

/* Wysokosc rzadzi, szerokosc idzie za nia: znaki maja rozne proporcje, a rowna
   linia gorna i dolna jest tym, co widac. Wpisane w plikach width/height
   trzeba przy tym uniewaznic.

   PROBOWANE I ODRZUCONE 06.08.2026: rozciaganie rzedu na cala szerokosc bloku
   (rowne kolumny, znak 109x85 px na tablecie). Mateusz wolal male znaki. */
.lk-zaufanie__metody svg {
  display: block;
  width: auto;
  height: 26px;
}

/* Awaryjna plakietka, gdy pliku ze znakiem zabraknie: klient ma sie dowiedziec
   o metodzie platnosci nawet wtedy. */
.lk-zaufanie__metoda-tekst {
  padding: 4px 9px;
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-1);
  font-size: var(--lk-t-mikro);
  font-weight: 700;
  color: var(--lk-tusz-2);
  white-space: nowrap;
}

.lk-zaufanie__punkty {
  display: flex;
  flex-direction: column;
  gap: var(--lk-s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-zaufanie__punkty li {
  display: flex;
  gap: var(--lk-s-2);
  font-size: var(--lk-t-maly);
  line-height: 1.45;
  color: var(--lk-tusz-2);
}

.lk-zaufanie__punkty strong { color: var(--lk-tusz); }

.lk-zaufanie__punkty .lk-ikona { flex: none; margin-block-start: 2px; color: var(--lk-akcent); }

/* Licznik dostarczonych uslug: zamyka kolumne pod blokiem platnosci.

   BEZ WLASNEJ RAMKI. W kolumnie stoi juz ramka bloku, a druga pod nia robilaby
   z kolumny stos pudelek. Licznik trzyma sie na typografii i na kolorze. */
.lk-licznik {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: var(--lk-s-4);
  padding-inline: var(--lk-s-2);
  text-align: center;
}

/* Rok stoi nad zdaniem, zeby samo zdanie zostalo krotkie i zmiescilo sie w
   waskiej kolumnie bez lamania w przypadkowym miejscu. */
.lk-licznik__rok {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--lk-przygaszony);
}

.lk-licznik__wstep {
  font-family: var(--lk-font-naglowek);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--lk-tusz-2);
  text-wrap: balance;
}

/* Gradient na literach: kolor bierze sie z tla przycietego do ksztaltu glifow.

   ZAPASOWE WYJSCIE JEST W TEJ SAMEJ REGULE. Wlasciwosc color stoi PRZED
   przycieciem, wiec przegladarka bez obslugi background-clip: text pokaze
   pelny #bd2c13 zamiast pustego miejsca. Kolejnosc ma znaczenie.

   Rozmiar 20 px przy grubosci 800 liczy sie jako duzy tekst, wiec dla
   najjasniejszego konca gradientu (#ff5436, 3,19:1) obowiazuje prog 3:1,
   a nie 4,5:1. Jasniejszy start byl sprawdzony i odrzucony 08.08.2026. */
.lk-licznik__liczba {
  font-family: var(--lk-font-naglowek);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--orange-700);
  background-image: linear-gradient(95deg, var(--orange-500) 0%, var(--orange-600) 45%, var(--orange-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-wrap: balance;
}

/* Tryb wysokiego kontrastu systemu wycina obrazy tla, wiec napis przyciety do
   gradientu zniknalby razem z nim. Oddajemy go kolorom systemowym. */
@media (forced-colors: active) {
  .lk-licznik__liczba {
    background-image: none;
    -webkit-text-fill-color: CanvasText;
    color: CanvasText;
  }
}

/* Telefon: licznik zostaje sam na dole strony, wiec moze byc wiekszy.

   ALIGN-SELF JEST TU KONIECZNE, NIE KOSMETYCZNE. Na waskim ekranie kolumna
   znika z ukladu (display: contents), a licznik staje sie elementem kolumnowego
   flexa strony produktu. Ten flex nie rozciaga dzieci, wiec licznik kurczyl sie
   do szerokosci najdluzszej linii (255 px przy ekranie 390) i przyklejal do
   lewej krawedzi. Tekst byl wtedy wysrodkowany WEWNATRZ tego waskiego pudelka,
   czyli na ekranie stal krzywo. Zlapane na zywo 08.08.2026. */
@media (max-width: 900px) {
  .woocommerce div.product .lk-licznik {
    align-self: stretch;
    margin-block-start: var(--lk-s-5);
  }

  .woocommerce div.product .lk-licznik__wstep { font-size: 19px; }
  .woocommerce div.product .lk-licznik__liczba { font-size: 24px; }
}

/* Na telefonie kolumny sie skladaja, wiec blok schodzi POD karte zakupu -
   inaczej klient dostalby informacje o platnosciach, zanim zobaczy, co kupuje. */
/* Na telefonie kolumny sie skladaja i blok ma zejsc POD karte zakupu, a nie
   zostac przyklejony do zdjecia. Kontener kolumny "znika" wtedy z ukladu
   (display: contents), dzieki czemu zdjecie i blok staja sie bezposrednimi
   elementami siatki i mozna im nadac kolejnosc niezaleznie od siebie. */
@media (max-width: 900px) {
  .woocommerce div.product { display: flex; flex-direction: column; }
  .lk-kolumna { display: contents; }

  /* Blok trzyma sie karty zakupu, zamiast wisiec w polowie drogi. Skladaly sie
     na to trzy odstepy naraz: dolny margines formularza (24 px), odstep miedzy
     elementami siatki (32 px) i wlasny margines bloku. Formularz oddaje swoj,
     a blok znosi odstep siatki i zostawia tyle, ile potrzeba na oddech. */
  .woocommerce div.product form.cart { margin-block-end: 0; }

  /* Blok platnosci stoi teraz tuz pod karta zakupu (pasek dostaw zdjety
     2026-08-30), wiec to on znosi odstep siatki. */
  .woocommerce div.product .lk-zaufanie-box {
    margin-block-start: calc(var(--lk-s-6) * -1 + var(--lk-s-2));
  }
  .woocommerce div.product .woocommerce-product-gallery { order: 1; }
  .woocommerce div.product > .summary { order: 2; }

  /* Pasek dostaw ma ten sam numer co blok platnosci, wiec o kolejnosci
     decyduje dokument - a tam stoi przed blokiem. Bez tego przypisania
     dostawal domyslne zero i wskakiwal PRZED zdjecie, czyli na sam gora
     strony (zlapane na zywo 2026-08-08). */
  .woocommerce div.product .lk-zaufanie-box { order: 3; }
  .woocommerce div.product .lk-licznik { order: 3; }
  .woocommerce div.product > .related { order: 5; }
}

/* Naglowek bloku platnosci: arkusz sklepu robi z naglowkow w tej okolicy
   wersaliki z rozstrzelona spacja i wcina je w polowie szerokosci, przez co
   plakietka metody wchodzila obok tytulu zamiast pod niego. */
.woocommerce div.product .lk-zaufanie-box .lk-zaufanie__tytul {
  display: block;
  width: 100%;
  margin: 0 0 var(--lk-s-3);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-baza);
  font-weight: 800;
  letter-spacing: normal;
  text-transform: none;
  color: var(--lk-tusz);
}


/* ==========================================================================
   POPRAWKI Z 06.08.2026 (wieczor): tablet i waski ekran
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. BLOK "PLATNOSC I BEZPIECZENSTWO" NA TABLECIE (do 900 px)

   Ponizej 900 px kolumny sie skladaja i wszystko idzie jedno pod drugim, ale
   blok jako jedyny NIE rozciagal sie na cala szerokosc: kontener ustawia
   elementy do poczatku linii, wiec zdjecie i karta zakupu brally pelne 707 px
   (maja wlasna szerokosc), a blok tylko tyle, ile zajmowala jego tresc - 507
   px przy 768 px ekranu. Na telefonie tego nie widac, bo tam tresc i tak
   wypelnia szerokosc; miedzy 550 a 900 px roznica to 200 px.

   Punkty ida wtedy w dwoch kolumnach, zeby zdania nie ciagnely sie przez
   caly ekran. Powyzej 900 px uklad zostaje bez zmian.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .woocommerce div.product .lk-zaufanie-box {
    width: 100%;
    align-self: stretch;
  }
}

@media (min-width: 550px) and (max-width: 900px) {
  .lk-zaufanie__punkty {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--lk-s-5);
  }

  /* Nieparzysty ostatni punkt bierze obie kolumny.
     Przy piatym punkcie (obsluga 24/7, dolozona 09.08.2026) ostatni rzad mial
     jeden element i dziure po prawej - wygladalo to na urwana liste, a nie na
     domkniecie. Warunek nth-child(odd) trzyma to samo w razie dolozenia
     szostego punktu: wtedy rzedy znowu wychodza rowno i regula nie zadziala. */
  .lk-zaufanie__punkty li:nth-child(odd):last-child {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   3. NAZWA KROKU NIE WCHODZI POD KWOTE

   Kwota stoi w prawym gornym rogu ramki, a pasek etapow zostawia jej miejsce
   sztywnym odstepem. Przy waskim ekranie dluga nazwa ("Quality and extras")
   przekraczala ten odstep i napisy nachodzily na siebie. Etap moze sie teraz
   kurczyc, a nazwa skraca sie wielokropkiem.
   -------------------------------------------------------------------------- */

.lk-kreator__pasek { grid-auto-columns: minmax(0, max-content); }

.lk-kreator__etap-nazwa:not(.screen-reader-text) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. DOKONCZENIE TRZECH POPRAWEK PO OGLEDZINACH NA TELEFONIE (390 px)
   -------------------------------------------------------------------------- */

/* 4b. Podpis "Total" schodzi z waskiego ekranu, zostaje sama kwota.
   Zielona plakietka z kwota mowi sama za siebie, a podpis zabieral 49 px
   dokladnie tam, gdzie stoi nazwa kroku - napisy sklejaly sie w jeden ciag
   ("Quality and extrasTOTAL"). Odstep paska zmniejsza sie o tyle samo. */

/* 4c. Nazwa biezacego kroku moze sie skrocic. Regula odslaniajaca ja spod
   klasy dla czytnikow ekranu ustawia overflow: visible, wiec bez tego napis
   wychodzilby poza pasek zamiast konczyc sie wielokropkiem. */
.lk-kreator__etap.jest-biezacy { min-width: 0; }

.lk-kreator__etap.jest-biezacy .lk-kreator__etap-nazwa {
  min-width: 0;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   5. KWOTA PRZY OPCJI STOI ROWNO Z JEJ NAZWA

   Kwota wisiala 8 px nad nazwa - na tyle malo, ze wygladalo to na niechlujne
   zlozenie, a nie na blad. Zrodlo bylo we wlasnym arkuszu sklepu: regula dla
   DUZEJ ceny produktu pod tytulem (span.price z odstepem dolnym 16 px) lapie
   kazdy span.price wewnatrz strony produktu, a wiec takze kwoty przy opcjach.
   Wiersz opcji centruje tresc w pionie, wiec odstep dolny podnosil kwote
   dokladnie o polowe swojej wysokosci.
   -------------------------------------------------------------------------- */

.woocommerce div.product form.lk-konfigurator span.price {
  margin-block: 0;
}

/* --------------------------------------------------------------------------
   8. KARTECZKA KONTA PUBLICZNEGO POD POLEM Z NAZWA (06.08.2026, wyglad od B5: plansza F1)
   -------------------------------------------------------------------------- */

/* Karteczka stoi pod polem z nazwa konta i pokazuje sie tylko na kroku, na ktorym to pole widac. Wyglad (kolor #FFEFC6,
   kolko z emoji, strzalka) daje wspolna baza .lk-dymek w sekcji "KROK 3" na koncu arkusza. Selektor z .lk-dymek celowo:
   baza ".lk-dymek { display: flex }" stoi nizej w arkuszu z ta sama sila i bez drugiej klasy wygrywala, wiec karteczka byla
   widoczna takze w kroku 1 i 2 (recenzja koncowa 0.18.0, C1). Regula "ukryta" przy bledzie (sekcja KROK 3) jest silniejsza. */
.lk-dymek.lk-uwaga-konto { display: none; }

.lk-kreator[data-krok="3"] .lk-dymek.lk-uwaga-konto { display: flex; }

/* ==========================================================================
   OZNACZENIA OSZCZEDNOSCI: USUNIETE (26.10.2026, zadanie B5)
   Plakietka ceny, procent na kaflu i rozbicie "Today you pay / You're saving" zastapilo podsumowanie T1 (sekcja
   "KROK 3" na koncu arkusza): wiersze pozycji, osobny wiersz "Sale discount" na zielono i "Total".
   ========================================================================== */

/* Karta zakupu oddaje swoj margines dolny, zeby blok platnosci pod nia nie
   odjechal o dodatkowe 32 px. Klasa entry-summary dolozona swiadomie: arkusz
   sklepu ma regule ".woocommerce div.product .summary { margin-bottom: 2em }"
   o TAKIEJ SAMEJ specyficznosci co nasza, a laduje sie pozniej, wiec wygrywal
   remis. Jedna klasa wiecej rozstrzyga to bez uciekania sie do !important. */
@media (max-width: 900px) {
  .woocommerce div.product > .summary.entry-summary {
    margin-block-end: 0;
  }
}

/* ==========================================================================
   NAGLOWEK PRODUKTU: DRUGA LINIA I ZNAK KATEGORII (2026-08-30)

   Obie rzeczy wybrane przez wlasciciela z makiety. Obietnica dostawy schodzi
   pod nazwe uslugi zamiast przedluzac pierwszy wiersz, a kategoria siada na
   miniaturce jako pigulka z nazwa serwisu - w LEWYM DOLNYM rogu, bo gorne
   nalezy do plakietki wyprzedazy.
   ========================================================================== */

/* Stopien liczony w em, nie w px: naglowek produktu chodzi na clamp miedzy
   26 a 40 px, wiec druga linia ma sie skalowac razem z nim. Wpisany px
   rozjechalby proporcje na kazdej posredniej szerokosci ekranu. */
.lk-naglowek__obietnica {
  display: block;
  margin-block-start: 6px;
  font-size: .65em;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--lk-akcent);
}

/* Punkt zaczepienia dla pigulki kategorii. Arkusz sklepu daje tu position:
   relative sam z siebie, ale zapisujemy to jawnie: gdyby kiedys znikl,
   pigulka odjechalaby do rogu calej strony i nikt nie skojarzylby przyczyny. */
.woocommerce div.product div.images.woocommerce-product-gallery { position: relative; }

/* DLUGI SELEKTOR JEST TU KONIECZNY, NIE OZDOBNY. Arkusz sklepu ma regule
   ".woocommerce div.product div.images img { width: 100% }" o specyficznosci
   0-3-3, wiec krotkie ".lk-znak-kategorii img" (0-1-1) przegrywa po cichu
   i ikona rozciaga sie na cala szerokosc zdjecia. Zlapane na zywo 2026-08-30:
   znak wielkosci polowy miniaturki zamiast pigulki 22 px.

   Poza tym: ikona przychodzi z panelu, wiec jej proporcje sa poza nasza
   kontrola - object-fit trzyma ja w kwadracie zamiast rozciagac, a wlasny
   promien dopasowuje ja do pigulki. */
.woocommerce div.product div.images .lk-znak-kategorii img {
  display: block;
  width: 22px;
  height: 22px;
  min-width: 0;
  border-radius: 6px;
  object-fit: contain;
}


/* Zdjecie uslugi na wlasnym polu (2026-08-30, z makiety).

   POWOD: grafiki uslug sa kolorowymi rysunkami na przezroczystym tle i na bialej
   stronie wisialy w prozni, bez zadnej krawedzi. Szare pole daje im ramy, a przy
   okazji wyrownuje wysokosc kolumny ze zdjeciem do karty zakupu obok.

   KAZDA REGULA GALERII IDZIE PRZEZ div.images. Arkusz sklepu celuje w nia
   dokladnie tak i przebija krotsze selektory - pierwsza wersja tej sekcji
   siedziala na samym __wrapper i przegrala z ".woocommerce div.product
   div.images .woocommerce-product-gallery__wrapper { padding: 0 }" (0-4-3),
   przez co rysunek dotykal krawedzi pola. Tlo trzymamy na SAMEJ galerii, nie
   na wrapperze: wrapper jest przerabiany przez flexslider, a pigulka kategorii
   kotwiczy sie wlasnie do galerii, wiec zostaje w rogu POLA, nie rysunku.

   MARGINES DOLNY zbity z 2em (arkusz sklepu) do zera, bo odstep do bloku
   platnosci wyznacza sam blok. Inaczej robia sie dwa odstepy jeden pod drugim
   i kolumna ze zdjeciem rozjezdza sie z karta zakupu obok. */
.woocommerce div.product div.images.woocommerce-product-gallery {
  margin-block-end: 0;
  padding: var(--lk-s-6);
  background: var(--lk-papier-2);
  border-radius: var(--lk-r-2);
}

/* Rysunek nie potrzebuje juz wlasnego promienia - ma go pole pod spodem. */
.woocommerce div.product div.images.woocommerce-product-gallery img {
  border-radius: 0;
}

@media (max-width: 640px) {
  .woocommerce div.product div.images.woocommerce-product-gallery { padding: var(--lk-s-5); }
}

/* ==========================================================================
   WYBOR O DWOCH WYMIARACH (14.09.2026, przebudowa 26.10.2026: plansza w7a)

   Czesc uslug ma dwa atrybuty wariantowe (ilosc razy czas trwania, ilosc razy
   rodzaj reakcji, lajki na post razy liczba postow). Oba wymiary sa kaflami 6D,
   jeden pod drugim, kazdy pod wlasnym pytaniem. Kwoty nosza tylko kafle wymiaru
   glownego (dol kafla); kafle wymiaru kontekstowego (.lk-kontekst) sa
   jednoczesciowe albo maja na dole oszczednosc.

   Reguly stoja na koncu arkusza swiadomie: nadpisuja sekcje kreatora, ktora
   chowa naglowki krokow. Przy jednym wymiarze naglowek jest zbedny (pasek
   etapow mowi "Amount"), przy dwoch bez pytan nie da sie odroznic gornego
   rzedu od dolnego.
   ========================================================================== */

.lk-kontekst {
  margin-block-end: 22px;
}

.lk-kontekst__pytanie,
.lk-ilosci__pytanie {
  display: none;
  margin: 0 0 10px;
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lk-tusz);
}

/* Pytania pokazujemy TYLKO przy dwoch wymiarach. */
.lk-krok--ilosc.ma-kontekst .lk-kontekst__pytanie,
.lk-krok--ilosc.ma-kontekst .lk-ilosci__pytanie {
  display: block;
}

/* Siatka wymiaru glownego pod pytaniem: odstep na zakladke "Most popular" (wystaje 19 px) takze na telefonie. */
.lk-krok--ilosc.ma-kontekst > .lk-ilosci { padding-block-start: 20px; }

/* Kafle wymiaru kontekstowego: bez zakladki nad kaflem, wiec bez odstepu na nia (plansza w7a: odstep rzedow 8 px). */
.lk-ilosci--kontekst {
  row-gap: var(--lk-s-2);
  padding-block-start: 0;
}

/* Cztery kafle (czas transmisji Twitch) w jednym rzedzie na telefonie; na komputerze ta sama siatka 5 kolumn co kafle glowne. */
@media (max-width: 640px) {
  .lk-ilosci--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Szesc rodzajow reakcji: rowny uklad 3 na 2 na telefonie, w jednym rzedzie na komputerze. */
@media (min-width: 641px) {
  .lk-ilosci--n6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==========================================================================
   PASEK 4A (telefon) I WIERSZ D1A (komputer), zadanie B3 (26.10.2026)

   Jeden element .lk-pasek z serwera (variable.php): kwota, krotki opis
   wyboru, okragly Wstecz (od kroku 2) i przycisk Continue / Add to basket.
   Wymiary i kolory z makiet (pasek_tel i d_dol_karty w generuj.py):
   telefon 24 px / 12,5 px, przycisk 58 px, Wstecz 52 px; komputer 28 px / 14 px.

   Do 900 px pasek jest PRZYKLEJONY do dolu ekranu (position: fixed), od
   901 px to zwykly wiersz na dole karty (kreska nad nim, bez cienia).
   Zastepuje dawne przyciski Back i Continue w karcie, dawny przyklejony pasek
   zakupu i zielona plakietke kwoty w naglowku kroku.
   ========================================================================== */

/* Wiersz na dole karty (komputer, domyslnie). */
.lk-pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--ink-200);
}

.lk-pasek[hidden] { display: none; }

/* Kolumna tekstu oddaje miejsce PIERWSZA (shrink 100), ale nie wezsza niz sama kwota (min-content):
   dopiero potem zwezaja sie przyciski, a napis przycisku zawija sie do dwoch wierszy ("In den / Warenkorb"). */
.lk-pasek__tekst {
  display: flex;
  flex: 0 100 auto;
  flex-direction: column;
  min-width: min-content;
}

.lk-pasek__kwota {
  display: block;
  font-family: var(--lk-font-naglowek);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-900);
  white-space: nowrap;
}

/* Opis: do dwoch wierszy, dalej wielokropek (dlugie nazwy w niemieckim i arabskim). */
.lk-pasek__opis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-block-start: 5px;
  font-family: var(--lk-font-tresc);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink-500);
}

.lk-pasek__akcje {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
}

.lk-pasek__wstecz {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink-200);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-900);
  cursor: pointer;
  transition: border-color var(--lk-czas) var(--lk-ease);
}

.lk-pasek__wstecz[hidden] { display: none; }

.lk-pasek__dalej {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 58px;
  margin: 0;
  padding: 0;
  padding-inline-start: 28px;
  padding-inline-end: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--orange-500);
  color: #fff;
  font-family: var(--lk-font-naglowek);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 84, 54, .28);
  transition: background var(--lk-czas) var(--lk-ease);
}

/* Najechanie tylko tam, gdzie jest mysz: na ekranie dotykowym :hover zostaje po dotknieciu i przycisk swiecilby ciemniej na kolejnym kroku. */
@media (hover: hover) {
  .lk-pasek__wstecz:hover { border-color: var(--ink-900); }

  .lk-pasek__dalej:hover { background: var(--orange-600); }
}

/* Napis przycisku w jednym wierszu, dopoki jest miejsce; gdy brak, zawija sie (wazne przy dlugich napisach, np. niemieckim). */
.lk-pasek__dalej-tekst {
  text-align: start;
  line-height: 1.1;
}

.lk-pasek__kolko {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-900);
}

.lk-pasek__wstecz:focus-visible,
.lk-pasek__dalej:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

/* Od prawej do lewej: Wstecz i strzalka dalej wskazuja lustrzanie (rozklad przyciskow odwraca sam kierunek tekstu). */
[dir="rtl"] .lk-pasek svg { transform: scaleX(-1); }

/* Schowek na natywny przycisk dodania do koszyka: nigdy nie widac go obok paska. Bez JS przycisk zostaje na swoim miejscu. */
.lk-pasek__natywny { display: none !important; }

/* Telefon i waski ekran: pasek przyklejony do dolu. */
@media (max-width: 900px) {
  .lk-pasek {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 80;
    margin: 0;
    padding-block: 12px calc(14px + env(safe-area-inset-bottom, 0px));
    padding-inline: 20px 14px;
    border-block-start: 1px solid var(--ink-100);
    background: #fff;
    box-shadow: 0 -10px 28px rgba(14, 15, 17, .08);
  }

  .lk-pasek__kwota { font-size: 24px; }

  .lk-pasek__opis {
    margin-block-start: 5px;
    font-size: 12.5px;
    line-height: 1.3;
  }

  .lk-pasek__akcje { gap: 8px; }

  .lk-pasek__dalej {
    gap: 12px;
    padding-inline-start: 22px;
    font-size: 17px;
  }
}

/* Bardzo waski ekran (320 do 360 px): ciasniejszy pasek, zeby kwota, Wstecz i przycisk zmiescily sie obok siebie. */
@media (max-width: 360px) {
  .lk-pasek {
    gap: 8px;
    padding-inline: 14px 10px;
  }

  .lk-pasek__akcje { gap: 6px; }

  .lk-pasek__wstecz {
    width: 44px;
    height: 44px;
  }

  .lk-pasek__dalej {
    gap: 8px;
    padding-inline-start: 16px;
    font-size: 16px;
  }

  .lk-pasek__kolko {
    width: 38px;
    height: 38px;
  }
}

/* Pasek zajmuje dol ekranu, wiec strona dostaje tyle miejsca na dole (stopka,
   ostatnie pole), a przewijanie do pola po fokusie liczy sie z jego wysokoscia.
   Wysokosc mierzy skrypt (--lk-pasek-wys, 0 gdy pasek nie jest przyklejony). Niski
   ekran (poziomy telefon, okno zmniejszone przez klawiature) nie dostaje paska
   przyklejonego: wtedy stoi w karcie jak na komputerze. */
@media (max-width: 900px) and (min-height: 521px) {
  html { scroll-padding-block-end: var(--lk-pasek-wys, 0px); }

  body.lk-ma-pasek { padding-block-end: var(--lk-pasek-wys, 0px); }
}

@media (max-width: 900px) and (max-height: 520px) {
  .lk-pasek {
    position: static;
    margin-block-start: 24px;
    padding-block: 20px 0;
    padding-inline: 0;
    border-block-start: 1px solid var(--ink-200);
    background: transparent;
    box-shadow: none;
  }
}

/* Zielona plakietka kwoty w naglowku kroku znika: kwota jest w pasku. */
.lk-kreator .buba-apo-summary:has(> #bubaAPOTotal) { display: none !important; }

/* ==========================================================================
   KROK 2: JAKOSC JAKO KAFLE 6D, DODATKI JAKO WIERSZE Z PRZELACZNIKIEM
   (zadanie B4, 26.10.2026; plansze s1-krok2 telefon, s9a komputer, s7-ar RTL)

   Znaczniki rysuje wtyczka cleafs_smm (views/product_page.php i quality_upsell.php):
   wybor jakosci to .col-xl-12 > .buba-label-button.label-item z ukrytym polem, etykieta
   i zakladka .cleafs-qup-badge, dodatek to .container-option.checkbox-item z
   .pretty.p-switch. Motyw niczego nie przepisuje w dokumencie poza tym, co robi skrypt
   (liikye-konfigurator.js, rozbijEtykiete): rozdziela w etykiecie emoji i nazwe oraz nadaje
   kaflowi jakosci klasy .lk-kd z kroku 1, wiec kafel ma jeden wyglad w obu krokach.
   Cztery dawne warstwy regul (z sierpnia 2026) zdjete w calosci: kazda bila sie z arkuszem
   wtyczki wykrzyknikami i z poprzednia.

   SPECYFICZNOSC: wtyczka wymusza wykrzyknikiem padding kafla, szerokosc, wysokosc i kolor
   toru przelacznika oraz margines kolumny, a jej reguly maja po 5-6 klas, wiec selektory
   ponizej niosa pelna sciezke (.lk-kreator .buba-apo-container ...) i klasy nadane skryptem.
   Ten blok ma byc ostatni w pliku sekcji kroku 2.
   ========================================================================== */

/* --- Uklad kroku: jakosc, potem dodatki. Kontener opcji to siatka; naglowki i rzad jakosci przechodza przez cala
   szerokosc. Odstepy z planszy: 8 px miedzy wierszami, 22 px od kafli do naglowka dodatkow, 18 px (telefon) albo
   10 px (komputer) od naglowka dodatkow do pierwszego wiersza.
   KOLUMNY DODATKOW zaleza od szerokosci KARTY, nie okna: dwie kolumny tylko wtedy, gdy kazda ma co najmniej 318 px.
   Pomiar (przegladarka, en): wiersz z najdluzszym angielskim "Premium guarantee" i kwota miesci sie w jednej linii od
   kolumny 316 px (przy 314 px zawija sie), 318 px to zapas 2 px. Karta (zmierzona 26.10.2026): okno 768 px 657, 901 px 471,
   1024 px 531, od ok. 1200 px stale 649 (form.cart ma max-width 880). Dwie kolumny wystepuja wiec od karty 644 px, czyli w
   oknie 768 px i od ok. 1200 px; w oknie 901-1024 px karta stoi obok zdjecia i dodatki ida jednym slupkiem. Niemieckie dlugie
   nazwy moga zawinac, a wiersze w jednym rzedzie siatki maja ta sama wysokosc (rozciaganie siatki). */
.lk-kreator[data-krok="2"] .buba-apo-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 318px), 1fr));
  gap: 8px;
}

.lk-kreator[data-krok="2"] .buba-apo-container > p.link-header,
.lk-kreator[data-krok="2"] .buba-apo-container > .row { grid-column: 1 / -1; }

/* Naglowek pokazuje sie tylko nad rzedem, ktory faktycznie ma (wtyczka rysuje "Additional options" takze bez dodatkow). */
.lk-kreator[data-krok="2"] .buba-apo-container > p.link-header:has(+ .row),
.lk-kreator[data-krok="2"] .buba-apo-container > p.link-header:has(+ .container-option.checkbox-item) {
  display: block;
  margin: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-900);
}

.lk-kreator[data-krok="2"] .buba-apo-container > .row + p.link-header:has(+ .container-option.checkbox-item) {
  margin-block-start: 14px;
  margin-block-end: 10px;
}

@media (min-width: 901px) {
  .lk-kreator[data-krok="2"] .buba-apo-container > .row + p.link-header:has(+ .container-option.checkbox-item) { margin-block-end: 2px; }
}

/* Druga grupa wyborow z wlasnym naglowkiem (np. zrodlo ruchu): ten sam odstep od poprzedniego rzedu co przed dodatkami. */
.lk-kreator[data-krok="2"] .buba-apo-container > .row + p.link-header:has(+ .row) { margin-block-start: 14px; }

/* --- Rzad jakosci: zawsze dwie rowne kolumny (dwa kafle = po polowie karty, takze na komputerze; jedna opcja zajmuje
   polowe, a nie cala karte, trzecia schodzi do drugiego rzedu), 12 px wciecia u gory na zakladke, ktora wystaje
   19 px nad kafel (razem z odstepem siatki dokladnie 20 px od naglowka). */
.lk-kreator[data-krok="2"] .buba-apo-container > .row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 8px;
  row-gap: 24px;
  margin: 0;
  padding-block-start: 12px;
}

.lk-kreator .buba-apo-container > .row > .col-xl-12 {
  display: flex;
  flex: none;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0 !important;
}

.lk-kreator .buba-apo-container > .row > .cleafs-smm-required-label { display: block; grid-column: 1 / -1; }

.lk-kreator .buba-apo-container > .row > .col-xl-12 > .buba-label-button.lk-kd { flex: 1; min-width: 0; }

/* Kafel: te same wartosci co .lk-kd w kroku 1 (kolory z tokenow), podane jeszcze raz, bo arkusz wtyczki (.btn.btn-option
   i .selected z gradientem) ma wieksza specyficznosc niz sama klasa .lk-kd. */
.lk-kreator .buba-apo-container .buba-label-button.lk-kd {
  float: none;
  width: auto;
  margin: 0;
  padding: 0 !important;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink-200);
  background: #fff;
  color: var(--ink-900);
}

.lk-kreator .buba-apo-container .buba-label-button.lk-kd.is-wybrany {
  border-color: var(--orange-600);
  box-shadow: 0 3px 0 var(--orange-700);
  background: #fff;
  color: #fff;
}

@media (hover: hover) {
  .lk-kreator .buba-apo-container .buba-label-button.lk-kd:not(.is-wybrany):hover { border-color: var(--orange-500); }
}

.lk-kreator .buba-apo-container .buba-label-button.lk-kd:focus-visible {
  outline: none;
  box-shadow: 0 3px 0 var(--ink-200), var(--ring-focus);
}

.lk-kreator .buba-apo-container .buba-label-button.lk-kd.is-wybrany:focus-visible {
  box-shadow: 0 3px 0 var(--orange-700), var(--ring-focus);
}

/* Etykieta wtyczki nie jest osobnym pudelkiem: jej gora (emoji i nazwa) i dol (kwota) ukladaja sie wprost w kaflu. */
.lk-kreator .buba-apo-container .buba-label-button.lk-kd > label { display: contents; }

/* Kwota to span.price (WooCommerce daje mu duze pismo, flex i odstep dolny): dol kafla ma pismo i kolory z kroku 1. */
.lk-kreator .buba-apo-container .price.lk-kd__cena {
  display: block;
  margin: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--orange-600);
  white-space: nowrap;
}

.lk-kreator .buba-apo-container .lk-kd.is-wybrany .price.lk-kd__cena { color: #fff; }

/* Zakladka: ta sama co "Most popular" w kroku 1 (ciemna, na srodku gornej krawedzi). Zakladka wtyczki ma gradient, animacje
   i duze litery: zdejmujemy je, a napis (wtyczka daje "RECOMMENDED") skladamy jak na planszy, wielka tylko pierwsza litera. */
.lk-kreator .buba-apo-container .lk-kd .cleafs-qup-badge.lk-kd__zakladka {
  inset-block-start: -19px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 8px 8px 0 0;
  background: var(--ink-900);
  animation: none;
  color: #fff;
  font-family: var(--lk-font-tresc);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: lowercase;
}

.lk-kreator .buba-apo-container .lk-kd .cleafs-qup-badge.lk-kd__zakladka::first-letter { text-transform: uppercase; }

/* --- Dodatki: wiersz z przelacznikiem (plansze: biala karta, ramka 1 px, promien 14 px, wciecie 12 / 14 px, przelacznik
   46 x 28, kulka 22 x 22, potem emoji, nazwa i kwota). Przelacznik rysuje .state (tor ::before, kulka ::after), a pseudo-
   elementy etykiety z biblioteki pretty-checkbox gasimy w calosci, zeby nie rysowaly drugiego toru. Pole zostaje prawdziwym
   checkboxem wtyczki (1 px, w kolejnosci fokusu, role=switch), a klika sie etykiete, ktora jest calym wierszem. */
.lk-kreator .buba-apo-container > .container-option.checkbox-item {
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: #fff;
  transition: border-color var(--lk-czas) var(--lk-ease);
}

@media (hover: hover) {
  .lk-kreator .buba-apo-container > .container-option.checkbox-item:hover { border-color: var(--orange-500); }
}

.lk-kreator .buba-apo-container .lk-dodatek .pretty {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  white-space: normal;
  line-height: 1.25;
}

.lk-kreator .buba-apo-container .lk-dodatek .pretty .state {
  position: relative;
  display: block;
}

/* Pole zostaje w dokumencie i w kolejnosci fokusu, ale nie przechwytuje dotkniec: klika sie etykieta, ktora cala jest wierszem. */
.lk-kreator .buba-apo-container .lk-dodatek .pretty input.cb {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  min-width: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.lk-kreator .buba-apo-container .lk-dodatek .pretty .state label::before,
.lk-kreator .buba-apo-container .lk-dodatek .pretty .state label::after {
  content: none !important;
  display: none !important;
}

.lk-kreator .buba-apo-container .lk-dodatek.container-option .pretty.p-switch .state::before {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 14px;
  width: 46px !important;
  height: 28px !important;
  margin-block-start: -14px;
  box-sizing: border-box;
  border: 0;
  border-radius: 999px;
  background: var(--ink-300);
  transition: background var(--lk-czas) var(--lk-ease);
  pointer-events: none;
  z-index: 1;
}

.lk-kreator .buba-apo-container .lk-dodatek.container-option .pretty.p-switch input.cb:checked ~ .state::before {
  border: 0;
  background: var(--orange-500) !important;
}

.lk-kreator .buba-apo-container .lk-dodatek.container-option .pretty.p-switch .state::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-start: 17px;
  width: 22px;
  height: 22px;
  margin-block-start: -11px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  transition: inset-inline-start var(--lk-czas) var(--lk-ease);
  pointer-events: none;
  z-index: 2;
}

.lk-kreator .buba-apo-container .lk-dodatek.container-option .pretty.p-switch input.cb:checked ~ .state::after { inset-inline-start: 35px; }

.lk-kreator .buba-apo-container .lk-dodatek.container-option .pretty.p-switch input.cb:focus-visible ~ .state::before { box-shadow: var(--ring-focus); }

/* Etykieta niesie caly wiersz: miejsce na przelacznik (14 + 46 + 12 px) liczone od poczatku linii, wiec w RTL lustrzanie. */
.lk-kreator .buba-apo-container .lk-dodatek.container-option .pretty.p-switch .state label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 0;
  margin: 0;
  padding: 12px 14px;
  padding-inline-start: 72px;
  text-indent: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-900);
  cursor: pointer;
}

.lk-kreator .buba-apo-container .lk-dod__gora {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.lk-kreator .buba-apo-container .lk-dod__emoji {
  flex: none;
  font-size: 18px;
  line-height: 1.5;
}

/* Nazwa jest danymi sklepu: w niemieckim bywa jednym dlugim slowem ("Profil-Positionierung"), a przy 320 px zostaje jej
   okolo 64 px. Lamie sie (dzielenie wyrazow wg jezyka strony, w ostatecznosci w dowolnym miejscu) zamiast wychodzic z wiersza. */
.lk-kreator .buba-apo-container .lk-dod__nazwa {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.lk-kreator .buba-apo-container .price.lk-dod__cena {
  display: block;
  flex: none;
  margin: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
  white-space: nowrap;
}

.lk-kreator .buba-apo-container .price.lk-dod__cena:empty { display: none; }

/* Najwezsze telefony (320-360 px, planszy nie ma): przelacznik zostaje w pelnym rozmiarze, a odstepy wokol nazwy sie zwezaja,
   zeby niemieckie dlugie slowa lamaly sie rzadziej. */
@media (max-width: 360px) {
  .lk-kreator .buba-apo-container .lk-dodatek.container-option .pretty.p-switch .state label {
    gap: 8px;
    padding-inline-end: 10px;
    padding-inline-start: 68px;
  }

  .lk-kreator .buba-apo-container .lk-dod__gora { gap: 8px; }

  .lk-kreator .buba-apo-container .lk-dod__emoji { font-size: 16px; }
}

/* ==========================================================================
   KROK 3: POLE KONTA I4, KARTA PROFILU, KARTECZKA, DYMKI, PODSUMOWANIE T1
   (zadanie B5, 26.10.2026; plansze f1-pusty, f2-wypromowani, f3-link, f4-brak, telefon 390;
   komputer: te same elementy w karcie; s7-ar RTL)

   Pole, karte profilu i walidacje rysuje wtyczka cleafs_smm (views/product_page.php, profil-ig.js); motyw tylko
   uklada i styluje. Komorka pola (td.label) dostaje od skryptu (liikye-konfigurator.js, poleKonta) atrybuty
   data-lk-pole="konto", data-lk-stan="pusty|laduje|karta|blad" i data-lk-platforma, zmienna --lk-logo (adres znaku
   platformy) oraz dwa elementy dekoracyjne: .lk-pole__logo (kolko 40 px z logo) i .lk-pole__etykieta (podpis wersalikami).

   UKLAD: komorka to siatka jednej kolumny. Wiersz 1 tytul ("Your account"), wiersz 2 pole albo karta (kolko logo i
   etykieta leza NA polu, w tej samej komorce siatki), wiersz 3 dymek bledu. Wlasciwosci logiczne (inline-start), wiec
   arabski odwraca sie sam. Pole zastapione karta zostaje w dokumencie (niesie wartosc zamowienia), ale jest schowane
   przycieciem do 1 px, a NIE display: none: wtyczka (straznik przycisku zakupu) szuka pola po widocznosci.

   KOLORY: tokeny liikye (ink-*, green-700, red-700, red-50) plus trzy wartosci z planow: #FFEFC6 (karteczka, decyzja
   Mateusza), #7f1d1d (tekst bledu), #f7b4ae (obwodka pola z bledem) i trzy barwy gradientu Instagrama na pierscieniu
   awatara (znak platformy, nie kolor marki liikye).
   ========================================================================== */

.lk-kreator {
  --lk-karteczka: #FFEFC6;
  --lk-blad-tekst: #7f1d1d;
  --lk-blad-obwodka: #f7b4ae;
}

/* --- Wspolna baza dymkow: karteczka (zolta), blad (jasnoczerwony); zielony potwierdzajacy dolozy B5b na tej samej bazie.
   Klasy: .lk-dymek (baza), --karteczka, --blad, __emoji (biale kolko 36 px), __tresc, __tytul, __tekst, __zamknij (Clear). */
.lk-dymek {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--ink-100);
  box-shadow: none;
  color: var(--ink-600);
  font-size: 13.5px;
  line-height: 1.4;
}

/* Strzalka u gory wskazuje pole nad dymkiem (plansza: 14 x 14 px, 7 px nad krawedzia, 28 px od brzegu). */
.lk-dymek::before {
  content: "";
  position: absolute;
  top: -7px;
  inset-inline-start: 28px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: inherit;
  transform: rotate(45deg);
}

.lk-dymek--karteczka { background: var(--lk-karteczka); }

.lk-dymek__emoji {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 15, 17, .08);
  font-size: 18px;
  line-height: 1;
}

.lk-dymek__tresc { flex: 1; min-width: 0; }

.lk-dymek__tytul {
  display: block;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.lk-dymek__tekst { margin: 2px 0 0; color: var(--ink-600); font-size: 13.5px; line-height: 1.4; }

/* Dymek bledu (B3): jasnoczerwony na pelna szerokosc, tekst ciemnoczerwony, Clear po drugiej stronie. */
.lk-dymek--blad { align-items: center; background: var(--red-50); }

.lk-dymek--blad[hidden],
.lk-dymek__zamknij[hidden] { display: none !important; }

.lk-dymek--blad .lk-dymek__tekst { margin: 0; color: var(--lk-blad-tekst); font-size: 14px; }

.lk-dymek--blad .lk-dymek__tekst b { color: var(--ink-900); font-weight: 700; }

.lk-dymek__zamknij {
  flex: none;
  height: 36px;
  margin: 0;
  margin-inline-start: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 15, 17, .1);
  color: var(--red-700);
  font-family: var(--lk-font-naglowek);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.lk-dymek__zamknij:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

/* Przy bledzie karteczka konta publicznego znika, a Clear (albo poprawka w polu) ja przywraca. */
.lk-kreator[data-krok="3"][data-lk-karteczka="ukryta"] .lk-dymek.lk-uwaga-konto { display: none; }

/* --- Pole konta (I4) ------------------------------------------------------------------------------------------ */

.lk-kreator table.variations[id]:has(td.label[data-lk-pole]) { margin-block-end: 0 !important; }

.lk-kreator table.variations[id] td.label[data-lk-pole] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  position: relative;
}

/* Tytul nad polem: naglowek wtyczki z tekstem motywu ("Your account"). Tam, gdzie wtyczka owija tytul w <label> (Auto Likes,
   buba_autolajki), jej arkusz ma "p#link-header { float: left }": po arabsku tytul stal wtedy przy LEWEJ krawedzi zamiast przy
   prawej (recenzja koncowa 0.18.0, I2). Tytul plynie jak zwykly blok, wiec wyrownanie bierze z kierunku strony. */
.lk-kreator table.variations[id] td.label[data-lk-pole] > #link-header,
.lk-kreator table.variations[id] td.label[data-lk-pole] > label,
.lk-kreator table.variations[id] td.label[data-lk-pole] > label #link-header {
  float: none;
}

.lk-kreator table.variations[id] td.label[data-lk-pole] > #link-header,
.lk-kreator table.variations[id] td.label[data-lk-pole] > label {
  grid-row: 1;
  grid-column: 1;
  margin: 0 0 10px !important;
}

.lk-kreator table.variations[id] td.label[data-lk-pole] #link-header {
  margin: 0 0 10px !important;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.lk-kreator table.variations[id] td.label[data-lk-pole] > label #link-header { margin: 0 !important; }

/* Pole: biale, ramka 1 px, promien 16, miejsce na kolko z logo i etykiete u gory (min. 64 px, tekst wpisany pod etykieta). */
.lk-kreator table.variations[id] td.label[data-lk-pole] > input[type="text"] {
  grid-row: 2;
  grid-column: 1;
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  margin: 0;
  padding-block: 26px 8px;
  padding-inline: 66px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 15, 17, .05);
  color: var(--ink-900);
  font-family: var(--lk-font-tresc);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  text-align: start;
}

/* Dlugi adres w polu linku konczy sie wielokropkiem, gdy pole nie ma fokusu (plansze G2 i G5B), zamiast urwac sie w polowie znaku
   (recenzja koncowa, M4). */
.lk-kreator table.variations[id] td.label[data-lk-pole="link"] > input[type="text"] { text-overflow: ellipsis; }

/* Zabezpieczenie: wlasny CSS strony z panelu (WPBakery, _wpb_post_custom_css produktow sklonowanych z kumplo) mial
   "input#buba_autolajki_input { border-radius: 5px }", a selektor z ID wygrywa z regula pola wyzej. Na liikye regula zostala
   usunieta z danych 27.10.2026 (618 wpisow, decyzja Mateusza 3A, kopia w kopie-wtyczek), ale kumplo ja dalej ma, wiec kolejny
   klon produktu przyniesie ja z powrotem; dlatego wykrzyknik zostaje. Regula wezsza niz cale pole (tylko to ID), zeby
   wykrzyknik nie zdejmowal promieni trybu dwoch pol (16 16 0 0 / 0 0 16 16). */
.lk-kreator table.variations[id] td.label[data-lk-pole] > input#buba_autolajki_input { border-radius: 16px !important; }

/* Wykrzyknik konieczny: wlasny CSS WPBakery z panelu liikye (wpis vc_custom-css w <head>) ma globalne
   "::placeholder { color: #11285f !important }" (ciemny granat), ktore bez niego barwi przyklad w polu. */
.lk-kreator table.variations[id] td.label[data-lk-pole] > input[type="text"]::placeholder { color: var(--ink-400) !important; opacity: 1; }

.lk-kreator table.variations[id] td.label[data-lk-pole] > input[type="text"]:focus {
  border-color: var(--orange-500);
  outline: none;
  box-shadow: var(--ring-focus);
}

.lk-kreator table.variations[id] td.label[data-lk-pole][data-lk-stan="blad"] > input[type="text"]:not(:focus) { border-color: var(--lk-blad-obwodka); }

/* Kolko z logo platformy (40 px, #f1f3f6, znak 22 px) na polu, 14 px od brzegu. */
.lk-pole__logo,
.lk-pole__etykieta {
  grid-row: 2;
  grid-column: 1;
  pointer-events: none;
}

.lk-pole__logo {
  align-self: center;
  justify-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-inline-start: 15px;
  border-radius: 50%;
  background-color: var(--ink-100);
  background-image: var(--lk-logo, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
  color: var(--ink-400);
  font-family: var(--lk-font-naglowek);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

/* Konta nie ma (F4): w kolku znak zapytania zamiast logo. */
.lk-pole__logo--brak { background-image: none; }

/* Wtyczka sprawdza konto: logo lekko pulsuje, pole zostaje (klient moze dalej pisac). */
@keyframes lk-pole-puls { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

.lk-kreator td.label[data-lk-stan="laduje"] .lk-pole__logo { animation: lk-pole-puls 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .lk-kreator td.label[data-lk-stan="laduje"] .lk-pole__logo { animation: none; opacity: .7; }
}

/* Etykieta wersalikami nad wpisanym tekstem (11 px, #6b7080). */
.lk-pole__etykieta {
  align-self: start;
  justify-self: start;
  box-sizing: border-box;
  max-width: 100%;
  margin-block-start: 13px;
  margin-inline-start: 67px;
  padding-inline-end: 14px;
  overflow: hidden;
  color: var(--ink-500);
  font-family: var(--lk-font-tresc);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 16.5px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Doradztwo pola wtyczki (zielone "wyglada dobrze" i zolte ostrzezenia) zastepuje dymek bledu i karta; informacje (np.
   "bez @") zostaja w stylu wtyczki. Elementy zostaja w dokumencie, wtyczka je przelacza. */
.lk-kreator td.label[data-lk-pole] > .cleafs-fc-advisory--warn,
.lk-kreator td.label[data-lk-pole] > .cleafs-fc-advisory--ok,
.lk-kreator td.label[data-lk-pole] > .cleafs-field-notice { display: none !important; }

.lk-kreator td.label[data-lk-pole] > .lk-dymek--blad { grid-row: 3; grid-column: 1; }

/* --- Karta profilu wtyczki jako pole I4: ta sama ramka, awatar w pierscieniu, nazwa, @nick, liczba, Change. */

.lk-kreator td.label[data-lk-pole]:not([data-lk-stan="karta"]) > :is(.cleafs-profil-ig, .cleafs-karta-yt) { display: none !important; }

.lk-kreator td.label[data-lk-pole][data-lk-stan="karta"] > .lk-pole__logo,
.lk-kreator td.label[data-lk-pole][data-lk-stan="karta"] > .lk-pole__etykieta { display: none; }

.lk-kreator table.variations[id] td.label[data-lk-pole][data-lk-stan="karta"] > input[type="text"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig {
  grid-row: 2;
  grid-column: 1;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 15, 17, .05);
  font-size: 14px;
  line-height: 1.3;
}

/* Awatar: pierscien 2 px z gradientem Instagrama (inne platformy: szara obwodka), zdjecie 46 px. Promien 50% na obrazku
   wycina tez jego zawartosc po okregu (promien tresci = promien - ramka - wypelnienie). */
.lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig img.cleafs-profil-ig__awatar {
  box-sizing: border-box;
  flex: none;
  width: 56px;
  height: 56px;
  padding: 3px;
  border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--ink-200), var(--ink-200)) border-box;
  object-fit: cover;
}

.lk-kreator td.label[data-lk-pole][data-lk-platforma="instagram"] > .cleafs-profil-ig img.cleafs-profil-ig__awatar {
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(45deg, #feda75, #d62976, #4f5bd5) border-box;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig .cleafs-profil-ig__nazwa {
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig .cleafs-profil-ig__nick {
  margin-block-start: 2px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.5;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig .cleafs-profil-ig__liczba {
  margin-block-start: 2px;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig button.cleafs-profil-ig__zmien {
  flex: none;
  align-self: center;
  height: 40px;
  min-width: 44px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink-100);
  box-shadow: none;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

@media (hover: hover) {
  .lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig button.cleafs-profil-ig__zmien:hover {
    border: 0;
    background: var(--ink-200);
    color: var(--ink-900);
  }
}

.lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig button.cleafs-profil-ig__zmien:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

/* --- Podsumowanie T1: wiersze bez tla, rabat na zielono, Total pod linia ------------------------------------------ */

.lk-t1 { display: none; margin-block-start: 20px; padding: 0 2px; background: none; border: 0; box-shadow: none; }

.lk-kreator[data-krok="3"] .lk-t1:not([hidden]) { display: block; }

.lk-t1__lista { margin: 0; padding: 0; list-style: none; }

.lk-t1__wiersz {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.5;
}

.lk-t1__wiersz + .lk-t1__wiersz { margin-block-start: 9px; }

.lk-t1__emoji { flex: none; }

/* Etykieta zajmuje wolne miejsce, a kwota (direction: ltr, zeby liczby czytac od lewej) stoi na koncu wiersza. Margines auto na samej
   kwocie nie dziala w RTL: liczy sie z kierunkiem ELEMENTU (ltr), wiec kwota kleila sie do etykiety. */
.lk-t1__etykieta { flex: 1; min-width: 0; }

.lk-t1__kwota {
  flex: none;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.lk-t1__wiersz--rabat .lk-t1__kwota { color: var(--green-700); }

.lk-t1__suma {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--ink-200);
}

.lk-t1__suma-etykieta {
  flex: 1;
  min-width: 0;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.lk-t1__suma-kwota {
  flex: none;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ==========================================================================
   KROK 3, POZOSTALE POLA (zadanie B5b, 26/27.10.2026; plansze g1-link-pusty, g2-link-ok, g3-yt-kanal, g4-yt-film, g5b,
   g6a-losowe, g6a-wlasne, g7-autopoprawka, g8-strona)

   Te same pola, dymki i karta co w F1-F4 (sekcja wyzej): komorka td.label dostaje od skryptu (liikye-konfigurator.js, poleKonta)
   data-lk-pole = konto | link | autor i data-lk-stan = pusty | laduje | karta | ok | blad, a arkusz uklada ja siatka jednej
   kolumny (wiersz 1 tytul, 2 pole albo karta, 3 dymek, 4 podpowiedz). Dodatkowo: zielony dymek z ptaszkiem (potwierdzenie linku albo
   automatyczna poprawka; zastepuje karteczke), karta YouTube (kanal: awatar, nazwa, @nick, liczba, Change; film: miniatura,
   tytul, kanal i wyswietlenia, Change w wierszu tytulu), tryb dwoch pol w jednej karcie z postepem "1 of 2" (formularz
   dostaje data-lk-duo) i komentarze z przelacznikiem Random / Write your own (komorka z data-lk-kom).

   KOLORY: tokeny liikye (ink-*, green-50 i green-500, orange-50, orange-100, orange-600) plus #14532d (tekst zielonego dymku,
   swiadomie z planszy: najblizszy token green-700 #15803d jest wyraznie jasniejszy; zapis w README makiet).
   ========================================================================== */

.lk-kreator { --lk-ok-tekst: #14532d; --lk-losuj-tlo: var(--orange-50); }

/* --- Zielony dymek: ta sama baza co karteczka i blad, wiersz 3 komorki. */
.lk-dymek--ok { align-items: center; background: var(--green-50); }

.lk-dymek--ok[hidden] { display: none !important; }

.lk-dymek--ok .lk-dymek__tekst { margin: 0; color: var(--lk-ok-tekst); font-size: 14px; }

.lk-kreator td.label[data-lk-pole] > .lk-dymek--ok { grid-row: 3; grid-column: 1; }

/* Notki wtyczki, ktore zastepuje dymek: zdanie o poprawce kanalu i formatu (jedno zdanie pod polem). */
.lk-kreator td.label[data-lk-pole] > .cleafs-fc-yt-kanal,
.lk-kreator td.label[data-lk-pole] > .cleafs-fc-fixed-notice { display: none !important; }

/* Dopisek wtyczki o publicznym koncie (.cleafs-fc-note) mowi karteczka; doradztwo informacyjne bez wlasnego zdania jest schowane. */
.lk-kreator td.label[data-lk-pole] .cleafs-fc-note,
.lk-kreator td.label[data-lk-pole] > .cleafs-fc-advisory[data-lk-pusta] { display: none !important; }

/* --- Pole linku: znak platformy w kolku jak przy koncie; strona WWW ma globus. */
.lk-pole__logo--www {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='7.5' stroke='%234e525b' stroke-width='1.6'/%3E%3Cpath d='M2.5 10h15M10 2.5c2.2 2.2 2.2 12.8 0 15M10 2.5c-2.2 2.2-2.2 12.8 0 15' stroke='%234e525b' stroke-width='1.6'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

/* --- Karta YouTube jako pole I4. Selektory niosa cala sciezke i !important przy wymiarach obrazkow: wtyczka wstrzykuje wlasny
   arkusz z !important dla awatara i miniatury, a motyw sklepu ma reguly dla obrazkow w tresci produktu. */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt {
  grid-row: 2;
  grid-column: 1;
  box-sizing: border-box;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 15, 17, .05);
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.3;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__tresc { flex: 1 1 0; min-width: 0; }

/* Kanal (G3): awatar 48 px w polu 56 px, nazwa 17 px, @nick, liczba z rzeczownikiem, Change z prawej. */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--kanal,
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--komentarz { padding: 10px 14px; }

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt img.cleafs-karta-yt__awatar {
  width: 48px !important;
  height: 48px !important;
  max-width: 48px !important;
  margin: 4px !important;
  border-radius: 50% !important;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__nazwa {
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__handle {
  margin-block-start: 2px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.5;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--kanal .cleafs-karta-yt__liczby {
  margin-block-start: 2px;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

/* Liczba subskrypcji kanalu: wtyczka wpisuje do ekranu sama liczbe, a rzeczownik ("subscribers") niesie aria-label tej pozycji.
   Plansza G3 pokazuje "4,550,000 subscribers": pokazujemy aria-label, a goly numer chowamy (czytnik czyta ten sam aria-label). */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--kanal .cleafs-karta-yt__stat > span { display: none; }

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--kanal .cleafs-karta-yt__stat::after { content: attr(aria-label); }

/* Wtyczka trzyma liczbe w jednej linii (white-space: nowrap), a motyw pokazuje dluzszy tekst z rzeczownikiem: na telefonie
   "4,550,000 subscribers" wchodzilo pod Change (390 px) albo bylo przez niego zaslaniane (320 px). Plansza G3 lamie go na dwie
   linie (recenzja koncowa 0.18.0, I1). */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--kanal .cleafs-karta-yt__stat { white-space: normal; }

/* Film (G4): miniatura 112 x 63 (promien 10), tytul 14 px / 700 w dwoch wierszach, pod nim kanal i wyswietlenia w jednym wierszu. */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__miniatura { width: 112px; height: 63px; border-radius: 10px; }

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt img.cleafs-karta-yt__zdjecie {
  width: 112px !important;
  height: 63px !important;
  max-width: 112px !important;
  border-radius: 10px !important;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__tytul {
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  max-height: none;
  overflow-wrap: anywhere;
}

/* Kanal i wyswietlenia plyna jako jeden tekst (plansza: "Rick Astley . 1,830,724,599 views"), nie dwa bloki. */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt:not(.cleafs-karta-yt--kanal) .cleafs-karta-yt__kanal:not([style*="display: none"]),
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt:not(.cleafs-karta-yt--kanal) .cleafs-karta-yt__liczby:not([style*="display: none"]) {
  display: inline;
  margin-block-start: 3px;
  color: var(--ink-500);
  font-size: 12.5px;
  line-height: 1.4;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt:not(.cleafs-karta-yt--kanal) .cleafs-karta-yt__kanal:not([style*="display: none"]) ~ .cleafs-karta-yt__liczby::before {
  content: "\00b7";
  margin-inline: 6px;
}

/* Ikona obok jedynej liczby jest zbedna (plansza: sam tekst); przy kilku liczbach ikony odrozniaja je od siebie. */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__stat:only-child .cleafs-karta-yt__ikona { display: none; }

/* Zrodlo danych (wymog polityki Google): zostaje widoczne, drobne i szare (nie ma go na planszy). */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__zrodlo {
  flex: 0 0 100%;
  margin-block-start: 3px;
  color: var(--ink-500);
  font-size: 11.5px;
  line-height: 1.3;
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt .cleafs-karta-yt__uwaga { border-radius: 10px; }

/* Change: szary przycisk 36 px. Na karcie kanalu stoi z prawej strony karty, na karcie filmu w wierszu tytulu pola. */
.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt button.cleafs-karta-yt__zmien {
  flex: none;
  align-self: center;
  height: 36px;
  min-width: 44px;
  margin: 0;
  margin-inline-start: auto;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ink-100);
  box-shadow: none;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
}

@media (hover: hover) {
  .lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt button.cleafs-karta-yt__zmien:hover {
    border: 0;
    background: var(--ink-200);
    color: var(--ink-900);
  }
}

.lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt button.cleafs-karta-yt__zmien:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

.lk-kreator td.label[data-lk-pole][data-lk-karta="film"] > .cleafs-karta-yt button.cleafs-karta-yt__zmien,
.lk-kreator td.label[data-lk-pole][data-lk-karta="live"] > .cleafs-karta-yt button.cleafs-karta-yt__zmien {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}

/* Waskie telefony (ponizej 360 px, np. 320): w karcie kanalu YouTube i karcie konta kolumna tekstu miala ok. 58 px, wiec liczba
   subskrypcji wchodzila pod Change, a nazwa konta (de, przycisk "Aendern") ucinala sie do trzech liter (recenzja koncowa 0.18.0, I1 i M6).
   Mniejszy awatar, odstepy i wezszy przycisk Change oddaja kolumnie ok. 45-55 px; plansze sa rysowane na 390 px, wiec to nie
   zmienia wygladu planszy. Przycisk filmu (Change w wierszu tytulu) zostaje bez zmian. */
@media (max-width: 359.98px) {
  .lk-kreator td.label[data-lk-pole] > :is(.cleafs-profil-ig, .cleafs-karta-yt--kanal) {
    gap: 8px;
    padding-inline: 10px;
  }

  .lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--kanal img.cleafs-karta-yt__awatar {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    margin: 2px !important;
  }

  .lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig img.cleafs-profil-ig__awatar {
    width: 46px;
    height: 46px;
    padding: 2px;
  }

  /* Wysokosc Change zostaje (karta konta 40 px jako cel dotyku, karta kanalu 36 px jak G3): wezszy jest tylko przycisk. */
  .lk-kreator td.label[data-lk-pole] > .cleafs-profil-ig button.cleafs-profil-ig__zmien {
    padding: 0 10px;
    font-size: 14px;
  }

  .lk-kreator td.label[data-lk-pole] > .cleafs-karta-yt--kanal button.cleafs-karta-yt__zmien {
    padding: 0 10px;
    font-size: 13px;
  }
}

.lk-kreator td.label[data-lk-pole][data-lk-karta="film"][data-lk-stan="karta"] > #link-header,
.lk-kreator td.label[data-lk-pole][data-lk-karta="live"][data-lk-stan="karta"] > #link-header {
  display: flex;
  align-items: center;
  min-height: 36px;
}

/* --- Tryb dwoch pol (G5B): link i autor komentarza jako dwa wiersze jednej karty. Kazdy wiersz to osobna tabela wtyczki, wiec
   karte skladamy z dwoch pol: gorne z zaokraglona gora, dolne z zaokraglonym dolem, miedzy nimi linia #f1f3f6. */
.lk-pole__postep {
  grid-row: 1;
  grid-column: 1;
  align-self: start;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 120px;
  height: 21px;
  color: var(--ink-600);
  font-family: var(--lk-font-naglowek);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.lk-pole__postep-tekst { flex: none; white-space: nowrap; }

.lk-pole__postep i {
  display: block;
  flex: 1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ink-100);
}

.lk-pole__postep i b {
  display: block;
  height: 6px;
  width: 0;
  border-radius: 999px;
  background: var(--orange-500);
  transition: width var(--lk-czas) var(--lk-ease);
}

.lk-kreator[data-lk-duo] table.variations[id] td.label[data-lk-pole] > input[type="text"] {
  height: 62px;
  padding-block: 28px 8px;
  padding-inline: 51px 14px;
}

.lk-kreator[data-lk-duo] td.label[data-lk-pole] .lk-pole__etykieta { margin-block-start: 12px; margin-inline-start: 52px; }

.lk-kreator[data-lk-duo] td.label[data-lk-pole] .lk-pole__logo {
  width: 24px;
  height: 24px;
  margin-inline-start: 15px;
  background-image: none;
}

.lk-pole__logo--numer {
  background-color: var(--ink-900);
  color: #fff;
  font-family: var(--lk-font-naglowek);
  font-size: 12px;
  line-height: 24px;
}

.lk-pole__logo--gotowe { background-color: var(--green-500); }

.lk-kreator[data-lk-duo] table#buba_link td.label[data-lk-pole] > input[type="text"] {
  border-radius: 16px 16px 0 0;
  border-block-end-color: var(--ink-100);
}

.lk-kreator[data-lk-duo] table#buba_comment_author_account_name td.label[data-lk-pole] > input[type="text"],
.lk-kreator[data-lk-duo] table#buba_comment_author_account_name td.label[data-lk-pole] > .cleafs-profil-ig {
  border-radius: 0 0 16px 16px;
  border-block-start: 0;
}

.lk-kreator[data-lk-duo] #buba_comment_author_account_name td.label[data-lk-pole] > label { display: none; }

.lk-kreator[data-lk-duo] #buba_comment_author_account_name td.label[data-lk-pole] > input[type="text"],
.lk-kreator[data-lk-duo] #buba_comment_author_account_name td.label[data-lk-pole] > .lk-pole__logo,
.lk-kreator[data-lk-duo] #buba_comment_author_account_name td.label[data-lk-pole] > .lk-pole__etykieta,
.lk-kreator[data-lk-duo] #buba_comment_author_account_name td.label[data-lk-pole] > .cleafs-profil-ig { grid-row: 1; }

.lk-kreator[data-lk-duo] #buba_comment_author_account_name td.label[data-lk-pole] > .lk-dymek--blad { grid-row: 2; }

.lk-pole__podpowiedz {
  grid-row: 4;
  grid-column: 1;
  margin: 10px 0 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.5;
}

.lk-kreator[data-lk-duo] #buba_comment_author_account_name td.label[data-lk-pole] > .lk-pole__podpowiedz { grid-row: 3; }

.lk-kreator[data-lk-duo] #buba_link { margin-block-end: 0 !important; }

/* --- Komentarze (G6A): naglowek z pigulka n / max, przelacznik, lista albo wiersze, przycisk losowania. Surowa textarea wtyczki
   zostaje w dokumencie (niesie komentarze do koszyka i do licznika), schowana przycieciem. */
.lk-kreator #buba_comments { margin: 18px 0 0 !important; }

.lk-kreator #buba_comments td.label[data-lk-kom] { position: relative; display: block; padding: 0; }

.lk-kreator #buba_comments .lk-kom__naglowek {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.lk-kreator #buba_comments .lk-kom__naglowek #buba_number_comments { display: none; }

.lk-kom__licznik {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--ink-100);
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.lk-kom__licznik[data-lk-limit] { background: var(--red-50); color: var(--red-700); }

.lk-kom__zapowiedz {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lk-kom__tryb[hidden],
.lk-kom__lista[hidden],
.lk-kom__wiersze[hidden],
.lk-kom__akcje[hidden] { display: none !important; }

.lk-kom__tryb {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-block-start: 12px;
  padding: 4px;
  border-radius: 14px;
  background: var(--ink-100);
}

.lk-kreator button.lk-kom__opcja {
  min-height: 0;
  width: auto;
  margin: 0;
  padding: 10px 4px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--ink-600);
  font-family: var(--lk-font-naglowek);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1;
  text-align: center;
  text-transform: none;
  cursor: pointer;
}

.lk-kreator button.lk-kom__opcja[aria-checked="true"] {
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 15, 17, .14);
  color: var(--ink-900);
}

.lk-kreator button.lk-kom__opcja:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

.lk-kom__lista,
.lk-kom__wiersze {
  margin-block-start: 12px;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 15, 17, .05);
}

.lk-kom__lista:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

.lk-kom__w {
  padding: 10px 14px;
  color: var(--ink-900);
  font-size: 15px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.lk-kom__w + .lk-kom__w { border-block-start: 1px solid var(--ink-100); }

.lk-kreator #buba_comments input.lk-kom__wiersz {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink-900);
  font-family: var(--lk-font-tresc);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.lk-kreator #buba_comments input.lk-kom__wiersz + input.lk-kom__wiersz { border-block-start: 1px solid var(--ink-100); }

/* Wykrzyknik konieczny jak przy polu konta: globalne ::placeholder z CSS WPBakery (granat, !important). */
.lk-kreator #buba_comments input.lk-kom__wiersz::placeholder { color: var(--ink-400) !important; opacity: 1; }

.lk-kreator #buba_comments input.lk-kom__wiersz:focus-visible { outline: 2px solid var(--orange-500); outline-offset: -2px; }

.lk-kom__akcje { display: flex; justify-content: center; margin-block-start: 12px; }

.lk-kreator button.lk-kom__losuj {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  min-height: 0;
  width: auto;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--lk-losuj-tlo);
  box-shadow: none;
  color: var(--orange-600);
  font-family: var(--lk-font-naglowek);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

@media (hover: hover) {
  .lk-kreator button.lk-kom__losuj:hover { background: var(--orange-100); color: var(--orange-600); }
}

.lk-kreator button.lk-kom__losuj:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

.lk-kreator button.lk-kom__losuj[disabled] { opacity: .6; cursor: progress; }

.lk-kreator #buba_comments .lk-kom__surowe {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

/* --- Pasek na telefonie (R-B5-3, plansza F2 i s4-krok3-ok): "Add to basket" i opis wyboru w jednej linii. Opis nie wyznacza
   szerokosci kolumny (szerokosc 0, min-width 100%), tylko wystaje w przerwe przed przyciskami, jak na planszy; gdy wystawalby
   dalej niz przerwa, skrypt (pasekKreatora, data-lk-opis-zawija) wraca do zawijania w dwoch wierszach. */
@media (max-width: 900px) {
  .lk-pasek__opis {
    display: block;
    width: 0;
    min-width: 100%;
    overflow: visible;
    white-space: nowrap;
  }

  .lk-pasek[data-lk-opis-zawija] .lk-pasek__tekst { flex: 1 1 0; }

  .lk-pasek[data-lk-opis-zawija] .lk-pasek__opis {
    display: -webkit-box;
    width: auto;
    min-width: 0;
    overflow: hidden;
    white-space: normal;
  }
}

/* Karteczka stoi pod polem komentarzy, a nie pod polem linku (znacznik wchodzi na haku po calym formularzu): strzalka u gory
   wskazywalaby liste komentarzy, wiec przy komentarzach jej nie ma. */
.lk-kreator:has(#buba_comments:not([style*="display: none"])) .lk-uwaga-konto::before { display: none; }

/* ==========================================================================
   USLUGA NIEDOSTEPNA: karta #lk-niedostepny i pasek K1 (plan produkt-niedostepny 29.10.2026, zadanie 4)

   Znaczniki: template-parts/produkt/niedostepny.php (karta) i liikye_niedostepny_pasek() w inc/produkt-niedostepny.php (pasek);
   zachowanie: assets/js/liikye-niedostepny.js. Wymiary, kolory, promienie i odstepy z generatora makiet
   docs/superpowers/makiety/niedostepny-2026-10-29/narzedzia/generuj.py (CSS_SKLEP: .karta .pusty .in4 .btn .btn-obr .notka .wyr
   .pasek-n .pigulka-p; CSS_ZLOZENIE: .karta-pc .dol-pc .wyr-pc .linia-k; CSS_KOMPLET: .ok-k .bl-k .zal .krec .btn.toku).
   Plansze: K1-K14 telefon 390 px, P1-P2 komputer 1440 px (komplet.html, zaakceptowany 29.10.2026).

   KOLORY: tokeny liikye tam, gdzie sa odpowiedniki (ink-*, orange-500/600, green-50, red-50, red-700); dokladnie z generatora
   te bez odpowiednika: tlo kafelka ikony uslugi #f5f6f8 (ink-50 to #f7f8fa), tekst zielonego dymku #14532d, tekst bledu #7f1d1d,
   ramka zlego pola #f7b4ae (te trzy ma tez kreator, ale tylko pod .lk-kreator).
   Uklad komputera (karta 714 px w prawej kolumnie, P1) od 641 px, granica kafli kreatora: od tej szerokosci notka i przycisk
   stoja w jednym wierszu, a "Zobacz usluge" w wierszu propozycji. Uklad stoi na wlasnosciach logicznych (arabski = lustro).
   ========================================================================== */

.lk-niedostepny {
  --lk-nd-ikona-tlo: #f5f6f8;
  --lk-nd-ok-tekst: #14532d;
  --lk-nd-blad-tekst: #7f1d1d;
  --lk-nd-blad-obwodka: #f7b4ae;
  --lk-nd-kolko-cien: 0 1px 3px rgba(14, 15, 17, .08);

  padding: 16px;
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  background: #fff;
  color: var(--ink-700);
  font-family: var(--lk-font-tresc);
  font-size: 15px;
  line-height: 1.5;
  /* Klik w pasek i powrot po POST (#lk-niedostepny) zostawiaja karte 16 px pod przyklejonym naglowkiem (plansza E2). */
  scroll-margin-block-start: calc(var(--lk-naglowek-h) + 16px);
}

.lk-niedostepny p { margin: 0; }

/* --- 1B: wyszarzona ikona uslugi z klepsydra i tytul ------------------------------------------------------------- */

.lk-niedostepny__glowa {
  padding: 10px 6px 4px;
  text-align: center;
}

.lk-niedostepny__ikona {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ink-100);
}

.lk-niedostepny__obraz {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  display: block;
  width: 52px;
  height: 52px;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .55;
}

/* Biale kolko 30 px z klepsydra, 4 px poza kolem w dolnym rogu (po arabsku w lewym). */
.lk-niedostepny__zegar {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--lk-nd-kolko-cien);
  font-size: 15px;
  line-height: 1;
}

.lk-niedostepny .lk-niedostepny__tytul {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  text-align: center;
  /* Zwykle lamanie jak na planszy (K13: "Dieser Service ist gerade nicht / verfugbar"); globalne h1-h6 { text-wrap: balance }
     z liikye.css rownaloby wiersze inaczej. Wzorzec: liikye-deals.css, liikye-glowna-d.css. */
  text-wrap: wrap;
}

.lk-niedostepny__linia {
  height: 1px;
  margin: 22px 0;
  background: var(--ink-200);
}

/* Naglowek czesci (zapis, propozycja). Na telefonie BEZ odstepu pod spodem: plansze K2-K14 rysuja .pyt w .ab, gdzie regula
   ".ab p { margin: 0 }" generatora (0,1,1) wygrywa z ".pyt { margin: 0 0 10px }" (0,1,0); zaakceptowany wyglad to 0 px. Na
   komputerze ".karta-pc .pyt" (0,2,0) daje 10 px (sekcja @media nizej). To samo dotyczy notki i zdania K10 (0 px). */
.lk-niedostepny .lk-niedostepny__pyt {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

/* --- 2A: pole I4, przycisk, notka --------------------------------------------------------------------------------- */

.lk-niedostepny__pole {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(14, 15, 17, .05);
  cursor: text;
  transition: border-color var(--lk-czas) var(--lk-ease), box-shadow var(--lk-czas) var(--lk-ease);
}

.lk-niedostepny__pole:focus-within {
  border-color: var(--orange-500);
  box-shadow: var(--ring-focus);
}

.lk-niedostepny__pole.lk-pole--zle,
.lk-niedostepny__pole.lk-pole--zle:focus-within {
  /* Pole z bledem ma rozowa ramke z planszy K6/K7 takze z fokusem (zatwierdzenie klawiszem "Idz" zostawia fokus w polu). */
  border-color: var(--lk-nd-blad-obwodka);
  box-shadow: 0 2px 8px rgba(14, 15, 17, .05);
}

.lk-niedostepny__pole-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink-100);
  font-size: 19px;
  line-height: 1;
}

.lk-niedostepny__pole-tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.lk-niedostepny__etykieta {
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* Pole tekstu wyglada jak wiersz wartosci z planszy (.in4 .v): bez wlasnej ramki, tla i odstepow; arkusze sklepu i WooCommerce
   stylizuja input[type=email] globalnie, stad pelne zerowanie. */
.lk-niedostepny .lk-niedostepny__email {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  appearance: none;
  color: var(--ink-900);
  font-family: var(--lk-font-tresc);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
}

/* Wykrzyknik jak w polu kreatora: wlasny CSS WPBakery z panelu liikye ma globalne "::placeholder { color: #11285f !important }". */
.lk-niedostepny .lk-niedostepny__email::placeholder { color: var(--ink-400) !important; opacity: 1; }

.lk-niedostepny .lk-niedostepny__przycisk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 52px;
  margin: 12px 0 0;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--orange-500);
  color: #fff;
  font-family: var(--lk-font-naglowek);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--lk-czas) var(--lk-ease);
}

@media (hover: hover) {
  .lk-niedostepny .lk-niedostepny__przycisk:not(:disabled):hover { background: var(--orange-600); }
}

/* Dzwonek i napis na planszy to jeden tekst "dzwonek spacja napis", wiec odstep = szerokosc spacji kroju (0,19 em = 3,2 px przy
   17 px); kolko K4 ma odstep 10 px (.btn { gap: 10px } przy dwoch elementach). */
.lk-niedostepny__przycisk-ikona { margin-inline-end: .19em; }

.lk-niedostepny__przycisk-ikona[hidden] { display: none; }

.lk-niedostepny .lk-niedostepny__przycisk:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

/* K4: zapisywanie (przycisk wylaczony, przygaszony, kolko zamiast dzwonka). */
.lk-niedostepny .lk-niedostepny__przycisk:disabled {
  opacity: .75;
  cursor: progress;
}

.lk-niedostepny__krec {
  flex: none;
  width: 18px;
  height: 18px;
  margin-inline-end: 10px;
  border: 2.5px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lk-niedostepny-krec .8s linear infinite;
}

@keyframes lk-niedostepny-krec {
  to { transform: rotate(360deg); }
}

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

.lk-niedostepny .lk-niedostepny__notka {
  margin: 0;
  color: var(--ink-500);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.lk-niedostepny .lk-niedostepny__notka[hidden] { display: none; }

/* K10: zalogowany, zdanie z adresem z konta zamiast pola. */
.lk-niedostepny .lk-niedostepny__zal {
  margin: 0;
  color: var(--ink-600);
  font-size: 14px;
}

.lk-niedostepny__zal b { color: var(--ink-900); }

.lk-niedostepny__zal + .lk-niedostepny__przycisk { margin-block-start: 0; }

/* --- Dymki: zielony (K5, K11) i blad (K6-K9, K15) ------------------------------------------------------------------ */

.lk-niedostepny__ok,
.lk-niedostepny__blad {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
}

.lk-niedostepny__ok { background: var(--green-50); }

.lk-niedostepny__blad {
  margin-block-start: 14px;
  background: var(--red-50);
}

/* Strzalka bledu wskazuje pole nad dymkiem (14 x 14 px, 7 px nad krawedzia, 28 px od brzegu). */
.lk-niedostepny__blad::before {
  content: "";
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: 28px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: inherit;
  transform: rotate(45deg);
}

.lk-niedostepny__ok-ikona,
.lk-niedostepny__blad-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--lk-nd-kolko-cien);
  font-size: 17px;
  line-height: 1;
}

.lk-niedostepny .lk-niedostepny__ok-tekst {
  color: var(--lk-nd-ok-tekst);
  font-size: 14px;
  line-height: 1.4;
}

.lk-niedostepny__ok-tekst b { color: var(--lk-nd-ok-tekst); }

.lk-niedostepny .lk-niedostepny__blad-tekst {
  color: var(--lk-nd-blad-tekst);
  font-size: 14px;
  line-height: 1.4;
}

.lk-niedostepny .lk-niedostepny__wyczysc {
  display: flex;
  align-items: center;
  flex: none;
  height: 36px;
  margin-inline-start: auto;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(14, 15, 17, .1);
  color: var(--red-700);
  font-family: var(--lk-font-naglowek);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.lk-niedostepny .lk-niedostepny__wyczysc:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

/* --- 3C: najblizsza dostepna usluga (telefon: ramka wokol ikony i opisu, przycisk pod nia) ------------------------- */

.lk-niedostepny__usluga {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: #fff;
}

.lk-niedostepny__usluga-ikona {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: var(--lk-nd-ikona-tlo);
}

.lk-niedostepny__usluga-obraz {
  display: block;
  width: 54px;
  height: 54px;
  max-width: none;
  object-fit: contain;
}

.lk-niedostepny__usluga-opis {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.lk-niedostepny__usluga-nazwa {
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}

.lk-niedostepny .lk-niedostepny__cena {
  margin-block-start: 3px;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.5;
}

.lk-niedostepny__cena .lk-cena__kwota {
  color: var(--ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 700;
}

.lk-niedostepny .lk-niedostepny__zobacz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  margin-block-start: 10px;
  padding: 0 20px;
  border: 2px solid var(--orange-500);
  border-radius: 12px;
  background: #fff;
  color: var(--orange-500);
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--lk-czas) var(--lk-ease);
}

@media (hover: hover) {
  .lk-niedostepny .lk-niedostepny__zobacz:hover { background: var(--orange-50); }
}

.lk-niedostepny .lk-niedostepny__zobacz:focus-visible { outline: 2px solid var(--ink-900); outline-offset: 2px; }

/* --- Komputer i szersze ekrany (P1, P2): karta 714 px, padding 32 ------------------------------------------------- */
@media (min-width: 641px) {
  .lk-niedostepny {
    padding: 32px;
    box-shadow: 0 2px 10px rgba(14, 15, 17, .04);
  }

  .lk-niedostepny__ikona { margin-block-end: 14px; }

  .lk-niedostepny .lk-niedostepny__tytul { font-size: 20px; }

  .lk-niedostepny .lk-niedostepny__pyt { margin-block-end: 10px; }

  /* Notka i przycisk w jednym wierszu pod polem (.dol-pc): przycisk w drugiej kolumnie, notka wraca w wolne miejsce pierwszej
     (dense). Zalogowany: zdanie z adresem po lewej, przycisk po prawej. Pozostale elementy na cala szerokosc. */
  .lk-niedostepny form.lk-niedostepny__zapis {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-auto-flow: row dense;
    column-gap: 16px;
    align-items: center;
  }

  .lk-niedostepny__zapis > * { grid-column: 1 / -1; }

  .lk-niedostepny .lk-niedostepny__przycisk {
    grid-column: 2;
    width: auto;
    margin-block-start: 14px;
    padding: 0 28px;
  }

  .lk-niedostepny .lk-niedostepny__notka {
    grid-column: 1;
    margin-block-start: 14px;
    text-align: start;
  }

  .lk-niedostepny .lk-niedostepny__zal {
    grid-column: 1;
    margin: 0;
  }

  .lk-niedostepny__zal + .lk-niedostepny__przycisk { margin-block-start: 0; }

  /* 3C w jednym wierszu: ramka wokol calego wiersza, przycisk po prawej (.wyr-pc). */
  .lk-niedostepny__wiersz {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--ink-200);
    border-radius: 16px;
    background: #fff;
  }

  .lk-niedostepny__usluga {
    flex: 1;
    gap: 16px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .lk-niedostepny__usluga-ikona {
    width: 64px;
    height: 64px;
  }

  .lk-niedostepny__usluga-obraz {
    width: 48px;
    height: 48px;
  }

  .lk-niedostepny__usluga-nazwa {
    font-size: 17px;
    line-height: 1.5;
  }

  .lk-niedostepny .lk-niedostepny__zobacz {
    flex: none;
    height: 46px;
    margin: 0;
    margin-inline-start: auto;
    padding: 0 22px;
  }
}

/* --- Pasek K1 (telefon): "Teraz niedostepna" + pigulka 56 px z bialym kolkiem 42 px (.pasek-n, .pigulka-p) ---------- */

/* Na komputerze karta jest na pierwszym ekranie, wiec paska nie ma (P1). */
.lk-pasek--niedostepny { display: none; }

@media (max-width: 900px) {
  .lk-pasek.lk-pasek--niedostepny {
    display: flex;
    gap: 10px;
    padding-block: 12px calc(14px + env(safe-area-inset-bottom, 0px));
    padding-inline: 18px 12px;
    border-block-start: 0;
  }

  .lk-pasek.lk-pasek--niedostepny[hidden] { display: none; }

  .lk-pasek--niedostepny .lk-pasek__tekst {
    flex: 1 1 auto;
    min-width: 0;
  }

  .lk-pasek--niedostepny .lk-pasek__tytul {
    display: block;
    color: var(--ink-900);
    font-family: var(--lk-font-naglowek);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
  }

  /* Nazwa uslugi w jednym wierszu z wielokropkiem (zamiast dwoch wierszy i wystawania z paska zakupu). */
  .lk-pasek--niedostepny .lk-pasek__opis,
  .lk-pasek--niedostepny[data-lk-opis-zawija] .lk-pasek__opis {
    display: block;
    width: auto;
    min-width: 0;
    margin-block-start: 3px;
    overflow: hidden;
    color: var(--ink-500);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .lk-pasek--niedostepny .lk-pasek__akcje { flex: none; }

  .lk-pasek--niedostepny .lk-pasek__dalej {
    gap: 10px;
    height: 56px;
    padding-inline: 20px 7px;
    color: #fff;
    font-size: 17px;
    text-decoration: none;
  }

  .lk-pasek--niedostepny .lk-pasek__dalej-tekst { white-space: nowrap; }

  .lk-pasek--niedostepny .lk-pasek__kolko {
    width: 42px;
    height: 42px;
    font-size: 19px;
    line-height: 1;
  }
}

/* Bardzo waski ekran: ciasniejsza pigulka jak w pasku zakupu (kolko 38 px). */
@media (max-width: 360px) {
  .lk-pasek.lk-pasek--niedostepny { padding-inline: 14px 10px; }

  .lk-pasek--niedostepny .lk-pasek__dalej {
    gap: 8px;
    padding-inline-start: 16px;
    font-size: 16px;
  }

  .lk-pasek--niedostepny .lk-pasek__kolko {
    width: 38px;
    height: 38px;
  }
}

/* Niski ekran (poziomy telefon, okno zmniejszone przez klawiature): pasek zakupu stoi wtedy w karcie, a pasek niedostepnej uslugi
   nie mialby gdzie stac (prowadzi do karty tuz nad nim), wiec znika. */
@media (max-width: 900px) and (max-height: 520px) {
  .lk-pasek.lk-pasek--niedostepny { display: none; }
}