/* ==========================================================================
   cascadia4x4.pl — arkusz stylów

   Paleta: węgiel (nadwozie), słońce (ogniwo), chłodny popiół (tło).
   Żółty #FFDE3E świeci tylko na węglu. Nigdy nie występuje jako kolor tekstu
   na jasnym tle — kontrast żółtego na białym to około 1,4:1, czyli tekst
   niewidoczny. Na jasnym tle żółty jest tłem, a litery na nim są węglowe.

   Kroje pisma leżą na tym serwerze. Bez Google Fonts: to byłoby zapytanie do
   obcego serwera przy każdej wizycie (RODO) i jeden dodatkowy punkt awarii.
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-500-normal-latin-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-500-normal-latin.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-400-normal-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-400-normal-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --wegiel:      #14161A;
  --wegiel-2:    #1E2228;
  --wegiel-3:    #2C323A;
  --slonce:      #FFDE3E;
  --slonce-ciem: #755D00;   /* żółty jako TEKST na jasnym tle: 5,7:1 na popiele */
  --slonce-jasny:#FFE870;
  --popiol:      #F2F3F5;
  --popiol-2:    #E4E6EA;
  --bialy:       #FFFFFF;
  --tekst:       #14161A;
  --tekst-2:     #4A5058;
  --tekst-jasny: #E9EBEE;
  --tekst-jasny2:#B4BAC3;
  --obwod:       #D3D7DD;
  --obwod-pole:  #767C85;   /* ramka pola formularza — musi mieć 3:1 do tła */
  --obwod-ciemn: #3A414A;
  --naglowkowy:  "Space Grotesk", "Segoe UI", Roboto, system-ui, sans-serif;
  --tekstowy:    "IBM Plex Sans", "Segoe UI", Roboto, system-ui, sans-serif;
  --wrap:        1180px;
  --r:           4px;
  --cien:        0 1px 2px rgba(20,22,26,.07), 0 6px 20px rgba(20,22,26,.06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--popiol);
  color: var(--tekst);
  font-family: var(--tekstowy);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--naglowkowy);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.4rem); }
h3 { font-size: 1.16rem; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--tekst); text-decoration-color: var(--slonce-ciem); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--tekst); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  /* Dwukolorowa obwódka: żółta świeci na węglu, ciemny pierścień wokół niej
     daje kontrast na jasnym tle. Jeden kolor nie działa na obu naraz. */
  outline: 3px solid var(--slonce);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(20, 22, 26, .85);
  border-radius: 2px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* --- pominięcie nawigacji ------------------------------------------------ */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--slonce); color: var(--wegiel);
  padding: 10px 18px; border-radius: var(--r);
  font-family: var(--naglowkowy); text-decoration: none;
  transition: top .15s;
}
.skip:focus { top: 8px; }

/* --- belka kontaktowa ---------------------------------------------------- */
.belka {
  background: var(--wegiel);
  color: var(--tekst-jasny2);
  font-size: .82rem;
  border-bottom: 1px solid var(--obwod-ciemn);
}
.belka .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.belka a { color: var(--tekst-jasny); }
.belka strong { color: var(--bialy); font-weight: 400; }

/* --- nagłówek ------------------------------------------------------------ */
.naglowek { background: var(--wegiel); position: sticky; top: 0; z-index: 50; }
.nawi {
  display: flex; align-items: center; gap: 22px;
  padding-top: 14px; padding-bottom: 14px;
}
.marka { flex: 0 0 auto; line-height: 0; }
.marka img { height: 52px; width: auto; }

.nawi-linki { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.nawi-linki a {
  color: var(--tekst-jasny); text-decoration: none;
  font-family: var(--naglowkowy); font-size: .93rem;
  padding: 6px 0; border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nawi-linki a:hover { border-bottom-color: var(--wegiel-3); }
.nawi-linki a[aria-current="page"] { border-bottom-color: var(--slonce); color: var(--bialy); }

.jezyki { display: flex; gap: 2px; }
.jezyki a {
  color: var(--tekst-jasny2); text-decoration: none;
  font-family: var(--naglowkowy); font-size: .78rem; letter-spacing: .05em;
  padding: 5px 8px; border-radius: var(--r);
}
.jezyki a:hover { background: var(--wegiel-2); color: var(--bialy); }
.jezyki a.jest { background: var(--wegiel-3); color: var(--bialy); }

.hamburger {
  display: none;
  background: transparent; border: 1px solid var(--obwod-ciemn); color: var(--tekst-jasny);
  font-family: var(--naglowkowy); font-size: .9rem;
  padding: 9px 14px; border-radius: var(--r); cursor: pointer;
  margin-left: auto;
}
.hamburger:hover { background: var(--wegiel-2); }

/* --- przyciski ----------------------------------------------------------- */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--naglowkowy); font-size: .97rem; line-height: 1.2;
  padding: 14px 26px; border-radius: var(--r);
  border: 2px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-slonce { background: var(--slonce); color: var(--wegiel); border-color: var(--slonce); }
.btn-slonce:hover { background: var(--slonce-jasny); border-color: var(--slonce-jasny); }
.btn-obrys { background: transparent; color: var(--tekst); border-color: var(--tekst); }
.btn-obrys:hover { background: var(--tekst); color: var(--bialy); }
.btn-obrys-jasny { background: transparent; color: var(--bialy); border-color: rgba(255,255,255,.55); }
.btn-obrys-jasny:hover { background: var(--bialy); color: var(--wegiel); border-color: var(--bialy); }
.btn-maly { padding: 9px 16px; font-size: .88rem; }
.btn-sklep { flex: 0 0 auto; }
.rzad-btn { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* --- nagłówek strony wewnętrznej ---------------------------------------- */
.okruchy { background: var(--wegiel-2); color: var(--tekst-jasny2); font-size: .84rem; }
.okruchy .wrap { padding-top: 10px; padding-bottom: 10px; }
.okruchy a { color: var(--tekst-jasny); }
.okruchy .sep { padding: 0 8px; color: #8D949E; }
.okruchy [aria-current="page"] { color: var(--tekst-jasny2); }

.page-head { background: var(--wegiel); color: var(--tekst-jasny); }
.page-head .wrap { padding-top: 64px; padding-bottom: 64px; max-width: 900px; }
.page-head h1 { color: var(--bialy); }
.page-head .lead { color: var(--tekst-jasny2); }

.brew {
  display: inline-block;
  font-family: var(--naglowkowy); font-size: .76rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--slonce-ciem);
  margin-bottom: 12px;
}
.page-head .brew, .hero .brew { color: var(--slonce); }

.lead { font-size: 1.1rem; color: var(--tekst-2); max-width: 62ch; }
.page-head .lead, .hero .lead { max-width: 58ch; }

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--wegiel) url("/assets/hero-m.jpg") center/cover no-repeat;
  color: var(--tekst-jasny);
}
@media (min-width: 821px) {
  .hero { background-image: url("/assets/hero.jpg"); }
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12,13,16,.95) 0%, rgba(12,13,16,.88) 42%, rgba(12,13,16,.42) 100%);
}
.hero .wrap { position: relative; padding-top: 92px; padding-bottom: 92px; }
.hero-tresc { max-width: 640px; }
.hero h1 { color: var(--bialy); margin-bottom: .35em; }
.hero h1 em { font-style: normal; color: var(--slonce); display: block; }
.hero .lead { color: #D7DBE1; font-size: 1.16rem; }
.hero-plakietka {
  display: inline-block;
  background: var(--slonce); color: var(--wegiel);
  font-family: var(--naglowkowy); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px; margin-bottom: 22px;
}

/* --- liczby i pasek zaufania -------------------------------------------- */
.liczby { background: var(--wegiel-2); color: var(--tekst-jasny); }
.liczby .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding-top: 30px; padding-bottom: 30px;
}
.liczby div { text-align: center; }
.liczby b {
  display: block; font-family: var(--naglowkowy); font-weight: 500;
  font-size: 2.1rem; color: var(--slonce); line-height: 1.1;
}
.liczby span { display: block; font-size: .84rem; color: var(--tekst-jasny2); margin-top: 4px; }

.zaufanie { background: var(--slonce); color: var(--wegiel); }
.zaufanie ul {
  list-style: none; margin: 0; padding: 13px 0;
  display: flex; flex-wrap: wrap; gap: 8px 34px; justify-content: center;
  font-family: var(--naglowkowy); font-size: .88rem;
}
.zaufanie li { display: flex; align-items: center; gap: 9px; }
.zaufanie li::before {
  /* Kwadracik rysowany CSS-em, nie znakiem Unicode: znak spoza kroju
     wypada jako pusta ramka i wygląda jak błąd. */
  content: ""; width: 8px; height: 8px; flex: 0 0 8px;
  background: var(--wegiel); transform: rotate(45deg); opacity: .55;
}

/* --- sekcje -------------------------------------------------------------- */
.sek, .sek-karta, .sek-wybor, .sek-akcent { padding: 74px 0; }
.sek { background: var(--popiol); }
.sek-karta { background: var(--bialy); }
.sek-wybor { background: var(--popiol-2); }
.sek-akcent { background: var(--wegiel); color: var(--tekst-jasny); padding: 62px 0; }

.glowa { max-width: 66ch; margin-bottom: 38px; }
.glowa h2 { margin-bottom: .35em; }

/* --- siatki kart --------------------------------------------------------- */
.siatka { display: grid; gap: 20px; }
.siatka-2 { grid-template-columns: repeat(2, 1fr); }
.siatka-3 { grid-template-columns: repeat(3, 1fr); }

.karta {
  background: var(--bialy);
  border: 1px solid var(--obwod);
  border-radius: var(--r);
  padding: 26px;
  display: flex; flex-direction: column;
}
.sek-karta .karta { background: var(--popiol); border-color: var(--popiol-2); }
.karta h3 { margin-bottom: .45em; }
.karta p { color: var(--tekst-2); font-size: .97rem; }
.karta-nazwa { color: var(--tekst) !important; font-weight: 600; margin-bottom: .4em; }

a.karta-link { text-decoration: none; transition: border-color .15s, transform .15s; }
a.karta-link:hover { border-color: var(--tekst); transform: translateY(-2px); }
.wiecej {
  margin-top: auto; padding-top: 14px;
  font-family: var(--naglowkowy); font-size: .88rem;
  color: var(--tekst); border-bottom: 2px solid var(--slonce); align-self: flex-start;
}

/* --- uwaga (rzeczy, których nie wolno przeoczyć) ------------------------- */
.uwaga {
  margin-top: 26px;
  border-left: 4px solid var(--slonce);
  background: var(--bialy);
  padding: 18px 22px;
  font-size: .95rem;
  color: var(--tekst-2);
  border-radius: 0 var(--r) var(--r) 0;
}
.sek-karta .uwaga { background: var(--popiol); }
.uwaga p + p { margin-top: .7em; }
.uwaga strong { color: var(--tekst); }

/* --- ilustracja ---------------------------------------------------------- */
.ilustracja { margin: 0 0 34px; }
.ilustracja img { width: 100%; border-radius: var(--r); }
.ilustracja figcaption { font-size: .82rem; color: var(--tekst-2); margin-top: 8px; }

/* --- kafle marek --------------------------------------------------------- */
.kafle-marek {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.kafel-marka {
  background: var(--bialy); border: 1px solid var(--obwod); border-radius: var(--r);
  padding: 22px 20px; text-decoration: none;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s, transform .15s;
}
.kafel-marka:hover { border-color: var(--tekst); transform: translateY(-2px); }
.kafel-nazwa { font-family: var(--naglowkowy); font-size: 1.12rem; }
.kafel-ile { font-size: .85rem; color: var(--tekst-2); }

/* --- panele -------------------------------------------------------------- */
.panele { display: grid; gap: 18px; }
.panel {
  background: var(--bialy); border: 1px solid var(--obwod); border-radius: var(--r);
  display: grid; grid-template-columns: 190px 1fr; gap: 24px;
  padding: 22px;
}
.sek-karta .panel { background: var(--popiol); border-color: var(--popiol-2); }
.karta-foto {
  /* Zdjęcia produktów pobierane są ze sklepu. Tło popiołowe zamiast białego:
     gdy zdjęcie się nie wczyta, kafel wygląda na pusty, a nie na uszkodzony. */
  display: block; background: var(--popiol); border-radius: var(--r);
  border: 1px solid var(--popiol-2); overflow: hidden;
  min-height: 60px;
}
.karta-foto img { width: 100%; height: auto; }
.panel-tresc { display: flex; flex-direction: column; }
.panel-gora { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.panel-gora h3 { margin: 0; font-size: 1.35rem; }
.moc {
  font-family: var(--naglowkowy); font-size: .9rem;
  background: var(--slonce); color: var(--wegiel);
  padding: 3px 10px; border-radius: 999px;
}
.moc-brak { background: var(--popiol-2); color: var(--tekst-2); font-size: .82rem; }
.znak-1 {
  font-family: var(--naglowkowy); font-size: .78rem;
  border: 1px solid var(--obwod); color: var(--tekst-2);
  padding: 2px 9px; border-radius: 999px;
}
.plakietka {
  font-family: var(--naglowkowy); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; vertical-align: middle;
  background: var(--slonce); color: var(--wegiel);
  padding: 3px 9px; border-radius: 999px; margin-left: 6px;
}
.pasuje { list-style: none; margin: 0 0 16px; padding: 0; columns: 2; column-gap: 26px; }
.pasuje li { font-size: .93rem; color: var(--tekst-2); padding: 3px 0; break-inside: avoid; }
.pasuje .lata { color: #636970; white-space: nowrap; }
.pasuje em { font-style: normal; color: var(--slonce-ciem); }
.panel-dol {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.cena { font-family: var(--naglowkowy); font-size: 1.3rem; white-space: nowrap; }

/* --- tabele -------------------------------------------------------------- */
.tabela-otoczka { overflow-x: auto; border: 1px solid var(--obwod); border-radius: var(--r); background: var(--bialy); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
caption {
  text-align: left; padding: 14px 16px; font-family: var(--naglowkowy);
  background: var(--popiol); border-bottom: 1px solid var(--obwod);
}
th, td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--popiol-2); }
thead th {
  background: var(--wegiel); color: var(--tekst-jasny);
  font-family: var(--naglowkowy); font-weight: 500;
  position: sticky; top: 0; white-space: nowrap;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover td { background: var(--popiol); }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pojazdy td:first-child { white-space: nowrap; }
.warunek { font-style: normal; color: var(--slonce-ciem); font-size: .86rem; display: block; }
.spec th[scope="row"] { font-weight: 400; color: var(--tekst-2); }
.spec-siatka { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* --- szukajka ------------------------------------------------------------ */
.szukajka { margin-bottom: 24px; max-width: 560px; }
.szukajka label {
  display: block; font-family: var(--naglowkowy); font-size: .9rem; margin-bottom: 8px;
}
.szukajka input {
  width: 100%; font-family: var(--tekstowy); font-size: 1.05rem;
  padding: 14px 16px; border: 2px solid var(--obwod-pole); border-radius: var(--r);
  background: var(--bialy); color: var(--tekst);
}
.szukajka input:focus { border-color: var(--tekst); }
.szukajka-wynik { margin: 10px 0 0; font-size: .9rem; color: var(--tekst-2); min-height: 1.4em; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-lista { border-top: 1px solid var(--obwod); }
.faq { border-bottom: 1px solid var(--obwod); }
.faq summary {
  cursor: pointer; padding: 18px 40px 18px 0; position: relative;
  font-family: var(--naglowkowy); font-size: 1.06rem; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; line-height: 1; color: var(--slonce-ciem);
}
.faq[open] summary::after { content: "−"; }
.faq summary:hover { color: var(--tekst-2); }
.faq > div { padding: 0 40px 22px 0; color: var(--tekst-2); font-size: .98rem; max-width: 76ch; }

/* --- wezwanie ------------------------------------------------------------ */
.wezwanie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.wezwanie h2 { color: var(--bialy); margin-bottom: .3em; }
.wezwanie p { color: var(--tekst-jasny2); max-width: 58ch; }

/* --- stopka -------------------------------------------------------------- */
.stopka { background: var(--wegiel); color: var(--tekst-jasny2); font-size: .93rem; }
.stopka .wrap { padding-top: 54px; padding-bottom: 30px; }
.stopka-siatka { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 34px; }
.stopka-logo { height: 42px; width: auto; margin-bottom: 16px; }
.stopka h2 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tekst-jasny); margin-bottom: 14px;
}
.stopka ul { list-style: none; margin: 0; padding: 0; }
.stopka li { padding: 4px 0; }
.stopka a { color: var(--tekst-jasny2); text-decoration: none; }
.stopka a:hover { color: var(--bialy); text-decoration: underline; }
.drobne { font-size: .82rem; color: #8D949E; margin-top: 14px; }
.stopka-dol {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--obwod-ciemn);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: .8rem; color: #8D949E;
}

/* ==========================================================================
   MNIEJSZE EKRANY
   ========================================================================== */
@media (max-width: 1080px) {
  .stopka-siatka { grid-template-columns: 1fr 1fr; }
  .panel { grid-template-columns: 150px 1fr; }
}

@media (max-width: 980px) {
  /* Domyślnie — czyli TAKŻE z wyłączonym JavaScriptem — menu jest widoczne,
     a przycisk ukryty. Przycisk, który nic nie robi, jest gorszy niż jego brak.
     Klasę „js” dopisuje skrypt; dopiero wtedy menu się zwija. */
  .naglowek .nawi { position: relative; flex-wrap: wrap; }
  .nawi-linki { margin-left: 0; width: 100%; gap: 16px; }
  .hamburger { display: none; }

  .js .nawi-linki {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    width: auto;
    background: var(--wegiel-2); border-top: 1px solid var(--obwod-ciemn);
    flex-direction: column; gap: 0; padding: 8px 24px 16px;
  }
  .js .nawi-linki.otwarte { display: flex; }
  .js .nawi-linki a { padding: 12px 0; border-bottom: 1px solid var(--obwod-ciemn); }
  .js .nawi-linki a:last-child { border-bottom: 0; }
  .js .hamburger { display: inline-block; }

  .siatka-3 { grid-template-columns: repeat(2, 1fr); }
  .kafle-marek { grid-template-columns: repeat(3, 1fr); }
  .spec-siatka { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .sek, .sek-karta, .sek-wybor { padding: 54px 0; }
  .sek-akcent { padding: 48px 0; }
  .hero .wrap { padding-top: 64px; padding-bottom: 64px; }
  .page-head .wrap { padding-top: 46px; padding-bottom: 46px; }
  .liczby .wrap { grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }
  .liczby b { font-size: 1.8rem; }
  .btn-sklep { display: none; }        /* dublowałby przycisk ze stopki */
  .belka .wrap { justify-content: center; text-align: center; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 18px; }
  .siatka-2, .siatka-3 { grid-template-columns: 1fr; }
  .kafle-marek { grid-template-columns: repeat(2, 1fr); }
  .panel { grid-template-columns: 1fr; gap: 16px; }
  .karta-foto { max-width: 190px; }
  .pasuje { columns: 1; }
  .stopka-siatka { grid-template-columns: 1fr; gap: 28px; }
  .wezwanie { gap: 22px; }
  .rzad-btn .btn { flex: 1 1 100%; text-align: center; }
  .panel-dol .btn { flex: 0 0 auto; }
  .marka img { height: 38px; }
  .zaufanie ul { gap: 6px 20px; font-size: .82rem; }
  /* Trzy litery obok siebie to trzy osobne cele. Poniżej 44 px palec trafia
     w sąsiada — dlatego na wąskim ekranie rosną, a nie tylko się rozsuwają. */
  .jezyki { gap: 6px; }
  .jezyki a {
    min-width: 44px; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    font-size: .84rem;
  }
}

@media (max-width: 400px) {
  .kafle-marek { grid-template-columns: 1fr; }
  .btn { padding: 13px 20px; }
  .hero h1 { letter-spacing: -.03em; }
}

@media print {
  .belka, .naglowek, .stopka, .rzad-btn, .sek-akcent, .skip { display: none; }
  body { background: #fff; font-size: 11pt; }
  .sek, .sek-karta, .sek-wybor { padding: 12pt 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}