/* Vistitio — warstwa bazowa i komponenty.
   Wszystkie wartości z tokens.css. Hex tutaj = błąd, który odrzuca CI.

   Uwaga na tokeny typografii: --v-t-body, --v-t-ui, --v-t-label i reszta tej rodziny
   to skrót `font` (rozmiar/interlinia), a nie sam rozmiar. W `font-size` są nieważne
   i przeglądarka po cichu bierze rozmiar odziedziczony. Używaj ich tylko tak:
   `font: 600 var(--v-t-label) var(--v-font-body);`. */

/* ---------- reset i typografia ---------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Tło serwisu jest BIAŁE — zmierzone w makiecie i w prototypie desktop.
     `--v-n-100` z wytycznych marki opisuje tło aplikacji mobilnej; na web kafle
     działów i karty zlewały się z nim. Szare pasy dokładają pojedyncze sekcje. */
  background: var(--v-n-0);
  color: var(--v-n-800);
  font-family: var(--v-font-body);
  font: var(--v-t-body) var(--v-font-body);
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--v-font-display);
  font-weight: 600;
}

h1 { font: 600 var(--v-t-h1) var(--v-font-display); letter-spacing: var(--v-ls-display); }
h2 { font: 600 var(--v-t-h2) var(--v-font-display); letter-spacing: var(--v-ls-h2); }
h3 { font: 600 var(--v-t-h3) var(--v-font-display); letter-spacing: var(--v-ls-h3); }

p { margin: 0; }

a { color: inherit; }

img { max-width: 100%; display: block; }
/* `x-picture` (WebP obok JPEG, audyt SEO 10.10): opakowanie nie tworzy własnego pudełka,
   więc `img` w środku układa się i dziedziczy wymiary tak, jakby stał sam. */
picture { display: contents; }

/* Liczby i kwoty zawsze tabularne: kolumna cen ma się nie chwiać. */
.v-num, .v-money { font-family: var(--v-font-display); font-variant-numeric: tabular-nums; }

/* ---------- x-button ---------- */
/* Źródło: Styleguide, sekcja Przyciski. Jedna akcja główna na ekran.
   Ochra (accent) wyłącznie dla rzeczy płatnych, nigdy dla zwykłego „Zapisz". */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v-s-2);
  height: 48px;
  padding: 0 var(--v-s-5);
  border: none;
  border-radius: var(--v-r-btn);
  font-family: var(--v-font-body);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--v-dur-fast) var(--v-ease), border-color var(--v-dur-fast) var(--v-ease);
}

.v-btn--sm { height: 40px; padding: 0 var(--v-s-4); font-size: 13.5px; }
.v-btn--lg { height: var(--v-h-cta); }

.v-btn--primary { background: var(--v-primary); color: var(--v-n-0); }
.v-btn--primary:hover { background: var(--v-primary-hover); }

.v-btn--secondary {
  background: var(--v-n-0);
  color: var(--v-primary);
  border: 1.5px solid var(--v-n-300);
  font-weight: 600;
}
.v-btn--secondary:hover { background: var(--v-n-50); }

.v-btn--accent { background: var(--v-secondary); color: var(--v-primary); }
.v-btn--accent:hover { background: var(--v-secondary-dark); }

.v-btn--destructive {
  background: var(--v-n-0);
  color: var(--v-error);
  border: 1.5px solid var(--v-error-border);
  font-weight: 600;
}
.v-btn--destructive:hover { background: var(--v-error-soft); }

.v-btn--link {
  height: 40px;
  padding: 0;
  background: transparent;
  color: var(--v-n-600);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}
.v-btn--link:hover { color: var(--v-n-800); }

.v-btn[disabled],
.v-btn--disabled {
  background: var(--v-n-400);
  border-color: var(--v-n-400);
  color: var(--v-n-0);
  cursor: not-allowed;
}

.v-btn--block { width: 100%; }

@media (max-width: 760px) {
  .v-btn--lg { height: var(--v-h-cta-mobile); }
}

/* ---------- x-input, x-textarea ---------- */
/* Źródło: Styleguide, sekcja Pola. Podpowiedź pod polem, nie w placeholderze.
   Jednostka w polu, nie w etykiecie. Licznik znaków nad polem po prawej. */

.v-field { display: flex; flex-direction: column; gap: var(--v-s-1) var(--v-s-2); }

.v-field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--v-s-3); }

.v-field__label {
  font: 600 var(--v-t-label) var(--v-font-body);
  color: var(--v-n-600);
}

.v-field__counter { font-size: 11.5px; color: var(--v-n-500); font-variant-numeric: tabular-nums; }

.v-field__wrap { position: relative; display: block; margin-top: 6px; }

.v-input, .v-textarea {
  width: 100%;
  border-radius: var(--v-r-input);
  background: var(--v-n-0);
  border: 1.5px solid var(--v-n-300);
  color: var(--v-n-800);
  font-family: var(--v-font-body);
  font-size: 15px;
}

.v-input { height: var(--v-h-input); padding: 0 var(--v-s-4); }

.v-textarea {
  min-height: 96px;
  padding: var(--v-s-3) var(--v-s-4);
  line-height: 1.55;
  resize: vertical;
}

.v-input:focus, .v-textarea:focus {
  outline: none;
  border: 2px solid var(--v-primary);
}

.v-input--unit { padding-right: var(--v-s-10); }

.v-field__unit {
  position: absolute;
  right: 14px;
  top: 14px;
  font-size: 13px;
  color: var(--v-n-500);
}

.v-input[readonly], .v-textarea[readonly] {
  background: var(--v-n-50);
  border-color: var(--v-n-200);
  color: var(--v-n-600);
}

.v-input--error, .v-textarea--error { border: 2px solid var(--v-error); }

/* Błąd wygrywa z fokusem (28.09): przy sprawdzaniu na żywo człowiek pisze w polu z błędem,
   a `:focus` (dwa selektory) przebijał czerwień granatem — błąd widać było tylko w zdaniu. */
.v-input--error:focus, .v-textarea--error:focus { border-color: var(--v-error); }

/* Znak przyklejony w polu (nazwa profilu: „@”). Prototyp: left 16, pole dosuwa treść
   do 32 px. */
.v-field__prefiks {
  position: absolute;
  left: var(--v-s-4);
  top: 0;
  height: var(--v-h-input);
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--v-n-500);
  pointer-events: none;
}

.v-input--prefiks { padding-left: 32px; /* makieta */ }

/* Pole kwoty z ekranu „Dodaj ofertę": 52 px, liczba Outfitem 22/600, jednostka niżej. */
.v-input--kwota {
  height: 52px; /* makieta */
  font: 600 22px/1 var(--v-font-display); /* makieta */
  padding-right: 44px; /* makieta */
}

.v-input--kwota + .v-field__unit { top: 16px; font-size: 15px; } /* makieta */

.v-field__hint { font-size: 11.5px; color: var(--v-n-500); margin-top: 6px; }

/* Gdy pod polem stoi błąd, podpowiedź zostaje — ale ciaśniej, żeby czytało się
   jako jedna para zdań, nie dwa osobne komunikaty. */
.v-field__error:not([hidden]) + .v-field__hint { margin-top: 3px; /* makieta */ }
.v-field__error { font: 400 var(--v-t-label) var(--v-font-body); color: var(--v-error-text); margin-top: 6px; }

/* Błąd liczony w przeglądarce (`naZywo`) stoi w znaczniku zawsze i chowa się atrybutem
   `hidden`. Jawna reguła, bo `hidden` przegrywa z każdym naszym `display` (gotcha 20.09),
   a schowany błąd nie może ściskać odstępu podpowiedzi pod nim (reguła wyżej). */
.v-field__error[hidden], .v-field__hint[hidden] { display: none; }

@media (max-width: 760px) {
  .v-input { height: var(--v-h-input-mobile); }
  .v-field__prefiks { height: var(--v-h-input-mobile); }
}

/* ---------- x-badge ---------- */
/* Źródło: Styleguide, sekcja Pastylki. Para soft + tekst, kontrast ≥ 4,5:1. */

.v-badge {
  min-height: var(--v-h-badge);
  padding: 3px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.v-badge--neutral { background: var(--v-n-100); color: var(--v-n-700); }
.v-badge--success { background: var(--v-success-soft); color: var(--v-success-text); }
.v-badge--error { background: var(--v-error-soft); color: var(--v-error-text); }
.v-badge--warning { background: var(--v-warning-soft); color: var(--v-warning-text); }
.v-badge--info { background: var(--v-info-soft); color: var(--v-info-text); }
.v-badge--pro { background: var(--v-primary); color: var(--v-n-0); }
/* Ten sam wygląd co PRO, inne znaczenie: liczba filtrów albo nieprzeczytanych. */
.v-badge--licznik { background: var(--v-primary); color: var(--v-n-0); font-variant-numeric: tabular-nums; }
/* Ochra pełna = stan czasowy (rezerwacja), ochra miękka = promowanie. Tak jest w makiecie
   i w prototypie desktop, sprawdzone 17.09 — reguła „ochra tylko dla rzeczy płatnych”
   dotyczy PRZYCISKÓW, nie pastylek. */
.v-badge--reserved { background: var(--v-secondary); color: var(--v-primary); }
.v-badge--promoted { background: var(--v-secondary-soft); color: var(--v-secondary-text); }
/* Stan kupiony, który właśnie trwa — granat z odliczaniem („Promowane · zostało 7 dni"). */
.v-badge--kupione { background: var(--v-primary); color: var(--v-n-0); }
/* Podbicie, które właśnie trwa — jasna pastylka („Podbite · do jutra 14:20”, makieta v77):
   tło n-100 z granatowym napisem; `neutral` ma szary napis n-700. */
.v-badge--podbite { background: var(--v-n-100); color: var(--v-primary); }
/* Wyprzedaż, która właśnie trwa — biała pastylka z granatowym obrysem („Wyprzedaż −20% · do 20.10”,
   makieta v78 „Pro Moje oferty”). Obrys w środku, żeby wysokość została jak u pozostałych tonów. */
.v-badge--wyprzedaz { background: var(--v-n-0); color: var(--v-primary); box-shadow: inset 0 0 0 1.5px var(--v-primary); }

/* ---------- x-card ---------- */
/* Źródło: README handoffu, Wspólne komponenty: biel, promień 16, padding 16–20. */

.v-card {
  background: var(--v-n-0);
  border-radius: var(--v-r-card);
  padding: var(--v-s-5);
  border: 1px solid var(--v-n-100);
}

.v-card--flat { border-color: transparent; }
.v-card--raised { box-shadow: var(--v-shadow-card); border-color: transparent; }

/* ---------- x-promise-bar ---------- */
/* Źródło: Prototyp Desktop i Mobile, pasek nad nagłówkiem na każdym ekranie serwisu. */

.v-obietnica {
  background: var(--v-primary);
  color: var(--v-n-100);
  font: 600 13px/1.4 var(--v-font-body);
  text-align: center;
  padding: 9px var(--v-s-4); /* makieta: 9 px w pionie */
}

/* ---------- x-dept-bar ---------- */
/* Źródło: Prototyp Desktop, pasek pod nagłówkiem. Na telefonie przewija się w poziomie
   zamiast łamać na dwa rzędy — makieta trzyma go w jednej linii. */

.v-dzialy {
  background: var(--v-n-0);
  border-bottom: 1px solid var(--v-n-100);
  /* Panel mega menu pozycjonuje się względem CAŁEGO paska, nie pojedynczego działu —
     ma iść na pełną szerokość ekranu, a nie wisieć pod jednym chipem. */
  position: relative;
}

.v-dzialy__in {
  max-width: var(--v-w-page);
  margin: 0 auto;
  /* Pomiar z makiety: pasek 44 px, bez wyściółki od góry, 10 px od dołu, 24 po bokach. */
  padding: 0 24px 10px;
  display: flex;
  gap: var(--v-s-2);
  overflow-x: auto;
  scrollbar-width: none;
}

.v-dzialy__in::-webkit-scrollbar { display: none; }

/* Pomiar z prototypu: pozycja paska działów ma 34 px wysokości, promień 9,
   pismo 13/600 i cieńszą obwódkę niż zwykły chip (chip ze styleguide'u ma 38 px
   i 1,5 px — to inny element, pasek nawigacji, nie wybór w formularzu). */
.v-dzialy__poz {
  flex: none;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: var(--v-s-2);
  padding: 0 13px; /* makieta */
  border-radius: 9px; /* makieta */
  border: 1px solid var(--v-n-200);
  background: var(--v-n-0);
  color: var(--v-n-700);
  font: 600 13px/1 var(--v-font-body);
  text-decoration: none;
  white-space: nowrap;
}

.v-dzialy__poz:hover { background: var(--v-n-50); }

/* Bez tego kursor nad aktywnym działem zjeżdżał na jasne tło z reguły wyżej
   (`:hover` ma wyższą specyficzność niż sama klasa `--teraz`), czyli zaznaczenie
   znikało pod myszą. Ten sam przypadek jest opisany przy x-chip. */
.v-dzialy__poz--teraz:hover {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
}
/* Rozwijane menu działu. <details> zamiast skryptu: działa bez JavaScriptu,
   klawiatura i czytnik ekranu dostają je za darmo. */
.v-dzialy__grupa {
  flex: none;
}

.v-dzialy__grupa > summary {
  cursor: pointer;
  list-style: none;
}

.v-dzialy__grupa > summary::-webkit-details-marker { display: none; }

/* Pastylka Z ROZWINIECIEM dostaje wiecej miejsca po prawej niz zwykla. Znak ▾ ma
   male swiatlo wlasne, wiec przy 13 px wygladal, jakby byl przyklejony do obwodki
   (uwaga Huberta 05.10) — a wyblakly odcien dodatkowo zlewal go z krawedzia. */
.v-dzialy__grupa .v-dzialy__poz { padding-right: 16px; }

.v-dzialy__strzalka {
  font-size: 10px;
  color: var(--v-n-600);
  line-height: 1;
  transform: translateY(1px); /* znak ▾ ma wysoka linie bazowa, optycznie wisial */
}

.v-dzialy__poz--teraz .v-dzialy__strzalka { color: var(--v-n-0); }

/* Mega menu — pomiar z makiety („Vistitio Strona Glowna.dc.html”, najechanie na dział):
   panel idzie na PEŁNĄ szerokość ekranu pod paskiem, jego wnętrze siedzi w kontenerze
   1240 px z paddingiem 28/24/32. Cztery kolumny po 1fr i karta 220 px po prawej.
   Bez obwódki i bez zaokrągleń — to nie jest kafelek, tylko warstwa nad treścią. */
.v-dzialy__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--v-z-dropdown);
  background: var(--v-n-0);
  /* Trzy rzeczy z makiety, bez których panel zlewa się ze stroną: kreska u góry,
     CIEMNIEJSZA kreska u dołu i cień rzucany W DÓŁ. Brakowało cienia i dolna kreska
     była za jasna, więc menu wyglądało jak część treści, nie jak warstwa nad nią. */
  border-top: 1px solid var(--v-n-100);
  border-bottom: 1px solid var(--v-n-200);
  box-shadow: 0 18px 40px rgba(20, 28, 46, .12); /* makieta */
}

.v-dzialy__menu-in {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: 28px 24px 32px; /* pomiar z makiety */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 220px;
}

.v-dzialy__menu-kolumna {
  display: flex;
  flex-direction: column;
  gap: 13px; /* rytm 32 px między pozycjami (19 px wiersza + 13) */
  min-width: 0;
}

.v-dzialy__menu-grupa {
  font: 700 12px/1.4 var(--v-font-body); /* pomiar z makiety */
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-n-600); /* pomiar z makiety: #5B6B85, nie n-500 */
  margin-bottom: 3px; /* razem z gap kolumny daje 16 px z makiety */
}

.v-dzialy__menu-kolumna a {
  font: 400 14px/1.35 var(--v-font-body); /* pomiar z makiety */
  color: var(--v-primary);
  text-decoration: none;
}

.v-dzialy__menu-kolumna a:hover { text-decoration: underline; }

/* Karta po prawej: nazwa działu, zdanie o nim i jedna akcja. */
/* Karta po prawej — pomiar z makiety: 219x184, tło n-50, promień 16, wyściółka 20,
   odstęp 10. Przycisk na pełną szerokość karty (179 px = wnętrze). */
.v-dzialy__menu-karta {
  /* Zawsze w OSTATNIEJ kolumnie siatki, niezależnie od tego, ile grup ma dział.
     Bez tego Rękodzieło (jedna grupa) stawiało kartę tuż obok kolumny, a nie
     przy prawej krawędzi jak w pozostałych działach. */
  grid-column: -2 / -1;
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 10px; /* makieta */
  background: var(--v-n-50);
  border-radius: var(--v-r-card);
  padding: var(--v-s-5);
}

.v-dzialy__menu-karta .v-btn { width: 100%; }

.v-dzialy__menu-karta .v-dzialy__menu-grupa { margin-bottom: 0; }

.v-dzialy__menu-opis {
  margin: 0;
  font-size: 14px; /* pomiar z makiety */
  line-height: 1.5;
  color: var(--v-n-700); /* pomiar z makiety: #34425C */
}

/* Pasek przewija się w poziomie, więc rozwinięte menu musi mieć jak wyjść poza niego. */
.v-dzialy__in:has(details[open]) { overflow: visible; }

.v-dzialy__poz--teraz {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
  font-weight: 700;
}

/* Pasek „Twoje” przed działami na Starcie (makieta v80 „Start - Twoje zainteresowania”):
   chipy „Dla ciebie” i kategorii na miękkim tle (w makiecie `soft`), zaznaczony = granat;
   „Edytuj” z obwódką i ołówkiem; kreska 1 × 24 px oddziela je od działów. Wysokość i promień
   zostają paska działów, bo stoją z nim w jednym rzędzie. */
.v-dzialy__poz--twoje {
  background: var(--v-n-100);
  border-color: var(--v-n-100);
  color: var(--v-primary);
  font-weight: 700;
}

.v-dzialy__poz--twoje:hover {
  background: var(--v-n-200);
  border-color: var(--v-n-200);
}

.v-dzialy__poz--twoje.v-dzialy__poz--teraz,
.v-dzialy__poz--twoje.v-dzialy__poz--teraz:hover {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
}

.v-dzialy__poz--edytuj {
  background: transparent;
  border-color: var(--v-n-300);
  color: var(--v-primary);
  font-weight: 700;
}

.v-dzialy__ikona {
  flex: none;
  margin-left: -4px; /* makieta: ikona 18 px z −4 px */
}

.v-dzialy__kreska {
  flex: none;
  align-self: center;
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--v-n-300);
}

@media (max-width: 760px) {
  .v-dzialy__in { padding: var(--v-s-2) var(--v-s-4); }
}

/* Pasek przerwy technicznej (wlaczany z panelu, ekran A28). Ochra, bo to ostrzezenie,
   nie blad — serwis dziala dalej, tylko cos jest nie tak. */
.powloka__przerwa {
  padding: 10px var(--v-s-5);
  background: var(--v-secondary-soft);
  color: var(--v-warning-text);
  font: 600 13px/1.45 var(--v-font-body);
  text-align: center;
}

/* Pasek dzialow na telefonie: 42 px, nie 34 (pomiar w Prototypie Mobile 26.09).
   Na web zostaje 34, bo tam klika sie myszka; na telefonie ten sam chip jest celem
   dotyku i musi byc wiekszy — to nie roznica stylu, tylko trafialnosci. */
@media (max-width: 760px) {
  .v-dzialy__poz { height: 42px; }
}

/* Element sterowany przez Alpine nie miga przed startem skryptu. */
[x-cloak] { display: none !important; }


/* TELEFON: trzy paski nad trescia zjadaly 185 px z 844, czyli 22 % ekranu, zanim
   pojawila sie pierwsza rzecz (pomiar 29.09 po uwadze Huberta o marnowanym miejscu).
   Nie sa przyklejone, wiec znikaja przy przewijaniu — ale pierwsze wrazenie robi
   wlasnie ten ekran. Scieśniamy pasek obietnicy: na 390 px i tak lamie sie na dwie
   linie, wiec wysciolka 9 px z makiety liczy sie podwojnie. */
.v-obietnica__krotka { display: none; }

@media (max-width: 759px) {
  .v-obietnica { padding: 9px var(--v-s-3); }
  .v-obietnica__dluga { display: none; }
  .v-obietnica__krotka { display: inline; }
}


/* CELE DOTYKU NA TELEFONIE — audyt 30.09, druga tura.
   Plansza „Strona Glowna” mowi wprost: `chipH` to 44 px ponizej 760 px i 36 px wyzej.
   Mielismy 34-38 px wszedzie, wiec chipy filtrow, sortowania i obszarow roadmapy byly
   za male do trafienia palcem. Na web zostaje ciasniej, bo tam celuje sie myszka. */
@media (max-width: 759px) {
  .v-chip,
  .v-radio-chips__opcja,
  .v-ftog__pole,
  .rmap__obszar {
    min-height: 44px; /* makieta */
  }

  /* Podglad hasla, powroty i adres w stopce — pojedyncze przyciski i odnosniki,
     ktore stoja same, nie w srodku zdania. */
  .v-haslo__podglad,
  .rmap__wroc,
  .v-stopka__kontakt,
  .v-help-header__logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* Ostatnia partia celow dotyku (audyt 30.09): pigulki filtrow, przyciski glosowania
   na roadmapie i odnosniki w dolnym pasku stopki. Wszystkie stoja SAME, nie w srodku
   zdania, wiec powiekszenie ich niczego nie rozwala. */
@media (max-width: 759px) {
  .v-filtr__pigulka { min-height: 44px; }

  .rmap__glos,
  .rmap__karta .v-btn { min-height: 44px; }

  .v-stopka__dol a,
  .v-stopka__linki a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* Ostatnie cele dotyku (audyt 30.09): odnosniki w kolumnach stopki, „Ustawienia”
   ciasteczek i „Pobierz PDF” w regulaminie. Wszystkie stoja same w wierszu. */
@media (max-width: 759px) {
  .v-stopka__pozycje a,
  .v-stopka__pozycje .v-stopka__wkrotce,
  .v-cookies__ustawienia,
  .dok__druk {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* Odnosniki w stopce: plansza ma `footLinkH: 36px` i `footBarLinkH: 36px` na telefonie,
   a ja podnioslem je do 44 przy poprawianiu celow dotyku — przez to wiersze rozjechaly
   sie w pionie (uwaga Huberta 30.09). 36 px to nadal sensowny cel, a odstep wraca
   do planszy. */
@media (max-width: 759px) {
  .v-stopka__pozycje a,
  .v-stopka__pozycje .v-stopka__wkrotce,
  .v-stopka__dokumenty a {
    min-height: 36px; /* makieta */
  }
}


/* MEGA MENU DZIALOW NA TELEFONIE — go NIE MA (uwaga Huberta 30.09: „przez chwile
   widoczne, ze menu jest brzydkie i po chwili dopiero wskakuje jak trzeba”).
   Panel jest siatka pieciu kolumn liczona pod 1240 px; wcisniety w 390 px nakladal
   napisy na siebie. Na dotyku nie ma najechania, wiec tapniecie w chip otwieralo
   `<details>` z pudełka i dopiero skrypt przenosil dalej — stad migniecie.
   Teraz: panel schowany, a nazwa dzialu jest odnosnikiem (patrz `x-dept-bar`),
   wiec tapniecie od razu przenosi do dzialu, takze bez JavaScriptu.
   Strzalka schodzi razem z panelem — zapowiadala rozwijanie, ktorego tu nie ma. */
/* Glowa panelu i pelnoszerokie wyjscie naleza WYLACZNIE do telefonu. */
.v-dzialy__menu-glowa,
.v-dzialy__menu-wszystko { display: none; }

/* PANEL DZIALU NA TELEFONIE — wlasny uklad z projektu (uwaga Huberta 30.09).
   Wczesniej panel byl tu po prostu schowany, bo desktopowa siatka pieciu kolumn
   wcisnieta w 390 px nakladala napisy na siebie. Projekt rysuje go inaczej:
   nazwa dzialu ze zdaniem i krzyzykiem, pod nimi grupy jako POZIOME rzedy chipow,
   a na dole granatowe „Zobacz wszystko w {dzial}”.

   Na dotyku nie ma najechania, wiec panel otwiera TAPNIECIE W CHIP — dlatego
   nazwa dzialu przestaje tu byc klikalna (`pointer-events: none`) i klikniecie
   trafia w `<summary>`, ktore rozwija `<details>`. Do samego dzialu wchodzi sie
   przyciskiem na dole panelu, tak jak w projekcie. Bez JavaScriptu dziala
   tak samo — `<details>` rozwija sie z pudelka przegladarki. */
/* Nazwa dzialu: odnosnik na web, zwykly napis na telefonie (patrz `x-dept-bar`).
   Selektor przez rodzica, bo regula bazowa `.v-dzialy__nazwa { display: flex }` stoi
   NIZEJ w tym pliku i przy rownej wadze wygrywa — chip pokazywal wtedy nazwe dwa razy
   („Kobiety Kobiety”). Ta sama pulapka co w gotchy o kolejnosci regul. */
.v-dzialy__poz .v-dzialy__nazwa--telefon { display: none; }

@media (max-width: 759px) {
  .v-dzialy__poz .v-dzialy__nazwa--web { display: none; }
  .v-dzialy__poz .v-dzialy__nazwa--telefon { display: flex; }

  .v-dzialy__menu {
    max-height: 70svh;
    overflow-y: auto;
    border-bottom: 1px solid var(--v-n-200);
  }

  .v-dzialy__menu-in {
    display: flex;
    flex-direction: column;
    gap: var(--v-s-5);
    padding: var(--v-s-5) 18px var(--v-s-6); /* rynna jak w reszcie serwisu */
  }

  .v-dzialy__menu-glowa {
    display: flex;
    align-items: flex-start;
    gap: var(--v-s-4);
  }

  .v-dzialy__menu-glowa-tekst {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .v-dzialy__menu-glowa-nazwa {
    font: 600 20px/1.2 var(--v-font-display); /* makieta */
    letter-spacing: -.02em;
    color: var(--v-primary);
  }

  .v-dzialy__menu-glowa-opis {
    font: 400 13px/1.45 var(--v-font-body); /* makieta */
    color: var(--v-n-600);
  }

  .v-dzialy__menu-x {
    flex: none;
    width: 36px; /* makieta */
    height: 36px; /* makieta */
    border: 0;
    border-radius: 10px; /* makieta */
    background: var(--v-n-100);
    color: var(--v-n-600);
    font-size: 15px;
    cursor: pointer;
  }

  /* Grupa to nadtytul i POZIOMY rzad chipow, ktory przewija sie w sobie —
     zawijanie ich w kolumne robilo z panelu sciane na trzy ekrany. */
  .v-dzialy__menu-kolumna {
    display: block;
    min-width: 0;
  }

  .v-dzialy__menu-grupa {
    display: block;
    margin-bottom: var(--v-s-2);
  }

  .v-dzialy__menu-kolumna a {
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* cel dotyku */
    margin-right: var(--v-s-2);
    padding: 0 var(--v-s-4);
    border: 1px solid var(--v-n-200);
    border-radius: var(--v-r-btn);
    background: var(--v-n-0);
    white-space: nowrap;
  }

  .v-dzialy__menu-kolumna a:hover { text-decoration: none; }

  /* Rzad chipow przewijany palcem, bez paska przewijania na wierzchu. */
  .v-dzialy__menu-kolumna {
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .v-dzialy__menu-kolumna::-webkit-scrollbar { display: none; }

  /* Karta z prawej (nazwa, opis, przycisk) nalezy do web — na telefonie zastepuje
     ja glowa panelu i przycisk na dole. */
  .v-dzialy__menu-karta { display: none; }

  .v-dzialy__menu-wszystko {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px; /* makieta */
    border-radius: 12px; /* makieta */
    background: var(--v-primary);
    color: var(--v-n-0);
    font: 700 15px/1 var(--v-font-body); /* makieta */
    text-decoration: none;
  }
}

/* Nazwa dzialu w `<summary>` jest odnosnikiem, ale ma wygladac i DZIALAC jak caly
   chip: bez podkreslenia, w kolorze rodzica i na calej jego wysokosci. Bez
   rozciagniecia odnosnik mial 13 px wysokosci (audyt mobile), wiec palec trafial
   obok niego w `<summary>` — czyli otwieral panel zamiast przejsc do dzialu. */
.v-dzialy__nazwa {
  display: flex;
  align-items: center;
  align-self: stretch;
  color: inherit;
  text-decoration: none;
  font: inherit;
}

/* Na telefonie wysciolka schodzi z chipa NA NAPIS, zeby tapniecie w dowolne miejsce
   chipa przenosilo do dzialu, a nie tylko trafienie w litery.
   ⚠️ Komentarz stal tu wczesniej na „strzalki na telefonie nie ma” — a jest. Skutek:
   strzalka lezala POZA wysciolka napisu, jeden piksel od obwodki (zmierzone), czyli
   dokladnie to, co zglosil Hubert 05.10 („zlewa sie z prawa krawedzia”). Dlatego chip
   ma wlasna wysciolke TYLKO z prawej — po lewej trzyma ja napis. */
@media (max-width: 759px) {
  .v-dzialy__grupa > summary.v-dzialy__poz { padding: 0 12px 0 0; }
  .v-dzialy__nazwa { padding: 0 13px; /* makieta */ }
}


/* ===========================================================================
   TABLET — 760 do 1119 px. Zakres, ktorego nigdy nie bylo.

   Zrodlo: handoff PWA (`design_handoff_vistitio_pwa/README.md`, sekcja 2
   „Breakpointy" i sekcja 5 „Checklista odbioru"): jeden adres, trzy uklady,
   zero poziomego przewijania przy 390 / 834 / 1440 px.

   Co bylo nie tak: style telefonu koncza sie na 759 px, a uklad web zaklada
   kontener 1240 px. Miedzy nimi lezala dziura — przy 834 px strona jechala
   w bok o 234 px na KAZDYM ekranie, bo szukajka w naglowku ma stale 620 px,
   a mega menu ma kolumny o szerokosci tresci.

   UWAGA NA KOLEJNOSC ARKUSZY: reguly naglowka musza stac w
   `k-nawigacja-i-konto.css`, a reguly widokow w `s-*.css` — powloka wczytuje
   `app.css` PIERWSZY, wiec cokolwiek o naglowku napisane tutaj przegrywa
   z partia komponentow (ta sama gotcha co „wygrywa regula zdefiniowana
   POZNIEJ w dokumencie").
   =========================================================================== */

/* Kolumny siatki (grid) domyslnie maja `min-width: auto`, czyli nie zweza sie
   ponizej najdluzszego slowa. To pierwsza przyczyna wyciekania mega menu poza
   ekran — dotyczy kazdej szerokosci, nie tylko tabletu. */
.v-dzialy__menu-kolumna { min-width: 0; }

@media (min-width: 760px) and (max-width: 1119px) {
  /* Mega menu: cztery kolumny plus karta 220 px nie mieszcza sie. Karta
     schodzi do WLASNEGO wiersza na calej szerokosci — nic nie ginie,
     a „Zobacz wszystko" zostaje tam, gdzie go szukano. */
  .v-dzialy__menu-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v-dzialy__menu-karta { grid-column: 1 / -1; }
}