/* ==========================================================================
   Liikye - arkusz rdzenia
   Kolejnosc: tokeny, fonty, reset, typografia, uklad, komponenty, naglowek,
   stopka, pomocnicze.
   Zasady: zero !important poza wyjatkami opisanymi w miejscu uzycia,
   zero selektorow na golych znacznikach interaktywnych (button, a) - stylujemy
   klasy, bo szeroka regula na "button" potrafi rozwalic nakladki bibliotek.
   Uklad stoi na wlasnosciach logicznych, wiec jezyk pisany od prawej dziala
   bez osobnego arkusza dla wiekszosci regul.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonty (lokalne, zmienne, dzielone na latin i latin-ext)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Liikye Display";
  src: url("../fonts/outfit-latin.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Liikye Display";
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Liikye Text";
  src: url("../fonts/jakarta-latin.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Liikye Text";
  src: url("../fonts/jakarta-latin-ext.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kursywa Plus Jakarta Sans (plan wpisu i zwyklej strony 28.10.2026, zadanie B1).
   Bez tego kroju przegladarka dla <em> w tresci wpisu pochyla litery sama (kursywa podrabiana, zniekszalcona).
   Zrodlo: @fontsource-variable/plus-jakarta-sans 5.3.0, pliki plus-jakarta-sans-latin-wght-italic.woff2 i
   plus-jakarta-sans-latin-ext-wght-italic.woff2 z https://cdn.jsdelivr.net/npm/@fontsource-variable/plus-jakarta-sans@5.3.0/files/
   (bez zmian, tak samo jak prosty kroj wyzej: te same podzialy latin i latin-ext), os wght 200-800 (tu 300-800 jak w prostym
   kroju), licencja SIL OFL 1.1 w assets/fonts/OFL-PlusJakartaSans.txt. Te same unicode-range co prosty kroj: plik kursywy
   idzie do przegladarki dopiero, gdy strona uzyje pochylonego znaku z danego zakresu (bez preloadu, bo kursywa jest rzadka). */
@font-face {
  font-family: "Liikye Text";
  src: url("../fonts/jakarta-italic-latin.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Liikye Text";
  src: url("../fonts/jakarta-italic-latin-ext.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Kroje zastepcze o dopasowanych metrykach.
   Zanim doleci wlasny font, tekst rysuje krój systemowy. Bez dopasowania ma
   inna wysokosc liter i inna wysokosc wiersza, wiec podmiana przesuwa uklad
   (skok CLS). Wartosci sa ZMIERZONE z naszych plikow woff2:
     Outfit  - ascent 100%, descent 26%, x-height 46,0% em
     Jakarta - ascent 103,8%, descent 22,2%, x-height 53,6% em
   size-adjust to stosunek x-height kroju do x-height Ariala (51,9%).

   UNICODE-RANGE (#77, KB 7958): obie wartosci size-adjust sa skalibrowane pod LACINE, wiec kroj zastepczy ma siegac tylko po
   lacinskie litery, cyfry, interpunkcje i symbole obok nich. Bez zakresu (do 0.25.1) siegal tez po litery arabskie, a
   size-adjust 88,63 i 103,28 procent zmniejszal je o ok. 22-25 procent wzgledem makiet (pomiar 27.10.2026: arabski napis
   "Deals" 37,6 px zamiast 49,4 px). Teraz arabskie litery omijaja kroj zastepczy i ida dalej stosem (ui-sans-serif, system-ui) w
   rzeczywistym rozmiarze, a cyfry i lacina na stronach arabskich zostaja przy naszych fontach. Zakres obejmuje wszystko, co
   pokrywaja pliki latin i latin-ext wyzej (czyli polski, czeski, niemiecki, francuski, hiszpanski, wloski, holenderski i
   portugalski), plus bloki, ktore Arial rysowal dotad w tym kroju: znaki laczone, interpunkcja i symbole walut, strzalki,
   operatory i figury. Nowy znak spoza zakresu idzie do nastepnego kroju stosu, a nie znika. */
@font-face {
  font-family: "Liikye Display zastepczy";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 88.63%;
  ascent-override: 100%;
  descent-override: 26%;
  line-gap-override: 0%;
  unicode-range: U+0000-036F, U+1D00-1DBF, U+1E00-1EFF, U+2000-214F, U+2190-22FF,
    U+25A0-25FF, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Liikye Text zastepczy";
  src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans");
  size-adjust: 103.28%;
  ascent-override: 103.8%;
  descent-override: 22.2%;
  line-gap-override: 0%;
  unicode-range: U+0000-036F, U+1D00-1DBF, U+1E00-1EFF, U+2000-214F, U+2190-22FF,
    U+25A0-25FF, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokeny
   -------------------------------------------------------------------------- */

:root {
  /* WARSTWA ALIASOW. Zero wartosci wlasnych: kazda nazwa wskazuje na token
     z systemu projektowego (assets/css/tokens-ds.css, ladowany PRZED tym
     arkuszem). Dzieki temu caly istniejacy CSS motywu dziala bez zmian, a
     wartosci pochodza z jednego miejsca. Nazwy --lk-* zostaja, bo uzywa ich
     okolo 1200 linii arkusza; nowy kod moze siegac po nazwy systemowe wprost.

     ZRODLO PRAWDY: Liikye Design System w Claude Design (decyzja Mateusza).
     Zmiana wartosci idzie TAM, nie tutaj. */

  /* Kolory marki */
  --lk-akcent:        var(--action-primary);        /* orange-500, wypelnienia i obwodki */
  --lk-akcent-ciemny: var(--action-primary-hover);  /* orange-600, najechanie */
  /* NAPIS: decyzja Mateusza z 06.08.2026 - pomaranczowy marki (orange-500)
     takze w tekscie. System projektowy stawia tu ciemniejszy orange-700
     (#bd2c13), bo daje 5,94:1 pod bialym zamiast 3,19:1, ale Mateusz uznal ten
     odcien za obcy marce ("brzydki czerwony") i ma pierwszenstwo.
     KOSZT, ktory z tego wynika: drobny napis w tym kolorze nie spelnia progu
     czytelnosci WCAG AA (4,5:1). Tam, gdzie akcent niesie tresc, a nie sam
     wyglad, dokladamy podkreslenie albo grubosc - kolor nie moze byc jedynym
     nosnikiem informacji. */
  --lk-akcent-tekst:  var(--orange-500);            /* orange-500, NAPIS (3,19:1) */
  --lk-akcent-tlo:    var(--surface-accent-soft);

  /* Szarosci */
  --lk-ink-900: var(--ink-900);
  --lk-ink-700: var(--ink-700);
  --lk-ink-500: var(--ink-500);
  --lk-ink-300: var(--ink-300);
  --lk-ink-200: var(--ink-200);
  --lk-ink-100: var(--ink-100);
  --lk-ink-50:  var(--ink-50);

  --lk-tusz:        var(--text-strong);
  --lk-tusz-2:      var(--text-body);
  /* PRZYGASZONY JEST O STOPIEN CIEMNIEJSZY NIZ W SYSTEMIE (decyzja Mateusza
     30.08.2026 przy makietach kasy: "kolor szarej czcionki jest zbyt wyblakly
     i slabo widoczny"). System stawia tu --text-muted, czyli ink-500 (#6b7080,
     4,6:1 na bieli) - prog AA przechodzi, ale dopiero przy tekscie 16 px, a my
     uzywamy tej roli glownie na 11-13 px: dopiskach pod polami, opisach opcji,
     stopkach kart. Bierzemy ink-600 (#4e525b, 7,1:1), ktore czyta sie w kazdym
     rozmiarze. Zmiana jest w WARSTWIE ALIASOW, nie w tokens-ds.css - palety z
     Claude Design nie ruszamy, zeby synchronizacja niczego nie cofnela (ten sam
     wzorzec co przy akcencie tekstowym 06.08.2026). */
  --lk-przygaszony: var(--ink-600);
  --lk-linia:       var(--border-subtle);
  --lk-papier:      var(--surface-page);
  --lk-papier-2:    var(--surface-sunken);

  /* Statusy. Rozdzial ma znaczenie: --lk-sukces to odcien DEKORACYJNY (ikony,
     paski), a napisy i solidne plakietki biora --lk-sukces-tekst, bo tylko on
     przechodzi prog kontrastu dla tekstu. */
  --lk-sukces:       var(--status-success-fill);
  --lk-sukces-tekst: var(--status-success);
  --lk-sukces-tlo:   var(--status-success-bg);
  --lk-blad:         var(--status-danger);
  --lk-blad-tlo:     var(--status-danger-bg);

  /* Platformy: wylacznie ikony i plakietki sieci. */
  --lk-instagram: var(--platform-instagram);
  --lk-tiktok:    var(--platform-tiktok);
  --lk-youtube:   var(--platform-youtube);
  --lk-facebook:  var(--platform-facebook);

  /* Typografia. Skala systemu jest skokowa (telefon / duzy ekran), u nas
     plynna, wiec stopnie sluza za granice funkcji clamp. */
  --lk-font-naglowek: var(--font-display);
  --lk-font-tresc:    var(--font-text);
  --lk-t-h1:   clamp(var(--fs-h1), 1.15rem + 3.4vw, var(--fs-h1-lg));
  --lk-t-h2:   clamp(var(--fs-h2), 1.1rem + 2.1vw, var(--fs-h2-lg));
  --lk-t-h3:   clamp(var(--fs-h3), 1.05rem + .8vw, var(--fs-h3-lg));
  --lk-t-duzy: var(--fs-body-lg);
  --lk-t-baza: var(--fs-body);
  --lk-t-maly: var(--fs-sm);
  --lk-t-mikro: var(--fs-xs);

  /* Rytm pionowy */
  --lk-s-1: var(--space-1);
  --lk-s-2: var(--space-2);
  --lk-s-3: var(--space-3);
  --lk-s-4: var(--space-4);
  --lk-s-5: var(--space-6);
  --lk-s-6: var(--space-8);
  --lk-s-7: var(--space-12);
  --lk-s-8: var(--space-16);
  --lk-s-9: var(--space-24);

  /* Ksztalt */
  --lk-r-xs:      var(--radius-xs);
  --lk-r-1:       var(--radius-control);  /* 10 px, kontrolki */
  --lk-r-2:       var(--radius-md);
  --lk-r-3:       var(--radius-card);     /* 20 px, karta */
  --lk-r-arkusz:  var(--radius-sheet);
  --lk-r-pigulka: var(--radius-pill);

  /* Cien */
  --lk-cien-1:      var(--shadow-xs);
  --lk-cien-2:      var(--shadow-md);
  --lk-cien-3:      var(--shadow-lg);
  --lk-cien-akcent: var(--shadow-accent);

  /* Uklad */
  --lk-kontener:        var(--container-max);
  --lk-kontener-waski:  var(--container-narrow);
  --lk-margines-boczny: clamp(var(--gutter-mobile), 4vw, var(--gutter-desktop));
  --lk-naglowek-h:      68px;

  /* Ruch */
  --lk-czas-szybki:  var(--dur-fast);
  --lk-czas:         var(--dur-base);
  --lk-czas-wolny:   var(--dur-slow);
  --lk-ease:         var(--ease-standard);
  --lk-ease-wyjscie: var(--ease-out);
  --lk-wcisniecie:   scale(var(--press-scale));

  --lk-tap-min: var(--tap-min);
}


/* --------------------------------------------------------------------------
   3. Reset i podstawy
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--lk-papier);
  color: var(--lk-tusz);
  font-family: var(--lk-font-tresc);
  font-size: var(--lk-t-baza);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
iframe { max-width: 100%; }

img,
video { height: auto; }

svg { display: inline-block; vertical-align: middle; }

hr {
  border: 0;
  border-top: 1px solid var(--lk-linia);
  margin-block: var(--lk-s-6);
}

/* --------------------------------------------------------------------------
   4. Typografia
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lk-font-naglowek);
  color: var(--lk-tusz);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin-block: 0 var(--lk-s-4);
  text-wrap: balance;
}

h1 { font-size: var(--lk-t-h1); }
h2 { font-size: var(--lk-t-h2); }
h3 { font-size: var(--lk-t-h3); }
h4 { font-size: 1.125rem; }

p { margin-block: 0 var(--lk-s-4); }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}

a:hover { text-decoration-color: currentColor; }

strong, b { font-weight: 700; }

small { font-size: var(--lk-t-maly); }

ul, ol { padding-inline-start: 1.25em; }

blockquote {
  margin: var(--lk-s-5) 0;
  padding-inline-start: var(--lk-s-4);
  border-inline-start: 3px solid var(--lk-akcent);
  color: var(--lk-tusz-2);
}

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em;
}

:focus-visible {
  outline: 2px solid var(--lk-akcent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Odnosnik pomijajacy nawigacje. Widoczny tylko przy przejsciu klawiatura. */
.lk-pomijacz {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--lk-s-3) var(--lk-s-4);
  background: var(--lk-tusz);
  color: #fff;
  border-radius: 0 0 var(--lk-r-1) 0;
}

.lk-pomijacz:focus {
  inset-inline-start: 0;
}

/* --------------------------------------------------------------------------
   5. Uklad
   -------------------------------------------------------------------------- */

.lk-kontener {
  width: 100%;
  max-width: var(--lk-kontener);
  margin-inline: auto;
  padding-inline: var(--lk-margines-boczny);
}

.lk-tresc__glowna {
  padding-block: var(--lk-s-7) var(--lk-s-8);
}

.lk-tresc__glowna--waska {
  max-width: var(--lk-kontener-waski);
  margin-inline: auto;
}

.lk-naglowek-strony {
  margin-block-end: var(--lk-s-6);
}

.lk-naglowek-strony--srodek {
  text-align: center;
}

.lk-naglowek-strony__opis {
  color: var(--lk-tusz-2);
  font-size: var(--lk-t-duzy);
  max-width: 60ch;
}

.lk-naglowek-strony--srodek .lk-naglowek-strony__opis {
  margin-inline: auto;
}

.lk-nadtytul {
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lk-akcent-tekst);
  margin-block-end: var(--lk-s-2);
}

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

.lk-proza h2 { margin-block-start: var(--lk-s-7); }
.lk-proza h3 { margin-block-start: var(--lk-s-6); }

.lk-proza img { border-radius: var(--lk-r-2); }

.lk-proza table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--lk-s-5);
  font-size: var(--lk-t-maly);
}

.lk-proza th,
.lk-proza td {
  border: 1px solid var(--lk-linia);
  padding: var(--lk-s-3);
  text-align: start;
}

.lk-proza th { background: var(--lk-papier-2); font-weight: 700; }

.lk-srodek { text-align: center; }

/* Odstep od gory: okruszki sa pierwsza trescia pod menu i bez niego wygladaja
   jak jego dolna krawedz, a nie jak poczatek strony. */
.lk-okruszki {
  font-size: var(--lk-t-maly);
  color: var(--lk-przygaszony);
  margin-block-start: var(--lk-s-4);
  margin-block-end: var(--lk-s-5);
}

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

.lk-okruszki__sep { margin-inline: var(--lk-s-2); }

/* --------------------------------------------------------------------------
   6. Komponenty: przyciski
   Selektor jest zawsze klasowy. Nie stylujemy golego "button", bo taka regula
   lapie rowniez sterowanie galerii i nakladek bibliotek.
   -------------------------------------------------------------------------- */

.lk-przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lk-s-2);
  padding: .875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--lk-r-1);
  background: var(--lk-papier-2);
  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;
  cursor: pointer;
  transition: background var(--lk-czas) var(--lk-ease),
              color var(--lk-czas) var(--lk-ease),
              border-color var(--lk-czas) var(--lk-ease),
              transform var(--lk-czas) var(--lk-ease);
}

.lk-przycisk:hover { background: var(--lk-linia); text-decoration: none; }
.lk-przycisk:active { transform: var(--lk-wcisniecie); }

/* KONTRAST: bialy napis na orange-500 daje 3,19:1, a przycisk ma pismo 16 px,
   wiec obowiazuje prog 4,5:1 dla zwyklego tekstu, nie 3:1 dla duzego.
   Wypelnienie bralo wczesniej ciemniejszy orange-700 (5,94:1), ale od
   06.08.2026 caly motyw stoi na pomaranczu marki - decyzja Mateusza, ktory
   uznal tamten odcien za obcy marce. Przyciski sa dzieki temu spojne z glownym
   przyciskiem zakupu (ten byl orange-500 od poczatku), kosztem progu WCAG AA
   na bialym napisie. */
.lk-przycisk--akcent {
  background: var(--lk-akcent-tekst);
  color: #fff;
  box-shadow: var(--lk-cien-akcent);
}

.lk-przycisk--akcent:hover { background: var(--action-primary-hover); }

.lk-przycisk--obrys {
  background: transparent;
  border-color: var(--lk-linia);
}

.lk-przycisk--obrys:hover {
  background: var(--lk-akcent-tlo);
  border-color: var(--lk-akcent);
  color: var(--lk-akcent-tekst);
}

.lk-przycisk--duzy {
  padding: 1.125rem 2rem;
  font-size: var(--lk-t-duzy);
}

.lk-przycisk--pelny { width: 100%; }

.lk-przycisk[disabled],
.lk-przycisk[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

.lk-link-akcent {
  color: var(--lk-akcent-tekst);
  font-weight: 700;
  text-decoration: none;
}

.lk-link-akcent:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. Komponenty: plakietki, karty, kafle, zakladki
   -------------------------------------------------------------------------- */

.lk-plakietka {
  display: inline-block;
  padding: .2em .6em;
  border-radius: var(--lk-r-pigulka);
  background: var(--lk-papier-2);
  color: var(--lk-tusz-2);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-mikro);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

.lk-plakietka--akcent { background: var(--lk-akcent); color: #fff; }
.lk-plakietka--sukces { background: var(--lk-sukces-tekst); color: #fff; }
.lk-plakietka--cichy  { background: var(--lk-papier-2); color: var(--lk-tusz-2); }

.lk-karta {
  background: var(--lk-papier);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
  overflow: hidden;
  transition: box-shadow var(--lk-czas) var(--lk-ease),
              border-color var(--lk-czas) var(--lk-ease);
}

.lk-karta:hover { box-shadow: var(--lk-cien-2); border-color: transparent; }

.lk-karta__tresc { padding: var(--lk-s-5); }

.lk-karta__tytul {
  font-size: var(--lk-t-h3);
  margin-block-end: var(--lk-s-2);
}

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

.lk-karta__meta,
.lk-karta__zajawka { color: var(--lk-tusz-2); }

.lk-karta__meta { font-size: var(--lk-t-maly); }

.lk-karta__obrazek {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.lk-karta__obrazek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lk-lista-wpisow {
  display: grid;
  gap: var(--lk-s-5);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Kafel wyboru: podstawowy element konfiguratora (ilosc, wariant).
   Ukryty przelacznik plus etykieta, zeby dzialalo z klawiatura i czytnikiem. */
.lk-kafle {
  display: grid;
  gap: var(--lk-s-3);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-block-end: var(--lk-s-5);
}

.lk-kafel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 84px;
  padding: var(--lk-s-3);
  border: 1.5px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
  background: var(--lk-papier-2);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--lk-czas) var(--lk-ease),
              background var(--lk-czas) var(--lk-ease),
              color var(--lk-czas) var(--lk-ease);
}

.lk-kafel__wartosc {
  font-family: var(--lk-font-naglowek);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
}

.lk-kafel__opis {
  font-size: var(--lk-t-maly);
  font-weight: 600;
  color: var(--lk-akcent-tekst);
}

.lk-kafel__plakietka {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
}

.lk-kafel:hover { border-color: var(--lk-akcent); background: var(--lk-papier); }

.lk-kafel input { position: absolute; opacity: 0; pointer-events: none; }

/* Stan wybrany. Kolor tekstu ustawiamy jawnie na kazdym potomku: przy
   pomaranczowym wypelnieniu odziedziczony ciemny tekst na kwotach potrafil
   zniknac (pulapka z metamaxa: klient nie widzial doplaty). */
.lk-kafel.jest-wybrany,
.lk-kafel:has(input:checked) {
  background: var(--lk-akcent);
  border-color: var(--lk-akcent);
}

.lk-kafel.jest-wybrany *,
.lk-kafel:has(input:checked) * { color: #fff; }

.lk-kafel:has(input:focus-visible) {
  outline: 2px solid var(--lk-tusz);
  outline-offset: 2px;
}

/* Zakladki: wybor rodzaju uslugi nad karta konfiguratora. */
.lk-zakladki {
  display: flex;
  gap: var(--lk-s-2);
  margin-block-end: -1px;
}

.lk-zakladka {
  position: relative;
  flex: 1 1 0;
  padding: var(--lk-s-4) var(--lk-s-4);
  border: 1px solid var(--lk-linia);
  border-block-end-color: transparent;
  border-radius: var(--lk-r-2) var(--lk-r-2) 0 0;
  background: var(--lk-papier-2);
  color: var(--lk-tusz-2);
  font-family: var(--lk-font-naglowek);
  font-weight: 700;
  cursor: pointer;
  text-align: start;
}

.lk-zakladka[aria-selected="true"] {
  background: var(--lk-papier);
  color: var(--lk-tusz);
  border-color: var(--lk-linia);
  border-block-end-color: var(--lk-papier);
}

.lk-zakladka__plakietka {
  position: absolute;
  inset-block-start: -11px;
  inset-inline-end: var(--lk-s-3);
}

.lk-panel-zakladki {
  border: 1px solid var(--lk-linia);
  border-radius: 0 var(--lk-r-2) var(--lk-r-2) var(--lk-r-2);
  background: var(--lk-papier);
  padding: var(--lk-s-5);
}

/* Pasek zaufania */
.lk-zaufanie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s-4) var(--lk-s-5);
  justify-content: center;
  margin: 0 0 var(--lk-s-5);
  padding: var(--lk-s-3) var(--lk-s-4);
  list-style: none;
  background: var(--lk-papier-2);
  border-radius: var(--lk-r-2);
  font-size: var(--lk-t-maly);
  color: var(--lk-tusz-2);
}

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

.lk-zaufanie__punkt svg { color: var(--lk-sukces); flex: none; }

/* --------------------------------------------------------------------------
   7a. Znaki platform wgrane w panelu

   Znak platformy moze byc rysunkiem motywu (svg z currentColor) albo plikiem
   z panelu (miniatura kategorii). Rysunek dopasowuje sie sam, plik przychodzi
   jaki przychodzi - i to te roznice wyrownujemy tutaj, zamiast poprawiac
   cudze pliki. Te same dwie reguly ma stopka, na wlasnych klasach.
   (Trzecia, skala 1,18 dla TikToka, zniknela: margines pliku jest teraz przyciety
   u zrodla, viewBox w bibliotece mediow, narzedzia/viewbox-znakow.sh.)
   -------------------------------------------------------------------------- */

.lk-glif--obraz {
  flex: none;
  border-radius: var(--radius-xs);
  object-fit: contain;
}

/* Znak X jest caly czarny, a litera to dziura w tle: bez bialego podkladu
   znika na kazdym ciemnym elemencie. */
.lk-glif--twitter.lk-glif--obraz { background: var(--white); }

/* --------------------------------------------------------------------------
   8. Komponenty: formularze i komunikaty
   -------------------------------------------------------------------------- */

.lk-pole,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1.5px solid var(--lk-linia);
  border-radius: var(--lk-r-1);
  background: var(--lk-papier);
  color: var(--lk-tusz);
  font-family: inherit;
  font-size: var(--lk-t-baza);
  line-height: 1.4;
  transition: border-color var(--lk-czas) var(--lk-ease);
}

textarea { min-height: 140px; resize: vertical; }

.lk-pole:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--lk-akcent);
  outline: none;
  box-shadow: 0 0 0 3px var(--lk-akcent-tlo);
}

::placeholder { color: var(--lk-przygaszony); opacity: 1; }

label { display: inline-block; font-size: var(--lk-t-maly); font-weight: 600; }

.lk-szukaj {
  display: flex;
  gap: var(--lk-s-2);
  max-width: 520px;
  margin-block: var(--lk-s-5);
}

.lk-naglowek-strony--srodek + .lk-szukaj,
.lk-pustka .lk-szukaj { margin-inline: auto; }

.lk-szukaj__przycisk { flex: none; }

.lk-komunikat {
  padding: var(--lk-s-4) var(--lk-s-5);
  border-radius: var(--lk-r-2);
  border: 1px solid var(--lk-linia);
  background: var(--lk-papier-2);
  margin-block-end: var(--lk-s-5);
  font-size: var(--lk-t-maly);
}

.lk-komunikat__lista { margin: 0; padding-inline-start: 1.1em; }

.lk-komunikat--blad {
  background: var(--lk-blad-tlo);
  border-color: color-mix(in srgb, var(--lk-blad) 30%, transparent);
  color: var(--lk-blad);
}

.lk-komunikat--sukces {
  background: var(--lk-sukces-tlo);
  border-color: color-mix(in srgb, var(--lk-sukces) 30%, transparent);
  color: var(--lk-sukces-tekst);
}

.lk-komunikat--info {
  background: var(--lk-akcent-tlo);
  border-color: color-mix(in srgb, var(--lk-akcent) 25%, transparent);
  color: var(--lk-akcent-tekst);
}

.lk-pustka {
  padding: var(--lk-s-7) var(--lk-s-5);
  text-align: center;
  background: var(--lk-papier-2);
  border-radius: var(--lk-r-2);
}

.lk-pustka__tytul { font-size: var(--lk-t-h3); }

/* Stronicowanie */
.lk-strony {
  display: flex;
  justify-content: center;
  margin-block-start: var(--lk-s-7);
}

.lk-strony .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s-2);
}

.lk-strony .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--lk-s-2);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-1);
  text-decoration: none;
  font-weight: 600;
}

.lk-strony .page-numbers.current,
.lk-strony .page-numbers:hover {
  background: var(--lk-akcent);
  border-color: var(--lk-akcent);
  color: #fff;
}

/* --------------------------------------------------------------------------
   9. Pasek promocyjny i naglowek
   Naglowek jest bialy z ciemnym tekstem. To swiadoma decyzja po incydencie
   z poprzednim motywem, gdzie jasne tlo naglowka chowalo biale pozycje menu.
   -------------------------------------------------------------------------- */

.lk-promo {
  background: var(--lk-akcent);
  color: #fff;
  font-size: var(--lk-t-maly);
  font-weight: 600;
}

.lk-promo__wnetrze {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--lk-s-3);
  min-height: 40px;
  padding-block: var(--lk-s-2);
  text-align: center;
}

.lk-promo__cta {
  display: inline-flex;
  align-items: center;
  padding: .25rem .75rem;
  border-radius: var(--lk-r-pigulka);
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.lk-promo__cta:hover { background: rgba(255, 255, 255, .32); }

.lk-naglowek {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--lk-papier);
  border-block-end: 1px solid var(--lk-linia);
}

.lk-naglowek__wnetrze {
  display: flex;
  align-items: center;
  gap: var(--lk-s-4);
  min-height: var(--lk-naglowek-h);
}

.lk-naglowek__marka { flex: none; display: flex; align-items: center; }

.lk-naglowek__marka img {
  display: block;
  max-height: 40px;
  width: auto;
}

/* Znak tekstowy marki: male litery, ciasny tracking, kropka w akcencie.
   Zastepuje logo skasowane razem z mediami po kumplo. */
.lk-logo--tekst {
  font-family: var(--lk-font-naglowek);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.04em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--lk-tusz);
  white-space: nowrap;
}

.lk-logo__kropka { color: var(--lk-akcent); }

/* PASEK KOMPUTERA 2A (plansze k-d1 .. k-d8): przyciski z prawej to pigulki 40 px bez ramek co 8 px, lupa (wtyczka), jezyk i konto
   szare (--ink-100), koszyk w akcencie. Pasek telefonu (do 900 px) ma wlasna geometrie w bloku @media (max-width: 900px) nizej. */
.lk-naglowek__akcje {
  display: flex;
  align-items: center;
  gap: var(--lk-s-2);
  margin-inline-start: auto;
}

.lk-konto {
  display: inline-flex;
  align-items: center;
  gap: var(--lk-s-2);
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--lk-r-pigulka);
  background: var(--ink-100);
  color: var(--lk-tusz);
  font-size: var(--lk-t-maly);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.lk-konto:hover { background: var(--ink-200); color: var(--lk-tusz); }

.lk-konto svg { flex: none; }

.lk-koszyk {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--lk-s-2);
  height: 40px;
  padding: 0 16px;
  border-radius: var(--lk-r-pigulka);
  background: var(--lk-akcent);
  color: #fff;
  text-decoration: none;
}

.lk-koszyk:hover { background: var(--lk-akcent-ciemny); }

.lk-koszyk__ikona {
  flex: none;
  width: 18px;
  height: 18px;
}

.lk-koszyk .woo-mini-count {
  font-family: var(--lk-font-naglowek);
  font-size: 15px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  min-width: 1ch;
  text-align: center;
}

/* Pusty koszyk na komputerze: sama ikona w pigulce 42 px (padding 0 12), bez zera. Klase na liczbie daja serwer, fragment WooCommerce
   i skrypt naglowka; na telefonie licznik ma wlasne reguly (kolko), wiec ten blok jest tylko od 901 px. */
@media (min-width: 901px) {
  .lk-koszyk:has(.lk-koszyk__licznik--pusty) { padding-inline: 12px; }

  .lk-koszyk .lk-koszyk__licznik--pusty { display: none; }
}

/* --------------------------------------------------------------------------
   10. Menu glowne
   -------------------------------------------------------------------------- */

.lk-menu {
  display: flex;
  align-items: center;
  gap: var(--lk-s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-menu__pozycja { position: relative; }

.lk-menu__link {
  display: inline-flex;
  align-items: center;
  padding: .55rem .75rem;
  border-radius: var(--lk-r-1);
  color: var(--lk-tusz-2);
  font-size: var(--lk-t-maly);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

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

/* Pozycje menu po kumplo potrafia zawierac obrazek (flaga jezyka). Trzymamy go
   w rozmiarze litery, zeby nie rozpychal paska nawigacji. */
.lk-menu__link img {
  max-height: 1.15em;
  width: auto;
  margin-inline-end: .35em;
  vertical-align: -.15em;
}

.lk-menu__strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--lk-r-1);
  background: transparent;
  color: var(--lk-przygaszony);
  cursor: pointer;
}

.lk-menu__strzalka svg { transition: transform var(--lk-czas) var(--lk-ease); }

.lk-menu__strzalka[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Menu glowne na pasku komputera (plansze k-d1, k-d5): pigulki 40 px, Outfit 600 15 px, odstep 6 px, 36 px za logo (16 odstepu paska
   + 20 marginesu nawigacji). Najechanie daje szare tlo CALEJ pigulki (napis i strzalka Shop razem: pozycja to link plus przycisk
   strzalki). Strzalka stoi 6 px za napisem i ma 14 px do konca pigulki. Okienko uslug (.lk-mega) i podmenu zostaja jak byly.
   Telefon (do 900 px) ma panel z wlasnymi regulami, wiec blok jest tylko od 901 px. */
@media (min-width: 901px) {
  .lk-nawigacja { margin-inline-start: 20px; }

  .lk-menu { gap: 6px; }

  .lk-menu__pozycja--poziom-1 {
    display: flex;
    align-items: center;
    height: 40px;
    border-radius: var(--lk-r-pigulka);
  }

  .lk-menu__pozycja--poziom-1:hover { background: var(--ink-100); }

  .lk-menu__pozycja--poziom-1 > .lk-menu__link {
    height: 40px;
    padding: 0 14px;
    border-radius: var(--lk-r-pigulka);
    font-family: var(--lk-font-naglowek);
    font-size: 15px;
    font-weight: 600;
    color: var(--lk-tusz);
  }

  .lk-menu__pozycja--poziom-1 > .lk-menu__link:hover {
    background: transparent;
    color: var(--lk-tusz);
  }

  .lk-menu__pozycja--rozwijana > .lk-menu__link { padding-inline-end: 6px; }

  .lk-menu__pozycja--rozwijana > .lk-menu__strzalka {
    width: 30px;
    height: 40px;
    justify-content: flex-start;
    padding-inline-end: 14px;
    border-radius: var(--lk-r-pigulka);
    color: var(--lk-tusz);
  }

  .lk-menu__pozycja--poziom-1 > .lk-menu__strzalka svg {
    width: 16px;
    height: 16px;
  }

  /* Obrys 2 w siatce 20 px, po zmniejszeniu do 16 px wychodzi 1,6 px; plansza (IK["w_dol"], 24 px, obrys 2) daje 1,33 px. */
  .lk-menu__pozycja--poziom-1 > .lk-menu__strzalka svg path { stroke-width: 1.67; }

  /* Pozycja biezaca: tlo na calej pigulce, nie tylko na linku (przy Shop pigulka to dwa elementy). */
  .lk-menu__pozycja--poziom-1.current-menu-item,
  .lk-menu__pozycja--poziom-1.current-menu-ancestor { background: var(--lk-akcent-tlo); }

  .lk-menu__pozycja--poziom-1.current-menu-item > .lk-menu__link,
  .lk-menu__pozycja--poziom-1.current-menu-ancestor > .lk-menu__link { background: transparent; }
}

/* Widocznoscia rozwijanych steruje klasa na pozycji, nie atrybut hidden.
   Powod: ta sama pozycja jest domyslnie ZWINIETA na pasku i ROZWINIETA
   w panelu na telefonie, a jeden atrybut nie opisze obu stanow naraz. */
.lk-menu__podmenu,
.lk-mega {
  display: none;
}

.lk-menu__pozycja.jest-otwarte > .lk-menu__podmenu,
.lk-menu__pozycja.jest-otwarte > .lk-mega {
  display: block;
}

.lk-menu__podmenu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 20;
  min-width: 240px;
  margin: 0;
  padding: var(--lk-s-2);
  list-style: none;
  background: var(--lk-papier);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
  box-shadow: var(--lk-cien-3);
}

.lk-menu__podmenu .lk-menu__link {
  display: flex;
  width: 100%;
  padding: .5rem .625rem;
}

/* --------------------------------------------------------------------------
   10a. Uslugi w menu: siatka platform

   Klient sklepu SMM wybiera najpierw platforme, dopiero potem usluge, wiec
   zamiast listy kilkunastu nazw dostaje siatke kafli ze znakiem platformy
   i liczba dostepnych uslug. Zrodlem sa kategorie produktow, nie recznie
   utrzymywana lista pozycji menu.
   -------------------------------------------------------------------------- */

.lk-mega {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 20;
  width: min(760px, calc(100vw - 2rem));
  padding: var(--lk-s-3);
  background: var(--lk-papier);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-3);
  box-shadow: var(--lk-cien-3);
}

/* Mostek przez odstep miedzy pozycja a panelem: bez niego mysz w drodze do
   siatki opuszcza pozycje i panel znika w polowie ruchu. */
.lk-mega::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -8px;
  height: 8px;
}

.lk-mega__siatka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--lk-s-1);
}

.lk-mega__kafel {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 52px;
  padding: .5rem .625rem;
  border: 1px solid transparent;
  border-radius: var(--lk-r-1);
  color: var(--lk-tusz);
  text-decoration: none;
  transition: background var(--lk-czas-szybki) var(--lk-ease), border-color var(--lk-czas-szybki) var(--lk-ease);
}

.lk-mega__kafel:hover,
.lk-mega__kafel:focus-visible {
  background: var(--lk-papier-2);
  border-color: var(--lk-linia);
}

.lk-mega__znak {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-1);
  background: var(--lk-papier);
  color: var(--lk-platforma-kolor, var(--lk-tusz-2));
}

.lk-mega__nazwa {
  flex: 1;
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  line-height: 1.2;
}

.lk-mega__liczba {
  color: var(--lk-przygaszony);
  font-size: var(--lk-t-mikro);
  font-weight: 600;
}

.lk-mega__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lk-s-2);
  margin-block-start: var(--lk-s-2);
  padding: .7rem .625rem .2rem;
  border-block-start: 1px solid var(--lk-linia);
  color: var(--lk-akcent-tekst);
  font-family: var(--lk-font-naglowek);
  font-size: var(--lk-t-maly);
  font-weight: 700;
  text-decoration: none;
}

.lk-mega__stopka svg { transition: transform var(--lk-czas-szybki) var(--lk-ease); }

.lk-mega__stopka:hover svg { transform: translateX(3px); }

/* Barwy marek platform. Mapowanie siedzi tutaj, a nie w arkuszu katalogu,
   bo menu jest na KAZDYM widoku, a arkusz katalogu wchodzi tylko na sklepie.
   Tokeny ma czterech platform; reszta zostaje w kolorze tekstu. */
.lk-platforma--instagram { --lk-platforma-kolor: var(--lk-instagram); }
.lk-platforma--facebook  { --lk-platforma-kolor: var(--lk-facebook); }
.lk-platforma--youtube   { --lk-platforma-kolor: var(--lk-youtube); }
.lk-platforma--tiktok    { --lk-platforma-kolor: var(--lk-tiktok); }

/* Najechanie otwiera uslugi takze bez skryptu; skrypt dokłada opoznienie
   zamkniecia i obsluge dotyku. Tylko na pasku - w panelu na telefonie
   rozwijaniem steruje dotkniecie kafla. */
@media (min-width: 901px) {
  .lk-menu__pozycja--rozwijana:hover > .lk-mega,
  .lk-menu__pozycja--rozwijana:hover > .lk-menu__podmenu,
  .lk-menu__pozycja--rozwijana:focus-within > .lk-mega,
  .lk-menu__pozycja--rozwijana:focus-within > .lk-menu__podmenu {
    display: block;
  }
}

/* Przycisk menu na telefonie i tablecie (pasek 1A, plansze k-t1 i k-t4): cel 44x44 bez ramki i tla, sama ikona. Trzy kreski
   to ikona menu3 z makiet (siatka 24 px): kreski 17,8 x 1,8 px (16 px + zaokraglone konce), odstep 5 px od srodka do srodka,
   w srodku przycisku. Przy aria-expanded="true" (jedno zrodlo stanu ustawia assets/js/liikye-naglowek.js) kreska pierwsza
   i trzecia obracaja sie o +/-45 stopni w X (ramie 18,8 px = skala 1,0545, jak ikona x z makiet), srodkowa znika. Bez drugiego
   SVG i bez osobnej klasy stanu. Kreski leza w srodku przycisku (inset i margines logiczne), wiec w arabskim nic sie nie zmienia.
   Przejscie kresek ma we wszystkich stanach ta sama liste funkcji transform (translateY, rotate, scaleX): przy roznych listach
   przegladarka interpoluje macierze i kreska wedruje po luku, a przy tej samej przesuwa sie w srodek i obraca bez wahniec. */
.lk-hamburger {
  position: relative;
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--lk-tusz);
  cursor: pointer;
}

.lk-hamburger__kreska {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  display: block;
  width: 17.8px;
  height: 1.8px;
  margin-block-start: -.9px;
  margin-inline-start: -8.9px;
  border-radius: 999px;
  background: currentColor;
  transition: transform var(--lk-czas) var(--lk-ease),
              opacity var(--lk-czas) var(--lk-ease);
}

.lk-hamburger__kreska:nth-child(1) { transform: translateY(-5px) rotate(0deg) scaleX(1); }
.lk-hamburger__kreska:nth-child(2) { transform: translateY(0) rotate(0deg) scaleX(1); }
.lk-hamburger__kreska:nth-child(3) { transform: translateY(5px) rotate(0deg) scaleX(1); }

.lk-hamburger[aria-expanded="true"] .lk-hamburger__kreska:nth-child(1) { transform: translateY(0) rotate(45deg) scaleX(1.0545); }
.lk-hamburger[aria-expanded="true"] .lk-hamburger__kreska:nth-child(2) { opacity: 0; }
.lk-hamburger[aria-expanded="true"] .lk-hamburger__kreska:nth-child(3) { transform: translateY(0) rotate(-45deg) scaleX(1.0545); }

/* Tryb wysokiego kontrastu systemu: tla elementow zastepuje tam kolor strony, a kreski sa rysowane tlem i nie maja ramki przycisku,
   wiec bez tej reguly przycisk menu bylby niewidoczny. Kolor systemowy ButtonText zostaje w trybie wymuszonych kolorow. */
@media (forced-colors: active) {
  .lk-hamburger__kreska { background: ButtonText; }
}

.lk-zaslona {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(22, 22, 26, .45);
}

/* --------------------------------------------------------------------------
   11. Przelaczniki jezyka i waluty
   -------------------------------------------------------------------------- */

.lk-jezyki { position: relative; }

.lk-jezyki__przycisk {
  display: inline-flex;
  align-items: center;
  gap: var(--lk-s-2);
  padding: .5rem .75rem;
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-pigulka);
  background: var(--lk-papier);
  color: var(--lk-tusz-2);
  font-family: inherit;
  font-size: var(--lk-t-maly);
  font-weight: 600;
  cursor: pointer;
}

.lk-jezyki__przycisk:hover { border-color: var(--lk-akcent); color: var(--lk-akcent-tekst); }

/* Przycisk jezyka W PASKU NAGLOWKA (plansza k-d1): pigulka 40 px bez ramki, szara (--ink-100), ciemniejsza po najechaniu i przy otwartej
   liscie, padding 0 14 px, 8 px miedzy ikona, nazwa i strzalka. Stopka i panel menu na telefonie zostaja przy regule wyzej. Na telefonie
   przycisk w pasku jest schowany (liikye-naglowek.css). Wrapper jako flex, zeby linia tekstu nie dodawala wysokosci pod pigulka. */
.lk-jezyki--naglowek { display: flex; }

.lk-jezyki--naglowek .lk-jezyki__przycisk {
  height: 40px;
  padding: 0 14px;
  border: 0;
  background: var(--ink-100);
  color: var(--lk-tusz);
}

.lk-jezyki--naglowek .lk-jezyki__przycisk:hover,
.lk-jezyki--naglowek.jest-otwarte .lk-jezyki__przycisk {
  background: var(--ink-200);
  color: var(--lk-tusz);
}

.lk-jezyki__strzalka { flex: none; }

/* Flaga kraju przy jezyku (plansze f1, k-d1, k-d3; liikye_flaga_jezyka() w inc/template-tags.php): prostokat 4:3 z promieniem 3 px i
   cienka obwodka rgba(14,15,17,.08), zeby biala flaga (Polska, Wielka Brytania) nie zlewala sie z szara pigulka i bialym tlem listy.
   Rozmiar niesie sam znacznik (width, height i style), bo globalne img { height: auto } liczyloby wysokosc z proporcji pliku. */
.lk-flaga {
  display: block;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(14, 15, 17, .08);
}

/* Lista jezykow W PASKU NAGLOWKA (plansza k-d3): karta 244 px, promien 16, cien, padding 6; wiersz 42 px, promien 10, 12 px odstepu, flaga
   22 px, nazwa 15 px (waga 500), biezacy jezyk pogrubiony na tle #f7f8fa z ptaszkiem w kolorze akcentu. 8 px pod pigulka (przycisk 40 px
   zaczyna sie 14 px od gory paska, lista 62 px). Stopka zostaje przy regule ogolnej nizej (sama nazwa, bez flag). */
.lk-jezyki--naglowek .lk-jezyki__lista {
  width: 244px;
  min-width: 0;
  max-height: none;
  overflow: visible;
  padding: 6px;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(14, 15, 17, .12), 0 0 0 1px rgba(14, 15, 17, .04);
}

.lk-jezyki--naglowek .lk-jezyki__lista a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  color: var(--lk-tusz);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* Arabska nazwa jezyka stoi na liscie KAZDEGO jezyka (takze na stronach lacinskich, gdzie liikye-rtl.css sie nie laduje). Kroj zastepczy
   "Liikye Text zastepczy" (local Arial, size-adjust) jest skalibrowany pod lacine i zmniejsza arabskie litery o ok. 21 procent wzgledem
   planszy k-d3 (33,5 px zamiast 42,5 px). Jak w liikye-rtl.css dla paska: lacinski kroj pierwszy, dalej kroj systemowy w rzeczywistym rozmiarze. */
.lk-jezyki--naglowek .lk-jezyki__lista a[lang="ar"] {
  font-family: "Liikye Text", ui-sans-serif, system-ui, sans-serif;
}

.lk-jezyki--naglowek .lk-jezyki__lista .jest-wybrany a {
  background: var(--ink-50);
  color: var(--lk-tusz);
  font-weight: 700;
}

.lk-jezyki--naglowek .lk-jezyki__lista a:hover,
.lk-jezyki--naglowek .lk-jezyki__lista a:focus-visible {
  background: var(--ink-100);
}

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

.lk-jezyki__ptaszek {
  flex: none;
  color: var(--lk-akcent);
}

/* Lista jezykow chowa sie tak samo jak podmenu i uslugi: klasa na kontenerze,
   nie atrybut hidden. Wczesniej stala na hidden i po przejsciu menu na klasy
   przestala sie otwierac, bo skrypt nie mial juz komu zdejmowac atrybutu.
   Jeden mechanizm w calym motywie zamiast dwoch. */
.lk-jezyki__lista { display: none; }

.lk-jezyki.jest-otwarte > .lk-jezyki__lista { display: block; }

.lk-jezyki__lista {
  position: absolute;
  inset-block-end: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 30;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: var(--lk-s-2);
  list-style: none;
  background: var(--lk-papier);
  border: 1px solid var(--lk-linia);
  border-radius: var(--lk-r-2);
  box-shadow: var(--lk-cien-3);
}

.lk-jezyki--naglowek .lk-jezyki__lista {
  inset-block-end: auto;
  inset-block-start: calc(100% + 8px);
}

.lk-jezyki__lista a {
  display: block;
  padding: .45rem .625rem;
  border-radius: var(--lk-r-1);
  font-size: var(--lk-t-maly);
  text-decoration: none;
}

.lk-jezyki__lista a:hover { background: var(--lk-papier-2); }

.lk-jezyki__lista .jest-wybrany a { color: var(--lk-akcent-tekst); font-weight: 700; }

.lk-waluty select { width: auto; padding: .45rem 2rem .45rem .75rem; font-size: var(--lk-t-maly); }

/* --------------------------------------------------------------------------
   12. Stopka
   -------------------------------------------------------------------------- */

.lk-stopka {
  margin-block-start: var(--lk-s-9);
  padding-block: var(--lk-s-7) var(--lk-s-5);
  background: var(--lk-papier-2);
  border-block-start: 1px solid var(--lk-linia);
  font-size: var(--lk-t-maly);
  color: var(--lk-tusz-2);
}

.lk-stopka__gora {
  display: grid;
  gap: var(--lk-s-6);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding-block-end: var(--lk-s-6);
}

/* Znak marki w stopce jest WIEKSZY niz w pasku nawigacji (2 rem wobec 1,5):
   w naglowku konkuruje z menu i koszykiem, a w stopce jest jedynym elementem
   marki na calej szerokosci kolumny i ma domykac strone. Na telefonie schodzi
   do 1,6 rem, zeby nie przykrywal zdania pod soba. */
.lk-stopka__marka .lk-logo--tekst { font-size: 2rem; }

@media (max-width: 899px) {
  .lk-stopka__marka .lk-logo--tekst { font-size: 1.6rem; }
}

.lk-stopka__opis { margin-block-start: var(--lk-s-3); max-width: 40ch; }

.lk-widget__title,
.lk-stopka__kolumna h3 {
  font-size: var(--lk-t-maly);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lk-tusz);
  margin-block-end: var(--lk-s-3);
}

.lk-stopka__lista,
.lk-stopka ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lk-stopka li { margin-block-end: var(--lk-s-2); }

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

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

.lk-stopka__ustawienia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s-3);
}

.lk-stopka__lista--pozioma {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lk-s-4);
}

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

.lk-stopka__prawa {
  margin: 0;
  margin-inline-start: auto;
  color: var(--lk-przygaszony);
  font-size: var(--lk-t-mikro);
  text-align: end;
}

/* --------------------------------------------------------------------------
   13. Punkty zlamania
   -------------------------------------------------------------------------- */

/* Napis przy ikonie konta schowany tylko ponizej 1024 px: plansza k-d8 (najwezszy komputer, 1024 px) pokazuje go po niemiecku. */
@media (max-width: 1023px) {
  .lk-konto__etykieta { display: none; }
}

@media (max-width: 900px) {
  :root { --lk-naglowek-h: 60px; }

  /* Minimalny cel dotkniecia. Ruch sklepu to glownie telefony, a palec nie
     trafia w kontrolke o wysokosci 32 px. Dotyczy kazdego elementu, ktory
     realnie sie klika. Przyciski paska (menu i koszyk) maja wlasne cele 44x44
     z makiety paska 1A i nie wchodza do tej grupy. */
  .lk-przycisk,
  .lk-konto,
  .lk-jezyki__przycisk,
  .lk-menu__link,
  .lk-menu__strzalka,
  .lk-strony .page-numbers {
    min-height: var(--lk-tap-min);
  }

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

  /* PASEK TELEFONU I TABLETU 1A (plansze k-t1 .. k-t5): logo 20 px od krawedzi poczatku, z prawej trzy przyciski 44x44 bez
     odstepow (lupa wtyczki, koszyk, menu), ostatni 8 px od krawedzi (w arabskim lustrzanie), pasek 60 px + linia 1 px.
     Margines boczny kontenera (clamp 20-40 px) rosnie z oknem (30,7 px przy 768), a makieta trzyma 20 px takze na tablecie,
     wiec pasek ma wlasne odstepy. */
  .lk-naglowek__wnetrze {
    gap: 0;
    padding-inline: var(--gutter-mobile) var(--lk-s-2);
  }

  /* Kasa skupiona (bez przyciskow, makieta kasy T1 m-gora: 0 16px): logo i napis o bezpiecznej platnosci (element z PHP,
     inc/sklep-koszyk.php) 16 px od krawedzi, jak tresc kasy pod nimi. Bez tej reguly koniec paska mialby 8 px przeznaczone
     na przycisk menu, ktorego na kasie nie ma. */
  body.lk-kasa-skupiona .lk-naglowek__wnetrze { padding-inline: 16px; }

  .lk-hamburger { display: block; }

  /* Koszyk: sama ikona 24 px w celu 44x44 (kolor tuszu, bez tla, takze po dotknieciu). Kolko z liczba siedzi w rogu ikony
     (gora 3 px, koniec 1 px, 20 px wysokosci, szersze przy dwoch cyfrach, bialy pierscien 2 px) i jest TYLKO przy liczbie > 0:
     klase lk-koszyk__licznik--pusty daja serwer (inc/template-tags.php), fragment WooCommerce (inc/woocommerce.php) i skrypt
     naglowka (assets/js/liikye-naglowek.js). display:flex zamiast inline-flex, zeby linia tekstu nie rozciagala opakowania. */
  .lk-koszyk,
  .lk-koszyk:hover {
    display: flex;
    justify-content: center;
    gap: 0;
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--lk-tusz);
  }

  .lk-koszyk__ikona {
    width: 24px;
    height: 24px;
  }

  .lk-koszyk .woo-mini-count {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 1px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--lk-akcent);
    box-shadow: 0 0 0 2px var(--lk-papier);
    color: #fff;
    font-size: 11px;
    line-height: 20px;
  }

  .lk-koszyk .lk-koszyk__licznik--pusty { display: none; }

  /* Pozycja, cien i przejscie panelu .lk-nawigacja: assets/css/liikye-naglowek.css (RTL:
     assets/css/liikye-naglowek-rtl.css). Martwy duplikat usuniety tutaj w zadaniu 9.7 (motyw 0.15.3, #1256, #1262):
     ta kopia (88vw/360px, bez visibility) byla bez skutku - liikye-naglowek.css laduje sie ZAWSZE PO tym arkuszu
     (priorytet enqueue 26 kontra 20) i ma tu ten sam selektor 0,1,0, wiec kazda jej wlasciwosc przegrywala
     kolejnoscia. Prawdziwy koszt: assets/css/liikye-rtl.css mial poprawke kierunku WLASNIE dla tej martwej kopii
     (jedyny plik z dzialajacym wtedy mechanizmem RTL), a nowy plik nie mial wlasnego -rtl.css, wiec poprawka RTL
     nigdy nie docierala do panelu, ktory realnie widac. */

  .lk-menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--lk-s-1);
  }

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

  .lk-menu__link {
    flex: 1;
    padding: .875rem .25rem;
    font-size: var(--lk-t-baza);
  }

  .lk-menu__strzalka { width: 36px; height: 36px; }

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

  .lk-stopka__prawa { margin-inline-start: 0; text-align: start; }
}

@media (max-width: 640px) {
  .lk-promo__wnetrze { flex-direction: column; gap: var(--lk-s-2); }

  .lk-kafle { grid-template-columns: repeat(2, 1fr); }

  .lk-zakladki { flex-direction: column; gap: 0; }

  .lk-zakladka { border-radius: var(--lk-r-2) var(--lk-r-2) 0 0; }

  .lk-panel-zakladki { border-radius: 0 0 var(--lk-r-2) var(--lk-r-2); }
}

/* Uzytkownik prosi o ograniczenie ruchu: zdejmujemy animacje i plynne
   przewijanie, zostawiamy same zmiany stanu. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   14. Pomocnicze
   -------------------------------------------------------------------------- */

.screen-reader-text,
.lk-tylko-dla-czytnika {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto;
  height: auto;
  margin: 0;
  clip-path: none;
}

[hidden] { display: none !important; }