/* ==========================================================================
   Kupisz.se - warstwa wizualna
   Bootstrap zostaje pod spodem jako siatka i mechanika (offcanvas, dropdown).
   Wyglad jest w calosci nasz: przemyslowy, wysoki kontrast, hairline zamiast cieni.
   ========================================================================== */

/* --------------------------------------------------------------- fonty
   Lokalne, zeby nie wysylac IP klienta do cudzego CDN (RODO) i zeby
   sklep nie mrugal przy wolnym laczu. latin-ext jest obowiazkowy,
   bez niego rozjezdzaja sie polskie znaki. */

@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-400-normal.woff2') format('woff2');
  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: 'Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-600-normal.woff2') format('woff2');
  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: 'Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-ext-700-normal.woff2') format('woff2');
  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: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  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: 'Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-ext-600-normal.woff2') format('woff2');
  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;
}

/* --------------------------------------------------------------- paleta */

:root {
  /* grafit i stal - cala skala szarosci ma lekki chlodny odcien,
     zeby bialy towar na zdjeciach nie wygladal na brudny */
  --grafit-900: #14171a;
  --grafit-800: #1d2125;
  --grafit-700: #2b3136;
  --grafit-600: #3d454b;
  --stal-500:   #667079;
  --stal-400:   #8a939b;
  --stal-300:   #b9c0c6;
  --stal-200:   #dde1e4;
  --stal-100:   #eef0f2;
  --stal-050:   #f6f7f8;
  --bialy:      #ffffff;

  /* bursztyn - jezyk branzy narzedziowej, ale przyciemniony,
     zeby nie krzyczal przy kazdej cenie */
  --akcent:       #c2410c;
  --akcent-ciemny:#9a3412;
  --akcent-jasny: #fff2ec;

  --zielen:  #15803d;
  --zielen-tlo: #f0fdf4;
  --czerwien: #b91c1c;
  --czerwien-tlo: #fef2f2;
  --bursztyn: #a16207;
  --bursztyn-tlo: #fffbeb;

  --tekst:      var(--grafit-900);
  --tekst-slaby:var(--stal-500);
  --linia:      var(--stal-200);
  --linia-mocna:var(--stal-300);
  --tlo:        var(--bialy);
  --tlo-alt:    var(--stal-050);

  /* prawie ostre rogi - narzedzia to nie aplikacja do medytacji */
  --r:    2px;
  --r-du: 3px;

  --font:  'Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --szer: 1280px;
}

/* --------------------------------------------------------------- nadpisanie Bootstrapa */

:root {
  --bs-body-font-family: var(--font);
  --bs-body-color: var(--tekst);
  --bs-body-bg: var(--tlo);
  --bs-border-color: var(--linia);
  --bs-border-radius: var(--r);
  --bs-primary: var(--akcent);
  --bs-link-color: var(--grafit-900);
  --bs-link-hover-color: var(--akcent);
  --bs-focus-ring-color: rgba(194, 65, 12, .35);
}

/* --------------------------------------------------------------- baza */

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--tekst);
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Siatka bezpieczenstwa: gdyby cokolwiek jeszcze probowalo rozepchnac strone,
     nie da sie przesuwac ekranu na boki. "clip" zamiast "hidden", bo hidden
     psuje przyklejony naglowek i drzewo kategorii. */
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem); }
h3 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* Widoczny focus. Klient kupuje z klawiatury czesciej, niz sie wydaje. */
:focus-visible {
  outline: 2px solid var(--akcent);
  outline-offset: 2px;
  border-radius: var(--r);
}

.srodek { width: 100%; max-width: var(--szer); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .srodek { padding-inline: 24px; } }

.mono { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Nagłówek sekcji: kreska, etykieta, tytul */
.sekcja { padding: 48px 0; }
.sekcja-tyt {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 24px; padding-bottom: 12px;
  border-bottom: 1px solid var(--linia);
}
.sekcja-tyt h2 { margin: 0; }
/* Wylaczamy przyciski, bo inaczej ta regula nadpisuje im kolor tekstu
   (jest bardziej szczegolowa niz .btn-k) i wychodzi szary napis na pomaranczowym. */
.sekcja-tyt a:not(.btn-k):not(.btn-m) {
  font-size: .8125rem; font-weight: 600; color: var(--tekst-slaby);
  white-space: nowrap; transition: color .15s;
}
.sekcja-tyt a:not(.btn-k):not(.btn-m):hover { color: var(--akcent); }

.nadtyt {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stal-400);
  margin-bottom: 6px;
}

/* --------------------------------------------------------------- przyciski */

.btn-k {
  --tl: var(--grafit-900); --tx: var(--bialy); --br: var(--grafit-900);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border: 1px solid var(--br); background: var(--tl); color: var(--tx);
  font: inherit; font-weight: 600; font-size: .875rem; line-height: 1;
  border-radius: var(--r); cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-k:hover { --tl: var(--grafit-700); --br: var(--grafit-700); color: var(--bialy); }
.btn-k:active { --tl: var(--grafit-800); }
/* Przycisk zawsze trzyma swoj wlasny kolor tekstu, gdziekolwiek go wstawimy. */
a.btn-k, a.btn-k:hover, a.btn-k:focus { color: var(--tx); }

.btn-k--akcent { --tl: var(--akcent); --br: var(--akcent); }
.btn-k--akcent:hover { --tl: var(--akcent-ciemny); --br: var(--akcent-ciemny); }

.btn-k--pusty { --tl: transparent; --tx: var(--grafit-900); --br: var(--linia-mocna); }
.btn-k--pusty:hover { --tl: var(--stal-050); --tx: var(--grafit-900); --br: var(--grafit-900); }

.btn-k--blok { width: 100%; }
.btn-k--duzy { padding: 14px 26px; font-size: .9375rem; }
.btn-k[disabled] { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------------------- belka informacyjna */

.belka {
  background: var(--grafit-900); color: var(--stal-300);
  font-size: .75rem; letter-spacing: .01em;
}
.belka .srodek {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 34px;
}
.belka-lista { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.belka b { color: var(--bialy); font-weight: 600; }
.belka a { color: var(--stal-300); transition: color .15s; }
.belka a:hover { color: var(--bialy); }
@media (max-width: 767px) {
  .belka-lista > :nth-child(n+2) { display: none; }
  .belka .srodek { justify-content: center; }
  .belka-prawo { display: none; }
}

/* --------------------------------------------------------------- naglowek */

.naglowek {
  position: sticky; top: 0; z-index: 1030;
  background: var(--bialy); border-bottom: 1px solid var(--linia);
}
.naglowek-in {
  display: grid; align-items: center; gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 68px; padding-block: 12px;
}
@media (max-width: 991px) {
  .naglowek-in { grid-template-columns: auto auto; min-height: 60px; }
}

/* logo: znak + nazwa. Znak to kwadrat z inicjalem, prosty i czytelny w faviconie */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-znak {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--akcent); color: var(--bialy);
  font-family: var(--mono); font-weight: 600; font-size: 1.125rem;
  border-radius: var(--r);
}
.logo-tekst { display: flex; flex-direction: column; line-height: 1.05; }
.logo-nazwa { font-weight: 700; font-size: 1.125rem; letter-spacing: -.02em; }
.logo-pod {
  font-family: var(--mono); font-size: .5625rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--stal-400);
}
@media (max-width: 400px) { .logo-pod { display: none; } }

/* szukajka - w sklepie narzedziowym to najwazniejszy element strony,
   bo klient przychodzi z konkretnym indeksem albo nazwa */
.szukajka { position: relative; max-width: 620px; width: 100%; }
.szukajka input {
  width: 100%; padding: 11px 46px 11px 14px;
  border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--stal-050); font: inherit; font-size: .9375rem; color: var(--tekst);
  transition: background .15s, border-color .15s;
}
.szukajka input::placeholder { color: var(--stal-400); }
.szukajka input:focus {
  background: var(--bialy); border-color: var(--grafit-600);
  outline: none; box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}
.szukajka button {
  position: absolute; right: 4px; top: 4px; bottom: 4px; width: 38px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--stal-500);
  cursor: pointer; border-radius: var(--r); transition: color .15s, background .15s;
}
.szukajka button:hover { color: var(--akcent); background: var(--stal-100); }
@media (max-width: 991px) { .szukajka { grid-column: 1 / -1; order: 3; max-width: none; } }

/* akcje po prawej: konto, koszyk */
.akcje { display: flex; align-items: center; gap: 4px; }
.akcja {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r); color: var(--grafit-700);
  font-size: .8125rem; font-weight: 600; transition: background .15s, color .15s;
}
.akcja:hover { background: var(--stal-100); color: var(--grafit-900); }
.akcja svg { flex: none; }
.akcja-tekst { display: none; }
@media (min-width: 1100px) { .akcja-tekst { display: inline; } }

.koszyk-licz {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center;
  background: var(--akcent); color: var(--bialy);
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  border-radius: 9px;
}

.hamburger {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--linia);
  background: var(--bialy); border-radius: var(--r); cursor: pointer; color: var(--grafit-800);
}
@media (max-width: 991px) { .hamburger { display: inline-flex; } }

/* --------------------------------------------------------------- kategorie pod przyciskiem

   Kategorii jest ponad dwa tysiace w 26 dzialach. Rozlozone na strone glowna
   zjadaly pol witryny, wiec siedza zwiniete w szufladzie pod jednym przyciskiem. */

.kat-guzik {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--bialy); font: inherit; font-size: .8125rem; font-weight: 600;
  color: var(--grafit-800); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.kat-guzik:hover { border-color: var(--grafit-900); background: var(--stal-050); }
@media (max-width: 575px) { .kat-guzik span { display: none; } .kat-guzik { padding: 9px 11px; } }

/* szuflada: pozycje dzialow */
#katMenu .accordion-item { border: 0; border-bottom: 1px solid var(--stal-100); }
#katMenu .accordion-button,
#katMenu .kat-plaski {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px 16px; background: var(--bialy); border: 0; box-shadow: none;
  font: inherit; font-size: .875rem; font-weight: 600; color: var(--grafit-800);
}
#katMenu .accordion-button:not(.collapsed) { background: var(--stal-050); color: var(--akcent-ciemny); }
#katMenu .accordion-button:focus { box-shadow: none; border-color: transparent; }
#katMenu .accordion-button::after { margin-left: 0; width: 14px; height: 14px; background-size: 14px; }
#katMenu .kat-ik { color: var(--akcent); display: flex; flex: none; }
#katMenu .kat-nazwa { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#katMenu .kat-ile { font-size: .625rem; color: var(--stal-400); font-weight: 500; flex: none; }
#katMenu .kat-plaski:hover { background: var(--stal-050); color: var(--akcent); }

#katMenu .kat-wszystko {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px 9px 42px; font-size: .75rem; font-weight: 600; color: var(--akcent);
  background: var(--stal-050);
}
#katMenu .kat-pod { list-style: none; margin: 0; padding: 0 0 6px; background: var(--stal-050); }
#katMenu .kat-pod a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 16px 7px 42px; font-size: .8125rem; color: var(--grafit-600);
}
#katMenu .kat-pod a:hover { color: var(--akcent); background: var(--stal-100); }
#katMenu .kat-pod .mono { font-size: .625rem; color: var(--stal-400); flex: none; }
#katMenu .kat-pod a span:first-child { overflow-wrap: anywhere; min-width: 0; }

/* --------------------------------------------------------------- nawigacja kategorii */

.nawig { border-bottom: 1px solid var(--linia); background: var(--bialy); }
.nawig-lista {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.nawig-lista::-webkit-scrollbar { display: none; }
.nawig-lista a {
  display: block; padding: 12px 14px; white-space: nowrap;
  font-size: .8125rem; font-weight: 600; color: var(--grafit-600);
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nawig-lista a:hover { color: var(--akcent); border-bottom-color: var(--akcent); }
.nawig-lista a.jest { color: var(--grafit-900); border-bottom-color: var(--grafit-900); }
@media (max-width: 991px) { .nawig { display: none; } }

/* --------------------------------------------------------------- hero */

.hero {
  position: relative; overflow: hidden;
  background: var(--grafit-900); color: var(--bialy);
}
/* delikatne ukosne prazki - technicznie, bez stockowego zdjecia */
.hero::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 14px, rgba(255,255,255,.022) 14px 15px);
  pointer-events: none;
}
.hero-in {
  position: relative; display: grid; gap: 40px; align-items: center;
  padding: 56px 0; grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 992px) {
  .hero-in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); padding: 72px 0; gap: 56px; }
}
/* Wariant bez karty po prawej: hero ma tylko powiedziec, co tu mozna zrobic,
   a nie powtarzac warunkow dostawy, ktore i tak sa w pasku nizej. */
.hero-in--waski { grid-template-columns: minmax(0, 1fr); max-width: 780px; padding: 44px 0; }
@media (min-width: 992px) {
  .hero-in--waski { grid-template-columns: minmax(0, 1fr); padding: 52px 0; }
}

.hero h1 { color: var(--bialy); margin-bottom: 16px; }
.hero h1 em { font-style: normal; color: var(--akcent); }
.hero-lead { color: var(--stal-300); font-size: 1.0625rem; max-width: 52ch; margin-bottom: 28px; }
.hero-akcje { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn-k--pusty { --tx: var(--bialy); --br: var(--grafit-600); }
.hero .btn-k--pusty:hover { --tl: var(--grafit-800); --tx: var(--bialy); --br: var(--stal-500); }

/* karta z konkretami zamiast zdjecia z banku */
.hero-karta {
  background: var(--grafit-800); border: 1px solid var(--grafit-600);
  border-radius: var(--r-du); padding: 4px;
}
.hero-karta dl { margin: 0; }
.hero-karta div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 18px; border-bottom: 1px solid var(--grafit-700);
}
.hero-karta div:last-child { border-bottom: 0; }
.hero-karta dt { color: var(--stal-400); font-size: .8125rem; }
.hero-karta dd {
  margin: 0; font-family: var(--mono); font-weight: 600; font-size: .9375rem;
  color: var(--bialy); text-align: right;
}

/* --------------------------------------------------------------- pasy zaufania */

.zaufanie { border-bottom: 1px solid var(--linia); background: var(--tlo-alt); }
.zaufanie-in {
  display: grid; gap: 1px; background: var(--linia);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .zaufanie-in { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zaufanie-el {
  background: var(--tlo-alt); padding: 18px 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.zaufanie-el svg { flex: none; color: var(--akcent); margin-top: 1px; }
.zaufanie-el b { display: block; font-size: .8125rem; font-weight: 600; }
.zaufanie-el span { font-size: .75rem; color: var(--tekst-slaby); }

/* --------------------------------------------------------------- pas marek

   Lista jedzie w kolko, bo marek jest kilkadziesiat i nie zmieszcza sie w rzedzie.
   Najechanie myszka zatrzymuje ruch, zeby dalo sie kliknac. */

.marki-pas {
  border-block: 1px solid var(--linia); background: var(--bialy);
  padding-block: 12px;
}
/* Statyczny rzad, zawijany. Na waskim ekranie przewija sie w bok palcem. */
.marki-rzad {
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
}
@media (max-width: 767px) {
  .marki-rzad {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none;
  }
  .marki-rzad::-webkit-scrollbar { display: none; }
}

.marka-pigulka {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px; flex: none;
  border: 1px solid var(--linia); border-radius: var(--r);
  background: var(--tlo-alt); color: var(--grafit-600);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.marka-pigulka:hover { border-color: var(--grafit-900); color: var(--akcent); background: var(--bialy); }
.marka-pigulka img { max-height: 24px; max-width: 96px; object-fit: contain; }

/* Link jest zwyklym elementem rzedu, wiec nic juz nie zaslania. */
.marki-wszystkie {
  display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; flex: none;
  font-size: .75rem; font-weight: 600; color: var(--akcent); white-space: nowrap;
}
.marki-wszystkie:hover { text-decoration: underline; }

/* --------------------------------------------------------------- siatka marek */

.marki-siatka { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px)  { .marki-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .marki-siatka { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.marka-kafel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 92px; padding: 16px 12px;
  border: 1px solid var(--linia); border-radius: var(--r); background: var(--bialy);
  transition: border-color .15s, transform .15s;
}
.marka-kafel:hover { border-color: var(--grafit-900); transform: translateY(-2px); }
.marka-kafel img { max-height: 36px; max-width: 120px; object-fit: contain; }
.marka-nazwa {
  font-weight: 700; font-size: .875rem; text-align: center; line-height: 1.25;
  overflow-wrap: anywhere;
}
.marka-ile { font-family: var(--mono); font-size: .625rem; color: var(--stal-400); }

/* --------------------------------------------------------------- kategorie */

/* minmax(0, 1fr), nie samo 1fr. Domyslne 1fr to minmax(auto, 1fr), a "auto" nie
   pozwala kolumnie zwezic sie ponizej zawartosci. Dluga nazwa towaru rozpychala
   wtedy siatke i na telefonie trzeba bylo przesuwac ekran na boki. */
.kafle { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .kafle { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.kafel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 16px; background: var(--bialy);
  border: 1px solid var(--linia); border-radius: var(--r);
  transition: border-color .15s, background .15s, transform .15s;
}
.kafel:hover {
  border-color: var(--grafit-900); background: var(--stal-050); transform: translateY(-2px);
}
.kafel-ikona { color: var(--grafit-600); }
.kafel:hover .kafel-ikona { color: var(--akcent); }
.kafel b { font-size: .875rem; font-weight: 600; line-height: 1.25; }
.kafel span { font-family: var(--mono); font-size: .6875rem; color: var(--stal-400); }

/* --------------------------------------------------------------- karta produktu */

.siatka { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.produkt {
  display: flex; flex-direction: column;
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.produkt:hover { border-color: var(--linia-mocna); box-shadow: 0 1px 0 var(--linia-mocna); }
/* Zdjecia od Unimetu maja skrajnie rozne proporcje: puszka pianki to 316x1063,
   a tarcza tnaca 1500x245. Kafel jest lekko pionowy (4:5), bo wiekszosc towaru
   stoi, a nie lezy.

   UWAGA na "height: 100%" przy obrazku: w kontenerze z aspect-ratio procent nie
   ma sie do czego odniesc, wiec obrazek zostawal przy naturalnej wysokosci,
   wychodzil poza ramke i overflow go przycinal. Dlatego ograniczamy go
   przez max-width/max-height, a padding siedzi na kontenerze. */
.produkt-foto {
  position: relative;                    /* punkt odniesienia dla zdjecia */
  aspect-ratio: 4 / 5; background: var(--bialy);
  border-bottom: 1px solid var(--linia);
  overflow: hidden;
}
/* Zdjecie jest wyjete z przeplywu (position: absolute). To jedyny sposob, zeby
   obrazek o naturalnej wysokosci 1063 px nie rozpychal kafla od srodka - a gdy
   go rozpychal, aspect-ratio przestawalo obowiazywac i overflow ucinal puszke.
   inset daje margines ze wszystkich stron, a contain wpasowuje calosc. */
.produkt-foto img {
  position: absolute; inset: 10px;
  width: calc(100% - 20px); height: calc(100% - 20px);
  object-fit: contain; object-position: center;
}
.produkt-tresc { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
/* Indeksy i kody bywaja dluzsze niz kafel i nie maja gdzie sie zlamac,
   wiec pozwalamy im peknac w dowolnym miejscu. */
.produkt-indeks {
  font-family: var(--mono); font-size: .6875rem; font-weight: 500; color: var(--stal-400);
  overflow-wrap: anywhere;
}
.produkt-nazwa {
  font-size: .875rem; font-weight: 600; line-height: 1.3; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.produkt-dol { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.produkt-cena {
  font-family: var(--mono); font-weight: 600; font-size: 1.0625rem;
  color: var(--grafit-900); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.produkt-netto { display: block; font-size: .6875rem; font-weight: 500; color: var(--stal-400); }

.stan { display: inline-flex; align-items: center; gap: 5px; font-size: .6875rem; font-weight: 600; }
.stan::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stan--jest { color: var(--zielen); }
.stan--malo { color: var(--bursztyn); }
.stan--brak { color: var(--stal-400); }

/* --------------------------------------------------------------- uklad z drzewem */

.sklep-uklad { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .sklep-uklad { grid-template-columns: 252px minmax(0, 1fr); gap: 32px; align-items: start; }
}

/* Na waskim ekranie drzewo chowa sie pod przycisk - w bocznym pasku
   zjadloby caly ekran, zanim klient zobaczylby towar. */
.drzewo-bok { display: none; }
@media (min-width: 1000px) { .drzewo-bok { display: block; } }

.drzewo {
  position: sticky; top: 88px;
  max-height: calc(100vh - 110px); overflow-y: auto;
  border: 1px solid var(--linia); border-radius: var(--r-du); background: var(--bialy);
  scrollbar-width: thin;
}
.drzewo-tyt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--linia);
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stal-400);
  position: sticky; top: 0; background: var(--bialy); z-index: 1;
}
.drzewo-tyt a { color: var(--akcent); text-transform: none; letter-spacing: 0; font-size: .6875rem; }

.drzewo-lista { list-style: none; margin: 0; padding: 0; }
.drzewo-lista a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 14px; font-size: .8125rem; line-height: 1.3; color: var(--grafit-700);
  border-left: 2px solid transparent; transition: background .12s, color .12s, border-color .12s;
}
.drzewo-lista a:hover { background: var(--stal-050); color: var(--akcent); }
.drzewo-lista a .ile {
  font-family: var(--mono); font-size: .625rem; color: var(--stal-400); flex: none;
}
.drzewo-lista a.w-sciezce { font-weight: 600; color: var(--grafit-900); }
.drzewo-lista a.tu {
  background: var(--akcent-jasny); color: var(--akcent-ciemny);
  font-weight: 600; border-left-color: var(--akcent);
}
.drzewo-lista a.tu .ile { color: var(--akcent); }

/* Kolejne poziomy wcinamy i wyciszamy, zeby bylo widac hierarchie */
.drzewo-p2 a { padding-left: 26px; font-size: .78125rem; color: var(--grafit-600); }
.drzewo-p3 a { padding-left: 38px; font-size: .75rem; color: var(--stal-500); }
.drzewo-p2 { border-bottom: 1px solid var(--stal-100); padding-bottom: 4px; margin-bottom: 4px; }

/* przycisk na telefon */
.drzewo-guzik {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--bialy); font: inherit; font-size: .875rem; font-weight: 600;
  color: var(--grafit-900); cursor: pointer;
}
@media (min-width: 1000px) { .drzewo-guzik { display: none; } }
.drzewo-guzik:hover { border-color: var(--grafit-900); }

/* w szufladzie drzewo nie jest juz przyklejone */
.offcanvas .drzewo { position: static; max-height: none; border: 0; border-radius: 0; }
.offcanvas .drzewo-tyt { display: none; }

/* --------------------------------------------------------------- mapa katalogu */

/* Kolumny zamiast kafli: przy 26 dzialach liczy sie to, zeby dalo sie
   przebiec wzrokiem cala liste, a nie zeby bylo duzo kwadratow. */
.mapa { columns: 1; column-gap: 28px; }
@media (min-width: 700px)  { .mapa { columns: 2; } }
@media (min-width: 1100px) { .mapa { columns: 3; } }

.mapa-dzial { break-inside: avoid; margin-bottom: 26px; display: inline-block; width: 100%; }

.mapa-tyt {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 7px; margin-bottom: 7px;
  border-bottom: 1px solid var(--linia-mocna);
  font-weight: 700; font-size: .875rem; line-height: 1.25;
}
.mapa-tyt:hover { color: var(--akcent); }
.mapa-tyt .mapa-ik { color: var(--akcent); flex: none; display: flex; }
.mapa-tyt .mono { margin-left: auto; font-size: .625rem; color: var(--stal-400); font-weight: 500; }

.mapa-lista { list-style: none; margin: 0; padding: 0; }
.mapa-lista a {
  display: flex; align-items: baseline; gap: 8px;
  padding: 3px 0; font-size: .8125rem; color: var(--grafit-600); line-height: 1.35;
}
.mapa-lista a:hover { color: var(--akcent); }
.mapa-lista .mono { margin-left: auto; font-size: .625rem; color: var(--stal-300); }

/* --------------------------------------------------------------- karta produktu (strona) */

/* Uwaga: te wymiary MUSZA siedziec w arkuszu, nie w atrybucie style.
   Inline style bije media query i uklad zostaje jednokolumnowy. */
.prod-uklad { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .prod-uklad { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; align-items: start; }
}

.prod-foto {
  position: relative;
  border: 1px solid var(--linia); border-radius: var(--r-du); background: var(--bialy);
  aspect-ratio: 1; overflow: hidden;
  max-width: 460px; margin-inline: auto; width: 100%;
}
/* jak przy kaflu: zdjecie wyjete z przeplywu, zeby nie rozpychalo ramki */
.prod-foto img {
  position: absolute; inset: 18px;
  width: calc(100% - 36px); height: calc(100% - 36px);
  object-fit: contain; object-position: center;
}

.prod-mini { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; max-width: 460px; margin-inline: auto; }
.prod-mini button {
  width: 60px; height: 60px; padding: 4px; cursor: pointer; background: var(--bialy);
  border: 1px solid var(--linia); border-radius: var(--r); transition: border-color .15s;
}
.prod-mini button:hover, .prod-mini button[aria-current="true"] { border-color: var(--grafit-900); }
.prod-mini button { position: relative; }
.prod-mini img {
  position: absolute; inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: contain;
}

/* Nazwy z hurtowni sa pisane wielkimi literami. W duzym naglowku to krzyk,
   wiec schodzimy z rozmiarem i rozluzniamy odstepy miedzy wierszami. */
.prod-nazwa {
  font-size: clamp(1.125rem, 1rem + .7vw, 1.4rem);
  line-height: 1.3; letter-spacing: 0; margin: 0 0 10px;
  text-wrap: pretty;
}

.prod-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .6875rem; color: var(--stal-500); margin-bottom: 20px;
  overflow-wrap: anywhere;
}
.prod-nazwa { overflow-wrap: anywhere; }
.drzewo-lista a span:first-child,
.mapa-lista a span:first-child { overflow-wrap: anywhere; min-width: 0; }
.prod-meta b { color: var(--tekst); font-weight: 600; }

/* --------------------------------------------------------------- warianty

   Unimet trzyma kazdy wymiar jako osobna kartoteke. Tu skladamy je z powrotem
   w jeden towar z wyborem rozmiaru. */

.warianty { margin-bottom: 14px; }
.warianty-tyt {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
  font-size: .8125rem; font-weight: 600;
}
.warianty-tyt span { font-weight: 400; font-size: .75rem; color: var(--tekst-slaby); }

.warianty-lista {
  display: flex; gap: 6px; flex-wrap: wrap;
  max-height: 188px; overflow-y: auto;   /* rodziny potrafia miec ponad sto pozycji */
  padding-right: 4px;
}
.warianty-lista a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 7px 11px; border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--bialy); min-width: 84px;
  transition: border-color .12s, background .12s;
}
.warianty-lista a:hover { border-color: var(--grafit-900); }
.warianty-lista a.tu {
  border-color: var(--akcent); background: var(--akcent-jasny);
  box-shadow: inset 0 0 0 1px var(--akcent);
}
.warianty-lista a.brak { opacity: .55; }
.warianty-lista .w-et {
  font-family: var(--mono); font-size: .75rem; font-weight: 600; color: var(--tekst);
  overflow-wrap: anywhere;
}
.warianty-lista .w-cena { font-size: .6875rem; color: var(--tekst-slaby); }
.warianty-lista a.tu .w-cena { color: var(--akcent-ciemny); }

.prod-kasa {
  border: 1px solid var(--linia); border-radius: var(--r-du);
  padding: 18px; background: var(--tlo-alt);
}
.prod-cena {
  font-family: var(--mono); font-weight: 600; font-size: 1.75rem;
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.prod-cena-pod { font-size: .75rem; color: var(--tekst-slaby); margin-top: 6px; }

.prod-punkty { display: grid; gap: 8px; font-size: .8125rem; }
.prod-punkty div { display: flex; gap: 9px; align-items: flex-start; }
.prod-punkty svg { flex: none; margin-top: 1px; color: var(--stal-500); }

/* --------------------------------------------------------------- opis z hurtowni */

.opis-hurt { font-size: .9375rem; line-height: 1.65; color: var(--grafit-700); max-width: 70ch; }
.opis-hurt table {
  width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .8125rem;
  display: block; overflow-x: auto;
}
.opis-hurt td, .opis-hurt th {
  border: 1px solid var(--linia); padding: 7px 10px; text-align: left; vertical-align: top;
}
.opis-hurt th { background: var(--tlo-alt); font-weight: 600; }
.opis-hurt ul, .opis-hurt ol { padding-left: 20px; margin: 10px 0; }
.opis-hurt li { margin-bottom: 4px; }
.opis-hurt br + br { display: none; }        /* hurtownia sypie pustymi liniami */
.opis-hurt img { display: none; }            /* zdjecia mamy w galerii, nie w tresci */

/* --------------------------------------------------------------- strony tresciowe */

.tresc-strona { max-width: 780px; }
.tresc-strona h3 {
  font-size: 1.0625rem; margin: 28px 0 10px; padding-top: 4px;
}
.tresc-strona h3:first-of-type { margin-top: 12px; }
.tresc-strona p, .tresc-strona li { font-size: .9375rem; line-height: 1.7; color: var(--grafit-700); }
.tresc-strona ul, .tresc-strona ol { padding-left: 22px; margin: 10px 0 16px; }
.tresc-strona li { margin-bottom: 7px; }
.tresc-strona a { color: var(--akcent); text-decoration: underline; text-underline-offset: 2px; }
.tresc-strona a:hover { color: var(--akcent-ciemny); }
.tresc-strona .tab-obud { margin: 14px 0 18px; border: 1px solid var(--linia); border-radius: var(--r); }
.tresc-strona table { font-size: .8125rem; }

.wzor {
  background: var(--tlo-alt); border: 1px solid var(--linia); border-radius: var(--r);
  padding: 16px; font-family: var(--mono); font-size: .75rem; line-height: 1.7;
  white-space: pre-wrap; overflow-x: auto; color: var(--grafit-700);
}

.kontakt-siatka {
  display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); margin-bottom: 8px;
}
@media (min-width: 560px) { .kontakt-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kontakt-kafel {
  display: grid; gap: 4px; padding: 20px;
  border: 1px solid var(--linia); border-radius: var(--r-du); background: var(--bialy);
  text-decoration: none !important; transition: border-color .15s, transform .15s;
}
.kontakt-kafel:hover { border-color: var(--grafit-900); transform: translateY(-2px); }
.kontakt-kafel svg { color: var(--akcent); margin-bottom: 6px; }
.kontakt-kafel b { font-size: .9375rem; }
.kontakt-kafel span { font-size: .8125rem; color: var(--grafit-700); }

/* --------------------------------------------------------------- konto klienta */

.konto-zam { border: 1px solid var(--linia); border-radius: var(--r-du); background: var(--bialy); }
.konto-zam-poz {
  display: grid; align-items: center; gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  padding: 14px 16px; border-bottom: 1px solid var(--stal-100);
  transition: background .12s;
}
.konto-zam-poz:last-child { border-bottom: 0; }
.konto-zam-poz:hover { background: var(--stal-050); }
.konto-zam-poz svg { color: var(--stal-400); }
@media (max-width: 575px) {
  .konto-zam-poz { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .konto-zam-poz svg { display: none; }
}

/* --------------------------------------------------------------- pusty stan */

.pusto {
  border: 1px dashed var(--linia-mocna); border-radius: var(--r-du);
  padding: 48px 24px; text-align: center; background: var(--tlo-alt);
}
.pusto svg { color: var(--stal-300); margin-bottom: 12px; }
.pusto h3 { margin-bottom: 6px; }
.pusto p { color: var(--tekst-slaby); max-width: 46ch; margin-inline: auto; font-size: .875rem; }

/* --------------------------------------------------------------- koszyk */

.koszyk-uklad { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .koszyk-uklad { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
}

.koszyk-lista { border: 1px solid var(--linia); border-radius: var(--r-du); background: var(--bialy); }

.koszyk-poz {
  display: grid; gap: 12px; align-items: center;
  grid-template-columns: 64px minmax(0, 1fr) auto auto auto;
  padding: 12px 14px; border-bottom: 1px solid var(--stal-100);
}
.koszyk-poz:last-child { border-bottom: 0; }
@media (max-width: 575px) {
  .koszyk-poz {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "foto opis x" "foto ilosc cena";
    row-gap: 8px;
  }
  .koszyk-foto  { grid-area: foto; }
  .koszyk-opis  { grid-area: opis; }
  .koszyk-ilosc { grid-area: ilosc; }
  .koszyk-cena  { grid-area: cena; }
  .koszyk-x     { grid-area: x; }
}

.koszyk-foto {
  position: relative; width: 64px; aspect-ratio: 1; flex: none;
  border: 1px solid var(--linia); border-radius: var(--r); background: var(--bialy);
  display: grid; place-items: center; overflow: hidden;
}
.koszyk-foto img {
  position: absolute; inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px); object-fit: contain;
}

.koszyk-opis > a { font-size: .875rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.koszyk-opis > a:hover { color: var(--akcent); }
.koszyk-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  font-size: .6875rem; color: var(--stal-400); margin-top: 4px;
}

.koszyk-ilosc input {
  width: 68px; padding: 7px 8px; text-align: center;
  border: 1px solid var(--linia-mocna); border-radius: var(--r);
  font: inherit; font-family: var(--mono); font-size: .8125rem;
}
.koszyk-ilosc input:focus { outline: none; border-color: var(--grafit-600); }

.koszyk-cena { text-align: right; min-width: 90px; }
.koszyk-cena b { font-family: var(--mono); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.koszyk-cena span { display: block; font-size: .625rem; color: var(--stal-400); }

.koszyk-x {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--stal-400); cursor: pointer;
  border-radius: var(--r);
}
.koszyk-x:hover { background: var(--czerwien-tlo); color: var(--czerwien); }

.koszyk-suma-in {
  position: sticky; top: 88px;
  border: 1px solid var(--linia); border-radius: var(--r-du);
  background: var(--tlo-alt); padding: 18px;
}
.koszyk-wiersz {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; font-size: .875rem;
}
.koszyk-wiersz b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.koszyk-wiersz--razem { font-size: 1rem; }
.koszyk-wiersz--razem b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.koszyk-info {
  font-size: .75rem; color: var(--akcent-ciemny); background: var(--akcent-jasny);
  border: 1px solid #f5c6a5; border-radius: var(--r); padding: 8px 10px; margin-top: 8px;
}

/* --------------------------------------------------------------- skladanie zamowienia */

.zam-karta {
  border: 1px solid var(--linia); border-radius: var(--r-du);
  background: var(--bialy); padding: 18px;
}
.zam-karta h3 { font-size: .9375rem; margin: 0 0 14px; }
.zam-karta + .zam-karta { margin-top: 16px; }

.zam-rzad { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .zam-rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Wybor dostawy i platnosci: caly wiersz jest klikalny, nie sam kwadracik. */
.zam-opcja {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--linia-mocna); border-radius: var(--r);
  cursor: pointer; background: var(--bialy);
  transition: border-color .12s, background .12s;
}
.zam-opcja:hover { border-color: var(--grafit-600); }
.zam-opcja.jest { border-color: var(--akcent); background: var(--akcent-jasny); }
.zam-opcja input { margin-top: 2px; width: 17px; height: 17px; flex: none; accent-color: var(--akcent); }
.zam-opcja-tresc { flex: 1; min-width: 0; }
.zam-opcja-tresc b { display: block; font-size: .875rem; }
.zam-opcja-tresc span { display: block; font-size: .75rem; color: var(--tekst-slaby); margin-top: 2px; }
.zam-opcja-cena {
  font-family: var(--mono); font-size: .8125rem; font-weight: 600; white-space: nowrap; flex: none;
}

/* --------------------------------------------------------------- formularze */

.pole-grupa { margin-bottom: 16px; }
.pole-grupa label {
  display: block; font-size: .8125rem; font-weight: 600; margin-bottom: 6px; color: var(--grafit-700);
}
.pole-grupa input, .pole-grupa select, .pole-grupa textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--linia-mocna); border-radius: var(--r);
  background: var(--bialy); font: inherit; font-size: .9375rem; color: var(--tekst);
  transition: border-color .15s, box-shadow .15s;
}
.pole-grupa input:focus, .pole-grupa select:focus, .pole-grupa textarea:focus {
  outline: none; border-color: var(--grafit-600); box-shadow: 0 0 0 3px rgba(194,65,12,.12);
}
.pole-grupa input[aria-invalid="true"] { border-color: var(--czerwien); }
.pole-podp { display: block; font-size: .75rem; color: var(--tekst-slaby); margin-top: 5px; }

.zgoda { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; color: var(--grafit-600); }
.zgoda input { margin-top: 2px; flex: none; width: 16px; height: 16px; accent-color: var(--akcent); }
.zgoda a { text-decoration: underline; text-underline-offset: 2px; }

/* karta na formularz logowania i rejestracji */
.auth { padding: 40px 0 64px; }
.auth-karta {
  max-width: 440px; margin-inline: auto;
  background: var(--bialy); border: 1px solid var(--linia); border-radius: var(--r-du);
  padding: 32px;
}
@media (max-width: 575px) { .auth-karta { padding: 24px 20px; border: 0; } }
.auth-karta h1 { font-size: 1.5rem; margin-bottom: 4px; }
.auth-lead { color: var(--tekst-slaby); font-size: .875rem; margin-bottom: 24px; }
.auth-stopka {
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--linia);
  font-size: .8125rem; color: var(--tekst-slaby); text-align: center;
}
.auth-stopka a { font-weight: 600; color: var(--akcent); }
.auth-stopka a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- komunikaty */

.alert-k {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border: 1px solid; border-radius: var(--r);
  font-size: .875rem; margin-bottom: 16px;
}
.alert-k svg { flex: none; margin-top: 1px; }
.alert-k--ok  { background: var(--zielen-tlo); border-color: #bbf7d0; color: #14532d; }
.alert-k--err { background: var(--czerwien-tlo); border-color: #fecaca; color: #7f1d1d; }
.alert-k--info{ background: var(--bursztyn-tlo); border-color: #fde68a; color: #713f12; }

/* --------------------------------------------------------------- stopka */

.stopka { background: var(--grafit-900); color: var(--stal-300); margin-top: 64px; }
.stopka-gora {
  display: grid; gap: 32px; padding: 48px 0 40px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .stopka-gora { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) {
  .stopka-gora { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
}
.stopka h4 {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stal-400);
  margin-bottom: 14px;
}
.stopka ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.stopka a { color: var(--stal-300); font-size: .8125rem; transition: color .15s; }
.stopka a:hover { color: var(--bialy); }
.stopka-opis { font-size: .8125rem; color: var(--stal-400); max-width: 42ch; margin: 14px 0 0; }
.stopka .logo-nazwa { color: var(--bialy); }
.stopka-dol {
  border-top: 1px solid var(--grafit-700); padding: 18px 0;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .75rem; color: var(--stal-500);
}

/* --------------------------------------------------------------- menu mobilne */

.offcanvas { background: var(--bialy); }
.offcanvas-header { border-bottom: 1px solid var(--linia); padding: 16px; }
.menu-mob { list-style: none; margin: 0; padding: 8px 0; }
.menu-mob a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; font-size: .9375rem; font-weight: 600;
  border-bottom: 1px solid var(--stal-100);
}
.menu-mob a:hover { background: var(--stal-050); color: var(--akcent); }
.menu-mob-sekcja {
  font-family: var(--mono); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--stal-400);
  padding: 18px 16px 8px;
}

/* --------------------------------------------------------------- drobiazgi */

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--grafit-900); color: var(--bialy); padding: 12px 18px;
  font-weight: 600; font-size: .875rem;
}
.skip:focus { left: 8px; top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .kafel:hover { transform: none; }
}