/* Partia: formularze i listy (select, checkbox, wybór plików, panel filtrów, paginacja).

   Źródła:
     - Vistitio Styleguide Wdrozenie.dc.html — „Pola”, „Wybory”, „Panel zespołu”, „Warstwy”
     - Vistitio Prototyp Desktop.dc.html / Mobile — „Dodaj ofertę”, „Wyniki wyszukiwania”, arkusz „Filtry”
     - Vistitio Admin.dc.html — stopka tabeli z paginacją
     - proto-core.js — wartości stanów (obwódki błędu, kafelki zdjęć, etykiety list)

   Ten arkusz ładuje się OSTATNI z partii komponentów (patrz layouts/app.blade.php), więc
   rozszerzenia klas z wcześniejszych partii (.v-trow__strona) wygrywają kolejnością.
   Tokeny typografii to skrót `font`, nie `font-size`: `font: 600 var(--v-t-label) …`. */

/* ---------- x-select ---------- */
/* Źródło: Prototyp „Dodaj ofertę” (dział, podkategoria, rozmiar) + Styleguide, sekcja Pola.
   Geometria z x-input, nie z prototypu: rozwijanka w makiecie ma 46 px i promień 11,
   czyli o 2 i o 1 mniej niż pole tekstowe stojące obok niej w tym samym wierszu.
   Dwa pola w jednym wierszu nie mogą różnić się o 2 px, więc wygrywa pole. */

.v-select {
  width: 100%;
  height: var(--v-h-input);
  padding: 0 var(--v-s-10) 0 var(--v-s-4);
  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;
  font-weight: 600;
  cursor: pointer;
  /* Własna strzałka stoi obok jako <span>, więc systemowa musi zniknąć. */
  appearance: none;
  -webkit-appearance: none;
}

.v-select:hover { border-color: var(--v-primary); }

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

.v-select--error { border: 2px solid var(--v-error); }

.v-select:disabled {
  background: var(--v-n-50);
  border-color: var(--v-n-200);
  color: var(--v-n-400);
  cursor: not-allowed;
}

/* Znak ▾ z prototypu: 10 px, wyblakły, 14 px od prawej krawędzi pola — ta sama odległość,
   co jednostka w x-input, więc pole z jednostką i pole z listą kończą się w jednej linii. */
.v-select__strzalka {
  position: absolute;
  right: 14px;
  top: 14px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: var(--v-n-800);
  opacity: .6;
  pointer-events: none;
}

/* Nagłówek grupy w rozwiniętej liście — przeglądarka rysuje optgroup po swojemu,
   ale wagę i kolor da się jej narzucić. */
.v-select optgroup {
  font-family: var(--v-font-body);
  font-weight: 700;
  color: var(--v-n-600);
}

.v-select option {
  font-weight: 600;
  color: var(--v-n-800);
}

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

/* Wariant „etykieta obok": cała grupa w jednej linii, etykieta po lewej.
   Używa go pasek filtrów w dziale, gdzie chipy stoją w rzędzie z pastylkami
   i każdy pionowy przeskok od razu widać. */
/* Pasek filtrów działu używa małych chipów, tak jak sortowanie. */
.v-radio-chips--obok .v-chip {
  height: 34px;
  padding: 0 13px; /* makieta */
  font-size: 13px;
}

.v-radio-chips--obok .v-radio-chips__etykieta { font-size: 12px; } /* pomiar z prototypu */

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

.v-radio-chips__etykieta {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-n-500);
}

/* Wariant „pastylka": select w pasku filtrów działu. Geometria DOKŁADNIE taka jak
   `x-chip` (--v-h-chip, --v-r-chip, 1,5 px, 13,5/600), bo oba stoją obok siebie
   w jednym rzędzie i każda różnica wysokości od razu rzuca się w oczy.
   Nie przemalowujemy tego z arkusza widoku — wariant należy do komponentu. */

.v-field--pastylka {
  width: auto;
}

/* Wartość w wierszu z podpisem (makieta v78 „Pro Rabat za zestaw”, wybór procentu). */
.v-select--wartosc {
  height: 44px; /* makieta */
  min-height: 44px;
  border-radius: var(--v-s-3);
  border: 1.5px solid var(--v-n-200);
  padding: 0 34px 0 14px; /* makieta */
  font: 800 15px/1 var(--v-font-body); /* makieta */
  color: var(--v-primary);
}
.v-select--wartosc { width: auto; }
.v-select--wartosc:disabled { cursor: not-allowed; }
.v-select--wartosc + .v-select__strzalka { top: 12px; right: 10px; font-size: 13px; } /* makieta: ▼ 9 px (nasz znak ▾ jest mniejszy, stąd 13 px), 12 px od krawędzi */

.v-select--pastylka {
  height: 34px; /* pomiar z prototypu — tyle mają pastylki i chipy w pasku filtrów */
  min-height: 34px;
  border-radius: var(--v-r-chip);
  border-width: 1.5px;
  padding: 0 32px 0 13px; /* makieta: wyściółka pastylki filtra */
  font-size: 13px;
  font-weight: 600;
}

/* Strzałka siada bliżej krawędzi niż w pełnym polu, bo pastylka jest niższa i węższa. */
.v-field--pastylka .v-select__strzalka {
  right: 12px;
}

/* ---------- x-checkbox ---------- */
/* Źródło: Styleguide, „Wejście do konta i zgody” (kwadrat z ptaszkiem)
   + Prototyp „Dodaj ofertę”, pole „Rękodzieło”.

   Wartości te same co w x-consent-list (k-nawigacja-i-konto.css): kwadrat 22 px w wierszu
   44 px, promień 6, obwódka 2 px n-300, zaznaczony granat z białym ptaszkiem. Powtórzenie
   jest świadome — to dwa osobne komponenty o osobnym życiu, a x-consent-list jest w tej
   partii nietykalny. Gdy ktoś będzie mógł go ruszyć, powinien złożyć go z x-checkbox.

   Prototyp maluje kwadrat „Rękodzieło” OCHRĄ (`#C8912E`, obwódka 2 px ochry). Zostaje
   granat z x-consent-list: ochra w tym systemie znaczy „rzecz płatna”, a zaznaczenie
   ptaszka nie kosztuje. Rozjazd zapisany w raporcie partii. */

.v-check-pole { display: flex; flex-direction: column; }

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

/* Pole zostaje w drzewie (fokus, klawiatura, wysyłka formularza), tylko go nie widać. */
.v-check__pole {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.v-check__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-check__ptaszek { opacity: 0; }

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

.v-check__pole:checked + .v-check__box .v-check__ptaszek { opacity: 1; }

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

.v-check__pole:disabled + .v-check__box { border-color: var(--v-n-200); background: var(--v-n-50); }
.v-check__pole:disabled ~ .v-check__tresc { color: var(--v-n-400); }

.v-check__pole[aria-invalid="true"] + .v-check__box { border-color: var(--v-error); }

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

/* ---------- x-file-picker ---------- */
/* Źródło: Prototyp „Dodaj ofertę”, sekcja „Zdjęcia” (Desktop l. 565, Mobile l. 475).
   Siatka 4 kolumn na obu szerokościach, osiem kafelków, kwadrat, promień 12.
   Pusty kafelek: biel i kreskowana obwódka 1,5 px n-300; w błędzie 2 px czerwieni. */

.v-fpick { display: flex; flex-direction: column; gap: 12px; }

.v-fpick__gora { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.v-fpick__tytul { font: 600 16px/1.3 var(--v-font-display); color: var(--v-n-800); }
.v-fpick__licznik { color: var(--v-n-500); font-weight: 500; }
.v-fpick__blad { font: 400 var(--v-t-label) var(--v-font-body); color: var(--v-error-text); }

.v-fpick__plik {
  font-family: var(--v-font-body);
  font-size: 13px;
  color: var(--v-n-600);
}

/* Klasę dokłada Alpine (x-bind), więc bez skryptów pole pliku zostaje widoczne
   i wybór zdjęć nadal działa — tylko bez podglądu i bez kafelków. */
.v-fpick__plik--schowane {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Siatka to nadbudowa nad polem pliku: bez Alpine nie ma czego pokazywać. */
.v-fpick__siatka[x-cloak] { display: none; }

.v-fpick__siatka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.v-fpick__kafel {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  background: var(--v-n-0);
  border: 1.5px dashed var(--v-n-300);
  overflow: hidden;
}

.v-fpick__kafel:hover { border-color: var(--v-primary); }

/* Przycisk rozpięty na całym kafelku — w makiecie kwadrat JEST przyciskiem.
   Wyściółka i rozpychanie plakietek siedzą tutaj, bo to ten element niesie treść. */
.v-fpick__klik {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 10px; /* makieta */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 4px; /* makieta */
  cursor: pointer;
  text-align: left;
}

/* Kafelek z wybranym zdjęciem traci obwódkę — w makiecie `bd: filled ? 'none' : …`.
   Tło n-200 jest w tym projekcie nazwane wprost „placeholder zdjęć”. */
.v-fpick__kafel--pelny {
  border: none;
  background: var(--v-n-200);
}

.v-fpick__kafel--blad { border: 2px dashed var(--v-error); }

.v-fpick__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Plakietki siedzą nad zdjęciem, ale w toku flexa kafelka — tak jak w makiecie,
   która nie pozycjonuje ich absolutnie, tylko rozpycha `justify-content: space-between`. */
.v-fpick__glowne,
.v-fpick__dodaj {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: var(--v-r-badge);
  font-family: var(--v-font-body);
  font-weight: 700;
  white-space: nowrap;
  border: none;
}

.v-fpick__glowne {
  height: 20px;
  padding: 0 7px;
  background: var(--v-n-0);
  color: var(--v-primary);
  font-size: 10.5px;
}

.v-fpick__dodaj {
  height: 22px;
  padding: 0 8px;
  background: var(--v-primary);
  color: var(--v-n-0);
  font-size: 11px;
  cursor: pointer;
}

/* Krzyżyka nie ma w makiecie — bez niego jedyną drogą do poprawki jest wyczyszczenie
   całego pola pliku. Wygląd zdjęty z licznika zdjęć w x-gallery (granat 70%, biel, r6). */
/* Strzałki kolejności: para przycisków w prawym dolnym rogu kafelka. Poza makietą
   (prośba Huberta) — pierwsze zdjęcie jest główne, więc kolejność musi dać się zmienić
   bez wgrywania wszystkiego od nowa. Podpis roli stoi po lewej, więc się nie zderzają. */
.v-fpick__ruch {
  position: absolute;
  right: 6px; /* makieta: ten sam margines co krzyżyk */
  bottom: 6px;
  z-index: 1;
  display: flex;
  gap: 2px;
}

.v-fpick__strzalka {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--v-r-badge);
  background: color-mix(in srgb, var(--v-n-900) 70%, transparent);
  color: var(--v-n-0);
  font: 700 13px/1 var(--v-font-body);
  cursor: pointer;
}

.v-fpick__strzalka:hover:not(:disabled) { background: var(--v-n-900); }
.v-fpick__strzalka:disabled { opacity: .35; cursor: default; }

/* Kafelek w trakcie przeciągania — żeby było widać, co się właśnie przenosi. */
.v-fpick__kafel--ciagniety { opacity: .5; }

.v-fpick__usun {
  position: absolute;
  top: 6px;
  right: 6px;
  /* Nad przyciskiem rozpiętym na kafelku — inaczej krzyżyk otwierałby wybór plików. */
  z-index: 1;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--v-r-badge);
  background: color-mix(in srgb, var(--v-n-900) 70%, transparent);
  color: var(--v-n-0);
  font: 700 13px/1 var(--v-font-body);
  cursor: pointer;
}

.v-fpick__usun:hover { background: var(--v-n-900); }

.v-fpick__hint { font: 400 12px/1.5 var(--v-font-body); color: var(--v-n-500); }

/* ZDJĘCIA JUŻ NA OFERCIE (tryb edycji). Ta sama siatka i ten sam kafelek co przy
   dodawaniu — zdjęcie na ofercie i zdjęcie wybrane przed chwilą mają wyglądać
   jednakowo, bo z punktu widzenia sprzedającej to jedna lista ośmiu zdjęć. */
.v-fpick__stare { display: flex; flex-direction: column; gap: var(--v-s-2); }

.v-fpick__stare-siatka {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; /* makieta */
}

/* Kafelek stary nie ma przycisku rozpiętego na całej powierzchni (nie ma czego
   otwierać), więc plakietki pozycjonujemy tutaj — wyściółka 10 px jak w `__klik`. */
.v-fpick__stare-siatka .v-fpick__glowne,
.v-fpick__stare-siatka .v-fpick__rola {
  position: absolute;
  left: 10px; /* makieta */
  z-index: 1;
}

.v-fpick__stare-siatka .v-fpick__rola { bottom: 10px; /* makieta */ }

/* Plakietka „Główne” stoi w znaczniku przy KAŻDYM zdjęciu, a widać ją tylko na
   pierwszym — dzięki temu przestawianie strzałkami nie przenosi jej w drzewie.
   Bez skryptów o pierwszeństwie rozstrzyga klasa z serwera. */
.v-fpick__stare-siatka .v-fpick__glowne { top: 10px; /* makieta */ display: none; }
.v-fpick__stare-siatka .v-fpick__kafel--glowny .v-fpick__glowne { display: inline-flex; }

/* Zaznaczone do usunięcia: kafelek gaśnie, bo sam ptaszek w narożniku jest za mały,
   żeby na siatce ośmiu zdjęć zauważyć, co zniknie po zapisie. */
.v-fpick__kafel--usuwany .v-fpick__foto { opacity: .28; }

.v-fpick__kafel--usuwany .v-fpick__glowne,
.v-fpick__kafel--usuwany .v-fpick__rola { opacity: .4; }

/* Strzałki kolejności zdjęć wgranych wcześniej działają wyłącznie w Alpine — bez
   skryptów nie ma ich wcale, zamiast dwóch przycisków, które nic nie robią. */
.v-fpick__ruch[x-cloak] { display: none; }

/* Ptaszek „Usuń” w narożniku kafelka: ciemna pastylka, jak krzyżyk przy dodawaniu.
   Klasa MUSI siedzieć na opakowaniu, nie być podana x-checkboxowi — tamten scala worek
   atrybutów na samo `<input>`, a wtedy pastylka nie powstaje i ptaszek zostaje
   w normalnym toku POD zdjęciem (`.v-fpick__foto` jest `absolute; inset: 0`). */
.v-fpick__usun-stare {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  padding: 3px 7px;
  border-radius: var(--v-r-badge);
  background: color-mix(in srgb, var(--v-n-900) 72%, transparent);
}

.v-fpick__usun-stare .v-check { gap: var(--v-s-1); min-height: 0; align-items: center; }
.v-fpick__usun-stare .v-check__tytul { color: var(--v-n-0); font-size: 11px; }

.v-fpick__usun-stare .v-check__box {
  width: 15px;
  height: 15px;
  margin-top: 0;
  border-width: 1.5px;
  border-color: var(--v-n-0);
  background: transparent;
  font-size: 10px;
}

/* Zaznaczony ptaszek zostaje biały na granacie — pastylka jest już ciemna, więc
   granatowe tło pola wyboru zlałoby się z nią i nie dałoby się odczytać stanu. */
.v-fpick__usun-stare .v-check__pole:checked + .v-check__box {
  border-color: var(--v-n-0);
  background: var(--v-n-0);
  color: var(--v-n-900);
}

/* UWAGI POD ZDJĘCIEM (10.10, poza makietą: małe zdjęcie, zrzut ekranu; miękkie, nie blokada).
   Uwaga (`x-error ton="info"`)
   zajmuje cały wiersz siatki, a `dense` dosuwa kolejne kafelki w wolne komórki rzędu wyżej —
   uwaga staje więc tuż pod rzędem swojego zdjęcia i nie robi dziury w siatce. */
.v-fpick__siatka,
.v-fpick__stare-siatka { grid-auto-flow: row dense; }

/* Korzeń szablonu pętli Alpine (kafelek + jego uwaga) — bez własnego pudełka. */
.v-fpick__miejsce { display: contents; }

.v-fpick__uwaga { grid-column: 1 / -1; }

/* Którego zdjęcia dotyczy uwaga: ochrowa obwódka w kolorze uwagi. `outline`, bo zdjęcie leży
   na kafelku absolutnie i przykryłoby obramowanie wewnętrzne. */
.v-fpick__kafel--uwaga { outline: 2px solid var(--v-secondary); outline-offset: -2px; }

@media (max-width: 560px) {
  .v-fpick__stare-siatka { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .v-fpick__siatka { gap: 8px; }
  .v-fpick__kafel { padding: 8px; }
}

/* ---------- x-filter-panel ---------- */
/* Źródło: Prototyp Desktop „Wyniki wyszukiwania” (kolumna 260 px, l. 819)
   + Prototyp Mobile, arkusz „Filtry” (l. 1562).

   Jeden węzeł, dwa opakowania. Na web karta przyklejona w kolumnie, poniżej 760 px arkusz
   przy dolnej krawędzi. Grupy filtrów przychodzą slotem i renderują się RAZ — nie ma tu
   drugiej kopii listy dla telefonu.

   Przełączenie w arkusz wchodzi po klasie `z-js` na <html>, ustawianej w <head> przed
   pierwszym malowaniem — inaczej panel mignąłby jako karta i układ by podskoczył.
   Bez skryptów arkusz
   nie miałby czym się otworzyć, więc bez skryptów zostaje zwykła karta w toku strony. */

.v-filtry {
  display: block;
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: var(--v-r-card);
  padding: 18px;
}

.v-filtry__tlo,
.v-filtry__uchwyt,
.v-filtry__stopka { display: none; }

.v-filtry__panel { display: flex; flex-direction: column; gap: 18px; }

.v-filtry__gora { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.v-filtry__tytul {
  font: 600 16px/1.3 var(--v-font-display);
  color: var(--v-primary);
}

.v-filtry__licznik { font-weight: 500; color: var(--v-n-500); }

.v-filtry__czysc {
  font: 600 12.5px/1.3 var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: underline;
  white-space: nowrap;
}

.v-filtry__czysc:hover { color: var(--v-primary); }

.v-filtry__grupy { display: flex; flex-direction: column; gap: 18px; min-height: 0; }

/* Chrome grupy należy do panelu, nie do treści slotu — inaczej każdy widok wymyślałby
   własne nagłówki filtrów. Widok podaje same chipy i pola, w tych dwóch klasach. */
.v-filtry__grupa { display: flex; flex-direction: column; gap: 8px; }

.v-filtry__etykieta {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: var(--v-ls-eyebrow);
  text-transform: uppercase;
  color: var(--v-n-500);
}

/* Jedyny separator w makiecie: nad ostatnim blokiem (przełącznik kont prywatnych). */
.v-filtry__grupa--oddzielona {
  border-top: 1px solid var(--v-n-100);
  padding-top: 16px;
}

@media (min-width: 761px) {
  .v-filtry {
    position: sticky;
    /* Odsunięcie od góry zależy od wysokości nagłówka konkretnego widoku, więc widok
       podaje je zmienną. 96 px to wartość awaryjna, nie specyfikacja. */
    top: var(--v-filtry-gora, 96px);
  }
}

@media (max-width: 760px) {
  .z-js .v-filtry {
    position: fixed;
    inset: 0;
    z-index: var(--v-z-sheet);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
  }

  .z-js .v-filtry:not(.v-filtry--otwarty) { display: none; }

  .z-js .v-filtry .v-filtry__tlo {
    display: block;
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--v-n-900) 32%, transparent);
  }

  .z-js .v-filtry .v-filtry__panel {
    position: relative;
    width: 100%;
    max-width: var(--v-w-mobile);
    /* Przewijania nie ma w makiecie — arkusz filtrów w prototypie nie ma ani `max-height`,
       ani `overflow`, więc pełny zestaw filtrów wychodzi poza ekran telefonu. Wzór wzięty
       z arkusza dokumentu w tym samym pliku (max-height 44vh, overflow-y auto). */
    max-height: 85vh;
    background: var(--v-n-0);
    border-radius: var(--v-r-sheet) var(--v-r-sheet) 0 0;
    padding: 8px 20px 32px;
    gap: 16px;
    box-shadow: var(--v-shadow-sheet);
  }

  .z-js .v-filtry .v-filtry__uchwyt {
    display: block;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--v-n-200);
    align-self: center;
  }

  /* Tylko lista filtrów się przewija. Nagłówek z „Wyczyść” i stopka z „Pokaż …”
     zostają na miejscu — bez tego przycisk zatwierdzenia ucieka pod krawędź ekranu. */
  .z-js .v-filtry .v-filtry__grupy { overflow-y: auto; gap: 16px; }

  .z-js .v-filtry .v-filtry__stopka { display: block; }

  .v-filtry__tytul { font: 600 20px/1.2 var(--v-font-display); letter-spacing: var(--v-ls-h3); }

  /* Nagłówki grup są na telefonie większe i bez wersalików — tak jest w prototypie
     mobile (12 px, 600, n-600), inaczej niż w kolumnie na web. */
  .v-filtry__etykieta {
    font: 600 12px/1.3 var(--v-font-body);
    letter-spacing: normal;
    text-transform: none;
    color: var(--v-n-600);
  }
}

/* ---------- x-pagination ---------- */
/* Źródło: Vistitio Admin.dc.html, stopka tabeli w karcie (l. 95 i 140).
   Wymiary przycisku (32 px, promień 8, obwódka 1,5 px n-300, 600 12 px Manrope, gap 6)
   stoją już jako .v-trow__strona w k-panel-i-warstwy.css i NIE są tu powtarzane.
   Tutaj tylko to, czego makieta w stopce nie miała: równa szerokość numeru, strzałka
   nieczynna i przerwa w numeracji. */

.v-pag__zakres { font-variant-numeric: tabular-nums; }

/* Bez tego jednocyfrowy numer ma około 31 px, a dwucyfrowy 38 — siatka się chwieje.
   Makieta ma tylko strony 1–3, więc problem w niej nie wychodzi. */
.v-btn.v-pag__strona { min-width: 32px; }

/* Bieżąca strona i nieczynna strzałka to <span>, nie odnośnik — nie ma w co kliknąć,
   więc nie udajemy kursorem, że jest. */
span.v-btn.v-pag__strona { cursor: default; }

/* Strzałki na pierwszej i ostatniej stronie. Makieta paginacji nie ma stanu nieczynnego
   (w Admin `‹` na stronie 1. wygląda jak zwykły przycisk); wartości wzięte z globalnego
   wzorca disabled z README handoffu: tekst n-400, obwódka n-200, tło białe. */
.v-btn.v-pag__strona--nieczynna,
.v-btn.v-pag__strona--nieczynna:hover {
  background: var(--v-n-0);
  border: 1.5px solid var(--v-n-200);
  color: var(--v-n-400);
  cursor: not-allowed;
}

.v-pag__przerwa {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 32px;
  color: var(--v-n-500);
  font: 600 12px/1 var(--v-font-body);
}

.v-pag__przypis { color: var(--v-n-600); }

/* Na telefonie stopka łamie się na trzy wiersze (v-trow--stopka ma flex-wrap), więc
   numery zostają wyśrodkowane zamiast wisieć przy lewej krawędzi. */
@media (max-width: 760px) {
  .v-trow--stopka .v-trow__strony { justify-content: center; width: 100%; }
}

/* Wariant ochry: TYLKO znacznik rękodzieła. Makieta maluje ten kwadrat ochrą
   (`handmadeBoxBg: N.ochre`, obwódka `2px solid #C8912E`), bo to znak działu, nie
   informacja o opłacie. Zgody i reszta formularzy zostają granatowe. */
.v-check--ochra input:checked + .v-check__box {
  background: var(--v-secondary);
  border-color: var(--v-secondary);
}

.v-check--ochra input:checked + .v-check__box .v-check__ptaszek { color: var(--v-primary); }

/* ---------- x-radio-chips ---------- */
/* Źródło: Prototyp „Dodaj ofertę” — grupy „Stan” (`sellConds`) i „Co dokładnie
   sprzedajesz” (`whatKinds`), obie rysowane jako rząd chipów z jednym zaznaczonym.

   Rysunek chipa nie ma tu ani jednej własnej wartości: <span> nosi klasę .v-chip
   z partii „wybory i stany”, więc wysokość, promień, obwódka, czcionka i nakładka
   dotyku 44 px przychodzą stamtąd. Poniżej są wyłącznie stany, których .v-chip nie
   umie sam pokazać, bo w x-chip robi je atrybut <button> (aria-pressed, disabled),
   a tutaj robi je schowany <input type="radio">.

   Trzy reguły niżej powtarzają zestaw deklaracji z .v-chip--aktywny i .v-chip[disabled].
   Powtórzone są nazwy właściwości, nie wartości — kolory idą tymi samymi tokenami, więc
   zmiana w tokens.css przechodzi w oba miejsca naraz. Inaczej się nie da: dopisanie
   selektora do tamtych reguł znaczyłoby edycję k-wybory-i-stany.css, a ten plik nie
   należy do tego zadania.

   Ten arkusz ładuje się po k-wybory-i-stany.css (kolejność w layouts/app.blade.php),
   więc przy równej wadze selektora wygrywa to, co tutaj. */

/* Fieldset przychodzi od przeglądarki z obwódką, marginesem i wewnętrznym odstępem,
   a do tego z `min-inline-size: min-content`, przez co w siatce i we flexie nie chce
   się zwęzić. Zerujemy wszystko cztery. */
.v-radio-chips {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
  min-inline-size: 0;
}

/* Legend to widoczna etykieta grupy — rysunek bierze z .v-field__label, tutaj zostaje
   tylko skasowanie odstępu, który przeglądarka dokłada legendzie z własnej inicjatywy. */
.v-radio-chips__legenda { padding: 0; }

/* Odstęp 8 px, nie 6 z prototypu: chip ma 38 px rysunku i 44 px pola dotyku, czyli
   nakładkę 3 px nad i pod. Przy 6 px nakładki sąsiednich rzędów stykają się co do
   piksela — ta sama reguła stoi przy .v-chip::after. Margines 6 px jak .v-field__wrap. */
/* Odstęp 10 px, nie 6: tyle dzieli etykietę od pola w `.v-field` (gap 4 + margines 6).
   Bez tego grupa chipów stała o cztery piksele wyżej niż pole obok w tym samym wierszu
   formularza (Rozmiar i Stan na ekranie „Dodaj ofertę”).
   Nie da się tego załatwić `display: flex` z gapem na samym fieldsecie — `<legend>`
   nie jest elementem elastycznym, przeglądarka wyjmuje go z układu i gap go omija. */
.v-radio-chips__opcje {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-2);
  margin-top: 10px; /* makieta: równo z odstępem etykiety w .v-field */
}

/* Etykieta obok chipów stoi w jednym rzędzie — tam odstęp pionowy nie ma sensu. */
.v-radio-chips--obok .v-radio-chips__opcje { margin-top: 0; }

/* Etykieta hermetyzuje chipa i schowany input — `position: relative`, żeby input
   wyjęty z układu został w granicach swojej opcji, a nie doleciał do dalekiego rodzica. */
.v-radio-chips__opcja {
  position: relative;
  display: inline-flex;
}

/* `hidden` musi tu wygrać z `display: inline-flex` wyżej — atrybut niesie tylko
   `display: none` z arkusza przeglądarki i przegrywa z każdą naszą regułą.
   Bez tego oba zestawy chipów „Co obniża stan?” stały obok siebie. */
.v-radio-chips__opcja[hidden] { display: none; }

/* Chip, ktory ZAPISUJE OD RAZU, jest <button>em — a przycisk niesie wlasne tlo, obwodke
   i wysciolke z arkusza przegladarki. Bez tego zerowania chip siedzial w szarym kwadracie
   i wygladal jak dwa elementy jeden w drugim (uwaga Huberta 25.09). */
.v-radio-chips__opcja--guzik {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.v-radio-chips__opcja--guzik:focus-visible { outline: none; }
.v-radio-chips__opcja--guzik:focus-visible .v-chip {
  outline: 2px solid var(--v-secondary);
  outline-offset: 2px;
}

/* Pole zostaje w drzewie: fokus, strzałki, wysyłka formularza i czytnik ekranu działają,
   tylko go nie widać. Ten sam zestaw reguł co .v-tylko-czytnik i .v-radio-card__input. */
.v-radio-chips__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Grupa w błędzie: czerwona obwódka na chipach, tak samo jak ptaszek robi to na kwadracie
   (.v-check__pole[aria-invalid="true"]). Stoi PRZED regułą zaznaczenia, żeby chip wybrany
   został granatowy — błąd tej grupy to zwykle „nic nie wybrano”, więc barwi niewybrane. */
.v-radio-chips[aria-invalid="true"] .v-chip { border-color: var(--v-error); }

/* Zaznaczenie: to samo, co w x-chip robi klasa .v-chip--aktywny, tylko wyzwalane przez
   :checked, a nie przez dopisanie klasy skryptem. Stąd działanie bez JS. */
.v-radio-chips__input:checked + .v-chip,
/* Wariant „zapisuje od razu" nie ma pola radio, wiec zaznaczenie niesie klasa. Ta regula
   NIE ISTNIALA — oba chipy jezyka wygladaly tak samo i nie bylo widac, ktory jest wybrany. */
.v-radio-chips__opcja--wybrana .v-chip {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
}

/* Bez tego kursor nad zaznaczonym chipem zjeżdżałby na .v-chip:hover (jasne tło),
   czyli zaznaczenie znikałoby pod myszą. Odpowiednik .v-chip--aktywny:hover. */
.v-radio-chips__input:checked + .v-chip:hover,
.v-radio-chips__opcja--wybrana .v-chip:hover {
  background: var(--v-primary-hover);
  border-color: var(--v-primary-hover);
}

/* Wyłączone — pojedyncza opcja albo cały <fieldset disabled>, przeglądarka wyłącza
   wtedy pola sama. Odpowiednik .v-chip[disabled], którego <span> nie może mieć. */
.v-radio-chips__input:disabled + .v-chip {
  background: var(--v-n-100);
  border-color: var(--v-n-200);
  color: var(--v-n-400);
  cursor: not-allowed;
}

/* Wyłączone, ale WYBRANE: pole zablokowane ma dalej pokazywać swoją wartość.
   Inaczej po zablokowaniu grupy wszystkie chipy wyglądają identycznie szaro i nie
   widać, co jest zaznaczone — a to informacja, nie możliwość zmiany. Tak samo zachowuje
   się `x-input[readonly]`: treść zostaje, edycja nie. Świadome odejście od `x-chip`,
   który tego rozróżnienia nie ma (tam chip zablokowany nigdy nie niesie stanu). */
.v-radio-chips__input:disabled:checked + .v-chip {
  background: var(--v-n-200);
  border-color: var(--v-n-300);
  color: var(--v-n-700);
  font-weight: 700;
}

/* Klawiatura: input jest schowany, więc obrys musi pokazać się na chipie. Granat
   z odstępem 2 px — ten sam obrys co przy ptaszku i przy zgodach. */
.v-radio-chips__input:focus-visible + .v-chip {
  outline: 2px solid var(--v-primary);
  outline-offset: 2px;
}

/* .v-field__hint i .v-field__error niosą własny margin-top. W x-input działa, bo .v-field
   jest kolumną flex i blokuje swoje dzieci. Fieldset zostaje blokiem (legend w kontenerze
   flex wypada z układu w części przeglądarek), więc blokujemy oba <span> tutaj. */
.v-radio-chips > .v-field__hint,
.v-radio-chips > .v-field__error { display: block; }


/* ---------- x-seller-filter ---------- */
/* Pomiar z prototypu: grupa tło n-50, obwódka 1 px, promień 10, wyściółka 3, odstęp 3.
   Przycisk 34x30 z promieniem 8, ikona 16 px. Wybrany granatowy z białą ikoną.
   Poniżej 760 px przyciski rosną do 44 px i pokazują krótki podpis. */

.v-od-kogo {
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.v-od-kogo__etykieta {
  font: 700 12px/1.2 var(--v-font-body); /* makieta */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v-n-500);
  flex: none;
}

.v-od-kogo__grupa {
  display: flex;
  gap: 3px; /* makieta */
  flex: none;
  background: var(--v-n-50);
  border: 1px solid var(--v-n-100);
  border-radius: 10px; /* makieta */
  padding: 3px; /* makieta */
}

.v-od-kogo__poz {
  position: relative;
  display: flex;
  cursor: pointer;
}

.v-od-kogo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.v-od-kogo__pigulka {
  width: 34px; /* makieta */
  height: 30px; /* makieta */
  border-radius: 8px; /* makieta */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px; /* makieta */
  color: var(--v-n-700);
  font: 600 13px/1 var(--v-font-body);
}

.v-od-kogo__krotko { display: none; }

.v-od-kogo__input:checked + .v-od-kogo__pigulka {
  background: var(--v-primary);
  color: var(--v-n-0);
}

.v-od-kogo__input:focus-visible + .v-od-kogo__pigulka {
  outline: 2px solid var(--v-primary);
  outline-offset: 2px;
}

/* Dymek z pełnym zdaniem — pomiar z prototypu: 220 px, granat, 12/600,
   8/10 wyściółki, promień 9, cień 0 10px 28px, 8 px pod ikoną. */
.v-od-kogo__dymek {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px); /* makieta */
  transform: translateX(-50%);
  z-index: 40; /* makieta */
  display: none;
  width: 220px; /* makieta */
  padding: var(--v-s-2) 10px; /* makieta */
  border-radius: 9px; /* makieta */
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 600 12px/1.4 var(--v-font-body); /* makieta */
  text-align: left;
  pointer-events: none;
  box-shadow: 0 10px 28px rgba(20, 28, 46, .22); /* makieta */
}

.v-od-kogo__poz:hover .v-od-kogo__dymek,
.v-od-kogo__input:focus-visible ~ .v-od-kogo__dymek { display: block; }

@media (max-width: 760px) {
  .v-od-kogo__pigulka { width: auto; height: 44px; padding: 0 var(--v-s-3); }
  .v-od-kogo__krotko { display: inline; }
  /* Na telefonie podpis stoi w przycisku, więc dymek jest zbędny. */
  .v-od-kogo__dymek { display: none !important; }

  /* Cztery pastylki z podpisami mają na telefonie 453 px i nie zmieszczą się na
     ekranie. Przewija się WTEDY SAMA GRUPA — strona nigdy nie jedzie w bok. */
  /* `min-inline-size` jest tu obowiązkowe: fieldset ma w przeglądarkach domyślnie
     `min-inline-size: min-content` i samo `min-width: 0` go nie rusza — bez tego
     pasek dalej rozpycha stronę mimo przewijanej grupy w środku. */
  .v-od-kogo {
    max-width: 100%;
    min-width: 0;
    min-inline-size: 0;
    /* Podpis „OD KOGO" idzie NAD pastylki. Obok nich zabierał 71 px z lewej,
       więc przewijana grupa i tak zaczynała się poza swoją szerokością i wypychała
       stronę — dokładnie ten sam mechanizm co przy szukajce w nagłówku. */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--v-s-2);
  }

  .v-od-kogo__grupa {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .v-od-kogo__grupa::-webkit-scrollbar { display: none; }
  .v-od-kogo__poz { flex: none; }
}

/* ---------- x-filter-drop ---------- */
/* Pomiar z prototypu. Pastylka: 36 px, promień 9, obwódka 1,5 px, 13/600, strzałka
   10 px przygaszona. Panel chipów: 318 px, siatka 3 kolumn, odstęp 6, wyściółka 12,
   promień 14, cień 0 16px 40px. Panel listy: min. 170 px przy prawej krawędzi,
   wiersze 44 px z zielonym ptaszkiem. */

.v-filtr {
  position: relative;
  flex: none;
}

.v-filtr__pigulka {
  display: inline-flex;
  align-items: center;
  gap: 7px; /* makieta */
  height: 36px; /* makieta */
  padding: 0 var(--v-s-3);
  border-radius: 9px; /* makieta */
  border: 1.5px solid var(--v-n-200);
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 13px/1 var(--v-font-body);
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.v-filtr__pigulka::-webkit-details-marker { display: none; }
.v-filtr__pigulka:hover { border-color: var(--v-primary); }

/* Otwarty filtr ma granatową obwódkę — widać, który panel jest na wierzchu. */
.v-filtr[open] > .v-filtr__pigulka { border-color: var(--v-primary); }

.v-filtr__licznik {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px; /* makieta: licznik przy nazwie filtru */
  border-radius: 999px;
  background: var(--v-primary);
  color: var(--v-n-0);
  font-size: 11px;
}

.v-filtr__strzalka {
  font-size: 10px; /* makieta */
  opacity: .6; /* makieta */
}

.v-filtr__panel {
  position: absolute;
  left: 0;
  top: calc(100% + 6px); /* makieta */
  z-index: var(--v-z-dropdown);
  background: var(--v-n-0);
  border: 1px solid var(--v-n-200);
  border-radius: 14px; /* makieta */
  box-shadow: 0 16px 40px rgba(20, 28, 46, .16); /* makieta */
  padding: var(--v-s-3);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; /* makieta */
  width: 318px; /* makieta */
  /* Na telefonie 318 px nie mieści się obok pastylki stojącej w środku paska —
     panel wyjeżdżał poza ekran i rozciągał całą stronę o 174 px. */
  max-width: calc(100vw - var(--v-s-8));
}

/* Wartość w panelu: nie chip z biblioteki — w makiecie łamie się na dwie linie
   i jest wyśrodkowana, czego chip nie robi. */
.v-filtr__wartosc {
  min-height: 40px; /* makieta */
  padding: 5px 8px; /* makieta */
  border-radius: 9px; /* makieta */
  border: 1px solid var(--v-n-300);
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 12.5px/1.2 var(--v-font-body); /* makieta */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.v-filtr__wartosc:hover { border-color: var(--v-primary); }

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

/* ---------- układ listy (sortowanie) ---------- */

.v-filtr--lista .v-filtr__panel {
  left: auto;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px; /* makieta */
  width: auto;
  min-width: 170px; /* makieta */
  padding: 6px; /* makieta */
}

.v-filtr__wiersz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* makieta */
  height: 44px; /* makieta */
  padding: 0 var(--v-s-3);
  border-radius: 9px; /* makieta */
  color: var(--v-primary);
  font-size: 14px; /* makieta */
  text-decoration: none;
  white-space: nowrap;
}

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

.v-filtr__wiersz--teraz {
  background: var(--v-n-50);
  font-weight: 700;
}

.v-filtr__ptaszek {
  color: var(--v-success); /* makieta */
  font-weight: 700;
}

/* ---------- podpisywanie zdjęć (x-file-picker, sekcja ról) ---------- */
/* Źródło: Prototyp „Dodaj ofertę”, pasek `photoStrip` + `roleChips` pod siatką zdjęć. */

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

.v-fpick__pasek {
  display: flex;
  gap: var(--v-s-2);
  overflow-x: auto;
  padding-bottom: 2px; /* makieta */
}

.v-fpick__mini {
  flex-shrink: 0;
  width: 56px; /* makieta */
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px; /* makieta */
  align-items: center;
}

.v-fpick__mini-foto {
  width: 56px;
  height: 56px;
  border-radius: 10px; /* makieta */
  object-fit: cover;
  border: 1.5px solid transparent;
  background: var(--v-n-200);
}

.v-fpick__mini--teraz .v-fpick__mini-foto { border: 2px solid var(--v-primary); } /* makieta */

.v-fpick__mini-podpis {
  font: 600 10.5px/1.2 var(--v-font-body); /* makieta */
  color: var(--v-n-500);
  max-width: 56px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.v-fpick__mini--teraz .v-fpick__mini-podpis { color: var(--v-n-800); }

.v-fpick__wybrane { font: 600 12px/1.3 var(--v-font-body); color: var(--v-n-600); }

.v-fpick__role-chipy { display: flex; gap: 6px; flex-wrap: wrap; } /* makieta */
.v-fpick__role-chipy .v-chip { height: 32px; padding: 0 11px; font-size: 12.5px; } /* makieta */

/* Podpis roli na kafelku siatki — biała pastylka przy dolnej krawędzi. */
.v-fpick__rola {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 20px; /* makieta */
  padding: 0 7px; /* makieta */
  border-radius: var(--v-r-badge);
  background: var(--v-n-0);
  color: var(--v-n-700);
  font: 700 10.5px/1 var(--v-font-body); /* makieta */
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* „Co warto pokazać" — szary blok pod siatką zdjęć (prototyp, ekran „Dodaj ofertę").
   Rola, dla której zdjęcie już jest, dostaje zielony ptaszek i podpis „jest". */
.v-fpick__warto {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  background: var(--v-n-50);
  border-radius: var(--v-r-input);
  padding: var(--v-s-3) 14px; /* makieta */
}

.v-fpick__warto-tytul {
  font: 700 12px/1.2 var(--v-font-body);
  text-transform: uppercase;
  letter-spacing: .06em; /* makieta */
  color: var(--v-n-600);
}

.v-fpick__warto-poz { display: flex; gap: 10px; align-items: flex-start; } /* makieta */

.v-fpick__warto-znak {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font: 700 11px/1 var(--v-font-body); /* makieta */
  background: var(--v-n-100);
  color: var(--v-n-600);
}

.v-fpick__warto-tresc { display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* makieta */
.v-fpick__warto-rola { font: 700 13px/1.3 var(--v-font-body); color: var(--v-n-600); }
.v-fpick__warto-jak { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-600); }
.v-fpick__warto-nota { font: 400 12px/1.5 var(--v-font-body); color: var(--v-n-500); }

.v-fpick__warto-poz--jest .v-fpick__warto-znak { background: var(--v-success-soft); color: var(--v-success-text); }
.v-fpick__warto-poz--jest .v-fpick__warto-rola { color: var(--v-n-800); }

/* ---------- x-size-picker ---------- */
/* Źródło: Prototyp „Dodaj ofertę”, rozwinięty wybór rozmiaru. Pastylka 46 px, panel
   z nagłówkami grup i chipami, na końcu własny rozmiar pod odsyłaczem. */

.v-rozmiar__box { position: relative; }

.v-rozmiar__guzik { list-style: none; cursor: pointer; margin-top: 6px; }
.v-rozmiar__guzik::-webkit-details-marker { display: none; }

.v-rozmiar__pastylka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* makieta */
  height: 46px; /* makieta */
  padding: 0 14px; /* makieta */
  border-radius: 11px; /* makieta */
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
  color: var(--v-n-800);
  font: 600 15px/1 var(--v-font-body);
}

.v-rozmiar__pastylka:hover { border-color: var(--v-primary); }
.v-rozmiar__pastylka--blad { border: 2px solid var(--v-error); }

.v-rozmiar__wybrany { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.v-rozmiar__strzalka { font-size: 10px; opacity: .6; flex-shrink: 0; } /* makieta */

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

.v-rozmiar__grupa {
  font: 700 11px/1.2 var(--v-font-body);
  text-transform: uppercase;
  letter-spacing: .06em; /* makieta */
  color: var(--v-n-500);
  padding: 2px 6px; /* makieta */
}

.v-rozmiar__grupa--alt { padding: 6px 6px 2px; } /* makieta */

.v-rozmiar__wartosci { display: flex; gap: 6px; flex-wrap: wrap; } /* makieta */

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

.v-rozmiar__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.v-rozmiar__wartosc {
  display: grid;
  place-items: center;
  min-height: 38px; /* makieta */
  min-width: 46px; /* makieta */
  padding: 0 12px; /* makieta */
  border-radius: 9px; /* makieta */
  border: 1px solid var(--v-n-200);
  background: var(--v-n-0);
  color: var(--v-n-800);
  font: 400 14px/1 var(--v-font-body);
  cursor: pointer;
}

.v-rozmiar__wartosc:hover { border-color: var(--v-primary); }

/* Zaznaczony to TŁO n-50 i grubsze pismo, nie granatowe wypełnienie — panel wyboru
   pokazuje, co jest wybrane, a nie filtruje listy. */
.v-rozmiar__input:checked + .v-rozmiar__wartosc { background: var(--v-n-50); font-weight: 700; }
.v-rozmiar__input:focus-visible + .v-rozmiar__wartosc { outline: 2px solid var(--v-primary); outline-offset: 2px; }

/* Rozwinięcie własnego rozmiaru ZDEJMUJE ograniczenie wysokości panelu: przy 300 px
   pole na wpisanie wpadało pod krawędź i trzeba było przewijać panel, żeby je zobaczyć.
   `:has()` zamiast JavaScriptu — panel reaguje na otwarty `details` w środku. */
.v-rozmiar__panel:has(.v-rozmiar__wlasny[open]) {
  max-height: none;
  overflow-y: visible;
}

.v-rozmiar__wlasny-cta {
  list-style: none;
  min-height: 38px; /* makieta */
  display: flex;
  align-items: center;
  margin-top: var(--v-s-1);
  padding: 0 10px; /* makieta */
  border-radius: 9px; /* makieta */
  font: 700 13.5px/1.2 var(--v-font-body); /* makieta */
  color: var(--v-n-800);
  text-decoration: underline;
  cursor: pointer;
}

.v-rozmiar__wlasny-cta::-webkit-details-marker { display: none; }
.v-rozmiar__wlasny-pole { padding: var(--v-s-1) 2px 2px; } /* makieta */


/* ==========================================================================
   x-report — zgłoszenie oferty albo osoby. Zwinięte w `details`, bo zgłasza się
   rzadko; rozwinięte zabierałoby miejsce na każdej ofercie.
   ========================================================================== */

.v-report > summary { list-style: none; cursor: pointer; display: inline-flex; }
.v-report > summary::-webkit-details-marker { display: none; }

.v-report > summary > span {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 var(--v-s-4);
  border-radius: var(--v-r-btn);
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
  font: 600 13.5px/1 var(--v-font-body);
  color: var(--v-n-600);
}

.v-report > summary > span:hover { border-color: var(--v-primary); color: var(--v-primary); }
.v-report[open] > summary { margin-bottom: var(--v-s-3); }

.v-report__form {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
  align-items: flex-start;
  padding: var(--v-s-4);
  border-radius: var(--v-r-card);
  background: var(--v-n-50);
}

.v-report__form > .v-field { align-self: stretch; }

.v-report__nota {
  margin: 0;
  font: 400 12px/1.55 var(--v-font-body);
  color: var(--v-n-600);
}

/* Pulapka na roboty: pole istnieje w formularzu, ale nie istnieje dla oka ani dla
   czytnika ekranu. `display: none` byloby gorsze — czesc robotow pomija takie pola. */
.v-pulapka {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}


/* Pasek „udane” — zielony, zostaje na stronie. Uzywamy go, gdy cos sie WLASNIE
   udalo i czlowiek ma to zobaczyc nawet wtedy, gdy przegapil toast (30.09). */
.v-error--udane {
  background: var(--v-success-tlo, #E4EFEA); /* TODO token */
  border-color: var(--v-success);
  color: #1F5A41; /* TODO token */
}

.v-error--udane .v-error__znak { background: var(--v-success); color: var(--v-n-0); }


/* ===========================================================================
   PANEL FILTROW — PRZENIESIONY TU Z `s-dzial.css` (05.10).

   Powod: ten sam panel otwiera sie teraz z NAGLOWKA ZAINSTALOWANEJ APLIKACJI
   na feedzie, a `s-*.css` wchodzi wylacznie na swoim ekranie — na feedzie
   szuflada stalaby bez stylu. To ta sama pulapka co z `x-offer-mini` 22.09:
   styl czegos, co widac na wielu ekranach, nalezy do arkusza partii.

   Stoi na KONCU tego pliku swiadomie: baza `.v-filtr*` jest wyzej w tym samym
   arkuszu, a te reguly maja ja nadpisywac.
   =========================================================================== */
/* ===========================================================================
   FILTRY NA TELEFONIE — jedna pastylka „Filtry”, 1:1 z projektem (uwaga Huberta
   30.09). Rozlozone zajmowaly 330 px, czyli pol ekranu, zanim pojawila sie
   pierwsza rzecz. Na web nic sie nie zmienia: `<details>` jest tam przezroczyste.
   =========================================================================== */

/* --- WEB: zwijka nie istnieje --- */
@media (min-width: 760px) {
  .kat__zwijka { display: contents; }
  .kat__zwijka-guzik { display: none; }
  .kat__zwijka-panel { display: contents; }
  .kat__zwijka-akcje { display: none; }

  /* Od Chrome 131 zamkniete `<details>` chowa tresc przez `::details-content`
     i samo `display` na dziecku juz tego nie odslania — ta sama pulapka co
     w kolumnach stopki (30.09). Starsze silniki tej reguly nie znaja i dzialaja
     na `display: contents` wyzej. */
  .kat__zwijka::details-content {
    content-visibility: visible;
    block-size: auto;
    display: contents;
  }
}

/* --- TELEFON: pastylka i panel --- */
@media (max-width: 759px) {
  .kat__zwijka { flex: 1 1 auto; min-width: 0; }

  .kat__zwijka-guzik {
    display: flex;
    align-items: center;
    gap: var(--v-s-2);
    min-height: 44px; /* cel dotyku */
    padding: 0 var(--v-s-4);
    border: 1px solid var(--v-n-200);
    border-radius: var(--v-r-btn);
    background: var(--v-n-0);
    font: 600 var(--v-t-ui) var(--v-font-body);
    color: var(--v-primary);
    cursor: pointer;
    list-style: none;
  }

  .kat__zwijka-guzik::-webkit-details-marker { display: none; }

  .kat__zwijka-strzalka { margin-left: auto; color: var(--v-n-500); font-size: 11px; }
  .kat__zwijka[open] .kat__zwijka-strzalka { transform: rotate(180deg); }

  .kat__zwijka-licznik {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--v-primary);
    color: var(--v-n-0);
    font: 700 11px/1 var(--v-font-body);
  }

  .kat__zwijka-panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--v-s-4);
    padding-top: var(--v-s-4);
  }

  /* W panelu filtry sa ROZWINIETE OD RAZU (uwaga Huberta 30.09: „a nie ze musze tam
     jeszcze rozwijac dany filtr”). Projekt pokazuje tam nadtytul „ROZMIAR” i pod nim
     wartosci jako chipy — drugie rozwijanie w juz rozwinietym panelu to klikniecie
     za duzo. `x-filter-drop` zostaje ten sam komponent; zmienia sie tylko to, jak
     wyglada w TYM miejscu. */
  .kat__zwijka-panel .kat__pastylki { flex-direction: column; align-items: stretch; gap: var(--v-s-4); }

  .kat__zwijka-panel .v-filtr { display: block; }

  /* Pastylka zamienia sie w NADTYTUL grupy: bez obwodki, bez tla, wersaliki. */
  .kat__zwijka-panel .v-filtr__pigulka {
    display: block;
    min-height: 0;
    padding: 0 0 var(--v-s-2);
    border: 0;
    background: none;
    font: 700 12px/1.2 var(--v-font-body); /* makieta */
    letter-spacing: .07em; /* makieta */
    text-transform: uppercase;
    color: var(--v-n-500);
    pointer-events: none; /* nie ma czego rozwijac, wiec nie ma tez co klikac */
  }

  .kat__zwijka-panel .v-filtr__strzalka,
  .kat__zwijka-panel .v-filtr__licznik { display: none; }

  /* Panel wartosci przestaje byc warstwa nad trescia i staje sie rzedem chipow. */
  .kat__zwijka-panel .v-filtr__panel {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: var(--v-s-2);
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  /* Te same dwie reguly co w stopce: od Chrome 131 zamkniete `<details>` chowa
     tresc przez `::details-content`, a starsze silniki sluchaja `display`. */
  .kat__zwijka-panel .v-filtr::details-content {
    content-visibility: visible;
    block-size: auto;
  }

  .kat__zwijka-panel .v-filtr__wartosc {
    min-height: 44px; /* cel dotyku */
    display: inline-flex;
    align-items: center;
    padding: 0 var(--v-s-4);
    border: 1px solid var(--v-n-200);
    border-radius: var(--v-r-btn);
    background: var(--v-n-0);
  }

  .kat__zwijka-panel .v-filtr__wartosc--teraz {
    border-color: var(--v-primary);
    background: var(--v-primary);
    color: var(--v-n-0);
  }

  /* Sortowanie zostaje rozwijane — ono NIE jest w panelu filtrow, tylko obok. */
  .kat__sort .v-filtr__panel { position: absolute; }

  .kat__zwijka-akcje {
    display: flex;
    gap: var(--v-s-3);
    padding-top: var(--v-s-2);
  }

  /* Oba wyjscia maja byc tej samej szerokosci. Samo `flex: 1` nie wystarcza:
     `.v-btn` ma wlasna szerokosc z tresci, wiec „Wyczysc wszystko” zwezalo sie
     i lamalo na dwie linie obok krotszego sasiada. */
  .kat__zwijka-wyczysc,
  .kat__zwijka-pokaz {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* makieta */
    border-radius: var(--v-r-btn);
    font: 600 var(--v-t-ui) var(--v-font-body);
    text-decoration: none;
    cursor: pointer;
  }

  .kat__zwijka-wyczysc {
    border: 1px solid var(--v-n-200);
    background: var(--v-n-0);
    color: var(--v-primary);
  }

  .kat__zwijka-pokaz {
    border: 0;
    background: var(--v-primary);
    color: var(--v-n-0);
  }

  /* Pasek zostaje JEDNYM rzedem: „Filtry” obok „Sortuj”. */
  .kat__filtry { flex-wrap: nowrap; align-items: flex-start; }

  .kat__sort { width: auto; margin-left: 0; flex: none; }

  /* Slowo „SORTUJ” nie miesci sie obok obu pastylek i nic nie wnosi — sama
     nazwa sortowania („Najnowsze”) mowi, co to jest. */
  .kat__sort .kat__etykieta { display: none; }
}


/* ===========================================================================
   SZUFLADA FILTROW W NAGLOWKU APLIKACJI (05.10, prosba Huberta).

   Ten sam panel co na ekranie dzialu, tylko otwierany kwadratowym przyciskiem
   obok pola szukania. Reguly stoja PO przeniesionym bloku wyzej, bo nadpisuja
   jego wyglad pastylki („Filtry” z napisem i szewronem) na sama ikone.

   Arkusz `k-formularze-i-listy.css` wczytuje sie jako OSTATNI z partii — dlatego
   te nadpisania musza byc tutaj, a nie w `k-nawigacja-i-konto.css`.
   =========================================================================== */

/* Panel wychodzi spod calego naglowka, wiec to on jest ukladem odniesienia. */
.jak-aplikacja .v-app-header { position: relative; }

.v-app-header__zwijka { flex: none; min-width: 0; }

/* Przycisk: kwadrat 48 px z sama ikona. Zdejmujemy z niego wszystko, co nadaje
   mu wyglad pastylki z napisem (wysciolka, waga pisma, `gap`). */
.v-app-header__szukanie .kat__zwijka-guzik.v-app-header__filtry {
  width: 48px;
  min-height: 48px;
  gap: 0;
  padding: 0;
  border: 1.5px solid var(--v-n-200);
  border-radius: 12px; /* makieta */
  justify-content: center;
}

.v-app-header__zwijka[open] .v-app-header__filtry {
  border-color: var(--v-primary);
}

/* Warstwa nad trescia, na pelna szerokosc naglowka — jak arkusz w prototypie,
   nie jak rozwijka wciśnieta miedzy pole a krawedz ekranu. */
.v-app-header__filtry-form {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 2;
  display: block;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--v-s-4) 20px calc(var(--v-s-5) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--v-n-200);
  background: var(--v-n-0);
  box-shadow: var(--v-cien-panel, 0 18px 40px rgba(30, 43, 69, .16));
}

/* Na szerokim ekranie zwijka katalogu znika (`display: contents`) — ta NIE MOZE,
   bo podglad aplikacji (`?tryb=aplikacja`) dziala takze na laptopie. */
@media (min-width: 760px) {
  .v-app-header__zwijka { display: block; }
  .v-app-header__zwijka .kat__zwijka-panel { display: flex; }
  .v-app-header__zwijka .kat__zwijka-akcje { display: flex; }

  .v-app-header__zwijka::details-content {
    content-visibility: visible;
    block-size: auto;
    display: block;
  }
}

/* CENA W PANELU FILTROW — dwa pola z kreska, jak w projekcie. Stoi poza siatka
   pastylek, bo to jedyny filtr, ktory sie WPISUJE, a nie wybiera. */
.kat__cena { display: flex; flex-direction: column; gap: var(--v-s-2); }

.kat__cena-etykieta {
  font: 700 12px/1.2 var(--v-font-body); /* makieta */
  letter-spacing: .07em; /* makieta */
  text-transform: uppercase;
  color: var(--v-n-500);
}

.kat__cena-pola { display: flex; align-items: center; gap: var(--v-s-2); }
.kat__cena-pola .v-field { flex: 1; min-width: 0; }
.kat__cena-kreska { flex: none; color: var(--v-n-500); }

.kat__cena-jednostka {
  flex: none;
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-n-600);
}

/* Na web cena stoi w rzedzie filtrow jak pozostale pastylki, wiec etykieta
   nad polami zabieralaby wysokosc calemu paskowi. */
@media (min-width: 760px) {
  .kat__filtry > .kat__cena,
  .kat__zwijka-panel > .kat__cena { flex-direction: row; align-items: center; gap: var(--v-s-3); }
  .kat__cena-pola .v-field { width: 92px; flex: none; }

  /* Pole ceny ma wysokosc PASTYLKI, nie zwyklego pola formularza: w rzedzie
     filtrow stoi obok selectow 34 px, a domyslne 48 px wypychalo caly pasek
     i rzucalo sie w oczy jako jedyny wyzszy element (zrzut Huberta 08.10). */
  .kat__cena-pola .v-input {
    height: 34px; /* makieta: tyle maja pastylki i chipy w pasku filtrow */
    min-height: 34px;
    padding: 0 13px; /* makieta: wysciolka pastylki filtra */
    font: 600 13px/1 var(--v-font-body);
  }
}


/* CO WIDAC ZE SKRYPTAMI, A CO BEZ NICH.

   `.v-tylko-z-js` stalo dotad w `s-oferta.css`, czyli w arkuszu JEDNEGO ekranu —
   na kazdym innym klasa nie robila nic i element widac bylo zawsze. Tu jest
   arkusz partii, wczytywany wszedzie (ta sama pulapka co z `x-offer-mini` 22.09). */
.bez-js .v-tylko-z-js { display: none; }
.z-js .v-tylko-bez-js { display: none; }

/* ---------- x-camera-shutter ---------- */
/* Spust aparatu z ekranu „Aparat dowodowy”: biale kolko w granatowej obwodce.
   Pole pliku siedzi w srodku i jest PRZEZROCZYSTE, nie `display: none` — na czesci
   telefonow schowane w ten sposob przestaje otwierac aparat. */

.v-shutter {
  position: relative;
  display: block;
  width: 74px; /* makieta */
  height: 74px; /* makieta */
  border-radius: 50%;
  border: 4px solid var(--v-primary);
  background: var(--v-n-0);
  box-shadow: inset 0 0 0 4px var(--v-n-0);
  cursor: pointer;
}

.v-shutter:active { transform: scale(.96); }

.v-shutter__pole {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* ===========================================================================
   PASEK FILTRÓW LISTY OFERT (10.10)
   Źródło: makieta v76 „Lista - Pasek filtrow.dc.html” (+ „… - podglad”, desktop 1440
   i mobile 390). Komponenty: `x-list-filter` (rozwijka), `x-sort-select`, `x-filter-chips`
   (etykiety aktywnych filtrów), `x-filter-drawer` (panel „Więcej filtrów” / arkusz „Filtry”),
   `x-filter-section` (sekcja panelu). Układ nagłówka i rzędu: `oferty/czesci/katalog`.

   Zastępuje belkę „1A” na listach (`.vfb`, segment „od kogo”, szufladę telefonu).
   Rozwijki `x-filter-drop` (`.vfb-drop`, `.vfb-pop…`) zostają niżej — używa ich panel
   filtrów w nagłówku aplikacji i strona marki.
   =========================================================================== */

/* ---------- nagłówek listy: tytuł i liczba ofert w jednej linii ---------- */

.vfl-glowa {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px; /* makieta */
}

.vfl-glowa__tytul {
  margin: 0;
  font: 600 40px/1.05 var(--v-font-display); /* makieta */
  letter-spacing: -.03em; /* makieta */
  color: var(--v-primary);
  overflow-wrap: anywhere;
}

.vfl-glowa__ile {
  font: 700 16px/1.3 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

/* Na stronie działu i „Wszystkich działach” nad listą stoi szary pas z `h1` (34 px), więc
   tytuł listy jest tam `h2` i musi być od niego wyraźnie mniejszy (decyzja Huberta 10.10).
   W wynikach wyszukiwania tytuł listy JEST `h1` ekranu i zostaje w rozmiarze z makiety. */
h2.vfl-glowa__tytul { font: 600 var(--v-t-h2) var(--v-font-display); }
h2.vfl-glowa__tytul + .vfl-glowa__ile { font: 700 var(--v-t-ui) var(--v-font-body); }

/* ---------- rząd filtrów ----------
   Przyklejony przy przewijaniu pod nagłówkiem serwisu (`top` ustawia Alpine w katalogu
   na wysokość nagłówka). Pionowe 8 px tła to miejsce na przyklejony stan; odstępy od
   sąsiadów są o nie pomniejszone, więc w spoczynku stoi tam, gdzie w makiecie (20 px pod
   tytułem, 12 px nad etykietami). */

.vfl-rzad {
  position: sticky;
  top: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; /* makieta */
  margin-top: 12px; /* makieta: 20 minus wyściółka */
  padding: 8px 0;
  background: var(--v-n-0);
}

/* Przycisk rozwijki i „Więcej filtrów”: 44 px, promień 12, obwódka 1,5 px. */
.vfl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* makieta */
  height: 44px; /* makieta */
  padding: 0 14px; /* makieta */
  border: 1.5px solid var(--v-n-200);
  border-radius: 12px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 700 14px/1 var(--v-font-body); /* makieta */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.vfl-btn::-webkit-details-marker { display: none; }
.vfl-btn:hover { border-color: var(--v-primary); color: var(--v-primary); }
.vfl-btn:focus-visible { outline: 2px solid var(--v-primary); outline-offset: 2px; }

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

.vfl-btn__caret { font-size: 8px; opacity: .7; } /* makieta */
.vfl-btn--wiecej { padding: 0 16px; font-weight: 800; } /* makieta */

/* ---------- rozwijka ---------- */

.vfl-drop { position: relative; flex-shrink: 0; }

.vfl-pop {
  position: absolute;
  top: calc(100% + 6px); /* makieta */
  left: 0;
  z-index: var(--v-z-dropdown);
  display: flex;
  flex-direction: column;
  width: 260px; /* makieta */
  background: var(--v-n-0);
  border: 1px solid #E3E8EF; /* makieta, TODO token */
  border-radius: 16px; /* makieta */
  box-shadow: 0 16px 40px rgba(30, 43, 69, .14); /* makieta */
  animation: vfl-pojaw .15s var(--v-ease);
}

/* Opisy (Sprzedający, Stan) potrzebują szerszego panelu. */
.vfl-pop--szeroki { width: 340px; } /* makieta */

@keyframes vfl-pojaw {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.vfl-pop__lista {
  display: flex;
  flex-direction: column;
  max-height: 340px; /* makieta */
  padding: 8px;
  overflow: auto;
}

.vfl-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px; /* makieta */
  min-height: 44px; /* makieta */
  padding: 10px; /* makieta */
  border-radius: 10px; /* makieta */
  color: var(--v-primary);
  text-decoration: none;
}

.vfl-opt:hover { background: var(--v-n-50); color: var(--v-primary); }
.vfl-opt:focus-visible { outline: 2px solid var(--v-primary); outline-offset: -2px; }

/* Pole wyboru: kwadrat przy wielu wartościach, koło przy jednej. */
.vfl-opt__pole {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 20px; /* makieta */
  height: 20px; /* makieta */
  margin-top: 1px; /* makieta */
  border: 2px solid var(--v-n-300);
  border-radius: 6px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-n-0);
  font: 800 11px/1 var(--v-font-body); /* makieta */
}

.vfl-opt__pole--kolo { border-radius: 50%; }

.vfl-opt[aria-pressed="true"] .vfl-opt__pole {
  border-color: var(--v-primary);
  background: var(--v-primary);
}

.vfl-opt__tekst { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; } /* makieta */
.vfl-opt__podpis { font: 600 14.5px/1.35 var(--v-font-body); } /* makieta */
.vfl-opt[aria-pressed="true"] .vfl-opt__podpis { font-weight: 800; } /* makieta */
.vfl-opt__opis { font: 400 12.5px/1.4 var(--v-font-body); color: var(--v-n-600); } /* makieta */
.vfl-opt__ile { padding-top: 1px; font: 400 13px/1.35 var(--v-font-body); color: var(--v-n-600); } /* makieta */

.vfl-pop__stopka {
  display: flex;
  align-items: center;
  gap: 8px; /* makieta */
  padding: 10px 12px; /* makieta */
  border-top: 1px solid #EEF1F5; /* makieta, TODO token */
}

.vfl-pop__wyczysc {
  display: flex;
  align-items: center;
  height: 40px; /* makieta */
  padding: 0 12px; /* makieta */
  color: var(--v-n-700);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
  text-decoration: underline;
}

.vfl-pop__pokaz {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 40px; /* makieta */
  border-radius: 10px; /* makieta */
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 800 14px/1 var(--v-font-body); /* makieta */
  text-decoration: none;
}

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

/* ---------- sortowanie: natywny select z „Sortuj:” w środku pola ---------- */

.vfl-sort { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.vfl-sort__pole { position: relative; display: flex; align-items: center; }

.vfl-sort__przedrostek {
  position: absolute;
  left: 14px; /* makieta */
  font: 400 13.5px/1 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
  pointer-events: none;
}

.vfl-sort__lista {
  width: 100%;
  height: 44px; /* makieta */
  padding: 0 30px 0 66px; /* makieta */
  border: 1.5px solid var(--v-n-200);
  border-radius: 12px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 700 14px/1 var(--v-font-body); /* makieta */
  appearance: none;
  cursor: pointer;
}

.vfl-sort__lista:focus-visible { outline: 2px solid var(--v-primary); outline-offset: 2px; }

.vfl-sort__trojkat {
  position: absolute;
  right: 13px; /* makieta */
  font-size: 8px; /* makieta */
  color: var(--v-n-600);
  pointer-events: none;
}

/* ---------- etykiety aktywnych filtrów ---------- */

.vfl-aktywne {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px; /* makieta */
  margin-top: 4px; /* makieta: 12 minus wyściółka rzędu */
}

.vfl-aktywny {
  display: flex;
  align-items: center;
  gap: 8px; /* makieta */
  height: 34px; /* makieta */
  padding: 0 10px 0 14px; /* makieta */
  border-radius: 17px; /* makieta */
  background: var(--v-n-100);
  color: var(--v-primary);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
  text-decoration: none;
}

.vfl-aktywny:hover { background: #DCE2EA; color: var(--v-primary); } /* makieta, TODO token */
.vfl-aktywny__x { font-size: 11px; color: var(--v-n-600); } /* makieta */

.vfl-aktywne__wyczysc {
  display: flex;
  align-items: center;
  height: 34px; /* makieta */
  padding: 0 6px; /* makieta */
  color: var(--v-n-700);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
  text-decoration: underline;
}

/* Zdanie o wybranym rodzaju sprzedających (makieta `sellerNote`, tylko komputer). */
.vfl-notka {
  margin: 12px 0 0;
  font: 400 13px/1.5 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
}

/* Kreska nad listą: 20 px pod ostatnim elementem paska (12 pod rzędem, który ma 8 px tła). */
.vfl-kreska {
  height: 1px;
  margin: 20px 0 0;
  border: 0;
  background: var(--v-n-100);
}

.vfl-rzad + .vfl-kreska { margin-top: 12px; } /* makieta: 20 minus wyściółka */

/* ---------- panel „Więcej filtrów” i arkusz „Filtry” ----------
   Bez JS panel pokazuje `:target` (odnośnik `#filtry`); z JS — klasa od Alpine. */

.vfl-warstwa {
  position: fixed;
  inset: 0;
  z-index: var(--v-z-sheet);
  display: none;
  justify-content: flex-end;
  align-items: stretch;
  background: rgba(20, 28, 46, .38); /* makieta */
  animation: vfl-tlo .15s var(--v-ease);
}

.vfl-warstwa--otwarta,
.bez-js .vfl-warstwa:target { display: flex; }

@keyframes vfl-tlo {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vfl-szuflada {
  display: flex;
  flex-direction: column;
  width: 440px; /* makieta */
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  background: var(--v-n-0);
  box-shadow: 0 0 40px rgba(20, 28, 46, .2); /* makieta */
}

.vfl-szuflada__glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px; /* makieta */
  padding: 18px 20px; /* makieta */
  border-bottom: 1px solid #EEF1F5; /* makieta, TODO token */
}

.vfl-szuflada__tytul {
  margin: 0;
  font: 600 22px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
  color: var(--v-primary);
}

.vfl-szuflada__zamknij {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px; /* makieta */
  height: 44px; /* makieta */
  border-radius: 50%;
  background: #F1F4F8; /* makieta, TODO token */
  color: var(--v-primary);
  font-size: 16px; /* makieta */
  text-decoration: none;
}

.vfl-szuflada__tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 8px 20px 20px; /* makieta */
  overflow: auto;
  overscroll-behavior: contain;
}

.vfl-szuflada__stopka {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  padding: 14px 20px; /* makieta */
  border-top: 1px solid #EEF1F5; /* makieta, TODO token */
}

.vfl-szuflada__wyczysc {
  display: flex;
  align-items: center;
  height: 48px; /* makieta */
  padding: 0 12px; /* makieta */
  color: var(--v-n-700);
  font: 700 14px/1 var(--v-font-body); /* makieta */
  text-decoration: underline;
}

.vfl-szuflada__pokaz {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 52px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 800 15.5px/1 var(--v-font-body); /* makieta */
  text-decoration: none;
}

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

/* ---------- sekcja panelu ---------- */

.vfl-sekcja {
  display: flex;
  flex-direction: column;
  gap: 12px; /* makieta */
  padding: 18px 0; /* makieta */
  border-bottom: 1px solid #EEF1F5; /* makieta, TODO token */
}

.vfl-sekcja__glowa { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vfl-sekcja__tytul { font: 800 15px/1.3 var(--v-font-body); color: var(--v-primary); } /* makieta */
.vfl-sekcja__podpowiedz { font: 400 12.5px/1.3 var(--v-font-body); color: var(--v-n-600); } /* makieta */
.vfl-sekcja__pigulki { display: flex; flex-wrap: wrap; gap: 8px; }
.vfl-sekcja__nota { margin: 0; font: 400 12.5px/1.5 var(--v-font-body); color: var(--v-n-700); } /* makieta */

.vfl-pig {
  display: flex;
  align-items: center;
  gap: 8px; /* makieta */
  min-height: 40px; /* makieta */
  padding: 0 14px; /* makieta */
  border: 1.5px solid var(--v-n-200);
  border-radius: 20px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
  text-decoration: none;
}

.vfl-pig:hover { border-color: var(--v-primary); color: var(--v-primary); }

.vfl-pig[aria-pressed="true"],
.vfl-pig[aria-pressed="true"]:hover {
  border-color: var(--v-primary);
  background: var(--v-primary);
  color: var(--v-n-0);
}

.vfl-pig__ile { font-weight: 600; opacity: .7; } /* makieta */

/* Próbka koloru z danych (`--v-probka`); obwódka, żeby biel była widoczna. */
.vfl-pig__probka {
  width: 14px; /* makieta */
  height: 14px; /* makieta */
  border-radius: 50%;
  background: var(--v-probka, transparent);
  box-shadow: inset 0 0 0 1px rgba(30, 43, 69, .18); /* makieta */
}

/* ---------- szerokości ----------
   Telefon (< 760 px, makieta `mobile`): rząd to „Filtry · n” i sortowanie po połowie,
   rozwijki i „Więcej filtrów” znikają, ich sekcje są w arkuszu od dołu na 88 % ekranu. */

.vfl-tylko-telefon { display: none; }

@media (max-width: 759px) {
  .vfl-tylko-duzy { display: none; }
  .vfl-tylko-telefon { display: revert; }
  .vfl-btn.vfl-tylko-telefon { display: flex; }
  .vfl-szuflada__wyczysc.vfl-tylko-telefon { display: flex; }
  .vfl-sekcja.vfl-tylko-telefon { display: flex; }

  .vfl-glowa__tytul { font-size: 28px; } /* makieta */
  .vfl-glowa__ile { font-size: 14px; } /* makieta */
  h2.vfl-glowa__tytul { font-size: 20px; } /* pod h1 pasa działu (26 px na telefonie) */
  h2.vfl-glowa__tytul + .vfl-glowa__ile { font-size: 13px; }

  /* Tło rzędu = tło strony na telefonie (`--v-n-50`, powłoka), inaczej przyklejony rząd
     byłby białą płytą na szarym. */
  /* Dwie równe połowy (makieta `flex: 1 1 0`). Siatka zamiast flexa: przy `flex-basis: 0`
     wyściółka przycisku dokłada się do jego połowy i „Filtry” wychodziły o 34 px szersze. */
  .vfl-rzad {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 8px; /* makieta: 16 minus wyściółka */
    background: var(--v-n-50);
  }

  .vfl-sort { min-width: 0; margin-left: 0; }
  .vfl-sort__pole { flex: 1; }
  .vfl-sort__przedrostek { display: none; }
  .vfl-sort__lista { padding-left: 14px; } /* makieta */

  .vfl-kreska { margin-top: 16px; } /* makieta */
  .vfl-rzad + .vfl-kreska { margin-top: 8px; } /* makieta: 16 minus wyściółka */

  .vfl-warstwa { align-items: flex-end; }

  .vfl-szuflada {
    width: 100%;
    height: 88%; /* makieta */
    border-radius: 24px 24px 0 0; /* makieta */
  }
}

/* ===========================================================================
   BELKA FILTRÓW 1A
   Źródło: handoff „Vistitio — belka filtrów 1A” (`filter-bar.css`, `FILTRY-1A.md`).
   Wartości przepisane WPROST z paczki — tokeny w niej to nasze tokeny, więc nic
   nie trzeba było przeliczać.

   Od 10.10 listy ofert mają nowy pasek (`.vfl-*`, wyżej). Z belki 1A zostały rozwijki
   `x-filter-drop` — używa ich panel filtrów w nagłówku aplikacji i strona marki.
   =========================================================================== */

/* ---------- rozwijki ---------- */

.vfb-drop { position: relative; flex-shrink: 0; }
.vfb-drop > summary::-webkit-details-marker { display: none; }
.vfb-drop > summary { list-style: none; }

.vfb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px; /* handoff */
  height: 40px; /* handoff */
  padding: 0 13px; /* handoff */
  border: 1.5px solid var(--v-n-200);
  border-radius: var(--v-r-btn);
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 13px/1 var(--v-font-body); /* handoff */
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--v-dur-fast) var(--v-ease);
}

.vfb-btn:hover { border-color: var(--v-primary); }

.vfb-drop[open] > .vfb-btn,
.vfb-btn--on {
  background: var(--v-primary);
  border-color: var(--v-primary);
  color: var(--v-n-0);
}

.vfb-btn__caret { font-size: 10px; opacity: .6; } /* handoff */
.vfb-btn__wnetrze { display: flex; align-items: center; gap: 7px; }
.vfb-btn__ikona { opacity: .55; }
.vfb-btn:focus-visible { outline: 2px solid var(--v-primary); outline-offset: 2px; }

.vfb__sort-label { color: var(--v-n-500); }

/* Etykieta „Sortuj:” na granacie musi sie odbic od tla — n-500 daje na nim 2,4:1. */
.vfb-drop[open] .vfb__sort-label { color: var(--v-n-300); }

/* ---------- panele ---------- */

.vfb-pop {
  position: absolute;
  top: calc(100% + 6px); /* handoff */
  z-index: 40;
  padding: 12px; /* handoff */
  background: var(--v-n-0);
  border: 1px solid var(--v-n-200);
  border-radius: 14px; /* handoff */
  box-shadow: 0 16px 40px rgba(20, 28, 46, .16); /* handoff */
  animation: vfb-fade var(--v-dur-fast) var(--v-ease);
}

.vfb-pop--left { left: 0; }
.vfb-pop--right { right: 0; }

.vfb-pop--grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; /* handoff */
  width: 318px; /* handoff */
}

.vfb-pop--price {
  display: flex;
  flex-direction: column;
  gap: 10px; /* handoff */
  width: 268px; /* handoff */
  padding: 14px; /* handoff */
}

.vfb-pop--menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 180px; /* handoff */
  padding: 6px;
}

@keyframes vfb-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.vfb-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px; /* handoff */
  padding: 5px 8px; /* handoff: wartosc z makiety */
  border: 1px solid var(--v-n-200);
  border-radius: 9px; /* handoff */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 12.5px/1.2 var(--v-font-body); /* handoff */
  text-align: center;
  overflow-wrap: anywhere;
  text-decoration: none;
  cursor: pointer;
}

.vfb-opt[aria-pressed="true"] { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-n-0); }

.vfb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 38px; /* handoff */
  padding: 0 12px; /* handoff */
  border-radius: 9px;
  background: transparent;
  font: 600 13.5px/1 var(--v-font-body); /* handoff */
  color: var(--v-primary);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vfb-row:hover { background: var(--v-n-50); }
.vfb-row__tick { color: var(--v-success); font-weight: 700; }

/* ---------- cena w rozwijce ---------- */

.vfb-price { display: flex; align-items: center; gap: 8px; }
.vfb-price .v-field { flex: 1; min-width: 0; }

.vfb-price .v-input {
  height: 40px; /* handoff */
  min-height: 40px;
  padding: 0 10px; /* handoff */
  border: 1.5px solid var(--v-n-200);
  border-radius: var(--v-r-btn);
  font: 400 13.5px var(--v-font-body); /* handoff */
}

.vfb-price__kreska,
.vfb-price__jednostka { flex: none; color: var(--v-n-600); font: 400 13px/1 var(--v-font-body); }

.vfb-note { margin: 0; font: 400 12px/1.45 var(--v-font-body); color: var(--v-n-600); } /* handoff */

.vfb-pop__akcje { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.vfb-pop__wyczysc {
  font: 600 12.5px/1 var(--v-font-body);
  color: var(--v-n-600);
  text-decoration: underline;
}

.vfb-pop__wyczysc:hover { color: var(--v-primary); }

/* ---------- panel „Stan”: lista z opisami (handoff 6, par. 7) ----------
   Stan to jedyny filtr, ktorego wartosci trzeba WYTLUMACZYC. Roznica miedzy
   „Dobry” a „Zadowalajacy” jest dokladnie tam, gdzie powstaja spory — stad
   wiersze z opisem zamiast pigulek. */

.vfb-pop--list {
  display: flex;
  flex-direction: column;
  width: 378px; /* handoff */
  padding: 0;
  overflow: hidden;
}

/* Szesc pozycji NIE MIESCI SIE naraz i to jest celowe: pasek przewijania mowi,
   ze jest ich wiecej. */
.vfb-list {
  display: flex;
  flex-direction: column;
  max-height: 352px; /* handoff */
  overflow: auto;
}

.vfb-item {
  display: flex;
  align-items: flex-start;
  gap: 14px; /* handoff */
  width: 100%;
  padding: 14px 16px; /* handoff */
  border-bottom: 1px solid var(--v-n-100);
  background: var(--v-n-0);
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vfb-item:hover { background: var(--v-n-50); }
.vfb-item[aria-pressed="true"] { background: var(--v-n-50); }

/* Stan, ktorego nikt w tej kategorii nie ma: zostaje widoczny i wyszarzony.
   Brak pozycji nie mowi, czy takiego stanu nie ma, czy filtr jest zepsuty. */
.vfb-item--pusty { opacity: .5; cursor: default; pointer-events: none; }

.vfb-item__txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.vfb-item__name { font: 700 14px/1.3 var(--v-font-body); color: var(--v-primary); } /* handoff */

.vfb-item__desc {
  font: 400 12.5px/1.45 var(--v-font-body); /* handoff */
  color: var(--v-n-600);
  text-wrap: pretty;
}

.vfb-item__side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding-top: 1px; }

.vfb-item__count {
  min-width: 18px;
  text-align: right;
  font: 600 12px/1 var(--v-font-body); /* handoff */
  color: var(--v-n-600);
}

.vfb-item__count--zero { color: var(--v-n-400); }

.vfb-box {
  display: grid;
  place-items: center;
  width: 22px; /* handoff */
  height: 22px; /* handoff */
  border: 1.5px solid var(--v-n-300);
  border-radius: var(--v-r-badge);
  background: var(--v-n-0);
  color: var(--v-n-0);
}

.vfb-item[aria-pressed="true"] .vfb-box { background: var(--v-primary); border-color: var(--v-primary); }

.vfb-foot {
  display: flex;
  gap: 8px;
  padding: 12px 16px; /* handoff */
  border-top: 1px solid var(--v-n-100);
  background: var(--v-n-0);
}

/* OBA przyciski stopki mają tę samą wysokość. Handoff daje im jedną klasę
   (`.vfb-btn`), u nas „Wyczyść” jest odnośnikiem, a „Pokaż wyniki” komponentem
   przycisku — bez wyrównania jeden był o 8 px wyższy (zrzut Huberta 08.10). */
.vfb-foot .vfb-btn,
.vfb-foot .v-btn {
  height: 40px; /* handoff: wysokosc kontrolki */
  min-height: 40px;
  text-decoration: none;
}

.vfb-foot__pokaz { flex: 1; justify-content: center; }

/* ---------- rozmiar: kafle z licznikiem (handoff 36, par. 10) ---------- */

.vfb-pop--sizes {
  display: flex;
  flex-direction: column;
  width: 330px; /* handoff */
  padding: 0;
  overflow: hidden;
}

.vfb-sizes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px; /* handoff */
  padding: 12px;
  max-height: 330px; /* handoff */
  overflow: auto;
}

.vfb-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px; /* handoff */
  padding: 5px 8px; /* handoff */
  border: 1px solid var(--v-n-200);
  border-radius: 9px; /* handoff */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 12.5px/1.2 var(--v-font-body); /* handoff */
  text-decoration: none;
  cursor: pointer;
}

.vfb-tile[aria-pressed="true"] { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-n-0); }
.vfb-tile--pusty { opacity: .5; cursor: default; pointer-events: none; }
.vfb-tile__count { font: 600 11px/1 var(--v-font-body); color: var(--v-n-500); } /* handoff */
.vfb-tile[aria-pressed="true"] .vfb-tile__count { color: rgba(255, 255, 255, .75); } /* handoff */

.vfb-note--pod { padding: 0 12px 12px; }

/* ---------- kolor: dwie kolumny z probkami ---------- */

.vfb-pop--colors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 348px; /* handoff */
  padding: 0;
  max-height: 330px; /* handoff */
  overflow: auto;
}

.vfb-color {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px; /* handoff */
  padding: 8px 12px; /* handoff */
  border-bottom: 1px solid var(--v-n-100);
  background: var(--v-n-0);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vfb-color:hover { background: var(--v-n-50); }
.vfb-color[aria-pressed="true"] { background: var(--v-n-50); }
.vfb-color--pusty { opacity: .5; cursor: default; pointer-events: none; }

/* Barwy probek leza w `tokens.css` jako `--v-probka-*`: to dane o TOWARZE, nie
   tokeny marki, ale kolor w arkuszu komponentu jest w tym projekcie zakazany,
   a jedna mapa nazwa -> barwa obsluguje i filtr, i przyszly formularz wystawiania. */
.vfb-color__dot--czarny { background: var(--v-probka-czarny); }
.vfb-color__dot--bialy { background: var(--v-probka-bialy); }
.vfb-color__dot--szary { background: var(--v-probka-szary); }
.vfb-color__dot--granatowy { background: var(--v-probka-granatowy); }
.vfb-color__dot--niebieski { background: var(--v-probka-niebieski); }
.vfb-color__dot--zielony { background: var(--v-probka-zielony); }
.vfb-color__dot--czerwony { background: var(--v-probka-czerwony); }
.vfb-color__dot--rozowy { background: var(--v-probka-rozowy); }
.vfb-color__dot--fioletowy { background: var(--v-probka-fioletowy); }
.vfb-color__dot--zolty { background: var(--v-probka-zolty); }
.vfb-color__dot--pomaranczowy { background: var(--v-probka-pomaranczowy); }
.vfb-color__dot--brazowy { background: var(--v-probka-brazowy); }
.vfb-color__dot--bezowy { background: var(--v-probka-bezowy); }
.vfb-color__dot--zloty { background: var(--v-probka-zloty); }
.vfb-color__dot--srebrny { background: var(--v-probka-srebrny); }
.vfb-color__dot--wiele { background: var(--v-probka-wiele); }

/* Obwodka na probce jest po to, zeby BIEL byla widoczna na bialym panelu. */
.vfb-color__dot {
  width: 20px; /* handoff */
  height: 20px; /* handoff */
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(20, 28, 46, .14); /* handoff */
}

.vfb-color__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 13px/1 var(--v-font-body); /* handoff */
  color: var(--v-primary);
}

/* ---------- marka: lista z wyszukiwarka ---------- */

.vfb-pop--brands {
  display: flex;
  flex-direction: column;
  width: 332px; /* handoff */
  padding: 0;
  overflow: hidden;
}

.vfb-search { padding: 12px 14px; border-bottom: 1px solid var(--v-n-100); } /* handoff */
.vfb-search .v-field { width: 100%; }

.vfb-search .v-input {
  width: 100%;
  height: 40px; /* handoff */
  min-height: 40px;
  padding: 0 12px; /* handoff */
  border: 1.5px solid var(--v-n-200);
  border-radius: var(--v-r-btn);
  font: 400 13.5px var(--v-font-body); /* handoff */
}

.vfb-brands { display: flex; flex-direction: column; max-height: 330px; overflow: auto; } /* handoff */

.vfb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px; /* handoff */
  padding: 8px 14px; /* handoff */
  border-bottom: 1px solid var(--v-n-100);
  background: var(--v-n-0);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.vfb-brand:hover { background: var(--v-n-50); }
.vfb-brand[aria-pressed="true"] { background: var(--v-n-50); }
.vfb-brand--pusty { opacity: .5; cursor: default; pointer-events: none; }

.vfb-brand__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 13.5px/1 var(--v-font-body); /* handoff */
  color: var(--v-primary);
}

.vfb-empty { padding: 16px 14px; font: 400 13px/1.5 var(--v-font-body); color: var(--v-n-600); } /* handoff */

.vfb-box--maly { width: 20px; height: 20px; } /* handoff: checkbox w kolorze i marce */

/* ===========================================================================
   x-lista-wyboru — rozwijka marki, koloru i materiału (handoff 39, „Dodaj ofertę”).
   Wszystkie wymiary to pomiar z makiety.
   =========================================================================== */

.v-lista { position: relative; min-width: 0; }

.v-lista__box { position: relative; }

/* Wygląd na `summary` wprost jest bezpieczny dopiero z `display: flex` — domyślne
   `list-item` dokleja znacznik listy, a `display: none` na summary zepsułoby `details`. */
.v-lista__guzik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* makieta */
  height: 46px; /* makieta */
  padding: 0 14px; /* makieta */
  border-radius: 11px; /* makieta */
  border: 1.5px solid var(--v-n-300); /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 15px/1 var(--v-font-body); /* makieta */
  text-align: left;
  cursor: pointer;
  list-style: none;
  margin-top: 6px; /* równo z odstępem etykiety w .v-field */
}

.v-lista__guzik::-webkit-details-marker { display: none; }

.v-lista__guzik--blad { border: 2px solid var(--v-error); }

.v-lista__guzik:focus-visible {
  outline: 2px solid var(--v-secondary);
  outline-offset: 2px;
}

.v-lista__wybrana {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  min-width: 0;
}

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

/* Placeholder ma być widocznie słabszy od wybranej wartości — inaczej „Wybierz markę”
   wygląda jak marka o tej nazwie. */
.v-lista__napis--pusty { color: var(--v-n-500); font-weight: 400; }

.v-lista__strzalka { font-size: 10px; opacity: .6; flex-shrink: 0; } /* makieta */

/* Próbka koloru to ZAOKRĄGLONY KWADRAT 20 px, nie kółko (pomiar z makiety).
   Tło idzie przez `background`, bo „Wielokolorowy” jest gradientem. */
.v-lista__probka {
  /* Wartość podaje znacznik zmienną `--v-probka` (kolor z `kolory.json`), regułę
     trzyma arkusz. „Wielokolorowy” jest gradientem, więc `background`, nie `-color`. */
  background: var(--v-probka, transparent);
  width: 20px; /* makieta */
  height: 20px; /* makieta */
  border-radius: 6px; /* makieta */
  border: 1px solid var(--v-n-200); /* makieta */
  flex-shrink: 0;
}

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

.v-lista__opcja {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  min-height: 42px; /* makieta */
  padding: 0 12px; /* makieta */
  border-radius: 9px; /* makieta */
  font: 600 14px/1.3 var(--v-font-body); /* makieta */
  color: var(--v-primary);
  cursor: pointer;
}

/* Pole radio zostaje w drzewie — bez CSS ma działać wybór, a z CSS stan pozycji
   rysuje `:checked`, nie osobna klasa. */
.v-lista__pole {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.v-lista__opcja:has(.v-lista__pole:checked) {
  background: var(--v-n-50); /* makieta */
  font-weight: 700; /* makieta */
}

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

.v-lista__opcja:has(.v-lista__pole:focus-visible) {
  outline: 2px solid var(--v-secondary);
  outline-offset: -2px;
}

.v-lista__opcja-napis { flex: 1; min-width: 0; }

/* Ptaszek stoi tylko przy wybranej pozycji — miejsce trzyma zawsze, żeby lista
   nie drgała przy zmianie wyboru. */
.v-lista__ptaszek {
  flex-shrink: 0;
  color: var(--v-success); /* makieta: #2E7D5B */
  font-weight: 700; /* makieta */
  visibility: hidden;
}

.v-lista__opcja:has(.v-lista__pole:checked) .v-lista__ptaszek { visibility: visible; }

/* Pole szukania na górze panelu — 1:1 z handoffem 40 (Hubert: „tak ma wyglądać szukajka
   jak tutaj”). Szare tło odróżnia je od pozycji listy, a przy ognisku robi się białe
   z granatową obwódką. Na telefonie 46 px zamiast 40 — tak rysuje to Prototyp Mobile. */
.v-lista__szukaj-blok { padding: 4px 4px 6px; } /* makieta */

.v-lista__szukaj {
  width: 100%;
  min-width: 0;
  height: 40px; /* makieta: desktop */
  padding: 0 12px; /* makieta */
  border-radius: 9px; /* makieta */
  border: 1.5px solid var(--v-n-100); /* makieta */
  background: var(--v-n-50); /* makieta */
  color: var(--v-primary);
  font: 400 14px/1 var(--v-font-body); /* makieta */
}

.v-lista__szukaj::placeholder { color: var(--v-n-500); }

.v-lista__szukaj:focus {
  outline: none;
  border: 1.5px solid var(--v-primary); /* makieta */
  background: var(--v-n-0); /* makieta */
}

@media (max-width: 759px) {
  .v-lista__szukaj { height: 46px; /* makieta: mobile */ }
}

/* Pusty wynik szukania mówi, CO ZROBIĆ dalej — sama pusta lista zostawia człowieka
   bez wyjścia, a wyjście tu jest i stoi pozycję niżej. */
.v-lista__pusto {
  padding: 10px 12px; /* makieta */
  font: 400 13px/1.45 var(--v-font-body); /* makieta */
  color: var(--v-n-500); /* makieta */
}

.v-lista__szukaj:focus-visible {
  outline: 2px solid var(--v-secondary);
  outline-offset: -2px;
}


/* Przeniesione z s-konto.css (24.09): styl komponentu nie moze lezec w arkuszu widoku —
   pole pliku stoi tez w oknie przewodnika, ktore wisi nad kazdym ekranem serwisu. */
/* ---------- pole jednego pliku (x-file-input) ---------- */
/* Zrodlo: przycisk „Dodaj wpis CEIDG/KRS" z kreatora konta Pro. Przerywana obwodka
   mowi „tu jeszcze nic nie ma", ciagla zielona — „plik jest". */

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

.v-fin__pole {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
  align-items: flex-start;
  padding: var(--v-s-4);
  border: 1.5px dashed var(--v-n-300);
  border-radius: var(--v-r-card);
  background: var(--v-n-0);
  cursor: pointer;
  transition: border-color var(--v-dur-fast), background var(--v-dur-fast);
}

.v-fin__pole:hover { border-color: var(--v-primary); }

.v-fin--wybrany .v-fin__pole {
  border: 1.5px solid var(--v-success);
  background: var(--v-success-soft);
}

.v-fin--blad .v-fin__pole { border: 2px solid var(--v-error); }

.v-fin__etykieta {
  font: 700 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.v-fin__podpis {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-n-500);
}

/* Pole pliku jest niewidoczne, ale NIE `display: none` — inaczej klawiatura go nie
   znajdzie i etykieta przestaje byc przyciskiem dla czytnika ekranu. */
.v-fin__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.v-fin__input:focus-visible + .v-fin__error,
.v-fin__pole:focus-within { outline: 2px solid var(--v-secondary); outline-offset: 2px; }

/* Wariant „przycisk": to samo pole, ale wyglada jak przycisk wtorny — bo stoi
   w rzedzie akcji, a nie jako obszar do upuszczenia pliku. */
.v-fin--przycisk .v-fin__pole {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--v-s-4);
  border: 1px solid var(--v-n-200);
  border-radius: var(--v-r-btn);
  background: var(--v-n-0);
  text-align: left;
}

.v-fin--przycisk .v-fin__etykieta {
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
}

.v-fin--przycisk.v-fin--wybrany .v-fin__pole { border-color: var(--v-primary); background: var(--v-n-0); }


.v-fin__error {
  font: 400 var(--v-t-note) var(--v-font-body);
  color: var(--v-error-text);
}

/* ===========================================================================
   x-kategoria-picker — jedno pole „Kategoria” (handoff v64, „Vistitio Wybor
   Kategorii.dc.html”, README handoffu). Wymiary to pomiar z makiety: desktop
   rozwijka pod polem, do 760 px arkusz od dołu.
   =========================================================================== */

.v-kat { min-width: 0; }

/* Etykieta, pole, błąd, chipy i pomoc w jednej kolumnie co 6 px (makieta: gap 6). */
.v-kat__js {
  display: flex;
  flex-direction: column;
  gap: 6px; /* makieta */
  min-width: 0;
}

.v-kat__pole { position: relative; min-width: 0; }

.v-kat__guzik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* makieta */
  width: 100%;
  min-width: 0;
  height: 46px; /* makieta */
  padding: 0 14px; /* makieta */
  border-radius: 11px; /* makieta */
  border: 1.5px solid var(--v-n-300); /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 15px/1 var(--v-font-body); /* makieta: ui/15 600 */
  text-align: left;
  cursor: pointer;
}

.v-kat__guzik:hover { border-color: var(--v-primary); }

/* Otwarte: 2 px granatu; błąd: 2 px czerwieni (tabela kolorów makiety). */
.v-kat__guzik--otwarte { border: 2px solid var(--v-primary); } /* makieta */
.v-kat__guzik--blad { border: 2px solid var(--v-error); } /* makieta */

.v-kat__guzik:focus-visible {
  outline: 2px solid var(--v-secondary);
  outline-offset: 2px;
}

.v-kat__sciezka {
  display: flex;
  align-items: center;
  gap: 6px; /* makieta */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.v-kat__sciezka[x-cloak],
.v-kat__pusto[x-cloak],
.v-kat__zmien[x-cloak] { display: none; }

.v-kat__sciezka .v-kat__dzial,
.v-kat__sciezka .v-kat__znak { flex-shrink: 0; }

.v-kat__nazwa { overflow: hidden; text-overflow: ellipsis; }

.v-kat__dzial { color: var(--v-n-600); } /* makieta: dział w ścieżce */
.v-kat__znak { color: var(--v-n-500); } /* makieta: znak › */

.v-kat__pusto { color: var(--v-n-600); } /* makieta: „Wybierz kategorię” w n-600 */

.v-kat__prawa {
  display: flex;
  align-items: center;
  gap: 8px; /* makieta */
  flex-shrink: 0;
}

.v-kat__zmien {
  font-size: 13px; /* makieta */
  font-weight: 700; /* makieta */
  text-decoration: underline;
  text-underline-offset: 3px; /* makieta */
}

.v-kat__strzalka { font-size: 10px; opacity: .6; } /* makieta */

/* ---------- panel: rozwijka pod polem (desktop) ---------- */
.v-kat__panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px); /* makieta */
  z-index: 30; /* makieta */
  display: flex;
  flex-direction: column;
  max-height: 420px; /* makieta */
  overflow: hidden;
  background: var(--v-n-0);
  border: 1px solid var(--v-n-200); /* makieta */
  border-radius: 14px; /* makieta */
  box-shadow: 0 16px 40px rgba(20, 28, 46, .16); /* makieta */
}

/* Uchwyt, tytuł i ✕ ma tylko arkusz na telefonie. */
.v-kat__uchwyt,
.v-kat__naglowek,
.v-kat__tlo { display: none; }

.v-kat__gora {
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
  padding: 10px; /* makieta */
  border-bottom: 1px solid var(--v-n-100); /* makieta */
  flex-shrink: 0;
}

.v-kat__szukaj-blok { position: relative; display: flex; align-items: center; }

/* Szukanie z handoffu 40 — ten sam wygląd co szukajka w x-lista-wyboru. */
.v-kat__szukaj {
  width: 100%;
  min-width: 0;
  height: 40px; /* makieta: desktop */
  padding: 0 40px 0 12px; /* makieta */
  border-radius: 9px; /* makieta */
  border: 1.5px solid var(--v-n-100); /* makieta */
  background: var(--v-n-50); /* makieta */
  color: var(--v-primary);
  font: 400 14px/1 var(--v-font-body); /* makieta */
}

.v-kat__szukaj::placeholder { color: var(--v-n-500); }

.v-kat__szukaj:focus {
  outline: none;
  border: 1.5px solid var(--v-primary); /* makieta */
  background: var(--v-n-0); /* makieta */
}

.v-kat__wyczysc {
  position: absolute;
  right: 6px; /* makieta */
  width: 28px; /* makieta */
  height: 28px; /* makieta */
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--v-n-100); /* makieta */
  color: var(--v-n-700); /* makieta */
  font-size: 13px; /* makieta */
  cursor: pointer;
}

.v-kat__sugestie { display: flex; flex-direction: column; gap: 6px; } /* makieta */

.v-kat__eyebrow {
  font-size: 11.5px; /* makieta */
  font-weight: 700; /* makieta */
  color: var(--v-n-600);
  text-transform: uppercase;
  letter-spacing: .06em; /* makieta */
}

.v-kat__chipy { display: flex; flex-wrap: wrap; gap: 6px; } /* makieta */

.v-kat__chip {
  display: flex;
  align-items: center;
  gap: 5px; /* makieta */
  height: 32px; /* makieta: desktop */
  padding: 0 11px; /* makieta */
  border-radius: 8px; /* makieta */
  border: 1.5px solid var(--v-n-300); /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 600 12.5px/1 var(--v-font-body); /* makieta */
  white-space: nowrap;
  cursor: pointer;
}

.v-kat__chip:hover { border-color: var(--v-primary); }

.v-kat__lista {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 6px 6px; /* makieta */
}

/* Wyniki szukania zaczynają się 6 px pod linią (plansza D3). */
.v-kat__lista--wyniki { padding-top: 6px; } /* makieta */

.v-kat__grupy,
.v-kat__grupa,
.v-kat__wyniki {
  display: flex;
  flex-direction: column;
  gap: 2px; /* makieta */
}

.v-kat__grupa-naglowek {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--v-n-0);
  padding: 10px 12px 6px; /* makieta */
  font-size: 11.5px; /* makieta */
  font-weight: 700; /* makieta */
  color: var(--v-n-600);
  text-transform: uppercase;
  letter-spacing: .06em; /* makieta */
}

.v-kat__opcja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px; /* makieta */
  min-height: 40px; /* makieta: desktop */
  padding: 0 12px; /* makieta */
  border-radius: 9px; /* makieta */
  color: var(--v-primary);
  font: 600 14px/1.3 var(--v-font-body); /* makieta */
  cursor: pointer;
}

.v-kat__opcja--wybrana { background: var(--v-n-50); font-weight: 700; } /* makieta */
.v-kat__opcja--aktywna { background: var(--v-n-100); } /* makieta: klawiatura, hover */

.v-kat__wynik { min-width: 0; }

.v-kat__traf {
  background: var(--v-secondary-soft); /* makieta */
  color: var(--v-primary);
  border-radius: 3px; /* makieta */
  font-weight: 800; /* makieta */
}

.v-kat__ptaszek { flex-shrink: 0; color: var(--v-success); font-weight: 700; } /* makieta */

.v-kat__brak {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px; /* makieta */
  padding: 14px 12px; /* makieta: desktop */
}

/* Brak wyników liczy odstęp od linii sam, bez 6 px listy wyników. */
.v-kat__lista--wyniki .v-kat__brak { margin-top: -6px; }

.v-kat__brak-tekst { font-size: 14px; line-height: 1.5; color: var(--v-n-700); } /* makieta */

.v-kat__pelna {
  height: 36px; /* makieta: desktop */
  padding: 0 14px; /* makieta */
  border-radius: 9px; /* makieta */
  border: 1.5px solid var(--v-n-300); /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 700 13.5px/1 var(--v-font-body); /* makieta */
  cursor: pointer;
}

.v-kat__pelna:hover { border-color: var(--v-primary); }

/* ---------- pod polem: błąd, podpowiedzi, pomoc ---------- */
.v-kat__blad { font-size: 12px; color: var(--v-error-text); } /* makieta */

.v-kat__pod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px; /* makieta */
}

.v-kat__pod-etykieta {
  font-size: 12px; /* makieta */
  font-weight: 600; /* makieta */
  color: var(--v-n-600);
  margin-right: 2px; /* makieta */
}

.v-kat__pomoc { font-size: 12.5px; line-height: 1.45; color: var(--v-n-500); } /* makieta */

/* ---------- telefon: arkusz od dołu (od 44 px, promień 20) ---------- */
@media (max-width: 760px) {
  html.v-kat-arkusz { overflow: hidden; }

  .v-kat__tlo {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(20, 28, 46, .45); /* makieta: tło 45 % granatu */
  }

  .v-kat__panel {
    position: fixed;
    top: 44px; /* makieta: arkusz od 44 px */
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 61;
    max-height: none;
    border: none;
    border-radius: 20px 20px 0 0; /* makieta */
    box-shadow: none;
  }

  .v-kat__uchwyt {
    display: block;
    width: 36px; /* makieta */
    height: 4px; /* makieta */
    border-radius: 2px; /* makieta */
    background: var(--v-n-200); /* makieta */
    align-self: center;
    margin-top: 8px; /* makieta */
    flex-shrink: 0;
  }

  .v-kat__naglowek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px 0 20px; /* makieta */
    flex-shrink: 0;
  }

  .v-kat__tytul {
    font: 600 19px/1.2 var(--v-font-display); /* makieta: Outfit 19 */
    letter-spacing: -.02em; /* makieta */
    color: var(--v-primary);
  }

  .v-kat__zamknij {
    width: 44px; /* makieta */
    height: 44px; /* makieta */
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--v-primary);
    font-size: 18px; /* makieta */
    cursor: pointer;
  }

  .v-kat__gora { gap: 12px; padding: 4px 16px 12px; } /* makieta */

  .v-kat__szukaj {
    height: 46px; /* makieta: mobile */
    border-radius: 11px; /* makieta */
    font-size: 16px; /* makieta: bez zoomu iOS */
  }

  .v-kat__wyczysc { width: 34px; height: 34px; } /* makieta */

  .v-kat__chip { height: 36px; } /* makieta: mobile */

  .v-kat__lista { padding: 0 8px 24px; } /* makieta */
  .v-kat__lista--wyniki { padding-top: 8px; } /* makieta */

  .v-kat__grupa-naglowek { padding: 14px 12px 6px; } /* makieta */

  .v-kat__opcja { min-height: 48px; font-size: 15px; } /* makieta: mobile */

  .v-kat__brak { padding: 20px 12px; } /* makieta */
  .v-kat__lista--wyniki .v-kat__brak { margin-top: -8px; }
  .v-kat__pelna { height: 44px; } /* makieta */

  /* Pod polem etykieta podpowiedzi stoi w osobnym wierszu (plansza M5). */
  .v-kat__pod-etykieta { width: 100%; margin-right: 0; } /* makieta */
}

/* ---------- x-more-menu ---------- */
/* Źródło: makieta v77 „Promowanie - karta i lista”, wiersz „Moich ofert”: przycisk „⋯”
   44 × 44, promień 11, obwódka 1,5 px n-100, znak n-600 18/700. Lista pod nim to biała
   karta z pozycjami jak w menu konta — makieta rysuje tylko przycisk. Wygląd przycisku
   na `<span>` w `<summary>` (gotcha 19.09: własny `display` na `<summary>` psuje chowanie). */

.v-more { position: relative; }

.v-more__summary { list-style: none; cursor: pointer; }
.v-more__summary::-webkit-details-marker { display: none; }

.v-more__guzik {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 11px; /* makieta */
  border: 1.5px solid var(--v-n-100);
  background: var(--v-n-0);
  color: var(--v-n-600);
  font: 700 18px/1 var(--v-font-body); /* makieta */
}

.v-more__summary:hover .v-more__guzik,
.v-more[open] .v-more__guzik { background: var(--v-n-50); }

.v-more__summary:focus-visible { outline: none; }
.v-more__summary:focus-visible .v-more__guzik { outline: 2px solid var(--v-primary); outline-offset: 2px; }

.v-more__lista {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: var(--v-z-dropdown);
  min-width: 224px;
  max-width: min(300px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--v-n-100);
  background: var(--v-n-0);
  box-shadow: var(--v-shadow-card);
}

/* Formularz niesie jedną pozycję i nie ma własnego wyglądu. */
.v-more__lista form { display: contents; }

/* Pozycje to zwykłe `x-button` — lista nadaje im wygląd wiersza menu. */
/* Dłuższa pozycja (stan nagrania, zdjęcie z aparatu) łamie się w obrębie listy. */
.v-more__lista .v-btn {
  width: 100%;
  height: auto;
  min-height: 44px;
  justify-content: flex-start;
  padding: 10px 12px; /* makieta: wiersz 44 px przy jednej linii */
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--v-primary);
  font: 600 14px/1.3 var(--v-font-body);
  text-align: left;
}

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

/* ---------- Narzędzia zbiorcze: x-bulk-toggle, x-bulk-check, x-bulk-tools ---------- */
/* Makieta v78 „Pro Moje oferty” (etap B kont firmowych): tryb „Zaznacz”, pasek akcji i okno
   z podglądem zmian. Wartości z makiety 1:1; kolory z tokenów (#EEF1F5/#F0F3F7/#F1F4F8 → n-100/n-50). */

.v-zbiorczo-przelacznik { display: inline-flex; }
.v-btn.v-zbiorczo-przelacznik__zaznacz,
.v-btn.v-zbiorczo-przelacznik__gotowe {
  height: 44px; /* makieta */
  padding: 0 var(--v-s-4);
  border-radius: var(--v-s-3);
  gap: var(--v-s-2);
  font: 700 14px/1 var(--v-font-body); /* makieta */
}
.v-btn.v-zbiorczo-przelacznik__zaznacz { border: 1.5px solid var(--v-primary); background: var(--v-n-0); color: var(--v-primary); }
.v-zbiorczo-przelacznik__kwadrat { width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--v-primary); } /* makieta */

.v-zbiorczo {
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
  padding: var(--v-s-3) 14px; /* makieta */
  border: 1.5px solid var(--v-primary);
  border-radius: var(--v-r-card);
  background: var(--v-n-0);
}
.v-zbiorczo__gora { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.v-zbiorczo__wszystkie {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  min-height: 44px;
  padding: 0 var(--v-s-2) 0 var(--v-s-1);
  border: 0;
  background: transparent;
  color: var(--v-primary);
  font: 700 14px/1.2 var(--v-font-body); /* makieta */
  cursor: pointer;
}
.v-zbiorczo__kwadrat,
.v-zbiorczo-ptaszek__kwadrat {
  width: 22px;
  height: 22px;
  border-radius: 6px; /* makieta */
  border: 2px solid var(--v-n-300);
  background: var(--v-n-0);
  color: var(--v-n-0);
  display: grid;
  place-items: center;
  font: 800 13px/1 var(--v-font-body); /* makieta */
}
.v-zbiorczo__kwadrat { border-color: var(--v-primary); }
.v-zbiorczo__kwadrat--pelny,
.v-zbiorczo-ptaszek[aria-checked="true"] .v-zbiorczo-ptaszek__kwadrat { border-color: var(--v-primary); background: var(--v-primary); }
.v-zbiorczo__akcje { display: grid; grid-template-columns: repeat(4, max-content); gap: var(--v-s-2); }
.v-btn.v-zbiorczo__akcja {
  height: 44px; /* makieta */
  padding: 0 14px; /* makieta */
  border-radius: var(--v-s-3);
  border: 1.5px solid var(--v-primary);
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 700 14px/1 var(--v-font-body); /* makieta */
  white-space: nowrap;
}
.v-btn.v-zbiorczo__akcja:disabled { border-color: var(--v-n-200); color: var(--v-n-500); cursor: not-allowed; }

.v-zbiorczo-ptaszek {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.v-zbiorczo-ptaszek:disabled { opacity: .4; cursor: not-allowed; } /* makieta */

.v-zbiorczo-okno { position: fixed; inset: 0; z-index: 1000; background: rgba(20, 28, 46, .38); } /* makieta */
.v-zbiorczo-okno__panel {
  position: absolute;
  top: 48px; /* makieta */
  left: 50%;
  transform: translateX(-50%);
  width: 640px; /* makieta */
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 96px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  border-radius: 20px; /* makieta */
  background: var(--v-n-0);
  box-shadow: 0 24px 60px rgba(20, 28, 46, .25); /* makieta */
  outline: none;
}
.v-zbiorczo-okno__glowa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-3);
  padding: 18px var(--v-s-5); /* makieta */
  border-bottom: 1px solid var(--v-n-100);
}
.v-zbiorczo-okno__tytul { font: 600 21px/1.2 var(--v-font-display); letter-spacing: -.02em; color: var(--v-primary); } /* makieta */
.v-zbiorczo-okno__zamknij {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--v-n-50);
  color: var(--v-primary);
  font-size: 15px;
  cursor: pointer;
}
.v-zbiorczo-okno__tresc { display: flex; flex-direction: column; gap: var(--v-s-4); padding: 18px var(--v-s-5); } /* makieta */
.v-zbiorczo-okno__pola { display: flex; flex-direction: column; gap: var(--v-s-4); }
.v-zbiorczo-okno__rzad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.v-zbiorczo-okno__dwa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v-zbiorczo-okno__etykieta { display: flex; flex-direction: column; gap: 6px; font: 800 13px/1.2 var(--v-font-body); color: var(--v-primary); } /* makieta */
.v-zbiorczo-okno__nota { font: 400 13px/1.5 var(--v-font-body); color: var(--v-n-700); } /* makieta */
.v-zbiorczo-okno__nota--duza { font-size: 14px; line-height: 1.55; } /* makieta */
.v-zbiorczo-okno__blad { font: 700 13px/1.4 var(--v-font-body); color: var(--v-error-text); } /* makieta */
.v-zbiorczo-okno__stopka {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px var(--v-s-5); /* makieta */
  border-top: 1px solid var(--v-n-100);
}
.v-zbiorczo-okno__anuluj {
  height: 48px;
  padding: 0 var(--v-s-3);
  border: 0;
  background: transparent;
  color: var(--v-n-700);
  font: 700 14px/1 var(--v-font-body); /* makieta */
  text-decoration: underline;
  cursor: pointer;
}
.v-btn.v-zbiorczo-okno__zastosuj { flex: 1; height: 52px; border-radius: var(--v-s-3); font: 700 15px/1 var(--v-font-body); } /* makieta */
.v-btn.v-zbiorczo-okno__zastosuj:disabled { background: var(--v-n-300); border-color: var(--v-n-300); color: var(--v-n-0); cursor: not-allowed; }

.v-zbiorczo-segment { display: grid; gap: var(--v-s-1); padding: var(--v-s-1); border-radius: var(--v-s-3); background: var(--v-n-100); }
.v-zbiorczo-segment--trzy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v-zbiorczo-segment--kierunek { display: flex; }
.v-zbiorczo-segment__opcja {
  height: 40px; /* makieta */
  padding: 0 var(--v-s-1);
  white-space: nowrap;
  border: 0;
  border-radius: 9px; /* makieta */
  background: transparent;
  color: var(--v-primary);
  font: 800 13.5px/1 var(--v-font-body); /* makieta */
  cursor: pointer;
}
.v-zbiorczo-segment--kierunek .v-zbiorczo-segment__opcja { height: 44px; padding: 0 var(--v-s-4); font-size: 14px; } /* makieta */
.v-zbiorczo-segment__opcja[aria-pressed="true"] { background: var(--v-n-0); box-shadow: 0 1px 3px rgba(30, 43, 69, .14); } /* makieta */

.v-zbiorczo-pole {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  flex: 1;
  min-width: 140px; /* makieta */
  height: 52px; /* makieta */
  padding: 0 14px;
  border: 1.5px solid var(--v-n-300);
  border-radius: var(--v-s-3);
  background: var(--v-n-0);
}
.v-zbiorczo-pole:focus-within { border-color: var(--v-primary); }
/* W kolumnie z podpisem („Obniżka”, „Do kiedy”) pole nie rośnie w pionie — 52 px jak w makiecie. */
.v-zbiorczo-okno__etykieta .v-zbiorczo-pole { flex: none; }
.v-zbiorczo-pole__wejscie {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--v-primary);
  font: 700 17px/1 var(--v-font-body); /* makieta */
}
.v-zbiorczo-pole__jednostka { font: 700 15px/1 var(--v-font-body); color: var(--v-n-600); } /* makieta */
.v-zbiorczo-pole--data { padding: 0 var(--v-s-3); color: var(--v-primary); font: 700 15px/1 var(--v-font-body); min-width: 0; } /* makieta */

.v-zbiorczo-podglad { display: flex; flex-direction: column; gap: var(--v-s-2); }
.v-zbiorczo-podglad__naglowek { font: 800 12px/1.2 var(--v-font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--v-n-500); } /* makieta */
.v-zbiorczo-podglad__tabela { border: 1px solid var(--v-n-100); border-radius: 14px; overflow: hidden; } /* makieta */
.v-zbiorczo-podglad__tabela[aria-busy="true"] { opacity: .6; }
.v-zbiorczo-podglad__wiersz {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 112px; /* makieta */
  gap: 10px;
  align-items: baseline;
  padding: 11px 14px; /* makieta */
  border-top: 1px solid var(--v-n-50);
  font: 400 13.5px/1.35 var(--v-font-body); /* makieta */
  color: var(--v-primary);
}
.v-zbiorczo-podglad__wiersz--glowa { padding: 10px 14px; border-top: 0; background: var(--v-n-50); font: 800 12px/1.2 var(--v-font-body); color: var(--v-n-600); } /* makieta */
.v-zbiorczo-podglad__wiersz > :nth-child(n+2) { text-align: right; }
.v-zbiorczo-podglad__tytul { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-zbiorczo-podglad__przed { color: var(--v-n-600); }
.v-zbiorczo-podglad__po { font-weight: 800; }
.v-zbiorczo-podglad__po--blad { color: var(--v-error-text); }

/* Komunikat po wykonaniu akcji (makieta: zielona ramka z „✓” nad listą). */
.v-zbiorczo-wynik {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: var(--v-s-3) var(--v-s-4); /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-success-soft);
  color: var(--v-success-text);
  font: 600 14px/1.5 var(--v-font-body); /* makieta */
}
.v-zbiorczo-wynik::before { content: "✓"; font-weight: 800; }

@media (max-width: 760px) {
  .v-zbiorczo__akcje { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-zbiorczo-okno__panel {
    top: auto;
    bottom: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: calc(100% - 24px);
    border-radius: var(--v-r-sheet) var(--v-r-sheet) 0 0; /* makieta */
  }
/* ---------- x-range — suwak (makieta v78 „Pro Sklep edycja”, „Przesuń kadr w pionie”) ---------- */
.v-range {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.v-range__etykieta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--v-n-700);
}

.v-range__pole {
  width: 100%;
  height: 32px;
  margin: 0;
  accent-color: var(--v-primary);
  cursor: pointer;
}