/* =====================================================================
   abc24.pl - styl sklepow (multi-tenant, 1200 px)
   Przeniesiony ze styl_uniwersalny.css z iq24.pl (2026-09-04, migracja
   abc24.pl) - ten sam sprawdzony mechanizm, ktorego user zazadal wprost:
   szerokosc 1200 px, tryb jasny/ciemny na tokenach CSS oraz indywidualna
   regulacja czcionki A-/A+ (ciasteczka abc24_motyw / abc24_czcionka,
   zapisywane WYLACznie przez public/js/preferencje.js).
   Zastepuje tabelkowy uklad starych styl_sklepuN.css (12 wariantow).
   ===================================================================== */

/* ===================================================== RESET / PODSTAWY */

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

html {
  /* 100% = domyslny rozmiar przegladarki (zwykle 16px); --skala mnozy go,
     NIE mnozy wlasnego font-size (uniknieta cyrkularnosc rem-do-rem). */
  font-size: calc(100% * var(--skala, 1));
  /* Powtorzone tu, nie tylko na body (patrz komentarz nizej) - iOS Safari
     potrafi przewijac strone w poziomie w oparciu o <html>, ignorujac samo
     overflow-x:hidden na <body> (rozjazd zgloszony 2026-08-24 mimo poprzedniej
     "naprawy" - Chrome nie ma tego rozroznienia, stad czysty wynik w testach). */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tekst);
  background: var(--tlo);
  /* Siatka bezpieczenstwa przeciw poziomemu przewijaniu calej strony na mobile
     (user 2026-08-24: overflow-wrap na .post__stopka nie wystarczylo na iPhonie/
     Safari mimo ze w Chromium mierzylo sie czysto - prawdopodobnie różnica
     silnika). Elementy celowo szerokie (np. bloki kodu nizej) maja WLASNY
     overflow-x:auto i dalej przewijaja sie wewnetrznie - to ograniczenie
     dotyczy wylacznie calej STRONY jako calosci. */
  overflow-x: hidden;
}

a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--link-hover-tekst); background: var(--link-hover-tlo); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--link-hover-tlo);
  outline-offset: 1px;
}

h1 { font-size: 1.5rem; font-weight: bold; text-wrap: balance; margin: 0.6em 0; }
h2 { font-size: 1.125rem; font-weight: bold; margin: 0.6em 0; }
/* Tytul strony (nazwa produktu/kategorii itp.) - od audytu SEO 2026-09-26
   jest to <h1> (wczesniej <h2>), ale wyglada dokladnie jak dotychczasowy h2. */
h1.s24-tytul { font-size: 1.125rem; }
/* Tylko dla wyszukiwarek i czytnikow ekranu, niewidoczne na stronie. */
.s24-niewidoczny {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* tlo/kolor jawnie, nie tylko font - <meta name="color-scheme" content="light
   dark"> w layouts/sklep.php (potrzebne, zeby np. suwaki/scrollbar tez
   podazaly za motywem) ma efekt uboczny: przegladarka sama nakleja WLASNE,
   natywne ciemne tlo na kazdy input/textarea/select bez jawnego tla, gdy
   system/przegladarka odwiedzajacego jest w trybie ciemnym - NIEZALEZNIE od
   wybranego na stronie data-motyw="jasny" (zgloszenie usera: pola logowania,
   Szukaj, ShoutBox wygladaly na ciemno mimo jasnego motywu strony). */
textarea, input, select {
  font-family: var(--font);
  font-size: 0.875rem;
  background: var(--tlo-karty);
  color: var(--tekst-mocny);
  /* <select> sam sie rozciaga do szerokosci najdluzszej <option> (nazwy
     dzialow potrafia byc dlugie) i bez tego wychodzil poza ramke na mobile
     (zgloszenie usera - "przenieś do działu" w administruj-tematem.php). */
  max-width: 100%;
}
button {
  font-family: var(--font);
  font-size: 0.875rem;
}

img { max-width: 100%; height: auto; }

table { border-collapse: collapse; } /* tresc wlasciciela forow czesto ma wlasne tabele */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ===================================================== TOKENY: JASNY */

:root {
  --font: verdana, tahoma, helvetica, arial, sans-serif;

  --tlo: #FFFFFF;
  --tlo-karty: #f7f7fb;
  --tlo-karty-alt: #ececf5;
  --tekst: #535353;
  --tekst-mocny: #272727;
  --tekst-przygaszony: #6b6b6b;

  --link: #3300CC;
  --link-hover-tekst: #000000;
  --link-hover-tlo: #ff9a00;

  --akcent-tekst: #000099;
  --akcent-tlo: #C9CDEF;

  --naglowek-tekst: #ffffff;
  --naglowek-tlo: #5353C4;

  --tytul-watku: #330099;
  --tytul-watku-alt: #B74F35;

  --komunikat-neutralny-tlo: #C9CDEF;
  --komunikat-neutralny-ramka: #000099;
  --komunikat-pozytywny-tlo: #C8E2C5;
  --komunikat-pozytywny-ramka: #41893D;
  --komunikat-negatywny-tlo: #FAD0C9;
  --komunikat-negatywny-ramka: #FF0000;

  --przycisk-tlo: #6c7bff;
  --przycisk-tekst: #ffffff;
  --przycisk-tlo-cichy: #e4e4e4;
  --przycisk-tekst-cichy: #3a3a3a;

  --linia: #d8d8e6;
  --ramka-obwodka: #000099;

}

/* ===================================================== TOKENY: CIEMNY */

/* User 2026-08-06: "niech domyslnym trybem bedzie tryb jasny" - bez
   ciasteczka strona ZAWSZE startuje jasno, niezaleznie od preferencji
   systemu/przegladarki odwiedzajacego. Ciemny wlacza sie WYLACZNIE
   jawnym wyborem w przelaczniku (data-motyw="ciemny" ponizej) - celowo
   USUNIETY wczesniejszy @media (prefers-color-scheme:dark) fallback. */
:root[data-motyw="ciemny"] {
  --tlo: #1a1c25;
  --tlo-karty: #242631;
  --tlo-karty-alt: #2b2e3a;
  --tekst: #d8d9e2;
  --tekst-mocny: #eef0f8;
  --tekst-przygaszony: #a9abb8;

  --link: #8c96ff;
  /* Pomaranczowe tlo jak w jasnym motywie (user 2026-08-06: probowalismy
     innej barwy tla - #aab3ff - ale user wrocil do pomaranczowego "co
     poprzednio", tylko z czarnym tekstem zamiast #1a1c25 tla strony -
     "po najechaniu zmieniaj kolor czcionki na czarny"). Efekt: hover w
     ciemnym motywie identyczny jak w jasnym. */
  --link-hover-tekst: #000000;
  --link-hover-tlo: #ff9a00;

  --akcent-tekst: #c7ccff;
  --akcent-tlo: #2b2e6b;

  --naglowek-tekst: #e4e6ff;
  --naglowek-tlo: #3d3f8f;

  --tytul-watku: #a6b0ff;
  --tytul-watku-alt: #e08a6f;

  --komunikat-neutralny-tlo: #2b2e6b;
  --komunikat-neutralny-ramka: #8c96ff;
  --komunikat-pozytywny-tlo: #1f3d24;
  --komunikat-pozytywny-ramka: #5fbf68;
  --komunikat-negatywny-tlo: #3d1f1f;
  --komunikat-negatywny-ramka: #ff6b6b;

  --przycisk-tlo-cichy: #333648;
  --przycisk-tekst-cichy: #d8d9e2;

  --linia: #383b4a;
  --ramka-obwodka: #4d51a8;
}

/* ===================================================== UKLAD STRONY */

.s24-ramka {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

/* ===================================================== PASEK MOTYWU */
/* Przelacznik motywu + A-/A+ (public/js/preferencje.js), jedyna zawartosc
   .masz (user 2026-09-11: usunieta widoczna nazwa sklepu nad trescia -
   ".tytul-forum" byl doslownie skopiowany z iq24.pl razem z komentarzami
   o "forum"/"maszcie" - abc24 nie ma czegos takiego, nazwa sklepu zostaje
   TYLKO w <title>/og:title, patrz $tytul w layouts/sklep.php). .masz ma
   teraz justify-content:flex-end (patrz nizej), wiec ten pasek sam ustawia
   sie po prawej bez potrzeby dzielenia wiersza z niczym innym.
   .preferencje grupuje tylko A-/A+ (odstep miedzy nimi wlasny), przycisk
   motywu jest bezposrednim dzieckiem .pasek-motywu - styl przycisku wspolny
   dla obu przez selektor ponizej. */

.s24-pasek-motywu { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: 0; }
.s24-preferencje { display: flex; gap: 4px; align-items: center; }
.s24-pasek-motywu button {
  background: var(--przycisk-tlo-cichy);
  color: var(--przycisk-tekst-cichy);
  border: 1px solid var(--linia);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.s24-pasek-motywu button:hover { background: var(--link-hover-tlo); color: #000; }

/* ===================================================== BELKA GORNA */

/* Belka gorna (user 2026-09-11: poprzedni styl byl skopiowany 1:1 z iq24 -
   .belka-gorna__login/--stopka nigdy nie byly tu uzywane, sprzatniete;
   "justify-content:space-between" na WSZYSTKICH linkach naraz rozciagalo
   je rownomiernie na cala szerokosc - nieczytelne przy szerokim sklepie).
   Teraz: linki po lewej w jednej grupie (blisko siebie), koszyk po prawej,
   card-owy wyglad spojny z reszta chromu (.menu-boczne, .produkt). */
.s24-belka-gorna {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  background: var(--tlo-karty);
  border: 1px solid var(--naglowek-tlo);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 0.8125rem;
}
.s24-belka-gorna__linki { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.s24-belka-gorna a {
  color: var(--tekst);
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.s24-belka-gorna a:hover { color: var(--link-hover-tekst); background: var(--link-hover-tlo); }
/* Separator miedzy linkami - user 2026-09-11: "kropka nie powinna byc
   z linkiem tylko tekstem pomiedzy linkami" - poprzednia wersja (::after
   NA linku) dzielila hover/kolor linku z kropka, co nie o to chodzilo.
   Teraz osobny, nieklikalny <span> miedzy <a> (patrz layouts/sklep.php). */
.s24-belka-gorna__sep { color: var(--tekst-przygaszony); }
.s24-belka-gorna__koszyk { font-weight: 700; }
@media (max-width: 700px) {
  .s24-belka-gorna { justify-content: center; }
  .s24-belka-gorna__linki { justify-content: center; }
}

/* ===================================================== OKRUSZKI */

.s24-okruszki {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 8px 0;
  font-size: 0.8125rem;
}
.s24-okruszki a { text-decoration: underline; }

/* ===================================================== KOMUNIKATY */

.s24-komunikat {
  border: 1px solid;
  border-radius: 4px;
  padding: 10px;
  margin: 8px 0;
  text-align: center;
}
.s24-komunikat--neutralny { background: var(--komunikat-neutralny-tlo); border-color: var(--komunikat-neutralny-ramka); color: var(--akcent-tekst); }
.s24-komunikat--pozytywny { background: var(--komunikat-pozytywny-tlo); border-color: var(--komunikat-pozytywny-ramka); color: #1f3d24; }
.s24-komunikat--negatywny { background: var(--komunikat-negatywny-tlo); border-color: var(--komunikat-negatywny-ramka); color: #5a1a1a; }
:root[data-motyw="ciemny"] .s24-komunikat--pozytywny { color: var(--tekst-mocny); }
:root[data-motyw="ciemny"] .s24-komunikat--negatywny { color: var(--tekst-mocny); }

/* ===================================================== LISTY (dzialy/tematy) */

.s24-lista { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; border-radius: 4px; overflow: hidden; }
.s24-lista__kategoria {
  background: var(--akcent-tlo);
  color: var(--akcent-tekst);
  padding: 8px 10px;
  margin: 8px 0 2px;
  border-radius: 4px;
  font-size: 0.8125rem;
}
.s24-lista__kategoria-nazwa { font-size: 1.0625rem; font-weight: bold; margin-right: 8px; }
.s24-lista__naglowek {
  display: grid;
  gap: 8px;
  background: var(--naglowek-tlo);
  color: var(--naglowek-tekst);
  font-size: 0.6875rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 10px;
}
.s24-lista__wiersz {
  display: grid;
  gap: 8px;
  align-items: center;
  background: var(--tlo-karty);
  padding: 8px 10px;
}
.s24-lista__wiersz:nth-child(even) { background: var(--tlo-karty-alt); }
.s24-lista__tytul { display: block; font-size: 1rem; font-weight: bold; }
.s24-lista__tytul a { color: var(--tytul-watku); text-decoration: underline; }
/* Bez tego ":hover" tutaj, samo "a:hover" nie wygrywalo - rowna
   specyficznosc (0,1,1) z ".lista__tytul a" powyzej, a ta jest PO
   "a:hover" w pliku, wiec przy remisie wygrywala kolejnosc zrodlowa
   (user 2026-08-06: "czcionki nie zmieniaja sie na czarny po najechaniu
   w ciemnym motywie" - ten sam mechanizm co wczesniejszy blad .bbc/a.bbc
   w tej samej sesji). Ten sam wzorzec co .belka-gorna a:hover ponizej. */
.s24-lista__tytul a:hover { color: var(--link-hover-tekst); background: var(--link-hover-tlo); }
.s24-lista__opis { display: block; font-size: 0.8125rem; color: var(--tekst-przygaszony); margin-top: 2px; }
.s24-lista__licznik { text-align: center; font-size: 0.875rem; white-space: nowrap; }
.s24-lista__ostatni { font-size: 0.75rem; color: var(--tekst-przygaszony); }

@media (max-width: 768px) {
  .s24-lista__naglowek { display: none; }
  .s24-lista__wiersz { grid-template-columns: 1fr !important; gap: 2px; }
  .s24-lista__licznik { text-align: left; }
  .s24-lista__licznik::before { content: attr(data-etykieta) ": "; font-weight: bold; }
}

/* ===================================================== POSTY (watek.php) */

.s24-post { display: flex; gap: 12px; background: var(--tlo-karty); border-radius: 4px; padding: 10px; margin: 8px 0; }
.s24-post__autor {
  flex: 0 0 160px;
  font-size: 0.75rem;
  color: var(--tekst-przygaszony);
  text-align: center;
  overflow-wrap: anywhere;
  border-right: 1px solid var(--linia);
  padding-right: 12px;
}
.s24-post__autor strong { font-size: 0.9375rem; color: var(--tekst-mocny); }
.s24-post__autor img { border-radius: 4px; }
/* Gorna czesc bloku autora (nick+gwiazdki+avatar+ranga) w .post__autor-top
   (user 2026-08-20: kompaktowy poziomy wariant na telefonie zamiast
   pionowego stosu). Desktop: kazde dziecko wlasny block z odstepem pod spodem
   - ten sam wizualny efekt co dawny rekny <br> miedzy elementami, ale bez
   ryzyka podwojnego odstepu gdy jakis element (np. <strong>) sam jest juz
   block-level (patrz wczesniejszy incydent tego samego dnia z display:block
   na .post__autor strong). Reszta bloku (ZGLOS WPIS/QTH) - .post__autor-linia,
   ten sam mechanizm, osobno bo NIE wchodzi w sklad kompaktowego wariantu. */
/* margin:0 AUTO (nie tylko 0) - user 2026-08-20: "nie jest wyśrodkowane,
   ranga i avatar do lewej idzie". Tekstowe dzieci (<strong>/<span>) i tak sa
   pelnej szerokosci jako block, wiec centruja sie przez text-align:center
   z .post__autor - ale <img> (avatar/gwiazdki) to element zastepowany,
   jego wlasny block-box ma szerokosc RÓWNĄ obrazkowi, nie 100% rodzica,
   wiec text-align go nie rusza - potrzebuje wlasnego margin:auto. */
.s24-post__autor-top > * { display: block; margin: 0 auto 4px; }
.s24-post__autor-top > *:last-child { margin-bottom: 0; }
.s24-post__autor-linia { display: block; margin-top: 4px; }
.s24-post__tresc { flex: 1 1 auto; min-width: 0; }
.s24-post__tresc-glowna { overflow-wrap: break-word; }
/* [yt] BBCode (user 2026-08-15) - dawniej sztywne width/height="730x440" na
   iframe wychodzilo poza kolumne na telefonie. 90% szerokosci kolumny, max
   tyle co dawniej (730px), proporcje 730:440 pilnowane przez aspect-ratio
   zamiast przeliczania wysokosci w JS/PHP. */
.s24-yt-embed { width: 90%; max-width: 730px; aspect-ratio: 730 / 440; border: 0; display: block; margin: 0 auto; }
/* [yt] w opisach produktow/tresci sprzedawcy (TrescSprzedawcy::oczysc) daje
   klase BEZ przedrostka "yt-embed" - bez tej reguly iframe mial domyslne
   300x150 px (user 2026-10-01). Pelna szerokosc kolumny, proporcje 16:9. */
.yt-embed { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; display: block; margin: 12px 0; }
/* [vimeo] BBCode - ten sam powod co .yt-embed wyzej, wlasne proporcje 16:9. */
.s24-vimeo-embed { width: 90%; max-width: 640px; aspect-ratio: 640 / 360; border: 0; display: block; margin: 0 auto; }
/* [bimg] BBCode (user 2026-08-18, poprawka tego samego dnia) - domyslnie
   kompaktowy (max 760px, jak dawny sztywny atrybut width - patrz Bbcode.php).
   Klik (public/js/ui.js, [data-bimg-przelacz]) otwiera .bimg-nakladka:
   pelnowymiarowa nakladka NAD calym layoutem forum (position:fixed,
   zamierzenie - nie w waskiej kolumnie tresci posta), klik na nakladce albo
   Escape zamyka. Zero <a>/target="_blank" - user nie chcial otwierania
   w nowej karcie.
   WAZNE - width:90% jest wymagane, samo max-width NIE WYSTARCZY: klasa
   .bimg (specyficznosc 0,1,0) jest bardziej specyficzna niz globalne
   img{max-width:100%} wyzej (0,0,1), wiec CALKOWICIE je nadpisuje, nie
   "zaostrza" - bez wlasnego width sam max-width:760px potrafil renderowac
   sie SZERZEJ niz mobilny viewport (np. 1920px oryginal -> 760px, ciagle
   za szeroki na telefonie), rozwalajac layout (user 2026-08-18: "grafiki
   [bimg] w wersji mobilnej sie wysypuja"). width:90% liczy sie wzgledem
   kolumny, wiec nigdy nie przekroczy jej szerokosci - ten sam sprawdzony
   wzorzec co .yt-embed/.vimeo-embed nizej/wyzej (width:90% + max-width jako
   gorny limit na szerokich ekranach). */
.s24-bimg { width: 90%; max-width: 760px; cursor: zoom-in; }
.s24-bimg-nakladka {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
  cursor: zoom-out;
}
.s24-bimg-nakladka img { max-width: 95vw; max-height: 95vh; width: auto; height: auto; cursor: zoom-out; }
.s24-post__stopka { margin-top: 8px; font-size: 0.75rem; color: var(--tekst-przygaszony); display: flex; flex-wrap: wrap; gap: 8px; overflow-wrap: break-word; min-width: 0; }
/* Numer wpisu/data przeniesione z lewej sekcji (user 2026-08-06). */
.s24-post__nrwpisu { font-size: 0.75rem; color: var(--tekst-przygaszony); margin-bottom: 6px; }
/* Blok admina (IP/Tracker) przeniesiony na koniec prawej sekcji - "delikatne
   odciecie" tlem, nie ostry czerwony komunikat (to nie blad/ostrzezenie). */
.s24-post__admin { margin-top: 8px; padding: 6px 8px; background: var(--tlo-karty-alt); border-radius: 4px; font-size: 0.75rem; color: var(--tekst-przygaszony); }

/* Core\Bbcode::render() opakowuje kazdy [quote] w <div class="cytuj"> (patrz
   Bbcode.php ~168-174) - klasa ta byla stylowana w kazdym starym
   styl_forumN.css, ale zabraklo jej w nowym arkuszu, wiec cytaty w tresci
   wpisu nie odrozznialy sie wizualnie od reszty (zgloszenie usera). */
.s24-cytuj { background: var(--tlo-karty-alt); border: 1px solid var(--linia); border-radius: 4px; padding: 8px 10px; margin: 6px 0; overflow-wrap: break-word; }

/* Core\Bbcode::render() opakowuje kazdy [code] w <pre class="kod"><code>
   (user 2026-08-20: "przydalaby sie obsluga bbcode [code]"). Wlasny
   overflow-x zamiast overflow-wrap - kod NIE ma sie zawijac w polowie
   tokenu jak zwykly tekst, dluzsze linie przewijaja sie w obrebie wlasnego
   pudelka, nie rozpychaja calej strony (ten sam wzorzec co .table-wrap dla
   szerokich tabel). */
.s24-kod {
  background: var(--tlo-karty-alt);
  border: 1px solid var(--linia);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 6px 0;
  overflow-x: auto;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre;
}

@media (max-width: 600px) {
  .s24-post { flex-direction: column; }
  /* .post__autor jako CALOSC zostaje zwyklym blokiem pelnej szerokosci
     (NIE flex - wczesniejsza proba flexowania calego kontenera sciskala
     tekst do wasko-auto-liczonej kolumny, a overflow-wrap:anywhere
     potrzebne na sztywnej 160px kolumnie desktop lamalo go pojedynczymi
     znakami w pionie). */
  .s24-post__autor {
    flex: none;
    width: 100%;
    text-align: center;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--linia);
    padding-bottom: 10px;
  }
  /* Kompaktowy POZIOMY wariant (nick+gwiazdki+avatar+ranga w jednej linii)
     wyprobowany 2026-08-20 i COFNIETY tego samego dnia - user: "źle to
     wygląda wróć do poprzedniego formatowania". .post__autor-top wraca do
     zwyklego pionowego stosu (dziedziczy display:block z bazowej reguly
     wyzej w pliku - nie trzeba nic tu nadpisywac). Jedyne co ZOSTAJE z tamtej
     proby: mniejszy avatar na telefonie (user: "użyj zmniejszonego avatara
     tak jak to teraz wygląda") - reszta bloku (nick/gwiazdki/ranga) wraca do
     pelnego rozmiaru/ukladu jak przed kompaktowym wariantem. */
  .s24-post__avatar-img { width: 32px; height: 32px; object-fit: cover; }
}

/* ===================================================== FORMULARZE */

.s24-formularz { display: flex; flex-direction: column; gap: 12px; max-width: 480px; margin: 12px 0; }
/* width:100% (nie tylko max-width) - potrzebne gdy .formularz jest dzieckiem
   flex-rowa (np. .belka-gorna przy odpowiedzi w watku/nowym temacie): bez
   niego formularz kurczyl sie do szerokosci tresci zamiast wypelniac ramke
   (zgloszenie usera - pasek BBCode i pole tekstowe zajmowaly pol szerokosci). */
.s24-formularz--szeroki { max-width: 100%; width: 100%; }
.s24-pole { display: flex; flex-direction: column; gap: 4px; }
.s24-pole label { font-weight: bold; font-size: 0.8125rem; }
/* :not(checkbox/radio) - bez tego wykluczenia ta regula (zwlaszcza
   width:100%) naciagala tez checkboxy (np. /ustawienia: powiadomienia) na
   pelna szerokosc wiersza zamiast malego kwadracika - zgloszenie usera
   "rozjechały się checkboxy z opisami". */
.s24-pole input:not([type="checkbox"]):not([type="radio"]), .s24-pole select, .s24-pole textarea {
  padding: 6px 8px;
  border: 1px solid var(--linia);
  border-radius: 3px;
  background: var(--tlo-karty);
  color: var(--tekst-mocny);
  width: 100%;
}
.s24-pole textarea { resize: vertical; min-height: 6rem; }
.s24-pole .s24-podpowiedz { font-size: 0.75rem; color: var(--tekst-przygaszony); }
.s24-pole input[type="checkbox"], .s24-pole input[type="radio"] { width: auto; flex-shrink: 0; }
.s24-formularz .s24-dalej_btn, .s24-formularz button[type="submit"] {
  align-self: flex-start;
  background: var(--przycisk-tlo);
  color: var(--przycisk-tekst);
  border: 0;
  border-radius: 4px;
  padding: 8px 20px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}

/* ===================================================== EDYTOR / BBCODE */

.s24-bbc-pasek { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }
/* .bbc nie jest juz scope'owana do .bbc-pasek - uzywana tez samodzielnie
   (ZGLOS WPIS / ODPOWIEDZ CYTUJACA w watek.php, user 2026-08-06: "sformatuj
   go w takim stylu jak przyciski do dodawania [bbcode]"). Celowo BEZ "a.bbc"
   w selektorze - (0,1,1) bylo bardziej specyficzne niz .bbc--male ponizej
   (0,1,0), wiec modyfikator byl cicho przegrywany na kazdej wlasciwosci,
   ktora probowal nadpisac (zgloszenie usera: "nie widzę zmniejszenia").
   Sama ".bbc" wystarcza (dopasowuje <a> i <button> jednakowo), a rownej
   specyficznosci z .bbc--male rostrzyga juz kolejnosc w pliku. */
.s24-bbc-pasek button, .s24-bbc {
  display: inline-block;
  background: var(--przycisk-tlo);
  color: var(--przycisk-tekst);
  border: 0;
  border-radius: 3px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
}
.s24-bbc-pasek button:hover, .s24-bbc:hover { filter: brightness(1.1); }
/* Modyfikator dla ZGLOS WPIS / ODPOWIEDZ CYTUJAC (user 2026-08-06: "duzo
   mniejszymi czcionkami", potem "jeszcze mniejsze i może bez bold") - tylko
   te dwa, NIE pasek BBCode w edytorze. */
.s24-bbc--male { font-size: 0.5rem; padding: 1px 5px; font-weight: normal; }
/* edytor.js chowa/pokazuje przez atrybut [hidden], nie klase - nie dawac tu
   bezwarunkowego display na klasie, bo wygralby z UA-owym [hidden]. */
.s24-paleta-emotikon { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px 0; }
.s24-paleta-emotikon[hidden] { display: none; }
.s24-paleta-emotikon button { background: none; border: 0; padding: 1px; cursor: pointer; }

/* ===================================================== STRONICOWANIE */

.s24-stronicowanie { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; font-size: 0.8125rem; }
.s24-stronicowanie a { text-decoration: underline; }
.s24-stronicowanie__biezaca { color: var(--tytul-watku); font-weight: bold; text-decoration: none; }

/* ===================================================== SHOUTBOX */

.s24-shoutbox { background: var(--tlo-karty); border-radius: 4px; padding: 10px; margin: 8px 0; }
.s24-shoutbox__naglowek { margin-bottom: 6px; }
.s24-shoutbox__wiadomosci { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; font-size: 0.8125rem; margin-bottom: 8px; }
.s24-shoutbox__wiadomosc strong { color: var(--tytul-watku); }
.s24-shoutbox__formularz { display: flex; gap: 6px; }
.s24-shoutbox__formularz input[type="text"] { flex: 1 1 auto; padding: 4px 6px; border: 1px solid var(--linia); border-radius: 3px; }

/* ===================================================== NARZEDZIA */

.s24-tekst-przygaszony { color: var(--tekst-przygaszony); }
.s24-tylko-desktop { display: initial; }
.s24-tylko-mobile { display: none; }
@media (max-width: 700px) {
  .s24-tylko-desktop { display: none; }
  .s24-tylko-mobile { display: initial; }
}

/* =====================================================================
   UKLAD SKLEPU (abc24.pl) - dopisane 2026-09-04 przy migracji.
   Powyzej: mechanika przeniesiona z iq24.pl (tokeny, motywy, skala czcionki).
   Ponizej: klasy specyficzne dla sklepu, ktorych forum nie mialo.
   Wszystko na istniejacych tokenach - zero nowych kolorow, zeby oba motywy
   dzialaly bez osobnego dostrajania.
   ===================================================================== */

/* --- naglowek sklepu: nazwa + przelaczniki motywu/czcionki w jednej linii --- */
.s24-masz {
  display: flex;
  /* flex-end, nie space-between - po usunieciu .tytul-forum zostal jeden
     jedyny dzieciak (.pasek-motywu), space-between przykleilby go do
     lewej krawedzi zamiast do prawej. */
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--naglowek-tlo);
}

/* --- baner sklepu (BANER_SKLEPU, wlasny upload sprzedawcy) --- */
.s24-baner-sklepu { display: block; width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }

/* --- wlasny naglowek/stopka sprzedawcy (SKLEP.NAGLOWEK / .STOPKA) --- */
.s24-naglowek-sklepu, .s24-stopka-sklepu { margin: 8px 0; }
.s24-naglowek-sklepu img, .s24-stopka-sklepu img { max-width: 100%; height: auto; }

/* --- uklad dwukolumnowy: kategorie po lewej, tresc po prawej --- */
.s24-uklad {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .s24-uklad { grid-template-columns: 1fr; }
}

.s24-menu-boczne {
  background: var(--tlo-karty);
  border: 1px solid var(--naglowek-tlo);
  border-radius: 6px;
  padding: 10px 12px;
}
.s24-menu-boczne ul { list-style: none; margin: 0; padding: 0; }
/* .menu-boczne .menu-specjalne (2 klasy) zamiast samego .menu-specjalne,
   zeby przebic ".menu-boczne ul" (klasa+element) bez !important */
.s24-menu-boczne .s24-menu-specjalne { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--naglowek-tlo); }
.s24-menu-boczne li { margin: 0 0 2px; }
.s24-menu-boczne li a {
  display: block;
  padding: 3px 6px;
  border-radius: 4px;
  /* Nazwy kategorii moga zawierac <br>/<big>/<font> wpisane przez sprzedawce
     (patrz View::htmlSprzedawcy) - dlatego blokowy element i wlasne
     lamanie, zeby jego formatowanie nie rozjezdzalo listy. */
  overflow-wrap: anywhere;
}
.s24-menu-boczne li a .s24-licznik { color: var(--tekst-przygaszony); font-size: .85em; }
.s24-menu-boczne li a.s24-aktywna { font-weight: 600; background: var(--naglowek-tlo); color: var(--naglowek-tekst); }
.s24-menu-boczne li a.s24-aktywna .s24-licznik { color: var(--naglowek-tekst); opacity: .8; }
/* naglowek sekcji menu = kategoria bez produktow (stara .kategoria_opisowa) */
.s24-menu-boczne li.s24-kategoria-opisowa {
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tekst-przygaszony);
  padding: 10px 6px 2px;
  overflow-wrap: anywhere;
}
.s24-menu-boczne li:first-child.s24-kategoria-opisowa { padding-top: 2px; }
.s24-menu-wlasne { margin-top: 10px; }
.s24-menu-wlasne img { max-width: 100%; height: auto; }

/* --- siatka produktow --- */
/* Naglowek kategorii: nazwa+opis po lewej, sortowanie po prawej
   (user 2026-09-11). flex-wrap, zeby na wąskim ekranie sortowanie
   spadalo pod tekst, nie sciskalo sie w tej samej linii. */
.s24-kategoria-naglowek {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px 24px; flex-wrap: wrap; margin-bottom: 12px;
}
.s24-kategoria-naglowek h2,
.s24-kategoria-naglowek h1 { margin: 0; }
.s24-kategoria-naglowek .s24-opis-kategorii { margin: 4px 0 0; }
.s24-sortowanie {
  margin: 0; font-size: .95rem; flex-shrink: 0;
  display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap;
}
.s24-sortowanie select { font: inherit; padding: 2px 4px; }

/* Lista produktow - wiersz ze zdjeciem po lewej i opisem po prawej, 1:1
   z ukladem starego default.asp (nie kafelki/siatka). */
.s24-lista-produktow {
  display: flex;
  flex-direction: column;
  /* kreska tez nad pierwszym i pod ostatnim produktem (user 2026-09-11),
     nie tylko miedzy nimi - stad border na calym kontenerze, nie tylko
     na .produkt */
  border-top: 1px solid var(--naglowek-tlo);
  border-bottom: 1px solid var(--naglowek-tlo);
}
.s24-produkt {
  /* to samo tlo co reszta prawej kolumny (user 2026-09-11), nie odcien
     karty --tlo-karty - inaczej wiersze wyraznie odstawaly kolorem */
  background: var(--tlo);
  border-bottom: 1px solid var(--naglowek-tlo);
  padding: 14px 4px;
  display: flex;
  flex-direction: row;
  gap: 16px;
  /* zdjecie+przycisk (krotsza kolumna) wysrodkowane wzgledem wysokosci
     wiersza, ktora wyznacza opis po prawej (user 2026-09-11) */
  align-items: center;
}
/* Stary wiersz nie mial osobnego tla dla promocji - sam odznaka/badge
   "PROMOCJA" + przekreslona stara cena wystarczaly, zostawiamy tak samo. */
.s24-produkt__media { flex: 0 0 150px; width: 150px; text-align: center; }
/* Miniatury juz zaimportowanych produktow maja zapisane tylko 110px
   (stary limit sprzed migracji - patrz Obrazek::MAX_MINI) i nie wypelnialy
   150px kolumny, mimo ze miejsce bylo zarezerwowane. Rozciagniecie do
   pelnej szerokosci kolumny (user 2026-09-11: "delikatnie wieksze") -
   lekki upscaling 110->150px, ale bez zmiany ukladu/rozmiaru kolumny. */
.s24-produkt__media img { width: 100%; }
.s24-produkt__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.s24-produkt img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.s24-produkt h3 { margin: 0; font-size: 1.15rem; line-height: 1.3; overflow-wrap: anywhere; }
.s24-produkt h3 a { text-decoration: none; }
.s24-produkt .s24-producent { margin: 0; font-size: .85rem; color: var(--tekst-przygaszony); }
.s24-produkt .s24-cena { margin: 0; font-size: 1.1rem; }
.s24-produkt .s24-cena s { color: var(--tekst-przygaszony); font-size: .9rem; }
.s24-produkt .s24-cena strong { color: var(--akcent-tekst); }
.s24-produkt .s24-opis-skrot { margin: 4px 0 0; color: var(--tekst); overflow-wrap: anywhere; text-align: justify; }
.s24-produkt .s24-opis-skrot a { white-space: nowrap; }
/* Etykiety "Producent:"/"Cena:"/"Stara cena:"/"Opis:" - jak w starym
   default.asp (tam .pole), user 2026-09-11: "nie ma tego w nowej wersji".
   Nazwa .etykieta, NIE .pole - .pole jest juz zajete (linia ~500, uklad
   pol formularza: display:flex/column) - zderzenie zlapane screenshotem,
   bez tego etykieta lamala sie do wlasnej linii jako blok flex.
   Kolor z tokenu, nie dosl. brown/indigo ze starej wersji - zeby trzymac
   sie palety nowego systemu (dziala w jasnym i ciemnym motywie). */
.s24-etykieta { color: var(--tekst-przygaszony); font-weight: 600; }
.s24-cena strong + .s24-etykieta { margin-left: 10px; }
@media (max-width: 600px) {
  .s24-produkt { flex-direction: column; align-items: stretch; }
  .s24-produkt__media { flex-basis: auto; width: 100%; }
}

/* --- karta pojedynczego produktu --- */
/* Linia pod producentem TYLKO na stronie produktu (user 2026-09-11) -
   selektor z bezposrednim dziecko-kombinatorem, bo .producent na karcie
   produktu w liscie/kategorii (.produkt .producent) to inny, zagniezdzony
   przypadek i nie ma tam dostac tej linii. */
.s24-produkt-karta > .s24-producent { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linia); }
.s24-produkt-karta__okruszek { margin: 0 0 4px; font-size: .85rem; }
.s24-produkt-karta__okruszek a { color: var(--tekst-przygaszony); text-decoration: none; }
.s24-produkt-karta__okruszek a:hover { text-decoration: underline; }
/* Zdjecie i zakup obok siebie, jak w starym default.asp - patrz komentarz
   w pages/sklep-produkt.php. Zdjecie ograniczone do 420px (nie na cala
   szerokosc), zeby nie odpychalo ceny/przycisku daleko w dol. */
.s24-produkt-karta__gorna { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin: 12px 0; }
.s24-produkt-karta__zdjecie { flex: 1 1 320px; max-width: 420px; }
.s24-produkt-karta__zdjecie img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--naglowek-tlo);
  border-radius: 6px;
  cursor: zoom-in;
}
.s24-produkt-karta__zakup { flex: 1 1 280px; min-width: 0; }
.s24-produkt-karta__zakup .s24-cena-glowna { margin: 0; font-size: 1.4rem; }
.s24-produkt-karta__zakup .s24-cena-glowna strong { color: var(--akcent-tekst); }
.s24-produkt-karta__zakup .s24-cena-poprzednia { margin: 2px 0 0; color: var(--tekst-przygaszony); }
.s24-produkt-karta__zakup .s24-odznaki { margin: 8px 0 0; }
.s24-produkt-karta .s24-opis { margin-top: 12px; overflow-wrap: anywhere; }
.s24-produkt-karta .s24-opis img { max-width: 100%; height: auto; }

/* --- stopka platformy --- */
.s24-stopka {
  margin: 24px 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--naglowek-tlo);
  font-size: .9rem;
  color: var(--tekst-przygaszony);
  text-align: center;
}

/* --- koszyk --- */
.s24-do-koszyka { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.s24-do-koszyka input[type=number] { width: 5em; font: inherit; padding: 3px 5px; }
/* Strona produktu: ilosc+przycisk w wierszu, wariant w kolejnej linii pod
   nim - kazdy wiersz wyrownany do lewej (user 2026-09-11: "wyrównanie
   tekstu do lewej", nie do prawej mimo ze cala kolumna siedzi po prawej
   stronie strony). */
.s24-do-koszyka--pion { flex-direction: column; align-items: flex-start; }
.s24-do-koszyka__wiersz { display: flex; gap: 8px; align-items: center; }
/* Jeden wspolny wyglad przycisku koszyka - .btn-koszyka na <button> ORAZ na
   <a> (produkt z wariantem kieruje na strone produktu, ale ma wygladac
   identycznie, user 2026-09-11: "przycisk do koszyka niech zawsze jest
   taki sam dla wszystkich produktow"). */
.s24-do-koszyka .s24-btn-koszyka {
  display: inline-block; text-align: center; text-decoration: none;
  font: inherit; padding: 6px 14px; cursor: pointer;
  background: var(--akcent-tlo); color: var(--akcent-tekst);
  border: 1px solid var(--naglowek-tlo); border-radius: 5px; font-weight: 600;
}
.s24-do-koszyka .s24-btn-koszyka:hover { filter: brightness(.95); text-decoration: none; }
/* Odstep zdjecie -> przycisk (user 2026-09-11: "<br> przed przyciskiem") -
   jak stare <BR><BR> w default.asp, tylko przez margin, nie martwy znacznik. */
.s24-do-koszyka--male { margin: 14px 0 0; }
/* odznaki NOWOSC / PROMOCJA i wyprzedany towar - odpowiedniki starych klas
   .nowosc / .promocja / .wysprzedany z default.asp */
.s24-odznaki { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.s24-odznaka {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; text-decoration: none;
}
.s24-odznaka:hover { text-decoration: none; opacity: .9; }
.s24-odznaka--promocja { background: #c62828; }
.s24-odznaka--nowosc   { background: #2e7d32; }
.s24-wysprzedany {
  display: inline-block; padding: 4px 10px; border-radius: 3px;
  /* "cichy przycisk" - szary, czytelny w obu motywach (stara .wysprzedany:
     #e2e2e2 / #535353); --naglowek-tlo bylo tu nieczytelne */
  background: var(--przycisk-tlo-cichy); color: var(--przycisk-tekst-cichy);
  border: 1px solid var(--linia);
  font-weight: 600; font-size: .85rem; text-decoration: none;
}
.s24-wysprzedany:hover { text-decoration: none; color: var(--przycisk-tekst-cichy); }
.s24-produkt--wyprzedany img { opacity: .6; }
/* Na liscie/wyszukiwaniu ".s24-wysprzedany" jest jedynym dzieckiem
   ".s24-do-koszyka--male" (display:flex) - flex bez "width" kurczy sie
   do szerokosci tresci i ląduje przy LEWEJ krawedzi 150px kolumny
   zdjecia (justify-content:flex-start domyslnie), przez co
   "text-align:center" ponizej centrowalo tekst we WLASNYM, wąskim
   pudelku, a nie caly znaczek wzgledem miniatury (user 2026-09-25:
   "plakietka wyprzedany nie jest wysrodkowana wzgledem miniatury").
   width:100% - ta sama sztuczka co przy .s24-btn-koszyka linia nizej -
   rozciaga znaczek na cala szerokosc kolumny (150px, jak zdjecie). */
.s24-produkt .s24-wysprzedany { display: block; width: 100%; text-align: center; margin-top: 4px; }
.s24-do-koszyka--male .s24-btn-koszyka { padding: 4px 10px; font-size: .9rem; width: 100%; }

.s24-koszyk-tab { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.s24-koszyk-tab th, .s24-koszyk-tab td {
  padding: 8px 6px; border-bottom: 1px solid var(--naglowek-tlo); vertical-align: middle;
}
.s24-koszyk-tab th { text-align: left; font-size: .85rem; text-transform: uppercase; color: var(--tekst-przygaszony); }
.s24-koszyk-tab .s24-lb { text-align: right; white-space: nowrap; }
.s24-koszyk-tab .s24-wariant { display: block; font-size: .85rem; color: var(--tekst-przygaszony); }
.s24-ilosc-form { display: flex; gap: 4px; justify-content: flex-end; }
.s24-ilosc-form input { width: 4.5em; font: inherit; padding: 2px 4px; }
.s24-ilosc-form button, .s24-koszyk-tab .s24-usun { font: inherit; cursor: pointer; padding: 2px 8px; }
.s24-koszyk-suma { font-size: 1.2rem; text-align: right; }
.s24-btn-zamow {
  display: block; width: 100%; padding: 12px 20px; font: inherit; font-weight: 700;
  text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer;
  background: var(--akcent-tlo); color: var(--akcent-tekst);
  border: 1px solid var(--naglowek-tlo); border-radius: 6px;
}

/* --- komunikaty --- */
.s24-komunikat { padding: 10px 14px; border-radius: 6px; margin: 0 0 12px; border: 1px solid; }
.s24-komunikat--ok   { background: var(--komunikat-pozytywny-tlo); border-color: var(--komunikat-pozytywny-ramka); }
.s24-komunikat--blad { background: var(--komunikat-neutralny-tlo); border-color: var(--komunikat-neutralny-ramka); }
.s24-info, .s24-info-ok, .s24-info-blad { padding: 8px 12px; border-radius: 5px; margin: 8px 0; }
.s24-info     { background: var(--komunikat-neutralny-tlo); }
.s24-info-ok  { background: var(--komunikat-pozytywny-tlo); }
.s24-info-blad{ background: var(--komunikat-neutralny-tlo); font-weight: 600; }

/* --- opinie --- */
.s24-ocena-srednia { font-size: 1.1rem; }
.s24-gwiazdki { color: #e8a020; letter-spacing: 2px; }
.s24-opinie { list-style: none; margin: 12px 0 0; padding: 0; }
.s24-opinia { background: var(--tlo-karty); border: 1px solid var(--naglowek-tlo); border-radius: 6px; padding: 12px; margin: 0 0 10px; }
.s24-opinia__glowa { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.s24-opinia p { margin: 0; overflow-wrap: anywhere; }
.s24-opinia__odpowiedz { margin-top: 10px; padding: 8px 10px; background: var(--tlo-karty-alt); border-radius: 5px; font-size: .95rem; }
.s24-oceny { display: flex; gap: 14px; flex-wrap: wrap; }
.s24-oceny label { cursor: pointer; }
.s24-form-opinia label, .s24-form-zamowienie label { display: block; margin: 0 0 10px; }
.s24-form-opinia input[type=text], .s24-form-opinia textarea,
.s24-form-zamowienie input, .s24-form-zamowienie textarea {
  width: 100%; font: inherit; padding: 6px 8px; box-sizing: border-box;
  border: 1px solid var(--naglowek-tlo); border-radius: 5px;
}
.s24-form-zamowienie fieldset { border: 1px solid var(--naglowek-tlo); border-radius: 6px; margin: 0 0 14px; padding: 12px 14px; }
.s24-form-zamowienie legend { padding: 0 6px; font-weight: 600; }
.s24-form-zamowienie .s24-para { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .s24-form-zamowienie .s24-para { grid-template-columns: 1fr; } }
.s24-form-zamowienie .s24-zgoda { display: flex; gap: 8px; align-items: flex-start; font-size: .95rem; }
.s24-form-zamowienie .s24-zgoda input { width: auto; margin-top: 3px; }
/* .form-zamowienie z przodu, jak przy .zgoda kilka linii wyzej - samo ".dostawa"
   (1 klasa) przegrywa specyficznoscia z ".form-zamowienie label" (klasa+element)
   i ".form-zamowienie input" (klasa+element), ktore inaczej nadpisuja tu
   display:flex na block i rozciagaja sam radio-button na 100% szerokosci
   z obwodka/paddingiem - user 2026-09-11 (zrzut: przycisk nad tekstem,
   nie przy nim). */
.s24-form-zamowienie .s24-dostawa { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.s24-form-zamowienie .s24-dostawa input { width: auto; padding: 0; border: none; }
.s24-dostawa .s24-koszt { margin-left: auto; white-space: nowrap; }

/* --- szukajka i galeria --- */
.s24-szukajka { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.s24-szukajka input[type=search] { flex: 1; min-width: 180px; font: inherit; padding: 6px 10px; border: 1px solid var(--naglowek-tlo); border-radius: 5px; }
.s24-szukajka button { font: inherit; padding: 6px 14px; cursor: pointer; border-radius: 5px; border: 1px solid var(--naglowek-tlo); background: var(--akcent-tlo); color: var(--akcent-tekst); }
/* W waskiej kolumnie kategorii (260px, user 2026-09-11: "przenies") input
   180px + przycisk nie mieszcily sie tak swobodnie jak w pelnej szerokosci
   belki, dla ktorej te 180px pierwotnie liczono. */
.s24-menu-boczne .s24-szukajka input[type=search] { min-width: 0; }
.s24-galeria { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 12px 0; padding: 14px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
/* Stala wysokosc, szerokosc proporcjonalna - jak w starej wersji
   (dodawanie_zdjecia_galeria.asp: "blokujemy aby wszystkie mialy taka sama
   wysokosc"), zamiast max-width/height:auto ktore dawaly rozne wysokosci
   przy zdjeciach pionowych i poziomych w tym samym rzedzie. */
.s24-galeria img { height: 110px; width: auto; border: 1px solid var(--naglowek-tlo); border-radius: 5px; cursor: zoom-in; }
.s24-tresc-redakcyjna img { max-width: 100%; height: auto; }

/* --- lightbox: podglad zdjecia glownego/galerii na pelnym ekranie -----
   Odpowiednik starego jquery.fancybox (default.asp: class=fancybox,
   data-fancybox-group=gallery) - user 2026-09-11: klik otwiera powiekszenie,
   w galerii z przyciskami poprzedni/nastepny, klik gdziekolwiek zamyka. */
.s24-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.85); cursor: zoom-out; }
.s24-lightbox[hidden] { display: none; }
.s24-lightbox img { max-width: 92vw; max-height: 88vh; box-shadow: 0 4px 24px rgba(0,0,0,.5); cursor: zoom-out; }
.s24-lightbox__zamknij, .s24-lightbox__nav { position: absolute; background: rgba(255,255,255,.12); border: none; color: #fff; cursor: pointer; line-height: 1; }
.s24-lightbox__zamknij:hover, .s24-lightbox__nav:hover { background: rgba(255,255,255,.28); }
.s24-lightbox__zamknij { top: 14px; right: 16px; font-size: 1.8rem; padding: 6px 12px; border-radius: 5px; }
.s24-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 2.2rem; padding: 8px 16px; border-radius: 6px; }
.s24-lightbox__poprzedni { left: 12px; }
.s24-lightbox__nastepny { right: 12px; }
@media (max-width: 480px) {
  .s24-lightbox__nav { font-size: 1.6rem; padding: 6px 10px; }
  .s24-lightbox__poprzedni { left: 4px; }
  .s24-lightbox__nastepny { right: 4px; }
}
.s24-dane-sprzedawcy { margin-top: 20px; padding: 12px 14px; background: var(--tlo-karty); border-radius: 6px; }

/* Stronicowanie list produktow (partials/stronicowanie.php). Wczesniej listy
   szly bez limitu albo z twardym LIMIT 200 - stronicowania w ogole nie bylo. */
.s24-stronicowanie { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
                 align-items: center; margin: 22px 0 8px; }
.s24-stronicowanie a, .s24-stronicowanie .s24-akt {
  display: inline-block; padding: 6px 11px; border-radius: 5px;
  border: 1px solid var(--linia); text-decoration: none;
}
.s24-stronicowanie a:hover { border-color: var(--akcent); }
.s24-stronicowanie .s24-akt { background: var(--tlo-karty-alt); font-weight: 700; }
.s24-stronicowanie .s24-wielokropek { padding: 0 2px; color: var(--tekst-przygaszony); }
.s24-ile-produktow { font-size: 0.8rem; font-weight: 400; color: var(--tekst-przygaszony); }

/* Produkt z wariantem (rozmiar, kolor) - z listy prowadzimy na strone produktu,
   bo bez wyboru wariantu zamowienie byloby niepelne. */
.s24-btn-wybierz {
  display: inline-block; padding: 6px 14px; border-radius: 4px;
  background: var(--akcent); color: #fff; text-decoration: none; font-weight: 600;
}
.s24-btn-wybierz:hover { opacity: .9; text-decoration: none; }
.s24-wybor-wariantu select {
  font: inherit; padding: 5px 8px; border-radius: 4px;
  border: 1px solid var(--linia); background: var(--tlo-karty); color: var(--tekst);
}

/* Formularz kontaktowy do sprzedawcy (strona "Informacje i kontakt"). */
.s24-formularz-kontaktowy { margin: 20px 0; }
.s24-formularz-kontaktowy label { display: block; margin: 0 0 12px; font-size: .9rem; }
.s24-formularz-kontaktowy input[type="text"], .s24-formularz-kontaktowy input[type="email"],
.s24-formularz-kontaktowy textarea {
  display: block; width: 100%; max-width: 520px; margin-top: 4px; font: inherit;
  padding: 8px 10px; border-radius: 4px; border: 1px solid var(--linia);
  background: var(--tlo-karty); color: var(--tekst); box-sizing: border-box;
}
.s24-formularz-kontaktowy textarea { resize: vertical; }
/* pulapka na boty - niewidoczna, ale nie przez display:none */
.s24-pf-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Opinie: trzy poziomy zamiast gwiazdek (OCENA 1/2/3 jak w starym systemie). */
.s24-opinie-filtr { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.s24-opinie-filtr a { padding: 5px 11px; border-radius: 5px; border: 1px solid var(--linia); text-decoration: none; }
.s24-opinie-filtr a.s24-akt { background: var(--tlo-karty-alt); font-weight: 700; }
.s24-opinia__ocena { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
                 padding: 2px 7px; border-radius: 4px; }
.s24-opinia--pozytywna .s24-opinia__ocena, .s24-opinie-filtr .s24-opinia--pozytywna b, .s24-ocena-pozytywna { color: #1f7a44; }
.s24-opinia--neutralna .s24-opinia__ocena, .s24-opinie-filtr .s24-opinia--neutralna b, .s24-ocena-neutralna { color: #2b4c8c; }
.s24-opinia--negatywna .s24-opinia__ocena, .s24-opinie-filtr .s24-opinia--negatywna b, .s24-ocena-negatywna { color: #b3261e; }
.s24-opinia--pozytywna .s24-opinia__ocena { background: rgba(31,122,68,.1); }
.s24-opinia--neutralna .s24-opinia__ocena { background: rgba(43,76,140,.1); }
.s24-opinia--negatywna .s24-opinia__ocena { background: rgba(179,38,30,.1); }
.s24-oceny label { display: inline-block; margin-right: 14px; font-weight: 600; }

/* ===================================================== TELEFON (test mobilny 2026-10-01)
   1) 1fr = minmax(auto, 1fr) - kolumna rosla do szerokosci najszerszej tresci
      (tabela 550-970 px w HTML sprzedawcy) i ucinala wszystko, nawet szukajke.
   2) Stary HTML sprzedawcow ma tabele i td o sztywnej szerokosci - na waskim
      ekranie sciskamy je do 100%, a czego sie nie da (np. obrazek w tle),
      przewija sie w poziomie tylko w swoim pudelku, nie cala strona.
   3) Lista kategorii zwinieta pod "Kategorie" (patrz layouts/sklep.php). */
.s24-uklad > main, .s24-uklad > aside { min-width: 0; }
.s24-kategorie > summary { display: none; }
@media (max-width: 900px) {
  .s24-uklad { grid-template-columns: minmax(0, 1fr); }
  .s24-naglowek-sklepu, .s24-stopka-sklepu, .s24-tresc-sprzedawcy, .s24-opis-firmy,
  .s24-opis, .s24-tresc-redakcyjna, .s24-menu-wlasne { max-width: 100%; overflow-x: auto; }
  :is(.s24-naglowek-sklepu, .s24-stopka-sklepu, .s24-tresc-sprzedawcy, .s24-opis-firmy,
      .s24-opis, .s24-tresc-redakcyjna, .s24-menu-wlasne) :is(table, td, th, div, iframe) {
    max-width: 100% !important;
  }
  :is(.s24-naglowek-sklepu, .s24-stopka-sklepu, .s24-tresc-sprzedawcy, .s24-opis-firmy,
      .s24-opis, .s24-tresc-redakcyjna, .s24-menu-wlasne) table { width: 100% !important; height: auto !important; }
  :is(.s24-naglowek-sklepu, .s24-stopka-sklepu, .s24-tresc-sprzedawcy, .s24-opis-firmy,
      .s24-opis, .s24-tresc-redakcyjna, .s24-menu-wlasne) :is(td, th) { width: auto !important; }
  :is(.s24-tresc-sprzedawcy, .s24-opis-firmy, .s24-opis, .s24-tresc-redakcyjna, .s24-menu-wlasne) img { max-width: 100%; height: auto; }

  .s24-kategorie > summary {
    display: block; cursor: pointer; list-style: none;
    font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
    padding: 10px 2px 4px; margin: 0;
  }
  .s24-kategorie > summary::-webkit-details-marker { display: none; }
  .s24-kategorie > summary::after { content: " \25BE"; }
  .s24-kategorie[open] > summary::after { content: " \25B4"; }
  .s24-kategorie > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
}

/* [img] w krotkim opisie produktu (Bbcode::html, 2026-10-01) */
.s24-bb-img { max-width: 100%; height: auto; }

/* krotki opis nad rozszerzonym (2026-10-01) */
.s24-opis--krotki { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--naglowek-tlo); }