/* Vistitio — partia „oferta i transakcja”.
   Źródło: Vistitio Styleguide Wdrozenie.dc.html — sekcje „Kafelek oferty i wiersz tabeli”,
   „Postęp: oś czasu zamówienia i kroki formularza”, „Oferta i transakcja”.

   Wszystkie kolory z tokens.css. Hex tutaj = błąd, który odrzuca CI. Rozmiary i promienie
   biorę z makiety co do piksela — token używam tam, gdzie znaczy to samo co w makiecie.

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

/* ---------- x-offer-card ---------- */
/* Źródło: sekcja „Kafelek oferty i wiersz tabeli”.
   Zawsze cena i cena z ochroną — kupująca nie może dowiedzieć się o opłacie dopiero
   w koszyku. Zdjęć i cen rzeczy zarezerwowanych NIE wyszarzamy: rezerwacja może przepaść,
   a wyszarzony kafelek mówi „po sprawie”. */

.v-offer {
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.v-offer__foto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 12px;
  /* Makieta ma tu #D9DFE7; tokens.css nazywa --v-n-200 wprost „placeholder zdjęć”
     i to praktycznie ten sam kolor, więc bierzemy token. */
  background: var(--v-n-200);
  position: relative;
  overflow: hidden;
}

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

/* Pastylka przypięta do zdjęcia: ten sam x-badge, geometria z makiety (22 px, 10 px, r6). */
.v-badge.v-offer__pin {
  position: absolute;
  top: 8px;
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--v-r-badge);
  font-size: 10px;
}

.v-badge.v-offer__pin--lewa { left: 8px; }
.v-badge.v-offer__pin--prawa { right: 8px; }

/* Plakietka „co dokładnie sprzedajesz” (pozycja 36 rejestru zabezpieczeń) siedzi przy
   DOLNEJ krawędzi zdjęcia — górne rogi są zajęte przez PRO i stan oferty, a ta informacja
   nie może z nimi konkurować o miejsce ani żadnej z nich wypychać. */
.v-badge.v-offer__pin--dol {
  top: auto;
  bottom: 8px;
  left: 8px;
  right: auto;
}

.v-offer__cena {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 16px;
}

.v-offer__ochrona {
  font-size: 11.5px;
  color: var(--v-n-600);
  line-height: 1.2;
}

.v-offer__tytul {
  font-size: 13px;
  line-height: 1.35;
}

.v-offer__meta {
  font-size: 12px;
  color: var(--v-n-600);
}

/* ---------- x-offer-row ---------- */
/* Źródło: prototypy Desktop i Mobile (feed strony głównej, ekran działu, wyniki).
   To druga, szeroka karta oferty — obok wąskiego `x-offer-card` ze Styleguide'u.
   Pomiary z makiety: karta 586x322, kolumna zdjęcia 199, tytuł 19/600 Outfit,
   cena 26/600 Outfit, przycisk główny 42 px z promieniem 11. */

/* Cała karta jest klikalna: warstwa odsyłacza tytułu przykrywa kafelek, a rzeczy
   z własnym działaniem (sprzedająca, przyciski) stoją nad nią. */
.v-offer-row {
  position: relative;
  display: grid;
  /* Zdjęcie po lewej, treść po prawej — tak rysuje kartę projekt i tak ma zostać.
     Kafelek pionowy jest WYŁĄCZNIE na telefonie (blok `@media` niżej). Jeśli tekst
     robi się tu wąski, winna jest SIATKA, która dała karcie za mało miejsca,
     a nie ten układ (pomyłka 08.10 — patrz komentarz przy `.kat__siatka`). */
  grid-template-columns: 200px minmax(0, 1fr);
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: var(--v-r-card);
  overflow: hidden;
  color: inherit;
}

.v-offer-row__foto {
  display: block;
  position: relative;
  background: var(--v-n-100); /* makieta v75 #E9EDF2: tło ramki pod zdjęciem */
  min-height: 200px;
}

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

/* Pastylka stanu siedzi w lewym górnym rogu zdjęcia — tak jak w prototypie,
   nie po prawej jak na wąskim kafelku. */
.v-badge.v-offer-row__pin {
  position: absolute;
  top: var(--v-s-3);
  left: var(--v-s-3);
  height: 22px; /* makieta */
  min-height: 22px;
  padding: 0 var(--v-s-2);
  border-radius: var(--v-r-badge);
  font-size: 10px; /* makieta */
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Plakietka „co dokładnie sprzedajesz” (pozycja 36 rejestru) — DÓŁ zdjęcia. Górny lewy
   róg należy tu do stanu oferty, a plakietka nie może z nim konkurować o miejsce.
   Wersalików nie dziedziczy: „SAMO PUDEŁKO” krzyczy, a to ma być fakt, nie ostrzeżenie. */
/* Etykieta FIRMA na zdjęciu (makieta v78 „Lista - Pasek filtrow”): biała, 24 px, 11/800, cień.
   Pod pastylką stanu, gdy ta zajmuje róg. */
.v-offer-row__firma {
  position: absolute;
  top: var(--v-s-3);
  left: var(--v-s-3);
  display: flex;
  align-items: center;
  height: 24px; /* makieta */
  padding: 0 9px; /* makieta */
  border-radius: 7px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 800 11px/1 var(--v-font-body); /* makieta */
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(30, 43, 69, .18); /* makieta */
}

.v-offer-row__firma--nizej { top: 40px; } /* makieta: 12 + 22 pastylki stanu + 6 */

.v-badge.v-offer-row__pin--dol {
  top: auto;
  bottom: var(--v-s-3);
  letter-spacing: normal;
  text-transform: none;
}

.v-offer-row__tresc {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  padding: var(--v-s-5);
  min-width: 0;
}

/* Wiersz MARKA · ROZMIAR · STAN nad tytułem, wersalikami. */
.v-offer-row__nad {
  font: 700 11px/1.2 var(--v-font-body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--v-n-500);
}

.v-offer-row__tytul {
  display: -webkit-box;
  min-height: 2.56em; /* zawsze miejsce na dwie linie, karty w rzędzie równe (Hubert 10.10) */
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 600 19px/1.28 var(--v-font-display); /* makieta */
}

.v-offer-row__tytul a {
  color: inherit;
  text-decoration: none;
}

.v-offer-row__tytul a:hover { text-decoration: underline; }

.v-offer-row__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}

/* Kafelek reaguje na kursor jak całość, nie tylko tytuł. */
.v-offer-row:hover { border-color: var(--v-n-300); }

/* Przyciski kafelka STOJĄ NAD linkiem rozciągniętym na całą kartę (`::after`, z-index 0).
   Do 24.09 stał tu zabłąkany nawias `}`, przez który przeglądarka odrzucała tę regułę:
   „Kup”, „Zapytaj” i serce otwierały kartę produktu zamiast robić swoje (zgłoszenie Oli). */
.v-offer-row__osoba-link,
.v-offer-row__akcje {
  position: relative;
  z-index: 1;
}

.v-offer-row__osoba-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--v-r-input);
}

.v-offer-row__osoba-link:hover .v-seller { background: var(--v-n-100); }

.v-offer-row__cena {
  font: 600 26px/1.25 var(--v-font-display); /* makieta */
  margin-top: var(--v-s-2);
}

.v-offer-row__ochrona {
  font-size: 13px; /* makieta */
  color: var(--v-n-600);
  margin-top: calc(var(--v-s-1) * -1);
}

.v-seller.v-offer-row__osoba {
  background: var(--v-n-50);
  border-radius: var(--v-r-input);
  padding: var(--v-s-3);
  margin-top: var(--v-s-2);
}

/* Ocena i typ konta w JEDNEJ linii, jak w prototypie („4,7 (3 opinie) · osoba prywatna”).
   Bez tego „Za mało ocen” i „osoba prywatna” stały jedno pod drugim i belka rosła. */
.v-offer-row__osoba .v-seller__tresc {
  display: block;
}

.v-offer-row__osoba .v-seller__nazwa {
  display: block;
  font-size: 14px;
}

.v-offer-row__osoba .v-seller__ocena,
.v-offer-row__osoba .v-seller__malo,
.v-offer-row__osoba .v-seller__meta {
  display: inline;
  font-size: 13px;
}

.v-offer-row__osoba .v-seller__meta::before {
  content: ' · ';
}

.v-offer-row__dostawa {
  font-size: 13px; /* makieta */
  color: var(--v-n-600);
}

/* Rząd akcji dosunięty do dołu karty, żeby karty w rzędzie kończyły się równo. */
.v-offer-row__akcje {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  margin-top: auto;
  padding-top: var(--v-s-3);
}

/* Formularz nie może rozbić rzędu: ma zniknąć jako pudełko i oddać miejsce przyciskowi. */
.v-offer-row__form { display: contents; }

/* Rząd akcji wypełnia szerokość karty: główny przycisk bierze całą resztę miejsca,
   „Zapytaj" i serce zostają przy swoim rozmiarze (siedzą w formularzach z
   `display: contents`, więc same z siebie nie rosną). Bez tego po prawej stronie
   serca zostawała pusta przestrzeń, a „Kup z ochroną" był węższy, niż powinien. */
.v-offer-row__akcje > .v-btn:first-child { flex: 1 1 auto; }

/* Serce: kwadrat z polem dotyku 44 px — reguła ze styleguide'u, nie zaokrąglenie. */
.v-btn.v-offer-row__serce {
  min-width: 44px;
  width: 44px;
  padding: 0;
  flex: none;
}

/*
 * Na telefonie ta sama karta zamienia się w KAFELEK SIATKI, bo tak wygląda ekran „Feed”
 * w Prototypie Mobile: dwie kolumny, zdjęcie kwadratowe, pod nim cena, „z ochroną”,
 * tytuł i jedna linijka meta. Znikają przyciski „Kup” i „Zapytaj” — w makiecie na
 * kafelku jest samo serce, a decyzję podejmuje się na stronie rzeczy.
 *
 * Robimy to stylem, nie drugim znacznikiem: ta sama treść dwa razy w kodzie znaczy dwa
 * razy tyle do czytania dla czytnika ekranu i dwa miejsca do rozjechania.
 */
@media (max-width: 760px) {
  .v-offer-row {
    grid-template-columns: minmax(0, 1fr);
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .v-offer-row__foto {
    aspect-ratio: 1 / 1;
    min-height: 0;
    border-radius: var(--v-r-card);
  }

  .v-offer-row__tresc {
    padding: var(--v-s-3) 0 0;
    gap: 2px;
  }

  /* Kolejność z makiety: cena, „z ochroną”, tytuł, meta — tytuł NIE jest tu pierwszy,
     bo na kafelku najpierw sprawdza się, czy stać cię na tę rzecz. */
  .v-offer-row__cena { order: 1; font-size: 15px; }
  .v-offer-row__ochrona { order: 2; }
  .v-offer-row__tytul { order: 3; font-size: 14px; }
  .v-offer-row__nad { order: 4; }
  .v-offer-row__osoba,
  .v-offer-row__osoba-link { order: 5; }
  .v-offer-row__dostawa { order: 6; }

  /* Kup, Zapytaj i karta sprzedającej schodzą z kafelka — w makiecie kafelek ma
     zdjęcie, cenę, tytuł i jedną linijkę meta. Kto sprzedaje, widać na stronie rzeczy,
     gdzie ta informacja faktycznie wpływa na decyzję. */
  .v-offer-row__akcje,
  .v-offer-row__osoba,
  .v-offer-row__osoba-link,
  /* Linijka wysyłki też schodzi: kafelek w makiecie ma JEDNĄ linijkę meta (rozmiar,
     stan, miasto), a dwie sprawiają, że sąsiadujące kafelki mają różną wysokość. */
  .v-offer-row__dostawa { display: none; }
}

/* ---------- x-price-breakdown ---------- */
/* Źródło: sekcja „Oferta i transakcja”, kafel „Rozbicie kwoty do zapłaty”.
   Zawsze trzy wiersze plus suma. Opłata za bezpieczną płatność ma obok siebie regułę,
   z której wynika kwota. Suma liczy się z wierszy — nie da się jej rozjechać ręcznie. */

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

.v-price__wiersz {
  display: flex;
  justify-content: space-between;
  gap: var(--v-s-3);
  font-size: 13px;
  color: var(--v-n-700);
}

.v-price__kwota {
  font-weight: 600;
  white-space: nowrap;
}

.v-price__linia {
  height: 1px;
  background: var(--v-n-200);
}

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

.v-price__suma-etykieta {
  font-size: 13.5px;
  font-weight: 700;
}

.v-price__suma-kwota {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: var(--v-ls-h3);
}

/* ---------- x-gallery ---------- */
/* Źródło: sekcja „Oferta i transakcja”, kafel „Galeria i przyklejony pasek akcji”.
   Licznik zdjęć w prawym dolnym narożniku. Proporcja kwadratu z prototypu oferty
   (Vistitio Prototyp Mobile.dc.html, ekran „Oferta”) — w styleguidzie kafel jest
   zminiaturyzowany do 96 px i to nie jest specyfikacja. */

.v-gal {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Wariant „obok": miniatury w kolumnie po prawej stronie zdjęcia. Pomiary z prototypu
   desktop: kolumna 96 px, odstęp 12. Miniatury to stałe kwadraty 96 × 96 jedna pod drugą,
   od góry (10.10, zgłoszenie Huberta): do 10.10 dzieliły równo wysokość zdjęcia
   (`grid-auto-rows: minmax(0, 1fr)`), więc przy dwóch zdjęciach były paskami 96 × 410. */
.v-gal--obok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px; /* makieta */
  gap: 12px; /* makieta */
  align-items: start;
  /* Punkt odniesienia dla kolumny miniatur — patrz niżej. */
  position: relative;
}

/*
 * Kolumna miniatur WYCHODZI Z UKŁADU (`position: absolute`), a miejsce po niej trzyma
 * druga kolumna siatki. Bez tego pięć miniatur rozpychało wiersz i zdjęcie przestawało
 * być kwadratem: przy `stretch` rosło do 746 px, a przy `start` zdjęcie było kwadratowe,
 * ale pasek dalej miał 746 i wystawał poniżej. Teraz wysokość wiersza bierze się
 * WYŁĄCZNIE ze zdjęcia, kolumna ma dokładnie tyle samo, a miniatury, które się nie
 * mieszczą, przewija się w pionie (suwak schowany jak w taśmie zdjęć — ucięta ostatnia
 * miniatura mówi, że jest ich więcej).
 */
.v-gal--obok .v-gal__pasek {
  position: absolute;
  top: 0;
  right: 0;
  width: 96px; /* makieta */
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px; /* makieta */
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Suwak chowamy tylko w kolumnie obok zdjęcia; pasek pod zdjęciem (telefon) bez zmian. */
@media (min-width: 901px) {
  .v-gal--obok .v-gal__pasek {
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .v-gal--obok .v-gal__pasek::-webkit-scrollbar { display: none; }
}

/* Stały kwadrat 96 × 96, nie ściska się, gdy miniatur jest więcej niż miejsca. */
.v-gal--obok .v-gal__mini {
  width: 96px; /* makieta */
  height: 96px; /* makieta */
  flex-shrink: 0;
  border-radius: 10px; /* makieta */
  overflow: hidden;
}

.v-gal--obok .v-gal__mini img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  /* Na wąskim ekranie kolumna miniatur zjada zdjęcie — wracamy do paska pod spodem. */
  .v-gal--obok {
    grid-template-columns: minmax(0, 1fr);
  }

  .v-gal--obok .v-gal__pasek {
    position: static;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .v-gal--obok .v-gal__mini { width: 38px; height: 38px; }
}

.v-gal__glowne {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--v-r-card); /* makieta: 16 px, nie 10 */
  background: var(--v-n-200);
  position: relative;
  overflow: hidden;
}

/*
 * Tasma zdjec: przewijanie w poziomie z przyciaganiem do pelnego kadru. Dziala palcem
 * i gladzikiem, bez jednej linii JavaScriptu — Alpine tylko pilnuje licznika i miniatur.
 * `scrollbar-width: none` chowa pasek: kadr ma byc zdjeciem, nie oknem z suwakiem.
 */
.v-gal__tasma {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Przegladarka ma prowadzic gest w poziomie, a przewijanie strony zostawic stronie. */
  overscroll-behavior-x: contain;
}

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

.v-gal__slajd {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: block;
}

.v-gal__glowne img,
.v-gal__slajd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Obrazek nie przechwytuje gestu przeciagania — inaczej przegladarka probuje go
     „zlapac" jak plik do przeniesienia zamiast przewinac tasme. */
  -webkit-user-drag: none;
  user-select: none;
}

/* Licznik „1 / 5” w prawym dolnym rogu zdjęcia: 12 px z wagą 600, wyściółka 5/10,
   promień 8, tło granatu w 72 % — pomiary z prototypu. */
.v-gal__licznik {
  position: absolute;
  right: 12px; /* makieta */
  bottom: 12px; /* makieta */
  padding: 5px 10px; /* makieta */
  border-radius: var(--v-r-chip);
  background: color-mix(in srgb, var(--v-n-900) 72%, transparent);
  color: var(--v-n-0);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  font-variant-numeric: tabular-nums;
}

.v-gal__pasek {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.v-gal__mini {
  width: 38px;
  height: 38px;
  border-radius: var(--v-r-chip);
  background: var(--v-n-200);
  border: none;
  padding: 0;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
}

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

.v-gal__mini--aktywna { border: 2px solid var(--v-primary); }

/* ---------- x-action-bar ---------- */
/* Źródło: sekcja „Oferta i transakcja”, kafel „Galeria i przyklejony pasek akcji”.
   Przyklejony do dołu i zawsze z ceną — kupująca nie może stracić kwoty z oczu. */

.v-actions {
  position: sticky;
  bottom: 0;
  z-index: var(--v-z-header);
  display: flex;
  gap: var(--v-s-2);
  align-items: center;
  background: var(--v-n-0);
  border-top: 1px solid var(--v-n-100);
  border-radius: 10px;
  padding: 10px var(--v-s-3);
  box-shadow: 0 -4px 14px color-mix(in srgb, var(--v-n-900) 6%, transparent);
}

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

.v-actions__kwota {
  font-family: var(--v-font-display);
  font-weight: 600;
  font-size: 16px;
}

.v-actions__ochrona {
  font-size: 11px;
  color: var(--v-n-600);
  white-space: nowrap;
}

/* Akcje w pasku mają 44 px, nie 48 jak zwykły x-button — makieta trzyma je w jednej
   linii z ceną. Wysokość nadpisujemy tutaj, bo .v-btn siedzi w app.css. */
.v-actions .v-btn {
  height: var(--v-hit-min);
  flex-shrink: 0;
  font-size: 13px;
}

/* ---------- x-rating-input ---------- */
/* Źródło: sekcja „Oferta i transakcja”, kafel „Wystawianie oceny”.
   Gwiazdka to przycisk 44 px z aria-label. Przy ocenie 1–3 dopytujemy o powód —
   ocena bez powodu nie pomaga drugiej stronie. */

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

.v-rate__pytanie {
  font-size: 13px;
  font-weight: 700;
}

.v-rate__gwiazdki {
  display: flex;
  gap: 6px;
}

.v-rate__gwiazdka {
  width: var(--v-hit-min);
  height: var(--v-hit-min);
  border-radius: var(--v-r-btn);
  border: 1.5px solid var(--v-n-200);
  background: var(--v-n-0);
  color: var(--v-n-300);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.v-rate__gwiazdka--pelna {
  border-color: var(--v-secondary);
  background: var(--v-secondary);
  color: var(--v-primary);
}

.v-rate__podpis {
  font-size: 12px;
  color: var(--v-n-600);
  line-height: 1.45;
}

/* Alpine ładuje się z `defer`, więc pole na powód mrugnęłoby przed startem.
   Regułę trzymamy w zasięgu komponentu — globalne [x-cloak] należy do app.css. */
.v-rate [x-cloak] { display: none; }

/* ---------- x-timeline ---------- */
/* Źródło: sekcja „Postęp”, kafel „Oś czasu zamówienia”.
   Krok zrobiony: kropka pełna i data. Krok następny: kropka pusta i termin —
   nigdy „wkrótce”. */

.v-tl {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--v-n-50);
  border-radius: 14px;
  /* <ol>: kasujemy domyślne wcięcie i znaczniki, padding bierzemy z makiety. */
  margin: 0;
  list-style: none;
  padding: var(--v-s-4) 18px;
}

.v-tl__krok {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--v-s-3);
}

.v-tl__os {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.v-tl__kropka {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--v-n-0);
  border: 2px solid var(--v-n-300);
  flex-shrink: 0;
  margin-top: 3px;
}

.v-tl__kropka--zrobiona {
  background: var(--v-success);
  border: none;
}

.v-tl__linia {
  width: 2px;
  flex: 1;
  min-height: 20px;
  background: var(--v-n-200);
}

.v-tl__linia--zrobiona { background: var(--v-success); }

.v-tl__krok--ostatni .v-tl__linia {
  min-height: 0;
  background: transparent;
}

.v-tl__tresc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 14px;
}

.v-tl__tytul {
  font-size: 13px;
  font-weight: 700;
  color: var(--v-n-600);
  line-height: 1.35;
}

.v-tl__krok--zrobiony .v-tl__tytul { color: var(--v-primary); }

.v-tl__termin {
  font-size: 12px;
  color: var(--v-n-600);
  line-height: 1.45;
}

/* ---------- x-steps ---------- */
/* Źródło: sekcja „Postęp”, kafel „Kroki formularza · dowód nadania”.
   Pasek, nie procenty. Nazwa kroku obok numeru — sam numer nic nie mówi. */

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

.v-steps__pasek {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
}

.v-steps__odcinek {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--v-n-200);
}

.v-steps__odcinek--zrobiony { background: var(--v-primary); }

.v-steps__opisy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.v-steps__nazwa {
  font-size: 13px;
  font-weight: 700;
}

.v-steps__opis {
  font-size: 12px;
  color: var(--v-n-600);
  line-height: 1.45;
}

/* ---------- x-hint ---------- */
/* Źródło: sekcja „Postęp”, kafel „Podpowiedź przy etykiecie”.
   Wyjaśnienia rozwijamy w miejscu, pod etykietą. Tooltip na hover jest zakazany —
   na telefonie nie istnieje. Stąd <details>: działa z klawiatury i bez JS. */

.v-hint {
  background: var(--v-info-soft);
  border-radius: 12px;
  color: var(--v-info-text);
}

.v-hint__etykieta {
  display: flex;
  gap: var(--v-s-2);
  align-items: center;
  min-height: var(--v-hit-min);
  padding: 0 13px; /* makieta: podpowiedź ma 13 px, nie 12 */
  cursor: pointer;
  list-style: none;
  font: 600 var(--v-t-label) var(--v-font-body);
}

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

.v-hint__ikona {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--v-info-text);
  color: var(--v-n-0);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

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

.v-hint__znak {
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.v-hint__znak::after { content: "+"; }
.v-hint[open] .v-hint__znak::after { content: "\2212"; }

.v-hint__tresc {
  padding: 0 13px 11px 37px; /* makieta: wcięcie treści pod znakiem rozwijania */
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---------- powiększenie zdjęcia (x-gallery, prop `lupa`) ---------- */
/* Źródło: Prototyp Desktop, warstwa po kliknięciu w zdjęcie oferty. Otwiera ją kotwica
   (`:target`), więc działa bez JavaScriptu; zamyka klik w tło albo w licznik. */

.v-gal__glowne--lupa { cursor: zoom-in; }

.v-gal__pelne { display: none; }

/*
 * Warstwa to SIATKA Z DWOMA WIERSZAMI: licznik i zdjęcie. Licznik stał wcześniej
 * absolutnie nad zdjęciem i wysokie zdjęcie go zasłaniało — teraz ma własny wiersz,
 * więc zakryć się nie da, niezależnie od proporcji zdjęcia.
 */
.v-gal__pelne:target {
  position: fixed;
  inset: 0;
  /* Nad wszystkim, także nad paskiem obietnicy i przyklejonym nagłówkiem. */
  z-index: var(--v-z-toast);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: var(--v-s-4);
  padding: var(--v-s-4) var(--v-s-6) var(--v-s-6);
  background: color-mix(in srgb, var(--v-n-950) 92%, transparent);
}

.v-gal__pelne-tlo { position: absolute; inset: 0; cursor: zoom-out; }

/* `<picture>` ma `display: contents`, więc jego `<source>` (webp) wpadał do siatki jako osobny
   element: zajmował wiersz 1fr, a zdjęcie lądowało w dodatkowym wierszu na dole — przy zdjęciu
   węższym niż okno stało przyklejone do dołu i wystawało poza ekran (zgłoszenie Huberta 11.10). */
.v-gal__pelne source { display: none; }

.v-gal__pelne-foto {
  position: relative;
  /* Zdjęcie mieści się w SWOIM wierszu siatki, więc nie trzeba odliczać wysokości
     okna — `100%` liczy się od wiersza, który został po liczniku i wyściółce. */
  max-width: min(100%, 1100px);
  /* Wysokość od OKNA, nie od wiersza siatki (10.10): zdjęcie siedzi w `<picture>` z
     `display: contents`, procent od wiersza się nie liczył i obraz brał 1200 px z atrybutu
     `height` — pionowe zdjęcia uciekały dołem poza ekran. Odliczamy licznik, odstęp i wyściółkę. */
  max-height: calc(100dvh - 104px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--v-r-card);
  grid-row: 2;
}

.v-gal__pelne-licznik {
  position: relative;
  z-index: 1;
  padding: 8px 14px; /* makieta */
  border-radius: var(--v-r-chip);
  background: var(--v-n-0);
  color: var(--v-n-800);
  font: 600 13px/1 var(--v-font-body);
  white-space: nowrap;
}

.v-gal__pelne-strzalka {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; /* makieta */
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--v-n-0) 88%, transparent);
  color: var(--v-n-800);
  font: 700 22px/1 var(--v-font-body);
  text-decoration: none;
}

.v-gal__pelne-strzalka:hover { background: var(--v-n-0); }
.v-gal__pelne-strzalka--lewo { left: var(--v-s-6); }
.v-gal__pelne-strzalka--prawo { right: var(--v-s-6); }

@media (max-width: 760px) {
  .v-gal__pelne:target { padding: var(--v-s-3); }
  .v-gal__pelne-foto { max-height: calc(100dvh - 72px); }
  .v-gal__pelne-strzalka { width: 44px; height: 44px; }
  .v-gal__pelne-strzalka--lewo { left: var(--v-s-2); }
  .v-gal__pelne-strzalka--prawo { right: var(--v-s-2); }
}


/* ==========================================================================
   x-offer-mini — mały kafelek „a co jeszcze" (sekcje pod ofertą, „Aktywne oferty"
   na profilu). PRZENIESIONY TU 22.09 z `s-oferta.css`: styl KOMPONENTU musi leżeć
   w arkuszu partii, bo tylko te wczytuje powłoka na każdym ekranie. Dopóki siedział
   w arkuszu widoku oferty, ten sam komponent na „Profilu i zakupach" renderował się
   bez żadnej reguły — zdjęcie w naturalnych proporcjach i podkreślony odnośnik.
   ========================================================================== */

/* Źródło: Prototyp Desktop, ekran „Oferta” — trzy sekcje pod opisem.
   Wszystkie trzy używają tego samego kafelka i tej samej siatki 3×, gap 16. */

.v-offer-mini {
  display: flex;
  flex-direction: column;
  gap: 6px; /* makieta */
  min-width: 0;
  text-decoration: none;
}

.v-offer-mini:hover { opacity: .92; }

.v-offer-mini__foto {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--v-r-input);
  background: var(--v-n-200);
  position: relative;
  overflow: hidden;
}

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

.v-offer-mini__stan {
  position: absolute;
  right: var(--v-s-2);
  top: var(--v-s-2);
  height: 22px; /* makieta */
  padding: 0 var(--v-s-2);
  border-radius: var(--v-r-badge);
  background: var(--v-secondary);
  color: var(--v-primary);
  font: 700 10px/1 var(--v-font-body); /* makieta */
  display: inline-flex;
  align-items: center;
}

/* Etykieta promowania na kafelku — granat po LEWEJ, żeby nie zderzała się z pastylką
   rezerwacji po prawej (makieta: obie mogą stać naraz). */
.v-offer-mini__promowana {
  position: absolute;
  left: var(--v-s-2);
  top: var(--v-s-2);
  height: 22px; /* makieta */
  padding: 0 var(--v-s-2);
  border-radius: var(--v-r-badge);
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 700 10px/1 var(--v-font-body); /* makieta */
  letter-spacing: .03em; /* makieta */
  display: inline-flex;
  align-items: center;
}

/* Plakietka „co dokładnie sprzedajesz” — dół zdjęcia, bo góra należy do promowania
   i rezerwacji. Biel na granacie: to nie jest ostrzeżenie o błędzie, tylko fakt o rzeczy,
   który ma być czytelny z odległości ręki. */
.v-offer-mini__plakietka {
  position: absolute;
  left: var(--v-s-2);
  bottom: var(--v-s-2);
  height: 22px; /* makieta */
  padding: 0 var(--v-s-2);
  border-radius: var(--v-r-badge);
  background: var(--v-primary);
  color: var(--v-n-0);
  font: 700 10px/1 var(--v-font-body); /* makieta */
  display: inline-flex;
  align-items: center;
}

.v-offer-mini__cena { font: 600 15px/1.2 var(--v-font-display); color: var(--v-n-800); }
.v-offer-mini__ochrona { font: 400 11.5px/1.2 var(--v-font-body); color: var(--v-n-600); } /* makieta */
.v-offer-mini__tytul { font: 400 12px/1.35 var(--v-font-body); color: var(--v-n-600); }

/* Linijka statystyk pod tytułem — wariant z ekranu „Profil i zakupy”. */
.v-offer-mini__meta { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-600); } /* makieta */

/* Wspólna głowa sekcji: tytuł 18 px Outfit i liczba po prawej. */


/* Serce na zdjeciu istnieje tylko na telefonie — na web jest w rzedzie akcji.
   Regula stoi PRZED media query: dopisana po nim nadpisywala je przy rownej
   specyficznosci i serce nie pokazywalo sie nigdzie (zlapane pomiarem 29.09). */
.v-offer-row__serce-foto { display: none; }

/* ============================================================================
   KAFELEK OFERTY NA TELEFONIE — 1:1 Z PLANSZA „Strona Glowna” (29.09).

   ROZJAZD W MAKIECIE, rozstrzygniety: Prototyp Mobile rysuje feed jako DWIE
   KOLUMNY z kwadratowym zdjeciem (i tak bylo u nas od 26.09), a plansza „Strona
   Glowna” — jako JEDNA karte na wiersz ze zdjeciem 16:10, pelna chrome i sercem
   44 px na zdjeciu. Obowiazuje zasada z 27.09: PLANSZA rozstrzyga uklad ekranow
   publicznych, prototyp rozstrzyga, gdzie i w jakim stanie komponent stoi.
   Uwaga Huberta 29.09: „kafelki produktow wygladaja zupelnie inaczej niz w projekcie”.
   ============================================================================ */
@media (max-width: 760px) {
  /* Karta zostaje karta: obwodka, promien i biale tlo, nie goly kafelek. */
  .v-offer-row {
    border: 1px solid var(--v-n-100);
    border-radius: var(--v-r-card);
    background: var(--v-n-0);
    overflow: hidden;
  }

  /* Zdjecie szerokie, nie kwadratowe. */
  .v-offer-row__foto {
    aspect-ratio: 16 / 10; /* makieta */
    border-radius: 0;
    position: relative;
  }

  .v-offer-row__tresc {
    padding: var(--v-s-4) 18px; /* makieta */
    gap: 10px; /* makieta */
  }

  /* Kolejnosc z planszy: najpierw CZYM to jest, potem co to jest, potem ile kosztuje.
     Do 29.09 mielismy cene na gorze — to bylo z prototypu mobilnego. */
  .v-offer-row__nad { order: 1; }
  .v-offer-row__tytul { order: 2; font-size: 17px; }
  .v-offer-row__cena { order: 3; font: 600 26px/1 var(--v-font-display); letter-spacing: -.03em; }
  .v-offer-row__ochrona { order: 4; font-size: 12px; }

  /* Sprzedajaca WRACA na kafelek — plansza ja pokazuje (imie, Pro, ocena). */
  .v-offer-row__osoba,
  .v-offer-row__osoba-link {
    display: flex;
    order: 5;
  }

  /* Szara karta sprzedajacej ma iSC NA PELNA SZEROKOSC tresci (uwaga Huberta 29.09:
     „pasek z info o sprzedajacym powinien byc szerszy, a nie taki uciety”).
     `.v-seller` to flex o szerokosci tresci, wiec w kontenerze 320 px konczyl sie
     na 251 — zmierzone. Odnosnik-opakowanie tez musi sie rozciagnac, inaczej
     rozciaganie dziecka nie ma od czego liczyc. */
  .v-offer-row__osoba-link { width: 100%; }

  .v-offer-row__osoba-link > .v-seller,
  .v-seller.v-offer-row__osoba { width: 100%; flex: 1 1 auto; }

  /* Rzad akcji WRACA DO TOKU i stoi na dole karty, jak w planszy: „Kup z ochrona”
     i „Zapytaj” obok siebie. Ustawienie go na `absolute` (moja poprawka z 29.09)
     wynosilo cala trojke nad tresc i przyciski wjezdzaly na karte sprzedajacej. */
  .v-offer-row__akcje {
    display: flex;
    order: 7;
    gap: var(--v-s-2);
    /* `relative`, nie `static`: static wyłącza z-index i link kafelka przykrywa przyciski. */
    position: relative;
    z-index: 1;
  }

  .v-offer-row__akcje > * { flex: 1; }

  /* Serce z rzedu akcji schodzi — na telefonie jest na zdjeciu. */
  /* Tylko formularz SERCA — „Zapytaj” po zalogowaniu też siedzi w formularzu
     i do 24.09 znikał razem z sercem (na telefonie zalogowana nie miała „Zapytaj”). */
  .v-offer-row__akcje .v-offer-row__form--serce,
  .v-offer-row__akcje .v-offer-row__serce { display: none; }

  /* Serce na zdjeciu: okragle 44 px, prawy dolny rog. */
  .v-offer-row__serce-foto {
    display: block;
    position: absolute;
    right: 10px; /* makieta */
    bottom: 10px; /* makieta */
    z-index: 1;
  }

  .v-offer-row__serce-foto .v-btn.v-offer-row__serce {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--v-n-0);
    border: none;
    box-shadow: 0 2px 10px rgba(20, 28, 46, .16); /* makieta */
  }
}


/* ===========================================================================
   PLYWAJACE KOLKA NA ZDJECIU (wstecz, serce) — PRZENIESIONE TU Z `s-oferta.css`.

   Uzywaja ich DWA ekrany: publiczna strona oferty i „Moja oferta". Arkusz `s-*`
   wchodzi wylacznie na swoim ekranie, wiec na „Mojej ofercie" kolko stalo NAD
   zdjeciem zamiast na nim — znacznik byl, stylu nie bylo (zrzut 05.10).

   To TRZECI raz ta sama pulapka w tym projekcie (`x-offer-mini` 22.09, panel
   filtrow 05.10). Regula jest jedna: co widac na wiecej niz jednym ekranie,
   nalezy do arkusza partii.
   =========================================================================== */

.oferta__plywajace { display: none; }

.jak-aplikacja .oferta__plywajace {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  left: 12px; /* makieta */
  right: 12px; /* makieta */
  top: calc(8px + env(safe-area-inset-top)); /* makieta: 8 px pod wcieciem */
  z-index: 2;
  pointer-events: none; /* przez puste miejsce miedzy kolkami widac zdjecie */
}

.jak-aplikacja .oferta__plywajace > * { pointer-events: auto; }

.jak-aplikacja .oferta__plywajacy {
  width: 44px; /* makieta */
  height: 44px; /* makieta */
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  box-shadow: 0 2px 8px rgba(20, 28, 46, .12); /* makieta */
}

.jak-aplikacja .oferta__plywajacy--wstecz { font-size: 22px; line-height: 1; } /* makieta */

/* ── x-address-card · x-delivery-option · x-pickup-map ─────────────────────────
   Kasa, „Vistitio Checkout v2” (handoff 42). Wartości w px bez tokenu są przepisane
   z makiety (desktop 1280, mobile 390). Kolory wyłącznie z tokenów: tło wyboru punktu
   w makiecie to #FAFBFC, u nas najbliższe --v-n-50. */

/* Karta adresu z książki (krok 1). */
.v-adres {
  position: relative;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr); /* makieta */
  gap: var(--v-s-3);
  align-items: start;
  padding: 14px 16px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-n-0);
  border: 1.5px solid var(--v-n-200);
  cursor: pointer;
  text-align: left;
}

.v-adres:has(.v-adres__pole:checked) { border: 2px solid var(--v-n-800); padding: 13.5px 15.5px; } /* makieta: grubsza ramka bez skoku */
.v-adres__pole { position: absolute; opacity: 0; pointer-events: none; }
.v-adres:has(.v-adres__pole:focus-visible) { outline: 2px solid var(--v-primary); outline-offset: 2px; }

.v-adres__kropka,
.v-dostawa__kropka {
  width: 22px; /* makieta */
  height: 22px; /* makieta */
  border-radius: 50%;
  border: 1.5px solid var(--v-n-300);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.v-adres__rdzen,
.v-dostawa__rdzen { width: 10px; height: 10px; border-radius: 50%; } /* makieta */

.v-adres:has(.v-adres__pole:checked) .v-adres__kropka,
.v-dostawa:has(.v-dostawa__pole:checked) .v-dostawa__kropka { border: 2px solid var(--v-n-800); }

.v-adres:has(.v-adres__pole:checked) .v-adres__rdzen,
.v-dostawa:has(.v-dostawa__pole:checked) .v-dostawa__rdzen { background: var(--v-n-800); }

.v-adres__tresc { display: flex; flex-direction: column; gap: 3px; min-width: 0; } /* makieta */
.v-adres__glowa { display: flex; gap: var(--v-s-2); align-items: center; }
.v-adres__nazwa { font: 700 14.5px/1.3 var(--v-font-body); color: var(--v-n-800); }

.v-adres__domyslny {
  display: inline-flex;
  align-items: center;
  height: 20px; /* makieta */
  padding: 0 7px; /* makieta */
  border-radius: var(--v-r-badge);
  background: var(--v-n-100);
  font: 700 11px/1 var(--v-font-body);
  color: var(--v-n-700);
}

.v-adres__linie { display: flex; flex-direction: column; font: 400 13px/1.45 var(--v-font-body); color: var(--v-n-700); }
.v-adres__telefon { font: 400 12.5px/1.4 var(--v-font-body); color: var(--v-n-600); }

/* Telefon: odbiorca, ulica, kod i miasto w jednej linijce (makieta mobile). */
@media (max-width: 759px) {
  .v-adres { padding: 12px 14px; } /* makieta */
  .v-adres:has(.v-adres__pole:checked) { padding: 11.5px 13.5px; } /* makieta */
  .v-adres__tresc { gap: 2px; }
  .v-adres__nazwa { font-size: 14px; }
  .v-adres__linie { display: block; }
  .v-adres__linia:first-child::after { content: " · "; }
  .v-adres__linia:nth-child(2)::after { content: ", "; }
  .v-adres__telefon { font-size: 12px; }
}

/* Karta sposobu dostawy (krok 2). Ramka niesie cały stan: wybrana, błąd, zwykła. */
.v-dostawa {
  border-radius: var(--v-r-card);
  background: var(--v-n-0);
  border: 1.5px solid var(--v-n-200);
  overflow: hidden;
  transition: border-color var(--v-dur-fast) var(--v-ease);
  scroll-margin-top: 90px; /* makieta: przewinięcie do karty nie chowa jej pod nagłówkiem */
}

.v-dostawa:has(.v-dostawa__pole:checked) { border: 2px solid var(--v-n-800); }
.v-dostawa.v-dostawa--blad { border: 2px solid var(--v-error-text); }

.v-dostawa__rzad {
  display: grid;
  grid-template-columns: 22px 68px minmax(0, 1fr) auto; /* makieta */
  align-items: center;
  gap: 14px; /* makieta */
  padding: 14px 18px; /* makieta */
  cursor: pointer;
}

.v-dostawa__pole { position: absolute; opacity: 0; pointer-events: none; }
.v-dostawa__rzad:has(.v-dostawa__pole:focus-visible) { outline: 2px solid var(--v-primary); outline-offset: -4px; }

.v-dostawa__znak { height: 34px; display: grid; place-items: center; } /* makieta */
/* Stałe wymiary, nie 100 %: procent wysokości w komórce siatki nie ma od czego się liczyć
   i po wczytaniu obrazek brał własne proporcje (68 × 68, wychodził poza wiersz). */
.v-dostawa__znak .v-carrier { width: 68px; height: 34px; object-position: center; } /* makieta */

.v-dostawa__opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-dostawa__nazwa { font: 700 15px/1.3 var(--v-font-body); color: var(--v-n-800); }
.v-dostawa__zdanie { font: 400 12.5px/1.4 var(--v-font-body); color: var(--v-n-600); }
.v-dostawa__cena { font: 700 15px/1.3 var(--v-font-body); color: var(--v-n-800); white-space: nowrap; }

@media (max-width: 759px) {
  .v-dostawa { border-radius: 14px; } /* makieta */
  .v-dostawa__rzad { grid-template-columns: 20px 50px minmax(0, 1fr) auto; gap: 10px; padding: 12px; min-height: 64px; } /* makieta */
  .v-dostawa__kropka { width: 20px; height: 20px; } /* makieta */
  .v-dostawa__rdzen { width: 9px; height: 9px; } /* makieta */
  .v-dostawa__znak { height: 30px; } /* makieta */
  .v-dostawa__znak .v-carrier { width: 50px; height: 30px; } /* makieta */
  .v-dostawa__nazwa { font-size: 14px; line-height: 1.25; }
  .v-dostawa__zdanie { font-size: 12px; line-height: 1.35; }
  .v-dostawa__cena { font-size: 14px; }
}

/* Znak przewoźnika. NIE przemalowujemy i nie obracamy cudzych znaków. */
.v-carrier {
  flex: none;
  width: 72px;
  height: 28px;
  object-fit: contain;
  object-position: left center;
}

.v-carrier--napis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 28px;
  border-radius: 7px; /* makieta */
  background: var(--v-n-50);
  font: 700 11px/1 var(--v-font-body);
  color: var(--v-n-600);
}

/* Wybór punktu wewnątrz karty przewoźnika. */
.v-pickup {
  border-top: 1px solid var(--v-n-100);
  background: var(--v-n-50);
  padding: 16px 18px 18px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.v-pickup__glowa { display: flex; justify-content: space-between; align-items: baseline; gap: var(--v-s-3); flex-wrap: wrap; }
.v-pickup__tytul { font: 800 14px/1.3 var(--v-font-body); color: var(--v-n-800); }
.v-pickup__blad { font: 700 12.5px/1.4 var(--v-font-body); color: var(--v-error-text); }

.v-pickup__szukaj { display: flex; gap: 10px; } /* makieta */

.v-pickup__pole {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px; /* makieta */
  padding: 0 14px; /* makieta */
  border: 1.5px solid var(--v-n-300);
  border-radius: 11px; /* makieta */
  font: 400 14.5px/1.4 var(--v-font-body);
  color: var(--v-n-800);
  background: var(--v-n-0);
}

.v-pickup__pole:focus { outline: none; border: 2px solid var(--v-n-800); padding: 0 13.5px; } /* makieta */

.v-pickup__licznik { height: 44px; padding: 0 4px; display: flex; align-items: center; font: 400 12.5px/1 var(--v-font-body); color: var(--v-n-600); white-space: nowrap; } /* makieta */

/* Przełącznik Lista/Mapa istnieje tylko na telefonie — na szerokim ekranie oba naraz. */
.v-pickup__zakladki { display: none; }

.v-pickup__uklad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--v-s-3);
  height: 352px; /* makieta */
}

.v-pickup__mapa {
  position: relative;
  border-radius: 14px; /* makieta */
  overflow: hidden;
  background: var(--v-n-100);
  border: 1px solid var(--v-n-200);
  z-index: 0; /* warstwy Leaflet nie wychodzą nad nagłówek i arkusze */
}

/* „Styl szary” z makiety: podkład OpenStreetMap bez kolorów, pinezki zostają granatowe. */
.v-pickup__mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
.v-pickup__mapa .leaflet-control-zoom { border: 0; border-radius: 9px; box-shadow: 0 2px 8px rgba(20, 28, 46, .14); overflow: hidden; } /* makieta */
.v-pickup__mapa .leaflet-control-zoom a { width: 32px; height: 32px; line-height: 32px; color: var(--v-n-800); } /* makieta */

.v-pickup__podpowiedz {
  display: none; /* makieta: podpowiedź tylko na telefonie */
  position: absolute;
  left: 8px; /* makieta */
  bottom: 8px; /* makieta */
  z-index: 500;
  border-radius: 8px; /* makieta */
  padding: 5px 9px; /* makieta */
  background: var(--v-n-0);
  font: 700 11.5px/1.2 var(--v-font-body);
  color: var(--v-n-700);
  pointer-events: none;
}

.v-pickup__podglad {
  position: absolute;
  left: 10px; /* makieta */
  right: 10px; /* makieta */
  bottom: 10px; /* makieta */
  z-index: 600;
  background: var(--v-n-0);
  border-radius: 12px; /* makieta */
  padding: var(--v-s-3);
  box-shadow: 0 8px 24px rgba(20, 28, 46, .2); /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
}

.v-pickup__podglad-opis { display: flex; flex-direction: column; gap: 2px; }
.v-pickup__podglad-nazwa { font: 800 13.5px/1.3 var(--v-font-body); color: var(--v-n-800); }
.v-pickup__podglad-adres { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-600); }

.v-pickup__podglad-btn {
  height: 38px; /* makieta */
  border-radius: var(--v-r-btn);
  background: var(--v-n-800);
  color: var(--v-n-0);
  border: 0;
  font: 700 13px/1 var(--v-font-body);
  cursor: pointer;
}

.v-pickup__podglad-btn:hover { background: var(--v-n-700); }

/* Niebieska kropka „tu szukamy” i okrągłe pinezki z numerem (makieta). `.leaflet-marker-icon`
   z przodu: arkusz Leaflet ładuje się PO naszym i jego `display: block` wygrywałby. */
.leaflet-marker-icon.v-pickup__ty {
  border-radius: 50%;
  background: var(--v-info);
  border: 3px solid var(--v-n-0);
  box-shadow: 0 0 0 6px rgba(47, 111, 235, .18); /* makieta */
}

.leaflet-marker-icon.v-pickup__pin {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v-n-0);
  color: var(--v-n-800);
  border: 2px solid var(--v-n-800);
  font: 800 12px/1 var(--v-font-body);
  box-shadow: 0 3px 10px rgba(20, 28, 46, .22); /* makieta */
  cursor: pointer;
}

.leaflet-marker-icon.v-pickup__pin--podglad { background: var(--v-n-800); color: var(--v-n-0); border-color: var(--v-n-0); }

.v-pickup__lista { display: flex; flex-direction: column; gap: var(--v-s-2); overflow-y: auto; padding-right: 4px; } /* makieta */

.v-pickup__punkt {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr); /* makieta */
  gap: 10px; /* makieta */
  align-items: start;
  padding: 11px 12px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-n-0);
  border: 1.5px solid var(--v-n-100);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  flex-shrink: 0;
}

.v-pickup__punkt:hover { border-color: var(--v-n-800); }
.v-pickup__punkt--podglad { background: var(--v-n-50); border: 2px solid var(--v-n-800); padding: 10.5px 11.5px; } /* makieta */

.v-pickup__numer {
  width: 28px; /* makieta */
  height: 28px; /* makieta */
  border-radius: 50%;
  background: var(--v-n-100);
  color: var(--v-n-800);
  display: grid;
  place-items: center;
  font: 800 12px/1 var(--v-font-body);
}

.v-pickup__punkt--podglad .v-pickup__numer { background: var(--v-n-800); color: var(--v-n-0); }

.v-pickup__opis { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-pickup__kod { font: 700 13.5px/1.35 var(--v-font-body); color: var(--v-n-800); }
.v-pickup__adres { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-600); }
.v-pickup__czas { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-500); }

.v-pickup__wiecej {
  height: 44px; /* makieta */
  border-radius: 11px; /* makieta */
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
  font: 700 13.5px/1 var(--v-font-body);
  color: var(--v-n-800);
  cursor: pointer;
  flex-shrink: 0;
}

.v-pickup__pusto { padding: var(--v-s-3); font: 400 13px/1.45 var(--v-font-body); color: var(--v-n-600); }
.v-pickup__nota { font: 400 11.5px/1.4 var(--v-font-body); color: var(--v-n-500); }

/* Zwinięta linia z wybranym punktem albo adresem kuriera (makieta: „showChosen”). */
.v-pickup-wybrany {
  border-top: 1px solid var(--v-n-100);
  background: var(--v-n-50);
  padding: 12px 18px 12px 54px; /* makieta */
  display: flex;
  align-items: center;
  gap: var(--v-s-3);
}

.v-pickup-wybrany__znak {
  width: 24px; /* makieta */
  height: 24px; /* makieta */
  border-radius: 50%;
  background: var(--v-n-800);
  color: var(--v-n-0);
  display: grid;
  place-items: center;
  font: 800 12px/1 var(--v-font-body);
  flex-shrink: 0;
}

.v-pickup-wybrany__opis { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.v-pickup-wybrany__nazwa { font: 700 13.5px/1.35 var(--v-font-body); color: var(--v-n-800); }
.v-pickup-wybrany__adres { font: 400 12px/1.4 var(--v-font-body); color: var(--v-n-600); }

.v-pickup-wybrany__zmien {
  height: 36px; /* makieta */
  padding: 0 14px; /* makieta */
  border-radius: var(--v-r-btn);
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
  font: 700 13px/1 var(--v-font-body);
  color: var(--v-n-800);
  cursor: pointer;
  white-space: nowrap;
}

.v-pickup-wybrany__zmien:hover { border-color: var(--v-n-800); }

@media (max-width: 759px) {
  .v-pickup { padding: var(--v-s-3); gap: 10px; } /* makieta */
  .v-pickup__glowa { flex-direction: column; align-items: flex-start; gap: 10px; } /* makieta */
  .v-pickup__tytul { font-size: 13.5px; }
  .v-pickup__szukaj { display: block; }
  .v-pickup__pole { width: 100%; height: 46px; font-size: 16px; } /* makieta: 16 px, iOS nie powiększa */
  .v-pickup__licznik { display: none; }

  .v-pickup__zakladki {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px; /* makieta */
    padding: 3px; /* makieta */
    border-radius: 11px; /* makieta */
    background: var(--v-n-100);
  }

  .v-pickup__zakladka {
    height: 38px; /* makieta */
    border-radius: 9px; /* makieta */
    border: 0;
    background: transparent;
    font: 700 13px/1 var(--v-font-body);
    color: var(--v-n-800);
    cursor: pointer;
  }

  .v-pickup__zakladka--wybrana { background: var(--v-n-0); box-shadow: 0 1px 3px rgba(20, 28, 46, .12); } /* makieta */

  .v-pickup__uklad { display: block; height: auto; }
  .v-pickup__uklad--lista .v-pickup__mapa,
  .v-pickup__uklad--mapa .v-pickup__lista { display: none; }
  .v-pickup__mapa { height: 320px; border-radius: 12px; } /* makieta */
  .v-pickup__podpowiedz { display: block; top: 8px; bottom: auto; left: auto; right: 8px; } /* makieta: lewy górny róg zajmuje zoom */
  .v-pickup__podglad { left: 8px; right: 8px; bottom: 8px; } /* makieta */
  .v-pickup__podglad-btn { height: 44px; font-size: 14px; } /* makieta */
  .v-pickup__lista { overflow: visible; padding-right: 0; }
  .v-pickup__punkt { grid-template-columns: 26px minmax(0, 1fr); padding: 11px; } /* makieta */
  .v-pickup__numer { width: 26px; height: 26px; font-size: 11.5px; } /* makieta */
  .v-pickup__nota { display: none; }

  .v-pickup-wybrany {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr); /* makieta */
    align-items: start;
    gap: 10px; /* makieta */
    padding: 10px 12px; /* makieta */
  }

  .v-pickup-wybrany__znak { width: 22px; height: 22px; font-size: 11px; } /* makieta */
  .v-pickup-wybrany__nazwa { font-size: 13px; line-height: 1.3; }

  .v-pickup-wybrany__zmien {
    grid-column: 2;
    height: auto;
    padding: 6px 0 0; /* makieta */
    border: 0;
    background: transparent;
    font-weight: 800;
    text-decoration: underline;
    text-align: left;
    width: fit-content;
  }
}

/* Przycisk „⤢ Pełny ekran” na mapie w karcie (handoff 43). */
.v-pickup__pelny {
  position: absolute;
  right: 10px; /* makieta */
  top: 10px; /* makieta */
  z-index: 800; /* nad warstwami Leaflet */
  height: 34px; /* makieta */
  padding: 0 var(--v-s-3);
  border-radius: 9px; /* makieta */
  border: 0;
  background: var(--v-n-0);
  box-shadow: 0 2px 8px rgba(20, 28, 46, .16); /* makieta */
  font: 700 12.5px/1 var(--v-font-body);
  color: var(--v-n-800);
  cursor: pointer;
}

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

/* Nakładka „Wybierz punkt odbioru” na pełnym ekranie. */
html.v-bez-przewijania { overflow: hidden; }

.v-pickup-pelny {
  position: fixed;
  inset: 0;
  z-index: calc(var(--v-z-toast) + 10);
  background: var(--v-n-0);
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr); /* makieta */
}

.v-pickup-pelny__pasek {
  display: flex;
  align-items: center;
  gap: var(--v-s-4);
  padding: 0 var(--v-s-5);
  border-bottom: 1px solid var(--v-n-100);
}

.v-pickup-pelny__tytul { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.v-pickup-pelny__przewoznik { font: 700 12px/1.3 var(--v-font-body); color: var(--v-n-600); }
.v-pickup-pelny__nazwa { font: 600 18px/1.2 var(--v-font-display); color: var(--v-n-800); } /* makieta */
.v-pickup-pelny__pole { flex: 0 1 380px; margin-left: auto; height: 42px; } /* makieta */
.v-pickup-pelny__zamknij { order: 3; height: 42px; font-weight: 700; } /* makieta */

.v-pickup-pelny__uklad { display: grid; grid-template-columns: 360px minmax(0, 1fr); min-height: 0; } /* makieta */

.v-pickup-pelny__lista {
  border-right: 1px solid var(--v-n-100);
  overflow: auto;
  padding: 14px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: var(--v-s-2);
  background: var(--v-n-50);
}

.v-pickup-pelny__licznik { padding: 0 2px 4px; font: 400 12.5px/1.3 var(--v-font-body); color: var(--v-n-600); } /* makieta */

.v-pickup-pelny__mapa { position: relative; overflow: hidden; background: var(--v-n-100); z-index: 0; }
.v-pickup-pelny__mapa .leaflet-tile-pane { filter: grayscale(1) contrast(.92) brightness(1.04); }
.v-pickup-pelny__mapa .leaflet-control-zoom { border: 0; border-radius: 10px; box-shadow: 0 2px 8px rgba(20, 28, 46, .14); overflow: hidden; margin: 16px 16px 0 0; } /* makieta */
.v-pickup-pelny__mapa .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; font-size: 19px; color: var(--v-n-800); } /* makieta */

.v-pickup-pelny__podglad {
  position: absolute;
  right: var(--v-s-5);
  bottom: var(--v-s-5);
  width: 360px; /* makieta */
  z-index: 900;
  background: var(--v-n-0);
  border-radius: 14px; /* makieta */
  padding: 14px; /* makieta */
  box-shadow: 0 10px 30px rgba(20, 28, 46, .22); /* makieta */
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
}

.v-pickup-pelny__podglad-opis { display: flex; flex-direction: column; gap: 3px; } /* makieta */
.v-pickup-pelny__podglad-nazwa { font: 800 14.5px/1.3 var(--v-font-body); color: var(--v-n-800); }
.v-pickup-pelny__podglad-adres { font: 400 12.5px/1.4 var(--v-font-body); color: var(--v-n-600); }
.v-pickup-pelny__podglad-czas { font: 400 12.5px/1.4 var(--v-font-body); color: var(--v-n-500); }
.v-pickup-pelny__wybierz { height: 46px; width: 100%; } /* makieta */

@media (max-width: 759px) {
  .v-pickup__pelny { right: 8px; top: 8px; height: 40px; border-radius: var(--v-r-btn); font-size: 13px; } /* makieta */
  /* Na telefonie przybliża się palcami, a lewy górny róg należy do podpowiedzi (makieta). */
  .v-pickup__mapa .leaflet-control-zoom { display: none; }
  .v-pickup__podpowiedz { left: 8px; right: auto; }

  .v-pickup-pelny { display: block; background: var(--v-n-100); }

  .v-pickup-pelny__pasek {
    position: absolute;
    inset: 0 0 auto;
    z-index: 900;
    flex-wrap: wrap;
    gap: var(--v-s-2);
    padding: var(--v-s-3);
    border-bottom: 0;
    background: linear-gradient(var(--v-n-0) 70%, rgba(255, 255, 255, 0)); /* makieta */
  }

  .v-pickup-pelny__zamknij { order: 0; width: 44px; height: 44px; padding: 0; border-radius: var(--v-r-input); flex-shrink: 0; } /* makieta */
  .v-pickup-pelny__napis { display: none; }
  .v-pickup-pelny__przewoznik { font-size: 11.5px; }
  .v-pickup-pelny__nazwa { font-size: 16px; }
  .v-pickup-pelny__pole { flex: 1 1 100%; margin-left: 0; height: 46px; font-size: 16px; border-radius: var(--v-r-input); box-shadow: 0 2px 8px rgba(20, 28, 46, .08); } /* makieta */

  .v-pickup-pelny__uklad { display: block; }
  .v-pickup-pelny__lista { display: none; }
  .v-pickup-pelny__mapa { position: absolute; inset: 0; }
  .v-pickup-pelny__mapa .leaflet-control-zoom { display: none; }
  .v-pickup-pelny__podglad { left: var(--v-s-3); right: var(--v-s-3); bottom: var(--v-s-5); width: auto; } /* makieta */
}

/* „Moja lokalizacja” (prośba Huberta 24.09, poza makietą): pozycja z przeglądarki po zgodzie. */
.v-pickup__gdzie {
  flex-shrink: 0;
  height: 44px;
  padding: 0 14px; /* makieta: jak pole obok */
  border-radius: 11px; /* makieta */
  border: 1.5px solid var(--v-n-300);
  background: var(--v-n-0);
  font: 700 13px/1 var(--v-font-body);
  color: var(--v-n-800);
  cursor: pointer;
  white-space: nowrap;
}

.v-pickup__gdzie:hover { border-color: var(--v-n-800); }
.v-pickup__lokalizacja { font: 600 12.5px/1.4 var(--v-font-body); color: var(--v-n-600); }
.v-pickup-pelny__gdzie { order: 2; height: 42px; }
.v-pickup-pelny__lokalizacja { position: absolute; top: 70px; right: var(--v-s-5); z-index: 950; background: var(--v-n-0); padding: 6px 10px; border-radius: var(--v-r-chip); box-shadow: 0 2px 8px rgba(20, 28, 46, .12); } /* makieta */

@media (max-width: 759px) {
  .v-pickup__szukaj { display: flex; gap: var(--v-s-2); }
  .v-pickup__szukaj .v-pickup__pole { flex: 1 1 auto; width: auto; }
  .v-pickup__gdzie { height: 46px; padding: 0 12px; } /* makieta */
  .v-pickup-pelny__gdzie { order: 0; height: 46px; flex-shrink: 0; }
  .v-pickup-pelny__pole { flex: 1 1 0; }
  .v-pickup-pelny__tytul { flex: 1 1 calc(100% - 60px); } /* tytuł zajmuje pierwszy wiersz, szukanie z lokalizacją drugi */
  .v-pickup-pelny__lokalizacja { position: static; flex-basis: 100%; box-shadow: none; padding: 0; background: transparent; }
}

/* Handoff 44: najbliższy punkt (zieleń) i przedziałka, gdy kolejne punkty są daleko. */
.v-pickup__wiersz { display: contents; }

.v-pickup__punkt--blisko { background: var(--v-success-soft); border: 2px solid var(--v-success); padding: 10.5px 11.5px; } /* makieta */
.v-pickup__punkt--blisko .v-pickup__numer { background: var(--v-success); color: var(--v-n-0); }

.v-pickup__blisko {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 20px; /* makieta */
  padding: 0 var(--v-s-2);
  margin-bottom: 3px; /* makieta */
  border-radius: var(--v-r-badge);
  background: var(--v-success);
  color: var(--v-n-0);
  font: 800 11px/1 var(--v-font-body);
}

.v-pickup__przerwa {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  padding: 6px 2px 2px; /* makieta */
  flex-shrink: 0;
  font: 700 12px/1.3 var(--v-font-body);
  color: var(--v-n-600);
  white-space: nowrap;
}

.v-pickup__przerwa::before,
.v-pickup__przerwa::after { content: ""; flex: 1; height: 1px; background: var(--v-n-200); }

.leaflet-marker-icon.v-pickup__pin--blisko { background: var(--v-success); color: var(--v-n-0); border-color: var(--v-n-0); }

.v-pickup__pelny { white-space: nowrap; }


/* ============================================================================
   HANDOFF 50 — PRZECENA, LINIA OMNIBUS I NAGRANIE PRODUKTU
   Źródła: „Vistitio Zmiana Ceny.dc.html” (kafelek, strona oferty, koszyk)
   i „Vistitio Nagranie Web.dc.html” (odznaka na kafelku, odtwarzacz).
   ============================================================================ */

/* ---------- x-omnibus ---------- */
/* Pełna linia: strona oferty, koszyk, „Moja oferta” — 12,5 px, szary drugiego planu. */
.v-omni {
  display: block;
  font: 400 12.5px/1.45 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

/* Skrót na kafelku WEB: „Najniższa cena: 195 zł ⓘ” w jednej linii (makieta: 11,5 px,
   min-height 15, odstęp 4). */
.v-omni--skrot {
  display: flex;
  align-items: center;
  gap: 4px; /* makieta */
  min-height: 15px; /* makieta */
  font-size: 11.5px; /* makieta */
  line-height: 1.3;
  white-space: nowrap;
}

/* Kafelek BEZ przeceny na liście, na której przecena jest: linia stoi niewidoczna,
   żeby rzędy miały równą wysokość (makieta: `visibility: hidden`, nie `display: none`). */
.v-omni--puste { visibility: hidden; }

/* ⓘ — kółko 14 px w polu 24 px, ujemny margines oddaje miejsce linii (makieta). */
.v-omni__i {
  display: inline-grid;
  place-items: center;
  width: 24px; /* makieta */
  height: 24px; /* makieta */
  margin: -5px -4px; /* makieta */
  padding: 0;
  border: none;
  background: transparent;
  color: var(--v-n-600);
  cursor: help;
}

.v-omni__i:focus-visible { outline: 2px solid var(--v-primary); outline-offset: 1px; border-radius: 50%; }

/* Dymek „z 30 dni przed obniżką” stoi nad ⓘ — ten sam x-tip co przy ikonach akcji. */
.v-omni__tip .v-tip__dymek { z-index: 5; }

/* ---------- przecena i nagranie na kafelkach ---------- */

/* Cena sprzed obniżki: obok ceny, mniejsza i szara (makieta: 12,5 px na kafelku web). */
.v-offer__bylo,
.v-offer-mini__bylo,
.v-offer-row__bylo {
  margin-left: 6px; /* makieta */
  font: 400 12.5px/1 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
}

.v-offer-row__bylo { font-size: 13px; } /* makieta: przy cenie 26 px */

/* Linia Omnibus na szerokiej karcie stoi pod „z ochroną”, ciaśniej niż reszta treści
   (ta sama korekta co przy „z ochroną”), i NAD linkiem karty — inaczej ⓘ nie złapie
   kursora ani fokusu. */
.v-offer-row__omnibus {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--v-s-1) * -1);
}

/* Odznaka „Nagranie” w LEWYM DOLNYM rogu zdjęcia (makieta: 8 px od krawędzi). */
.v-offer__nagranie,
.v-offer-mini__nagranie,
.v-offer-row__nagranie {
  position: absolute;
  left: 8px; /* makieta */
  bottom: 8px; /* makieta */
}

/* Gdy rzecz ma też plakietkę „co dokładnie sprzedajesz” (też lewy dół), plakietka staje
   nad odznaką nagrania: 8 + 26 + 8. */
.v-badge.v-offer__pin--nad-nagraniem,
.v-offer-mini__plakietka--nad-nagraniem,
.v-badge.v-offer-row__pin--nad-nagraniem { bottom: 42px; } /* makieta */

@media (max-width: 760px) {
  /* Na telefonie kafelek układa się polem `order` (patrz wyżej): linia Omnibus idzie
     zaraz za „z ochroną”. */
  .v-offer-row__omnibus { order: 4; margin-top: 0; }
}

/* ---------- x-video-pin ---------- */
/* Pastylka 26 px, granat w 85 %, biały napis 11,5/800, zielona pieczątka 16 px (makieta). */
.v-vpin {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* makieta */
  height: 26px; /* makieta */
  padding: 0 9px 0 6px; /* makieta */
  border-radius: 13px; /* makieta */
  background: rgba(20, 28, 46, .85); /* makieta */
  color: var(--v-n-0);
  font: 800 11.5px/1 var(--v-font-body); /* makieta */
  z-index: 1;
}

.v-vpin__znak { color: #8FD3A8; } /* makieta, TODO token */

/* ---------- galeria: film jako ostatnia miniatura ---------- */
.v-gal__mini--film {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--v-n-700);
  color: var(--v-n-0);
}

.v-gal__mini--film img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .8;
}

.v-gal__mini-odtworz { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .v-gal__mini--film .v-gal__mini-odtworz { width: 20px; height: 20px; }
}

/* ---------- x-video-player ---------- */
/* Wariant `blok`: ciemna ramka 9:14, promień 12 — w zielonym bloku pod ceną (makieta).
   Wariant `pelny`: cały ekran na czarnym tle (telefon). */
.v-vplay {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--v-n-900);
  color: var(--v-n-0);
}

.v-vplay--blok {
  aspect-ratio: 9 / 14; /* makieta */
  border-radius: 12px; /* makieta */
}

.v-vplay--pelny {
  height: 100%;
  background: #000; /* makieta, TODO token */
}

/* Film pokazujemy CAŁY (contain), nie przycięty — to nagranie weryfikacyjne, a brzegi
   rzeczy mają być widoczne. */
.v-vplay__film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

/* Przycisk na środku: białe kółko 64 px z granatowym znakiem (makieta). Gdy film gra,
   chowa się i wraca pod kursorem — inaczej zasłaniałby środek rzeczy. */
.v-vplay__srodek {
  position: absolute;
  left: 50%;
  top: 48%; /* makieta */
  transform: translate(-50%, -50%);
  width: 64px; /* makieta */
  height: 64px; /* makieta */
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92); /* makieta */
  color: var(--v-primary);
  cursor: pointer;
  transition: opacity var(--v-dur-base) var(--v-ease);
}

.v-vplay__srodek-znak { display: grid; place-items: center; }

.v-vplay--gra .v-vplay__srodek { opacity: 0; }
.v-vplay--gra:hover .v-vplay__srodek,
.v-vplay__srodek:focus-visible { opacity: 1; }
.v-vplay__srodek:focus-visible { outline: 3px solid var(--v-secondary); outline-offset: 2px; }

.v-vplay__dol {
  position: absolute;
  left: 12px; /* makieta */
  right: 12px; /* makieta */
  bottom: 12px; /* makieta */
  display: flex;
  flex-direction: column;
  gap: 8px; /* makieta */
  pointer-events: none;
}

.v-vplay__dol > * { pointer-events: auto; }

/* Pastylka „Nagrane aparatem w aplikacji” (blok) / „Zweryfikowane nagraniem” (pełny). */
.v-vplay__odznaka {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px; /* makieta */
  height: 24px; /* makieta */
  padding: 0 9px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-success-soft);
  color: var(--v-success);
  font: 800 11.5px/1 var(--v-font-body); /* makieta */
  pointer-events: none;
}

.v-vplay__postep {
  display: flex;
  align-items: center;
  gap: 8px; /* makieta */
  font: 700 12px/1 var(--v-font-body); /* makieta */
  font-variant-numeric: tabular-nums;
  color: var(--v-n-0);
  pointer-events: none;
}

.v-vplay__pasek {
  flex: 1;
  height: 4px; /* makieta */
  border-radius: 2px; /* makieta */
  background: rgba(255, 255, 255, .3); /* makieta */
  overflow: hidden;
}

.v-vplay__wypelnienie {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px; /* makieta */
  background: var(--v-n-0);
}

/* PEŁNY EKRAN: zamknięcie i tytuł u góry (kółko 44 px na czerni 45 %), na dole
   odznaka 26 px, pasek i biały przycisk zakupu 52 px (makieta „Odtwarzacz mobile web”). */
.v-vplay__gora {
  position: absolute;
  top: 16px; /* makieta */
  left: 12px; /* makieta */
  right: 12px; /* makieta */
  display: flex;
  align-items: center;
  gap: 8px; /* makieta */
  z-index: 1;
}

.v-vplay__zamknij {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45); /* makieta */
  color: var(--v-n-0);
  cursor: pointer;
}

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

.v-vplay__tytul {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 700 13.5px/1.3 var(--v-font-body); /* makieta */
}

.v-vplay--pelny .v-vplay__dol {
  left: 16px; /* makieta */
  right: 16px; /* makieta */
  bottom: 28px; /* makieta */
  gap: 12px; /* makieta */
}

.v-vplay--pelny .v-vplay__odznaka {
  height: 26px; /* makieta */
  padding: 0 10px; /* makieta */
  border-radius: 13px; /* makieta */
  font-size: 12px; /* makieta */
  gap: 5px; /* makieta */
}

.v-vplay--pelny .v-vplay__postep { gap: 10px; } /* makieta */


/* ===========================================================================
   KOSZYK (koszyk, partia 3) — komponenty widoczne na wielu ekranach, więc w arkuszu
   partii: `x-cart-item` (koszyk, kasa, zakup, zamówienie, zwrot, pakowanie), `x-cart-add`
   (kafelki na ofercie i profilach), `x-cart-bar` (oferta i profile). Wartości w px bez
   tokenu przepisane z „Vistitio Koszyk.dc.html” i prototypów (handoff 55); kolory
   wyłącznie z tokenów.
   =========================================================================== */

/* ── x-cart-item ── */
.v-cart-item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto; /* makieta */
  gap: var(--v-s-3);
  align-items: start;
  min-width: 0;
}

.v-cart-item--koszyk { padding-top: var(--v-s-3); border-top: 1px solid var(--v-n-100); }
.v-cart-item--krotki { grid-template-columns: 36px minmax(0, 1fr) auto; gap: var(--v-s-2); align-items: center; } /* makieta */
.v-cart-item--zakup { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; } /* makieta */

.v-cart-item--off { opacity: .5; } /* makieta */

.v-cart-item__foto {
  display: block;
  width: 64px;
  height: 78px; /* makieta */
  border-radius: var(--v-s-3);
  background: var(--v-n-200);
  overflow: hidden;
}

.v-cart-item__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-cart-item--krotki .v-cart-item__foto { width: 36px; height: 44px; border-radius: var(--v-s-2); } /* makieta */
.v-cart-item--zakup .v-cart-item__foto { width: 44px; height: 54px; border-radius: 10px; } /* makieta */

.v-cart-item__tresc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v-cart-item--krotki .v-cart-item__tresc,
.v-cart-item--zakup .v-cart-item__tresc { gap: 2px; }

.v-cart-item__tytul { font: 700 14px/1.3 var(--v-font-body); color: var(--v-n-800); }
.v-cart-item--krotki .v-cart-item__tytul { font: 600 12.5px/1.3 var(--v-font-body); } /* makieta */
.v-cart-item--zakup .v-cart-item__tytul { font: 600 13.5px/1.3 var(--v-font-body); } /* makieta */

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

.v-cart-item__plakietki { display: flex; flex-wrap: wrap; gap: 6px; } /* makieta */
.v-cart-item--krotki .v-cart-item__plakietki,
.v-cart-item--zakup .v-cart-item__plakietki { gap: 4px; }

.v-cart-item__plakietka {
  display: inline-flex;
  align-items: center;
  min-height: 22px; /* makieta */
  padding: 3px var(--v-s-2);
  border-radius: 6px; /* makieta */
  background: var(--v-n-100);
  color: var(--v-n-800);
  font: 800 11.5px/1.3 var(--v-font-body); /* makieta */
}

.v-cart-item__plakietka--co { background: var(--v-secondary-soft); color: var(--v-secondary-text); }
.v-cart-item__plakietka--anulowana { background: var(--v-error-soft); color: var(--v-error-text); }
.v-cart-item--krotki .v-cart-item__plakietka { min-height: 18px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; } /* makieta */
.v-cart-item--zakup .v-cart-item__plakietka { min-height: 20px; padding: 0 6px; border-radius: 5px; font-size: 11px; } /* makieta */

.v-cart-item__powod { font: 800 12.5px/1.4 var(--v-font-body); color: var(--v-error); } /* makieta */

.v-cart-item__ceny { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.v-cart-item__cena { font: 800 15px/1.2 var(--v-font-body); color: var(--v-n-800); white-space: nowrap; } /* makieta */
.v-cart-item--krotki .v-cart-item__cena { font: 700 12.5px/1.2 var(--v-font-body); } /* makieta */
.v-cart-item--zakup .v-cart-item__cena { font: 700 13.5px/1.2 var(--v-font-body); } /* makieta */
.v-cart-item__bylo { font: 400 12px/1.2 var(--v-font-body); color: var(--v-n-600); } /* makieta */
.v-cart-item__netto { font: 700 12px/1.2 var(--v-font-body); color: var(--v-success-text); white-space: nowrap; } /* makieta */

/* Wiersz z polem wyboru (zwrot części, pakowanie): kratka 22 px, cały wiersz klika. */
.v-cart-item--wybor {
  grid-template-columns: 24px 44px minmax(0, 1fr) auto; /* makieta */
  padding: 10px 0; /* makieta */
  border-bottom: 1px solid var(--v-n-100);
  cursor: pointer;
}

.v-cart-item__pole {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.v-cart-item__kratka {
  display: grid;
  place-items: center;
  width: 22px; /* makieta */
  height: 22px; /* makieta */
  border-radius: 6px; /* makieta */
  border: 2px solid var(--v-n-300);
  background: transparent;
  color: transparent;
  font: 800 13px/1 var(--v-font-body); /* makieta */
}

.v-cart-item__pole:checked + .v-cart-item__kratka { background: var(--v-primary); border-color: var(--v-primary); color: var(--v-n-0); }
.v-cart-item__pole:focus-visible + .v-cart-item__kratka { outline: 2px solid var(--v-secondary); outline-offset: 2px; }

/* ── x-cart-add: kółko nad zdjęciem kafelka ── */
.v-offer-mini-box,
.v-offer-box { position: relative; min-width: 0; display: flex; flex-direction: column; }

.v-cart-add {
  position: absolute;
  left: var(--v-s-2);
  top: var(--v-s-2);
  z-index: 2;
  margin: 0;
  text-decoration: none;
}

.v-cart-add__guzik {
  display: grid;
  place-items: center;
  width: 34px; /* makieta */
  height: 34px; /* makieta */
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid var(--v-primary);
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 800 17px/1 var(--v-font-body); /* makieta */
  cursor: pointer;
}

.v-cart-add--jest .v-cart-add__guzik { background: var(--v-primary); color: var(--v-n-0); }

/* ── x-cart-bar: „Od Marty w koszyku…” ── */
.v-cart-bar {
  position: fixed;
  left: 50%;
  bottom: var(--v-s-4);
  transform: translateX(-50%);
  z-index: var(--v-z-dropdown);
  width: min(760px, calc(100% - var(--v-s-8)));
  display: flex;
  align-items: center;
  gap: var(--v-s-4);
  padding: var(--v-s-3) 14px var(--v-s-3) var(--v-s-5); /* makieta */
  border-radius: var(--v-s-4);
  background: var(--v-primary);
  color: var(--v-n-0);
  box-shadow: 0 12px 32px rgba(20, 28, 46, .28); /* makieta */
}

.v-cart-bar__tresc { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-cart-bar__tekst { font: 800 14px/1.3 var(--v-font-body); }
.v-cart-bar__podpowiedz { font: 400 12.5px/1.3 var(--v-font-body); opacity: .85; } /* makieta */

.v-btn.v-cart-bar__guzik {
  height: 44px;
  padding: 0 var(--v-s-4);
  border-radius: var(--v-s-3);
  background: var(--v-secondary-dark);
  color: var(--v-primary);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 760px) {
  /* Telefon: nad dolnym paskiem (74 px) i — na ofercie — nad paskiem akcji. */
  .v-cart-bar {
    bottom: calc(74px + var(--v-s-3) + env(safe-area-inset-bottom)); /* makieta: nad paskiem */
    width: calc(100% - var(--v-s-6));
    gap: 10px;
    padding: 10px 10px 10px 14px; /* makieta */
    border-radius: 14px; /* makieta */
  }

  body:has(.oferta__dol) .v-cart-bar { bottom: calc(90px + env(safe-area-inset-bottom)); } /* makieta: 12 nad paskiem akcji v65 (78) */

  .v-cart-bar__tekst { font-size: 13px; }
  .v-cart-bar__podpowiedz { font-size: 11.5px; }
  .v-btn.v-cart-bar__guzik { height: 40px; padding: 0 var(--v-s-3); border-radius: 10px; font-size: 13px; } /* makieta */
}

/* Komunikat po „Dodaj do koszyka” stoi NAD paskiem koszyka, nie na nim — makieta trzyma
   go z boku, a u nas toast jest wyśrodkowany, więc bez tego zdanie wpadało w pasek. */
body:has(.v-cart-bar) .v-toast-obszar { bottom: calc(var(--v-s-4) + 68px + var(--v-s-3)); } /* makieta: pasek ~68 px */

@media (max-width: 760px) {
  body:has(.v-cart-bar) .v-toast-obszar { bottom: calc(74px + var(--v-s-3) + 64px + var(--v-s-3) + env(safe-area-inset-bottom)); } /* makieta */
  body:has(.oferta__dol):has(.v-cart-bar) .v-toast-obszar { bottom: calc(90px + 64px + var(--v-s-3) + env(safe-area-inset-bottom)); } /* makieta */
}

/* Linia zniżek za zestawy na profilu osoby i sklepu (makieta v55, `bundleInfo`). */
.profilp__znizki {
  display: inline-block;
  width: fit-content;
  padding: var(--v-s-2) var(--v-s-3);
  border-radius: 10px; /* makieta */
  background: var(--v-success-soft);
  color: var(--v-success-text);
  font: 700 13px/1.45 var(--v-font-body); /* makieta */
}


/* ---------- x-camera-badge — plakietka „Z aparatu Vistitio” (pozycja 35) ----------
   Źródło: „Vistitio Zdjecie z Aparatu.dc.html” (handoff v63), tabela `specs`:
   na zdjęciu 28 px (desktop 32), r 14 (16), pad 0 10 0 8 (0 12 0 9), odstęp 5 (6),
   od krawędzi 12 (16), tekst 12/800 (13/800), ikona 16 (18) + info 15 (16), strefa dotyku 44.
   Tło okBg, tekst i ikona ok, info ok w 70 % — w obu motywach to samo (leży na zdjęciu). */
.v-gal__slajd { position: relative; }

.v-gal__slajd-lupa {
  display: block;
  width: 100%;
  height: 100%;
}

.v-aparat {
  position: absolute;
  left: 16px; /* makieta */
  bottom: 16px; /* makieta */
  z-index: 2;
}

.v-aparat__plakietka {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* makieta */
  height: 32px; /* makieta */
  padding: 0 12px 0 9px; /* makieta */
  border: none;
  border-radius: 16px; /* makieta */
  background: var(--v-aparat-foto-tlo);
  color: var(--v-aparat-foto-tekst);
  font: 800 13px/1 var(--v-font-body); /* makieta */
  cursor: pointer;
  white-space: nowrap;
}

/* Strefa dotyku 44 px bez powiększania samej plakietki. */
.v-aparat__plakietka::before {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

/* Fokus z klawiatury: obwódka 3 px zielonego w 45 % (makieta, stan „dymek otwarty”). */
/* Obwódka 3 px zielonego w 45 % (makieta, stan „dymek otwarty”): przy fokusie z klawiatury
   i zawsze wtedy, gdy dymek jest widoczny. */
.v-aparat__plakietka:focus-visible,
.v-aparat:hover .v-aparat__plakietka,
.v-aparat--przypiety .v-aparat__plakietka {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 125, 79, .45); /* makieta */
}

.v-aparat.v-aparat--ukryty .v-aparat__plakietka:not(:focus-visible) { box-shadow: none; }

.v-aparat__info { color: var(--v-aparat-foto-info); }

/* Dymek: 320 px, r 14, wyściółka 14/16, odstęp 8, cień 0 12 32 w 25 %, 12 px nad plakietką,
   strzałka 12 px 28 px od lewej. Jasny: granat i biel, ciemny: odwrotnie (makieta `tip`). */
.v-aparat__dymek {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px); /* makieta: 60 − 16 − 32 */
  width: 320px; /* makieta */
  max-width: calc(100vw - 48px);
  display: none;
  flex-direction: column;
  gap: 8px; /* makieta */
  padding: 14px 16px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-aparat-dymek);
  color: var(--v-aparat-dymek-tekst);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25); /* makieta */
  text-align: left;
  white-space: normal;
}

/* Most nad szczeliną 12 px: kursor przechodzący z plakietki na dymek nie gubi najechania. */
.v-aparat__dymek::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  height: 12px;
}

.v-aparat:hover .v-aparat__dymek,
.v-aparat:focus-within .v-aparat__dymek,
.v-aparat--przypiety .v-aparat__dymek { display: flex; }

/* Esc chowa dymek do chwili, gdy kursor albo fokus wyjdzie z plakietki. */
.v-aparat.v-aparat--ukryty .v-aparat__dymek { display: none; }

.v-aparat__dymek-tytul { font: 800 14px/1.3 var(--v-font-body); } /* makieta */
.v-aparat__dymek-tresc { font: 400 13.5px/1.5 var(--v-font-body); text-wrap: pretty; } /* makieta */

.v-aparat__dymek-link {
  font: 700 13px/1.4 var(--v-font-body); /* makieta */
  color: inherit;
  text-decoration: underline;
}

.v-aparat__dymek-link:hover { color: inherit; }

.v-aparat__strzalka {
  position: absolute;
  left: 28px; /* makieta */
  bottom: -6px; /* makieta */
  width: 12px;
  height: 12px;
  background: var(--v-aparat-dymek);
  transform: rotate(45deg);
}

/* Krążek z aparatem: miniatura galerii 22 (telefon 20), kafelek 24 — granat w 85 %
   i ikona #8FD3A8, jak pieczątka „Nagranie” na kafelku (makieta). */
.v-aparat-krazek {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--v-aparat-krazek);
  color: var(--v-aparat-krazek-ikona);
  pointer-events: none;
}

.v-aparat-krazek--22 { width: 22px; height: 22px; }
.v-aparat-krazek--20 { width: 20px; height: 20px; }

/* Miniatura galerii: lewy dolny róg, 5 px od krawędzi (telefon 3 px), ikona 14 (13). */
.v-gal__mini { position: relative; }

.v-aparat-krazek.v-gal__mini-aparat {
  position: absolute;
  left: 5px; /* makieta */
  bottom: 5px; /* makieta */
  width: 22px;
  height: 22px;
}

.v-aparat-krazek.v-gal__mini-aparat svg { width: 14px; height: 14px; }

/* Kafelek: prawy dolny róg, 8 px od krawędzi, ikona 15 (makieta „Kafelek feedu”). */
.v-offer__aparat,
.v-offer-mini__aparat,
.v-offer-row__aparat {
  position: absolute;
  right: 8px; /* makieta */
  bottom: 8px; /* makieta */
  z-index: 1;
}

.v-offer__aparat svg,
.v-offer-mini__aparat svg,
.v-offer-row__aparat svg { width: 15px; height: 15px; }

/* Pigułka poza zdjęciem: 24 px, r 12, pad 0 9 0 7, odstęp 4, tekst 11,5/800, ikona 15;
   tło i tekst zmieniają się z motywem (Moje oferty, strona „Zdjęcie z aparatu”). */
.v-aparat-pigulka {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* makieta */
  height: 24px; /* makieta */
  padding: 0 9px 0 7px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-aparat-tlo);
  color: var(--v-aparat-tekst);
  font: 800 11.5px/1 var(--v-font-body); /* makieta */
  white-space: nowrap;
  vertical-align: middle;
}

/* Arkusz na telefonie (makieta „Web mobile kupująca · arkusz”): promień 24, wyściółka 12/20/24,
   odstęp 14, tytuł Outfit 20 z ikoną 22 w zieleni, zamknięcie 44, „Rozumiem” 48 z obwódką. */
.v-warstwa.v-aparat-warstwa .v-sheet {
  max-width: none;
  padding: 12px 20px 24px; /* makieta */
  gap: 14px; /* makieta */
  border-radius: 24px 24px 0 0; /* makieta */
}

.v-warstwa.v-aparat-warstwa .v-sheet__uchwyt { width: 36px; background: var(--v-n-300); }
.v-warstwa.v-aparat-warstwa .v-sheet__lista { gap: 0; }

.v-aparat-arkusz { display: flex; flex-direction: column; gap: 14px; } /* makieta */

.v-aparat-arkusz__glowa {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.v-aparat-arkusz__tytul {
  display: flex;
  align-items: center;
  gap: 8px; /* makieta */
  font: 600 20px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em;
  color: var(--v-n-800);
}

.v-aparat-arkusz__znak { color: var(--v-aparat-tekst); }

.v-aparat-arkusz__zamknij {
  display: grid;
  place-items: center;
  width: 44px; /* makieta */
  height: 44px;
  margin-right: -10px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--v-n-800);
  cursor: pointer;
}

.v-aparat-arkusz__tresc {
  margin: 0;
  font: 400 15px/1.55 var(--v-font-body); /* makieta */
  color: var(--v-n-800);
  text-wrap: pretty;
}

.v-aparat-arkusz__nota {
  margin: 0;
  font: 400 13.5px/1.5 var(--v-font-body); /* makieta */
  color: var(--v-n-600);
  text-wrap: pretty;
}

.v-aparat-arkusz__rozumiem {
  height: 48px; /* makieta */
  border: 1.5px solid var(--v-n-300); /* makieta: pole #B9C4D3 */
  border-radius: 12px; /* makieta */
  background: transparent;
  color: var(--v-n-800);
  font: 800 15px/1 var(--v-font-body); /* makieta */
  cursor: pointer;
}

@media (max-width: 760px) {
  .v-aparat {
    left: 12px; /* makieta */
    bottom: 12px; /* makieta */
  }

  .v-aparat__plakietka {
    gap: 5px; /* makieta */
    height: 28px; /* makieta */
    padding: 0 10px 0 8px; /* makieta */
    border-radius: 14px; /* makieta */
    font-size: 12px; /* makieta */
  }

  /* Telefon z JavaScriptem: stuknięcie otwiera arkusz, więc dymek się nie pokazuje (fokus
     po stuknięciu włączyłby go razem z arkuszem). Bez JavaScriptu dymek zostaje jedyną
     drogą do wyjaśnienia i pokazuje go CSS. */
  .z-js .v-aparat .v-aparat__dymek { display: none; }
  .z-js .v-aparat .v-aparat__plakietka { box-shadow: none; }

  .v-aparat__znak { width: 16px; height: 16px; }
  .v-aparat__info { width: 15px; height: 15px; }

  /* Telefon z odtwarzaczem filmu: pigułka „Film · 0:34” zajmuje lewy dół (36 px),
     plakietka staje nad nią: 10 + 36 + 8. */
  .v-gal--z-filmem .v-aparat { bottom: 54px; } /* makieta: pigułka filmu 10 + 36 + 8 */

  .v-aparat-krazek.v-gal__mini-aparat {
    left: 3px; /* makieta */
    bottom: 3px; /* makieta */
    width: 20px;
    height: 20px;
  }

  .v-aparat-krazek.v-gal__mini-aparat svg { width: 13px; height: 13px; }

  /* Miniatury galerii oferty na telefonie: 52 px, odstęp 8, r 10, obwódka 2 px
     (makieta „Web mobile kupująca · galeria”; wcześniej 38 px ze styleguide'u). */
  .v-gal--obok .v-gal__pasek { gap: 8px; }

  .v-gal--obok .v-gal__mini {
    width: 52px;
    height: 52px;
    border-radius: 10px; /* makieta */
    border: 2px solid transparent;
  }

  .v-gal--obok .v-gal__mini.v-gal__mini--aktywna { border-color: var(--v-primary); }

  /* Szeroki kafelek na telefonie ma serce 44 px w prawym dolnym rogu — znacznik staje
     obok, na jego wysokości: 10 + 44 + 8 od prawej, 10 + (44 − 24) / 2 od dołu. */
  .v-offer-row__aparat--przy-sercu {
    right: 62px; /* makieta: serce 10 + 44 + 8 */
    bottom: 20px;
  }
}

/* ---------- x-offer-slot: „wolne miejsce” w siatce ofert ----------
   Makieta „Kafelek Dodaj oferte.dc.html” (handoff v71, 10.10). Kolumna zdjęcia i promień
   jak w `x-offer-row` (200 px, --v-r-card), bo kafelek stoi w rzędzie obok karty oferty
   i ma wyglądać jak kolejna oferta; resztę wymiarów przepisujemy z makiety. */
.v-offer-slot {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100);
  border-radius: var(--v-r-card);
  overflow: hidden;
  min-width: 0;
}

.v-offer-slot__foto {
  display: flex;
  padding: 16px; /* makieta */
  background: var(--v-warning-soft);
  text-decoration: none;
}

.v-offer-slot__ramka {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px; /* makieta */
  border: 2px dashed #D9B577; /* makieta, TODO token */
  border-radius: 14px; /* makieta */
  color: var(--v-warning-text);
}

.v-offer-slot__plus {
  width: 56px; /* makieta */
  height: 56px; /* makieta */
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v-n-0);
  box-shadow: 0 2px 6px rgba(122, 75, 12, .12); /* makieta */
  font: 500 30px/1 var(--v-font-body); /* makieta */
}

.v-offer-slot__podpis { font: 800 13.5px/1.3 var(--v-font-body); } /* makieta */

.v-offer-slot__tresc {
  display: flex;
  flex-direction: column;
  gap: 14px; /* makieta */
  padding: 28px 24px 24px; /* makieta */
  min-width: 0;
}

.v-offer-slot__nadtytul {
  font: 800 12px/1.3 var(--v-font-body); /* makieta */
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--v-n-600);
}

.v-offer-slot__tytul {
  margin: 0;
  font: 600 24px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em;
  text-wrap: balance;
}

.v-offer-slot__opis {
  margin: 0;
  font: 400 15px/1.55 var(--v-font-body); /* makieta */
  color: var(--v-n-700);
  text-wrap: pretty;
}

.v-offer-slot__opis--waski { display: none; }

.v-offer-slot__lista {
  margin: 0;
  padding: 14px 16px; /* makieta */
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-n-50);
  font: 400 14px/1.4 var(--v-font-body); /* makieta */
}

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

.v-offer-slot__ptaszek {
  flex-shrink: 0;
  width: 20px; /* makieta */
  height: 20px; /* makieta */
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--v-aparat-tlo); /* ta sama zieleń co w makiecie (#EEF6F1) */
  color: var(--v-aparat-tekst);
  font: 800 12px/1 var(--v-font-body); /* makieta */
}

.v-offer-slot__akcje { margin-top: auto; display: flex; gap: 10px; } /* makieta */

/* Przyciski w rozmiarze przycisków `x-offer-row` obok (48 px, decyzja Huberta 10.10 — makieta
   miała 60 px / 17 px, w rzędzie z kartą oferty wyglądały na większe). */
.v-offer-slot__glowny { flex: 1; }

/* Telefon (plansza 1b): miejsce na zdjęcie 180 px nad treścią, krótszy opis bez listy,
   „Jak to działa” jako zwykły odnośnik pod przyciskiem. */
@media (max-width: 760px) {
  .v-offer-slot {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 20px; /* makieta */
  }

  .v-offer-slot__foto { height: 180px; padding: 12px; } /* makieta */

  .v-offer-slot__ramka { flex-direction: row; border-radius: 12px; } /* makieta */

  .v-offer-slot__plus { width: 48px; height: 48px; font-size: 26px; } /* makieta */

  .v-offer-slot__tresc { gap: 12px; padding: 18px 16px 16px; } /* makieta */

  .v-offer-slot__nadtytul { font-size: 11.5px; } /* makieta */
  .v-offer-slot__tytul { font-size: 21px; } /* makieta */
  .v-offer-slot__opis { font-size: 14.5px; } /* makieta */
  .v-offer-slot__opis--szeroki,
  .v-offer-slot__lista { display: none; }
  .v-offer-slot__opis--waski { display: block; }

  .v-offer-slot__akcje { flex-direction: column; gap: 0; }
  .v-offer-slot__akcje .v-btn { width: 100%; }
  .v-offer-slot__akcje .v-offer-slot__glowny { flex: none; height: 52px; font-size: 16px; } /* makieta */
  .v-offer-slot__akcje .v-offer-slot__jak {
    height: 44px; /* makieta */
    border: none;
    background: transparent;
    font-size: 14.5px; /* makieta */
    font-weight: 700;
  }
}

/* ---------- x-offer-tile: kafelek 3a ----------
   Makieta „Oferta na profilu.dc.html” (handoff v73, plansze „3a Profil” i „3a Profil 8 ofert”),
   ten sam kafelek w „Oferta - Inne rzeczy” (4a/4c) i „Oferta - Inne od sprzedajacej” (5a/5b).
   Zdjęcie w ramce 4:5 według kadru z `x-offer-photo` (handoff v75, wariant B): wypełnia
   ramkę albo stoi w całości na rozmytym tle. Pod spodem tło ramki z makiety (#E9EDF2). */
.v-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100); /* makieta #E3E8EF, najbliższy token */
  border-radius: 20px; /* makieta */
  overflow: hidden;
}

.v-tile__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--v-n-100); /* makieta #E9EDF2 */
}

.v-tile__foto-link {
  position: absolute;
  inset: 0;
  display: block;
}

.v-tile__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Obniżka i stan oferty: lewy górny róg, jedno pod drugim (makieta 4a: 10 px od krawędzi). */
.v-tile__pastylki {
  position: absolute;
  top: 10px; /* makieta */
  left: 10px; /* makieta */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px; /* makieta */
  pointer-events: none;
}

.v-tile__obnizka {
  display: inline-flex;
  align-items: center;
  height: 28px; /* makieta */
  padding: 0 10px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-secondary-dark);
  color: var(--v-granat-staly);
  font: 800 12.5px/1 var(--v-font-body); /* makieta */
}

.v-tile__firma {
  display: flex;
  align-items: center;
  height: 24px; /* makieta */
  padding: 0 9px; /* makieta */
  border-radius: 7px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 800 11px/1 var(--v-font-body); /* makieta */
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(30, 43, 69, .18); /* makieta */
}

.v-badge.v-tile__stan {
  height: 22px; /* makieta, jak pastylka `x-offer-row` */
  min-height: 22px;
  padding: 0 var(--v-s-2);
  font-size: 10px; /* makieta */
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Plakietka „co dokładnie sprzedajesz”, odznaka nagrania i znacznik aparatu — te same
   miejsca co na `x-offer-row`. */
.v-badge.v-tile__plakietka {
  position: absolute;
  left: 10px; /* makieta */
  bottom: 10px; /* makieta */
}

.v-badge.v-tile__plakietka--nad-nagraniem { bottom: 42px; } /* makieta */

.v-tile__nagranie {
  position: absolute;
  left: 8px; /* makieta */
  bottom: 8px; /* makieta */
}

.v-tile__aparat {
  position: absolute;
  right: 8px; /* makieta */
  bottom: 8px; /* makieta */
  z-index: 1;
}

.v-tile__aparat svg { width: 15px; height: 15px; }

/* Serce na zdjęciu istnieje tylko na telefonie (blok `@media` niżej). */
.v-tile__serce-foto { display: none; }

.v-tile__tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px; /* makieta */
  min-width: 0;
  padding: var(--v-s-4);
}

/* MARKA · ROZMIAR · STAN — jedna linia, wersalikami, z wielokropkiem. */
.v-tile__nad {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 800 11.5px/1.3 var(--v-font-body); /* makieta */
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v-n-600);
}

.v-tile__tytul {
  display: -webkit-box;
  min-height: 42px; /* makieta: dwie linie, rzędy kafelków równej wysokości */
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font: 600 17px/1.25 var(--v-font-display); /* makieta */
}

.v-tile__tytul a {
  color: var(--v-primary);
  text-decoration: none;
}

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

.v-tile__cena {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 8px; /* makieta */
  margin-top: 4px; /* makieta */
  font: 600 24px/1.1 var(--v-font-display); /* makieta */
  letter-spacing: -.02em;
  color: var(--v-primary);
}

.v-tile__bylo {
  font: 400 14px/1 var(--v-font-body); /* makieta */
  letter-spacing: normal;
  color: var(--v-n-600);
}

.v-tile__ochrona {
  font-size: 12.5px; /* makieta */
  color: var(--v-n-600);
}

/* „Rozmiar M · twój rozmiar” na Starcie (makieta v80 „Start - Twoje zainteresowania”: 12 px, 700, zieleń). */
.v-tile__twoj {
  font: 700 12px/1.35 var(--v-font-body);
  color: var(--v-success);
}

/* Najniższa cena z 30 dni: jedna krótka linia (makieta 4a: 12 px). */
.v-omni.v-tile__omnibus {
  font-size: 12px; /* makieta */
  line-height: 1.4;
}

.v-tile__akcje {
  display: flex;
  gap: var(--v-s-2);
  margin-top: auto;
  padding-top: var(--v-s-2);
}

.v-tile__serce-form,
.v-tile__paczka-form { display: contents; }

.v-btn.v-tile__kup {
  flex: 1;
  min-width: 0;
  height: 44px; /* makieta */
  padding: 0 var(--v-s-3);
  border-radius: 12px; /* makieta */
  font-size: 14px; /* makieta */
  font-weight: 800;
}

.v-btn.v-tile__serce {
  flex: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--v-n-200);
  border-radius: 12px; /* makieta */
}

.v-btn.v-tile__serce[aria-pressed="true"] { color: var(--v-error); } /* makieta #B23A3A, najbliższy token */

/* Wariant „paczka” (makieta 5a/5b): ciaśniejszy, bez linii z ochroną, „+ Do paczki”. */
.v-tile--paczka { border-radius: 18px; } /* makieta */

.v-tile--paczka .v-tile__tresc {
  gap: 5px; /* makieta */
  padding: 14px; /* makieta */
}

.v-tile--paczka .v-tile__tytul {
  min-height: 40px; /* makieta */
  font-size: 16px; /* makieta */
}

.v-tile--paczka .v-tile__cena {
  margin-top: 2px; /* makieta */
  font-size: 22px; /* makieta */
}

.v-tile--paczka .v-tile__akcje { padding-top: 0; }

.v-btn.v-tile__paczka {
  flex: 1;
  height: 44px; /* makieta */
  border: 1.5px solid var(--v-primary);
  border-radius: 12px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-primary);
  font-size: 14px; /* makieta */
  font-weight: 800;
}

/* „W paczce”: zielona obwódka karty (2 px w makiecie — tu druga linia cieniem, żeby
   kafelek nie urósł o piksel przy kliknięciu) i zielony przycisk. */
.v-tile--w-paczce {
  border-color: var(--v-success); /* makieta #2E7D4F, najbliższy token */
  box-shadow: 0 0 0 1px var(--v-success);
}

.v-tile--w-paczce .v-btn.v-tile__paczka {
  border-color: var(--v-success);
  background: var(--v-success-soft); /* makieta #EEF6F1, najbliższy token */
  color: var(--v-success-text); /* makieta #1F5E3A, najbliższy token */
}

/* TELEFON — plansze nie mają wersji 390 px. Dwa kafelki w rzędzie (jak dotąd na profilu)
   nie mieszczą „Kup z ochroną” i serca obok siebie, więc serce schodzi na zdjęcie
   (prawy dolny róg, ten sam wzór co kafelek feedu), a przycisk bierze całą szerokość. */
@media (max-width: 760px) {
  .v-tile { border-radius: var(--v-r-card); }

  .v-tile__tresc {
    gap: 4px;
    padding: var(--v-s-3);
  }

  .v-tile__nad { font-size: 10.5px; } /* makieta: kicker telefonu z kafelka feedu */

  .v-tile__tytul {
    min-height: 38px; /* dwie linie po 15 px */
    font-size: 15px;
  }

  .v-tile__cena {
    gap: 0 6px; /* makieta */
    margin-top: 2px; /* makieta */
    font-size: 20px;
  }

  .v-tile__bylo { font-size: 12.5px; } /* makieta */
  .v-tile__ochrona { font-size: 12px; }
  .v-omni.v-tile__omnibus { font-size: 11.5px; } /* makieta */

  .v-tile__akcje { padding-top: 6px; } /* makieta */

  .v-btn.v-tile__kup { font-size: 13.5px; } /* makieta */

  .v-tile__akcje .v-tile__serce-form,
  .v-tile__akcje .v-tile__serce { display: none; }

  .v-tile__serce-foto {
    position: absolute;
    right: 8px; /* makieta */
    bottom: 8px; /* makieta */
    z-index: 1;
    display: block;
  }

  .v-tile__serce-foto .v-btn.v-tile__serce {
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(20, 28, 46, .16); /* makieta, jak serce kafelka feedu */
  }

  /* Znacznik aparatu staje obok serca: 8 + 44 + 8 od prawej, środek na wysokości serca. */
  .v-tile__aparat--przy-sercu {
    right: 60px; /* makieta */
    bottom: 18px; /* makieta */
  }

  .v-tile--paczka .v-tile__tresc { padding: var(--v-s-3); }
  .v-tile--paczka .v-tile__tytul { min-height: 38px; font-size: 15px; }
  .v-tile--paczka .v-tile__cena { font-size: 20px; }
  .v-btn.v-tile__paczka { font-size: 13.5px; } /* makieta */
}

/* ---------- x-offer-tile: warianty wyników wyszukiwania i strony marki ----------
   Makiety v73 „Vistitio Wyniki wyszukiwania” (karta 4:5, serce na zdjęciu, cała karta
   klikalna) i „Vistitio Strona marki” (karta 1:1, cena z ochroną w jednym wierszu, osoba
   pod kreską, „Nowa dziś”). */

/* Cała karta klikalna: odnośnik tytułu rozciągnięty warstwą na kafelek; serce stoi nad nią. */
.v-tile--karta { transition: border-color var(--v-dur-fast) var(--v-ease), box-shadow var(--v-dur-fast) var(--v-ease); }

.v-tile--karta:hover {
  border-color: var(--v-n-300); /* makieta #B9C4D3 */
  box-shadow: 0 10px 24px rgba(30, 43, 69, .08); /* makieta */
}

.v-tile--karta .v-tile__tytul a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.v-tile--karta .v-tile__tytul a:hover { text-decoration: none; }

.v-tile--karta .v-tile__serce-foto { z-index: 2; }

/* Strona marki: zdjęcie kwadratowe (makieta: aspect-ratio 1/1), nadal w całości. */
.v-tile--kwadrat .v-tile__foto { aspect-ratio: 1 / 1; }

/* Serce wyników: okrągłe 44 px, prawy górny róg, na każdej szerokości (makieta). */
.v-tile__serce-foto--zawsze {
  position: absolute;
  top: 10px; /* makieta */
  right: 10px; /* makieta */
  bottom: auto;
  z-index: 2;
  display: block;
}

.v-tile__serce-foto--zawsze .v-btn.v-tile__serce {
  border: 1px solid var(--v-n-100); /* makieta #E3E8EF, najbliższy token */
  border-radius: 50%;
  background: var(--v-n-0);
  box-shadow: none;
}

/* „Nowa dziś”: biała pastylka z zieloną kropką (makieta: 26 px, 12/800). */
.v-tile__nowa {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* makieta */
  height: 26px; /* makieta */
  padding: 0 10px; /* makieta */
  border-radius: 13px; /* makieta */
  background: var(--v-n-0);
  color: var(--v-success-text); /* makieta #1F5E3A, najbliższy token */
  font: 800 12px/1 var(--v-font-body); /* makieta */
}

.v-tile__nowa-kropka {
  width: 7px; /* makieta */
  height: 7px; /* makieta */
  border-radius: 50%;
  background: var(--v-success); /* makieta #2E7D4F, najbliższy token */
}

/* Cena i „X zł z ochroną” w jednym wierszu, kwota z ochroną do prawej (makieta marki). */
.v-tile__cena-wiersz {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 8px; /* makieta */
  margin-top: 4px; /* makieta */
}

.v-tile__cena-wiersz .v-tile__cena { margin-top: 0; }
.v-tile__cena-wiersz .v-tile__ochrona { white-space: nowrap; }

/* Osoba sprzedająca pod kreską (makieta marki): inicjały 24 px i nazwa 13 px. Dosunięta do
   dołu karty, żeby kreski w rzędzie stały na jednej wysokości. */
.v-tile__osoba {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  margin-top: auto;
  padding-top: 10px; /* makieta */
  border-top: 1px solid var(--v-n-100); /* makieta #EEF1F5, najbliższy token */
  font-size: 13px; /* makieta */
  color: var(--v-n-700);
}

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

@media (max-width: 760px) {
  .v-tile__serce-foto--zawsze {
    top: 8px; /* makieta */
    right: 8px; /* makieta */
    bottom: auto;
  }

  .v-tile__osoba { font-size: 12px; } /* makieta */
}

/* ---------- x-offer-photo: zdjęcie oferty w ramce kafelka ----------
   Makieta „Kafelek - zdjecia w ramce.dc.html” (handoff v75, wariant B). Ramkę daje komponent
   wołający (x-offer-tile, x-offer-row, x-offer-mini, x-offer-card, slajd x-gallery); tu tylko
   to, co w środku. Kadr `wypelnij` = `cover` z reguł ramki. Kadr `calosc` = całe zdjęcie
   (`contain`) na tym samym zdjęciu powiększonym 1,25 i rozmytym, pod zasłoną jasną albo ciemną.
   Gdy kadr różni się między telefonem a szerokim ekranem (inna ramka, np. karta pozioma),
   zdjęcie dostaje `--calosc-szeroki` albo `--calosc-telefon`, a tło `--szeroki`/`--telefon`
   (pokazuje się tylko tam). Granica 760 px jak w kafelkach.
   Selektory z dwiema klasami, bo reguły ramek (`.v-…__foto img`) mają wagę klasy i znacznika. */
.v-offer-photo__foto { display: block; }

.v-offer-photo__foto.v-offer-photo__foto--calosc { object-fit: contain; }

/* Ostre zdjęcie musi stać NAD rozmytym tłem (to leży `absolute`), więc dostaje pozycję —
   chyba że ramka już ją nadała (kafelek 3a: `absolute`), stąd waga zero przez `:where`. */
:where(.v-offer-photo__foto--calosc, .v-offer-photo__foto--calosc-szeroki, .v-offer-photo__foto--calosc-telefon) { position: relative; }

.v-offer-photo__tlo {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.v-offer-photo__tlo .v-offer-photo__rozmyte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.25); /* makieta */
  filter: blur(var(--v-kadr-rozmycie, 22px)) saturate(.85); /* makieta */
  display: block;
}

/* Zasłona: zdjęcia leżą na nim w obu motywach, więc kolory stałe, wprost z makiety. */
.v-offer-photo__tlo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .42); /* makieta */
}

.v-offer-photo__tlo--ciemna::after { background: rgba(15, 20, 30, .22); } /* makieta */

@media (min-width: 761px) {
  .v-offer-photo__foto.v-offer-photo__foto--calosc-szeroki { object-fit: contain; }

  .v-offer-photo__tlo.v-offer-photo__tlo--telefon { display: none; }
}

@media (max-width: 760px) {
  .v-offer-photo__foto.v-offer-photo__foto--calosc-telefon { object-fit: contain; }

  .v-offer-photo__tlo.v-offer-photo__tlo--szeroki { display: none; }
}

/* Promień rozmycia według ramki: kafelek 3a i galeria 22 px (domyślnie), karta pozioma
   18 px, telefon 14 px (makieta). Małe kafelki (x-offer-mini, x-offer-card, ok. 150–200 px)
   makieta nie rysuje — biorą promień telefonu, bo ramka ma podobny rozmiar. */
.v-offer-row__foto { --v-kadr-rozmycie: 18px; }

.v-offer-mini__foto,
.v-offer__foto { --v-kadr-rozmycie: 14px; }

@media (max-width: 760px) {
  .v-tile__foto,
  .v-offer-row__foto,
  .v-gal__glowne { --v-kadr-rozmycie: 14px; }
}