/* === KINKIECIK KX-SCIEZKA 2026-10-29 START ===
   Wyniesione z kx-css-podstrony.dat (rozdzielenie na osobne pliki jak na lafabryka).
   Zakres: SCIEZKA PLATNOSCI - sekcje 11 i 12b: ładrówek 3 kroków, link 'mam konto', kafel po zapłacie, link na wartości czasu wysyłki (KxTerminyLink).
=== KINKIECIK KX-SCIEZKA END === */

/* --- 11. SCIEZKA PLATNOSCI: ladrowek 3 krokow + link konta + blok po zaplacie ---
   Elementy wstrzykuje kx-koszyk-sciezka.js (.KxKroki / .KxKontoLink / .KxPoZakupie).
   Reguly mieszkaja w tym samym pliku co DOM, zeby JEDNO cofniecie (usunac blok)
   wywrocilo i styl, i tresc - przeniesienie na inny sklep to te same trzy klasy.
   Ladrowek jest rodzenstwem .StrTresc (dzieckiem #TrescKoszyka), nigdy wnukiem
   gridu - patrz komentarz przy sekcji 2.
   Copy (Koszyk / Dane i dostawa / Platnosc) jest w JS, nie tu: jeden jezyk,
   jedna parawa. Numer kroku bierziemy z data-kx-n, wiec CSS nie duplikuje tekstu. */
html body #TrescKoszyka .KxKroki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 14px;
  padding: 10px 14px;
  list-style: none;
  background: var(--kkc-grad-pole);
  border: 1px solid var(--kkc-kreska-zloto);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
}

html body #TrescKoszyka .KxKrok {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--kkc-muted);
}

html body #TrescKoszyka .KxKrok::before {
  content: attr(data-kx-n);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 7px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--kkc-line);
  color: var(--kkc-muted);
  font-size: 12px;
  font-weight: 800;
}

html body #TrescKoszyka .KxKrok:not(:last-child)::after {
  content: "\203A";
  margin-left: 10px;
  color: var(--kkc-kreska-zloto-mocna);
  font-weight: 400;
  font-size: 15px;
}

html body #TrescKoszyka .KxKrok.is-aktywny { color: var(--kkc-warm-dark); }

html body #TrescKoszyka .KxKrok.is-aktywny::before {
  background-image: var(--kkc-grad-zloto);
  background-color: var(--kkc-warm);
  border-color: var(--kkc-warm);
  color: #fff;
}

/* krok za nami: ptaszek zamiast numeru, zeby ladrowek czytal sie od lewej */
html body #TrescKoszyka .KxKrok.is-done { color: var(--kkc-ink); }

html body #TrescKoszyka .KxKrok.is-done::before {
  content: "\2713";
  background: var(--kkc-champagne);
  border-color: var(--kkc-kreska-zloto);
  color: var(--kkc-warm-dark);
}

/* link "Mam konto, zaloguj sie" - pod CTA, wewnatrz span#przycisk_zamow
   (sekcja 9 zrobila ten span display:block + width:100%, wiec link leze
   dokladnie pod przyciskiem, nie u boku polowy strony) */
html body #TrescKoszyka .KxKontoLink {
  display: block;
  width: 100%;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--kkc-kreska-zloto);
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  color: var(--kkc-muted);
}

html body #TrescKoszyka .KxKontoLink:hover {
  color: var(--kkc-warm-dark);
  text-decoration: underline;
}

/* kafel "zaloz konto na nastepne zakupy" na /zamowienie-podsumowanie.html.
   Tam .StrTresc NIE jest gridem (brak > .Koszyk), wiec wkladamy normalny blok.
   a.przycisk musi przebic panelowy "RESTORE BLUE ACCENTS"
   (html body #TrescKoszyka .przycisk {color;background !important}) - stad
   wieksza specyficznosc (klasa + element) i wlasne !important. */
html body #TrescKoszyka .KxPoZakupie {
  margin: 14px 0;
  padding: 16px 18px;
  background: var(--kkc-grad-pole);
  border: 1px solid var(--kkc-kreska-zloto);
  border-left: 5px solid var(--kkc-warm);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
}

html body #TrescKoszyka .KxPoZakupie h4 { margin: 0 0 4px; font-size: 16px; font-weight: 700; color: var(--kkc-ink); }
html body #TrescKoszyka .KxPoZakupie p  { margin: 0 0 10px; font-size: 13px; line-height: 1.35; color: var(--kkc-muted); }

html body #TrescKoszyka .KxPoZakupie a.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 0 18px;
  background-image: var(--kkc-grad-zloto) !important;
  background-color: var(--kkc-warm) !important;
  border: 0 !important;
  border-radius: var(--kkc-radius-mini);
  box-shadow: var(--kkc-cien-kafel);
  color: #fff !important;
  font-size: 15px;
  text-decoration: none;
}

html body #TrescKoszyka .KxPoZakupie a.przycisk:hover {
  background-image: linear-gradient(90deg,var(--kkc-warm-dark),var(--kkc-warm)) !important;
  background-color: var(--kkc-warm-dark) !important;
}

/* --- 12b. LINK na WARTOSCI czasu wysylki (wstrzykuje sciezka JS) ---------------
   Marcin 29.10, dwa strzaly w jedna zmiane: "link mia byc podpiety pod
   'od 3 - do 5 dni roboczych', a 'Zapoznaj sie z terminami realizacji zamowien'
   chcem usunac". linkujCzasWysylki() w kx-koszyk-sciezka.js owija wartosc
   (z slownika terminow wysylki) w <a class="KxTerminyLink"> ->
   /termin-realizacji-zamowien-pm-22.html i przycina ogon "Zapoznaj...", dopoki
   ktorys wpis slownika go jeszcze ma.
   ZMIERZONE 29.10 (zrzut Marcina 10:38, koszyk 3 wiersze): wiersz 1 i 2 =
   "od 3 - do 5 dni roboczych" BEZ frazy (Marcin zdazyl ja usunac w
   /zarzadzanie/slowniki/terminy_wysylek.php), wiersz 3 = "od 14 - do 21 dni
   roboczych - Zapoznaj..." jeszcze z fraza. Na karcie p-122948 wartosc to
   "od 24 - do 48 godziny" - stad otwarta lista koncowek w JS, nie jedno slowo.
   NIE linkujemy .InformacjaCzasWysylki ("Szacowany czas ... 36 dni
   KALENDARZOWYCH"): ten wiersz to tylko drobny druk 11 px (sekcja 2).
   Selektor BEZ #TrescKoszyka: na karcie produktu (#CzasWysylki w
   szablonach/szablon-jx339.rwd.v2/tresc/produkt.tp) #TrescKoszyka nie istnieje.
   DWA PUAPKI ZMIERZONE 29.10 NA KARCIE PRODUKTU (a.KxTerminyLink, 1920 px):
   1) tokeny --kkc-* sa ZADEKLAROWANE NA html body #TrescKoszyka (sekcja 0),
      wiec poza koszykiem = puste. "color: var(--kkc-warm-dark)" bez wartosci
      zapasowej przy "invalid at computed-value time" DZIEDZICZY kolor rodzica
      i link wychodzil rgb(25,27,31) = --kkc-ink, czyli identycznie z tekstem.
      Stad jawne fallbacki #9c7339 / rgba(197,155,91,.34) - te same wartosci,
      ktore tokeny oddaja w koszyku.
   2) "text-decoration: underline !important" to SHORTHAND - przy !important
      nadpisal NIEflagowane dlugie formy z tego samego bloku i zbijal
      text-decoration-style do "solid", a jego kolor do currentColor
      (mierzone: styl=solid, kolorTd=rgb(25,27,31) mimo wpisanych dotted/zloto).
      Rozbite na dlugie formy, kazda z wlasnym !important. */
html body .KxTerminyLink {
  color: var(--kkc-warm-dark, var(--kx-warm-dark, #9c7339)) !important;
  text-decoration-line: underline !important;
  text-decoration-style: dotted !important;
  text-decoration-color: var(--kkc-kreska-zloto, rgba(197,155,91,.34)) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px;
}

html body .KxTerminyLink:hover {
  color: var(--kkc-warm, var(--kx-warm, #c59b5b)) !important;
  text-decoration-style: solid !important;
  text-decoration-color: var(--kkc-warm-dark, var(--kx-warm-dark, #9c7339)) !important;
}