/* ============================================================================
   KINKIECIK - STRONA GLROWNA (szablon, nie panel)
   Plik: kx-strona-glowna.css   Data: 2026-10-29   Task #46
   Marcin 29.10: "teraz zerknij na strone glowna. zeby ja ujednolicic".

   STAN ZMIERZONY NA ZYWO (computed style + wskazanie reguly w CSSOM, 1920 px):
     1. Cena / DoKoszyka = rgb(4,131,211). Zrodtlo: sekcja
        "KINKIECIK RESTORE BLUE ACCENTS 2026-07-05" =  html body .Cena {
        color: var(--kolor-szablonu) !important }. Zapisana w nosniku
        kx-css-glowna.dat ORAZ w 48 464-bajtowym INLINE <style> z panelu
        (WYGLAD_DODATKOWY_CSS), ktory jest w HEAD PO naszych bramkach.
     2. Na stronie glownej NIE ISTNIEJE zadna zmienna --kkc-*. Nosnik glownej ma
        ich zero (grep = 0), a blok tokenow w kx-koszyk.css /
        kx-zamowienia-szczegoly.css wisi na #SrodekKolumna - a moduly
        (ModulId-34/43/44/40/35/36/42) leza POZA #SrodekKolumna
        (sprawdzone: modulesInSrodek = false). Stad kotwica tego pliku to
        "html body .TrescSklepu" i wlasny blok tokenow.
     5. Kropki karuzeli - piec roznych stylach na jednej stronie:
        ModulId-34 banner  18px glif "l" #0483D3
        ModulId-43 Nowosci 18px glif "l" #0483D3
        ModulId-44 Hity    18px glif "l" #DDDDDD
        ModulId-40 Opinie   6px glif "p" #000000
        ModulId-35 Blog    18px glif "l" #CFCFCF
        Li i button maja 20x20 px, wiec geometria jest, tylko glif (font
        "slick") i kolor ida z czterech miejsc.
     3. Karty "Strefa wartosci" (.KxTrustStrip > div) to style WPISANE W HTML
        (style="background:#fff;border:1px solid #e5dfd4;padding:24px 22px"),
        text "Dobor swiatla" #9a742d, h3 #111, p #555, radius 0, cien 0.
     4. Karty bloga (.ArtykulOkno) radius 8 px, brak cienia i ramki.

   MECHANIKA NAPRAWY - dwie drogi, swiadomie obie:
     a) ZMIENNE SILNIKA. .Cena nie ma na sztywno wpisanego #0483D3, tylko
        var(--kolor-szablonu). Przepisanie jednej zmiennej na kotwicy
        przefarbuje ceny, wypelnienia przyciskow i linki cala strona naraz -
        to ~150 regul na raze i jedyna linia do przeniesienia na inny sklep.
        Druga strona medalu: reguly z !important w INLINE dalej wygrywaja
        kolejnoscia, ale wygrywaja wartosc zmiennych, wiec nie sa juz
        niebieskie. Dlatego nie walczylem o byc niebieskim specyficzoscia
        tam, gdzie wystarcza zmienna.
     b) SPECYFICZNOSC. Kotwica "html body .TrescSklepu .X" = 0-2-3/0-2-4, a
        niebieska sekcja z panelu = "html body .Cena" = 0-1-3. Przy tej samej
        wadze !important wygrywa ten, co pozniej, a nasza bramka start.php jest
        PRZED inlineem z panelu - wiec o kolorach cen przesadza (a), a (b)
        dokladam tylko tam, gdzie musimy nadpisac wartesc literalna (#0483D3,
        #e5dfd4, #111) albo style wpisanego w HTML.

   PORT NA INNY SKLEP: kotwica .TrescSklepu + nazwy modulow Animacja-Pierwsza-NN.
   Wymiana palety = ponizszy blok tokenow plus dwie zmienne silnika.
   ========================================================================== */

html body .TrescSklepu {
  --kkc-ink: var(--kx-ink, #191b1f);
  --kkc-muted: var(--kx-muted, #6f747c);
  --kkc-line: var(--kx-line, #e7e3dc);
  --kkc-soft: var(--kx-soft, #f8f6f1);
  --kkc-champagne: var(--kx-champagne, #fbf8f0);
  --kkc-warm: var(--kx-warm, #c59b5b);
  --kkc-warm-dark: var(--kx-warm-dark, #9c7339);
  --kkc-graphite: var(--kx-graphite, #202124);
  --kkc-badge: #c60000;
  --kkc-modul: #fff;
  --kkc-cta: linear-gradient(90deg,#e3c08a 0%,var(--kkc-warm) 52%,var(--kkc-warm-dark) 100%);
  --kkc-radius-karta: 12px;
  --kkc-radius-mini: 8px;
  --kkc-cien-karta: var(--kx-shadow, 0 14px 34px rgba(22,24,27,.08));
  --kkc-cien-kafel: 0 6px 18px rgba(22,24,27,.06);
  --kkc-cien-cta: 0 12px 24px rgba(156,115,57,.20);

  /* Zmienne silnika - jeden wpis przefarbowuje cala strone. */
  --kolor-szablonu: var(--kkc-warm-dark);
  --kolor-tla-przycisk-aktywny: var(--kkc-warm-dark);
  --kolor-ramka-modul: var(--kkc-line);
  --kolor-ramka-modul-hover: rgba(197,155,91,.52);

  /* Piktogramy statusow na kafelkach. Bez neonowej zeleni #50d329.
     NOWOSC grafitowy, RABAT/PROMOCJA/WYPRZEDAZ = czerwony znaczek,
     HIT/POLECANY/DOSTAWA = zloty. --magazyn-tlo zostaje: to gleboka
     zelen "dostepny", nie jaskrawy glif. */
  --ikonka-nowosc: var(--kkc-graphite);
  --ikonka-promocja: var(--kkc-badge);
  --ikonka-rabat: var(--kkc-badge);
  --ikonka-wyprzedaz: var(--kkc-badge);
  --ikonka-cena-specjalna: var(--kkc-badge);
  --ikonka-hit: var(--kkc-warm-dark);
  --ikonka-polecany: var(--kkc-warm);
  --ikonka-dostawa: var(--kkc-warm-dark);
}

/* --- 1. CENY: ink zamiast szablonowego koloru -----------------------------
   Niebieska sekcja z 05.07 nadaje .Cene var(--kolor-szablonu) !important, a
   ten jest teraz zloty. Cena produktu ma byc czytelna, nie dekoracyjna, wiec
   wraca do atramentu; zloty zostaje tam, gdzie jest wskazowka (przycisk,
   link), nie tam gdzie jest kwota. */
html body .TrescSklepu .Cena,
html body .TrescSklepu .CenaAktualna,
html body .TrescSklepu .CenaKuponListing b,
html body .TrescSklepu .ProdCena,
html body .TrescSklepu #CenaGlownaProduktuBrutto strong {
  color: var(--kkc-ink) !important;
}
html body .TrescSklepu .CenaPromocyjna,
html body .TrescSklepu .CenaPrzedPromocja,
html body .TrescSklepu .CenaStara {
  color: var(--kkc-badge) !important;
}
html body .TrescSklepu .CenaKuponListing {
  border-color: var(--kkc-line) !important;
  color: var(--kkc-warm-dark) !important;
}

/* --- 2. PRZYCISKI: zloty gradient CTA ------------------------------------
   Kafelki "Do koszyka" i linki-przyciski ("Przeczytaj calosc", "Wyswietl
   produkty") dostawaly samo tlo var(--kolor-szablonu). Gradient + promieni 8
   px = to samo, co na karcie produktu i w koszyku. */
html body .TrescSklepu .DoKoszyka,
html body .TrescSklepu .DoKoszykaKartaProduktu,
html body .TrescSklepu a.przycisk,
html body .TrescSklepu .przycisk {
  color: var(--kkc-modul) !important;
  background-color: var(--kkc-warm-dark) !important;
  background-image: var(--kkc-cta) !important;
  border-radius: var(--kkc-radius-mini) !important;
  box-shadow: var(--kkc-cien-cta);
}
html body .TrescSklepu a.przycisk:hover,
html body .TrescSklepu .DoKoszyka:hover {
  color: var(--kkc-modul) !important;
  filter: brightness(.96);
}

/* --- 3. KROPKI KARUZELI: jeden rozmiar, jeden kolor ----------------------
   20x20 to box; srodek rysuje glif z fontu "slick" ("l" 18px albo "p" 6px).
   Zamiana glifu na prawy kolo 8 px daje te sama geometrie we wszystkich
   pieciu karuzelach, niezaleznie od tego, ktory glif wypisal silnik.
   font-family:inherit + pusty content usuwaja glif bez ladowania ikony. */
html body .TrescSklepu .AnimacjaKreator .slick-dots li button,
html body .TrescSklepu .Animacja-Pierwsza-34 .slick-dots li button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  background: transparent !important;
}
html body .TrescSklepu .AnimacjaKreator .slick-dots li button::before,
html body .TrescSklepu .Animacja-Pierwsza-34 .slick-dots li button::before {
  content: "" !important;
  font-family: inherit !important;
  font-size: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  line-height: 0 !important;
  text-indent: 0 !important;
  border-radius: 50% !important;
  background: #d8d2c6 !important;
  color: transparent !important;
  opacity: 1 !important;
}
html body .TrescSklepu .AnimacjaKreator .slick-dots li.slick-active button::before,
html body .TrescSklepu .Animacja-Pierwsza-34 .slick-dots li.slick-active button::before {
  background: var(--kkc-warm-dark) !important;
  color: transparent !important;
}
html body .TrescSklepu .AnimacjaKreator .slick-dots li:hover button::before {
  background: var(--kkc-warm) !important;
}
/* Strzalki karuzeli: w inline panelu stoja na #0483D3 na sztywno, czyli
   zmienna ich nie ruszy. */
html body .TrescSklepu .AnimacjaKreator .slick-arrow::before,
html body .TrescSklepu .Animacja-Pierwsza-34 .slick-prev::before,
html body .TrescSklepu .Animacja-Pierwsza-34 .slick-next::before {
  color: var(--kkc-warm-dark) !important;
}

/* --- 4. KARTY MODULOW: jedna elewacja ------------------------------------
   .KxTrustStrip > div ma ramke i padding wbita w atrybut style w tresci,
   dlatego !important jest tu koniecznoscia, nie nadgorliwoscia. */
html body .TrescSklepu .KxTrustStrip > div {
  background: var(--kkc-modul) !important;
  border: 1px solid var(--kkc-line) !important;
  border-radius: var(--kkc-radius-karta) !important;
  box-shadow: var(--kkc-cien-kafel) !important;
}
html body .TrescSklepu .KxTrustStrip h3 {
  color: var(--kkc-ink) !important;
}
html body .TrescSklepu .KxTrustStrip p {
  color: var(--kkc-muted) !important;
}
/* Blog (ModulId-35) i kafelki marek (ModulId-42): to samo zaokraglenie i
   co najwyzszy cien z systemu, bez wlasnej ramki. */
html body .TrescSklepu .ArtykulOkno,
html body .TrescSklepu .AktualnoscOkno,
html body .TrescSklepu .OpiniaOkno {
  border-radius: var(--kkc-radius-karta) !important;
  box-shadow: var(--kkc-cien-kafel) !important;
}
html body .TrescSklepu .ArtykulOkno img,
html body .TrescSklepu .AktualnoscOkno img {
  border-radius: var(--kkc-radius-mini) !important;
}
html body .TrescSklepu .Animacja-Pierwsza-42 .StrTresc {
  border-radius: var(--kkc-radius-karta);
}

/* --- 5. ATRAMENT: #111 / rgb(17,17,17) -> --kkc-ink ---------------------
   Tituly modulow ida z trzech zrodel (silnik, inline 20 KB, wpisywane
   style). Ujednolicamy tylko kolor, nie typografie. */
html body .TrescSklepu .StrNaglowek,
html body .TrescSklepu .StrNaglowek a,
html body .TrescSklepu .ModulTytul,
html body .TrescSklepu h2,
html body .TrescSklepu h3 {
  color: var(--kkc-ink);
}
html body .TrescSklepu .StrNaglowek a:hover {
  color: var(--kkc-warm-dark);
}

/* --- 6. WATKOWI: nie ruszamy szerokosci --------------------------------
   Bramka kx-home-width-20260630 (start.php:781) swiadomie poszerzyla
   strone glowna do 1860 px 30.06. Pomiar: glowna 1905 px, podstrona
   .Strona 1881 px - roznica 24 px, nie os. Nic tu nie zmieniamy. */