/* === KINKIECIK NAGLOWEK IKONY 2026-10-29 START ===
   Marcin 29.10: "header ma widoczny schowek oraz koszyk, trzeba to zamienic na
   ikony jak w lafabryka z dymkiem ewentualnie oraz balonikiem do koszyka i
   schowka. Oczywiscie w naszych kolorach a nie z lafabryka".

   CO SIE ZMIENIA:
   - DESKTOP (>=1024 px): kafel "Schowek 0,00 zl" / "Koszyk 5 204,03 zl"
     (121,6 x 50 px: niebieska plakietka + tekst + szewron) -> sama ikona 26 px
     w polu 44 x 44 px, balonik z licznikiem (ukryty przy 0), dymek po najechaniu
   - MOBILE (<1024 px): wlasna rzeda szablonu .NaglowekIkony > .IkonaSchowek /
     .IkonaKoszyk. Ikony zostaja szablonowe (koszyk.svg / schowek.svg - te same
     sylwetki co nasze SVG), podmieniamy TYLKO balonik .IkonaIlosciNaglowek:
     szablon maluje go var(--kolor-kolka-ilosci) = niebieski #0483d3 i w polu
     18 x 14 px zakrywa sygniete ikony. Patrz sekcja MOBILE na koncu pliku.
   - kontener .KoszykPrzyciskiKontener: 403 px -> ok. 94 px, wiersz naglowka
     odzyskuje miejsce

   DANE (semantyka zmierzona, nie domysl):
   - licznik = tokeny szablonu {__ILOSC_PRODUKTOW_KOSZYKA} /
     {__ILOSC_PRODUKTOW_SCHOWKA}, te same ktore silnik uzna juz w bloku mobile
     (strona_glowna.tp linie 1250 i 1264) -> ZERO JS, balonik zjawia sie razem
     z zawartoscia koszyka
   - ceny {__WARTOSC_*_BRUTTO} zostaja w DOM, tylko wizualnie schowane: bez tego
     pliku CSS (np. 404) naglowek wraca do obecnych kafli zamiast zostac pusty
   - ikona = wtasny plik SVG w /kx-ikony/, przefarbowana 1:1 sylwetka szablonu
     (koszyk.svg, schowek.svg). Bez "filter: invert/sepia" - te filtry naleza do
     szablonu (--filtr-bialy = invert(98%) sepia(100%)...) i ich nie odgadujemy

   KOLORY = paleta kinkiecik (wzor pm-42 "Oswietlenie na inwestycje", te same
   wartosci co --kx-* w cache_podstrony.css), NIE niebieski --kolor-szablonu
   (#0483d3), NIE paleta lafabryka:
     #c59b5b zloto (balonik)  #9c7339 zloto ciemne (ikona, fokus; na #fff 4,6:1)
     #f8f6f1 krem (pole hover) #202124 grafit (dymek)  #191b1f atrament (napis)
   Napis balonika jest atramentem na zlocie, NIE biela: bialy na #c59b5b = 2,4:1
   = FAIL kontrastu.

   PREFIKS "html body" + !important: blok laduje po <style>WYGLAD_DODATKOWY_CSS
   (start.php linia 779) wiec kaskadowo i tak wygrywa, ale regul szablonu jest tu
   szesc na raz (#Koszyk .KoszykNaglowek > span::before itd.) i dwie maja
   !important w szablonie. Patrz lekcja "CSS w 3 nosnikach, inline wygrywa".

   DEGRADACJA: kazda regula zalezna od .tp (balonik, dymek) jest zguardowana
   atrybutem [data-kx-ile] / [data-kx-dymek]. Sam ten CSS + brak edycji .tp =
   ikony bez balonika, bez falszywego pustego dymka.
=== KINKIECIK NAGLOWEK IKONY END === */

@media only screen and (min-width:1024px) {

  html body .KoszykPrzyciskiKontener {
    display: flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
  }

  html body #Koszyk,
  html body #Schowek {
    position: relative;
    width: auto !important;
  }

  /* --- 1. kafel -> ikona: ramka, zaprawa pod plakietke i szewron wylon --- */
  html body #Koszyk .KoszykNaglowek,
  html body #Schowek .SchowekNaglowek {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border: 0 !important;
    /* 8 px, nie 12: panel (WYGLAD_DODATKOWY_CSS) ma na tych linkach
       "border-radius:8px !important" i to ono wygrywalo - sprawdzone w CSSOM.
       8 px to tez radius pola wyszukiwarki, wiec glowa naglowka jest spojna.
       box-shadow:none zdejmuje cien kafelka "0 8px 18px", ktory pod ikona
       44 px wygladal jak brudna plama. */
    border-radius: 8px !important;
    background: transparent;
    box-shadow: none !important;
    overflow: visible !important;
    transition: background-color .18s ease-in-out;
  }

  /* szewron strzalka_dol.svg na prawym sloupku - bez tekstu jest zbedny */
  html body #Koszyk .KoszykNaglowek::before,
  html body #Schowek .SchowekNaglowek::before {
    content: none !important;
    display: none !important;
  }

  /* szablonowe pole: mialo padding-left 65 px pod niebieska plakietke.
     "first-of-type" NIE jest ozdobnikiem: balonik tez jest bezposrednim <span>
     dziecka <a>, wiec bez tego zlacza lapal reguly pala (druga ikona w baloniku,
     display z !important jedzacy display:none przy zerze) - zmierzone 29.10. */
  html body #Koszyk .KoszykNaglowek > span:first-of-type,
  html body #Schowek .SchowekNaglowek > span:first-of-type {
    display: block !important;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    font-size: inherit;
    white-space: normal;
    transition: none;
  }

  /* niebieska plakietka (--kolor-szablonu) z clip-path w strzalke + jej animacja */
  html body #Koszyk .KoszykNaglowek > span:first-of-type::before,
  html body #Schowek .SchowekNaglowek > span:first-of-type::before {
    content: none !important;
    display: none !important;
    background: none !important;
    animation: none !important;
  }

  /* ikona 26 px na srodku pola 44 px, bez filtrow szablonu */
  html body #Koszyk .KoszykNaglowek > span:first-of-type::after,
  html body #Schowek .SchowekNaglowek > span:first-of-type::after {
    content: "" !important;
    display: block !important;
    position: static !important;
    width: 26px;
    height: 26px;
    margin: 9px auto;
    transform: none !important;
    background-position: center center !important;
    background-size: 26px 26px !important;
    background-repeat: no-repeat !important;
    filter: none !important;
  }

  html body #Koszyk .KoszykNaglowek > span:first-of-type::after {
    background-image: url("kx-ikony/kx-ikona-koszyk.svg") !important;
  }

  html body #Schowek .SchowekNaglowek > span:first-of-type::after {
    background-image: url("kx-ikony/kx-ikona-schowek.svg") !important;
  }

  /* --- 2. tekst + cena: wizualnie schowane, zostaja w DOM.
          display:none zabraloby nazwe linku czytnikowi ekranowemu, dlatego
          clip-path po 1 px, a nie "ukryj calkowicie". --- */
  html body #Koszyk .KoszykNaglowek > span > span,
  html body #Schowek .SchowekNaglowek > span > span {
    display: block !important;
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* --- 3. BALONIK z licznikiem (token szablonu, zero JS) ---
     Balonik jest bezposrednim <span> dziecka <a> - dokladnie tak jak pole ikony
     z punktu 1. Dlatego reguly musza miec ID w selektorze i nadpisac plasko
     wszystko, co szablon daje na "> span" (display:flex, height:50px,
     padding-left:65px, position:relative, font-size:110%). Bez tego balonik
     dostawal pole 44x44 i druga ikone w srodku - zmierzone 29.10. */
  html body #Koszyk .KoszykNaglowek > span.KxNaglowekBalonik,
  html body #Schowek .SchowekNaglowek > span.KxNaglowekBalonik {
    position: absolute !important;
    top: 1px;
    right: -1px;
    left: auto;
    z-index: 4;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: auto;
    min-width: 19px;
    height: 19px !important;
    padding: 0 5px !important;
    margin: 0;
    border-radius: 10px;
    background: #c59b5b !important;
    color: #191b1f !important;
    font-size: 11px !important;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
    white-space: nowrap;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
    transition: none;
  }

  html body #Koszyk .KoszykNaglowek[data-kx-ile="0"] > span.KxNaglowekBalonik,
  html body #Schowek .SchowekNaglowek[data-kx-ile="0"] > span.KxNaglowekBalonik {
    display: none !important;
  }

  /* DRUGA IKONA W BALONIKU - to byl ten "rozjazd" ze zrzutu Marcina.
     Szablon ma #Koszyk .KoszykNaglowek > span::after (ikona 22 px, filter
     --filtr-bialy) i > span::before (niebieska plakietka z clip-path). Both
     trafia w KAZDY bezposredni span, wiec takze w balonik: na 19 px kole w nim
     rysowal sie 22 px symbol. Zliczenie po ":first-of-type" w punkcie 1 zdjelo
     tylko MOJA ikone z balonika - regul szablonu trzeba wyraznie unicestwic.
     Zmierzone 29.10: afBg = .../szablony/szablon-jx339.../ 22 px display:block. */
  html body #Koszyk .KoszykNaglowek > span.KxNaglowekBalonik::before,
  html body #Schowek .SchowekNaglowek > span.KxNaglowekBalonik::before,
  html body #Koszyk .KoszykNaglowek > span.KxNaglowekBalonik::after,
  html body #Schowek .SchowekNaglowek > span.KxNaglowekBalonik::after {
    content: none !important;
    display: none !important;
    background: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* --- 4. DYMEK (czysty CSS).
          title zostal WYRZUCONY z .tp: zostalyby dwa dymki naraz (nasz natych-
          miast + systemowy po ~1 s). Nazwe linku czyta AT z punktu 2.
          POZYCJA NAD IKONA, nie pod: pod ikona siedzi okienko koszyka/schowka
          (.KoszykRozwijany, z-index 125) i zjadalo dymek calkowicie - zmierzone
          na zrzucie 29.10 (dymek byl gotowy, ale pod popupem). 130 > 125. --- */
  html body #Koszyk .KoszykNaglowek[data-kx-dymek]::after,
  html body #Schowek .SchowekNaglowek[data-kx-dymek]::after {
    content: attr(data-kx-dymek);
    position: absolute;
    bottom: calc(100% + 9px);
    top: auto;
    left: 50%;
    transform: translate(-50%, -4px);
    z-index: 130;
    padding: 6px 10px;
    border-radius: 8px;
    background: #202124;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease-in-out, transform .15s ease-in-out;
    pointer-events: none;
  }

  html body #Koszyk .KoszykNaglowek[data-kx-dymek]:hover::after,
  html body #Schowek .SchowekNaglowek[data-kx-dymek]:hover::after,
  html body #Koszyk .KoszykNaglowek[data-kx-dymek]:focus-visible::after,
  html body #Schowek .SchowekNaglowek[data-kx-dymek]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  /* --- 5. najechanie / fokus klawiatura --- */
  html body #Koszyk .KoszykNaglowek:hover,
  html body #Schowek .SchowekNaglowek:hover {
    background: #f8f6f1 !important;
  }

  html body #Koszyk .KoszykNaglowek:focus-visible,
  html body #Schowek .SchowekNaglowek:focus-visible {
    outline: 2px solid #9c7339;
    outline-offset: 2px;
  }

  /* --- 6. OKIENKO POD GLONA (koszyk + schowek) ---
     Marcin 29.10: "po najechaniu na koszyk pojawia sie okienko pop to tez trzeba
     poprawic na nasze kolory i zaokraglic".
     Struktura (odczyt z wypelnionego koszyka, nie z domyslu):
       .KoszykRozwijany > .RozwinietaWersjaPelna.RozwinietaWersja
         > .ZawartoscKoszykaSchowkaRozwijane (wiersz)
             > .ZawartoscKoszykaSchowkaFoto > img
             > .ZawartoscKoszykaSchowkaDane > .NazwaProduktuIlosc|a
                                                  > .CenyRozwinietyKoszykSchowek
                                                    > span.Cena > span.CenaAktualna
         > .ZawartoscKoszykaSchowkaSumaFixed (sticky dol)
             > .ZawartoscKoszykaSchowkaSuma > .ZawartoscKoszykaSchowkaLacznie
                                            > .ZawartoscKoszykaSchowkaDoKasy > a.przycisk
     Stan przed: radius 0 (var --zaokraglenie-5-px = 0 px), ramka #e1e1e1, pasek
     sumy #f8f8f8, ceny NIEBIESKIE (regula "html body .KoszykRozwijany .Cena" z
     nosnika .dat, color !important) i przycisk .przycisk = --kolor-szablonu.
     Scoping po #Koszyk/#Schowek: .RozwinietaWersja obsluguje tez okienko
     porownania i kontaktu - ich nie dotykamy. */
  html body #Koszyk .KoszykRozwijany,
  html body #Schowek .SchowekRozwijany {
    right: 0;
    left: auto;
  }

  html body #Koszyk .RozwinietaWersja,
  html body #Schowek .RozwinietaWersja {
    border: 1px solid #e8e2da !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 34px rgba(22, 24, 27, .14) !important;
    background: #fff !important;
  }

  /* scroll wewnatrz okienka = to on przycina rogi do radiusu, wiec overflow
     zostaje auto; zmiana tylko max-height (300 -> 336 px, zeby 2 wiersze 60 px
     zdjec + ich opisy mieScily sie bez przewijania) */
  html body #Koszyk .RozwinietaWersjaPelna,
  html body #Schowek .RozwinietaWersjaPelna {
    max-height: 336px !important;
    width: 460px !important;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaRozwijane,
  html body #Schowek .ZawartoscKoszykaSchowkaRozwijane {
    padding: 12px 14px !important;
    border-top: 1px solid #f0ece5 !important;
    transition: background-color .15s ease-in-out;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaRozwijane:hover,
  html body #Schowek .ZawartoscKoszykaSchowkaRozwijane:hover {
    background: #faf8f5;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaRozwijane:nth-child(1),
  html body #Schowek .ZawartoscKoszykaSchowkaRozwijane:nth-child(1) {
    border-top: 0 !important;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaFoto img,
  html body #Schowek .ZawartoscKoszykaSchowkaFoto img {
    border-radius: 10px;
    background: #f8f6f1;
  }

  html body #Koszyk .NazwaProduktuIlosc,
  html body #Schowek .NazwaProduktuIlosc,
  html body #Koszyk .ZawartoscKoszykaSchowkaDane > a,
  html body #Schowek .ZawartoscKoszykaSchowkaDane > a {
    color: #191b1f;
    font-size: 13.5px;
    line-height: 1.35;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaDane a:hover,
  html body #Schowek .ZawartoscKoszykaSchowkaDane a:hover {
    color: #9c7339;
  }

  /* !important jest wymagane, nie ozdobny: regula "html body .KoszykRozwijany
     .Cena { color: var(--kolor-szablonu) !important }" siedzi w nosniku .dat.
     Ten plik laduje pozniej i ma ID w selektorze - wygrywa. */
  html body #Koszyk .CenyRozwinietyKoszykSchowek .Cena,
  html body #Schowek .CenyRozwinietyKoszykSchowek .Cena,
  html body #Koszyk .CenaAktualna,
  html body #Schowek .CenaAktualna {
    color: #9c7339 !important;
    font-size: 14px !important;
    font-weight: 700;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaSumaFixed,
  html body #Schowek .ZawartoscKoszykaSchowkaSumaFixed {
    background: #f8f6f1 !important;
    border-top: 1px solid #e8e2da !important;
    padding: 12px 14px !important;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaLacznie,
  html body #Schowek .ZawartoscKoszykaSchowkaLacznie {
    color: #191b1f;
    font-size: 13px;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaLacznie b,
  html body #Schowek .ZawartoscKoszykaSchowkaLacznie b {
    font-size: 14px;
    color: #9c7339;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaDoKasy a.przycisk,
  html body #Schowek .ZawartoscKoszykaSchowkaDoKasy a.przycisk {
    background: #c59b5b !important;
    color: #191b1f !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 9px 14px !important;
    margin: 0 !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    transition: background-color .18s ease-in-out, color .18s ease-in-out;
  }

  html body #Koszyk .ZawartoscKoszykaSchowkaDoKasy a.przycisk:hover,
  html body #Schowek .ZawartoscKoszykaSchowkaDoKasy a.przycisk:hover,
  html body #Koszyk .ZawartoscKoszykaSchowkaDoKasy a.przycisk:focus,
  html body #Schowek .ZawartoscKoszykaSchowkaDoKasy a.przycisk:focus {
    background: #9c7339 !important;
    color: #fff !important;
  }

  html body #Koszyk .PustyKoszykSchowek,
  html body #Schowek .PustyKoszykSchowek {
    padding: 14px !important;
    font-size: 13px;
    color: #5a5750;
  }
}

/* === 7. MOBILE <1024 px: BALONIK .IkonaIlosciNaglowek ====================
   DOM (strona_glowna.tp, rzeda .NaglowekIkony - inna galaz niz desktopowe
   #Koszyk/#Schowek, ktore tutaj maja 0 x 0 px):
     <div class="IkonaSchowek IkonaMobilna">
       <a href="schowek.html"><span class="IkonaOpisMobile">Schowek</span>
       <span class="IkonaIlosciNaglowek">1</span></a></div>
   Regul, ktore musze pokonac (wszystkie w @media max-width:1023px):
   a) cache/Cache_CssSzablonGlowna.css  span.IkonaIlosciNaglowek
      -> background: var(--kolor-kolka-ilosci) = niebieski, height/line-height
         22 px, min-width 18 px, lewy 50% + translate(-100%)
   b) ta sama regulka powtorzona 3x (cache + .dat + inline panelu) z
      top:0 !important i transform:translate(-50%,0) !important
   c) inline panelu (WYGLAD_DODATKOWY_CSS)  ...a .IkonaIlosciNaglowek
      -> top:-4px !important, right:0 !important, 14 px, font-size 10 px
      Panel NIE kasuje "left:50%", wiec lewa krawedz balonika wciaz siedzi na
      srodku ikony 26 px i zaslaniala sygniete. Stad left:auto !important +
      transform:none !important ponizej.
   Specyficznosc mojego selektora (0,3,3) > ich (0,2,3), wiec wygrywa bez
   zaleznosci od kolejnosci ladowania. */
@media only screen and (max-width:1023px) {
  html body .NaglowekLogoIkony .NaglowekIkony span.IkonaIlosciNaglowek {
    left: auto !important;
    right: -3px !important;
    top: -6px !important;
    transform: none !important;
    box-sizing: border-box;
    min-width: 17px;
    height: 17px !important;
    padding: 0 4px !important;
    line-height: 17px !important;
    border-radius: 9px !important;
    background: #c59b5b !important;
    color: #191b1f !important;
    font-size: 10px !important;
    font-weight: 800;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
  }

  /* PUSTY KOSZYK / SCHOWEK: token {__ILOSC_PRODUKTOW_*} oddaje "0", nie pusty
     span, wiec :empty NIE dziala (sprawdzone na szablonie - stary zapis byl
     martwy). Robimy to samo co na desktopie: atrybut data-kx-ile na <a> +
     zero = display:none. Atrybut doklejony w strona_glowna.tp 1250 i 1264.

     DWA selektory, nie jeden, bo panel (WYGLAD_DODATKOWY_CSS) traktuje te dwa
     kontrolki ROZNIE:
     - schowek: "...> .IkonaSchowek.IkonaMobilna a .IkonaIlosciNaglowek" = (0,5,3)
       -> nasz (0,6,3) wystarczy
     - koszyk:  "...> .IkonaMobilna:not(.IkonaStart):not(.IkonaWyszukiwania)
       :not(.IkonaMenuGlownego):not(.IkonaPanelKlienta):not(.IkonaSchowek)
       a .IkonaIlosciNaglowek" = (0,9,3) i zawiera "display:inline-block !important"
       -> przy jednym wspolnym selektorze koszyk ZWYCIEZAL i wisialo zloty "0"
          (zmierzone 29.10 na pustym koszyku: schowek display:none, koszyk widoczny)
       Dlatego powtarzamy jego :not() lancuch i dokladamy [data-kx-ile="0"] = (0,10,3). */
  html body .NaglowekLogoIkony .NaglowekIkony > .IkonaSchowek.IkonaMobilna a[data-kx-ile="0"] .IkonaIlosciNaglowek,
  html body .NaglowekLogoIkony .NaglowekIkony > .IkonaMobilna:not(.IkonaStart):not(.IkonaWyszukiwania):not(.IkonaMenuGlownego):not(.IkonaPanelKlienta):not(.IkonaSchowek) a[data-kx-ile="0"] .IkonaIlosciNaglowek {
    display: none !important;
  }
}