/* ============================================================================
   KINKIECIK - LISTING KATEGORII (szablon, nie panel)
   Plik: kx-listing.css   Data: 2026-10-29   Task #46
   Marcin 29.10: "potem strony listingu .../oswietlenie-wewnetrzne-c-335.html
   tez, bo sa ramki wokol kafli od produktow".

   ZMIERZONE NA ZYWO (1920 px, computed style + wskazanie reguly w CSSOM):
     Podwojna ramka, o ktora chodzi Marcinowi:
       .Okno.OknoRwd              x=-10 w=380  border 1 px rgb(238,238,238)
                                  radius 14 px, overflow hidden, tlo przeziercyste
       .AnimacjaZobacz.ElementListingRamka   358 x 651, padding 15 px
         ::before                 border 1 px rgb(225,225,225) radius 8 px,
                                  biale tlo, cien 0
     Zewnetrzna ramke doklada INLINE <style> z panelu (WYGLAD_DODATKOWY_CSS),
     wylosowane wprost z CSSOM, nie ze zgadywania:
       html body .Okno.OknoRwd { border-radius:14px !important;
                                 overflow:hidden !important;
                                 border:1px solid #eee !important }
       html body .Okno.OknoRwd .Foto { border-radius:14px 14px 0 0 !important }
     Ten inline lezy w HEAD PO bramek start.php (kolejnosc arkuszy: 0 cache
     podstrony, 2 kx-css-fallback, 6-11 nasze pliki, 12-17 inline z panelu),
     wiec rowna specyficznosc by przegrana. Bramka z ID bije ich 0-2-2.
     11 px martwej szczeliny na strone = 380 - 358; zewnetrzna ramka +
     wewnetrzna ramka + przeierciste srodek. Zdjeta zewnetrzna zostaje jedna
     karta i szczelina przestaje byc widoczna.
     Ucieczka z osi: .Listing ma 1881 px, kolumny 5 x 380 = 1900 px, a flex
     ma justify-content:center -> rzad jest srodkowany na minusie i pierwsza
     kolumna ucina sie o 10 px (x=-10). scrollWidth 1905 < innerWidth 1920,
     wiec po przestawieniu na flex-start nic nie wychodzi za ekran.
     Niebieski na listingu: .Cena rgb(4,131,211) = var(--kolor-szablonu) z
     sekcji "RESTORE BLUE ACCENTS 2026-07-05". .DoKoszyka ma tlo niebieskie,
     ale i gradient graphite->zloto z gotowego pliku, ktory go przykrywa.

   MECYANIKA: tak jak na glownej - przepisanie --kolor-szablonu na kotwicy
   przefarbuje ceny i wypelnienia calej strony jednym wpisem, bo silnik nigdzie
   nie ma #0483D3 na sztywno w tych regulach. Bramka w start.php laczy ten plik
   WYLACZNIE na adresach -c-NNN.html, wiec koszyk, platnosc i karta produktu
   nie dostaja zmiany zmiennej (zero regresji tam, gdzie juz uzgodnilismy
   kolory).

   PORT NA INNY SKLEP: kotwica #SrodekKolumna + .Listing.KxProductListing +
   .AnimacjaZobacz.ElementListingRamka z silnika ShopGold.
   ========================================================================== */

html body #SrodekKolumna {
  --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);

  --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);

  --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. ZNIKEJ ZEWNETRZNA RAMKA -----------------------------------------
   Zostaje jedna karta (.ElementListingRamka ponizej). overflow:hidden musi
   zostac, bo to ono przycina rogi zdjecia do ksztaltu karty. */
html body #SrodekKolumna .Listing.KxProductListing .Okno.OknoRwd {
  border: 0 !important;
  border-radius: var(--kkc-radius-karta) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html body #SrodekKolumna .Listing.KxProductListing .Okno.OknoRwd .Foto {
  border-radius: var(--kkc-radius-karta) var(--kkc-radius-karta) 0 0 !important;
}

/* --- 2. JEDNA KARTA: promien 12, kreska palety, cien kafelka ----------
   .ElementListingRamka rysuje elewacje przez ::before (border + tlo +
   zaokraglenie w jednym miejscu), wiec nadpisujemy pseud-element, nie box. */
html body #SrodekKolumna .Listing .Okno .ElementListingRamka {
  border-radius: var(--kkc-radius-karta) !important;
}
html body #SrodekKolumna .Listing .Okno .ElementListingRamka::before {
  border: 1px solid var(--kkc-line) !important;
  border-radius: var(--kkc-radius-karta) !important;
  background: var(--kkc-modul) !important;
  box-shadow: var(--kkc-cien-kafel) !important;
}
html body #SrodekKolumna .Listing .Okno .ElementListingRamka:hover::before {
  border-color: rgba(197,155,91,.52) !important;
  box-shadow: var(--kkc-cien-karta) !important;
}

/* --- 3. WYROWANANIE SIATKI: pierwsza kolumna nie moze byc ucinana --------- */
html body #SrodekKolumna .Listing.KxProductListing {
  justify-content: flex-start !important;
}

/* --- 4. CENY I PRZYCISKI NA KAFELKACH ----------------------------------
   Atrament na kwocie (to samo co na glownej), zloto tylko na wskazowce. */
html body #SrodekKolumna .Listing .Cena,
html body #SrodekKolumna .Listing .CenaAktualna,
html body #SrodekKolumna .Listing .ProdCena {
  color: var(--kkc-ink) !important;
}
html body #SrodekKolumna .Listing .CenaPromocyjna {
  color: var(--kkc-badge) !important;
}
html body #SrodekKolumna .Listing .DoKoszyka,
html body #SrodekKolumna .Listing a.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;
}

/* --- 5. NAGLOWEK I OKRUSZKI ------------------------------------------- */
html body #SrodekKolumna h1.StrNaglowek,
html body #SrodekKolumna h1.StrNaglowek a {
  color: var(--kkc-ink);
}
html body #SrodekKolumna .KruszekOkruszny a,
html body #SrodekKolumna .Kruszek a,
html body #SrodekKolumna .Sciezka a {
  color: var(--kkc-muted);
}
html body #SrodekKolumna .KruszekOkruszny a:hover,
html body #SrodekKolumna .Kruszek a:hover,
html body #SrodekKolumna .Sciezka a:hover {
  color: var(--kkc-warm-dark);
}

/* --- 6. KROPKI I STRZALKI NA LISTINGU ---------------------------------
   Listing ma karuzele podkategorii w tych samych glifach "slick"; jezeli
   ktorys modul tu stoi, kropka ma byc taka sama jak wszedzie indziej. */
html body #SrodekKolumna .AnimacjaKreator .slick-dots li button::before {
  content: "" !important;
  font-family: inherit !important;
  font-size: 0 !important;
  position: static !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  background: #d8d2c6 !important;
  color: transparent !important;
  opacity: 1 !important;
}
html body #SrodekKolumna .AnimacjaKreator .slick-dots li.slick-active button::before {
  background: var(--kkc-warm-dark) !important;
}

/* --- 7. TELEFON -------------------------------------------------------
   390 px: kolumny ida 2 w rzedzie i szczelina miedzy nimi jest mniejsza,
   wiec urynanie przycina. Siatka zostaje przy swojej szerokosci, zmienia
   sie tylko wyrownanie i promien zdjecia. */
@media only screen and (max-width:1023px) {
  html body #SrodekKolumna .Listing.KxProductListing .Okno.OknoRwd .Foto {
    border-radius: var(--kkc-radius-mini) var(--kkc-radius-mini) 0 0 !important;
  }
  html body #SrodekKolumna .Listing .Okno .ElementListingRamka::before {
    border-radius: var(--kkc-radius-mini) !important;
  }
}