/* task77 v7 2026-11-04: SCHEMAT GLOBALNY dla karuzeli produktowych Kreatora
   na stronach kategorii. V6 i wczesniej byly przyklejone do .ModulId-56 (c-87).
   Teraz haczyk to klasa .kx-karuzela, ktora nadaje kx-karuzela-gora.js kazdemu
   modulowi zawierajacemu .ListaProduktyKreator na stronie -c-<id>.html.
   Numer rekordu nie wystepuje w zadnej regule, wiec:
     ModulId-55 (lampy-sufitowe-wiszace-c-34), ModulId-56 (plafony-sufitowe-c-87),
     ModulId-57 (kinkiety-c-1) i kazdy rekord stworzony pozniej dla nowej kategorii
   dostaja ten sam look bez zmiany w kodzie.
   Bramka JS (URL kategorii + .Listing.KxProductListing + .ListingOknaKontener)
   trzyma z dala strone glowna (6 karuzeli), koszyk (1) i karte produktu (0).
   Kontener .Listing.KxProductListing = flex column; sklep nadaje order:
   OpisListing 1, Podkategorie 2, Nawigacja 3, Filtry 4, ListingOknaKontener 5.
   Modul z domyslnym order 0 wyskakiwal na gore, wiec dostaje order 5 i w DOM
   stoi tuz przed kaflami -> laduje miedzy filtrami a kaflami.

   v4 (zmierzone w CSSOM przy 1920 px):
   a) os: .Strona miala margin 0 12px, a styl generowany z panelu dokladal
      [Animacja-Pierwsza-NN] .slick-list{margin:0 30px} przy width:100%!important.
      Efekt: list zaczyal sie w 65 px a koncil w 1901 px, czyli 18 px za modut
      i 42 px glebiej po lewej -> "za bardzo do prawej". Oba marginy na zero.
   b) odstepy: .ElementOknoRamka mial margin 8px 0, wiec ramki (368 px = szerokosc
      slajdu) stykaly sie scianami. Listing uzywa .ElementListingRamka margin 10px
      (kafel 356 w oknie 376, przerwa 20 px). Dajemy te sama przerwe.
   c) strzalki: panel ma animacja_strzalki_kolumna[pierwsza]=tak, slick inicjuje
      sie z arrows:true, font "slick" sie laduje - klawisze istnialy i dzialaly,
      ale generowany styl wbil color:#FFF na bialym tle. Widoczne kola + braz.
   d) "Mozliwa negocjacja ceny" - w karuzeli znika (Marcin 04.11). Na listingu
      zostaje nietknieta.
   Pasek ~510 px, kafel listingu 624 px. Nie ruszamy InfoCena30dni
   (obowiazek "najnizsza cena z 30 dni").

   v6 (Marcin 04.11, AppShot c-87): przyciski "Do koszyka" na 4 roznych
   wysokosciach (451/475/493/533 px). Dwie zmiany, zeby linia byla dokladna:
   e1) kotwica: margin-top:auto na ostatnim dzieckiu ramki (flex column). Nadmiar
       wolnego miejsca idzie NAD przycisk, wiec jego dol zbiega sie z dnem ramki.
   e2) platno: Przelicz_NN_pierwsza() ustawia .slick-slide height = max outerHeight
       = ramka 443 + nasze marginesy 16 = 459 px. Sklepowa regula odejmuje 20 px
       (zaklada margin 10+10) -> ramka 439, wiec kafel z boksem kuponu (443 px
       tresci) przelegal o 4 px i jego przycisk siedzial 4 px nizej. Wlasne
       height:calc(100% - 16px) daje 443/443, overflow 0, wszystkie dna na jednej Y.
   v7 (Marcin 04.11, "schemat na caly szablon"): f) slot nazwy = dokladnie 2 linie.
       Bez tego plaskie nazwy robily kafle 22 px nizsze, a platno liczone jest od
       najwyzszego -> nad przyciskiem roslo martwe pole. Wysokosc slota poprawiona
       w v9 (2.64em, patrz regula przy h3 a), bo link w h3 ma wlasna typografie. */

.Listing > .kx-karuzela {
    order: 5;
    margin: 0 0 16px;
}

.Listing > .kx-karuzela .Strona {
    margin: 0;
}

/* Numer rekordu jest w klasie wrappera animacji (Animacja-Pierwsza-55/56/57),
   wiec przechwytujemy go atrybutem. (0,0,4,0) bije generowany ze panelu (0,0,2,0). */
.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-list {
    margin: 0;
}

.Listing > .kx-karuzela .StrNaglowek {
    font-size: 1.05em;
    line-height: 1.15;
    margin: 0 0 2px;
    padding: 0;
}

.Listing > .kx-karuzela .StrNaglowek i {
    font-style: normal;
    font-weight: 400;
}

.Listing > .kx-karuzela .StrNaglowek > span {
    line-height: 1.15;
    padding: 0;
}

.Listing > .kx-karuzela .StrTresc {
    margin-bottom: 0;
}

.Listing > .kx-karuzela .ModulCssDodatkowy {
    padding: 0;
}

.Listing > .kx-karuzela .ElementOknoRamka {
    display: flex;
    flex-direction: column;
    height: calc(100% - 16px);
    padding: 8px;
    margin: 8px 10px;
}

.Listing > .kx-karuzela .Foto {
    flex: 0 0 auto;
    height: 170px;
    min-height: 0;
    padding: 0;
}

.Listing > .kx-karuzela .Foto .ZdjecieDrugiePodmiana {
    display: none;
}

.Listing > .kx-karuzela .Foto img.Zdjecie {
    width: 170px;
    height: 170px;
    max-width: 170px;
    object-fit: contain;
}

.Listing > .kx-karuzela h3 {
    font-size: 0.95em;
    line-height: 1.2;
    margin: 2px 0 0;
    padding: 0;
    min-height: 2.64em;
    max-height: 2.64em;
    overflow: hidden;
}

/* v9: nazwa siedzi w h3 > a, a sklep ma .Listing .Okno h3 a{line-height:1.35}
   plus h3 a{font-size:110%}. Wlasna regula na h3 nie schodzi w dol, wiec dwie
   linie linka mialy 45.1 px w slocie 36.5 px -> tekst ucinany w polowie drugiej
   linii (zrzut c-87 04.11). Slot 2.64em = 2 x 1.2 x 110% liczone od h3 (15.2 px
   -> 40.1 px), a selektor z .ElementOknoRamka ma (0,0,3,2) i bije sklepowe
   (0,0,2,2) bez zaleznosci od kolejnosci ladowania arkuszy. */
.Listing > .kx-karuzela .ElementOknoRamka h3 a {
    line-height: 1.2;
    padding: 0;
}

.Listing > .kx-karuzela .CenaProduktu {
    margin: 2px 0 0;
}

.Listing > .kx-karuzela .KxNegocjacjaListing {
    display: none;
}

.Listing > .kx-karuzela .ListaOpisowa {
    display: none;
}

.Listing > .kx-karuzela .ZakupKontener {
    margin-top: auto;
    padding: 4px 0 0;
}

.Listing > .kx-karuzela .SchowekKontener {
    display: none;
}

.Listing > .kx-karuzela .Zakup .InputIlosc {
    display: none;
}

.Listing > .kx-karuzela .Zakup > em {
    display: none;
}

.Listing > .kx-karuzela .DoKoszyka {
    margin: 0;
}

/* Strzalki przewijania. Font "slick" (glify \62 i \61) laduje sie i klik realnie
   przesuwa track o szerokosc slajdu - problem byl tylko w color:#FFF.
   Kolo 34 px na wysokosci zdjecia (8 margin + 8 padding + 85 = 101 px od gory
   slajdu), w wolnym paddingu zewnetrznych kafli, wiec nie przykrywa zdjecia
   ani nazwy. Rekordy bez strzalek (animacja_strzalki_kolumna[pierwsza]=nie) nie
   maja elementow .slick-prev/.slick-next, wiec te reguly sa dla nich obojetne. */
.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-prev,
.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-next {
    width: 34px;
    height: 34px;
    top: 101px;
    margin-top: 0;
    transform: translateY(-50%);
    z-index: 3;
    opacity: 1;
    border: 1px solid var(--kx-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 16px rgba(22, 24, 27, 0.14);
}

.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-prev {
    left: 14px;
}

.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-next {
    right: 14px;
}

.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-prev:before,
.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-next:before {
    font-size: 18px;
    line-height: 32px;
    color: var(--kx-warm-dark);
    opacity: 1;
}

.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-prev:hover,
.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-next:hover {
    background: #fff;
    box-shadow: var(--kx-shadow-hover);
}

.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-prev:hover:before,
.Listing > .kx-karuzela [class*="Animacja-Pierwsza-"] .slick-next:hover:before {
    color: var(--kx-graphite);
    opacity: 1;
}

@media only screen and (max-width:1023px) {
    /* Marcin 04.11: na mobile tego nie chce, bo bedzie za duzo.
       1023 px to wlasny breakpoint sklepu (listingi.css). Rekord 55 ma jeszcze
       wlasne ukrycie generowane z panelu; regula dziala niezaleznie. */
    .Listing > .kx-karuzela {
        display: none;
    }
}