/* ==========================================================================
   Liikye - menu na telefonie i wysuwany podglad koszyka

   Menu na telefonie (pelny ekran pod paskiem) i wysuwany podglad koszyka (panel z boku). Oba zamyka klawisz Escape, oba oddaja skupienie
   temu, co je otworzylo. Uklad stoi na wlasnosciach logicznych, wiec po arabsku lustro nie wymaga osobnych regul (poza kierunkiem
   transform, patrz liikye-naglowek-rtl.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Zaslona wspolna dla obu paneli
   -------------------------------------------------------------------------- */

/* z-index 110: zaslona lezy NAD paskiem menu (.lk-naglowek ma 100), wiec przy otwartym koszyku przyciemniona jest cala strona razem
   z menu (forma 1B). Panel koszyka ma 111. Menu na telefonie zaslony nie uzywa (otwiera sie z opcja zaslona: false). */
.lk-zaslona {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(14, 15, 17, .5);
  opacity: 0;
  transition: opacity var(--lk-czas) var(--lk-ease);
}

.lk-zaslona.jest-widoczna { opacity: 1; }

/* --------------------------------------------------------------------------
   2. Menu na telefonie i tablecie (do 900 px): pelny ekran POD paskiem (forma 3A, plansze k-m1 .. k-m8)

   Pasek z logo, lupa, koszykiem i przyciskiem menu zostaje na wierzchu, a przycisk menu zmienia sie w X (assets/css/liikye.css,
   .lk-hamburger[aria-expanded="true"]). Panel zaczyna sie tuz pod paskiem (61 px albo dolna krawedz paska, gdy nad nim stoi pasek
   promocyjny: skrypt wpisuje --lk-menu-gora przy otwarciu), zajmuje cala szerokosc i dol ekranu, jest bialy, bez cienia i bez wlasnej
   gory (logo i zamkniecie sa w pasku). Zamkniety jest display:none: zero pikseli, poza kolejnoscia Tab i drzewem dostepnosci, a obrazki
   znakow platform (loading="lazy") nie sa pobierane, dopoki menu nie zostanie otwarte (na telefonie to ruch kazdej strony).
   Uklad stoi na wlasnosciach logicznych, wiec po arabsku lustro nie wymaga osobnych regul.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .lk-nawigacja {
    position: fixed;
    inset-block: var(--lk-menu-gora, 61px) 0;
    inset-inline: 0;
    z-index: 95;
    display: none;
    flex-direction: column;
    width: auto;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink-50);
    opacity: 0;
    transition: opacity var(--lk-czas) var(--lk-ease);
  }

  /* display z allow-discrete: panel znika dopiero po wygasnieciu (przegladarki bez tej wlasciwosci pomijaja ten wiersz, panel znika od razu). */
  @supports (transition-behavior: allow-discrete) {
    .lk-nawigacja {
      transition: opacity var(--lk-czas) var(--lk-ease), display var(--lk-czas) allow-discrete;
    }
  }

  .lk-nawigacja.jest-otwarte {
    display: flex;
    opacity: 1;
  }

  @starting-style {
    .lk-nawigacja.jest-otwarte { opacity: 0; }
  }

  /* Tresc: 20 px od gory i 16 px od bokow, jak szary dol menu (.lk-menu-dol); panel jest szary na cala wysokosc, wiec biala grupa platform i biale
     grupy dolu stoja na jednym tle, a odstep miedzy nimi robi gorny padding dolu. */
  .lk-menu-sekcja {
    padding: var(--gutter-mobile) 16px 0;
  }

  .lk-menu-sekcja__tytul {
    margin-block-end: var(--lk-s-3);
    font-family: var(--lk-font-naglowek);
    font-size: var(--lk-t-mikro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--lk-przygaszony);
  }

  /* Pozycje menu glownego: duze, jedna pod druga. */
  .lk-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }

  .lk-menu__pozycja--poziom-1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-block-end: 1px solid var(--lk-linia);
  }

  .lk-menu__pozycja--poziom-1:last-child { border-block-end: 0; }

  .lk-menu__link {
    flex: 1;
    min-height: var(--lk-tap-min);
    display: flex;
    align-items: center;
    padding: var(--lk-s-3) 0;
    font-family: var(--lk-font-naglowek);
    font-size: var(--lk-t-duzy);
    font-weight: 700;
    color: var(--lk-tusz);
    border-radius: 0;
  }

  .lk-menu__link:hover,
  .lk-menu__pozycja.current-menu-item > .lk-menu__link {
    background: transparent;
    color: var(--lk-akcent-tekst);
  }

  /* Rozwijanie obsluguje CALY kafelek, nie sama strzalka: trafienie palcem
     w ikone szerokosci 44 px to loteria, a wiersz ma pelna szerokosc panelu.
     Strzalka zostaje jako wskaznik stanu i cel dla klawiatury, ale przestaje
     wygladac jak jedyny przycisk. */
  .lk-menu__pozycja--rozwijana > .lk-menu__link {
    pointer-events: none;
  }

  .lk-menu__strzalka {
    width: 40px;
    height: var(--lk-tap-min);
    border: 0;
    background: transparent;
    color: var(--lk-przygaszony);
  }

  .lk-menu__pozycja--rozwijana.jest-otwarte > .lk-menu__link,
  .lk-menu__pozycja--rozwijana.jest-otwarte > .lk-menu__strzalka {
    color: var(--lk-akcent-tekst);
  }

  .lk-menu__podmenu {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    margin-block-end: var(--lk-s-3);
    padding: var(--lk-s-2);
    border: 0;
    border-radius: var(--lk-r-1);
    background: var(--lk-papier-2);
    box-shadow: none;
  }

  .lk-menu__podmenu .lk-menu__link {
    min-height: 44px;
    padding-inline: var(--lk-s-3);
    font-size: var(--lk-t-baza);
    font-weight: 600;
  }

  /* Uslugi na telefonie to osobna pozycja z lista platform (forma 4C, inc/nav.php: liikye_nav_menu_tel_html()); wiersz platformy otwiera jej drugi
     ekran (.lk-menu-platforma, nizej). Okienko
     komputera (.lk-mega) jest do 900 px niewidoczne razem z cala swoja pozycja. Wyspecyfikowane przez .lk-menu, zeby wygrac z
     .lk-menu__pozycja--poziom-1 { display: flex } wyzej. */
  .lk-menu .lk-menu__pozycja--uslugi { display: none; }

  .lk-menu .lk-menu__pozycja--uslugi-tel {
    display: block;
    border-block-end: 0;
  }

  .lk-menu-tel {
    display: flex;
    flex-direction: column;
  }

  /* Etykieta sekcji (plansze: .etk 12 px, waga 700, rozstrzelone litery, #6b7080, 8 px odstepu). Po arabsku bez rozstrzelenia i 13 px. */
  .lk-menu-tel__etykieta {
    margin: 0 0 8px;
    font-family: var(--lk-font-tresc);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-500);
  }

  /* Wiersz platformy to ten sam wiersz co w dole menu (.lk-menu-wiersz: 50 px, padding 0 14, ikona 30 px, nazwa, szara wartosc, chevron), w bialej
     grupie .lk-menu-grupa; liczba uslug jest "wartoscia" jak "English" w wierszu jezyka. Znak platformy stoi w kwadracie ikony 30 x 30 (promien 9),
     wiec wszystkie ikony pierwszego ekranu maja jeden lewy brzeg. Wiersz otwiera drugi ekran platformy, niczego nie rozwija. */
  .lk-menu-wiersz__ikona--platforma {
    background: none;
    color: var(--lk-tusz);
  }

  .lk-menu-wiersz__ikona--platforma img,
  .lk-menu-wiersz__ikona--platforma svg,
  .lk-menu-wiersz__ikona--platforma .lk-glif {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 9px;
  }

  /* Pozycje menu WordPressa (Deals, Contact) stoja na telefonie w dole menu (forma 5B), wiec ich kopia w liscie jest ukryta. Wyspecyfikowane
     przez .lk-menu, zeby wygrac z .lk-menu__pozycja--poziom-1 { display: flex } wyzej. */
  .lk-menu .lk-menu__pozycja--wp { display: none; }

  /* --------------------------------------------------------------------------
     Dol menu, forma 5B (plansze k-m1, k-m2, k-m7, k-m8; dol_menu() w generuj.py): szare tlo na cala szerokosc panelu (padding 18 16 28),
     w nim dwie biale grupy wierszy o promieniu 14 w odstepie 14 (Deals i Contact; konto i jezyk), jak w Ustawieniach iPhone. Przy krotkiej
     tresci dol jest dosuniety do dolu panelu (margin-block-start: auto), przy dlugiej jest na koncu przewijanej tresci.
     -------------------------------------------------------------------------- */
  .lk-menu-dol {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-block-start: auto;
    padding: 18px 16px 28px;
    background: var(--ink-50);
    /* Jedyny nowy kolor tego zadania: tlo ikony Contact. */
    --lk-ikona-kontakt: #2f6fed;
  }

  .lk-menu-grupa {
    overflow: hidden;
    border-radius: 14px;
    background: var(--lk-papier);
  }

  /* Wiersz: 50 px, padding 0 14, odstep 12, linia 1 px nad wierszem poza pierwszym w grupie. Ten sam wiersz jest linkiem (Deals, Contact, konto,
     jezyk na ekranie jezyka) i przyciskiem (wiersz jezyka w menu). */
  .lk-menu-wiersz {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 50px;
    margin: 0;
    padding: 0 14px;
    border: 0;
    border-block-start: 1px solid var(--ink-200);
    border-radius: 0;
    background: none;
    color: var(--lk-tusz);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
  }

  .lk-menu-grupa > .lk-menu-wiersz:first-child,
  .lk-menu-tel__platforma:first-child > .lk-menu-wiersz { border-block-start: 0; }

  .lk-menu-wiersz:active { background: var(--ink-100); }

  .lk-menu-wiersz:focus-visible {
    outline: 2px solid var(--lk-akcent);
    outline-offset: -2px;
  }

  /* Kwadrat ikony 30 x 30 o promieniu 9 z biala ikona 18 px; pole flagi jest bez tla (flaga 26 x 20 w srodku pola). */
  .lk-menu-wiersz__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    color: var(--lk-papier);
  }

  .lk-menu-wiersz__ikona svg,
  .lk-menu-wiersz__ikona .lk-flaga { display: block; }

  .lk-menu-wiersz__ikona--metka { background: var(--lk-akcent); }
  .lk-menu-wiersz__ikona--czat { background: var(--lk-ikona-kontakt); }
  .lk-menu-wiersz__ikona--konto { background: var(--lk-tusz); }
  .lk-menu-wiersz__ikona--flaga { background: none; color: var(--lk-tusz); }

  .lk-menu-wiersz__nazwa {
    flex: 1;
    min-width: 0;
    font-family: var(--lk-font-naglowek);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--lk-tusz);
  }

  .lk-menu-wiersz__wartosc {
    font-family: var(--lk-font-tresc);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--ink-500);
  }

  .lk-menu-wiersz__strzalka {
    display: flex;
    flex: none;
    color: var(--ink-400);
  }

  .lk-menu-wiersz__strzalka svg { display: block; }

  /* --------------------------------------------------------------------------
     Drugie ekrany menu (ekran jezyka, plansza k-m6; ekrany platform od 0.19.1, forma 4C): ten sam panel, inna tresc. Skrypt ustawia
     data-lk-ekran na nawigacji ("jezyk" albo "platforma"; platforma dodatkowo klase jest-aktywny na wybranym ekranie): znika lista platform
     i dol, pojawia sie "< Menu", tytul i biala grupa wierszy na szarym tle. Ekran jezyka i ekrany platform dziela wyglad (.lk-menu-ekran).
     -------------------------------------------------------------------------- */
  .lk-menu-ekran {
    display: none;
    padding: 8px 16px 28px;
  }

  .lk-nawigacja[data-lk-ekran] > .lk-menu-sekcja,
  .lk-nawigacja[data-lk-ekran] > .lk-menu-dol { display: none; }

  .lk-nawigacja[data-lk-ekran="jezyk"] > .lk-menu-jezyk,
  .lk-nawigacja[data-lk-ekran="platforma"] > .lk-menu-platforma.jest-aktywny { display: block; }

  .lk-menu-ekran__wstecz {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 44px;
    margin: 0;
    margin-inline-start: -6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--lk-akcent-tekst);
    font-family: var(--lk-font-naglowek);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }

  .lk-menu-ekran__wstecz svg {
    display: block;
    flex: none;
  }

  .lk-menu-ekran__wstecz:focus-visible {
    outline: 2px solid var(--lk-akcent);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .lk-menu-ekran__tytul {
    margin: 6px 4px 16px;
    font-family: var(--lk-font-naglowek);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lk-tusz);
  }

  .lk-menu-jezyk__wiersz .lk-flaga {
    display: block;
    flex: none;
  }

  .lk-menu-jezyk__nazwa,
  .lk-menu-platforma__nazwa {
    flex: 1;
    min-width: 0;
    font-family: var(--lk-font-tresc);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--lk-tusz);
  }

  .lk-menu-jezyk__wiersz.jest-wybrany .lk-menu-jezyk__nazwa { font-weight: 700; }

  /* Arabska nazwa jezyka stoi na ekranie jezyka KAZDEGO jezyka (takze na stronach lacinskich, gdzie liikye-rtl.css sie nie laduje): kroj
     zastepczy z size-adjust jest skalibrowany pod lacine i zmniejsza arabskie litery o ok. 21 procent wzgledem planszy k-m6 (jak przy liscie
     jezykow w pasku komputera, liikye.css). Lacinski kroj pierwszy, dalej kroj systemowy w rzeczywistym rozmiarze. */
  .lk-menu-jezyk__wiersz[lang="ar"] .lk-menu-jezyk__nazwa {
    font-family: "Liikye Text", ui-sans-serif, system-ui, sans-serif;
  }

  .lk-menu-jezyk__ptaszek {
    display: flex;
    flex: none;
    color: var(--lk-akcent);
  }

  .lk-menu-jezyk__ptaszek svg { display: block; }

  /* Ekran platformy: tytul to znak platformy 28 px (jak w wierszu listy) i nazwa; wiersz uslugi to .lk-menu-wiersz (50 px, chevron w prawo jak
     w dole menu) z ikona kreskowa w polu 22 px (#4e525b) i krotka nazwa uslugi; pod bialej grupy link do strony platformy w akcencie. */
  .lk-menu-platforma__tytul {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .lk-menu-platforma__znak {
    display: block;
    flex: none;
    width: 28px;
    height: 28px;
  }

  .lk-menu-platforma__znak img,
  .lk-menu-platforma__znak svg,
  .lk-menu-platforma__znak .lk-glif {
    display: block;
    width: 28px;
    height: 28px;
    margin: 0;
    border-radius: 9px;
  }

  .lk-menu-platforma__ikona {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 22px;
    color: var(--ink-600);
  }

  .lk-menu-platforma__ikona svg { display: block; }

  .lk-menu-platforma__wszystkie {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-block-start: 8px;
    padding: 0 14px;
    color: var(--lk-akcent-tekst);
    font-family: var(--lk-font-naglowek);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
  }

  .lk-menu-platforma__wszystkie svg { display: block; flex: none; }

  .lk-menu-platforma__wszystkie:focus-visible {
    outline: 2px solid var(--lk-akcent);
    outline-offset: -2px;
    border-radius: 12px;
  }

  /* Elementy naglowka, ktore na telefonie mieszkaja w panelu, a nie w pasku. */
  .lk-naglowek__akcje .lk-jezyki,
  .lk-naglowek__akcje .lk-waluty,
  .lk-naglowek__akcje .lk-konto { display: none; }

  /* Na pasku zostaja lupa wyszukiwarki i koszyk, a za nimi (poza akcjami) przycisk menu: trzy przyciski 44x44 stykaja sie bez
     odstepow (plansze k-t1 .. k-t5, pasek 1A; dawny odstep 8 px z planszy Liikye-tel zdjety). Odstep zalatwiaja same cele
     dotkniecia, a pole wokol ikony ma 10 px. */
  .lk-naglowek__akcje { gap: 0; }
}

/* Ruch ograniczony: panel menu nie ma opoznienia zamkniecia (display schodzi razem z przezroczystoscia), a regula globalna
   (assets/css/liikye.css, blok prefers-reduced-motion) sciaga czas przejscia do .01 ms, wiec nie potrzeba tu osobnej reguly. */

@media (min-width: 901px) {
  .lk-menu-dol,
  .lk-menu-ekran,
  .lk-menu__pozycja--uslugi-tel { display: none; }
}

/* --------------------------------------------------------------------------
   3. Panel koszyka: plywajaca karta nad paskiem menu (forma 1B, plansze E1-01, E1-02, E1-13, E1-14 makiet mini koszyka)

   Karta stoi 12 px od gory, prawej i dolu okna (telefon 8 px), ma promien 28 px (telefon 24 px) i lezy NAD paskiem menu: z-index panelu
   i zaslony jest wyzszy niz .lk-naglowek (100), wiec przyciemniona jest cala strona razem z menu. Naglowek panelu (tytul, pastylka z liczba
   uslug, okragle zamkniecie) stoi na miejscu, srodek przewija sie sam, a stopka z suma i przyciskami jest zawsze widoczna.
   Podzial wnetrza (kontrakt dla zawartosci panelu z woocommerce/cart/mini-cart.php):
     .lk-panel-koszyk__tresc    schowek na jeden ekran naraz (tresc, pusty, szkielet albo blad), sam sie nie przewija
     .lk-panel-koszyk__ekran    jeden ekran; bez stopki przewija sie w calosci (tak jak do tej pory), ze stopka nie przewija sie wcale
       .lk-panel-koszyk__przewijane   srodek ekranu ze stopka: przewija sie sam
       .lk-panel-koszyk__stopka       dol ekranu: suma i przyciski, zawsze widoczny
   -------------------------------------------------------------------------- */

.lk-panel-koszyk {
  position: fixed;
  inset-block: 12px;
  inset-inline-end: 12px;
  z-index: 111;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 16px));
  overflow: hidden;
  border-radius: 28px;
  background: var(--lk-papier);
  box-shadow: var(--lk-cien-3);
  color: var(--lk-tusz);
  font-family: var(--lk-font-tresc);
  font-size: 15px;
  line-height: 1.4;
  /* Zamkniety zjezdza poza ekran razem z odstepem karty (100% szerokosci + 2 x 12 px), zeby nie zostawal pasek cienia. */
  transform: translateX(calc(100% + 24px));
  /* Zamkniety: visibility:hidden dopiero PO zjezdzie (transition-delay = czas przejscia transform) - ten sam
     mechanizm naprawy co panel menu (zadanie 9.7, #1262 i #1256), teraz na koszyku (zadanie 9.8). PHP renderuje
     atrybut hidden na sztywno w znaczniku (inc/naglowek.php), wiec swiezy load i stan >=300ms po zamknieciu sa
     bezpieczne bez zadnej zmiany tutaj ([hidden]{display:none!important} w liikye.css wygrywa niezaleznie od
     visibility - waznosc bije specificznosc). Bez tej reguly artefakt byl widoczny WYLACZNIE w oknie animacji
     zamkniecia: JS zdejmuje klase jest-otwarty od razu (zamknij() w assets/js/liikye-naglowek.js), a atrybut
     hidden dostaje dopiero po wlasnym timerze 300ms - przez ten czas (var(--lk-czas-wolny), 280ms) box-shadow
     (rozmycie 48px) malowal sie poza prostokatem panelu (LTR, kazda strona), a w RTL takze sam brzeg panelu
     wchodzil w okno (translateX szedl w zla strone - patrz liikye-naglowek-rtl.css). Panel koszyka NIE jest
     ograniczony do @media(max-width:900px) jak menu (wysuwa sie z .lk-koszyk na kazdej szerokosci), wiec ta
     regula (i regula ograniczonego ruchu nizej) dziala bez warunku szerokosci. */
  visibility: hidden;
  transition: transform var(--lk-czas-wolny) var(--lk-ease), visibility 0s var(--lk-czas-wolny);
}

.lk-panel-koszyk.jest-otwarty {
  transform: none;
  visibility: visible;
  transition: transform var(--lk-czas-wolny) var(--lk-ease), visibility 0s;
}

/* Telefon: karta blizej krawedzi i mniej zaokraglona (plansza E1-02). Szerokosc zostaje min(420px, 100vw - 16px) = okno bez 2 x 8 px. */
@media (max-width: 480px) {
  .lk-panel-koszyk {
    inset-block: 8px;
    inset-inline-end: 8px;
    border-radius: 24px;
    transform: translateX(calc(100% + 16px));
  }
}

/* Ruch ograniczony: jak przy panelu menu (regula globalna w liikye.css zeruje tylko transition-duration, nie
   transition-delay) - bez tej reguly zamkniecie koszyka przy ograniczonym ruchu byloby geometrycznie natychmiastowe,
   ale visibility czekalaby pelne var(--lk-czas-wolny), wiec cien z bledu wrocilby na te chwile. */
@media (prefers-reduced-motion: reduce) {
  .lk-panel-koszyk { transition-delay: 0s; }
}

/* :where() zeruje specyficznosc, zeby marginesy akapitow nizej (np. tytul bledu) wygrywaly bez !important. */
:where(.lk-panel-koszyk) p { margin: 0; }

.lk-panel-koszyk__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 14px;
}

.lk-panel-koszyk__tyt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lk-panel-koszyk__tytul {
  font-family: var(--lk-font-naglowek);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

/* Dlugi tytul (np. niemiecki "Dein Warenkorb") obok pastylki i krzyzyka miesci sie w jednej linii na telefonie (390 px). Przy 320 px
   nic nie jest obcinane: tytul zawija sie, a nie ucina. Klase nadaje inc/naglowek.php wg dlugosci napisu. */
@media (max-width: 480px) {
  .lk-panel-koszyk__tytul--dlugi { font-size: 20px; }
}

/* Pastylka z liczba uslug. Ukryta bez uslug, w trakcie ladowania i przy bledzie (plansze E1-13, E1-14, E1-15). */
.lk-panel-koszyk__licznik {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--lk-ink-100);
  color: var(--lk-ink-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.lk-panel-koszyk.jest-laduje .lk-panel-koszyk__licznik,
.lk-panel-koszyk.jest-blad .lk-panel-koszyk__licznik { display: none; }

.lk-panel-koszyk__zamknij {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--lk-ink-100);
  color: var(--lk-tusz);
  cursor: pointer;
}

/* Najechanie tylko tam, gdzie jest kursor: na telefonie po tapnieciu przycisk wraca do koloru bazowego, a nie zostaje w stanie :hover. */
@media (hover: hover) {
  .lk-panel-koszyk__zamknij:hover { background: var(--lk-ink-200); }
}

.lk-panel-koszyk__tresc {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.lk-panel-koszyk__ekran {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px 20px;
}

.lk-panel-koszyk__ekran:has(> .lk-panel-koszyk__stopka) {
  overflow: hidden;
  padding: 0;
}

.lk-panel-koszyk__przewijane {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 20px 16px;
}

.lk-panel-koszyk__stopka {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px 20px;
  border-block-start: 1px solid var(--lk-ink-200);
  background: var(--lk-papier);
}

.lk-panel-koszyk__razem {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lk-panel-koszyk__razem > span:first-child {
  color: var(--lk-ink-700);
  font-size: 16px;
}

.lk-panel-koszyk__razem b {
  font-family: var(--lk-font-naglowek);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.lk-panel-koszyk__przyciski {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 10px;
}

/* Przyciski-pastylki panelu (5B): obrys i akcent z bialym kolkiem na strzalke, jak "Do kasy" na /courses/. */
.lk-pig {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.lk-pig--obrys {
  justify-content: center;
  background: var(--lk-papier);
  box-shadow: inset 0 0 0 1.5px var(--lk-ink-200);
  color: var(--lk-tusz);
}

@media (hover: hover) {
  .lk-pig--obrys:hover { box-shadow: inset 0 0 0 1.5px var(--lk-ink-900); }
}

.lk-pig--akcent {
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px 0 24px;
  background: var(--lk-akcent-tekst);
  box-shadow: 0 12px 28px rgba(255, 84, 54, .36);
  color: #fff;
}

@media (hover: hover) {
  .lk-pig--akcent:hover { background: var(--lk-akcent-ciemny); color: #fff; }
}

.lk-pig--w-toku { opacity: .55; pointer-events: none; }

.lk-pig__kolo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 23px;
  background: #fff;
  color: var(--lk-ink-900);
}

/* Szkielet (plansza E1-13): szare bloki z przesuwajacym sie blaskiem, bez ruchu przy ograniczonym ruchu. */
.lk-szkielet {
  display: block;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--lk-ink-100), var(--lk-ink-50), var(--lk-ink-100));
  background-size: 200% 100%;
  animation: lk-szkielet-fala 1.4s infinite linear;
}

@keyframes lk-szkielet-fala {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

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

.lk-panel-koszyk__szkielet-grupa {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 22px;
  background: var(--lk-ink-100);
}

.lk-panel-koszyk__szkielet-karty {
  display: flex;
  gap: 10px;
}

.lk-szkielet--grupa { width: 40%; height: 22px; }
.lk-szkielet--pozycja { height: 82px; }
.lk-szkielet--sekcja { width: 50%; height: 20px; }
.lk-szkielet--karta { flex: none; width: 152px; height: 190px; }
.lk-szkielet--pole { height: 58px; }
.lk-szkielet--suma { width: 120px; height: 30px; }

/* Blad wczytania (plansza E1-14): komunikat, ponowna proba i przejscie do pelnego koszyka. */
.lk-panel-koszyk__blad-wnetrze {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 70px 10px 10px;
  text-align: center;
}

.lk-panel-koszyk__emoji {
  display: inline-block;
  width: 76px;
  height: 76px;
  border-radius: 38px;
  background: var(--lk-ink-100);
  font-size: 36px;
  line-height: 76px;
  text-align: center;
}

.lk-panel-koszyk__blad-tytul {
  margin-block-end: 6px;
  font-family: var(--lk-font-naglowek);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.15;
}

.lk-panel-koszyk__blad-opis {
  color: var(--lk-ink-700);
  font-size: 14px;
}

.lk-panel-koszyk__blad .lk-pig {
  width: 100%;
  margin-block-start: 10px;
}

.lk-panel-koszyk__link {
  align-self: center;
  color: var(--lk-ink-700);
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .lk-panel-koszyk__link:hover { color: var(--lk-tusz); }
}

/* --------------------------------------------------------------------------
   4. Zawartosc panelu koszyka z modelu cleafs_smm (plansze E1-01 .. E1-12, E1-15, E1-16 makiet mini koszyka)

   Znacznik wypisuje woocommerce/cart/mini-cart.php (klasy lk-pk-*), akcje obsluguje assets/js/liikye-naglowek.js. Wymiary i kolory
   jak na planszach komputera (420 px) i telefonu (374 px); uklad na wlasciwosciach logicznych, wiec po arabsku lustro dziala samo.
   -------------------------------------------------------------------------- */

/* Reset przyciskow ma specyficznosc (0,2,1) (:is() bierze najwyzsza z argumentow, tu `.lk-pk-komunikat button`): reguly przyciskow z wlasnym paddingiem i czcionka (okazja, Cofnij, komunikat) sa zakotwiczone
   w .lk-panel-koszyk (panel) albo .lk-kb-form i .lk-kb-okazje (pelny koszyk, reset w liikye-koszyk.css) i maja element button (0,2,1, pozniej
   w pliku niz reset panelu), inaczej reset zdejmuje im padding, rozmiar i grubosc pisma (E1-10: Cofnij bez paddingu). */
.lk-panel-koszyk :is(.lk-pk-grupa__zwin, .lk-pk-krok__mniej, .lk-pk-krok__plus, .lk-pk-usun, .lk-pk-okazja__btn, .lk-pk-cofnij__btn, .lk-pk-komunikat button) {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.lk-panel-koszyk :is(button, a):focus-visible {
  outline: 3px solid var(--lk-akcent);
  outline-offset: 2px;
}

/* Grupa platformy (2B): szara tacka z naglowkiem (znak, nazwa, liczba uslug, suma, zwiniecie) i bialymi kartami uslug. */
.lk-pk-grupa {
  padding: 6px;
  border-radius: 22px;
  background: var(--lk-ink-100);
}

.lk-pk-grupa__gora {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 12px;
}

.lk-pk-grupa__kolo {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: #fff;
}

.lk-pk-grupa__kolo img { width: 20px; height: 20px; }

.lk-pk-grupa__opis { min-width: 0; }

.lk-pk-grupa__nazwa {
  font-family: var(--lk-font-naglowek);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.lk-pk-grupa__ile {
  color: var(--lk-przygaszony);
  font-size: 13px;
}

.lk-pk-grupa__suma {
  margin-inline-start: auto;
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.lk-pk-grupa__zwin {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 17px;
  background: var(--lk-ink-200);
  color: var(--lk-tusz);
}

.lk-pk-grupa__zwin svg { transition: transform 200ms var(--lk-ease); }
.lk-pk-grupa.jest-zwinieta .lk-pk-grupa__zwin svg { transform: rotate(180deg); }
.lk-pk-grupa.jest-zwinieta .lk-pk-grupa__pozycje { display: none; }

.lk-pk-grupa__pozycje {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Karta uslugi: miniatura z plakietka pakietu, nazwa, cena, konto i jakosc, krokownik. */
.lk-pk-karta {
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
}

.lk-pk-karta.jest-nowa { box-shadow: 0 0 0 2px var(--lk-akcent); }

.lk-pk-karta__wiersz {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 12px 14px;
}

.lk-pk-mini {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--lk-ink-50);
}

.lk-pk-mini img { width: 30px; height: 30px; }

.lk-pk-mini b {
  position: absolute;
  left: 50%;
  bottom: -7px;
  padding: 3px 5px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--lk-cien-1);
  color: var(--lk-akcent-tekst);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.lk-pk-opis { min-width: 0; }

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

.lk-pk-cena {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
}

.lk-pk-cena__teraz {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.lk-pk-cena__przed {
  color: var(--lk-przygaszony);
  font-size: 13px;
  white-space: nowrap;
}

.lk-pk-ilosc {
  color: var(--lk-ink-700);
  font-size: 13px;
  font-weight: 700;
}

.lk-pk-dana {
  min-width: 0;
  color: var(--lk-przygaszony);
  font-size: 13.5px;
}

/* Konto albo link: jedna linia ze skracaniem; jakosc (np. Premium) schodzi do nastepnej linii, gdy sie nie miesci, jak na planszy. */
.lk-pk-dana__cel {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.lk-pk-dana__jakosc {
  display: inline-block;
  white-space: nowrap;
}

.lk-pk-dana__cel:has(+ .lk-pk-dana__jakosc)::after { content: "\00a0\00b7"; }

.lk-pk-poza {
  color: var(--lk-przygaszony);
  font-size: 13px;
}

.lk-pk-gratis {
  color: var(--orange-600);
  font-size: 13px;
  font-weight: 800;
}

/* Krokownik pakietow: minus (przy najmniejszym pakiecie kosz), pakiet, plus (przy najwiekszym wyszarzony). */
.lk-pk-krok {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--lk-ink-100);
}

.lk-pk-krok__mniej,
.lk-pk-usun {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  color: var(--lk-przygaszony);
}

.lk-pk-usun { width: 34px; height: 34px; }

@media (hover: hover) {
  .lk-pk-krok__mniej:hover,
  .lk-pk-usun:hover {
    background: var(--lk-ink-200);
    color: var(--lk-ink-900);
  }
}

.lk-pk-krok__ile {
  min-width: 38px;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.lk-pk-krok__plus {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--lk-ink-900);
  color: #fff;
}

@media (hover: hover) {
  .lk-pk-krok__plus:hover:not(:disabled) { background: var(--lk-akcent); }
}
.lk-pk-krok__plus.jest-max { opacity: .3; cursor: default; }
@media (hover: hover) {
  .lk-pk-krok__plus.jest-max:hover { background: var(--lk-ink-900); }
}

/* Stan w toku (E1-11): wskaznik w miejscu pakietu, krokownik i cena przygaszone, przyciski nieaktywne. */
.lk-pk-karta.jest-w-toku :is(.lk-pk-krok, .lk-pk-usun, .lk-pk-cena) { opacity: .55; }
.lk-pk-karta.jest-w-toku button { cursor: progress; }

.lk-pk-krecik {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--lk-ink-300);
  border-top-color: var(--lk-ink-900);
  border-radius: 8px;
  vertical-align: middle;
  animation: lk-pk-obrot .8s linear infinite;
}

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

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

/* Komunikat pod usluga (E1-12) i wiersz "Usunieto ... Cofnij" (E1-10). */
.lk-pk-komunikat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--orange-50);
  color: var(--lk-ink-900);
  font-size: 13.5px;
}

.lk-panel-koszyk .lk-pk-komunikat button {
  margin-inline-start: auto;
  background: none;
  color: var(--lk-przygaszony);
  font-size: 15px;
}

.lk-pk-karta--cofnij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 12px 14px 16px;
  color: var(--lk-ink-700);
  font-size: 14px;
}

.lk-pk-karta--cofnij b { color: var(--lk-ink-900); }

.lk-pk-karta--cofnij > span { min-width: 0; }

.lk-panel-koszyk button.lk-pk-cofnij__btn,
.lk-kb-form button.lk-pk-cofnij__btn {
  flex: none;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--lk-ink-900);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

@media (hover: hover) {
  .lk-panel-koszyk button.lk-pk-cofnij__btn:hover:not(:disabled),
  .lk-kb-form button.lk-pk-cofnij__btn:hover:not(:disabled) { background: var(--lk-akcent); }
}
.lk-pk-karta--cofnij .lk-pk-komunikat { flex-basis: 100%; margin: 0 -12px -14px -16px; }
.lk-pk-karta--cofnij:has(.lk-pk-komunikat) { flex-wrap: wrap; }

/* Okazje (3C): karty przewijane w bok. */
.lk-pk-okazje {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lk-pk-sekcja {
  font-family: var(--lk-font-naglowek);
  font-size: 18px;
  font-weight: 800;
}

.lk-pk-okazje__tor {
  display: flex;
  gap: 10px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.lk-pk-okazje__tor::-webkit-scrollbar { display: none; }

.lk-pk-okazja {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 8px;
  width: 152px;
  padding: 10px;
  border: 1px solid var(--lk-ink-200);
  border-radius: 18px;
}

.lk-pk-okazja__kafel {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  border-radius: 14px;
  background: var(--lk-ink-50);
}

.lk-pk-okazja__kafel img { width: 38px; height: 38px; }

.lk-pk-okazja__nazwa {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  /* Dwie linie zawsze: ceny i przycisk Dodaj stoja na jednej wysokosci w kazdej karcie, takze przy krotkiej nazwie (margines auto na cenach
     nie wypelnia wolnego miejsca w rozciagnietej karcie). */
  min-height: 2.5em;
}

.lk-pk-okazja__ceny {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-block-start: auto;
}

.lk-panel-koszyk button.lk-pk-okazja__btn,
.lk-kb-okazje button.lk-pk-okazja__btn {
  height: 34px;
  border-radius: 999px;
  background: var(--lk-ink-900);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
}

@media (hover: hover) {
  .lk-pk-okazja__btn:hover:not(:disabled) { background: var(--lk-akcent); }
}
.lk-pk-okazja__btn:disabled { cursor: progress; }
.lk-pk-okazje > .lk-pk-komunikat { border-radius: 14px; }

/* Stopka: promocja 3 w cenie 2 (4H2), kod rabatowy, suma (5B) i przyciski. */
.lk-pk-promo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border-radius: 18px;
  background: var(--lk-ink-100);
}

.lk-pk-sloty {
  display: flex;
  flex: none;
  gap: 6px;
}

.lk-pk-slot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff;
  color: var(--lk-przygaszony);
  font-size: 18px;
  font-weight: 600;
}

.lk-pk-slot img { width: 24px; height: 24px; }
.lk-pk-slot--pusty { background: var(--lk-ink-200); }

.lk-pk-slot__dar {
  position: absolute;
  top: -6px;
  inset-inline-end: -5px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--lk-cien-1);
  font-size: 10px;
  line-height: 18px;
  text-align: center;
}

.lk-pk-promo__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  font-size: 15px;
}

.lk-pk-promo__tytul {
  color: var(--lk-ink-900);
  font-family: var(--lk-font-naglowek);
  font-size: 16px;
  font-weight: 700;
}

.lk-pk-promo__zysk { color: var(--orange-600); font-weight: 800; }
.lk-pk-promo__zysk em { font-style: normal; }

.lk-pk-kod {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--lk-ink-100);
  font-size: 14px;
}

.lk-pk-kod b { display: block; font-family: var(--lk-font-naglowek); }
.lk-pk-kod span:not(.lk-pk-kod__ikona) { color: var(--lk-ink-700); font-size: 13px; }

.lk-panel-koszyk .lk-pk-kreska {
  height: 1px;
  margin: 2px 0 0;
  border: 0;
  background: var(--lk-ink-200);
}

.lk-pk-rabat {
  display: flex;
  justify-content: space-between;
  color: var(--orange-600);
  font-size: 14.5px;
  font-weight: 700;
}

.lk-pk-kw {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.lk-pk-kw s {
  color: var(--lk-przygaszony);
  font-size: 15px;
}

/* Pusty koszyk (6B, E1-15 i E1-16): znak, tytul, przycisk w stylu 5B i trzy najczesciej wybierane uslugi z "Pokaz" (zwykly odnosnik). */
.lk-panel-koszyk__pusty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 36px 8px 8px;
  color: var(--lk-ink-700);
  text-align: center;
}

.lk-panel-koszyk__pusty-emoji {
  display: inline-block;
  width: 76px;
  height: 76px;
  border-radius: 38px;
  background: var(--orange-50);
  font-size: 36px;
  line-height: 76px;
  text-align: center;
}

.lk-panel-koszyk__pusty-tytul {
  margin-block-end: 6px;
  color: var(--lk-tusz);
  font-family: var(--lk-font-naglowek);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
}

.lk-panel-koszyk__pusty-opis { font-size: 14px; }

.lk-panel-koszyk__pusty > .lk-pig {
  align-self: stretch;
  margin-block-start: 8px;
}

.lk-pk-naj {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  gap: 4px;
  margin-block-start: 22px;
  text-align: start;
}

.lk-pk-naj .lk-pk-sekcja {
  margin-block-end: 4px;
  color: var(--lk-przygaszony);
  font-family: var(--lk-font-tresc);
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.lk-pk-oferta {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-block-end: 1px solid var(--lk-ink-200);
}

.lk-pk-oferta__nazwa {
  font-size: 14.5px;
  font-weight: 700;
}

.lk-pk-pokaz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px 0 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--lk-cien-1), 0 0 0 1px var(--lk-ink-200);
  color: var(--lk-ink-900);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .lk-pk-pokaz:hover {
    box-shadow: var(--lk-cien-1), 0 0 0 1px var(--lk-akcent);
    color: var(--lk-ink-900);
  }
}

/* Wiersz "Usunieto" w pustym ekranie (usunieto ostatnia usluge): stoi nad znakiem pustego koszyka. */
.lk-panel-koszyk__ekran > .lk-pk-karta--cofnij {
  flex: none;
  background: var(--lk-ink-100);
}

/* Tresc koszyka rysuje wlasny szablon woocommerce/cart/mini-cart.php: bez
   zdjec uslug, bez etykiet przy danych pozycji, bez mnoznika przy jednej
   sztuce. Klasy WooCommerce zostaja w znaczniku, zeby wtyczki i skrypty
   sklepu je znalazly, ale uklad stoi na wlasnych. */
.lk-panel-koszyk .woocommerce-mini-cart {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* PULAPKA, KTORA ROZWALALA PANEL NA STRONIE KOSZYKA: arkusz WooCommerce
   doklada do pozycji listy stary clearfix - ::before i ::after z content " "
   oraz display: table. W ukladzie SIATKI pseudo-elementy licza sie jak dzieci,
   wiec zajmowaly pierwsza kolumne i przesuwaly opis, cene i krzyzyk o jedno
   miejsce (zmierzone: kolumny 137/175/36 zamiast 286/36/26). Poza widokami
   sklepu arkusza nie ma, dlatego na stronie glownej wygladalo dobrze.
   Zdejmujemy je w calym panelu, bo ten sam clearfix siedzi takze na sumie
   i na wierszu przyciskow.

   SELEKTORY SA CELOWO DLUGIE: regula WooCommerce to
   ".woocommerce ul.cart_list li::before" o specyficznosci 0,2,2, wiec krotszy
   zapis (0,2,1) przegrywal i poprawka nie dzialala. Dokladamy nazwe listy
   i element, zeby wygrac przewaga specyficznosci, a nie !important - inaczej
   kazda przyszla poprawka tego miejsca musialaby eskalowac dalej. */
.lk-panel-koszyk ul.woocommerce-mini-cart li.lk-mini__pozycja::before,
.lk-panel-koszyk ul.woocommerce-mini-cart li.lk-mini__pozycja::after,
.lk-panel-koszyk ul.woocommerce-mini-cart::before,
.lk-panel-koszyk ul.woocommerce-mini-cart::after,
.lk-panel-koszyk p.woocommerce-mini-cart__total::before,
.lk-panel-koszyk p.woocommerce-mini-cart__total::after,
.lk-panel-koszyk p.woocommerce-mini-cart__buttons::before,
.lk-panel-koszyk p.woocommerce-mini-cart__buttons::after {
  content: none;
}

/* Trzy kolumny: opis rosnie, kwota i krzyzyk maja swoje miejsce. Wczesniej
   odnosnik usuwania byl pozycjonowany absolutnie i wchodzil na kwote. */
.lk-mini__pozycja {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: start;
  column-gap: var(--lk-s-3);
  padding-block: var(--lk-s-3);
  border-block-end: 1px solid var(--lk-linia);
}

/* Znak platformy w wysuwanym koszyku. Kolumne na niego dokladamy tylko wtedy,
   gdy pozycja go ma (uslugi bez rozpoznanej kategorii nadal sa mozliwe) -
   inaczej pusta kolumna zostawialaby odstep przed nazwa. */
.lk-mini__pozycja:has(.lk-mini__znak) {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.lk-mini__znak {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--lk-r-1);
  background: var(--lk-papier-2);
}

/* PROPORCJE BEZ POLEGANIA NA object-fit: obrazek dostaje GORNE ograniczenie
   zamiast sztywnych 32 na 32. Przy sztywnych wymiarach grafika uslugi, ktora
   nie jest idealnym kwadratem, zostaje zgnieciona - a tego nie widac w
   emulacji telefonu w przegladarce, tylko na sprzecie. Kontener pilnuje
   wielkosci kafelka, obrazek wpisuje sie w niego zachowujac ksztalt. */
.lk-mini__znak img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
}

.lk-mini__opis {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.lk-panel-koszyk .lk-mini__nazwa {
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  line-height: 1.25;
  color: var(--lk-tusz);
  text-decoration: none;
}

@media (hover: hover) {
  .lk-panel-koszyk a.lk-mini__nazwa:hover { color: var(--lk-akcent-tekst); }
}

/* Wartosc pola uslugi (nazwa konta, adres wpisu). Lamiemy dlugie ciagi bez
   spacji, bo adresy potrafia rozepchnac panel. */
.lk-mini__dana {
  color: var(--lk-przygaszony);
  font-size: var(--lk-t-mikro);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.lk-mini__ilosc {
  color: var(--lk-tusz-2);
  font-size: var(--lk-t-mikro);
  font-weight: 600;
}

/* Opcje dodatkowe: domyslnie zwiniete do jednej linii z licznikiem. Element
   natywny <details>, wiec dziala bez skryptu i z klawiatury. */
.lk-mini__opcje {
  margin-block-start: 4px;
}

.lk-mini__opcje-glowa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  color: var(--lk-tusz-2);
  font-size: var(--lk-t-mikro);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

/* Domyslny trojkat znacznika zdejmujemy w obu silnikach - mamy wlasna strzalke. */
.lk-mini__opcje-glowa::-webkit-details-marker { display: none; }
.lk-mini__opcje-glowa::marker { content: ""; }

@media (hover: hover) {
  .lk-mini__opcje-glowa:hover { color: var(--lk-akcent-tekst); }
}

.lk-mini__opcje-glowa:focus-visible {
  outline: 2px solid var(--lk-akcent);
  outline-offset: 2px;
  border-radius: var(--lk-r-xs);
}

.lk-mini__strzalka {
  flex: none;
  color: var(--lk-przygaszony);
  transition: transform var(--lk-czas-szybki) var(--lk-ease);
}

.lk-mini__opcje[open] .lk-mini__strzalka { transform: rotate(180deg); }

.lk-mini__opcje-lista {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 6px 0 2px;
  padding: 0;
  list-style: none;
}

.lk-mini__opcje-lista li {
  position: relative;
  padding-inline-start: 15px;
  color: var(--lk-tusz-2);
  font-size: var(--lk-t-mikro);
  line-height: 1.4;
}

/* Ptaszek rysowany tlem, nie znakiem: nie wchodzi do zaznaczenia tekstu
   i nie jest czytany przez czytniki ekranu jako slowo. */
.lk-mini__opcje-lista li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .42em;
  width: 8px;
  height: 5px;
  border-inline-start: 1.6px solid var(--lk-sukces-tekst, var(--lk-sukces));
  border-block-end: 1.6px solid var(--lk-sukces-tekst, var(--lk-sukces));
  transform: rotate(-45deg);
}

.lk-mini__cena {
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  color: var(--lk-tusz);
  white-space: nowrap;
}

.lk-panel-koszyk .lk-mini__pozycja .remove {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--lk-przygaszony);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
}

@media (hover: hover) {
  .lk-panel-koszyk .lk-mini__pozycja .remove:hover {
    background: var(--lk-blad-tlo);
    color: var(--lk-blad);
  }
}

.lk-panel-koszyk .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lk-s-3);
  margin: 0;
  padding-block: var(--lk-s-4);
  border-block-end: 1px solid var(--lk-linia);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-duzy);
  font-weight: 800;
}

.lk-panel-koszyk .woocommerce-mini-cart__buttons {
  display: grid;
  gap: var(--lk-s-2);
  margin: var(--lk-s-4) 0 0;
}

/* PELNY wyglad przyciskow, nie sama barwa: arkusze WooCommerce sa zdejmowane
   poza widokami sklepu (inc/wydajnosc.php), a panel koszyka jest w naglowku
   KAZDEJ strony. Dopoki panel pokazywal pustke, nikt tego nie widzial; odkad
   pokazuje pozycje, przyciski bez wlasnych regul wygladaly jak goly odnosnik
   i pasek tekstu. Wartosci sa te same co w .lk-przycisk z arkusza glownego.

   TU CELOWO IDZIEMY PRZEZ IDENTYFIKATOR PANELU, nie przez klase: na widokach
   sklepu wchodzi liikye-woo.css, ktory maluje KAZDY przycisk akcentem
   selektorem ".woocommerce-page .button:not(...)" powtorzonym piec razy -
   to specyficznosc 0,7,0, wiec zapis na klasach (0,3,0) przegrywal i oba
   przyciski panelu robily sie czerwone na stronie koszyka, a poza sklepem
   wygladaly poprawnie. Identyfikator (1,2,0) rozstrzyga to raz. */
#lk-panel-koszyk .woocommerce-mini-cart__buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: .875rem 1.5rem;
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-1);
  background: transparent;
  color: var(--lk-tusz);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-baza);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--lk-czas) var(--lk-ease),
              color var(--lk-czas) var(--lk-ease),
              border-color var(--lk-czas) var(--lk-ease);
}

@media (hover: hover) {
  #lk-panel-koszyk .woocommerce-mini-cart__buttons .button:hover {
    background: var(--lk-akcent-tlo);
    border-color: var(--lk-akcent);
    color: var(--lk-akcent-tekst);
  }
}

/* Wypelnienie bierze odcien akcentu napisowego, ktory od 06.08.2026 jest
   pomaranczem marki (wczesniej ciemniejszy orange-700). Bialy napis ma tu
   16 px, wiec prog 4,5:1 nie jest spelniony - swiadomy koszt spojnosci
   kolorystycznej, opisany przy --lk-akcent-tekst w liikye.css. */
#lk-panel-koszyk .woocommerce-mini-cart__buttons .checkout {
  border-color: transparent;
  background: var(--lk-akcent-tekst);
  color: #fff;
  box-shadow: var(--lk-cien-akcent);
}

@media (hover: hover) {
  #lk-panel-koszyk .woocommerce-mini-cart__buttons .checkout:hover {
    background: var(--action-primary-hover);
    border-color: transparent;
    color: #fff;
  }
}

/* USUNIETE 2026-08-02: podglad koszyka po najechaniu (.lk-podglad-koszyka).
   Pokazywal te sama zawartosc co wysuwany panel, ale we wlasnej oprawie i bez
   stylow pozycji, wiec ten sam sklep mial dwa rozne koszyki zaleznie od tego,
   czy klient najechal, czy kliknal. Zostaje jeden widok na wszystkich ekranach:
   panel otwierany klikiem. */

/* Blokada przewijania tla, gdy panel jest otwarty. */
body.lk-panel-otwarty { overflow: hidden; }