/* Vistitio — partia komponentów: nawigacja, tożsamość, rozmowa, konto.
   Źródło: „Vistitio Styleguide Wdrozenie.dc.html”, sekcje „Nawigacja”,
   „Tożsamość, ocena, rozmowa”, „Konto: weryfikacja, pliki, tryb wakacyjny,
   powiadomienia” oraz „Wejście do konta i zgody”. Zestaw ikon: „Vistitio System.dc.html”,
   sekcja 4.

   Wszystkie kolory przez tokeny z tokens.css. Hex w tym pliku to błąd, który odrzuca CI.
   Rozmiary i promienie przepisane z makiety co do piksela — token wchodzi tam, gdzie
   znaczy dokładnie to samo co wartość z makiety.

   Uwaga na tokeny typografii: --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. Poprawna forma:
   `font: 600 var(--v-t-label) var(--v-font-body);`. */

/* ---------- x-icon ---------- */
/* Źródło: Vistitio System.dc.html, sekcja 4. Siatka 24 px, linia 1,75, zakończenia
   i łączenia okrągłe. Kolor zawsze z `currentColor` — ikona bierze kolor rodzica. */

.v-icon { display: block; flex-shrink: 0; }

/* ---------- x-avatar ---------- */
/* Źródło: Styleguide, „Tożsamość, ocena, rozmowa” (48 px) i „Nawigacja” (36 px w nagłówku). */

.v-avatar {
  border-radius: 50%;
  /* Makieta rysuje tu o włos inną szarość, ale tokens.css nazywa --v-n-200 wprost
     „placeholder zdjęć” — trzymamy się systemu, nie artefaktu z planszy. */
  background: var(--v-n-200);
  color: var(--v-n-600);
  font-family: var(--v-font-display);
  font-weight: 600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}

.v-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Ze zdjeciem tlo jest BIALE, nie szare. Szare --v-n-200 jest podkladka pod inicjaly;
   pod zdjeciem z przezroczystoscia (logo w PNG, WEBP z kanalem alfa) przebija przez nie
   i cale zdjecie wyglada, jakby mialo nalozona ciemniejsza warstwe (uwaga Huberta 25.09). */
.v-avatar--zdjecie { background: var(--v-n-0); }

.v-avatar--md { width: 48px; height: 48px; font-size: 18px; }
.v-avatar--sm { width: 36px; height: 36px; font-size: 13px; }
.v-avatar--xs { width: 30px; height: 30px; font-size: 11px; font-weight: 700; } /* pomiar z karty oferty */
.v-avatar--xl { width: 72px; height: 72px; font-size: 28px; } /* pomiar z ekranu „Profil" */
.v-avatar--xxl { width: 96px; height: 96px; font-size: 34px; } /* pomiar z ekranu „Profil sprzedajacej" */

/* Ciemny wariant z karty oferty: --v-n-700 (#34425C, dokładnie ten kolor mierzy
   prototyp) i białe inicjały, nie szarość na szarości. */
.v-avatar--ciemny {
  background: var(--v-n-700);
  color: var(--v-n-0);
}

/* ---------- x-site-header ---------- */
/* Źródło: Styleguide, „Nawigacja” → „Nagłówek · web”. Kontener 1240 px wyśrodkowany,
   szukajka zawsze widoczna, „Wystaw rzecz” jako jedyna akcja główna.
   Makieta rysuje pasek jako kartę z obwódką (tak wygląda demo w styleguidzie); tutaj
   jest to pasek na pełną szerokość z kontenerem 1240 w środku — tak mówi podpis. */

/* Bez kreski pod spodem: w makiecie nagłówek i pasek działów to JEDEN biały blok,
   a linia jest dopiero pod działami. Kreska tutaj dokładała też 1 px wysokości,
   przez co cały pasek działów schodził o piksel niżej niż w projekcie. */
.v-header {
  background: var(--v-n-0);
}

.v-header__in {
  max-width: var(--v-w-page);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--v-s-4);
  padding: 12px 24px; /* pomiar z makiety: pasek ma 72 px wysokości, wyściółka 24 */
}

.v-header__marka {
  display: flex;
  align-items: center;
  gap: 10px; /* pomiar z makiety: znak 32 + odstęp 10 + wordmark 66 = 108 */
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

/* Pomiar z makiety: ZNAK 32 px (wcześniej mierzyłem przez pomyłkę lupkę w szukajce
   i wyszło 20), wordmark 24 px z interlinią 1,25 — cały blok logo ma 108x32. */
.v-header__znak { width: 32px; height: 32px; display: block; }

.v-header__nazwa {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 24px; /* pomiar z makiety */
  line-height: 1.25; /* makieta: napis ma 30 px wysokości, nie 38 */
  letter-spacing: -.04em;
}

/* Szukajka ma w prototypie 620 px i NIE rozciąga się na całą wolną szerokość:
   reszta miejsca jest pusta, a ikony i przyciski stoją przy prawej krawędzi. */
.v-header__szukaj { flex: none; width: 620px; max-width: 100%; min-width: 0; display: block; }

/* DŁUGA NAZWA KONTA (02.10): pasek nigdy nie wystaje. Prototyp daje szukajce `flex: 1`,
   `min-width: 220px`, `max-width: 620px` — czyli 620 px tylko wtedy, gdy jest miejsce.
   Z naszym sztywnym 620 px przy długim imieniu „Sprzedaj” wychodził 96 px poza ekran
   na 1280. Najpierw ustępuje szukajka (do 220 px), potem nazwa w przycisku konta
   ucina się wielokropkiem (pełna nazwa w `title` i `aria-label`). */
@media (min-width: 1120px) {
  /* `flex-shrink` 1000: szukajka ustępuje PIERWSZA (do 220 px), nazwa konta dopiero potem. */
  .v-header__szukaj { flex: 0 1000 620px; width: auto; min-width: 220px; }
}

/* Prawa grupa: własny odstęp 8 px (pomiar z makiety) i dosunięcie do prawej krawędzi. */
.v-header__akcje {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  margin-left: auto;
  min-width: 0;
}

/* Ikony i „Sprzedaj” nie ustępują miejsca; ustępuje wyłącznie nazwa konta. */
.v-header__akcje > * { flex-shrink: 0; }

/* Pomiar z makiety: 620x48, tło n-50, promień 12, obwódka 1 px n-200,
   wyściółka 14, odstęp 10 między lupką a tekstem. */
.v-header__pole-wrap {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  height: 48px;
  padding: 0 14px; /* makieta */
  border-radius: var(--v-r-input);
  background: var(--v-n-50);
  border: 1px solid var(--v-n-200);
}

.v-header__pole-wrap:focus-within { border-color: var(--v-primary); }

.v-header__lupka { flex: none; color: var(--v-n-600); }

.v-header__pole {
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--v-font-body);
  font-size: 15px; /* pomiar z prototypu */
  color: var(--v-n-800);
}

.v-header__pole::placeholder { color: var(--v-n-500); }
.v-header__pole:focus { outline: none; }

/* Akcje w nawigacji (pasek nagłówka i karta w mega menu): 44 px wysokości
   i 14 px pisma — pomiar z prototypu. */
.v-btn--naglowek,
.v-btn--nawigacja { height: 44px; padding: 0 18px; font-size: 14px; } /* 18 px: makieta */

/* Ikona w nagłówku (rozmowy): kwadrat 44 px z obwódką, tak jak w prototypie desktop
   na pasku zalogowanej. Licznik rysuje x-unread-count, tutaj jest tylko ramka. */
.v-header__ikona {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--v-r-input);
  border: 1.5px solid var(--v-n-100);
  background: var(--v-n-0);
  color: var(--v-primary);
  flex-shrink: 0;
}

.v-header__ikona:hover { border-color: var(--v-n-300); background: var(--v-n-50); }

/* Menu konta: przycisk z awatarem i imieniem. Pomiar z prototypu — wysokość 44,
   wyściółka 0 12 z lewej 4 (awatar dosunięty), obwódka 1,5 n-300, odstęp 8. */
.v-header__konto { position: relative; flex-shrink: 0; }
.v-header__akcje > .v-header__konto:not(.v-header__konto--gosc) { flex-shrink: 1; min-width: 0; }

/* `summary` zostaje w domyślnym układzie: własne `display` na tym elemencie
   przestaje chować zawartość `details`. Wygląd niesie `span` w środku. */
.v-header__konto-guzik { list-style: none; cursor: pointer; }
.v-header__konto-guzik::-webkit-details-marker { display: none; }

.v-header__konto-tresc {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  height: 44px;
  padding: 0 12px 0 4px; /* makieta */
  border-radius: var(--v-r-input);
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
}

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

.v-header__konto-imie {
  font: 600 13px/1 var(--v-font-body);
  color: var(--v-n-700);
  white-space: nowrap;
  /* Długa nazwa (konto firmy, długie imię) ucina się wielokropkiem. 160 px to ~20 znaków
     przy 13 px; interlinia 1,3, żeby `overflow: hidden` nie obcinał ogonków (ą, ę, j). */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.v-header__konto-tresc > :not(.v-header__konto-imie) { flex-shrink: 0; }

.v-header__konto-strzalka { font-size: 10px; color: var(--v-n-700); } /* makieta */

.v-header__menu {
  position: absolute;
  right: 0;
  top: 52px; /* makieta */
  width: 280px;
  background: var(--v-n-0);
  border-radius: var(--v-r-card);
  box-shadow: var(--v-shadow-sheet);
  padding: var(--v-s-2);
  display: flex;
  flex-direction: column;
  gap: 2px; /* makieta */
  z-index: var(--v-z-dropdown);
}

/* MENU KONTA W GRUPACH (handoff 66, README pkt 15). Wartości 1:1 z Prototypu Desktop:
   304 szerokości, wyściółka 8, promień 16, cień arkusza, wysokość najwyżej do dołu okna
   z przewijaniem — przy długiej liście i niskim oknie dół menu nie może uciec za ekran. */
.v-header__menu--konto {
  width: 304px; /* makieta */
  max-height: calc(100vh - 88px); /* makieta */
  overflow-y: auto;
  gap: 0; /* makieta */
}

.v-header__menu-szczyt {
  display: flex;
  align-items: center;
  gap: 12px; /* makieta */
  padding: 8px 10px 10px; /* makieta */
}

/* Awatar 40 px z inicjałami 15/700 w kolorze tekstu — tak rysuje go makieta w menu. */
.v-avatar.v-header__menu-awatar {
  width: 40px; /* makieta */
  height: 40px; /* makieta */
  font: 700 15px/1 var(--v-font-body); /* makieta */
  color: var(--v-n-800);
}

.v-header__menu-kto {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px; /* makieta */
}

.v-header__menu-wiersz {
  display: flex;
  align-items: flex-start;
  gap: 6px; /* makieta */
}

/* Długa nazwa (firma z GUS) ucina się po DWÓCH liniach, nie po jednej z wielokropkiem. */
.v-header__menu-imie {
  min-width: 0;
  font: 700 14px/1.3 var(--v-font-body); /* makieta */
  color: var(--v-n-800);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.v-badge.v-header__menu-pro {
  flex-shrink: 0;
  min-height: 20px; /* makieta */
  height: 20px; /* makieta */
  padding: 0 7px; /* makieta */
  border-radius: 6px; /* makieta */
  font-size: 10.5px; /* makieta */
}

.v-header__menu-nota { font: 400 12.5px var(--v-font-body); color: var(--v-n-600); } /* makieta */

/* „Zobacz, jak widzą cię inni” — przycisk drugiego rzędu pod szczytem (36, tło n-50). */
.v-header__menu-podglad {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* makieta */
  height: 36px; /* makieta */
  margin: 0 2px 4px; /* makieta */
  padding: 0 10px; /* makieta */
  border: 1.5px solid var(--v-n-100);
  border-radius: 10px; /* makieta */
  background: var(--v-n-50);
  font: 700 13px var(--v-font-body); /* makieta */
  color: var(--v-primary);
  text-decoration: none;
}

.v-header__menu-podglad:hover { border-color: var(--v-n-300); }
.v-header__menu-podglad .v-icon { flex-shrink: 0; }

.v-header__menu-linia {
  display: block;
  flex-shrink: 0;
  height: 1px;
  margin: 6px 4px; /* makieta */
  background: var(--v-n-100);
}

.v-header__menu-naglowek {
  padding: 10px 10px 4px; /* makieta */
  font: 700 11px var(--v-font-body); /* makieta */
  letter-spacing: .06em; /* makieta */
  text-transform: uppercase;
  color: var(--v-n-500);
}

.v-header__menu-poz {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px var(--v-s-3); /* makieta */
  border: 0;
  border-radius: var(--v-r-input);
  background: transparent;
  font: 600 13.5px/1.3 var(--v-font-body); /* makieta */
  color: var(--v-n-800);
  text-decoration: none;
  cursor: pointer;
}

.v-header__menu-poz:hover { background: var(--v-n-50); }
.v-header__menu-poz--wyjscie { color: var(--v-error-text); }

/* Pozycja menu konta: min. 40, ikona 18 + odstęp 10, tekst 14/600. Zawężone do menu konta,
   bo `v-header__menu-poz` niesie też „Pomoc i kontakt” w menu gościa na telefonie. */
.v-header__menu--konto .v-header__menu-poz {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px; /* makieta */
  min-height: 40px; /* makieta */
  padding: 0 10px; /* makieta */
  border-radius: 10px; /* makieta */
  font: 600 14px var(--v-font-body); /* makieta */
}

/* `hidden` przegrywa z `display: flex` — bez tej reguły „Zainstaluj aplikację” stało
   w menu zawsze, także tam, gdzie przeglądarka nie umie zainstalować i guzik nic nie robi. */
.v-header__menu--konto .v-header__menu-poz[hidden] { display: none; }

.v-header__menu-ikona { flex-shrink: 0; color: var(--v-n-600); }
.v-header__menu-podpis { flex: 1; min-width: 0; }
.v-header__menu-kwota { flex: none; font: 600 13px var(--v-font-display); color: var(--v-n-600); } /* makieta */
.v-header__menu-dopisek { flex: none; font: 600 12px var(--v-font-body); color: var(--v-n-600); } /* makieta */

.v-header__menu-formularz { display: block; margin: 0; }

.v-header__menu--konto .v-header__menu-poz--wyjscie .v-header__menu-ikona { color: currentColor; }
.v-header__menu--konto .v-header__menu-poz--wyjscie:hover { background: #FBEAE8; } /* makieta, TODO token: jaśniejszy od --v-error-soft */

/* Na telefonie menu otwiera hamburger — cel dotyku zostaje 44 px (audyt 30.09). */
@media (max-width: 759px) {
  .v-header__menu--konto .v-header__menu-poz { min-height: 44px; }
}

@media (max-width: 760px) {
  /* Na telefonie rozmowy ma dolny pasek — dwa liczniki na jednym ekranie to hałas. */
  .v-header__nazwa, .v-btn--naglowek, .v-header__ikona, .v-header__konto { display: none; }

  /* Szukajka bierze tyle, ile zostało po znaku marki. `max-width: 100%` tego nie
     załatwiał: sto procent liczy się od kontenera, a pole zaczyna się dopiero za
     logo — przez to pasek wystawał o szerokość znaku i cała strona jechała w bok. */
  .v-header__szukaj { flex: 1 1 auto; width: auto; }
}

/* ---------- x-bottom-nav ---------- */
/* Źródło: Styleguide, „Nawigacja” → „Dolny pasek · mobile”. Pięć pozycji na stałe,
   ikony 21 px stroke 1,8 (aktywna 1,9). Aktywną odróżnia kolor i grubsza waga podpisu,
   nie sam kolor. Każda pozycja minimum 52 px. */

.v-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: 14px;
  /* WYSOKOSC 74 px (handoff PWA, README sekcja 2: „dolny pasek 74 px +
     env(safe-area-inset-bottom)"). Bylo 68 — tyle wychodzilo z pomiaru
     prototypu i tyle sprawdzal test dymny. Nowszy handoff nadpisuje: te
     szesc pikseli to roznica miedzy paskiem strony a paskiem aplikacji,
     bo w aplikacji stoi on na samej krawedzi ekranu. */
  min-height: 74px; /* makieta */
  padding: 9px 4px 11px;
  /* Cień świeci W GÓRĘ, bo pasek stoi na dole ekranu. Token --v-shadow-bottom-nav
     dopisany do tokens.css 17.09, żeby nie było drugiej wartości w obiegu. */
  box-shadow: var(--v-shadow-bottom-nav);
}

.v-bottom-nav__poz {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px; /* makieta: podpis pozycji paska */
  padding-top: 6px;
  min-width: 0;
  color: var(--v-n-500);
  text-decoration: none;
}

.v-bottom-nav__poz--aktywna { color: var(--v-primary); }

.v-bottom-nav__podpis {
  font: 600 10.5px/1 var(--v-font-body);
  white-space: nowrap;
}

.v-bottom-nav__poz--aktywna .v-bottom-nav__podpis { font-weight: 700; }

/* ---------- x-seller-card ---------- */
/* Źródło: Styleguide, „Tożsamość, ocena, rozmowa” → „Sprzedająca z oceną”.
   Gwiazdki w ochrze tekstowej, zawsze z liczbą i liczbą ocen.
   Poniżej pięciu ocen zamiast gwiazdek idzie „Za mało ocen”. */

.v-seller {
  display: flex;
  gap: var(--v-s-3);
  align-items: center;
  background: var(--v-n-50);
  border-radius: 14px;
  padding: 14px var(--v-s-4);
}

.v-seller__tresc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.v-seller__nazwa { font: 700 14px/1.4 var(--v-font-body); }

.v-seller__ocena { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.v-seller__gwiazdki {
  font-size: 13px;
  line-height: 1;
  color: var(--v-secondary-text);
  letter-spacing: .06em;
}

.v-seller__gwiazdki i { font-style: normal; color: var(--v-n-300); }

.v-seller__srednia { font: 700 12.5px/1.4 var(--v-font-body); }

.v-seller__ile,
.v-seller__malo,
.v-seller__meta {
  font: 400 12px/1.4 var(--v-font-body);
  color: var(--v-n-600);
}

/* ---------- x-chat-bubble, x-chat-notice ---------- */
/* Źródło: Styleguide, „Tożsamość, ocena, rozmowa” → „Rozmowa”.
   Moje wiadomości granatem po prawej, cudze białe po lewej. Ostrzeżenie systemowe
   wstawiamy w wątek, wyśrodkowane. */

.v-chat {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  background: var(--v-n-50);
  border-radius: 14px;
  padding: 14px;
}

.v-chat-bubble {
  max-width: 78%;
  padding: 10px 13px; /* makieta: wiersz konta */
  font: 400 13.5px/1.5 var(--v-font-body);
}

.v-chat-bubble--cudza {
  align-self: flex-start;
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: 14px 14px 14px 4px;
  color: var(--v-n-800);
}

.v-chat-bubble--moja {
  align-self: flex-end;
  background: var(--v-primary);
  color: var(--v-n-0);
  border-radius: 14px 14px 4px 14px;
}

.v-chat-notice {
  align-self: center;
  max-width: 90%;
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
  border-radius: 9px;
  padding: 7px 11px;
  font: 600 11.5px/1.4 var(--v-font-body);
  text-align: center;
}

/* ---------- wiersz konta (x-verify-badge, x-copy-button, x-file-download) ---------- */
/* Źródło: Styleguide, „Konto: weryfikacja, pliki, tryb wakacyjny, powiadomienia”.
   Wartość po lewej, akcja albo plakietka po prawej, na tle n-50. */

.v-konto-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: var(--v-n-50);
  border-radius: var(--v-r-input);
  padding: 11px 13px; /* makieta: pastylka weryfikacji */
}

.v-konto-row--weryfikacja { padding: 12px 14px; }

.v-konto-row__wartosc { font: 400 13px/1.4 var(--v-font-body); }

/* Makieta daje kodowi tylko tło i rozmiar; bez paddingu i promienia tło wygląda
   jak usterka, więc dokładam 2px 7px i promień pastylki. */
.v-konto-row__kod {
  font-size: 12.5px;
  background: var(--v-n-100);
  border-radius: var(--v-r-badge);
  padding: 2px 7px;
}

.v-konto-row__plik { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v-konto-row__nazwa { font: 600 13px/1.4 var(--v-font-body); }
.v-konto-row__opis { font: 400 11.5px/1.4 var(--v-font-body); color: var(--v-n-600); }

/* Mała akcja 36 px z makiety. Styleguide („Dostępność i zachowanie”) wymaga jednak
   44 px dotyku, więc pole dotyku rozciąga pseudoelement — wygląd zostaje 1:1,
   a palec dostaje swoje 44 px. */
.v-akcja-mala {
  position: relative;
  height: 36px;
  padding: 0 var(--v-s-3);
  border-radius: 9px;
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 12.5px/1 var(--v-font-body);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}

.v-akcja-mala::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  bottom: -4px;
}

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

/* ---------- x-vacation-banner ---------- */
/* Źródło: Styleguide, „Konto…” → „Tryb wakacyjny”. Zawsze z datą powrotu. */

.v-vacation {
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
  border-radius: var(--v-r-input);
  padding: 12px 14px;
  font: 400 12.5px/1.5 var(--v-font-body);
}

/* ---------- x-unread-count ---------- */
/* Źródło: Styleguide, „Konto…” → „licznik nieprzeczytanych”.
   Licznik tylko na rozmowach i powiadomieniach. Powyżej dziewięciu pokazujemy „9+”. */

.v-unread {
  position: relative;
  display: inline-flex;
  color: var(--v-primary);
}

.v-unread__ile {
  position: absolute;
  top: -5px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--v-error);
  color: var(--v-n-0);
  font: 700 10px/1 var(--v-font-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--v-n-0);
}

/* Obwódka licznika udaje tło pod spodem — na jasnym tle sekcji bierze n-50. */
.v-unread--jasne .v-unread__ile { border-color: var(--v-n-50); }

/* ---------- x-password-input ---------- */
/* Źródło: Styleguide, „Wejście do konta i zgody” → „Hasło z podglądem”.
   Podgląd jako przycisk z podpisem, nie ikona oka. Siła hasła jako pasek z opisem.
   Minimum dziesięć znaków, bez wymagania klas znaków. */

.v-haslo__wrap { position: relative; display: block; }

.v-haslo__pole { padding-right: 84px; } /* makieta: ramka podglądu 84 px */

.v-haslo__podglad {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 36px;
  padding: 0 11px;
  border-radius: 9px;
  border: none;
  background: var(--v-n-50);
  color: var(--v-n-700);
  font: 600 12.5px/1 var(--v-font-body);
  cursor: pointer;
}

.v-haslo__paski { display: flex; gap: var(--v-s-1); margin-top: 6px; }

.v-haslo__pasek {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--v-n-200);
}

.v-haslo__pasek--slaby { background: var(--v-error); }
.v-haslo__pasek--sredni { background: var(--v-secondary); }
.v-haslo__pasek--mocny { background: var(--v-success); }

.v-haslo__opis {
  font: 400 12px/1.45 var(--v-font-body);
  color: var(--v-n-600);
  margin-top: 6px;
}

/* ---------- x-consent-list ---------- */
/* Źródło: Styleguide, „Wejście do konta i zgody” → „Zgody przy rejestracji”.
   Zgoda wymagana i dobrowolna wyglądają tak samo — różni je tylko podpis.
   Nigdy nie zaznaczamy nic z góry i nie łączymy dwóch zgód w jednym polu. */

/* Karta zgód jest BIAŁA z obwódką — tak rysuje ją makieta rejestracji. Szare tło
   (ze styleguide'u, gdzie kafel demonstracyjny stoi na bieli) zlewało się z kartą
   na ekranie wejścia do konta, bo ta karta sama jest biała. */
.v-zgody {
  display: flex;
  flex-direction: column;
  background: var(--v-n-0);
  border: 1px solid var(--v-n-200);
  border-radius: 14px; /* makieta */
  padding: 0 var(--v-s-4);
}

.v-zgoda {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  min-height: var(--v-hit-min);
  cursor: pointer;
}

/* Tekst wyłącznie dla czytnika ekranu. Ten sam zestaw reguł chowa pole wyboru zgody —
   pole musi zostać w drzewie (fokus, klawiatura, wysyłka formularza), tylko go nie widać. */
.v-tylko-czytnik,
.v-zgoda__pole {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.v-zgoda__box {
  width: 22px;
  height: 22px;
  border-radius: var(--v-r-badge);
  flex-shrink: 0;
  margin-top: 1px;
  border: 2px solid var(--v-n-300);
  background: var(--v-n-0);
  color: var(--v-n-0);
  display: grid;
  place-items: center;
  font: 700 13px/1 var(--v-font-body);
}

.v-zgoda__ptaszek { opacity: 0; }

.v-zgoda__pole:checked + .v-zgoda__box {
  border-color: transparent;
  background: var(--v-primary);
}

.v-zgoda__pole:checked + .v-zgoda__box .v-zgoda__ptaszek { opacity: 1; }

.v-zgoda__pole:focus-visible + .v-zgoda__box { outline: 2px solid var(--v-primary); outline-offset: 2px; }

/* Niezaznaczona zgoda wymagana po wysłaniu formularza. Prototyp daje tu tę samą
   obwódkę co przy polu tekstowym: 2px #B3372F. */
.v-zgoda--blad .v-zgoda__box { border-color: var(--v-error); }

.v-zgoda__tresc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v-zgoda__tytul { font: 600 13px/1.4 var(--v-font-body); color: var(--v-primary); }
.v-zgoda__opis { font: 400 11.5px/1.45 var(--v-font-body); color: var(--v-n-600); }

/* ---------- x-list-row ---------- */
/* Źródło: Prototyp Mobile, ekrany „Profil" i „Ustawienia" (biała karta z padding 4/16,
   wiersze 52 px, separator 1 px n-100, znak „›" w n-500) oraz Prototyp Desktop, kolumna
   ustawień. Kontener to x-card z klasą .v-lista — karta traci wtedy wewnętrzny odstęp
   w poziomie wierszy, bo separator ma iść przez całą jej szerokość. */

.v-card.v-lista {
  padding: var(--v-s-1) var(--v-s-4);
  display: flex;
  flex-direction: column;
}

.v-lista__poz {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  min-height: 52px;
  padding: 7px 0; /* makieta: wiersz 52 px przy dwóch liniach tekstu */
  border-bottom: 1px solid var(--v-n-100);
  color: var(--v-primary);
  text-decoration: none;
}

.v-lista__poz:last-child { border-bottom: none; }

a.v-lista__poz:hover { color: var(--v-n-700); }
a.v-lista__poz:focus-visible { outline: 2px solid var(--v-primary); outline-offset: 2px; }

.v-lista__tresc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.v-lista__etykieta { font: 600 15px/1.35 var(--v-font-body); }
.v-lista__dopisek { font-weight: 500; color: var(--v-n-500); }
.v-lista__nota { font: 400 var(--v-t-note) var(--v-font-body); color: var(--v-n-500); }

.v-lista__obok { flex-shrink: 0; display: flex; align-items: center; gap: var(--v-s-2); }
.v-lista__znak { flex-shrink: 0; color: var(--v-n-500); font-size: 18px; line-height: 1; }

/* Pozycja bez adresu: funkcji jeszcze nie ma. Wyszarzamy etykietę, żeby nie udawała
   odsyłacza, ale notę zostawiamy czytelną — to ona mówi, na co się czeka. */
.v-lista__poz--nieczynna .v-lista__etykieta { color: var(--v-n-500); font-weight: 500; }

/* ---------- x-site-footer ---------- */
/* Źródło: „Vistitio Strona Glowna.dc.html”, sekcja FOOTER. Granat na pełną szerokość,
   wnętrze w kontenerze strony: marka po lewej, trzy kolumny odnośników, na dole
   pasek z dokumentami i notą właściciela. */

/* Stopka jest zaprojektowana jako CIEMNA i taka zostaje w obu motywach —
   inaczej w ciemnym odwracalaby sie na jasna, a ochrowy adres kontaktowy
   spadalby do 1,8:1 (zmierzone). W jasnym motywie wyglada dokladnie jak dotad:
   `--v-granat-staly` to ten sam granat, `--v-na-granacie` ten sam przygaszony
   atrament co `--v-n-300`. */
.v-stopka {
  background: var(--v-granat-staly);
  color: var(--v-na-granacie); /* pomiar z makiety: tekst stopki jest przygaszony, nie biały */
}

.v-stopka__in {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-12) 24px var(--v-s-8);
  display: grid;
  /* Pomiar z makiety: kolumny zaczynają się na 124, 430, 736 i 1042 — czyli co 306 px,
     a ostatnia dobiega do prawej krawędzi kontenera. */
  grid-template-columns: repeat(3, 306px) minmax(0, 1fr);
}

.v-stopka__marka {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  max-width: 260px;
}

.v-stopka__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v-stopka__znak { width: 26px; height: 26px; display: block; color: var(--v-n-0); }

.v-stopka__nazwa {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.04em;
}

.v-stopka__zdanie {
  margin: 0;
  font-size: 13px; /* pomiar z makiety */
  line-height: 1.5;
  color: var(--v-n-300);
}

.v-stopka__kontakt {
  font-size: 14px;
  color: var(--v-secondary);
  text-decoration: none;
}

.v-stopka__kontakt:hover { text-decoration: underline; }

/* Facebook i Google Play pod adresem kontaktowym (05.10, poza makietą): wysokość 40 jak plakietka. */
.v-stopka__media { display: flex; align-items: center; gap: 12px; margin-top: 4px; }

.v-stopka__fb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  color: var(--v-n-0);
}

.v-stopka__fb:hover { background: rgba(255, 255, 255, .08); }

/* Oficjalny plik 646×250: przezroczysty margines TYLKO u góry i na dole (29 px z 250), z boków
   zero (zmierzone 10.10). 52 px pliku = plakietka 40 px, równo z ikoną Facebooka; ujemny margines
   wyłącznie pionowy — boczny (było −9 px) zjadał odstęp i plakietka kleiła się do ikony. */
.v-stopka__play img { display: block; height: 52px; width: auto; margin: -6px 0; }

.v-stopka__kolumna {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.v-stopka__grupa {
  font: 700 12px/1.2 var(--v-font-body); /* pomiar z makiety */
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-n-500); /* pomiar z makiety: #7D8BA1 */
  margin-bottom: var(--v-s-1);
}

.v-stopka__kolumna a,
.v-stopka__dokumenty a {
  font-size: 14px;
  color: var(--v-n-300); /* pomiar z makiety: odnośniki stopki są przygaszone */
  text-decoration: none;
}

.v-stopka__kolumna a:hover,
.v-stopka__dokumenty a:hover { text-decoration: underline; }

/* Odnośnik do strony, na której się jest (makieta v82 „Dla firm”: „Konto firmowe” ochrą, pogrubione). */
.v-stopka__kolumna a[aria-current="page"] { color: var(--v-secondary-dark); font-weight: 700; }

/* Pozycja bez własnego ekranu: wygląda jak reszta (makieta ma tu same odsyłacze),
   ale nie jest klikalna — ekrany dochodzą po kolei. */
.v-stopka__wkrotce {
  font-size: 14px;
  color: var(--v-n-300);
  cursor: default;
}

.v-stopka__dol {
  border-top: 1px solid var(--v-n-700);
}

.v-stopka__dol-in {
  max-width: var(--v-w-page);
  margin: 0 auto;
  padding: var(--v-s-5) 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-4);
  flex-wrap: wrap;
  /* W makiecie nota o właścicielu stoi po LEWEJ, a dokumenty po prawej. */
  flex-direction: row-reverse;
}

.v-stopka__dokumenty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-5);
}

.v-stopka__nota {
  font-size: 13px; /* pomiar z makiety */
  color: var(--v-na-granacie-szept);
}

@media (max-width: 760px) {
  .v-stopka__in {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--v-s-8);
    padding: var(--v-s-8) var(--v-s-4) var(--v-s-6);
  }

  .v-stopka__dol-in { padding: var(--v-s-4); }
}


/* ---------- x-cookie-banner ---------- */
/* Pomiar z makiety: karta przypięta do dołu z marginesem 24, szerokość do krawędzi,
   promień 20, wyściółka 24/28, cień rgba(20,28,46,.18). */

.v-cookies {
  position: fixed;
  left: 24px; /* makieta */
  right: 24px; /* makieta */
  bottom: 24px; /* makieta */
  z-index: var(--v-z-toast, 60);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-8);
  flex-wrap: wrap;
  padding: 24px 28px; /* makieta */
  background: var(--v-n-0);
  border-radius: 20px; /* makieta */
  box-shadow: 0 12px 40px rgba(20, 28, 46, .18); /* makieta */
}

.v-cookies__tresc { max-width: 780px; }

.v-cookies__tytul {
  margin: 0 0 var(--v-s-2);
  font: 600 17px/1.3 var(--v-font-display);
}

.v-cookies__opis {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--v-n-700);
}

.v-cookies__akcje {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  flex-wrap: wrap;
}

/* Każda akcja siedzi we własnym formularzu — ma zniknąć jako pudełko. */
.v-cookies__akcje form { display: contents; }

@media (max-width: 760px) {
  .v-cookies {
    left: var(--v-s-3);
    right: var(--v-s-3);
    bottom: calc(76px + var(--v-s-3)); /* nad dolnym paskiem nawigacji */
    padding: var(--v-s-5);
    gap: var(--v-s-4);
  }

  .v-cookies__akcje { width: 100%; }
}

/* BANER CIASTECZEK NA TELEFONIE — uklad z projektu (uwaga Huberta 30.09).
   Trzy akcje jedna pod druga, na pelna szerokosc, w kolejnosci wagi: najpierw
   zgoda na wszystko (granat), pod nia „Tylko niezbedne” (obwodka), a na koncu
   „Ustawienia” jako zwykly napis na srodku. W znaczniku kolejnosc jest odwrotna
   — i ma taka zostac, bo na web „Ustawienia” stoja PIERWSZE od lewej; na telefonie
   przestawia je `order`, wiec jedna tresc obsluguje oba uklady. */
@media (max-width: 759px) {
  .v-cookies__opis--dluga { display: none; }

  .v-cookies__akcje {
    flex-direction: column;
    align-items: stretch;
    gap: var(--v-s-3);
  }

  /* `display: contents` na formularzu sprawia, ze `order` dziala na SAMYCH
     przyciskach — formularz nie tworzy wlasnego pudelka w ukladzie. */
  .v-cookies__akcje .v-btn { width: 100%; }

  .v-cookies__akcje form:last-of-type .v-btn { order: 1; }
  .v-cookies__akcje form:first-of-type .v-btn { order: 2; }

  .v-cookies__ustawienia {
    order: 3;
    justify-content: center;
    text-align: center;
  }
}

/* Krotkie brzmienie jest WYLACZNIE telefonowe — na web zostaje pelne. */
@media (min-width: 760px) {
  .v-cookies__opis--krotka { display: none; }
}

/* ---------- okno „Ustawienia ciasteczek" ---------- */
/* Makieta: plansza ustawień w „Vistitio Landing.dc.html” (626 px szerokości).
   Otwiera je kotwica `#ustawienia-ciasteczek` i reguła `:target`, więc działa
   bez JavaScriptu — nie ma tu ani linijki skryptu. */

.v-ck-okno {
  display: none;
  position: fixed;
  inset: 0;
  z-index: calc(var(--v-z-toast) + 1);
  /* Pomiar z makiety: okno stoi PRZY DOLE (24 px od krawędzi), wyśrodkowane
     w poziomie — nie na środku ekranu. */
  align-items: flex-end;
  justify-content: center;
  padding: 24px; /* makieta */
}

.v-ck-okno:target { display: flex; }

.v-ck-okno__tlo {
  position: absolute;
  inset: 0;
  background: rgba(20, 28, 46, .45);
}

.v-ck-okno__karta {
  position: relative;
  width: 100%;
  max-width: 680px; /* pomiar z makiety */
  max-height: calc(100vh - var(--v-s-12));
  overflow-y: auto;
  background: var(--v-n-0);
  border-radius: 20px; /* makieta */
  padding: var(--v-s-6);
  box-shadow: 0 20px 60px rgba(20, 28, 46, .28);
}

.v-ck-okno__gora {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v-s-4);
}

.v-ck-okno__tytul {
  margin: 0;
  font: 600 21px/1.25 var(--v-font-display);
}

.v-ck-okno__zamknij {
  flex: none;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v-n-50);
  color: var(--v-n-700);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

.v-ck-okno__zamknij:hover { background: var(--v-n-100); }

.v-ck-okno__lead {
  margin: var(--v-s-2) 0 var(--v-s-5);
  font-size: 14px;
  line-height: 1.5;
  color: var(--v-n-600);
}

.v-ck-okno__formularz {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.v-ck-kategoria {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v-s-4);
  padding: var(--v-s-4);
  border: 1px solid var(--v-n-200);
  border-radius: var(--v-r-input);
}

/* Niezbędne: szare tło, bo tego wyboru nie ma — jest stan. */
.v-ck-kategoria--stala {
  background: var(--v-n-50);
  border-color: var(--v-n-100);
}

.v-ck-kategoria__tresc { min-width: 0; }

.v-ck-kategoria__nazwa { font-weight: 700; font-size: 15px; }

.v-ck-kategoria__opis {
  margin: var(--v-s-1) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v-n-700);
}

.v-ck-kategoria__termin {
  margin: var(--v-s-2) 0 0;
  font-size: 12px;
  color: var(--v-n-500);
}

/* Pstryczek „zawsze włączone": wygląda jak włączony przełącznik, ale nie jest
   polem — niezbędnych nie da się wyłączyć, więc nie udajemy wyboru. */
.v-ck-kategoria__stale {
  flex: none;
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  /* Makieta: niezbędne są włączone, więc pełny granat. Że nie da się ich ruszyć,
     widać po szarym tle karty i po zdaniu „Zawsze włączone", nie po wyblakłym kolorze. */
  background: var(--v-primary);
}

.v-ck-kategoria__stale::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 22px; /* makieta: ta sama gałka co w x-toggle */
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--v-n-0);
}

.v-ck-okno__nota {
  margin: var(--v-s-2) 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--v-n-600);
}

.v-ck-okno__akcje {
  display: flex;
  justify-content: flex-end;
  gap: var(--v-s-3);
  margin-top: var(--v-s-3);
}

/* Znaczek ciasteczka po podjęciu decyzji — pomiar z makiety: 52 px, lewy dolny róg,
   24 px od krawędzi, obwódka 1,5 px, cień 0 8px 24px. */
.v-ck-znaczek {
  position: fixed;
  left: 24px; /* makieta */
  bottom: 24px; /* makieta */
  z-index: 39; /* makieta */
  width: 52px; /* makieta */
  height: 52px; /* makieta */
  border-radius: 50%;
  background: var(--v-n-0);
  border: 1.5px solid var(--v-n-200);
  box-shadow: 0 8px 24px rgba(20, 28, 46, .14); /* makieta */
  color: var(--v-primary);
  display: grid;
  place-items: center;
  transition: border-color var(--v-dur-fast), transform var(--v-dur-fast);
}

.v-ck-znaczek:hover {
  border-color: var(--v-primary);
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  /* Nad dolnym paskiem nawigacji. */
  /* Chip ciasteczek i strzałka do góry stoją na telefonie NA JEDNEJ WYSOKOŚCI, nad dolnym
     paskiem (68 px + 12 px odstępu). Środki mają się pokrywać, a kółka różnią się o 6 px,
     więc odsunięcia od dołu różnią się o 3 px — inaczej jedno wisi wyżej od drugiego. */
  .v-ck-znaczek { bottom: 80px; /* makieta */ left: var(--v-s-3); }
}

/* „Ustawienia" w pasku to zwykły tekst, bez podkreślenia — tak rysuje to makieta. */
.v-cookies__ustawienia {
  color: var(--v-n-700);
  font-size: 15px;
  text-decoration: none;
  padding: 0 var(--v-s-2);
}

.v-cookies__ustawienia:hover { color: var(--v-primary); text-decoration: underline; }

@media (max-width: 760px) {
  .v-ck-okno__karta { padding: var(--v-s-5); }
  .v-ck-okno__akcje { flex-direction: column-reverse; }
  .v-ck-okno__akcje .v-btn { width: 100%; }
}

/* ---------- x-scroll-top ---------- */
/* Pomiar 1:1 z makiety (element `.vtop` za stopką): koło 46 px, obwódka 1 px n-200,
   białe tło 94 % z rozmyciem, cień 0 6px 20px rgba(20,28,46,.14), strzałka 19 px.
   Pasek jest sticky o zerowej wysokości, więc nie zabiera miejsca w układzie. */

.v-na-gore__pas {
  position: sticky;
  bottom: 0;
  height: 0;
  z-index: 35; /* makieta */
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.v-na-gore {
  position: relative;
  bottom: 78px; /* makieta */
  margin-right: 20px; /* makieta */
  width: 46px; /* makieta */
  height: 46px; /* makieta */
  border-radius: 50%;
  border: 1px solid var(--v-n-200);
  background: rgba(255, 255, 255, .94); /* makieta */
  backdrop-filter: blur(8px); /* makieta */
  box-shadow: 0 6px 20px rgba(20, 28, 46, .14); /* makieta */
  color: var(--v-primary);
  cursor: pointer;
  display: grid;
  place-items: center;
  pointer-events: auto;
  transition: background var(--v-dur-fast), border-color var(--v-dur-fast);
}

.v-na-gore:hover {
  background: var(--v-n-100);
  border-color: var(--v-n-300);
}

@media (max-width: 760px) {
  /* Nad dolnym paskiem nawigacji, żeby go nie zasłaniał. */
  /* Na telefonie strzałka jest PRZYPIĘTA DO OKNA, nie do przewijanego pasa: pas jest
     `sticky` i złożenie go z przesunięciem `relative` dawało odsunięcie inne niż
     zadeklarowane (zmierzone 37 px od dołu przy wpisanych 83) — strzałka wchodziła na
     dolny pasek. Przy `fixed` liczba znaczy to, co mówi, i da się ją zgrać z chipem
     ciasteczek. */
  .v-na-gore {
    position: fixed;
    right: var(--v-s-3);
    bottom: 83px; /* makieta */
    margin-right: 0;
  }
}


/* ==========================================================================
   x-tabs — przełączanie widoku listy (Prototyp, ekran „Moje oferty”).
   Dwa warianty: `pastylki` zmieniają TEMAT listy, `podkreslane` filtrują w środku.
   ========================================================================== */

.v-tabs {
  display: flex;
  align-items: center;
  min-width: 0;
}

.v-tabs__poz {
  display: inline-flex;
  align-items: center;
  gap: var(--v-s-1);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

/* Licznik przy nazwie — makieta dokleja go do podpisu, nie stawia w pastylce. */
.v-tabs__licznik { font-variant-numeric: tabular-nums; }

/* --- wariant `podkreslane`: filtr wewnątrz tematu --- */

.v-tabs--podkreslane {
  gap: var(--v-s-1); /* makieta */
  border-bottom: 1px solid var(--v-n-200);
  flex-wrap: wrap;
}

.v-tabs--podkreslane .v-tabs__poz {
  height: 44px; /* makieta */
  padding: 0 var(--v-s-4); /* makieta */
  border-bottom: 2px solid transparent; /* makieta */
  margin-bottom: -1px; /* makieta: zakładka siada NA kresce pasa */
  font: 600 14px/1 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

.v-tabs--podkreslane .v-tabs__poz:hover { color: var(--v-primary); }

.v-tabs--podkreslane .v-tabs__poz--teraz {
  color: var(--v-primary);
  border-bottom-color: var(--v-primary);
}

/* --- wariant `pastylki`: zmiana tematu listy --- */

.v-tabs--pastylki {
  gap: var(--v-s-2); /* makieta */
  flex-wrap: wrap;
}

.v-tabs--pastylki .v-tabs__poz {
  height: 40px; /* makieta */
  padding: 0 var(--v-s-4); /* makieta */
  border: 1.5px solid var(--v-n-300); /* makieta */
  border-radius: 11px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 700 14px/1 var(--v-font-body); /* makieta */
}

/* Podswietlenie TYLKO pastylki nieaktywnej. Bez `:not(...)` kursor na pastylce
   aktywnej dawal biale tlo pod bialym napisem — pseudoklasa ma wyzsza wage niz
   sama klasa `--teraz`, wiec wygrywala z granatem (usterka zgloszona 07.10). */
.v-tabs--pastylki .v-tabs__poz:not(.v-tabs__poz--teraz):hover { background: var(--v-n-50); }

.v-tabs--pastylki .v-tabs__poz--teraz {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
}

/* Aktywna pastylka tez ma reagowac na kursor — ciemniej, nie jasniej. */
.v-tabs--pastylki .v-tabs__poz--teraz:hover { background: var(--v-primary-hover); }

/* Zdanie po prawej stronie pasa (licznik rezerwacji). Na wąskim ekranie schodzi
   pod zakładki, bo pas i tak się zawija. */
.v-tabs__obok {
  margin-left: auto;
  align-self: center;
  padding: 0 var(--v-s-1) 6px; /* makieta */
  font: 400 12.5px/1.4 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

@media (max-width: 560px) {
  .v-tabs__obok { margin-left: 0; padding-bottom: var(--v-s-2); }
}


/* ==========================================================================
   x-tip — dymek nad przyciskiem ikonowym (Prototyp Desktop, handoff 23,
   wiersz „Moje oferty”). Bez JavaScriptu: pokazuje go hover ALBO fokus w środku.
   ========================================================================== */

.v-tip { position: relative; display: inline-flex; }

.v-tip__dymek {
  position: absolute;
  bottom: calc(100% + var(--v-s-2)); /* makieta */
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 5px 9px; /* makieta */
  border-radius: 7px; /* makieta */
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 600 11.5px/1.3 var(--v-font-body); /* makieta */
  white-space: nowrap;
  pointer-events: none;
  z-index: var(--v-z-header);
}

.v-tip:hover .v-tip__dymek,
.v-tip:focus-within .v-tip__dymek { display: block; }

/* Przycisk ikonowy w wierszu listy: kwadrat 36 px z samą ikoną. Wariant `sm` x-buttona
   ma 40 px i wyściółkę na napis, więc rozmiar ustawia tu układ, a nie komponent. */
.v-btn--ikona {
  width: 36px; /* makieta */
  height: 36px; /* makieta */
  min-width: 0;
  padding: 0;
  border-radius: 9px; /* makieta */
  flex: none;
}

/* Trzy odmiany z makiety: podgląd ma ciemną obwódkę (akcja pierwsza w rzędzie),
   promowanie pełną ochrę (rzecz płatna), rezerwacja zmienia się, gdy JEST włączona. */
.v-btn--ikona-glowna { border-color: var(--v-primary); }

.v-btn--ikona-rezerwacja {
  background: var(--v-secondary-soft);
  border-color: var(--v-secondary);
  color: var(--v-warning-text);
}

/* ---------- Podpowiedzi pod polem w naglowku ---------- */
/* Poza makieta (prosba Huberta). Lista pojawia sie tylko z JavaScriptem; bez niego pole
   dziala jak dotad, czyli wysyla formularz. */

.v-header__szukaj { position: relative; }

.v-header__podpowiedzi {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: var(--v-s-2);
  border-radius: var(--v-r-card);
  background: var(--v-n-0);
  border: 1px solid var(--v-n-200);
  box-shadow: 0 12px 28px rgba(20, 28, 46, .14); /* makieta */
  max-height: 60vh;
  overflow-y: auto;
}

/* Wiersz podpowiedzi 1:1 z projektu: miniatura 44 px, kolumna z tytulem i podpisem,
   cena przy prawej krawedzi. Wysokosc wiersza bierze sie z miniatury, wiec kazdy
   ma taka sama — takze ten bez zdjecia i bez marki. */
.v-header__podpowiedz {
  display: flex;
  gap: var(--v-s-3);
  align-items: center;
  padding: var(--v-s-2) 10px;
  border-radius: var(--v-r-btn);
  font: 400 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  text-decoration: none;
}

.v-header__podpowiedz:hover,
.v-header__podpowiedz:focus-visible,
.v-header__podpowiedz--wybrana {
  background: var(--v-n-50);
}

.v-header__podpowiedz-foto {
  width: 44px; /* makieta */
  height: 44px; /* makieta */
  flex: none;
  overflow: hidden;
  border-radius: 10px; /* makieta */
  background: var(--v-n-200);
}

.v-header__podpowiedz-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.v-header__podpowiedz-tresc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px; /* makieta */
}

.v-header__podpowiedz-tytul {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v-header__podpowiedz-podpis {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cena jest POGRUBIONA i stoi przy prawej krawedzi — w projekcie to jedyna rzecz
   w wierszu, ktora wybija sie wagą, bo po niej wybiera sie spojrzeniem. */
.v-header__podpowiedz-cena {
  flex: none;
  font: 700 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  white-space: nowrap;
}

/* Wyjscie do pelnych wynikow: szary pasek na dole listy, oddzielony kreska.
   Nie jest podpowiedzia, wiec nie ma stanu „zaznaczona” ze strzalek. */
.v-header__podpowiedz-wszystkie {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: var(--v-s-2) calc(var(--v-s-2) * -1) calc(var(--v-s-2) * -1);
  padding: 0 18px;
  border-top: 1px solid var(--v-n-100);
  border-radius: 0 0 var(--v-r-card) var(--v-r-card);
  background: var(--v-n-50);
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  text-decoration: none;
}

.v-header__podpowiedz-wszystkie:hover { background: var(--v-n-100); }

/* Odznaka „Zweryfikowana” w karcie sprzedajacej: stoi w linii z imieniem i nie rozpycha
   wiersza, bo karta bywa w waskiej kolumnie oferty. */
.v-seller__nazwa {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  flex-wrap: wrap;
}

.v-seller__plakietka { flex: none; }

/* Plakietka „N nowych” przy pozycji menu konta (makieta: zielone 11/700 na jasnej zieleni).
   Pozycja menu staje sie wtedy wierszem z napisem po lewej i plakietka po prawej. */
.v-header__menu-poz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-2);
}

.v-header__menu-nowe {
  flex: none;
  border-radius: 6px; /* makieta */
  padding: 2px 7px; /* makieta */
  background: var(--v-success-soft);
  font: 700 11px/1.4 var(--v-font-body);
  color: var(--v-success-text);
}



/* STOPKA ZWIJANA NA TELEFONIE (uwaga Huberta 29.09). Kolumny sa teraz `<details>`:
   na telefonie zwiniete, na web rozwiniete na stale. */
.v-stopka__pozycje { display: flex; flex-direction: column; gap: var(--v-s-2); }

.v-stopka__kolumna > summary.v-stopka__grupa {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-3);
  min-height: 48px; /* cel dotyku */
}

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

/* Strzalka rysowana po naszej stronie, zeby obracala sie po rozwinieciu. */
.v-stopka__kolumna > summary.v-stopka__grupa::after {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .16s ease;
  opacity: .7;
}

.v-stopka__kolumna[open] > summary.v-stopka__grupa::after { transform: rotate(-135deg); }

@media (max-width: 759px) {
  /* Kreska pod kazda kolumna — inaczej zwiniete naglowki zlewaja sie w liste. */
  .v-stopka__kolumna { border-bottom: 1px solid rgba(233, 237, 242, .14); }
  .v-stopka__kolumna > .v-stopka__pozycje { padding-bottom: var(--v-s-4); }
}

@media (min-width: 760px) {
  /* Na web zawsze rozwiniete: nadpisujemy regule przegladarki, ktora chowa tresc
     zamknietego `<details>`. Naglowek przestaje byc klikalny, zeby nie dalo sie
     zwinac czegos, co ma tam stac otwarte. */
  .v-stopka__kolumna > .v-stopka__pozycje { display: flex; }
  .v-stopka__kolumna > summary.v-stopka__grupa { pointer-events: none; min-height: 0; }
  .v-stopka__kolumna > summary.v-stopka__grupa::after { display: none; }

  /* REGRESJA Z PRZEGLADARKI, nie z naszego kodu (zgloszona 30.09: „stopka na desktop
     — co tu sie zadzialo”, kolumny puste). Chrome chowal kiedys tresc zamknietego
     `<details>` przez `display: none` na dzieciach i regula wyzej to przebijala.
     Od Chrome 131 tresc siedzi w `::details-content` i jest chowana przez
     `content-visibility: hidden` — czego `display` na dziecku nie rusza w ogole.
     Element dalej sie ukladal (mierzylismy 144 px), tylko nie byl malowany, wiec
     w kolumnach zostaly same naglowki. Starsze silniki tej reguly nie znaja
     i dzialaja dalej na regule wyzej. */
  .v-stopka__kolumna::details-content {
    content-visibility: visible;
    block-size: auto;
  }
}


/* Na web hamburger nie istnieje — tam uchwytem jest awatar z imieniem.
   Regula MUSI stac przed media query: dopisana po nim nadpisywala ja przy rownej
   specyficznosci i hamburger mial 0x0 (zlapane pomiarem 29.09, drugi raz ta sama
   pulapka co z sercem na zdjeciu). */
.v-header__burger { display: none; }

/* NAGLOWEK NA TELEFONIE 1:1 Z PLANSZA (uwaga Huberta 29.09, zrzut projektu).
   Uklad mobilny to: logo z napisem, a po prawej TRZY okragle ikony — pomoc, lupka
   i menu. Pola szukania w pasku NIE MA; makieta otwiera je na pelnym ekranie,
   u nas lupka prowadzi na `/szukaj`, czyli ten sam ekran bez JavaScriptu. */

/* Lupka istnieje tylko na telefonie — na web jest pole. */
.v-header__ikona--telefon { display: none; }

@media (max-width: 759px) {
  .v-header__ikona--telefon { display: inline-flex; }

  /* Pole szukania schodzi z paska: zabieralo 48 px wysokosci i cala szerokosc
     miedzy logo a ikonami, przez co logo zostawalo samym sygnetem. */
  .v-header__szukaj { display: none; }

  /* Wordmark wraca obok sygnetu — w projekcie napis „vistitio” jest widoczny. */
  .v-header__nazwa { display: inline; }

  /* Ikony ida na prawa krawedz, jak w planszy. */
  .v-header__akcje { margin-left: auto; }

  /* Z ikon zostaja TRZY: pomoc, lupka i menu. Serce, rozmowy i dzwonek niesie
     dolny pasek — dwa liczniki na jednym ekranie to halas (regula sprzed 29.09). */
  .v-header__ikona--pomoc { display: inline-flex; }
  .v-header__konto { display: block; }

  /* Uchwyt menu to hamburger, nie awatar z imieniem. */
  .v-header__konto-tresc { display: none; }

  .v-header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--v-primary);
  }
}



/* STOPKA NA TELEFONIE — ODSTEPY 1:1 Z PLANSZA (uwaga Huberta 29.09: „zobacz ile jest
   jeszcze pustego miejsca”). Wartosci wprost ze zmiennych planszy:
   footPad 26px 0 0, innerPadX 0 18px, footGridGap 2px, footBrandGap 8px,
   footBrandPad 8px, footColGap 6px, footColPad 6px, footHeadH 44px.
   Mielismy gap 32 px miedzy zwinietymi sekcjami — stad puste pasy na zrzucie. */
@media (max-width: 759px) {
  .v-stopka__in {
    gap: 2px; /* makieta */
    padding: 26px 18px 0; /* makieta */
  }

  .v-stopka__marka { gap: 8px; /* makieta */ padding-bottom: 8px; /* makieta */ }

  .v-stopka__kolumna > summary.v-stopka__grupa { min-height: 44px; /* makieta */ }

  .v-stopka__pozycje { gap: 6px; /* makieta */ }

  .v-stopka__kolumna > .v-stopka__pozycje { padding-bottom: 6px; /* makieta */ }

  /* Kreska miedzy sekcjami jest z planszy (#34425C = --v-n-700), nie przygaszona. */
  .v-stopka__kolumna { border-bottom: 1px solid var(--v-n-700); }
}


/* Ikony naglowka na telefonie 1:1 z planszy (uwaga Huberta 29.09): RAMKE ma tylko
   pytajnik. Lupka i hamburger stoja bez obwodki i bez tla — inaczej pasek wyglada
   jak rzad guzikow. Menu goscia pokazuje sie tam, gdzie zalogowana ma menu konta. */
.v-header__konto--gosc { display: none; }

@media (max-width: 759px) {
  .v-header__konto--gosc { display: block; }

  .v-header__ikona--telefon,
  .v-header__konto--gosc .v-header__konto-guzik {
    border: none;
    background: transparent;
    box-shadow: none;
  }

  /* Menu goscia otwiera sie pod hamburgerem, przy prawej krawedzi. */
  .v-header__konto--gosc .v-header__menu { right: 0; left: auto; }
}


/* HANDOFF 32: „Wystaw” w dolnym pasku to AKCJA, nie zakladka. Ochrowy kwadrat
   52 px wyniesiony nad pasek, z cieniem — 1:1 z Prototypem Mobile (`t.isAction`).
   Podpis zostaje granatowy i grubszy niz przy zakladkach, bo to jedyna czynnosc
   w tym rzedzie. */
.v-bottom-nav__poz--akcja {
  position: relative;
  justify-content: flex-end;
  /* Podpis musi zaczynac sie PONIZEJ krazka: przy 10 px nachodzil na niego o 2 px
     (zmierzone 30.09 — krazek konczyl sie na 817, podpis zaczynal na 815). */
  padding-bottom: 4px;
}

/* Krazek jest WYJETY Z TOKU (`absolute`), a nie przesuniety marginesem: marginesem
   rozpychal pasek z 68 na 72 px i wychodzil nad niego tylko o 5 px zamiast 18
   (zlapane testem dymnym 30.09). Pasek ma trzymac swoja wysokosc niezaleznie od tego,
   co z niego wystaje. */
.v-bottom-nav__krazek {
  position: absolute;
  top: -18px; /* makieta */
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 52px; /* makieta */
  height: 52px; /* makieta */
  border-radius: 17px; /* makieta */
  background: var(--v-secondary);
  color: var(--v-primary);
  box-shadow: 0 8px 18px rgba(200, 145, 46, .38); /* makieta */
}

/* Pasek nie moze przycinac krazka, ktory z niego wystaje. */
.v-bottom-nav { overflow: visible; }

.v-bottom-nav__poz--akcja .v-bottom-nav__podpis {
  font-weight: 700;
  color: var(--v-primary);
}


/* CELE DOTYKU NA TELEFONIE (audyt 30.09). Pozycje menu mialy 38 px, a znak marki 32 —
   obie ponizej 44 px ze styleguide'u. Na web zostaje ciasniej, bo tam celuje sie myszka. */
@media (max-width: 759px) {
  .v-header__menu-poz { min-height: 44px; }

  .v-header__marka { min-height: 44px; }
}


/* MENU MOBILNE NA PELNY EKRAN (projekt „menu mobilne”, 30.09). Na telefonie panel
   przestaje byc rozwijana lista przy krawedzi i zajmuje caly ekran: logo z krzyzykiem,
   dwa przyciski konta, potem dzialy w wierszach z szewronem. Na web zostaje dropdown. */
@media (max-width: 759px) {
  /* Zamkniete `<details>` chowa tresc regula przegladarki — ale `position: fixed`
     wyjmuje panel z toku i ta regula przestaje dzialac: panel zostawal na ekranie
     jako niewidoczny prostokat 44x24 (zmierzone 30.09). Chowamy go jawnie. */
  .v-header__konto:not([open]) .v-header__menu--pelne { display: none; }

  .v-header__menu--pelne {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    width: 100%;
    max-height: 100dvh;
    overflow-y: auto;
    border-radius: 0;
    box-shadow: none;
    padding: 0 18px 24px; /* makieta */
    gap: 0;
    z-index: var(--v-z-modal, 60);
  }

  .v-header__menu-szczyt-pelny {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px; /* rowno z paskiem serwisu */
    margin: 0 -18px;
    padding: 0 18px;
    border-bottom: 1px solid var(--v-n-100);
  }

  .v-header__menu-zamknij {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--v-primary);
    font-size: 18px;
    cursor: pointer;
  }

  .v-header__menu-akcje {
    display: flex;
    flex-direction: column;
    gap: var(--v-s-3);
    padding: var(--v-s-5) 0 var(--v-s-4);
  }

  .v-header__menu-akcje .v-btn { width: 100%; height: 52px; }

  .v-header__menu-grupa {
    display: block;
    font: 600 11px/1 var(--v-font-body);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--v-n-600);
    padding: var(--v-s-3) 0 var(--v-s-2);
  }

  .v-header__menu-dzial {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px; /* makieta */
    border-bottom: 1px solid var(--v-n-100);
    font: 500 16px/1.3 var(--v-font-body);
    color: var(--v-primary);
    text-decoration: none;
  }

  /* Dzial, na ktorym stoisz, jest ochrowy — tak jak „Wszystko” w projekcie. */
  .v-header__menu-dzial--teraz { color: var(--v-secondary-text); font-weight: 700; }

  .v-header__menu-strzalka { color: var(--v-n-400); font-size: 20px; }

  .v-header__menu--pelne .v-header__menu-poz { min-height: 56px; }
}


/* DOL STOPKI NA TELEFONIE (plansza: footBarPad, footBarDir, footLinksCols, 30.09).
   Kluczowa jest wysciolka 72 px u dolu — bez niej dolny pasek nawigacji zaslania
   ostatni wiersz odnosnikow, a to wlasnie tam stoi „Prywatnosc” i „Regulamin”. */
@media (max-width: 759px) {
  .v-stopka__dol-in {
    display: flex;
    flex-direction: column; /* makieta: footBarDir */
    align-items: stretch; /* makieta: footBarAlign */
    gap: 14px; /* makieta: footBarGap */
    padding: 14px 18px 72px; /* makieta: footBarPad */
  }

  /* Odnosniki w dwoch kolumnach, nad notka o prawach — tak jak w planszy
     (footLinksCols, footLinksOrder 1, footCopyOrder 2). */
  .v-stopka__dokumenty {
    display: grid;
    grid-template-columns: 1fr 1fr; /* makieta */
    gap: 2px 16px; /* makieta: footLinksGap */
    width: 100%;
    order: 1;
  }

  .v-stopka__nota { order: 2; }
}


/* Trzy ikony naglowka rowno wzgledem siebie I wzgledem wlasnych pudelek
   (uwaga Huberta 30.09). Zmierzone: pudelka mialy zgodne srodki w pionie, ale znak
   w „Pomocy” i „Szukaj” siedzial 10-11 px na LEWO od srodka — `display: flex`
   bez wysrodkowania w poziomie. */
/* UWAGA: ta regula NIE USTAWIA `display` — zrobienie tego przywracalo na telefonie
   czwarta ikone (konto), ktora ma tam byc schowana. Wyrownujemy tylko zawartosc. */
.v-header__ikona {
  align-items: center;
  justify-content: center;
}

.v-header__ikona > svg { display: block; margin: 0; }

@media (max-width: 759px) {
  /* Pływak „Zgłoś błąd” schodzi z telefonu (decyzja Huberta 30.09) — zgłoszenia
     zostają na web i w Pomocy. Wraca za to „Wróć na górę”, ktory wczesniej dzielil
     z nim to samo miejsce. */
  .v-fb { display: none; }
}


/* ---------------------------------------------------------------------------
   Ostatnia pozycja dolnego paska po zalogowaniu: AWATAR, IMIE i ochrowa kropka
   (prosba Huberta 30.09). Sylwetka wyglada tak samo u kazdego; awatar z imieniem
   mowi „to twoje konto”, a kropka — ze cos czeka.

   Kropka nie niesie liczby swiadomie: licznik przy rozmowach mowi ILE wiadomosci,
   a tu chodzi o SAM FAKT, ze jest cos do zrobienia. Dwie liczby obok siebie w pasku
   szerokim na 78 px robia z niego tablice wynikow.

   W ZAINSTALOWANEJ APLIKACJI wraca zwykla ikona: tam osoba jest zalogowana
   domyslnie, wiec awatar niczego juz nie rozstrzyga (ustalenie Huberta 30.09).
   --------------------------------------------------------------------------- */

.v-bottom-nav__awatar { position: relative; display: inline-flex; }

.v-bottom-nav__awatar .v-avatar { width: 26px; height: 26px; font-size: 10px; }

.v-bottom-nav__kropka {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px; /* makieta: ta sama kropka co przy nieprzeczytanym powiadomieniu */
  height: 8px;
  border-radius: 50%;
  background: var(--v-secondary);
  box-shadow: 0 0 0 2px var(--v-n-0);
}

/* W przegladarce widac awatar i imie; ikona „profil” i podpis „Profil” czekaja. */
.v-bottom-nav__ikona-profil,
.v-bottom-nav__podpis--profil { display: none; }

@media all and (display-mode: standalone) {
  .v-bottom-nav__awatar,
  .v-bottom-nav__podpis--imie { display: none; }

  .v-bottom-nav__ikona-profil { display: block; }
  .v-bottom-nav__podpis--profil { display: block; }
}


/* ===========================================================================
   OBUDOWA STRONY NIE WCHODZI DO APLIKACJI (handoff PWA, `CLAUDE.md`:
   „czego w standalone NIE renderujemy").

   W zainstalowanej aplikacji nie ma stopki serwisu ani banera ciasteczek:
   stopka to nawigacja strony internetowej (regulamin, social, dane spolki),
   a zgoda na ciasteczka zostala juz zapisana na tym samym origin w momencie,
   gdy ktos korzystal z serwisu w przegladarce — pytanie o nia drugi raz w
   aplikacji wyglada jak awaria. Oba wejscia zostaja: dokumenty i zgody sa
   w Profilu i w Pomocy.

   Warunek to KLASA `jak-aplikacja` (patrz `public/js/js-wlaczony.js`), nigdy
   user-agent ani szerokosc ekranu — tak mowi handoff wprost.
   =========================================================================== */
.jak-aplikacja .v-stopka,
.jak-aplikacja .v-cookies,
.jak-aplikacja .v-ck-znaczek { display: none !important; }


/* TABLET 760-1119: naglowek. Szukajka ma stale 620 px i wypychala strone
   o 234 px (handoff PWA, checklista „zero poziomego scrolla przy 834 px").
   Ta sama choroba co na telefonie 19.09: element o stalej szerokosci
   z `max-width: 100%` liczy te setke od KONTENERA, nie od miejsca, ktore
   zostalo po sasiadach. */
@media (min-width: 760px) and (max-width: 1119px) {
  .v-header__szukaj {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .v-header__in > * { min-width: 0; }
}


/* TABLET 760-1119: stopka ma cztery kolumny po 306 px, czyli 1224 px minimum —
   przy 834 px wychodzila poza ekran o 108 px i to ona byla ostatnim zrodlem
   poziomego przewijania (handoff PWA, checklista). Na tablecie dwie kolumny. */
@media (min-width: 760px) and (max-width: 1119px) {
  .v-stopka__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ===========================================================================
   NAGLOWEK APLIKACJI (standalone) — handoff PWA, tabela „Serwis kontra aplikacja".

   W przegladarce nie istnieje. W aplikacji zastepuje caly pasek serwisu:
   zamiast logo-linku, szukajki i nawigacji marketingowej stoi tytul ekranu
   i wlasny przycisk wstecz. Na feedzie zamiast tytulu jest znak Vistitio,
   NIEKLIKALNY — w aplikacji nie ma dokad z niego wychodzic.
   =========================================================================== */

.v-app-header { display: none; }

.jak-aplikacja .v-app-header {
  display: flex;
  flex-direction: column;
  gap: 14px; /* makieta */
  padding: 8px 0 10px;
  background: var(--v-n-0);
}

/* Rzad naglowka: marka i dzwonek, albo wstecz i tytul ekranu. */
.v-app-header__rzad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-3);
  min-height: 44px;
  padding: 0 20px; /* makieta */
}

/* Ekran inny niz feed: wstecz + tytul stoja obok siebie, nie na dwoch koncach. */
.v-app-header__rzad:has(.v-app-header__tytul) { justify-content: flex-start; }

.v-app-header__dzwonek {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px; /* makieta */
  color: var(--v-primary);
}

.v-app-header__dzwonek:hover { background: var(--v-n-100); }
.v-app-header__dzwonek svg { width: 24px; height: 24px; display: block; }

/* Akcja w pasku ekranu-korzenia (zębatka ustawień na „Profilu”). Ten sam kwadrat
   44 px co dzwonek obok. Do audytu 2026-09-23 klasa nie miała żadnej reguły, więc
   SVG bez wymiarów rozlewał się do domyślnego rozmiaru przeglądarki. */
.v-app-header__akcja {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px; /* makieta */
  color: var(--v-primary);
}

.v-app-header__akcja:hover { background: var(--v-n-100); }
.v-app-header__akcja svg { width: 24px; height: 24px; display: block; }

/* Licznik przy dzwonku. Ochra znaczy „cos na ciebie czeka”; granatowa odmiana
   przy filtrach znaczy „lista jest zawezona” — inny sens, wiec inny kolor. */
.v-app-header__kropka {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--v-secondary);
  color: var(--v-granat-staly);
  font: 700 11px/1 var(--v-font-body);
}

.v-app-header__kropka--granat {
  top: -5px;
  right: -5px;
  background: var(--v-primary);
  color: var(--v-n-0);
}

.v-app-header__szukanie {
  display: flex;
  gap: 8px;
  padding: 0 20px; /* makieta */
}

.v-app-header__pole,
.v-app-header__filtry {
  /* Oba sa odnosnikami, wiec dziedzicza podkreslenie z `a` — a maja wygladac
     jak pole i jak przycisk, nie jak odnosnik w zdaniu. */
  text-decoration: none;
  height: 48px;
  border: 1.5px solid var(--v-n-200); /* makieta */
  border-radius: 12px;
  background: var(--v-n-0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.v-app-header__pole:hover,
.v-app-header__filtry:hover { border-color: var(--v-n-300); }

.v-app-header__pole {
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
  gap: 10px; /* makieta */
  padding: 0 14px; /* makieta */
  color: var(--v-n-600);
}

.v-app-header__pole svg { width: 20px; height: 20px; flex: none; display: block; }

.v-app-header__pole-napis {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 400 14px/1 var(--v-font-body);
  color: var(--v-n-600);
}

.v-app-header__filtry {
  position: relative;
  width: 48px;
  flex: none;
  color: var(--v-primary);
}

.v-app-header__filtry svg { width: 20px; height: 20px; display: block; }

/* Zwykly pasek serwisu w aplikacji nie wchodzi. Zostaje pasek dzialow — to
   nawigacja po produkcie, nie po stronie internetowej. Razem z nim schodzi
   wlasny pasek Pomocy: on tez jest paskiem STRONY (logo, szukajka po pomocy,
   zakladki), a w aplikacji te role przejmuja tytul ekranu i dolny pasek. */
.jak-aplikacja .v-header,
.jak-aplikacja .v-help-header { display: none; }

/* Opakowanie naglowka aplikacji nie istnieje w przegladarce — bez tego
   zostawalby po nim przyklejony pasek o zerowej wysokosci z cieniem. */
.powloka__aplikacja { display: none; }

.jak-aplikacja .powloka__aplikacja {
  display: block;
  position: sticky;
  top: 0;
  z-index: var(--v-z-header);
  background: var(--v-n-0);
  /* Pas stanu granatowy, tak jak w prototypie PWA — malujemy samo wciecie. */
  padding-top: env(safe-area-inset-top);
  background-image: linear-gradient(var(--v-granat-staly), var(--v-granat-staly));
  background-size: 100% env(safe-area-inset-top);
  background-repeat: no-repeat;
}

.v-app-header__wstecz {
  width: 40px;
  height: 40px;
  flex: none;
  margin-left: -8px; /* znak optycznie dociagniety do rynny */
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--v-primary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

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

.v-app-header__tytul {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Ekran, na ktory sie WESZLO: 17 px obok strzalki wstecz (makieta). */
  font: 600 17px/1.2 var(--v-font-display);
  letter-spacing: -.02em;
  color: var(--v-primary);
}

/* KORZEN ZAKLADKI (Profil, Wiadomosci): 22 px, bez strzalki. To nie jest ekran,
   na ktory sie weszlo — to jest zakladka z dolnego paska, wiec tytul jest wiekszy
   i stoi sam (makieta). */
.v-app-header__tytul--korzen {
  font-size: 22px; /* makieta */
  letter-spacing: -.03em; /* makieta */
}

/* Sygnetu w naglowku feedu NIE MA — makieta stawia tam sam wordmark. Sygnet
   zostaje na splashu i na ikonie aplikacji. */
.v-app-header__marka {
  font: 600 22px/1 var(--v-font-display);
  letter-spacing: -.04em; /* makieta */
  color: var(--v-primary);
}

/* EKRAN STARTOWY APLIKACJI TO FEED, nie strona z hero i kaflami dzialow
   (handoff PWA: „aplikacja startuje na feedzie"). Sekcje marketingowe strony
   glownej mowia do kogos, kto dopiero rozwaza Vistitio — kto ma je na ekranie
   glownym telefonu, juz sie zdecydowal i chce zobaczyc rzeczy. */
.jak-aplikacja .gl-hero,
.jak-aplikacja .gl-kroki,
.jak-aplikacja .gl-zaufanie,
.jak-aplikacja .gl-sprzedajacy,
.jak-aplikacja .gl-faq,
.jak-aplikacja .gl-cta,
.jak-aplikacja .gl-popularne { display: none; }


/* ===========================================================================
   TYTUL EKRANU, KTORY W APLIKACJI STOI JUZ W PASKU (05.10).

   Pomiar na trzynastu ekranach publicznych pokazal, ze w trybie aplikacji ten sam
   napis stoi DWA RAZY pod soba — raz w pasku (`v-app-header__tytul`), raz jako `h1`
   w tresci — na siedmiu z nich. W przegladarce paska aplikacji nie ma i `h1` jest
   jedynym tytulem, wiec usuniecie go byloby regresem.

   Stad klasa `v-tytul-ekranu`: „to jest tytul TEGO ekranu". W aplikacji zostaje
   wylacznie dla czytnika ekranu — strona bez `h1` to gorsza dostepnosc, nie
   porzadek. Nowy ekran, ktorego `h1` powtarza tytul strony, dostaje te klase
   i nie trzeba pisac nowej reguly.
   =========================================================================== */
.jak-aplikacja .v-tytul-ekranu {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* PASEK DZIALOW W APLIKACJI TYLKO NA FEEDZIE (uwaga Huberta 05.10).

   Na stronie internetowej pasek dzialow jest nawigacja po calym katalogu i stoi
   wszedzie. W aplikacji nie: Prototyp Mobile trzyma go W SRODKU ekranu „Feed”,
   razem z szukajka i przyciskiem filtrow, a kazdy inny ekran zaczyna sie od paska
   z tytulem i strzalka wstecz. Chipy kategorii nad ekranem „Profil” to nawyk ze
   strony, nie element aplikacji. */
.jak-aplikacja .powloka__dzialy { display: none; }
.jak-aplikacja .powloka__dzialy--feed { display: block; }

/* PODPISY DOLNEGO PASKA: strona kontra aplikacja (rozstrzygniecie 05.10).
   Styleguide: „Glowna / Rozmowy”. Prototyp PWA: „Start / Czat”. Nowszy handoff
   wygrywa w aplikacji, styleguide zostaje na stronie — a o tym, ktory napis widac,
   rozstrzyga klasa `jak-aplikacja`, ktorej nie da sie przeczytac w PHP. */
.v-bottom-nav__podpis--aplikacja { display: none; }
.jak-aplikacja .v-bottom-nav__podpis--strona { display: none; }
.jak-aplikacja .v-bottom-nav__podpis--aplikacja { display: block; }


/* ===========================================================================
   ODNOSNIKI „WSTECZ" W TRESCI — SCHODZA W APLIKACJI (05.10).

   W przegladarce sa potrzebne: pasek przegladarki na telefonie bywa schowany,
   a „‹ Mój portfel" mowi nie tylko ŻE sie cofa, ale DOKAD. W aplikacji strzalka
   stoi juz w pasku ekranu i robi dokladnie to samo — dwie strzalki jedna pod druga
   to nie jest wybor, tylko powtorzenie (zlapane zrzutem ekranu zamowienia).

   Jedna regula zamiast pietnastu poprawek w widokach: te klasy i tak istnieja,
   bo kazdy z tych odnosnikow byl juz stylowany osobno. Nowy ekran z wlasnym
   „wstecz" dopisuje tu swoja klase — i to jest calа robota.
   =========================================================================== */
.jak-aplikacja .checkout__wstecz,
.jak-aplikacja .mojaof__wstecz,
.jak-aplikacja .oferta__wroc,
.jak-aplikacja .pomoc__wroc,
.jak-aplikacja .pomoc__wroc-temat,
.jak-aplikacja .profilp__wroc,
.jak-aplikacja .promuj__wstecz,
.jak-aplikacja .rmap__wroc,
.jak-aplikacja .ustaw__wroc,
.jak-aplikacja .weryf__wroc,
.jak-aplikacja .wstrz__wroc,
.jak-aplikacja .wyniki__wroc,
.jak-aplikacja .zam__wstecz { display: none; }


/* ── KOSZYK W NAGŁÓWKU (makieta v55): torba z ochrową liczbą. Pierwsza w rzędzie ikon. ── */
.v-header__ikona--koszyk { position: relative; }

.v-header__koszyk-ile {
  position: absolute;
  top: -6px; /* makieta */
  right: -6px; /* makieta */
  display: grid;
  place-items: center;
  min-width: 20px; /* makieta */
  height: 20px; /* makieta */
  padding: 0 5px; /* makieta */
  border-radius: 10px; /* makieta */
  background: var(--v-secondary);
  color: var(--v-primary);
  font: 800 11px/1 var(--v-font-body); /* makieta */
}

@media (max-width: 759px) {
  /* Telefon (Prototyp Mobile): torba zostaje w pasku, bez ramki — jak lupka. */
  .v-header__ikona.v-header__ikona--koszyk {
    display: inline-flex;
    border: none;
    background: transparent;
  }

  .v-header__koszyk-ile {
    top: 4px; /* makieta */
    right: 2px; /* makieta */
    min-width: 18px; /* makieta */
    height: 18px; /* makieta */
    border-radius: 9px; /* makieta */
    font-size: 10.5px; /* makieta */
  }
}

/* Nagłówek aplikacji: torba i dzwonek obok siebie. */
.v-app-header__ikony { display: flex; align-items: center; gap: 4px; } /* makieta */

/* ---------- x-seller-badge, x-seller-badges, x-badge-progress, x-badge-filter ----------
   Odznaki sprzedających, wygląd 1c „metka” (handoff 60, `Vistitio Odznaki.dc.html`).
   Wymiary metki liczy komponent (zmienne `--odz-*`, wzór `mark()` z makiety), tu kolor i kształt.
   Kolory poziomów: tokeny `--v-odz-*` (`LV` z makiety: brąz, srebro, złoto). */

.v-odz {
  position: relative;
  width: var(--odz-w);
  height: var(--odz-h);
  flex: none;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding-left: var(--odz-pl);
  border-radius: 4px; /* makieta */
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 26% 100%, 0 50%);
}

.v-odz svg { width: var(--odz-i); height: var(--odz-i); display: block; }

/* Dziurka metki — od rozmiaru 28 px (makieta: `size >= 28`), w kolorze tła. */
.v-odz--dziurka::before {
  content: '';
  position: absolute;
  left: var(--odz-dl);
  top: 50%;
  width: var(--odz-d);
  height: var(--odz-d);
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--v-n-0);
}

.v-odz--p0 { background: var(--v-n-50); color: var(--v-n-300); }
.v-odz--p1 { background: var(--v-odz-1); color: var(--v-odz-ikona); }
.v-odz--p2 { background: var(--v-odz-2); color: var(--v-odz-ikona); }
.v-odz--p3 { background: var(--v-odz-3); color: var(--v-odz-3-ikona); }

/* Tekst poziomu („Brąz”, „Marta: złoto”) i pasek postępu w kolorze poziomu. */
.v-odz-t0 { color: var(--v-n-500); }
.v-odz-t1 { color: var(--v-odz-1-tekst); }
.v-odz-t2 { color: var(--v-odz-2-tekst); }
.v-odz-t3 { color: var(--v-odz-3-tekst); }
.v-odz-b1 { background: var(--v-odz-1); }
.v-odz-b2 { background: var(--v-odz-2); }
.v-odz-b3 { background: var(--v-odz-3); }

.v-odz-znak { display: inline-flex; flex: none; }

/* Chip przy sprzedającej na karcie oferty: 34 px, metka 24, nazwa 12,5/700. */
.v-odz-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px; /* makieta */
  height: 34px;
  padding: 0 10px 0 5px; /* makieta */
  border-radius: 9px;
  background: var(--v-n-50);
  font: 700 12.5px/1 var(--v-font-body);
  color: var(--v-n-800);
  white-space: nowrap;
}

/* Chip filtra „Sprzedające z odznaką”: 44 px, wybrany granatowy z metką złotą. */
.v-odz-filtr {
  display: inline-flex;
  align-items: center;
  gap: 7px; /* makieta */
  height: 44px;
  box-sizing: border-box;
  padding: 0 14px 0 8px;
  border-radius: 12px;
  border: 1.5px solid var(--v-n-200);
  background: var(--v-n-0);
  color: var(--v-n-800);
  font: 700 13.5px/1 var(--v-font-body);
  text-decoration: none;
  white-space: nowrap;
}
.v-odz-filtr:hover { border-color: var(--v-n-300); }
.v-odz-filtr--on,
.v-odz-filtr--on:hover { background: var(--v-granat-staly); border-color: var(--v-granat-staly); color: var(--v-odz-ikona); }

/* --- oferta: trzy odznaki, „+N”, zdanie o wysyłce --- */
.v-odzn { display: flex; flex-direction: column; gap: 12px; }
.v-odzn__rzad { display: flex; flex-wrap: wrap; gap: 8px; }
.v-odzn__wiecej {
  display: inline-flex;
  align-items: center;
  height: 34px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 9px;
  border: 1.5px solid var(--v-n-200);
  font: 700 12.5px/1 var(--v-font-body);
  color: var(--v-n-700);
  text-decoration: none;
}
.v-odzn__wiecej:hover { border-color: var(--v-n-300); }
.v-odzn__zdanie {
  margin: 0;
  padding: 10px 12px; /* makieta */
  border-radius: 10px;
  background: var(--v-odz-3-tlo);
  font: 400 12.5px/1.45 var(--v-font-body);
  color: var(--v-n-700);
}

/* --- profil: „Odznaki · N z 8”, siatka 3 kolumny, arkusz --- */
.v-odzp { display: flex; flex-direction: column; gap: 10px; }
.v-odzp__naglowek { display: flex; justify-content: space-between; align-items: baseline; }
.v-odzp__tytul { margin: 0; font: 600 18px/1.2 var(--v-font-display); letter-spacing: -.01em; color: var(--v-n-800); }
.v-odzp__ile { font: 400 12.5px/1.2 var(--v-font-body); color: var(--v-n-600); }
.v-odzp__siatka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 8px; }
.v-odzp__kafel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 4px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--v-n-800);
}
.v-odzp__kafel:hover { background: var(--v-n-50); }
.v-odzp__kafel--brak { opacity: .55; }
.v-odzp__nazwa { font: 700 12px/1.25 var(--v-font-body); }
.v-odzp__poziom { font: 700 11px/1.2 var(--v-font-body); }

/* Odznak jest zawsze osiem (DECYZJA 25.09), więc siatka dzieli się na równe rzędy: 4 + 4 na
   średnim ekranie, 8 w jednym rzędzie na komputerze. Do 10.10 było `auto-fill`, które przy 1280+
   rysowało dziewiątą, pustą kolumnę i zostawiało wolne miejsce po prawej (zgłoszenie Huberta). */
@media (min-width: 760px) {
  .v-odzp__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .v-odzp__siatka { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.v-warstwa.v-odzp__warstwa .v-sheet { padding: 10px 20px 30px; gap: 14px; } /* makieta */
.v-warstwa.v-odzp__warstwa .v-sheet__lista { gap: 0; }
.v-odzp__arkusz { display: flex; flex-direction: column; gap: 14px; }
.v-odzp__arkusz-glowa { display: flex; gap: 14px; align-items: center; }
.v-odzp__arkusz-tytuly { display: flex; flex-direction: column; gap: 2px; }
.v-odzp__arkusz-nazwa { font: 600 20px/1.2 var(--v-font-display); letter-spacing: -.02em; color: var(--v-n-800); }
.v-odzp__arkusz-linia { font: 700 13px/1.3 var(--v-font-body); }
.v-odzp__opis { margin: 0; font: 400 14px/1.5 var(--v-font-body); color: var(--v-n-700); }
.v-odzp__progi { display: flex; flex-direction: column; gap: 4px; }
.v-odzp__prog {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px; /* makieta */
  border-radius: 10px;
  background: var(--v-n-50);
  font-size: 13.5px;
  color: var(--v-n-800);
}
.v-odzp__prog--p1 { background: var(--v-odz-1-tlo); }
.v-odzp__prog--p2 { background: var(--v-odz-2-tlo); }
.v-odzp__prog--p3 { background: var(--v-odz-3-tlo); }
.v-odzp__prog-nazwa { font-weight: 800; }
.v-odzp__prog-wartosc { font-weight: 600; }
.v-odzp__min { font: 400 12px/1.45 var(--v-font-body); color: var(--v-n-500); }

/* --- „Moje odznaki”: karta z postępem (desktop; telefon niżej) --- */
.v-odzpr {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px; /* makieta */
  border-radius: 16px;
  border: 1px solid var(--v-n-100);
  background: var(--v-n-0);
}
.v-odzpr__tresc { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.v-odzpr__glowa { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.v-odzpr__nazwa { font: 700 15px/1.3 var(--v-font-body); color: var(--v-n-800); }
.v-odzpr__poziom { font: 800 12.5px/1.3 var(--v-font-body); white-space: nowrap; }
.v-odzpr__teraz { font: 400 13px/1.35 var(--v-font-body); color: var(--v-n-700); }
.v-odzpr__pasek { display: block; height: 6px; border-radius: 3px; background: var(--v-n-100); overflow: hidden; }
.v-odzpr__wypelnienie { display: block; height: 100%; border-radius: 3px; }
.v-odzpr__nastepny { font: 400 12.5px/1.45 var(--v-font-body); color: var(--v-n-600); }
.v-odzpr__wskazowka {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--v-n-50);
  font: 400 12.5px/1.45 var(--v-font-body);
  color: var(--v-n-700);
}

@media (max-width: 759px) {
  .v-odzpr { gap: 12px; padding: 12px 14px; border: none; border-radius: 14px; } /* makieta */
  .v-odzpr__tresc { gap: 5px; } /* makieta */
  .v-odzpr__nazwa { font-size: 14px; white-space: nowrap; }
  .v-odzpr__poziom { font-size: 12px; }
  .v-odzpr__teraz { font-size: 12.5px; }
  .v-odzpr__pasek { height: 5px; }
  .v-odzpr__nastepny { font-size: 12px; line-height: 1.4; }
}


/* ---------- x-plan-promowania (etap A, makieta v78 „Pro Moje oferty”) ----------
   Licznik promowań w cenie planu firmowego nad listą ofert: biała karta 16, plakietka planu,
   dwie linie tekstu i kropki 28 × 8 (telefon 18 × 8). */
.v-plan-promowania {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px; /* makieta */
  padding: 16px 20px; /* makieta */
  border-radius: 16px; /* makieta */
  border: 1px solid var(--v-n-100);
  background: var(--v-n-0);
  color: var(--v-primary);
}
.v-plan-promowania__plan { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 7px; background: var(--v-primary); color: var(--v-n-0); font-size: 11.5px; font-weight: 700; } /* makieta */
.v-plan-promowania__tekst { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 220px; } /* makieta */
.v-plan-promowania__tytul { font-size: 15px; font-weight: 700; }
.v-plan-promowania__opis { font-size: 13px; color: var(--v-n-600); }
.v-plan-promowania__kropki { display: flex; gap: 4px; }
.v-plan-promowania__kropka { width: 28px; height: 8px; border-radius: 4px; background: var(--v-n-200); } /* makieta */
.v-plan-promowania__kropka--zostalo { background: var(--v-primary); }

@media (max-width: 759px) {
  .v-plan-promowania__kropka { width: 18px; } /* makieta */
}