/* === KINKIECIK KX-KOSZYK 2026-10-29 START ===
   Wyniesione z kx-css-podstrony.dat (rozdzielenie na osobne pliki jak na lafabryka).
   Zakres: KOSZYK (etap 1) - sekcje 0..10e: tokeny --kkc-*, karta, szyna, tabela, usuń, pasek akcji, kafle dostawa/platnosc, darmowa dostawa, podsumowanie+rabat, kupon+CTA, niebieskie resztki.
=== KINKIECIK KX-KOSZYK END === */

/* === KINKIECIK KOSZYK KOMPAKT 2026-10-29 START ===
   Port UKLADU kompaktowego koszyka z lafabryka.pl (90_KOSZYK.css, Etap 19/20)
   na kinkiecik.pl + paleta wzorcowa kinkiecik.
   Zalacznik DO kx-css-podstrony.dat; calosc ograniczona do #TrescKoszyka.

   KOLORY (Marcin 29.10, dwa poprawki):
   - NIE szary szablonu ShopGold, NIE niebieski --kolor-szablonu.
   - Wzor = strona pm-42 "Oswietlenie na inwestycje": krem/szampania,
     beezowa linia, zlote akcenty, grafitowy blok. Te same tokeny, ktorych
     kinkiecik uzywa juz w design systemie na :root (cache_podstrony.css):
       --kx-ink #191b1f / --kx-muted #6f747c / --kx-line #e7e3dc (beez)
       --kx-soft #f8f6f1 (krem) / --kx-champagne #fbf8f0 (szampan)
       --kx-warm #c59b5b (zloto) / --kx-warm-dark #9c7339 (zloto ciemne)
       --kx-graphite #202124 / --kx-shadow 0 14px 34px rgba(22,24,27,.08)

   a) WLASNE ALIASY MAJA PREFIKS --kkc-*. Poprzednia wersja redefiniowala
      --kx-ink / --kx-muted / --kx-line na #TrescKoszyka i CCIENIALA tokeny
      design systemu (przejet na live 29.10). Teraz kazdy alias tylko CZYTA
      token nadrzedny z twardym fallbackiem, wiec blok:
        - nie psuje niczego poza koszykiem,
        - przezywa migracje na sklep, ktory nie ma --kx-* w ogole.
   b) .StrTresc ma TU trzy dodatkowe dzieci, ktorych lafabryka nie miala:
      .InformacjaCzasWysylki, .Gratisy, .KontenerPunkty. Kazde dostalo wlasny
      numer wiersza, bo bez tego grid upchalby je obok szyny podsumowania.
   c) row-gap:0 + margin-bottom na blokach: czesc dzieci jest warunkowa
      (Gratisy/BezplatnaDostawa/OpakowanieOzdobne maja inline display:none).
      Przy row-gap>0 ukryty element zostawialby 10 px dziury w kolumnie.
   d) NIE ma sekcji krokow "1..3" i bloku "zaloz konto" - tamte wstrzykuje JS
      lafabryki (funkcje_dostawa.js); na kinkieciku dokladamy je osobno.
   e) Szablon kinkiecika (cache_podstrony.css) ma .ListaPodsumowaniaSumaCena
      {font-size:140% !important} oraz panelowy blok "RESTORE BLUE ACCENTS"
      html body #TrescKoszyka .przycisk{color/background !important} - dlatego
      ponizej waga ID + !important tam, gdzie trzeba te dwie reguly przebic.

   COFNIECIE: usunac caly blok START..END z kx-css-podstrony.dat
   (kopia sprzed zmian: kx-css-podstrony.dat.backup-before-kx-kompakt-*). */

/* --- 0. TOKENY (tylko w obrebie koszyka, aliasy --kkc-*) --- */
html body #TrescKoszyka {
  --kkc-ink: var(--kx-ink, #191b1f);
  --kkc-muted: var(--kx-muted, #6f747c);
  --kkc-line: var(--kx-line, #e7e3dc);
  --kkc-soft: var(--kx-soft, #f8f6f1);
  --kkc-champagne: var(--kx-champagne, #fbf8f0);
  --kkc-warm: var(--kx-warm, #c59b5b);
  --kkc-warm-dark: var(--kx-warm-dark, #9c7339);
  --kkc-graphite: var(--kx-graphite, #202124);
  --kkc-modul: #fff;
  --kkc-badge: var(--kolor-czerwony, #c60000);
  --kkc-kreska-zloto: rgba(197,155,91,.34);
  --kkc-kreska-zloto-mocna: rgba(197,155,91,.48);
  --kkc-liniowy-zloto: rgba(197,155,91,.14);
  --kkc-grad-pole: linear-gradient(135deg,#fff 0%,var(--kkc-champagne) 100%);
  --kkc-grad-zloto: linear-gradient(90deg,var(--kkc-warm) 0%,var(--kkc-warm-dark) 100%);
  /* CTA bez grafitowego peleta 0-34%: Marcin 29.10 "ten czarny pasek na do
     kasy do podmiany albo calkowicie do wywalenia". Zostal pelny cieply
     przelom, a strzalke kierunkowa daje etykieta ("Do kasy >>" / "Dokoncz
     zakup >>" z kx-koszyk-sciezka.js). Ciemna krawedz tylko w stanie hover. */
  --kkc-cta: linear-gradient(90deg,#e3c08a 0%,var(--kkc-warm) 52%,var(--kkc-warm-dark) 100%);
  --kkc-cta-hover: linear-gradient(90deg,var(--kkc-warm) 0%,var(--kkc-warm-dark) 58%,#8a6330 100%);
  --kkc-radius-karta: 12px;
  --kkc-radius-mini: 8px;
  --kkc-cien-karta: var(--kx-shadow, 0 14px 34px rgba(22,24,27,.08));
  --kkc-cien-blok: 0 8px 22px rgba(22,24,27,.05);
  --kkc-cien-kafel: 0 6px 16px rgba(22,24,27,.045);
  --kkc-cien-cta: 0 12px 24px rgba(156,115,57,.20);
}

/* --- 1. KARTA STRONY: bez duzej ramki, miekki cien, biala powierzchnia --- */
html body #TrescKoszyka .StrTresc {
  border: 0;
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-karta);
  background: var(--kkc-modul);
  padding: 16px;
  margin-bottom: 20px;
  overflow: visible;
  color: var(--kkc-ink);
}

/* --- 2. SZYNA: tabela cala szerokoscia, podsumowanie w prawej kolumnie ---
   :has(> .Koszyk) jest obowiazkowy: brama logowania i formularz ?zakup
   renderuja sie w tym samym #TrescKoszyka > .StrTresc (regresja zmierzona
   na lafabryce 28.10 - formularz 49 pol wszedl w kolumne 1 i zostawil
   420 px martwej bieli). */
html body #TrescKoszyka .StrTresc:has(> .Koszyk) {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(340px,24vw,400px);
  column-gap: 20px;
  row-gap: 0;
  align-items: start;
}

html body #TrescKoszyka .StrTresc > .cl { display: none; }

/*   Mapowanie WZYSTKICH dzieci .StrTresc (koszyk z produktem, odczyt DOM 29.10):
   Koszyk, InformacjaCzasWysylki, PrzyciskiKoszyka, ZapisKoszyka,
   DarmowaWysylkaInformacja, Gratisy*, BezplatnaDostawa*, KontenerDostawaPlatnosc,
   KontenerKoszykPodsumowanie, [cl], #kx-rabat-komparator**, KontenerOpakowanieOzdobne,
   KontenerPunkty, KontenerKoszykPozostale, KontenerKoszykButtonKontynuuj, [cl].
   *  = warunkowy (inline display:none), ** = wstrzykuje JS komparatora 28.10.
   Bez wlasnego wiersza kazde z nich wpadaloby w auto-placement: display:none
   WYLECZACIE w ogole nie zajmuje zadnej komorki, wiec panel komparatora wpadlby
   do pierwszego wolnego pola (wiersz 6-7, kolumna 1) czyli POWYZEJ kafli dostawy. */
/* TABELA: kolumna 1, NIE 1/-1. 1/-1 rozciagnelaby ja nad kolumna podsumowania.
   Dosc slowa ostrzezenia: ta linia byla zjedzona przez parser CSS (brak
   openera komentarza powyzej) i znikala z renderu - stad "tabela z
   przesunieciem" na zrzucie Marcina 29.10. Po naprawie computed gridColumn
   to "1", a nie "auto". */
html body #TrescKoszyka .StrTresc > .Koszyk                        { grid-column: 1;      grid-row: 1; }
html body #TrescKoszyka .StrTresc > .InformacjaCzasWysylki          { grid-column: 1;      grid-row: 2; }
html body #TrescKoszyka .StrTresc > .PrzyciskiKoszyka               { grid-column: 1;      grid-row: 3; }
html body #TrescKoszyka .StrTresc > .ZapisKoszyka                   { grid-column: 1;      grid-row: 4; }
html body #TrescKoszyka .StrTresc > .DarmowaWysylkaInformacja       { grid-column: 1;      grid-row: 5; }
html body #TrescKoszyka .StrTresc > .Gratisy                        { grid-column: 1;      grid-row: 6; }
html body #TrescKoszyka .StrTresc > #BezplatnaDostawa               { grid-column: 1;      grid-row: 7; }
html body #TrescKoszyka .StrTresc > .KontenerDostawaPlatnosc        { grid-column: 1;      grid-row: 8; }
/* Podsumowanie od WIERSZA 1: przy starcie od wiersza 2 w kolumnie 2 zostawalo
   205-353 px martwej bieli na rownoleznik tabeli (mierzone 29.10: wiersz 1 =
   205 px @1920 i 353 px @1266). Span 8 zeby komparator (wiersz 9) zostal
   bezposrednio pod nim.
   UWAGA 29.10 (sekcja 10b): gdy kx-koszyk-sciezka.js zbudowal .KxKolumnaPrawa,
   podsumowanie NIE jest juz dzieckiem .StrTresc i tej reguly nie dostaje -
   wtedy wiersze nadaje wrapper. Powyzsze dwie linie sa FALLBACKiem na wypadek
   wylaczonego JS: bez wrappera komparator i tak wpadnie w wiersz 9. */
html body #TrescKoszyka .StrTresc > .KontenerKoszykPodsumowanie     { grid-column: 2;      grid-row: 1 / span 8; }
html body #TrescKoszyka #kx-rabat-komparator                        { grid-column: 2;      grid-row: 9; }
html body #TrescKoszyka .StrTresc > .KontenerOpakowanieOzdobne      { grid-column: 1 / -1; grid-row: 10; }
html body #TrescKoszyka .StrTresc > .KontenerPunkty                 { grid-column: 1 / -1; grid-row: 11; }
html body #TrescKoszyka .StrTresc > .KontenerKoszykPozostale        { grid-column: 1 / -1; grid-row: 12; }
html body #TrescKoszyka .StrTresc > .KontenerKoszykButtonKontynuuj  { grid-column: 1 / -1; grid-row: 13; }

/* "Waga produktow w koszyku" - szum informacyjny, na lafabryce ukryty
   decyzja Marcina 28.10 (punkt 2 briefu). */
html body #TrescKoszyka .StrTresc > .InformacjaWaga { display: none; }

/* odstepy robione marginem, nie row-gap (patrz punkt c w naglowku) */
html body #TrescKoszyka .StrTresc > .InformacjaCzasWysylki,
html body #TrescKoszyka .StrTresc > .PrzyciskiKoszyka,
html body #TrescKoszyka .StrTresc > .ZapisKoszyka,
html body #TrescKoszyka .StrTresc > .DarmowaWysylkaInformacja,
html body #TrescKoszyka .StrTresc > .Gratisy,
html body #TrescKoszyka .StrTresc > #BezplatnaDostawa,
html body #TrescKoszyka .StrTresc > .KontenerDostawaPlatnosc,
html body #TrescKoszyka #kx-rabat-komparator { margin-bottom: 12px; }

/* "Szacowany czas wysylki zamowienia do 36 dni kalendarzowych." (koszyk.tp:78,
   token {__MAKSYMALNY_CZAS_WYSYLKI}) - Marcin 29.10: "to mocno zmniejszyc druk,
   drobnym drukiem". To informacja uboczna, nie decyzja zakupowa, wiec 11 px i
   kolor pomocniczy. !important na czcionce i kolorze: szablon + panelowy
   <style> w <head> (WYGLAD_DODATKOWY_CSS, ladowany PO tym pliku) trzymaja tu
   domyslne 14 px, a konkurencja jest o te samo ID - bez flagi przegrywamy
   kolejnoscia w arkuszu. */
html body #TrescKoszyka .StrTresc > .InformacjaCzasWysylki {
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35;
  color: var(--kkc-muted) !important;
  margin-bottom: 8px;
  text-align: left;
}

/* --- 3. TABELA: separatory tylko poziome, glowka kremowa, wezsze wiersze --- */
html body #TrescKoszyka .Koszyk {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

html body #TrescKoszyka .Koszyk th,
html body #TrescKoszyka .Koszyk td {
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid var(--kkc-line);
}

html body #TrescKoszyka .Koszyk th {
  padding: 10px 8px;
  border-top: 1px solid var(--kkc-line);
  background: var(--kkc-soft);
  color: var(--kkc-ink);
  font-size: 13px;
  letter-spacing: .02em;
}

html body #TrescKoszyka .Koszyk th:first-child { border-radius: var(--kkc-radius-mini) 0 0 var(--kkc-radius-mini); }
html body #TrescKoszyka .Koszyk th:last-child  { border-radius: 0 var(--kkc-radius-mini) var(--kkc-radius-mini) 0; }
html body #TrescKoszyka .Koszyk td { padding: 8px; }
html body #TrescKoszyka .Koszyk td,
html body #TrescKoszyka .Koszyk a { color: var(--kkc-ink); }

/* --- 4. "USUN" PRZY WIERSZU: ramek + znak zamiast golego krzyzyka.svg ---
   Dziala dopiero po przelaczeniu w panelu KOSZYK_SPOSOB_USUWANIA na
   "pojedyncze usuwanie" (inaczej silnik renderuje checkboxy, nie .UsunKoszyk). */
html body #TrescKoszyka .Koszyk .UsunKoszyk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-image: none;
  background-color: #fff;
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-mini);
  color: var(--kkc-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

html body #TrescKoszyka .Koszyk .UsunKoszyk::after { content: "\00d7"; }

html body #TrescKoszyka .Koszyk .UsunKoszyk:hover,
html body #TrescKoszyka .Koszyk .UsunKoszyk:focus-visible {
  background-color: rgba(198,0,0,.08);
  border-color: var(--kkc-badge);
  color: var(--kkc-badge);
  outline: none;
}

html body #TrescKoszyka .Koszyk .PoleIlosc {
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-mini);
  box-shadow: none;
}

/* --- 5. PASEK AKCJI: przyciski outline, bez szablonowej strzalki.svg --- */
html body #TrescKoszyka .PrzyciskiKoszyka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0 0 12px;
}

html body #TrescKoszyka .PrzyciskiKoszyka .przyciskKoszyk,
html body #TrescKoszyka .PrzyciskiKoszyka .LinkPobraniaKoszykaPDF a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0;
  padding: 0 16px;
  background-image: none;
  background-color: #fff;
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-mini);
  box-shadow: var(--kkc-cien-kafel);
  color: var(--kkc-ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

html body #TrescKoszyka .PrzyciskiKoszyka .przyciskKoszyk:hover,
html body #TrescKoszyka .PrzyciskiKoszyka .LinkPobraniaKoszykaPDF a:hover {
  border-color: var(--kkc-warm);
  background-color: var(--kkc-champagne);
  color: var(--kkc-warm-dark);
}

html body #TrescKoszyka .PrzyciskiKoszyka .przyciskKoszykUsunCaly { color: var(--kkc-badge); }

html body #TrescKoszyka .PrzyciskiKoszyka .przyciskKoszykUsunCaly:hover {
  background-color: rgba(198,0,0,.08);
  border-color: var(--kkc-badge);
  color: var(--kkc-badge);
}

html body #TrescKoszyka .PrzyciskiKoszyka .LinkPobraniaKoszykaPDF { margin: 0; padding: 0; background: none; }

/* wewnetrzny <br> po przyciskach robil druga linie w pasku */
html body #TrescKoszyka .PrzyciskiKoszyka br { display: none; }

/* --- 6. KAFLE DOSTAWA + PLATNOSC: kremowe pole, beezowa obwoluta ---
   UWAGA (regresja 29.10): wczesniejsza wersja dawala tu siatke 2-kolumnowa
   na #rodzaj_wysylki. Przy darmowej dostawie silnik zostawia wiekszosc
   komorek .ListaCena PUSTA (cena zostaje tylko przy doplat typu pobranie),
   wiec siatka wygladala na rozjechana. Zostaje szablonowy uklad
   .ListaRadio 80% / .ListaCena 20% - cena zawsze pod prawa krawedzia. */
html body #TrescKoszyka .KontenerDostawaPlatnosc {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
}

html body #TrescKoszyka .KontenerDostawaPlatnosc > .Odstep { display: none; }

html body #TrescKoszyka .DostawaWybor,
html body #TrescKoszyka .PlatnoscWybor {
  width: auto;
  flex: 1 1 300px;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--kkc-kreska-zloto);
  background: var(--kkc-soft);
  padding: 0 14px 10px;
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
}

html body #TrescKoszyka .DostawaWybor h3,
html body #TrescKoszyka .PlatnoscWybor h3 {
  padding: 10px 0 0;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--kkc-ink);
}

/* zloty podkresl naglowka - sygnatura naglowkow na pm-42 */
html body #TrescKoszyka .DostawaWybor h3::after,
html body #TrescKoszyka .PlatnoscWybor h3::after,
html body #TrescKoszyka .KontenerKoszykPodsumowanie > h3::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 6px;
  background: linear-gradient(90deg,var(--kkc-warm),rgba(197,155,91,0));
}

html body #TrescKoszyka .DostawaListaWyboru,
html body #TrescKoszyka .PlatnoscListaWyboru,
html body #TrescKoszyka .ListaWyboru { margin: 0; padding: 0; }

html body #TrescKoszyka select#kraj_dostawy {
  display: block;
  width: 100%;
  min-height: 34px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-mini);
  font-size: 14px;
}

html body #TrescKoszyka .ListaTbl .ListaRadio,
html body #TrescKoszyka .ListaTbl .ListaCena { padding-top: 5px; padding-bottom: 5px; }

html body #TrescKoszyka .ListaTbl .ListaRadio label {
  margin-bottom: 0;
  line-height: 19px;
  font-size: 14px;
  color: var(--kkc-ink);
}

html body #TrescKoszyka .ListaTbl .ListaCena { font-size: 14px; color: var(--kkc-ink); }

/* --- 7. PASEK "DARMOWA DOSTAWA": szampan + zloty suwak --- */
html body #TrescKoszyka #BezplatnaDostawa {
  border: 1px solid var(--kkc-kreska-zloto);
  background: var(--kkc-grad-pole);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
  padding: 14px 16px;
  margin: 0 0 12px;
  color: var(--kkc-ink);
}

html body #TrescKoszyka #BezplatnaDostawa .WysylkaSuwakTlo {
  max-width: 100%;
  height: 8px;
  background: var(--kkc-line);
  border-radius: 999px;
}

html body #TrescKoszyka #BezplatnaDostawa .WysylkaSuwakWartosc {
  background: var(--kkc-grad-zloto);
  border-radius: 999px;
}

/* --- 8. PODSUMOWANIE W SZYNIE + RABAT JAKO ZLOTY KOMUNIKAT --- */
html body #TrescKoszyka .KontenerKoszykPodsumowanie {
  float: none;
  width: auto;
  margin: 0;
  padding: 10px 14px 12px;
  background: var(--kkc-modul);
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-karta);
}

html body #TrescKoszyka .KontenerKoszykPodsumowanie > br { display: none; }

html body #TrescKoszyka .KontenerKoszykPodsumowanie > h3 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--kkc-ink);
}

html body #TrescKoszyka .KontenerKoszykPodsumowanie .ListaWyboru { padding: 4px 0; }

html body #TrescKoszyka .KontenerKoszykPodsumowanie .ListaPodsumowaniaCena,
html body #TrescKoszyka .KontenerKoszykPodsumowanie .ListaPodsumowaniaSumaCena { color: var(--kkc-ink); }

/* wiersz "Razem do zaplaty": separator u gory zamiast u dolu, zeby czytal sie
   jak podsumowanie, nie jak kolejny wiersz listy */
html body #TrescKoszyka .KontenerKoszykPodsumowanie .ListaTblPodsumowania:has(.ListaPodsumowaniaSumaCena) > div {
  border-bottom: 0;
  border-top: 1px solid var(--kkc-line);
  padding-top: 9px;
  padding-bottom: 2px;
  margin-top: 4px;
}

html body #TrescKoszyka .KontenerKoszykPodsumowanie .ListaTblPodsumowania:has(.ListaPodsumowaniaSumaCena) > div:first-child {
  color: var(--kkc-ink);
  font-weight: 800;
}

/* 140% !important z szablonu -> potrzebny !important i wieksza specyficznosc */
html body #TrescKoszyka .KontenerKoszykPodsumowanie .ListaPodsumowaniaSumaCena {
  color: var(--kkc-warm-dark) !important;
  font-weight: 800;
  font-size: 165% !important;
  line-height: 1.1;
  white-space: nowrap;
}

/* naliczony rabat: zloty komunikat z zlota kreska z lewej (wzor
   #ZnizkiOdIlosciProducent na karcie produktu kinkiecika) */
html body #TrescKoszyka .ListaPodsumowaniaCenaUjemna {
  color: var(--kkc-warm-dark);
  font-weight: 800;
}

html body #TrescKoszyka .ListaPodsumowaniaCenaUjemna::before {
  content: "\2212\00a0";
  font-weight: 800;
}

html body #TrescKoszyka .ListaTblPodsumowania:has(.ListaPodsumowaniaCenaUjemna) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 8px -4px 2px;
  padding: 7px 10px 7px 12px;
  background: var(--kkc-grad-pole);
  border: 1px solid var(--kkc-kreska-zloto-mocna);
  border-left: 5px solid var(--kkc-warm);
  border-radius: var(--kkc-radius-mini);
  color: var(--kkc-warm-dark);
  font-weight: 700;
}

html body #TrescKoszyka .ListaTblPodsumowania:has(.ListaPodsumowaniaCenaUjemna) > div:first-child {
  color: var(--kkc-warm-dark);
  font-weight: 700;
}

html body #TrescKoszyka .ListaTblPodsumowania:has(.ListaPodsumowaniaCenaUjemna) .ListaPodsumowaniaCenaUjemna {
  align-self: stretch;
  text-align: right;
  font-size: 17px;
}

/* drabinka "Dodaj produkty z minimum X zl i uzyskaj rabat Y%" - kremowy kafel
   ze zlota kreska, pogrubienia w zlocie ciemnym */
html body #TrescKoszyka .KontenerKoszykPodsumowanie .Informacja {
  background-image: none;
  padding: 10px 12px 10px 14px;
  margin-top: 10px;
  background-color: var(--kkc-soft);
  border: 1px solid var(--kkc-kreska-zloto);
  border-left: 4px solid var(--kkc-warm);
  border-radius: var(--kkc-radius-mini);
  box-shadow: var(--kkc-cien-kafel);
  color: var(--kkc-ink);
  font-size: 13px;
  line-height: 1.3;
}

html body #TrescKoszyka .KontenerKoszykPodsumowanie .Informacja b {
  color: var(--kkc-warm-dark);
  font-weight: 800;
}

/* --- 9. KUPON + CTA --- */
html body #TrescKoszyka .KontenerKoszykPozostale {
  border: 0;
  background: none;
  gap: 12px;
  align-items: stretch;
  padding: 0;
  margin-bottom: 12px;
}

html body #TrescKoszyka .KontenerKupon {
  width: 50%;
  margin-top: 0;
  background: var(--kkc-soft);
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
  padding: 12px 14px;
}

html body #TrescKoszyka .KontenerKupon h5 { margin: 0 0 3px; font-size: 14px; color: var(--kkc-ink); }
html body #TrescKoszyka .KontenerKupon p  { margin: 0 0 6px; font-size: 12px; color: var(--kkc-muted); line-height: 1.25; }

html body #TrescKoszyka .KontenerKupon input#KuponKod {
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-mini);
  padding: 0 10px;
  min-height: 34px;
  background: #fff;
}

html body #TrescKoszyka .KontenerKupon input#submitButton {
  border-radius: var(--kkc-radius-mini);
  min-height: 34px;
}

html body #TrescKoszyka .KontenerKoszykButton {
  width: 50%;
  display: flex;
  align-items: center;
  margin: 0;
}

/* szablon owija CTA w span#przycisk_zamow - bez display:block width:100%
   liczylby sie od sciagnietego spana, nie od kontenera */
html body #TrescKoszyka .KontenerKoszykButton #przycisk_zamow {
  display: block;
  width: 100%;
}

/* CTA = sygnatura przyciskow kinkiecika: pelny cieply lom, bez grafitu.
   !important potrzebny na calym tle, bo panelowy "RESTORE BLUE ACCENTS"
   daje html body #TrescKoszyka .przycisk{background ... !important}.
   box-sizing:border-box + max-width:100%: szablonowe .przycisk ma
   content-box, wiec "width:100% + padding:0 20px" dokladalo 40 px ponad
   kontener. Mierzone 29.10: CTA o 20 px szersze od kontenera i 30 px za
   jego brzeg przy 1920/1568/1521, a 40 px przy 390 ("wystaje z kontenera,
   w mobilnej wersji tez").
   Tekst ink zamiast bieli: na zlotym tle biel contrast ~1.9, ink ~8.4. */
html body #TrescKoszyka .KontenerKoszykButton a.przycisk {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 20px;
  font-size: 18px;
  border-radius: 999px;
  background-image: var(--kkc-cta) !important;
  background-color: var(--kkc-warm) !important;
  color: var(--kkc-ink) !important;
  box-shadow: var(--kkc-cien-cta);
  transition: background-image .2s ease-in-out;
}

html body #TrescKoszyka .KontenerKoszykButton a.przycisk:hover {
  background-image: var(--kkc-cta-hover) !important;
}

/* "Kontynuuj zakupy" to NIE jest glowny CTA: wyglad drugorzedny.
   Pusty href (brak referera) = przycisk martwy, wiec dodatkowo
   pointer-events:none + opacity, zeby nie udawal klikalnego. */
html body #TrescKoszyka .KontenerKoszykButtonKontynuuj { margin: 0; }

html body #TrescKoszyka .KontenerKoszykButtonKontynuuj a.przycisk {
  float: none;
  min-height: 32px;
  padding: 0 18px;
  background-image: none !important;
  background-color: #fff !important;
  border: 1px solid var(--kkc-line) !important;
  border-radius: var(--kkc-radius-mini) !important;
  box-shadow: var(--kkc-cien-kafel);
  color: var(--kkc-ink) !important;
  font-weight: 400 !important;
  line-height: 32px;
}

html body #TrescKoszyka .KontenerKoszykButtonKontynuuj a.przycisk:hover {
  border-color: var(--kkc-warm) !important;
  background-color: var(--kkc-champagne) !important;
  color: var(--kkc-warm-dark) !important;
}

html body #TrescKoszyka .KontenerKoszykButtonKontynuuj a[href=""] {
  pointer-events: none !important;
  opacity: .45 !important;
  cursor: default !important;
}

/* --- 10. NIEBIESKIE RESZTKI SZABLONU -> CIEPLA PALETA ---
   Wykryte na zzywo 29.10 skanem computed-style w #TrescKoszyka: 11 elementow
   dziedziczy color/background z --kolor-szablonu (#0483d3):
   span.Cena + span.CenaAktualna (ceny w wierszach), h5 ("Zapakuj w opakowanie
   ozdobne", "Oblicz rate"), input.przycisk / button.przycisk /
   input#submitButton.przycisk (Aktywuj kupon, dodaj opakowanie).
   Szablon daje html body #TrescKoszyka .Cena{color ... !important}, a panel
   html body #TrescKoszyka .przycisk{background ... !important} - stad ID +
   dodatkowy element/klasa + !important. Gowny CTA to a.przycisk, wiec
   selektory input./button. go nie dotykaja. */
html body #TrescKoszyka .Koszyk .Cena,
html body #TrescKoszyka .Koszyk .CenaAktualna {
  color: var(--kkc-ink) !important;
}

html body #TrescKoszyka h5 {
  color: var(--kkc-ink) !important;
  font-weight: 700;
}

html body #TrescKoszyka input.przycisk,
html body #TrescKoszyka button.przycisk {
  background-image: var(--kkc-grad-zloto) !important;
  background-color: var(--kkc-warm) !important;
  color: #fff !important;
  border-radius: var(--kkc-radius-mini);
  box-shadow: var(--kkc-cien-kafel);
}

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

/* --- 10b. PRAWA KOLUMNA: podsumowanie + komparator w jednym koszyku ---
   Wrapper tworzy kx-koszyk-sciezka.js (zlozPrawaKolumne). Bez niego
   komparator jest bezposrednim dzieckiem gridu i siada pod cala lewa
   kolumna - "kompaktor jest na dole" (Marcin 29.10). flex + gap robi
   styk bez marginow; min-width:0 zeby dluga linia przeliczenia nie
   rozpychala kolumny. */
html body #TrescKoszyka .StrTresc > .KxKolumnaPrawa {
  grid-column: 2;
  grid-row: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

html body #TrescKoszyka .KxKolumnaPrawa > #kx-rabat-komparator { margin: 0; }

/* --- 10c. SZARY PASEK "Wartosc:" -> krem + zlota kreska ---
   td.SumaTekst (colspan 5) + td.Suma, koszyk.tp:70. Zmierzone 29.10:
   tlo rgb(243,243,243), brak jakiejkolwiek krawedzi - wygladalo jak
   bledny fragment tabeli. Marcin: "szary pasek z Wartosc tez na nasz
   kolor". */
html body #TrescKoszyka .Koszyk td.SumaTekst,
html body #TrescKoszyka .Koszyk td.Suma {
  background: var(--kkc-champagne) !important;
  border-top: 1px solid var(--kkc-kreska-zloto-mocna);
  border-bottom: 0;
  color: var(--kkc-ink) !important;
  font-size: 15px;
  padding-top: 9px;
  padding-bottom: 9px;
}

html body #TrescKoszyka .Koszyk td.SumaTekst { font-weight: 400; color: var(--kkc-muted) !important; }

html body #TrescKoszyka .Koszyk td.Suma {
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  color: var(--kkc-warm-dark) !important;
}

/* --- 10d. NIEBIESKIE RADIO/CHECK -> zloty akcent ---
   Zmierzone 29.10: "niebieskie pole" przy PAYNOW i Kurierze to NATYWNE
   input[type=radio] z accent-color:auto (Chrome/Edge/Firefox rysuja kolor
   systemowy), nie style szablonu. accent-color przejal tez checkbox
   "usun[]" i "Akceptuje regulamin". */
html body #TrescKoszyka input[type=radio],
html body #TrescKoszyka input[type=checkbox] {
  accent-color: var(--kkc-warm-dark);
}

html body #TrescKoszyka .ListaRadio label:has(input[type=radio]:checked) {
  color: var(--kkc-warm-dark);
  font-weight: 700;
}

/* --- 10e. KOMPATOR: niebieski -> paleta kinkiecik, BEZ zapisu w jego JS ---
   kx-rabat-komparator.js (sesja "Szablon projektu Lafabryka") trzyma
   chrome w inline cssText: border-left i przycisk = var(--kolor-szablonu,
   #2b6cb0), panel = #fbfbfb / #d9d9d9 / #222. Nadpisanie ZMIENNEJ lokalnie
   w obrebie panelu przefarbuje oba var() bez dotykania ich pliku;
   tlo/ramke/sciany pokonujemy !important (autorski !important w CSS
   wygrywa z inline style bez !important). */
html body #TrescKoszyka #kx-rabat-komparator {
  --kolor-szablonu: var(--kkc-warm-dark);
  background: var(--kkc-grad-pole) !important;
  border: 1px solid var(--kkc-kreska-zloto) !important;
  border-left: 4px solid var(--kkc-warm) !important;
  border-radius: var(--kkc-radius-karta) !important;
  box-shadow: var(--kkc-cien-blok);
  color: var(--kkc-ink) !important;
}

html body #TrescKoszyka #kx-rabat-komparator button {
  border-radius: var(--kkc-radius-mini) !important;
  box-shadow: var(--kkc-cien-kafel);
  font-weight: 700;
}

html body #TrescKoszyka #kx-rabat-komparator button:hover { filter: brightness(.97); }

/* BIOLI nie ruszamy reguqa "ostatni div": panel ma po tablicy jeszcze
   przyciski, wiec last-child to button, nie tabela (kod ich JS, linia
   193-210). Zostawiamy jej wlasne #ffffff - czytelne na kremowym tle. */