/* KINKIECIK - kompakt karty produktu (2026-10-29)
 * Zakres: TYLKO strona ...-p-NNNNN.html (bramka w start.php). Zdjecia i podzial
 * kolumn nie sa ruszane: #ZdjeciaProduktu 610 px i .ZdjeciaKontener 550 px zostaja.
 * Cel: wysokosc. Zmierzone 29.10 (p-100502): 1920 = 7274 px, 1521 = 8382, 390 = 11840.
 * Wysokosc karty = max(lewa 772, prawa 1052/1110) -> cisniemy prawa kolumne,
 * zeby karta zapadla sie do 772. Potem kafle .PozostaleProdukty (2868/3825).
 * Broń przeciw inline: kazde #RamkaProduktu ma poprzedzic "html body", bo w <head>
 * jest 8 inline <style> wtryskiwanych PO moich linkach (lekcja "CSS w 3 nosnikach").
 */

/* --- 0. Prawa kolumna: odsunac od zdjecia ---------------------------------
 * Marcin 29.10 (p-127140, p-11391): "nadal za mocno do lewej wszystko,
 * przesunalbym". Baza: #InformacjeProduktu { padding-left:50px } w
 * Cache_CssSzablonPodstrony.css WYLACZNIE w @media (min-width:1024px) - ponizej
 * progu baza ma 0, wiec i ja wchodze tylko nad progiem (lekcja: moja regula o
 * wyzszej specyficznosci zjada kx-waski-ekran.css ladowany wczesniej).
 *
 * Geometria: kolumna jest przybita do PRAWEJ krawedzi karty (box 1353 = krawedz
 * karty 1353), wiec kazdy piksel przesuniecia w prawo zabieram z szerokosci -
 * nie ma opcji "przesun i nie placic". Prawego paddingu nie dodaje, bo box
 * parametrow konczy sie dokladnie na linii #ZakladkiProduktu pod spodem.
 *
 * Ile placa wiersze:
 *   - parametry: content 470 px, najdluzszy tekst 231 px -> luz 239, nic nie lamie
 *   - wiersz zakupu .PrzyciskIlosc (flex, wrap): przycisk 239 + margines 10 +
 *     blok ilosci 203 = 452 px wymagane. Przy pad 74 zostaje 446 -> deficyt 6 px
 *     i "Dodaj do koszyka" spadal do drugiej linii (+53 px na kazdej karcie).
 *     Odzyskuję te 6 px zmniejszajac odstep miedzy przyciskiem a licznikiem
 *     10 -> 4 px. Zmierzona cena: 0 px wysokosci (karta 1884 = jak przed zmiana).
 *   - pad 84+ kosztuje i tak +38 px (przycisk zaczyna lamac wlasny tekst),
 *     wiec stane na 74.
 */
@media only screen and (min-width:1024px) {
  html body #InformacjeProduktu {
    padding-left: 74px !important;
  }
}
html body #RamkaProduktu .PolePrzyciskiKoszyka {
  margin-right: 4px !important;
}

/* --- 1. ListaOpisy: wszystkie wiersze na ten sam rytm ----------------------
 * baza: min-height:32 (Etap 12, inline) + padding 9/9 + border 1 = 51
 * gutter 42 px pod ikony: KAZDY images/piktogramy/*.svg zwraca 404, wiec to
 * czysto martwa szerokosc = 8% wczesniejszego lamania wiersza na 1521.
 * POPRAWKA 29.10 (Marcin: "troche za mocno bo sie rozjechalo", p-126981):
 * pierwszy szkic omijal .TbPozPoleDodatkowe selektorem :not(). Effect: 4
 * wiersze standardowe (Czas/Koszt/Nr/EAN) poszly na padL 0, a 4 pola
 * dodatkowe zostaly na padL 42 + minH 32 = tekst startowal 42 px dalej i
 * wiersz mial 51 px zamiast 31. Te same wiersze NIE sa wyjatkiem - tlo pod
 * ikona jest tam rownie martwe (ten sam 404), wiec jedziemy na jednym
 * skrocie dla wszystkich.
 * POPRAWKA 2 (Marcin: "za mocno do lewej, zle to wyglada"): zdjecie guttera
 * 42 px nie dalo nic w zamian, wiec etykieta stanela 13 px od linii ramki
 * (.ListaOpisy mialo padL 12 + border 1). Poziom idzie do 20 px na OBU
 * boksach (parametry i cena), bo trzymanie ich w jednej linii jest sensowne
 * tylko jesli oba maja ten sam wewtrzny luz.
 */
html body #RamkaProduktu .ListaOpisy {
  padding: 8px 20px !important;
  margin: 8px 0 !important;
}
html body #RamkaProduktu .ListaOpisy p {
  min-height: 0 !important;
  padding: 4px 0 !important;
  line-height: 1.35;
}
html body #RamkaProduktu .ListaOpisy p::before {
  content: none !important;
}
html body #RamkaProduktu .ListaOpisy .TbPoz {
  margin: 0 !important;
}
html body #RamkaProduktu .ListaOpisy .TbPoz:last-child {
  border-bottom: 0 !important;
  padding-bottom: 4px !important;
}

/* --- 2. NazwaProducent + logo producenta ----------------------------------
 * POPRAWKA 2 (Marcin: "ikony producentow trzeba powiekszyc, wyglada smiesznie",
 * p-127140 / p-127558): max-height:64px z pierwszego szkicu ZGNIOTLO logo.
 * Mechanizm: img ma w HTML atrybuty width=160 height=120 oraz
 * style="min-width:160px;min-height:120px". szerokosc jest wiec zabetonowana na
 * 160, a moja max-height scina wysokosc do 64 -> render 160x64 zamiast 160x120
 * (proporcja 2,5 zamiast 1,33 = logo spłaszczone o polowe).
 * Naprawa: zdjac oba minima (!important, bo siedza w inline stylu img) i dac
 * width/height auto, zeby stosunek bokow liczyla przegladarka. max-height 120 =
 * naturalna wysokosc pliku, wiec logo wraca do rozmiaru sprzed Etapu 12.
 * flex:0 0 auto na .Producent jest niezbedne: bez min-width kontener jest
 * normalnym elementem flexu i kurczy sie do 97 px (zmierzone) - tytul go zjada.
 * UWAGA na szerokie znaki (Nowodvorski, p-11391 "zdeptane"): plik WAZY 160x120,
 * ale sam napis to waski pas po srodku canvasu. CSS nie przetnie bialej masy -
 * to sprawa grafiki w panelu, nie arkusza. Tu naprawiam tylko proporcje.
 * Koszt wysokosci: wiersz nazwy 127 -> 150 px (+23), bo logo 130 jest wyzsze
 * niz dwuwierszowy tytul. Wciaz taniej niz przed Etapem 12.
 */
html body #RamkaProduktu .NazwaProducent {
  margin: 8px 0 !important;
}
html body #RamkaProduktu .NazwaProducent h1 {
  margin-bottom: 8px !important;
}
html body #RamkaProduktu .NazwaProducent .Producent {
  flex: 0 0 auto;
}
html body #RamkaProduktu .NazwaProducent .Producent img {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 170px;
  max-height: 120px;
  padding: 4px !important;
}

/* --- 3. SekcjaCen: pad 16->12, CenyProduktu mb 20->8 ----------------------
 * #InfoKupon na kartach z kuponem mezy 172 px (fit-content + pad 8 + mb 15).
 */
html body #RamkaProduktu .SekcjaCen {
  padding: 12px 20px !important;
  margin: 8px 0 5px !important;
}
html body #RamkaProduktu .CenyProduktu {
  margin-bottom: 8px !important;
}
html body #RamkaProduktu #InfoKupon {
  padding: 6px 8px;
  margin-bottom: 8px;
}
html body #RamkaProduktu .AktywujRabat {
  margin: 8px 0 6px;
}
html body #RamkaProduktu #HistoriaCenProduktu {
  margin-top: 8px;
}
html body #RamkaProduktu #IloscKupionych {
  margin: 6px 0 10px !important;
}

/* --- 4. Lewa kolumna: miniatury, bez dotkniecia zdjecia ------------------- */
html body #RamkaProduktu #ZdjeciaProduktu .DodatkoweZdjecia {
  margin: 12px 0;
}
html body #RamkaProduktu #ZdjeciaProduktu .DodatkoweZdjecia div img {
  padding: 4px 6px;
}

/* --- 5. Podziel sie + linki(glowne) --------------------------------------
 * TYLKO desktop (min-width:901). Na 390 linki laduja sie z kx-waski-ekran.css o
 * szerokosci 130 px = 2 rzedy; moja reguła ma wyzsza specyficznosc (html body +
 * #RamkaProduktu) i przy 45 px lewym paddingu rozepchuje je do 169 px = 4 rzedy
 * (+77 px, zmierzone A/B 29.10). Wiec na watlym ekranie NIE wchodze w linki.
 *
 * POPRAWKA 2 (Marcin 29.10: "napraw te ikony facebooki inne, moze gdzies je
 * przeżuć w inne miejsce na bok, przy specyfikacji pdf" - p-100502):
 *  a) SPRITE. Zrodło to obrazki/podziel_ikony/podziel_sie.png = 32x160, wiec
 *     5 kafelek po 32x32 na pozycjach 0/-32/-64/-96/-128. Szablon (i powtorzylem
 *     to w pierwszym szkicu) daje a{26x26} -> kazda ikona obcuta o 3 px z prawej
 *     i z dolu, stad "rozmazane/krzywe". Naprawa bez nowych assetow:
 *     background-size:100% 500% + pozycje w PROCENTACH (0/25/50/75/100).
 *     Przy boxie B pikseli wysokosc tla = 5B, przesuniecie = n*B, wiec kafel
 *     skaluje sie razem z boxem i nigdy nie obcina. !important jest celowe:
 *     zla pozycja = zla marka, a to blad, ktorego nie widac na zrzucie calej
 *     karty.
 *  b) PALETA. Kafelek to raster grafitowy, wiec `color` nie da nic. filter:
 *     grayscale + opacity = wyciszenie, hover = pelny kolor. To jedyny sposob
 *     nalozenia palety na raster bez dotykania pliku graficznego.
 *  c) POZYCJA. Prawa strona we WLASNYM rzedzie + ujemny margines dolny, zeby
 *     cluster czytaly sie jako kontynuacja prawego konca rzędu linkow.
 *     WHY NIE w tym samym rzedzie co "Specyfikacja PDF": na 1264 px (ekran
 *     Marcina) kontener ma 943 px, 4 pigulki 860 px -> luz po prawej 41 px, a
 *     strip 5 ikon x 32 = 160 px. Sie tylko od ~1500 px (luz 170), wiec wspolny
 *     rzed dalby kolizje na polowie ekranow.
 */
html body #RamkaProduktu #PodzielSie {
  padding-top: 0;
  margin-bottom: -2px;
}
html body #RamkaProduktu #PodzielSie a {
  width: 24px;
  height: 24px;
  background-size: 100% 500% !important;
  border-radius: 5px;
  filter: grayscale(1) opacity(0.5);
  transition: filter .15s ease;
}
html body #RamkaProduktu #PodzielSie a:hover {
  filter: grayscale(0) opacity(1);
}
html body #RamkaProduktu #PodzielSie a.facebook { background-position: 0 0 !important; }
html body #RamkaProduktu #PodzielSie a.twitter { background-position: 0 25% !important; }
html body #RamkaProduktu #PodzielSie a.pinterest { background-position: 0 50% !important; }
html body #RamkaProduktu #PodzielSie a.linkedin { background-position: 0 75% !important; }
html body #RamkaProduktu #PodzielSie a.wykop { background-position: 0 100% !important; }
@media only screen and (min-width:901px) {
  html body #RamkaProduktu #PodzielSie {
    justify-content: flex-end;
    padding-right: 6px;
  }
  html body #RamkaProduktu #GlowneLinkiProduktu {
    padding-bottom: 8px;
  }
  html body #RamkaProduktu #GlowneLinkiProduktu a {
    padding: 6px 10px 6px 45px;
    margin: 6px 10px;
  }
}

/* --- 6. Zakladki: pasek + odstepy akapitow opisu --------------------------
 * #ZakladkiProduktu = 1772 (1920) / 1843 (1521), z czego .FormatEdytor 1594/1665.
 * Tekst Marcina zostaje w calosci; skracamy tylko rytm.
 */
html body #RamkaProduktu #ZakladkiProduktu #Zakladki {
  margin: 10px 0 6px;
}
html body #RamkaProduktu #ZakladkiProduktu #Zakladki li {
  margin: 4px 12px;
  padding-bottom: 6px;
}
html body #RamkaProduktu #ZakladkiProduktu .FormatEdytor p {
  margin: 7px 0;
}

/* --- 7. Kafle .PozostaleProdukty: 2883 (1920) / 3864 (1521) / 6561 (390) ---
 * Zrodlo miniatury to images/mini/250px_*.webp, wiec 250 -> 160 to downscale,
 * nie upsampling: zero mydla.
 * min-height to 160 px (NIE 0): kafle ponizej folda laduja sie leniwie i dopoki
 * src=loader.gif kontener jest jedynym placeholderem. Przy min-height:0 mierzylem
 * 20 px, a po dociagnieciu 160 = przeskok ukladu przy kazdym scrollu.
 */
html body .PozostaleProdukty {
  margin: 18px 0 18px !important;
}
html body .PozostaleProdukty .Okno .ElementListingRamka {
  padding: 10px !important;
  margin: 8px !important;
  height: calc(100% - 16px) !important;
}
html body .PozostaleProdukty .Okno .Foto {
  min-height: 160px !important;
  margin: 0 0 8px !important;
}
html body .PozostaleProdukty .Okno .Foto img {
  max-height: 160px;
  width: auto;
}
html body .PozostaleProdukty .Okno h3 a {
  margin-bottom: 8px !important;
}
html body .PozostaleProdukty .Okno .Zakup {
  padding-top: 4px !important;
}
html body .PozostaleProdukty .Okno .InputIlosc {
  padding: 6px !important;
}