/* ==========================================================================
   kx-popup-koszyk.css
   OKNO "DO KOSZYKA ZOSTAL DODANY PRODUKT" (jBox Modal, wywolanie z
   DoKoszyka() w javascript/skrypty.php) + karuzela "DO TEGO PRODUKTU
   POLECAMY ROWNIEZ".

   DLACZEGO POWSTAL: wszystkie niebieskie elementy w tym oknie biora kolor z
   tej samej zmiennej szablonu --kolor-szablonu = #0483d3. Reguly panela sa
   z !important (m.in. "html body .DoKoszyka {...}"), ale !important NIE
   blokuje podstawienia var() - wiec wystarczy przelaczyc zmienna wewnatrz
   drzewa okna, a niebieski znika wszedzie naraz, bez wojny o specyficznosc.
   Dodatki powyzej zmiennej: zaokraglenie, ramki, typografia, przyciski.

   NOSNIK: plik szablonu w webroot, ladowany w start.php OBOK
   kx-naglowek-ikony.css (site-wide, nie tylko podstrony - okno wyskakuje
   rowniez z kafelkow na stronie glownej). Brak JS, brak nadpisywania
   plikow bazowych szablonu. Migracja do innego sklepu = kopiuj plik + link.

   MAPA DOM (ustalona 29.10.2026 na p-62386, przez klik w walidzie):
     body.kk-scrolled.unscrollable
       .jBox-wrapper.jBox-Modal.jBox-Default
         .jBox-container
           .jBox-content
             .message
               #PopUpDodaj.PopUpKoszykDodanyDoKoszyka  ("...produkt: <h3>Nazwa</h3> Ilosc: <b>1</b> szt.")
               #BrakAnimacjiKoszyka
               .ProduktyPopUp.LiniaGorna.ProduktyPopUpAnimowany
                 > strong                              ("Do tego produktu polecamy rowniez:")
                 #ProduktyOknoPopUp.LiniaDolna.TabelaTbl (slick)
                   .ProduktPopUp.ProduktDodanyDoKoszyka
                     .ProduktPopUpRamka
                       .Foto a.Zoom img.Zdjecie
                       .ProdCena > h3 a | .ProduktCena .Cena .CenaAktualna
                       .ZakupKontener .Zakup .DoKoszyka.ToolTip   ("Do koszyka")
               #PopUpPrzyciski.PopUpKoszykPrzyciski
                 span.przycisk ("Kontynuuj zakupy") | a.przycisk[href=koszyk.html] ("Przejdz do koszyka")

   UWAGA PRAWNA DLA PRZYSZLYCH EDITOROW: ponizej 1024 px szablon calkowicie
   chowa .ProduktyPopUp (max-height:0; visibility:hidden; top:-20000px), wiec
   na telefonie widac tylko komunikat + przyciski. Nie "naprawiaj" tego -
   to swiadoma decyzja szablonu bazowego.
   ========================================================================== */

/* --- 1. PALETA OKNA: przelaczenie zmiennych + radius + ramka ----------- */
html body .jBox-Modal .jBox-container {
  --kolor-szablonu: #9c7339;         /* jedyny zdroj niebieskiego w oknie */
  --kolor-kolka-ilosci: #c59b5b;
  --kolor-ramka-modul: #e8e2da;
  --kolor-ramka-modul-hover: #c59b5b;
  --zaokraglenie-5-px: 10px;         /* szablon ma 0px -> kafle byly ostre */
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e8e2da;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(22, 24, 27, .22), 0 2px 6px rgba(22, 24, 27, .08);
}

html body .jBox-Modal .jBox-content {
  padding: 20px 22px 16px;
  color: #191b1f;
}

/* tlo pod oknem: szablon ma rgba(0,0,0,.82) - za geste, przyciemnia kafle */
html body .jBox-overlay {
  background: rgba(22, 24, 27, .58);
}

/* --- 2. KOMUNIKAT "DODANO DO KOSZYKA" ---------------------------------- */
html body .jBox-Modal #PopUpDodaj,
html body .jBox-Modal #PopUpUsun {
  max-width: 720px;
  margin: 4px auto 2px;
  padding: 4px 12px 12px;
  color: #5a5750;
  font-size: 13px;
  letter-spacing: .02em;
}

html body .jBox-Modal #PopUpDodaj h3,
html body .jBox-Modal #PopUpUsun h3 {
  margin: 6px auto 4px;
  padding: 0;
  color: #191b1f;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

html body .jBox-Modal #PopUpDodaj b {
  color: #191b1f;
  font-weight: 700;
}

/* --- 3. NAGLOWEK KARUZELI + KAFEL PROPOZYCJI --------------------------- */
html body .jBox-Modal .ProduktyPopUp > strong {
  display: block;
  margin: 14px 15px 8px;
  color: #191b1f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
}

/* Kafel propozycji: grupa regul szablonu z "!important" trzyma radius 8 px i
   border var(--kx-line) = #e7e3dc. To dokladnie te same parametry co kafle na
   listingu, wiec celowo NIE z nimi walczymy - nadpisujemy tylko hover. */
html body .jBox-Modal .ProduktyPopUp .ProduktPopUp .ProduktPopUpRamka {
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

html body .jBox-Modal .ProduktyPopUp .ProduktPopUp .ProduktPopUpRamka:hover {
  border-color: #c59b5b;
  box-shadow: 0 10px 24px rgba(156, 115, 57, .16) !important;
  transform: translateY(-2px);
}

html body .jBox-Modal .ProduktyPopUp .ProduktPopUp .Foto img {
  border-radius: 8px;
}

html body .jBox-Modal .ProduktyPopUp .ProduktPopUp h3 a {
  color: #191b1f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

html body .jBox-Modal .ProduktyPopUp .ProduktPopUp h3 a:hover {
  color: #9c7339;
}

/* --- 4. CENA: niebieska z "html body .Cena / .ProdCena" ---------------- */
html body .jBox-Modal .ProduktyPopUp .ProdCena,
html body .jBox-Modal .ProduktyPopUp .ProdCena .Cena,
html body .jBox-Modal .ProduktyPopUp .ProdCena .Cena .CenaAktualna,
html body .jBox-Modal .ProduktyPopUp .ProdCena .CenaPoprzednia {
  color: #9c7339 !important;
  font-size: 16px;
  font-weight: 800;
}

/* --- 5. PRZYCISK "DO KOSZYKA" NA KAFLU ---------------------------------- */
/* Panel: "html body .DoKoszyka {...} = (0,1,2) + !important" nadaje tlo
   var(--kolor-szablonu). Bilans po przelaczeniu zmiennej dalby #9c7339 -
   chcemy jasne zloto z grafitowa strzalka, wiec nadpisujemy wlasnym (0,3,3).

   UWAGA: szablon buduje ten przycisk z dwoch pseud-elementow i to NIE jest
   dekoracja, ktora mozna sciac:
     ::after  = 40 px grafitowa strzalka (clip-path polygon, z-index:-1)
     ::before = 20 px biala ikona koszyka (koszyk.svg + filtr-bialy), left 8 px
   Dlatego padding-left zostaje 46 px - przy "9px 14px" ikona wjezdzala na
   tekst (zmierzone 29.10 na podgladzie). Hover szablonu poszerza strzalke do
   100%, wiec tekst musi wowczas byc bialy, inaczej znika na grafcie. */
html body .jBox-Modal .ProduktyPopUp span.DoKoszyka {
  background: #c59b5b !important;
  background-image: none !important;
  color: #191b1f !important;
  border: 1px solid #c59b5b !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 9px 12px 9px 46px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

html body .jBox-Modal .ProduktyPopUp span.DoKoszyka::after {
  background: #202124;
}

html body .jBox-Modal .ProduktyPopUp span.DoKoszyka:hover,
html body .jBox-Modal .ProduktyPopUp span.DoKoszyka:focus {
  background: #c59b5b !important;
  border-color: #c59b5b !important;
  color: #fff !important;
}

html body .jBox-Modal .ProduktyPopUp span.DoKoszyka:hover::after {
  background: #202124;
}

/* --- 6. STOPKA: "Kontynuuj zakupy" + "Przejdz do koszyka" --------------- */
html body .jBox-Modal #PopUpPrzyciski {
  margin: 10px 0 2px;
  padding: 14px 0 0;
  border-top: 1px solid #f0ece5;
  text-align: center;
}

html body .jBox-Modal #PopUpPrzyciski a.przycisk {
  background: #c59b5b !important;
  color: #191b1f !important;
  border: 1px solid #c59b5b !important;
  border-radius: 10px !important;
  padding: 11px 22px !important;
  font-size: 15px;
  font-weight: 700;
}

/* "Kontynuuj zakupy" byl pelna czernia - robimy z niego przycisk drugorzedny */
html body .jBox-Modal #PopUpPrzyciski span.przycisk {
  background: #fff !important;
  color: #5a5750 !important;
  border: 1px solid #e8e2da !important;
  border-radius: 10px !important;
  padding: 11px 22px !important;
  font-size: 15px;
  font-weight: 600;
}

html body .jBox-Modal #PopUpPrzyciski a.przycisk:hover,
html body .jBox-Modal #PopUpPrzyciski a.przycisk:focus {
  background: #9c7339 !important;
  border-color: #9c7339 !important;
  color: #fff !important;
}

html body .jBox-Modal #PopUpPrzyciski span.przycisk:hover,
html body .jBox-Modal #PopUpPrzyciski span.przycisk:focus {
  background: #faf8f5 !important;
  border-color: #c59b5b !important;
  color: #191b1f !important;
}

/* --- 7. STRZALKI KARUZELI + RAMKI FOKUSA -------------------------------- */
html body .jBox-Modal .ProduktyPopUpAnimowany .slick-arrow::before {
  color: #5a5750;
  font-size: 26px;
}

html body .jBox-Modal .ProduktyPopUpAnimowany .slick-arrow:hover::before {
  color: #9c7339;
}

html body .jBox-Modal .jBox-container :focus-visible {
  outline: 2px solid #c59b5b;
  outline-offset: 2px;
}

/* --- 8. WASKI EKRAN: przyciski stopki pe3nej szerokosci ----------------- */
@media only screen and (max-width: 767px) {
  html body .jBox-Modal .jBox-content {
    padding: 16px 12px 14px;
  }

  html body .jBox-Modal #PopUpDodaj h3,
  html body .jBox-Modal #PopUpUsun h3 {
    font-size: 16px;
  }

  html body .jBox-Modal #PopUpPrzyciski a.przycisk,
  html body .jBox-Modal #PopUpPrzyciski span.przycisk {
    display: block;
    width: auto;
    margin: 8px 0 !important;
  }
}