/* ==========================================================================
   Liikye - koszyk, platnosc, podziekowanie

   Ladowany wylacznie na trzech widokach: /basket/, /checkout/ i stronie
   podziekowania (inc/sklep-koszyk.php).

   CO TU STOI. KOSZYK (od 0.25.0) rysuje motyw: woocommerce/cart/cart.php, cart-empty.php i cart-totals.php skladaja sie z modelu
   cleafs_smm_model_koszyka() (sekcja 3a: baner, grupy i karty uslug z klas panelu lk-pk-*, przelaczniki ulepszen, kupon, okazje,
   podsumowanie i pasek przyklejony). PODZIEKOWANIE (od 03.11.2026) tez rysuje motyw: woocommerce/checkout/thankyou.php, sekcja 14.
   PLATNOSC nie jest "gola": HTML nalezy do wtyczki cleafs_smm (payment.php, review-order.php), ktora wnosi wlasne arkusze
   checkout-payment.min.css i checkout-review-order.min.css w palecie kumplo (granat + zolty). Tamten CSS ladowany jest PRZED
   motywem i uzywa wlasnych zmiennych --cleafs-*.

   STRATEGIA (platnosc). Zamiast przebijac kazda regule wtyczki, w sekcji 1 podmieniamy JEJ zmienne na tokeny Liikye. Granat, zolty i
   zielony znikaja jednym blokiem, bez wojny na wagi. Wykrzykniki zostaja tylko tam, gdzie wtyczka sama wpisala !important albo wartosc
   na sztywno - kazde takie miejsce ma komentarz z powodem.

   Uklad stoi na wlasnosciach logicznych, wiec arabski dziala bez osobnego
   arkusza. Komentarze wylacznie ASCII.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Paleta wtyczki przemapowana na tokeny motywu
   -------------------------------------------------------------------------- */

body.woocommerce-cart,
body.woocommerce-checkout {
  /* Zmienne wtyczki cleafs_smm. Nazwy sa jej, wartosci nasze. */
  --cleafs-navy: var(--lk-tusz);
  --cleafs-mid: var(--lk-akcent-tekst);
  --cleafs-accent: var(--lk-akcent);
  --cleafs-accent-hover: var(--lk-akcent-ciemny);
  --cleafs-bg-light: var(--lk-papier-2);
  --cleafs-border: var(--lk-linia);
  --cleafs-border-soft: var(--lk-ink-100);
  --cleafs-text-2nd: var(--lk-tusz-2);
  --cleafs-text-3rd: var(--lk-przygaszony);
  --cleafs-green: var(--lk-sukces);
  --cleafs-green-dark: var(--lk-sukces-tekst);
  --cleafs-red: var(--lk-blad);
  --cleafs-radius: var(--lk-r-3);
  --cleafs-radius-sm: var(--lk-r-1);
  --cleafs-radius-btn: var(--lk-r-xs);
  --cleafs-radius-pill: var(--lk-r-1);

  /* Odstep od gornej krawedzi dla elementow przyklejonych. Naglowek sklepu
     jest sticky i ma wysokosc --lk-naglowek-h. */
  --lk-lepki: calc(var(--lk-naglowek-h) + var(--lk-s-4));
}

/* --------------------------------------------------------------------------
   2. Elementy wspolne obu stron
   -------------------------------------------------------------------------- */

/* Obietnice pod przyciskiem zakupu. */
.lk-zakup-zaufanie {
  display: flex;
  flex-direction: column;
  gap: var(--lk-s-2);
  clear: both;
  margin: var(--lk-s-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--lk-t-mikro);
  line-height: 1.45;
  color: var(--lk-tusz-2);
  text-align: start;
}

.lk-zakup-zaufanie__punkt {
  display: flex;
  align-items: flex-start;
  gap: var(--lk-s-2);
}

.lk-zakup-zaufanie__punkt svg {
  flex: none;
  margin-block-start: 1px;
  color: var(--lk-sukces-tekst);
}

/* Pierwsza obietnica niesie odpowiedz na najczestsza obawe (abonament), wiec
   czyta sie mocniej niz reszta listy. Wyroznienie jest w wadze pisma, nie
   w kolorze - kolor akcentu na tym ekranie nalezy do ofert ulepszenia. */
.lk-zakup-zaufanie__punkt:first-child {
  font-size: var(--lk-t-maly);
  font-weight: 600;
  color: var(--lk-tusz);
}

/* Metody platnosci: sygnal "placisz tym, czego uzywasz", bez logotypow. */
.lk-zakup-platnosci {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  clear: both;
  margin: var(--lk-s-3) 0 0;
  padding: var(--lk-s-3) 0 0;
  border-block-start: 1px solid var(--lk-linia);
  list-style: none;
}

.lk-zakup-platnosci__pozycja {
  padding: 3px 8px;
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-xs);
  background: var(--lk-papier);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--lk-tusz-2);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Koszyk: uklad strony
   -------------------------------------------------------------------------- */

/* Puste opakowania wtyczki. Wewnatrz jest sam bialy znak, wiec :empty ich nie
   zlapie - stad :not(:has(*)). Regula jest zywa: gdy skrypt wtyczki wstawi
   tam promocje, blok pokaze sie sam. */
body.woocommerce-cart .cleafs-smm-cart-promo-slot:not(:has(*)),
body.woocommerce-cart .cleafs-cart-notices:not(:has(*)),
body.woocommerce-cart .woocommerce-notices-wrapper:not(:has(*)),
body.woocommerce-checkout .woocommerce-notices-wrapper:not(:has(*)) {
  display: none;
}

/* WYLACZENIE RESPONSYWNEGO UKLADU WOOCOMMERCE DLA POZYCJI.
   woocommerce-smallscreen.css ponizej 768 px zamienia tabele na wlasny uklad:
   tr i td na bloki, tekst do prawej, a przed kazda komorka wstawia etykiete
   z data-title (stad "Price:" nad kwota) i kreske nad wierszem. Nasza karta ma
   juz wlasny uklad na kazdej szerokosci, wiec tamten tylko go rozbija.
   Zdejmujemy go WYLACZNIE dla pozycji koszyka - reszta tabel sklepu (zamowienia
   w koncie, podsumowania) korzysta z niego dalej. */
@media (max-width: 768px) {
  body.woocommerce-cart table.shop_table_responsive tr.cart_item,
  body.woocommerce-page table.shop_table_responsive tr.cart_item {
    display: grid;
  }

  body.woocommerce-cart table.shop_table_responsive tr.cart_item td,
  body.woocommerce-page table.shop_table_responsive tr.cart_item td {
    display: block;
    text-align: start !important;
    border: 0 !important;
  }

  body.woocommerce-cart table.shop_table_responsive tr.cart_item td::before,
  body.woocommerce-page table.shop_table_responsive tr.cart_item td::before {
    content: none !important;
  }

  /* Kwota zostaje przy prawej krawedzi karty, bo tam jej szuka oko. */
  body.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price,
  body.woocommerce-page table.shop_table_responsive tr.cart_item td.product-price {
    text-align: end !important;
  }

}

/* Arkusz tresci (.lk-proza) obrysowuje kazda komorke kazdej tabeli, bo sluzy
   do tabelek w artykulach. W koszyku i na platnosci zostawialo to pionowe
   kreski miedzy kolumnami. Zdejmujemy tylko boki, linie poziome ustawiamy
   dalej po swojemu. */
body.woocommerce-cart .woocommerce table td,
body.woocommerce-cart .woocommerce table th,
body.woocommerce-checkout .woocommerce table td,
body.woocommerce-checkout .woocommerce table th {
  border-inline: 0;
}

/* --------------------------------------------------------------------------
   3a. Koszyk: pelny koszyk z modelu cleafs_smm (plan mini koszyka 29.10.2026, zadanie 10; plansze E2-01 .. E2-11)

   Znacznik wypisuje woocommerce/cart/cart.php, cart-totals.php i cart-empty.php, a akcje obsluguja assets/js/liikye-naglowek.js (wspolne z
   panelem) i assets/js/liikye-koszyk.js. Karty uslug, grupy platform, krokownik, okazje i kafelki promocji to TE SAME klasy co w panelu
   (lk-pk-*, assets/css/liikye-naglowek.css, sekcja 4): tu dopisane sa wymiary pelnej strony i elementy, ktorych panel nie ma (baner,
   przelaczniki ulepszen, kupon, podsumowanie, pasek przyklejony). Kolejnosc: baner, lista, kupon, okazje, podsumowanie, jedna kolumna.
   -------------------------------------------------------------------------- */

/* Koszyk zaczyna sie tuz pod menu (zyczenie Mateusza z 31.08.2026): pierwsza karta zamowienia ma byc od razu widoczna. */
body.woocommerce-cart .lk-tresc__glowna {
  padding-block-start: var(--lk-s-4);
}

/* Kontener WooCommerce: kolumna z odstepem 18 px miedzy banerem, lista, okazjami i podsumowaniem. */
body.woocommerce-cart .woocommerce {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-block: 0;
}

body.woocommerce-cart .woocommerce > * { margin-block: 0; }

/* .lk-proza dodaje marginesy akapitom i naglowkom; tu odstepy ustawia uklad. */
body.woocommerce-cart .woocommerce p:where(.lk-kb-tyt, .lk-kb-wiersz, .lk-kb-podsum__tyt, .lk-kb-baner__tyt, .lk-kb-baner__txt, .lk-kb-ok-kodu, .lk-kb-vat, .lk-pk-nazwa, .lk-pk-dana, .lk-pk-poza, .lk-pk-gratis, .lk-pk-cena, .lk-pk-grupa__nazwa, .lk-pk-grupa__ile, .lk-pk-sekcja, .lk-pk-okazja__nazwa, .lk-pk-okazja__ceny, .lk-panel-koszyk__pusty-tytul, .lk-panel-koszyk__pusty-opis, .lk-pk-oferta__nazwa) {
  margin: 0;
}

/* Przyciski i odnosniki jak w panelu: reset przegladarki i pierscien skupienia (w panelu robi to regula zakotwiczona w .lk-panel-koszyk). */
.lk-kb-form :is(.lk-pk-grupa__zwin, .lk-pk-krok__mniej, .lk-pk-krok__plus, .lk-pk-usun, .lk-pk-cofnij__btn, .lk-kb-przel__sw, .lk-kb-blad__zamknij),
.lk-kb-okazje :is(.lk-pk-okazja__btn),
.lk-kb-blad__zamknij {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.lk-kb-form :is(button, a, input):focus-visible,
.lk-kb-okazje :is(button, a):focus-visible,
.lk-kb-podsum :is(button, a):focus-visible,
.lk-kb-pasek a:focus-visible,
.lk-kb-baner a:focus-visible {
  outline: 3px solid var(--lk-akcent);
  outline-offset: 2px;
}

/* Puste opakowania motywu i wtyczki znikaja (baner bez promocji, okazje bez ofert, komunikaty bez tresci). Komunikat WooCommerce o dodanym
   kuponie zastepuje potwierdzenie pod polem kodu, wiec go nie pokazujemy drugi raz. */
.lk-kb-baner:empty,
.lk-kb-okazje:empty { display: none; }

body.woocommerce-cart .cleafs-cart-notices :is(.woocommerce-message, .lk-komunikat--sukces) { display: none; }

/* Naglowek listy: "Twoje zamowienie" i liczba uslug. */
.lk-kb-form,
.lk-kb-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lk-kb-tyt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.lk-kb-tyt b {
  font-family: var(--lk-font-naglowek);
  font-size: 19px;
  font-weight: 800;
}

.lk-kb-tyt span {
  color: var(--lk-ink-700);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* K1A: baner promocji 3 w cenie 2 z kafelkami uslug objetych promocja i przyciskiem "Dobierz usluge". */
.lk-kb-baner {
  display: grid;
  grid-template-columns: 52px auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--orange-50);
}

.lk-kb-baner--kod { grid-template-columns: 52px 1fr; }

.lk-kb-baner__emo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background: #fff;
  font-size: 24px;
  line-height: 1;
}

.lk-kb-baner__tyt {
  font-family: var(--lk-font-naglowek);
  font-size: 19px;
  font-weight: 800;
}

.lk-kb-baner__txt {
  color: var(--lk-ink-700);
  font-size: 14px;
}

.lk-kb-baner__txt em { font-style: normal; font-weight: 700; }

.lk-kb-baner__sloty {
  display: flex;
  gap: 8px;
}

.lk-kb-baner .lk-pk-slot {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 22px;
}

.lk-kb-baner .lk-pk-slot img { width: 30px; height: 30px; }
.lk-kb-baner .lk-pk-slot--pusty { background: var(--orange-100); color: var(--orange-600); }

.lk-kb-pig-maly {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 6px 0 18px;
  border-radius: 999px;
  background: var(--lk-akcent-tekst);
  box-shadow: 0 10px 22px rgba(255, 84, 54, .3);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .lk-kb-pig-maly:hover { background: var(--lk-akcent-ciemny); color: #fff; }
}
.lk-kb-pig-maly .lk-pig__kolo { width: 34px; height: 34px; }

/* Pusty koszyk (E2-11): ten sam uklad co pusty panel, baner promocji pod spodem. */
.lk-kb-pusty {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  padding-block-start: 20px;
}

.lk-kb-pusty .lk-panel-koszyk__pusty { padding-inline: 0; }

.lk-kb-baner--pusty {
  grid-template-columns: 44px 1fr;
  gap: 14px;
  margin-block-start: 18px;
  text-align: start;
}

.lk-kb-baner--pusty .lk-kb-baner__emo { width: 44px; height: 44px; font-size: 20px; }
.lk-kb-baner--pusty .lk-kb-baner__tyt { font-size: 16px; }

/* K2B: grupa platformy i karta uslugi (klasy z panelu, wymiary pelnej strony). */
.lk-pk-grupa.lk-kb-grupa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
}

.lk-kb-grupa .lk-pk-grupa__gora { padding: 8px 10px 4px; }
.lk-kb-grupa .lk-pk-grupa__suma { font-size: 17px; }

.lk-kb-grupa .lk-pk-grupa__pozycje { gap: 8px; }

body.woocommerce-cart .lk-kb-karta { border-radius: 20px; }

body.woocommerce-cart .lk-kb-karta .lk-kb-poz {
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: 16px;
  padding: 16px 18px;
}

.lk-kb-karta .lk-kb-poz .lk-pk-mini { width: 56px; height: 56px; }
.lk-kb-karta .lk-kb-poz .lk-pk-mini img { width: 34px; height: 34px; }

/* Cena: na komputerze po prawej (wiersz), na telefonie pod nazwa (tam stoi druga kopia znacznika). */
.lk-kb-cena {
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.lk-kb-cena .lk-pk-cena__teraz { font-size: 18px; }
.lk-kb-poz .lk-kb-cena-pod { display: none; }

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

/* Przelacznik ulepszenia: napis pokazuje stan, w ktorym opcja jest (jak dotad), kwota ulepszenia z plusem i przelacznik. */
.lk-kb-przel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 44px;
  gap: 14px;
  align-items: center;
  padding: 9px 18px;
  border-block-start: 1px solid var(--lk-ink-100);
  font-size: 14.5px;
}

.lk-kb-przel:first-child { border-block-start: 0; }

.lk-kb-przel__cena {
  min-height: 16px;
  color: var(--lk-ink-700);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.lk-kb-przel__sw {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 13px;
  background: var(--lk-ink-300);
  transition: background 160ms var(--lk-ease);
}

.lk-kb-przel__sw span {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--lk-cien-1);
  transition: transform 160ms var(--lk-ease);
}

.lk-kb-przel__sw[aria-checked="true"] { background: var(--lk-akcent); }
.lk-kb-przel__sw[aria-checked="true"] span { transform: translateX(18px); }
[dir="rtl"] .lk-kb-przel__sw[aria-checked="true"] span { transform: translateX(-18px); }

/* Wlaczone, ale bez mozliwosci zmiany (opcja wymuszona, jakosc kupiona na stronie uslugi): bez reki i przygaszone. */
.lk-kb-przel__sw[aria-disabled="true"] { cursor: not-allowed; opacity: .6; }
.lk-kb-przel.jest-w-toku .lk-kb-przel__sw { cursor: progress; opacity: .55; }

/* Wiersz "Usunieto ... Cofnij" w pelnym koszyku (E2-09). */
.lk-kb-form .lk-pk-karta--cofnij { padding: 16px 18px; }
.lk-kb-form .lk-pk-cofnij__btn { padding: 0 16px; }

/* K4A: kupon. Pole zawsze widoczne; blad kodu stawia pod nim WooCommerce (cart.js, p.coupon-error-notice w div.coupon). */
.lk-kb-kupon {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lk-kb-kupon__pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px 10px 18px;
  border-radius: 16px;
  background: var(--lk-ink-50);
}

.lk-kb-kupon__et { font-size: 15px; }
.lk-kb-kupon__et b { font-weight: 700; }

.lk-kb-kupon__pole {
  display: flex;
  gap: 8px;
}

.lk-kb-input {
  box-sizing: border-box;
  width: 220px;
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--lk-ink-200);
  color: var(--lk-tusz);
  font: inherit;
  font-size: 14.5px;
}

.lk-kb-input.has-error { box-shadow: inset 0 0 0 1.5px var(--lk-blad); }

.lk-kb-kupon .lk-kb-pig-obrys,
.lk-kb-pig-obrys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 104px;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--lk-ink-200);
  color: var(--lk-ink-900);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

@media (hover: hover) {
  .lk-kb-kupon .lk-kb-pig-obrys:hover,
  .lk-kb-pig-obrys:hover { background: #fff; color: var(--lk-ink-900); box-shadow: inset 0 0 0 1.5px var(--lk-ink-900); }
}
.lk-kb-pig-obrys.jest-w-toku { cursor: progress; }

/* Blad kodu stoi tylko w koszyku: ten arkusz laduje sie tez na platnosci, gdzie .coupon-error-notice (checkout.js) ma wygladac jak w 0.24.0. */
body.woocommerce-cart .coupon-error-notice,
.lk-kb-ok-kodu {
  margin: 0;
  font-size: 13.5px;
}

body.woocommerce-cart .coupon-error-notice { color: var(--orange-700); }
body.woocommerce-cart .coupon-error-notice::before { content: "\2757\00a0"; }
.lk-kb-ok-kodu { color: var(--lk-ink-900); }

/* Komunikat bledu nad lista (E2-08). */
.lk-kb-blad {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--orange-50);
  color: var(--lk-ink-900);
  font-size: 13.5px;
}

.lk-kb-blad__zamknij {
  margin-inline-start: auto;
  background: none;
  color: var(--lk-przygaszony);
  font-size: 15px;
}

/* Przeliczanie (E2-08): lista przygaszona i nieklikalna, napis na wierzchu. */
.lk-kb.jest-przelicza > :not(.lk-kb-przeliczanie) {
  opacity: .55;
  pointer-events: none;
  transition: opacity 160ms var(--lk-ease);
}

.lk-kb-przeliczanie {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--lk-cien-2);
  font-weight: 700;
  transform: translate(-50%, -50%);
}

[dir="rtl"] .lk-kb-przeliczanie { transform: translate(50%, -50%); }
.lk-kb-przeliczanie[hidden] { display: none; }

/* K3A: okazje, karty przewijane w bok (klasy z panelu, wiekszy wymiar). */
.lk-kb-okazje .lk-pk-okazje { gap: 14px; }
.lk-kb-okazje .lk-pk-sekcja { font-size: 21px; }
.lk-kb-okazje .lk-pk-okazje__tor { gap: 12px; scroll-behavior: smooth; }
.lk-kb-okazje .lk-pk-okazja { width: 205px; }
.lk-kb-okazje .lk-pk-okazja__kafel { height: 84px; }
.lk-kb-okazje .lk-pk-okazja__kafel img { width: 46px; height: 46px; }

/* K5B: karta podsumowania. WooCommerce podmienia div.cart_totals po kuponie, wiec to ten sam element. */
.lk-kb-podsum {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px;
  border: 1px solid var(--lk-ink-200);
  border-radius: 22px;
  background: #fff;
}

.lk-kb-podsum__tyt {
  font-family: var(--lk-font-naglowek);
  font-size: 23px;
  font-weight: 800;
}

.lk-kb-wiersz {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--lk-ink-700);
  font-size: 15px;
}

.lk-kb-wiersz--rabat {
  color: var(--orange-600);
  font-size: 14.5px;
  font-weight: 700;
}

.lk-kb-usun-kod {
  margin-inline-start: 6px;
  color: var(--lk-przygaszony);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.lk-kb-razem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 4px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--lk-ink-200);
}

.lk-kb-razem__kw {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.lk-kb-razem__kw > span { color: var(--lk-ink-700); font-size: 16px; }
.lk-kb-razem__kw s { color: var(--lk-przygaszony); font-size: 16px; }

.lk-kb-razem__kw b {
  font-family: var(--lk-font-naglowek);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.lk-kb-vat {
  flex-basis: 100%;
  order: 3;
  color: var(--lk-przygaszony);
  font-size: 13px;
}

.lk-kb-akcje {
  display: flex;
  gap: 10px;
}

.lk-kb-akcje .lk-pig--akcent { min-width: 300px; padding-inline-start: 26px; }
.lk-kb-akcje .lk-pig--obrys { padding: 0 26px; }

/* Pasek przyklejony do dolu ekranu: suma i przycisk, widoczny tylko gdy karta podsumowania jest poza ekranem (liikye-koszyk.js). */
.lk-kb-pasek {
  position: fixed;
  inset-inline: 12px;
  inset-block-end: 12px;
  z-index: 90;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(1120px, calc(100vw - 24px));
  margin-inline: auto;
  padding: 12px 14px 12px 24px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 -6px 24px rgba(14, 15, 17, .1), 0 0 0 1px var(--lk-ink-200);
}

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

.lk-kb-pasek__kw {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.lk-kb-pasek__kw > span { color: var(--lk-ink-700); font-size: 16px; }

.lk-kb-pasek__kw b {
  font-family: var(--lk-font-naglowek);
  font-size: 26px;
  font-weight: 800;
}

.lk-kb-pasek .lk-pig--akcent { min-width: 280px; height: 56px; padding-inline-start: 26px; }

/* Telefon i waski ekran: cena pod nazwa, krokownik pod cena (E2-02), baner i podsumowanie jedna kolumna. */
@media (max-width: 720px) {
  .lk-kb-baner {
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .lk-kb-baner__emo { width: 44px; height: 44px; font-size: 20px; }
  .lk-kb-baner__sloty { grid-column: 1 / -1; }
  .lk-kb-pig-maly { grid-column: 1 / -1; justify-content: space-between; }

  body.woocommerce-cart .lk-kb-karta .lk-kb-poz {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px 12px;
    padding: 14px 12px;
  }

  .lk-kb-poz .lk-pk-mini { width: 48px; height: 48px; }
  body.woocommerce-cart .lk-kb-poz .lk-pk-krok { grid-column: 2; justify-self: start; }
  .lk-kb-poz .lk-pk-usun { grid-column: 2; justify-self: start; }
  .lk-kb-poz .lk-kb-cena { display: none; }
  .lk-kb-poz .lk-kb-cena-pod { display: flex; margin-block-start: 2px; }

  .lk-kb-przel {
    grid-template-columns: minmax(0, 1fr) auto 44px;
    gap: 10px;
    padding: 9px 12px;
    font-size: 14px;
  }

  .lk-kb-kupon__pasek { flex-direction: column; align-items: stretch; padding: 10px 12px 12px; }
  .lk-kb-kupon__pole .lk-kb-input { flex: 1; width: auto; min-width: 0; }

  .lk-kb-okazje .lk-pk-okazja { width: 160px; }
  .lk-kb-okazje .lk-pk-sekcja,
  .lk-kb-podsum__tyt { font-size: 19px; }

  .lk-kb-podsum { padding: 18px 16px; }
  .lk-kb-razem { flex-direction: column; align-items: stretch; }
  .lk-kb-akcje { flex-direction: column; }
  .lk-kb-akcje .lk-pig--akcent { min-width: 0; }

  .lk-kb-pasek { padding: 10px 10px 10px 16px; gap: 10px; }
  .lk-kb-pasek .lk-pig--akcent { min-width: 0; flex: 1; height: 50px; padding-inline-start: 18px; }
  .lk-kb-pasek__kw { flex-direction: column; align-items: flex-start; gap: 0; }
  .lk-kb-pasek__kw > span { font-size: 12px; }
  .lk-kb-pasek__kw b { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .lk-kb-przel__sw,
  .lk-kb-przel__sw span,
  .lk-kb.jest-przelicza > :not(.lk-kb-przeliczanie) { transition: none; }

  .lk-kb-okazje .lk-pk-okazje__tor { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   10. Platnosc: uklad strony
   -------------------------------------------------------------------------- */

/* Dwa zaproszenia nad formularzem (logowanie, kupon) sa poboczne: klient
   przyszedl tu zaplacic. Wyciszamy je do szarej belki, zeby nie konkurowaly
   kolorem z przyciskiem zaplaty. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout .woocommerce-form-login-toggle {
  margin-block-end: var(--lk-s-3);
}

body.woocommerce-checkout .woocommerce-form-coupon-toggle .lk-komunikat,
body.woocommerce-checkout .woocommerce-form-login-toggle .lk-komunikat {
  margin-block-end: 0;
  padding: var(--lk-s-3) var(--lk-s-4);
  border-color: var(--lk-linia);
  background: var(--lk-papier-2);
  color: var(--lk-tusz-2);
}

body.woocommerce-checkout .showcoupon,
body.woocommerce-checkout .showlogin {
  color: var(--lk-akcent-tekst);
  font-weight: 700;
  text-decoration: underline;
}

body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.woocommerce-form-login {
  padding: var(--lk-s-5);
  margin-block-end: var(--lk-s-5);
  background: var(--lk-papier);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-3);
}

body.woocommerce-checkout form.checkout_coupon .form-row {
  margin-block-end: 0;
}

body.woocommerce-checkout form.checkout_coupon .form-row-first,
body.woocommerce-checkout form.checkout_coupon .form-row-last {
  display: inline-block;
  width: auto;
  vertical-align: bottom;
}

body.woocommerce-checkout form.checkout_coupon .form-row-first {
  min-width: 220px;
  margin-inline-end: var(--lk-s-2);
}

/* Formularz platnosci: dane w jednej kolumnie, podsumowanie obok. */
body.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
  display: none;
}

body.woocommerce-checkout .col2-set#customer_details {
  display: block;
}

body.woocommerce-checkout .col2-set#customer_details .col-1,
body.woocommerce-checkout .col2-set#customer_details .col-2 {
  float: none;
  width: 100%;
}

body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
  margin-block-end: var(--lk-s-5);
}

/* Blok bez pol (np. wysylka przy uslugach cyfrowych) zostawialby pusta ramke. */
body.woocommerce-checkout .woocommerce-shipping-fields:not(:has(*)),
body.woocommerce-checkout .woocommerce-additional-fields:not(:has(.form-row)) {
  display: none;
}

body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  display: flex;
  align-items: center;
  gap: var(--lk-s-3);
  margin-block: 0 var(--lk-s-4);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-h3);
}

/* Numer kroku pokazujemy tylko wtedy, gdy krokow jest wiecej niz jeden. */
body.woocommerce-checkout form.checkout:has(.woocommerce-additional-fields > h3) {
  counter-reset: lk-krok;
}

body.woocommerce-checkout form.checkout:has(.woocommerce-additional-fields > h3) .woocommerce-billing-fields > h3::before,
body.woocommerce-checkout form.checkout:has(.woocommerce-additional-fields > h3) .woocommerce-additional-fields > h3::before {
  counter-increment: lk-krok;
  content: counter(lk-krok);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--lk-r-pigulka);
  background: var(--lk-akcent-tlo);
  color: var(--lk-akcent-tekst);
  font-size: var(--lk-t-maly);
  font-weight: 700;
}

/* Pola danych kupujacego ukladamy w sekcji 18 (makieta 2B). Tu zostaje blok
   uwag do zamowienia (schowany w sekcji 16c, uklad na wypadek wlaczenia). */
body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lk-s-4);
}

body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper > .form-row {
  grid-column: 1 / -1;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Etykieta nad polem (makieta 2B): 14 px, 600, #33363d, 6 px nad polem. */
body.woocommerce-checkout .woocommerce form .form-row label,
body.woocommerce-checkout form .form-row label {
  display: block;
  margin-block-end: 6px;
  font-size: var(--lk-t-maly);
  font-weight: 600;
  line-height: 1.4;
  color: var(--lk-tusz-2);
}

body.woocommerce-checkout .form-row .optional {
  color: var(--lk-przygaszony);
  font-weight: 400;
}

/* Gwiazdka pola wymaganego w kolorze z makiety (m-et b). */
body.woocommerce-checkout .form-row .required {
  color: #e5484d;
  font-weight: 600;
  text-decoration: none;
}

body.woocommerce-checkout #order_comments {
  min-height: 96px;
}

/* Zbiorczy komunikat bledu po probie zaplaty. Wpisuje go skrypt sklepu na
   poczatek formularza; ma byc widoczny pod przyklejonym naglowkiem. */
body.woocommerce-checkout .woocommerce-NoticeGroup {
  scroll-margin-block-start: var(--lk-lepki);
}

/* --------------------------------------------------------------------------
   11. Platnosc: podsumowanie zamowienia
   -------------------------------------------------------------------------- */

/* Naglowek sklepu stoi NAD karta podsumowania i rozbijal siatke dwukolumnowa.
   Tytul wypisujemy wewnatrz karty (inc/sklep-koszyk.php), tym samym napisem z
   tlumaczen sklepu, wiec ten zostaje zgaszony, a nie zdublowany. */
body.woocommerce-checkout #order_review_heading {
  display: none;
}

/* #order_review to od ukladu 1C zwykly pojemnik prawej kolumny: karta jest
   w srodku (.lk-kasa-zamowienie), a pod nia stanie oferta. liikye-woo.css
   maluje ten pojemnik szarym tlem z wypelnieniem, stad jawne zerowanie. */
body.woocommerce-checkout .woocommerce-checkout-review-order {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
  width: 100%;
  border: 0;
  border-radius: 0;
  margin: 0;
  background: transparent;
  overflow: visible;
  font-size: var(--lk-t-maly);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table th {
  display: table-cell; /* ogolna regula sklepu blokuje komorki na waskim ekranie */
  padding: var(--lk-s-3) 0;
  border: 0;
  border-block-end: 1px solid var(--lk-linia);
  background: transparent;
  text-align: start;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--lk-font-tresc);
  vertical-align: top;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name {
  font-family: var(--lk-font-naglowek);
  font-weight: 700;
  color: var(--lk-tusz);
  line-height: 1.3;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name small {
  display: block;
  margin-block-start: 2px;
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-mikro);
  font-weight: 400;
  color: var(--lk-tusz-2);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name small br:first-child {
  display: none;
}

/* Adres celu wpisuje wtyczka razem z kolorem w atrybucie style, wiec tylko
   wykrzyknik go przebija. Skracamy tez do dwoch wierszy. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name a.l {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--lk-akcent-tekst) !important;
  font-weight: 600;
  text-decoration: none;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total {
  font-family: var(--lk-font-naglowek);
  font-weight: 700;
  color: var(--lk-tusz);
  text-align: end;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   12. Platnosc: lista metod 5A (plan kasy B6, plansze K1, K11, K12, K13)
   -------------------------------------------------------------------------- */

/* JEDYNE MIEJSCE wygladu metod platnosci w kasie. Wartosci z makiety (m-metody,
   m-met, m-met--wyb, m-radio, m-znaki): lista co 10 px, wiersz 58 px, ramka
   1 px #e3e6eb, promien 14, wypelnienie 0 16; wybrany wiersz z ramka #ff5436 i
   tlem #fff2ee. Etykiete (nazwa, dopisek, znaki) wypisuje motyw w
   liikye_platnosc_nazwa_metody, a obrazek bramki zdejmuje filtrem
   liikye_platnosc_ikona_metody, wiec arkusz nie musi juz chowac obrazkow modulu
   ikon ani plikow spod uploads (dawne reguly .mk-checkout-payment-icon i
   img[src*="/uploads/"] usuniete w B6: po A3 i filtrze nic ich nie wypisuje).

   SZEROKOSC NA TELEFONIE. Wiersz byl elementem ukladu elastycznego z min-width
   auto, a dopisek nie lamal sie (nowrap), wiec dluzsza nazwa (ES
   "Criptomonedas", FR "Cryptomonnaies") rozpychala kafel i cala strone do 392 i
   405 px. Teraz lista to siatka z kolumna minmax(0, 1fr), a dopisek dostaje
   reszte wiersza i konczy sie "...". */
body.woocommerce-checkout #payment {
  margin: 0;
  padding: 0 !important; /* arkusz cleafs_smm wpisuje 10 px z wykrzyknikiem */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.woocommerce-checkout #payment ul.payment_methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
  display: block;
  position: relative;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--white);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover {
  border-color: var(--ink-300);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) {
  border-color: var(--orange-500);
  background: var(--orange-50);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:focus-visible) {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

/* Przelacznik zostaje w drzewie (klawiatura, czytnik), ale nie jest widoczny:
   kolko wyboru rysuje etykieta. Sklep i tak chowa go skryptem przy jednej
   metodzie. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > input.input-radio {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Wiersz: kolko 20 | nazwa | dopisek (reszta, "...") | znaki. Wykrzyknik przy
   display i height: arkusz cleafs_smm trzyma etykiete jako inline-block o
   wysokosci 25 px (z wyjatkiem label:first-of-type z wykrzyknikiem). 56 px
   wysokosci plus ramka 2 x 1 px daje 58 px wiersza. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label {
  display: grid !important;
  grid-template-columns: 20px auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 56px;
  height: auto !important;
  margin: 0;
  padding: 0 16px;
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
  cursor: pointer;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > label::before {
  content: "";
  grid-column: 1;
  box-sizing: border-box;
  inline-size: 20px;
  block-size: 20px;
  border: 1.5px solid var(--ink-300);
  border-radius: 50%;
  background: var(--white);
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(> input:checked) > label::before {
  border: 6px solid var(--orange-500);
}

body.woocommerce-checkout .lk-metoda__nazwa {
  grid-column: 2;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.woocommerce-checkout .lk-metoda__dopisek {
  grid-column: 3;
  min-inline-size: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--lk-font-tresc);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-600);
}

body.woocommerce-checkout .lk-metoda__znaki {
  grid-column: 4;
  display: flex;
  align-items: center;
  gap: 6px;
}

body.woocommerce-checkout .lk-metoda__znaki svg,
body.woocommerce-checkout .lk-metoda__znaki img {
  display: block;
  flex: none;
  inline-size: 34px;
  block-size: 24px;
  border-radius: 4px;
}

/* Opis bramki ("Zaplac Bitcoinem...") powtarza dopisek i rozpychal wiersz, wiec
   go nie ma. Wyjatek: bramka z wlasnymi polami (pola karty Mollie, iframe), ta
   ma je pokazac pod wierszem. Wykrzyknik: skrypt kasy rozwija blok przez
   slideDown, co wpisuje display w atrybut style. */
body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box:not(:has(input, select, textarea, iframe, .mollie-components)) {
  display: none !important;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box {
  margin: 0;
  /* Wciecie do nazwy (16 + kolko 20 + 12) po stronie poczatku wiersza, tez w AR. */
  padding-block: 0 16px;
  padding-inline: 48px 16px;
  background: transparent;
  color: var(--ink-700);
  font-size: 14px;
  line-height: 1.5;
  text-align: start;
}

body.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method > div.payment_box::before {
  content: none;
}

/* Brak dostepnych metod platnosci: komunikat, nie pusta ramka. */
body.woocommerce-checkout #payment ul.payment_methods li.woocommerce-notice {
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--lk-akcent) 25%, transparent);
  border-radius: 14px;
  background: var(--lk-akcent-tlo);
  color: var(--lk-akcent-tekst);
  font-size: var(--lk-t-maly);
}

/* --------------------------------------------------------------------------
   13. Platnosc: przycisk 6A, zgoda, stan w toku i dymek nieudanej platnosci
   -------------------------------------------------------------------------- */

/* Kolejnosc z szablonu cleafs_smm: (dymek K11), przycisk, (zdanie "w toku"),
   zgoda. Makieta m-cta: 22 px pod lista, 16 px miedzy elementami. */
body.woocommerce-checkout #payment .form-row.place-order {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
}

/* Ze skryptem noscript jest pusty, ale w ukladzie elastycznym dokladalby odstep
   16 px. Bez skryptu zostaje (przycisk przeliczenia kwot cleafs_smm). */
@media (scripting: enabled) {
  body.woocommerce-checkout #payment .form-row.place-order > noscript {
    display: none;
  }
}

/* DYMEK NIEUDANEJ PLATNOSCI (K11). Wyglad dymka pola (sekcja 25, .form-row
   .lk-blad); PHP stawia go na poczatku tego bloku (liikye_platnosc_dymek_platnosci),
   wiec 8 px pod lista metod i 22 px nad przyciskiem (dziobek do listy). */
body.woocommerce-checkout #payment .form-row.place-order > .lk-blad--platnosc {
  margin: -14px 0 6px;
}

/* Przycisk "Zaplac X" (makieta m-btn): 60 px, promien 14, Outfit 18 / 700,
   cien akcentu. Bez wersalikow (arkusz sklepu podnosil je na przyciskach) i bez
   oplywania (arkusz WooCommerce puszcza przycisk w prawo). */
body.woocommerce-checkout #place_order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  float: none;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 60px;
  margin: 0;
  padding: 8px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--orange-500);
  box-shadow: 0 8px 20px rgba(255, 84, 54, .28);
  color: var(--white);
  font-family: var(--lk-font-naglowek);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  cursor: pointer;
}

body.woocommerce-checkout #place_order:hover {
  background: var(--lk-akcent-ciemny);
  color: var(--white);
}

/* BLADY PRZYCISK (6A, makieta m-btn--blady): #ffab9c bez cienia, dopoki zgoda
   nie jest zaznaczona. Wyglad bierze sie ze stanu pola zgody, nie z atrybutu
   disabled (ustawia go skrypt cleafs_smm): bez skryptu przycisk jest blady, ale
   wysyla formularz, a serwer sam odpowie o brakujacej zgodzie. Ten sam wyglad
   ma przycisk w toku (m-btn--wtoku). */
body.woocommerce-checkout #payment .form-row.place-order:has(#terms:not(:checked)) #place_order,
body.woocommerce-checkout #place_order:disabled,
body.woocommerce-checkout #place_order.lk-w-toku {
  background: #ffab9c;
  box-shadow: none;
  opacity: 1;
  cursor: default;
}

/* Kolko w przycisku w toku (makieta m-krec): 18 px, ramka 2,5 px biala
   polprzezroczysta z bialym gornym lukiem. */
body.woocommerce-checkout #place_order .lk-krec {
  flex: none;
  box-sizing: border-box;
  inline-size: 18px;
  block-size: 18px;
  border: 2.5px solid rgba(255, 255, 255, .5);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: lk-krec 0.8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-checkout #place_order .lk-krec {
    animation-duration: 2.4s;
  }
}

/* "Nie zamykaj tej strony." pod przyciskiem w toku (makieta m-opis, srodek). */
body.woocommerce-checkout .lk-platnosc-wtoku {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-600);
  text-align: center;
}

body.woocommerce-checkout .lk-platnosc-wtoku[hidden] {
  display: none;
}

/* W toku pola sa pod nakladka WooCommerce (blockUI, z-index 1000 w formularzu),
   a przycisk, zdanie i zgoda stoja nad nia: klient widzi, co sie dzieje.
   Ponowny klik nic nie wysle (WooCommerce odrzuca wysylke w toku). */
body.woocommerce-checkout form.checkout[data-lk-w-toku] #payment .form-row.place-order {
  position: relative;
  z-index: 1002;
}

/* ZGODA pod przyciskiem (makieta m-zgoda, m-cb): kwadrat 20 px, promien 6,
   ramka 1,5 px #c6cad3; tekst 13 px #33363d 10 px od kwadratu, odnosnik
   #0e0f11 podkreslony. Tresc zgody to ustawienie sklepu (teksty prawne), motyw
   zmienia tylko wyglad. Bez gwiazdki (makieta): wymog widac po bladym
   przycisku.

   JEDNA REGULA calego pojemnika zgody (recenzja koncowa B, Minor 1).
   MARGINES: arkusz cleafs_smm odsuwa zgode o 16 px z wykrzyknikiem selektorem
   .woocommerce-checkout .woocommerce-terms-and-conditions-wrapper:has(input#terms:not([disabled]))
   (szczegolowosc 1,3,1); na kasie odstep daje uklad elastyczny wiersza (gap),
   wiec zdejmujemy go tak samo mocno. Drugi selektor (.form-row.place-order >,
   1,4,1) jest po to, zeby wygrac z wtyczka; pierwszy (1,2,1) niesie wyglad
   takze na stronie "Oplac zamowienie" (tam wiersz nie ma klasy place-order i
   16 px wtyczki zostaje jak dotad).
   WYSOKOSC: pelnej tresci regulaminu na kasie nie ma (PHP zdejmuje ja z haka),
   wiec ramka wokol niej nie ma czego rysowac. Zgoda wychodzi poza przyklejona
   karte: przyciete moglby byc akurat tekst o odstapieniu od umowy. */
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper,
body.woocommerce-checkout #payment .form-row.place-order > .woocommerce-terms-and-conditions-wrapper {
  margin: 0 !important;
  max-height: none;
  overflow: visible;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-700);
  text-align: start;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
  padding: 0;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .required {
  display: none;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox {
  gap: 10px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-700);
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-700);
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input#terms {
  flex: none;
  box-sizing: border-box;
  inline-size: 20px;
  block-size: 20px;
  margin: 0 !important; /* arkusz cleafs_smm z wykrzyknikiem */
  border: 1.5px solid var(--ink-300);
  border-radius: 6px;
  background: var(--white);
  appearance: none;
  cursor: pointer;
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input#terms:checked {
  border-color: var(--orange-500);
  background: var(--orange-500) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input#terms:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a:hover {
  color: var(--lk-akcent-tekst);
}

/* --------------------------------------------------------------------------
   14. Podziekowanie

   Od 03.11.2026 (#69) strone rysuje szablon motywu woocommerce/checkout/thankyou.php: karta stanu (znak, H1, numer
   zamowienia, zdania, przyciski), "Co dalej", zamowienie, instrukcje bramki i pomoc. Stany i teksty:
   liikye_podziekowanie_dane() w inc/sklep-koszyk.php.

   Karty i naglowki krokow sa te same co na kasie (.lk-kasa-karta i .lk-krok z sekcji 16c: emoji w szarym kolku),
   przyciski z liikye.css (.lk-przycisk--akcent tylko przy tym, co klient ma zrobic teraz, reszta --obrys). Kolory
   wylacznie z tokenow: zielony znak tylko przy oplaconym zamowieniu, czerwony tylko przy odrzuconej platnosci,
   oczekiwanie i reszta szare (ink-100). Jedna kolumna w szerokosci kontenera waskiego. Uklad stoi na wlasnosciach
   logicznych, wiec arabski dziala bez osobnego arkusza.
   -------------------------------------------------------------------------- */

/* Tytul strony ("Order received") i okruszki schodza, gdy stoi karta stanu: H1 jest w karcie i mowi, co sie dzieje
   z zamowieniem. Bez karty (formularz potwierdzenia e-maila WooCommerce) tytul zostaje. */
body.woocommerce-checkout .lk-tresc__glowna:has(.lk-pd) > .lk-okruszki,
body.woocommerce-checkout .lk-tresc__glowna:has(.lk-pd) .lk-naglowek-strony {
  display: none;
}

body.woocommerce-checkout .woocommerce-order.lk-pd {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--lk-kontener-waski);
  margin-inline: auto;
}

body.woocommerce-checkout .lk-pd__stan {
  text-align: center;
}

.lk-pd__znak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto var(--lk-s-4);
  border-radius: var(--lk-r-pigulka);
  background: var(--ink-100);
  color: var(--lk-tusz);
}

.lk-pd__znak--ok {
  background: var(--lk-sukces-tlo);
  color: var(--lk-sukces-tekst);
}

.lk-pd__znak--blad {
  background: var(--lk-blad-tlo);
  color: var(--lk-blad);
}

body.woocommerce-checkout .lk-pd__tytul {
  margin: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--lk-tusz);
  text-wrap: balance;
}

body.woocommerce-checkout .lk-pd__numer {
  display: inline-block;
  margin: var(--lk-s-3) 0 0;
  padding: 5px 12px;
  border-radius: var(--lk-r-pigulka);
  background: var(--ink-100);
  font-size: var(--lk-t-mikro);
  font-weight: 600;
  line-height: 1.4;
  color: var(--lk-tusz-2);
}

body.woocommerce-checkout .lk-pd__lid,
body.woocommerce-checkout .lk-pd__email,
body.woocommerce-checkout .lk-pd__powod,
body.woocommerce-checkout .lk-pd__drobny {
  max-width: 36em;
  margin: var(--lk-s-4) auto 0;
  text-wrap: pretty;
}

.lk-pd__lid {
  font-size: var(--lk-t-baza);
  line-height: 1.55;
  color: var(--lk-tusz-2);
}

body.woocommerce-checkout .lk-pd__email {
  margin-block-start: var(--lk-s-2);
  font-size: var(--lk-t-maly);
  line-height: 1.5;
  color: var(--lk-przygaszony);
  overflow-wrap: anywhere;
}

.lk-pd__email b {
  font-weight: 700;
  color: var(--lk-tusz);
}

/* Powod odrzucenia platnosci z cleafs_smm (dzis tylko Mollie). */
.lk-pd__powod {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--lk-blad-tlo);
  color: var(--lk-blad);
  font-size: var(--lk-t-maly);
  line-height: 1.5;
}

.lk-pd__akcje {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--lk-s-3);
  margin-block-start: var(--lk-s-5);
}

.lk-pd__akcje .lk-przycisk {
  min-inline-size: 220px;
}

.lk-pd__akcje .lk-przycisk svg {
  flex: none;
  color: var(--lk-przygaszony);
}

/* Strzalka "wstecz" wskazuje poczatek wiersza, wiec w arabskim patrzy w prawo. */
[dir="rtl"] .lk-pd__akcje .lk-przycisk svg {
  transform: scaleX(-1);
}

.lk-pd__drobny {
  font-size: var(--lk-t-maly);
  line-height: 1.5;
  color: var(--lk-przygaszony);
}

.lk-pd__link,
.lk-pd__pomoc a {
  color: var(--lk-tusz);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Co dalej: krok to emoji w szarym kolku, tytul i zdanie (kolko jak w naglowkach krokow kasy, tylko mniejsze emoji). */
body.woocommerce-checkout .lk-pd__kroki {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-pd__krok {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin: 0;
}

.lk-pd__krok-ikona {
  inline-size: 34px;
  block-size: 34px;
  line-height: 34px;
  border-radius: 50%;
  background: var(--ink-100);
  text-align: center;
  font-size: 17px;
}

.lk-pd__krok-tytul {
  display: block;
  padding-block-start: 6px;
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lk-tusz);
}

.lk-pd__krok-tekst {
  display: block;
  margin-block-start: 2px;
  font-size: var(--lk-t-maly);
  line-height: 1.5;
  color: var(--lk-przygaszony);
}

/* Zamowienie: wiersz uslugi jak w kasie (makieta 3C uproszczona): nazwa z iloscia, pod nia cel szarym w jednej linii,
   po prawej kwota. Pod lista wiersze sum WooCommerce, na koncu kwota zamowienia. */
body.woocommerce-checkout .lk-pd__pozycje {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-pd__pozycja {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lk-s-4);
  margin: 0;
  padding-block: 12px;
  border-block-end: 1px solid var(--ink-200);
}

.lk-pd__pozycja:first-child {
  padding-block-start: 0;
}

.lk-pd__pozycja-dane {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.lk-pd__pozycja-nazwa {
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lk-tusz);
}

.lk-pd__pozycja-cel {
  margin-block-start: 2px;
  overflow: hidden;
  font-size: var(--lk-t-maly);
  line-height: 1.45;
  color: var(--lk-przygaszony);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Adres celu pisze sie od lewej takze po arabsku: widac poczatek (serwis i konto), a wielokropek stoi na koncu adresu,
   nie na jego poczatku. Krotki adres zostaje przy prawej krawedzi, jak reszta wiersza. */
[dir="rtl"] .lk-pd__pozycja-cel {
  direction: ltr;
  text-align: right;
}

.lk-pd__pozycja-kwota {
  flex: none;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--lk-tusz);
  white-space: nowrap;
}

body.woocommerce-checkout .lk-pd__sumy {
  margin: 12px 0 0;
}

.lk-pd__suma {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lk-s-4);
  padding-block: 5px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--lk-tusz-2);
}

.lk-pd__suma dt,
.lk-pd__suma dd {
  margin: 0;
}

.lk-pd__suma dd {
  font-weight: 600;
  color: var(--lk-tusz);
  text-align: end;
}

.lk-pd__suma--razem {
  margin-block-start: 8px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--ink-200);
}

.lk-pd__suma--razem dt {
  font-family: var(--lk-font-naglowek);
  font-size: 17px;
  font-weight: 700;
  color: var(--lk-tusz);
}

.lk-pd__suma--razem dd {
  font-family: var(--lk-font-naglowek);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
}

/* Instrukcje bramki (hak woocommerce_thankyou_<bramka>, np. dane przelewu Mollie) w karcie, z typografia motywu. */
.lk-pd__instrukcje {
  font-size: var(--lk-t-maly);
  line-height: 1.6;
  color: var(--lk-tusz-2);
}

.lk-pd__instrukcje > :last-child {
  margin-block-end: 0;
}

body.woocommerce-checkout .lk-pd__pomoc {
  margin: var(--lk-s-2) 0 0;
  font-size: var(--lk-t-maly);
  line-height: 1.5;
  color: var(--lk-przygaszony);
  text-align: center;
}

@media (max-width: 600px) {
  body.woocommerce-checkout .lk-pd__tytul {
    font-size: 26px;
  }

  .lk-pd__akcje {
    flex-direction: column;
  }

  .lk-pd__akcje .lk-przycisk {
    inline-size: 100%;
    min-inline-size: 0;
  }
}

/* KOSZYK MA JEDNA KOLUMNE - uklad opisuje wylacznie sekcja 9b.
   Stal tu wczesniej drugi, sprzeczny uklad dwukolumnowy z 02.08 (siatka
   1fr + 340 px i przyklejone podsumowanie w kolumnie drugiej). Obie reguly
   celowaly w ten sam selektor o tej samej specyficznosci, wiec wygrywala
   pozniejsza w pliku, czyli TA - i na komputerze podsumowanie dalej stalo po
   prawej, mimo ze sekcja 9b poprawnie opisywala uklad pionowy z makiety.
   Zdjete 30.08 po ogledzinach desktopu; jesli kiedys wroci kolumna boczna,
   ma byc opisana w JEDNYM miejscu, a nie dopisana obok.

   KASA (form.checkout) MA UKLAD 1C (makieta 29.10.2026) i caly jest tutaj:
   po lewej karta .lk-kasa-lewa (dane, kreska, platnosc; sklada ja PHP),
   po prawej #order_review z karta zamowienia, przyklejona przy przewijaniu.
   Proporcje z makiety: 634 i 452 px przy odstepie 34 (kontener 1120). */
@media (min-width: 901px) {
  body.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 634fr) minmax(320px, 452fr);
    align-items: start;
    column-gap: 34px;
    row-gap: 0;
  }

  body.woocommerce-checkout form.checkout > .lk-kasa-lewa {
    grid-column: 1;
    grid-row: 1;
  }

  /* Pojemnik prawej kolumny rozciaga sie na wysokosc wiersza, zeby kolumna
     w srodku miala po czym jechac przy przewijaniu. */
  body.woocommerce-checkout form.checkout > #order_review {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
  }

  body.woocommerce-checkout .lk-kasa-prawa {
    position: sticky;
    top: var(--lk-lepki);
  }

  /* Kolumna wyzsza niz ekran (np. 8 uslug, K6) przewija sie razem ze strona:
     przyklejona chowalaby dol z kwota do zaplaty az do konca formularza.
     Atrybut ustawia assets/js/liikye-kasa.js (czesc "kolumna") po pomiarze. */
  body.woocommerce-checkout .lk-kasa-prawa[data-lk-wysoka] {
    position: relative;
    top: auto;
  }

  /* Zbiorczy blad wchodzi na poczatek formularza i przesuwa cala siatke o
     wiersz w dol - inaczej wyladowalby pod podsumowaniem. */
  body.woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-block-end: var(--lk-s-5);
  }

  body.woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > .lk-kasa-lewa,
  body.woocommerce-checkout form.checkout:has(> .woocommerce-NoticeGroup) > #order_review {
    grid-row: 2;
  }
}

/* TELEFON (makieta T1z): zamowienie na gorze jako pasek, pod nim karta danych
   i platnosci, pod przyciskiem "Zaplac" oferta (T1). W znaczniku zamowienie
   i oferta stoja PO karcie, w kolumnie #order_review > .lk-kasa-prawa; obie
   warstwy rozpuszczaja sie (display: contents), wiec karta zamowienia
   i miejsce oferty sa elementami ukladu formularza: zamowienie idzie na gore
   (order), oferta zostaje za karta danych. Atrybut stanu paska na
   .lk-kasa-prawa dalej dziala (selektory potomkow), a pojemniki nie maja tu
   wlasnego wygladu. Zbiorczy blad zostaje nad wszystkim.

   ODSTEPY STRONY Z MAKIETY (m-strona--tel .m-siatka: 20 px 16 px 40 px): pasek
   20 px pod naglowkiem, karta 40 px nad stopka kasy, 16 px od krawedzi. Strony
   tresci maja 48/64 i margines kontenera 20-40 px (liikye.css), kasa ma zaczynac
   sie od razu pod naglowkiem. Tylko kasa skupiona (bez podziekowania); naglowek
   kasy trzyma te same 16 px (liikye.css, pasek telefonu). */
@media (max-width: 900px) {
  body.lk-kasa-skupiona .lk-kontener:has(> #tresc) {
    padding-inline: 16px;
  }

  body.lk-kasa-skupiona .lk-tresc__glowna {
    padding-block: 20px 40px;
  }

  body.woocommerce-checkout form.checkout {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
    order: -2;
  }

  body.woocommerce-checkout form.checkout > #order_review,
  body.woocommerce-checkout form.checkout > #order_review > .lk-kasa-prawa {
    display: contents;
  }

  body.woocommerce-checkout form.checkout .lk-kasa-prawa > .lk-kasa-zamowienie {
    order: -1;
  }

  /* Kontrolki na palec, pola w jednej kolumnie. */
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
  body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper {
    grid-template-columns: minmax(0, 1fr);
  }

  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-first,
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row-last {
    grid-column: 1;
  }

  body.woocommerce-checkout .woocommerce-billing-fields,
  body.woocommerce-checkout .woocommerce-additional-fields,
  body.woocommerce-cart .cart-collaterals .cart_totals {
    padding: var(--lk-s-4);
  }

  body.woocommerce-checkout form.checkout_coupon .form-row-first,
  body.woocommerce-checkout form.checkout_coupon .form-row-last {
    display: block;
    width: 100%;
    min-width: 0;
    margin-inline-end: 0;
  }

  body.woocommerce-checkout form.checkout_coupon .form-row-last {
    margin-block-start: var(--lk-s-3);
  }

  body.woocommerce-checkout form.checkout_coupon button[name="apply_coupon"] {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   16c. Kasa skupiona: naglowek bez nawigacji, kroki, poprawki po ogladzie
   -------------------------------------------------------------------------- */

/* NAGLOWEK BEZ WYJSC. Klase lk-kasa-skupiona wpisuje PHP tylko na stronie
   platnosci (nie na podziekowaniu). Zostaje znak marki i napis o bezpiecznej
   platnosci; menu, jezyk, konto i koszyk znikaja, bo kazde z nich to wyjscie ze
   strony, ktora ma jedno zadanie. */
body.lk-kasa-skupiona .lk-naglowek__akcje,
body.lk-kasa-skupiona .lk-nawigacja,
body.lk-kasa-skupiona .lk-hamburger,
body.lk-kasa-skupiona .lk-okruszki,
body.lk-kasa-skupiona .woocommerce-breadcrumb {
  display: none !important;
}

/* Pasek logowania to trzecie wyjscie ze strony platnosci, obok menu i koszyka.
   Kto ma konto, zaloguje sie wczesniej albo dostanie zamowienie na e-mail: nie
   trzeba konta, zeby kupic. */
body.lk-kasa-skupiona .woocommerce-form-login-toggle {
  display: none;
}

/* Napis o bezpiecznej platnosci po prawej stronie paska, w miejscu zdjetych
   narzedzi (makieta: klodka i "Bezpieczna platnosc", 15 px, ink-700). Element
   wypisuje PHP (liikye_platnosc_napis_naglowka, hak liikye_naglowek_koniec). */
.lk-kasa-bezpieczna {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-700);
  white-space: nowrap;
}

/* NAGLOWEK WTYCZKI VAT ("Dane do platnosci") schodzi w calosci. Krok danych
   ma wlasny naglowek z PHP (liikye_platnosc_karta_start), wiec nie gasimy
   napisu stopniem pisma i nie podstawiamy tresci z CSS (KB 5001: zgaszony
   napis zostawal wezlem tekstowym i podwajal odstep). */
body.woocommerce-checkout .cleafs-billing-section > h3 {
  display: none;
}

/* KARTY KASY (uklad 1C): po lewej dane i platnosc, po prawej zamowienie.
   Wartosci z makiety (m-karta): biala, ramka 1 px ink-200, promien 20,
   wypelnienie 24 (telefon 20), cien 0 1px 2px. */
body.woocommerce-checkout .lk-kasa-karta {
  background: var(--lk-papier);
  border: 1px solid var(--ink-200);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(14, 15, 17, .06);
}

/* Kreska miedzy krokami w karcie po lewej (makieta m-rozdzielnik). */
body.woocommerce-checkout .lk-kasa-kreska {
  block-size: 1px;
  margin-block: 28px;
  background: var(--ink-200);
}

/* UWAGI DO ZAMOWIENIA precz. Przy uslugach cyfrowych nie ma czego dopisywac do
   dostawy: cel uslugi klient podal przy produkcie, a wszystko inne zalatwia
   zgloszenie po zakupie. Pole tylko wydluza strone. */
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout .woocommerce-shipping-fields {
  display: none;
}

/* NAGLOWKI KROKOW (makieta E1): emoji w szarym kolku zamiast numerow, ten sam
   znacznik dla danych, platnosci i zamowienia (liikye_platnosc_naglowek_kroku).
   Kolko 34 px, tlo ink-100, emoji 19 px; tytul Outfit 26 px / 700 #2b2f38
   (telefon 22 px). Jeden wyglad w jednej regule. */
body.woocommerce-checkout .lk-krok {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--lk-font-naglowek);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: #2b2f38;
}

body.woocommerce-checkout .lk-krok__ikona {
  flex: none;
  inline-size: 34px;
  block-size: 34px;
  line-height: 34px;
  border-radius: 50%;
  background: var(--ink-100);
  text-align: center;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 900px) {
  body.woocommerce-checkout .lk-kasa-karta {
    padding: 20px;
  }

  body.woocommerce-checkout .lk-krok {
    font-size: 22px;
  }
}

body.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price::before,
body.woocommerce-page table.shop_table_responsive tr.cart_item td.product-price::before {
  content: var(--lk-etykieta-cena, "Price") !important;
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-mikro);
  font-weight: 400;
  color: var(--lk-przygaszony);
}

/* 3. "Price" stalo OBOK kwoty zamiast nad nia, bo komorka wracala do
   display: block z arkusza responsywnego WooCommerce.

   To JEDYNA regula, ktora realnie ustawia tu uklad - ma mocniejszy selektor
   (table.shop_table_responsive) i stoi na koncu pliku, wiec bije regule bazowa
   w sekcji 4b. Zmieniasz uklad komorki ceny? Zmien go TUTAJ, inaczej poprawka
   nie zadziala i bedziesz szukal przyczyny tak jak ja 31.08.

   Uklad wierszowy z zawijaniem: etykieta "Price" bierze cala szerokosc i stoi
   nad kwotami, a cena przekreslona z pozycji gratis zostaje w JEDNEJ LINII
   z kwota (zyczenie Mateusza z 31.08). */
body.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price,
body.woocommerce-page table.shop_table_responsive tr.cart_item td.product-price {
  display: flex !important;
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 2px var(--lk-s-2);
}

body.woocommerce-cart table.shop_table_responsive tr.cart_item td.product-price::before,
body.woocommerce-page table.shop_table_responsive tr.cart_item td.product-price::before {
  flex: 0 0 100%;
  text-align: end;
}

/* --------------------------------------------------------------------------
   18. Sekcja danych kupujacego wedlug makiety
   -------------------------------------------------------------------------- */

/* SEKCJA DANYCH BEZ WLASNEJ KARTY. Od ukladu 1C dane i platnosc stoja w jednej
   karcie .lk-kasa-lewa, wiec pojemniki wtyczki VAT (.cleafs-billing-section
   i .woocommerce-billing-fields, ktoremu wtyczka daje blekitne tlo) sa tylko
   pojemnikami. */
body.woocommerce-checkout .cleafs-billing-section {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body.woocommerce-checkout .cleafs-billing-section > .woocommerce-billing-fields {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-block-end: 0;
}

/* UKLAD POL (makieta 2B, plansze K7, K9, K13): wiersze co 18 px, kolumny co
   16 px; imie i nazwisko po polowie, miasto obok kodu pocztowego (kod 210 px,
   miasto reszta), cala reszta na pelna szerokosc. Na telefonie (do 900 px)
   wszystko jedno pod drugim.

   UKLAD ELASTYCZNY Z ZAWIJANIEM, nie siatka. Wtyczka VAT i tak przestawia
   wrapper na flex (KB 4985), a wiersz z para nierowna (miasto i kod 210 px) obok
   pary rownej (imie i nazwisko) w jednej siatce wymagal dziesieciu torow i kod
   wychodzil 224 px zamiast 210. W ukladzie elastycznym miasto bierze to, co
   zostaje obok kodu, a gdy kraj nie ma kodu (wtyczka chowa pole), cala szerokosc.

   Wykrzykniki, bo arkusz wtyczki VAT wpisuje wierszom flex, szerokosc i
   margines 16 px z wykrzyknikiem (.cleafs-billing-fields .form-row). Wiersze
   wybieramy po id, bo address-i18n.js przy zmianie kraju przepisuje im klasy
   form-row-first / form-row-wide. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px 16px;
}

body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .cleafs-faktura-fields {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none;
}

/* Pola faktury (K8): ten sam rytm 18 / 16 wewnatrz bloku, ktory wtyczka
   pokazuje po zaznaczeniu znacznika. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .cleafs-faktura-fields {
  gap: 18px 16px;
}

body.woocommerce-checkout .cleafs-faktura-fields > .form-row {
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

@media (min-width: 901px) {
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_first_name_field,
  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_last_name_field {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
  }

  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_city_field {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0;
  }

  body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > #billing_postcode_field {
    flex: 0 0 210px !important;
    width: 210px !important;
  }

  /* NIP i numer VAT UE obok siebie (K8); gdy wtyczka chowa jedno z nich dla
     kraju, drugie bierze cala szerokosc. */
  body.woocommerce-checkout .cleafs-faktura-fields > #billing_wcj_checkout_field_1_field,
  body.woocommerce-checkout .cleafs-faktura-fields > #billing_eu_vat_number_field {
    flex: 1 1 calc(50% - 8px) !important;
    width: auto !important;
    min-width: 0;
  }
}

/* Podpis pod adresem e-mail (tresc dokłada PHP przez pole description).

   WooCommerce trzyma ten element jako dymek podpowiedzi i gasi go regula
   ".form-row .woocommerce-input-wrapper .description { display: none }", a
   dodatkowo oznacza aria-hidden. My uzywamy go jako STALEGO opisu pod polem
   (makieta m-opis: 6 px pod polem, 14 px, #4e525b), wiec wlaczamy go jawnie i
   zdejmujemy wyglad dymka: niebieskie tlo, biale pismo, wypelnienie i
   niebieski dziobek ::before (blad N6 z rundy 1 makiet). Gdy pod polem stoi
   dymek bledu, opis znika (makieta K7). */
body.woocommerce-checkout .form-row .woocommerce-input-wrapper .description,
body.woocommerce-checkout .form-row .description {
  display: block !important;
  margin-block-start: 6px;
  font-size: var(--lk-t-maly);
  line-height: 1.5;
  color: var(--lk-przygaszony);
  background: transparent;
  border: 0;
  padding: 0;
}

body.woocommerce-checkout .form-row .woocommerce-input-wrapper .description::before,
body.woocommerce-checkout .form-row .description::before {
  content: none;
  display: none;
}

body.woocommerce-checkout .form-row:has(.lk-blad) .woocommerce-input-wrapper .description,
body.woocommerce-checkout .form-row:has(.lk-blad) .description {
  display: none !important;
}

/* ZNACZNIK FAKTURY (makieta m-vat, m-cb): 22 px pod polami (18 px odstepu
   wierszy i 4 px), napis 15 px / 600 #1b1d21, kwadrat 20 px z ramka 1,5 px na
   szarym tle, zaznaczony w kolorze akcentu z bialym ptaszkiem. Kwadrat rysuje
   wtyczka VAT pseudoelementem etykiety (natywne pole jest ukryte), wiec
   poprawiamy jej pseudoelement; ptaszek zostaje jej. */
body.woocommerce-checkout #billing_Faktura_field {
  margin-block-start: 4px !important;
}

body.woocommerce-checkout #billing_Faktura_field label {
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-800);
}

body.woocommerce-checkout #billing_Faktura_field label::before {
  inline-size: 20px;
  block-size: 20px;
  border: 1.5px solid var(--ink-300);
  border-radius: 6px;
  background-color: var(--ink-100);
}

body.woocommerce-checkout #billing_Faktura_field label:hover::before {
  border-color: var(--orange-500);
}

body.woocommerce-checkout #billing_Faktura_field input[type="checkbox"]:checked + label::before,
body.woocommerce-checkout #billing_Faktura_field label:has(input[type="checkbox"]:checked)::before {
  border-color: var(--orange-500);
  background-color: var(--orange-500);
  background-size: 12px;
}

/* Pola wypelniaja swoj wiersz. Arkusz wtyczki wpisuje kontrolkom wlasna
   szerokosc, a wiersz bywa szerszy od kontrolki. */
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row input.input-text,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row select,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row textarea,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row .woocommerce-input-wrapper,
body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row .select2-container {
  width: 100% !important;
  max-width: 100%;
}

/* GWIAZDKA WRACA NA POLA ADRESOWE.

   WooCommerce przepisuje etykiety pol adresowych skryptem przy kazdej zmianie
   kraju (address-i18n.js podmienia "Postal code" na "Postcode / ZIP" i tak
   dalej) i przy tej podmianie ZAMIENIA <abbr class="required"> na
   <span class="required">. Warunek musi wykluczac OBA znaczniki, inaczej pola
   dostaja druga gwiazdke obok tej, ktora juz maja. Pola opcjonalne w danym
   kraju (w Polsce kod pocztowy) nie sa wymagane i gwiazdki miec nie maja -
   to poprawne zachowanie sklepu, nie brak. */
body.woocommerce-checkout .form-row.validate-required > label:not(:has(abbr)):not(:has(.required))::after {
  content: " *";
  color: #e5484d;
}

/* POLA 2B (decyzja Mateusza 29.10.2026, makieta m-v2b): szare tlo #f1f3f6 bez
   widocznej ramki, promien 14 px, wysokosc 52 px, tekst 16 px #0e0f11,
   podpowiedz #4e525b (wczesniej #9aa0ad i szarosc wtyczki, "praktycznie
   niewidoczne"). Ramka zostaje przezroczysta, zeby pole aktywne nie skakalo o
   piksel przy obwodce. Pole z bledem NIE czerwienieje: makieta K7 pokazuje sam
   dymek pod polem (liikye-kasa.js), wiec stany woocommerce-invalid i
   woocommerce-validated nie zmieniaja wygladu.

   Wykrzykniki, bo arkusz wtyczki VAT wpisuje polom tlo, ramke, cien i
   podpowiedz z wykrzyknikiem. */
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row input[type="text"],
body.woocommerce-checkout .form-row input[type="email"],
body.woocommerce-checkout .form-row input[type="tel"],
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .form-row .select2-container .select2-selection {
  border: 1px solid transparent !important;
  border-radius: var(--lk-r-2) !important;
  background: var(--ink-100) !important;
  box-shadow: none !important;
  font-size: var(--lk-t-baza);
  color: var(--ink-900);
}

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row select {
  block-size: 52px;
}

body.woocommerce-checkout .form-row input::placeholder,
body.woocommerce-checkout .form-row textarea::placeholder {
  color: var(--ink-600) !important;
  opacity: 1;
}

body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
  border-color: var(--orange-500) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px var(--orange-100) !important;
  outline: none;
}

/* Blad numeru firmy (K8) wtyczka VAT sygnalizuje wlasna czerwona ramka i
   komunikatem pod polem, bez dymka motywu; zostawiamy jej ramke. */
body.woocommerce-checkout .cleafs-company-number-error input.input-text {
  border-color: var(--red-700) !important;
}

/* Przewiniecie do pierwszego bledu (liikye-kasa.js) zatrzymuje wiersz pod
   przyklejonym naglowkiem, z 16 px oddechu. */
body.woocommerce-checkout form.checkout .form-row {
  scroll-margin-block-start: calc(var(--lk-naglowek-h) + 16px);
}

/* --------------------------------------------------------------------------
   19. Wybor kraju i wiersz promocji
   -------------------------------------------------------------------------- */

/* WYBOR KRAJU. Wtyczka VAT chowa natywny select i rysuje wlasny komponent
   (div.cleafs-cs z przyciskiem), ktory nie dziedziczy stylu pol - zmierzone na
   zywym sklepie: promien 6 px i zero krawedzi, podczas gdy sasiednie kontrolki
   maja 14 px i krawedz. Stad wrazenie, ze jedno pole odstaje od reszty.
   Od makiety 2B (29.10.2026) wyglada jak pole: szare bez ramki, 52 px, aktywne
   biale z obwodka akcentu (te same wartosci co w sekcji 18). */
body.woocommerce-checkout .cleafs-cs__trigger {
  min-block-size: 52px;
  inline-size: 100%;
  padding: 0 var(--lk-s-4);
  border: 1px solid transparent !important;
  border-radius: var(--lk-r-2) !important;
  background: var(--ink-100) !important;
  box-shadow: none !important;
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-baza);
  color: var(--ink-900);
}

body.woocommerce-checkout .cleafs-cs__trigger:focus-visible,
body.woocommerce-checkout .cleafs-cs__trigger[aria-expanded="true"] {
  border-color: var(--orange-500) !important;
  background: var(--white) !important;
  box-shadow: 0 0 0 3px var(--orange-100) !important;
  outline: none;
}

/* --------------------------------------------------------------------------
   20. Prawa kolumna na waskim ekranie
   -------------------------------------------------------------------------- */

/* Prawa kolumna: karta zamowienia, pod nia oferta (zadanie B5) z odstepem
   16 px jak w makiecie. Na telefonie odstep od karty danych daje formularz. */
body.woocommerce-checkout .lk-kolumna-podsumowania {
  display: grid;
  gap: 16px;
  margin: 0;
}

/* Tabela w karcie bez wlasnej ramki. Wtyczka VAT obrysowuje ja ramka 3 px
   z wypelnieniem regula o wadze trzech klas, stad dluzszy selektor. */
body.woocommerce-checkout .lk-kasa-zamowienie > table.shop_table.woocommerce-checkout-review-order-table {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* PASEK ZAMOWIENIA NA TELEFONIE (makieta T1z, plansze T1 i T2).
   Przycisk wypisuje PHP w wierszu tytulu, stan przelacza assets/js/liikye-kasa.js
   (atrybut data-lk-rozwiniete na .lk-kasa-prawa, aria-expanded na przycisku).
   Bez skryptu (brak klasy lk-kasa-js) pasek sie nie pokazuje, a lista zostaje
   rozwinieta pod zwyklym naglowkiem: nic nie znika bez sposobu, by to otworzyc.
   Wartosci z makiety (m-pasek-zam): zwiniety pasek to szara belka 16 px
   promienia z ramka, rozwiniety to karta, w ktorej pasek jest gora z kreska. */
body.woocommerce-checkout .lk-kasa-pasek {
  display: none;
}

@media (max-width: 900px) {
  body.woocommerce-checkout form.checkout.lk-kasa-js .lk-kasa-zamowienie .lk-krok--zamowienie {
    display: none;
  }

  body.woocommerce-checkout form.checkout.lk-kasa-js .lk-kasa-pasek {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto 16px;
    align-items: center;
    column-gap: 12px;
    inline-size: 100%;
    min-block-size: 0;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--ink-900);
    font: inherit;
    text-align: start;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
  }

  body.woocommerce-checkout .lk-kasa-pasek__tekst {
    display: grid;
    min-inline-size: 0;
    line-height: 1.3;
  }

  body.woocommerce-checkout .lk-kasa-pasek__tytul {
    overflow: hidden;
    font-family: var(--lk-font-naglowek);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-900);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.woocommerce-checkout .lk-kasa-pasek__opis {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--ink-600);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  body.woocommerce-checkout .lk-kasa-pasek[aria-expanded="true"] .lk-kasa-pasek__pokaz,
  body.woocommerce-checkout .lk-kasa-pasek[aria-expanded="false"] .lk-kasa-pasek__zwin {
    display: none;
  }

  body.woocommerce-checkout .lk-kasa-pasek__kwota {
    font-family: var(--lk-font-naglowek);
    font-size: 17px;
    font-weight: 800;
    color: var(--ink-900);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  body.woocommerce-checkout .lk-kasa-pasek__strzalka {
    color: var(--ink-700);
    transition: transform var(--dur-fast) var(--ease-standard);
  }

  body.woocommerce-checkout .lk-kasa-pasek[aria-expanded="true"] .lk-kasa-pasek__strzalka {
    transform: rotate(180deg);
  }

  /* Zwiniety: karta zamowienia staje sie szara belka, widac tylko pasek. */
  body.woocommerce-checkout form.checkout.lk-kasa-js .lk-kasa-prawa:not([data-lk-rozwiniete]) .lk-kasa-zamowienie {
    padding: 0;
    border-radius: 16px;
    background: var(--ink-50);
    box-shadow: none;
  }

  body.woocommerce-checkout form.checkout.lk-kasa-js .lk-kasa-prawa:not([data-lk-rozwiniete]) table.woocommerce-checkout-review-order-table tr:not(.lk-podsumowanie__wiersz-tytulu) {
    display: none;
  }

  /* Rozwiniety: karta jak na komputerze, pasek jest jej gora z kreska. */
  body.woocommerce-checkout form.checkout.lk-kasa-js .lk-kasa-prawa[data-lk-rozwiniete] .lk-kasa-pasek {
    margin-block-end: 14px;
    padding: 0 0 14px;
    border-block-end: 1px solid var(--ink-200);
  }
}

/* --------------------------------------------------------------------------
   21. Wiersz uslugi w podsumowaniu (makieta 3C uproszczona, plan kasy B3)
   -------------------------------------------------------------------------- */

/* ZAPAS: wiersz bez znacznika motywu (szablon wtyczki wypisuje wtedy surowy
   atrybut "ilosc" zamiast nazwy; na liikye maja go tylko szkice). Nazwa i cel
   wtyczki na cala szerokosc, cena pod nimi przy prawej krawedzi. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lk-s-2);
  padding-block: var(--lk-s-3);
  border-block-end: 1px solid var(--lk-linia);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item > td.product-name,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item > td.product-total {
  display: block;
  inline-size: 100%;
  padding-block: 0;
  border: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item > td.product-total {
  text-align: end;
  font-family: var(--lk-font-naglowek);
  font-weight: 700;
  color: var(--lk-tusz);
}

/* WIERSZ 3C (wypisuje go liikye_platnosc_opcje_pozycji, inc/sklep-koszyk.php).
   Makieta m-poz4: siatka nazwa | cena | strzalka 16 px z odstepem 12, wiersz
   14 px od gory i od dolu z kreska #e3e6eb, pierwszy bez gornego odstepu.
   Nazwa i rozwiniecie stoja w komorce nazwy, cena w drugiej komorce; komorka
   nazwy przejmuje kolumny i wiersze wiersza (subgrid), zeby cena i strzalka
   staly na wysokosci nazwy, a rozwiniecie pod cala szerokoscia. Jej wlasny
   tekst (twarda spacja szablonu za nazwa) ma rozmiar zero; kazdy element
   motywu ustawia swoj kroj. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item:has(.lk-poz) {
  grid-template-columns: minmax(0, 1fr) auto 16px;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 0;
  align-items: center;
  padding-block: 14px;
  border-block-end-color: var(--ink-200);
  cursor: pointer;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item:has(.lk-poz):not(:has(.lk-poz__strzalka)) {
  cursor: auto;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.lk-podsumowanie__wiersz-tytulu + tr.cart_item:has(.lk-poz) {
  padding-block-start: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item > td.product-name:has(> .lk-poz) {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 1 / span 2;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  column-gap: 12px; /* ten sam co w wierszu: inny odstep podsiatki rozsuwa kolumny o polowe roznicy */
  row-gap: 0;
  align-items: center;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* Cel z szablonu wtyczki: przy wierszu motywu jedno zrodlo na ekranie (cel
   wypisuje motyw z tych samych kluczy pozycji). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name:has(> .lk-poz) > small {
  display: none;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item:has(.lk-poz) > td.product-total {
  grid-column: 2;
  grid-row: 1;
  inline-size: auto;
  padding: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.woocommerce-checkout .lk-poz {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  gap: 2px;
  min-inline-size: 0;
}

/* Nazwa z iloscia: najwyzej dwie linie (makieta: "dlugie nazwy zawijaja sie
   do 2 linii"). */
body.woocommerce-checkout .lk-poz__nazwa {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

/* Cel i liczba opcji: jedna linia, "..." gdy za dluga. */
body.woocommerce-checkout .lk-poz__pod {
  overflow: hidden;
  font-family: var(--lk-font-tresc);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-600);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Cel klienta (adres, konto) ma wlasny kierunek pisma (dir=auto) i wlasne
   ucinanie: w linii arabskiej adres pisany od lewej ucinal sie od poczatku
   (widac bylo ogon bez domeny); tak "..." stoi na jego koncu w kazdym jezyku. */
body.woocommerce-checkout .lk-poz__pod > span[dir="auto"] {
  display: inline-block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

/* Strzalka 16 px (rysunek z makiety: kreska 1,6 #33363d) jako maska w kolorze
   tekstu, bo szablon przepuszcza nazwe przez wp_kses_post, ktory zdejmuje svg. */
body.woocommerce-checkout .lk-poz__strzalka {
  grid-column: 3;
  grid-row: 1;
  inline-size: 16px;
  block-size: 16px;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--ink-700);
  box-shadow: none;
  cursor: pointer;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  transition: transform var(--dur-fast) var(--ease-standard);
}

body.woocommerce-checkout .lk-poz__strzalka[aria-expanded="true"] {
  transform: rotate(180deg);
}

body.woocommerce-checkout .lk-poz__strzalka:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* Bez skryptu strzalka nic by nie robila: jej nie ma, a opcje sa rozwiniete. */
body.woocommerce-checkout form.checkout:not(.lk-kasa-js) .lk-poz__strzalka {
  display: none;
}

/* Rozwiniecie: opcje (nazwa, "w cenie" albo kwota) i komentarze wlasne.
   Zwiniete tylko ze skryptem, nic nie rozwiniete na starcie. */
body.woocommerce-checkout .lk-poz__rozw {
  display: grid;
  grid-column: 1 / -1;
  grid-row: 2;
  gap: 4px;
  margin-block-start: 8px;
  font-family: var(--lk-font-tresc);
  font-size: 14px;
  line-height: 1.4;
  cursor: auto;
}

body.woocommerce-checkout form.checkout.lk-kasa-js .lk-poz__strzalka[aria-expanded="false"] ~ .lk-poz__rozw {
  display: none;
}

body.woocommerce-checkout .lk-poz__rozw .lk-opcja {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-700);
}

body.woocommerce-checkout .lk-poz__rozw .lk-opcja__nazwa {
  min-inline-size: 0;
}

body.woocommerce-checkout .lk-poz__rozw .lk-opcja__cena {
  flex: none;
  color: var(--ink-600);
  white-space: nowrap;
}

body.woocommerce-checkout .lk-poz__komentarze {
  display: grid;
  gap: 4px;
  margin-block-start: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ink-50);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--ink-800);
  overflow-wrap: anywhere;
}

body.woocommerce-checkout .lk-poz__komentarze-tytul {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-600);
}

/* --------------------------------------------------------------------------
   22. Tabela podsumowania na pelna szerokosc karty
   -------------------------------------------------------------------------- */

/* Po przestawieniu wierszy pozycji na siatke tabela stracila swoja strukture i
   przestala wypelniac karte: silnik przestal traktowac ja jak tabele, wiec
   szerokosc liczyl z tresci, a nie ze stu procent. Skoro wiersze i tak nie sa
   juz wierszami tabeli, przestawiamy na bloki cala droge - tabele, tbody i
   pozostale wiersze - i kazdemu jawnie dajemy pelna szerokosc. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody {
  display: block;
  inline-size: 100%;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr {
  inline-size: 100%;
}

/* Wiersze bez pozycji (suma, rabat, tytul karty) nie sa siatka pozycji, wiec
   ustawiamy je osobno: opis z lewej, kwota z prawej. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr:not(.cart_item),
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lk-s-4);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr:not(.cart_item) > th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr:not(.cart_item) > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tr > th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tr > td {
  display: block;
  inline-size: auto;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tr > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr:not(.cart_item) > td {
  text-align: end;
}

/* Tytul karty to wiersz na cala szerokosc, bez dzielenia na dwie strony. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.lk-podsumowanie__wiersz-tytulu {
  display: block;
}

/* --------------------------------------------------------------------------
   23. Wiersz tytulu karty zamowienia, strona bez wielkiego naglowka
   -------------------------------------------------------------------------- */

/* Wiersz tytulu (naglowek kroku i pasek telefonu, patrz PHP) to wiersz tabeli,
   wiec zdejmujemy z komorki wszystko, co arkusz robi komorkom: kreske,
   wyrownanie do prawej z sekcji 22 i wypelnienie. Selektor powtarza pelna
   sciezke, bo regula komorek wierszy bez pozycji niesie :not(.cart_item). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-podsumowanie__wiersz-tytulu > td.lk-podsumowanie__tytul {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  text-align: start;
}

/* Wielkie "Checkout" nad kolumnami schodzi ze strony platnosci. */
body.lk-kasa-bez-tytulu .lk-naglowek-strony,
body.lk-kasa-bez-tytulu .lk-naglowek-strony__tytul {
  display: none;
}

/* --------------------------------------------------------------------------
   24. Stopka kasy
   -------------------------------------------------------------------------- */

/* Zamiast pelnej stopki sklepu jedna linijka linkow prawnych i dane firmy
   (makieta m-stopka-kasy; znacznik: liikye_platnosc_stopka, footer.php).
   Kreska 1 px ink-200, pismo 13 px ink-600, linki 600 ink-800, wysrodkowane. */
.lk-stopka-kasy {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 16px 28px;
  border-block-start: 1px solid var(--ink-200);
  background: var(--lk-papier);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-600);
}

.lk-stopka-kasy__linki {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
  font-weight: 600;
}

.lk-stopka-kasy__linki a {
  color: var(--ink-800);
  text-decoration: none;
}

.lk-stopka-kasy__linki a:hover,
.lk-stopka-kasy__linki a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lk-stopka-kasy__firma {
  max-inline-size: 1120px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   25. Bledy pol: dymek pod polem (makieta K7 i T4, plan kasy B2)
   -------------------------------------------------------------------------- */

/* Dymek buduje liikye-kasa.js z odpowiedzi serwera (li[data-id]) w elemencie
   p.checkout-inline-error-message WooCommerce. Wyglad jak dymki strony produktu
   (makieta m-blad): jasnoczerwone tlo, wykrzyknik w bialym kolku, dziobek
   wskazujacy pole nad dymkiem. */
body.woocommerce-checkout .form-row .lk-blad {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin: 8px 0 0;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--red-50);
  color: var(--ink-900);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

body.woocommerce-checkout .form-row .lk-blad::before {
  content: "";
  position: absolute;
  inset-inline-start: 20px;
  top: -6px;
  inline-size: 12px;
  block-size: 12px;
  border-radius: 2px;
  background: var(--red-50);
  transform: rotate(45deg);
}

body.woocommerce-checkout .lk-blad__ikona {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--white);
  font-size: 12px;
  font-style: normal;
  line-height: 26px;
  text-align: center;
}

body.woocommerce-checkout .lk-blad__tekst {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* Lista bledow u gory zostaje dla czytnikow ekranu (role=alert), ale nie na
   ekranie: cala, gdy kazdy blad stoi przy polu, inaczej same pozycje
   przeniesione do dymkow. Klasy dopisuje skrypt, wiec bez niego lista
   WooCommerce zostaje widoczna. */
body.woocommerce-checkout .woocommerce-NoticeGroup.lk-bledy-przy-polach,
body.woocommerce-checkout .woocommerce-NoticeGroup li.lk-blad-zrodlo {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   26. Suma kasy: wiersze R1, "Do zaplaty" 4C, platnosc jednorazowa (plan kasy B4)
   -------------------------------------------------------------------------- */

/* Wartosci z makiety (m-suma-r, m-suma-r-w, m-suma-r-w--zysk, m-suma-c,
   m-jednoraz, m-gratis). Wiersze nad kwota: 15 px #33363d, pierwszy ("Uslugi")
   16 px pod lista, kolejne co 8 px; oszczednosci zielone 600 z minusem. Wiersze
   "Uslugi" i promocji wypisuje liikye_platnosc_wiersze_r1 (inc/sklep-koszyk.php),
   kod, oplaty i podatek szablon WooCommerce: wygladaja tak samo. Selektory
   z "> tbody >" i klasa wiersza, bo regula wierszy bez pozycji (sekcja 22)
   ma te sama sciezke z :not(.cart_item). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-r1,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.cart-discount,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.fee,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.tax-rate,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.tax-total {
  align-items: baseline;
  gap: 12px;
  padding: 8px 0 0;
  border: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-r1--uslugi {
  padding-block-start: 16px;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-r1--zysk,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.cart-discount {
  font-weight: 600;
  color: var(--lk-sukces-tekst);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-r1 > *,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.cart-discount > *,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.fee > *,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.tax-rate > *,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.tax-total > * {
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-r1 > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.cart-discount > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.fee > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.tax-rate > td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.tax-total > td {
  white-space: nowrap;
}

/* "Do zaplaty" i kwota: wiersz 22 px pod ostatnim wierszem nad nim, napis
   16 px / 700 po lewej, kwota Outfit 44 px / 800 po prawej, wysrodkowane.
   Rozmiar kwoty siedzi na komorce (interlinia 1), zeby linia komorki miala
   dokladnie wysokosc cyfr. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.order-total {
  align-items: center;
  gap: 12px;
  padding: 22px 0 0;
  border: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.order-total > th {
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-900);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.order-total > td {
  padding: 0;
  border: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  white-space: nowrap;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.order-total > td strong {
  font-weight: inherit;
}

@media (max-width: 900px) {
  body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.order-total > td {
    font-size: 38px;
  }
}

/* Pod kwota kreska i tarcza w szarym kolku 26 px (emoji 12 px) z napisem
   13,5 px / 600 #33363d; kolko lekko w gore, zeby stalo na wysokosci
   pierwszej linii napisu. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-jednoraz {
  display: block;
  margin-block-start: 14px;
  padding: 12px 0 0;
  border: 0;
  border-block-start: 1px solid var(--ink-200);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-jednoraz > td {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 0;
  border: 0;
  text-align: start;
  font-family: var(--lk-font-tresc);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink-700);
}

/* Na waskim ekranie liikye-woo.css daje kazdej komorce kasy etykiete z
   data-title (::before); tu bylaby pustym elementem siatki, ktory spycha
   kolko i napis o jedna kolumne. */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table > tbody > tr.lk-jednoraz > td::before {
  content: none;
}

body.woocommerce-checkout .lk-jednoraz__ikona {
  inline-size: 26px;
  block-size: 26px;
  margin-block-start: -3px;
  border-radius: 50%;
  background: var(--ink-100);
  font-size: 12px;
  font-style: normal;
  line-height: 26px;
  text-align: center;
}

/* Usluga oddana w promocji: przekreslona cena szara 500 i zielone "Gratis"
   700 (napis wypisuje liikye_platnosc_cena_gratisu). Szarosc #4e525b, a nie
   #6b7080 z makiety: najslabsza szarosc na tekscie w kasie to #4e525b
   (Global Constraints planu, rozstrzygniecie kontrolera). */
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item > td.product-total del {
  color: var(--ink-600);
  font-weight: 500;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table .lk-gratis {
  color: var(--lk-sukces-tekst);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   27. Oferta "Wybrane dla Ciebie" (plan kasy B5, plansze K1, K2, T1, T3)
   -------------------------------------------------------------------------- */

/* Miejsce oferty jest zawsze w znaczniku (fragment odswiezenia kasy), puste
   bez oferty: wtedy nie bierze udzialu w ukladzie, bo dokladaloby odstep
   kolumny (16 px) albo formularza na telefonie. Bez skryptu przycisk nic by
   nie zrobil, wiec karta pokazuje sie dopiero z klasa lk-kasa-js. */
body.woocommerce-checkout .lk-kasa-oferta-miejsce:empty,
body.woocommerce-checkout .lk-kasa-doplata-miejsce:empty,
body.woocommerce-checkout form.checkout:not(.lk-kasa-js) .lk-kasa-oferta-miejsce,
body.woocommerce-checkout form.checkout:not(.lk-kasa-js) .lk-kasa-doplata-miejsce {
  display: none;
}

/* Doplata: ta sama karta w swoim miejscu, nad oferta. Kilka ofert stoi jedna
   pod druga z odstepem kolumny. */
body.woocommerce-checkout .lk-kasa-doplata-miejsce {
  display: grid;
  gap: 16px;
}

/* Baner 3 w cenie 2 (wtyczka) nad kartami: odstep daje uklad rodzica, jak
   przy kartach, wiec jego dolny margines wtyczki schodzi. */
body.woocommerce-checkout .lk-kasa-prawa > .cleafs-smm-checkout-banner {
  margin: 0;
}

/* Karta z makiety (m-ox): biala, ramka, promien 16, wypelnienie 18, odstep 14.
   Odstep od karty zamowienia (komputer) i od karty danych (telefon) daje
   uklad rodzica (16 px), karta nie ma marginesu. */
body.woocommerce-checkout .lk-oferta {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--ink-200);
  border-radius: 16px;
  background: var(--white);
}

body.woocommerce-checkout .lk-oferta p {
  margin: 0;
}

/* Etykieta "Wybrane dla Ciebie" (m-ox-h3): 13 px / 800, wersaliki, zielona. */
body.woocommerce-checkout .lk-oferta__etykieta {
  font-family: var(--lk-font-tresc);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lk-sukces-tekst);
}

/* Miniatura 64 px obok nazwy (m-ox-prod, m-ox .m-min). */
body.woocommerce-checkout .lk-oferta__produkt {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

body.woocommerce-checkout .lk-oferta__produkt--bez-miniatury {
  grid-template-columns: minmax(0, 1fr);
}

body.woocommerce-checkout .lk-oferta__miniatura {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  box-sizing: border-box;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--white);
}

body.woocommerce-checkout .lk-oferta__obrazek {
  display: block;
  inline-size: 44px;
  block-size: 44px;
  object-fit: contain;
}

body.woocommerce-checkout .lk-oferta__nazwa {
  min-inline-size: 0;
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-900);
}

body.woocommerce-checkout .lk-oferta__nazwa-tekst {
  font: inherit;
}

/* "Do Twojego posta/konta ..." w jednej linii. Cel klienta ma wlasny kierunek
   pisma i wlasne ucinanie (jak w liscie uslug), wiec "..." stoi na koncu
   adresu takze w linii arabskiej; napis przed nim sie nie kurczy. */
body.woocommerce-checkout .lk-oferta__cel {
  display: flex;
  column-gap: .3em;
  margin-block-start: 2px;
  overflow: hidden;
  font-family: var(--lk-font-tresc);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-600);
  white-space: nowrap;
  text-overflow: ellipsis;
}

body.woocommerce-checkout .lk-oferta__cel > span[dir="auto"] {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Opcje, ktore cena doplaty zawiera: jedna mala linia pod celem, "..." gdy za
   dluga. */
body.woocommerce-checkout .lk-oferta__opcje {
  display: block;
  margin-block-start: 2px;
  overflow: hidden;
  font-family: var(--lk-font-tresc);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-600);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Ceny (m-ox-c1): cena 26 px, przekreslona stara 15 px, zielone "Taniej o".
   Stara cena #4e525b zamiast #6b7080 z generatora: najslabsza szarosc na
   tekscie w kasie (Global Constraints), jak przekreslenie gratisu w B4. */
body.woocommerce-checkout .lk-oferta__ceny {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-variant-numeric: tabular-nums;
}

body.woocommerce-checkout .lk-oferta__cena {
  font-family: var(--lk-font-naglowek);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink-900);
}

body.woocommerce-checkout .lk-oferta__stara {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-600);
}

body.woocommerce-checkout .lk-oferta__taniej {
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  color: var(--lk-sukces-tekst);
}

/* Przycisk na cala szerokosc (m-ox-b1): 50 px, promien 12, zielony. */
body.woocommerce-checkout .lk-oferta__dodaj {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 50px;
  min-block-size: 0;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--lk-sukces-tekst);
  box-shadow: none;
  color: var(--white);
  font-family: var(--lk-font-naglowek);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

/* Napis i kwota w jednym elemencie przycisku: jako osobne elementy ukladu
   elastycznego tracily spacje miedzy soba ("+ Add for" sklejone z kwota w euro, bez spacji). */
body.woocommerce-checkout .lk-oferta__dodaj-tekst,
body.woocommerce-checkout .lk-oferta__dodaj .woocommerce-Price-amount {
  color: inherit;
}

body.woocommerce-checkout .lk-oferta__dodaj:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

body.woocommerce-checkout .lk-oferta__dodaj:disabled {
  cursor: progress;
}

/* Komunikat wtyczki, gdy dodanie sie nie udalo (tekst z odpowiedzi serwera). */
body.woocommerce-checkout .lk-oferta__blad {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--lk-blad);
}

/* Usluga dodana jako oferta (m-dodana-et, m-usun): etykieta nad nazwa,
   "Usun" pod celem. */
body.woocommerce-checkout .lk-poz__et {
  justify-self: start;
  margin-block-end: 2px;
  font-family: var(--lk-font-tresc);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lk-sukces-tekst);
}

body.woocommerce-checkout .lk-poz__usun {
  justify-self: start;
  margin-block-start: 4px;
  font-family: var(--lk-font-tresc);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink-600);
  text-decoration: underline;
}

body.woocommerce-checkout .lk-poz__usun:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* Po dodaniu oferty na telefonie skrypt przewija do zamowienia: pod
   przyklejonym naglowkiem, nie pod nim. */
body.woocommerce-checkout .lk-kasa-zamowienie {
  scroll-margin-block-start: var(--lk-lepki);
}