/* === KINKIECIK KX-WASKI-EKRAN 2026-10-29 START ===
   Wyniesione z kx-css-podstrony.dat (rozdzielenie na osobne pliki jak na lafabryka).
   Zakres: WASKI EKRAN - sekcja 12: media query dla koszyka, etapu 2 i 3. LADOWANY OSTATNI, zeby nadpisal desktop.
=== KINKIECIK KX-WASKI-EKRAN END === */

/* --- 12. WASKI EKRAN: jedna kolumna, szablonowa kolejnosc --- */
@media (max-width: 1120px) {
  html body #TrescKoszyka .StrTresc:has(> .Koszyk) {
    grid-template-columns: minmax(0,1fr);
    row-gap: 0;
  }
  html body #TrescKoszyka .StrTresc > .Koszyk,
  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 .StrTresc > .KontenerKoszykPodsumowanie,
  html body #TrescKoszyka .StrTresc > .KxKolumnaPrawa,
  html body #TrescKoszyka #kx-rabat-komparator,
  html body #TrescKoszyka .StrTresc > .KontenerOpakowanieOzdobne,
  html body #TrescKoszyka .StrTresc > .KontenerPunkty,
  html body #TrescKoszyka .StrTresc > .KontenerKoszykPozostale,
  html body #TrescKoszyka .StrTresc > .KontenerKoszykButtonKontynuuj {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  html body #TrescKoszyka .StrTresc > .KontenerKoszykPodsumowanie,
  html body #TrescKoszyka .KxKolumnaPrawa > .KontenerKoszykPodsumowanie { margin-bottom: 12px; }
  html body #TrescKoszyka .StrTresc > .KxKolumnaPrawa { margin-bottom: 12px; }
  html body #TrescKoszyka .KontenerKoszykPozostale { flex-wrap: wrap; }
  html body #TrescKoszyka .KontenerKupon,
  html body #TrescKoszyka .KontenerKoszykButton { width: 100%; }
}

@media (max-width: 560px) {
  html body #TrescKoszyka .StrTresc { padding: 10px; }
  html body #TrescKoszyka .Koszyk th,
  html body #TrescKoszyka .Koszyk td { padding: 6px 4px; }
  html body #TrescKoszyka .KontenerKoszykButton a.przycisk { min-height: 48px; font-size: 17px; }
  /* ladrowek: 3 kroki + 2 strzalki w jednej linii to na 390 px za wiele,
     flex-wrap i tak rozbija na dwie linie, wiec scinamy tylko typografie */
  html body #TrescKoszyka .KxKroki { padding: 8px 10px; gap: 4px 6px; }
  html body #TrescKoszyka .KxKrok { font-size: 12px; }
  html body #TrescKoszyka .KxKrok::before { width: 19px; height: 19px; margin-right: 5px; font-size: 11px; }
  html body #TrescKoszyka .KxKrok:not(:last-child)::after { margin-left: 6px; font-size: 13px; }

  /* etap 2 na watkim telefonie: dwie kolumny i dwa boxy dostawa/platnosc
     i tak nie ida obok siebie (759 + 759 px), wiec skladamy w jedna linie */
  html body #TrescKoszyka .PodzialZakupRejestracja,
  html body #TrescKoszyka .InformacjeWysylkaPlatnosc { display: block; }
  html body #TrescKoszyka .PodzialZakupRejestracja > .Ramka + .Ramka { margin-top: 12px; }
  html body #TrescKoszyka .InformacjeWysylka + .InformacjePlatnosc { margin-top: 12px; }
  html body #TrescKoszyka #submitButtonCheckout,
  html body #TrescKoszyka .cmxform input.przyciskZamow { min-height: 52px; font-size: 17px; }
}
/* === KINKIECIK KOSZYK KOMPAKT 2026-10-29 END === */