/* Widok: strona oferty (/oferta/{slug}).
   Źródło: „Vistitio Prototyp Mobile.dc.html” i „Vistitio Prototyp Desktop.dc.html”,
   ekran „Oferta”. Wartości wyłącznie z tokens.css; komponenty z biblioteki.

   Arkusz jest pisany od mobile'a, bo makieta mobilna jest ciągiem jednej kolumny —
   to ona wyznacza kolejność. Desktop dokłada drugą kolumnę i przykleja prawą kartę.
   Bloki prawej kolumny są w HTML rozsypane po ekranie mobilnym, więc na wąskim ekranie
   kolumny rozpuszczamy przez `display: contents` i układamy dzieci polem `order`.
   Dwa zestawy znaczników dla jednego ekranu rozjeżdżają się przy pierwszej poprawce. */

/* ---------- szkielet ---------- */

.oferta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* Miejsca pod przyklejony pasek akcji pilnuje powłoka (`.powloka`, sekcja v65 na dole). */
}

.oferta__kolumna { display: contents; }

/* KOLEJNOŚĆ NA TELEFONIE. Każde dziecko `.oferta` MUSI mieć tu swoją pozycję:
   brak `order` znaczy zero, czyli PRZED wszystkim innym. Tak właśnie trzy sekcje
   „a co jeszcze" (`.oferta__wiecej`) wylądowały na samej górze strony oferty —
   nad zdjęciem i tytułem — bo dopisano je później, a lista poniżej została stara
   (nazwy `.oferta__podobne` i `.oferta__propozycja` w tamtym miejscu już nie istnieją).
   Dokładasz blok do tej strony? Dopisz go tutaj w tej samej chwili. */
.oferta__zdjecie-blok { order: 1; }
.oferta__glowka { order: 2; }
.oferta__sciezka { order: 3; }
.oferta__opis { order: 4; }
.oferta__parametry { order: 5; }
.oferta__wymiary { order: 6; }
.oferta__zaufanie { order: 8; }
.oferta__zglos { order: 9; }
/* „Udostępnij” stoi w kolumnie akcji tuż przed „Zgłoś” (ta sama pozycja, w DOM jest wcześniej).
   Bez tego wpisu stał na telefonie NAD zdjęciem (partia 4, pułapka z komentarza wyżej). */
.oferta__udostepnij { order: 9; }

/* „Zgłoś tę ofertę” stoi w KOLUMNIE AKCJI, razem z „Zaproponuj cenę” i „Udostępnij”,
   więc ma ich wymiary: cała szerokość i 48 px. Domyślny wygląd zgłoszenia to napis
   131×40 px — obok dwóch przycisków na 337×48 wyglądał jak element niedokończony
   (zrzut Huberta 08.10). Wygląd, nie zachowanie: nadal jest rzadką akcją i nadal
   otwiera się dopiero po kliknięciu. */
.oferta__zglos > summary { display: block; }

.oferta__zglos > summary > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border-radius: var(--v-r-btn);
}
.oferta__wiecej { order: 10; }
/* Karta akcji jest na telefonie schowana (v65: akcje niesie `.oferta__dol`). */
.oferta__pasek { order: 11; }

/* ---------- ścieżka ---------- */

/* Pomiary z prototypu: pismo 13 px, odstęp 7 px między okruszkami, ukośnik 12 px
   w kolorze n-300, a między „Wróć” i ścieżką PIONOWA KRESKA 1×16 px, nie znak „|”. */
.oferta__sciezka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px; /* makieta */
  font-size: 13px;
}

.oferta__sciezka a {
  font-weight: 600;
  color: var(--v-n-600);
  text-decoration: underline;
  text-decoration-color: var(--v-n-300);
  text-underline-offset: 3px;
}

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

/* Ukośnik jest mniejszy od podpisów i wyblakły — ma dzielić, nie czytać się. */
.oferta__sciezka-sep { color: var(--v-n-300); font-size: 12px; }

/* Kreska po „Wróć”: osobny element, nie znak, żeby miała równo 16 px i nie zmieniała
   wysokości z pismem. */
.oferta__sciezka-kreska {
  width: 1px; /* makieta */
  height: 16px; /* makieta */
  background: var(--v-n-200);
  flex-shrink: 0;
  margin: 0 3px; /* makieta */
}

/* Bieżąca strona nie jest odnośnikiem: ciemniejsza i bez podkreślenia. */
.oferta__sciezka-tu { font-weight: 600; color: var(--v-n-800); }

.oferta__wroc { font-size: 13px; font-weight: 600; color: var(--v-n-600); flex-shrink: 0; }
.oferta__wroc:hover { color: var(--v-primary); }

.oferta__sciezka-tu {
  font-weight: 700;
  color: var(--v-primary);
}

/* ---------- główka: marka, tytuł, cena ---------- */

.oferta__glowka {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.oferta__marka {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--v-n-600);
}

.oferta__marka-link {
  font-weight: 700;
  color: var(--v-primary);
  text-decoration: underline;
  text-decoration-color: var(--v-n-300);
  text-underline-offset: 3px;
}

.oferta__marka-link:hover { color: var(--v-secondary-text); }

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

/* Cena i cena z ochroną stoją zawsze razem. Sama cena bez drugiego wiersza znaczy,
   że kupująca dowie się o opłacie dopiero w koszyku — a tam jest za późno. */
.oferta__cena {
  font: 600 28px/1 var(--v-font-display);
  letter-spacing: var(--v-ls-display);
}

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

.oferta__pastylki {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

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

/* „Co dokładnie sprzedajesz” inne niż rzecz — zdanie stoi przy tytule, nie w opisie. */
.oferta__uwaga {
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}

/* ---------- opis, wada, zwrot ---------- */

.oferta__opis {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.oferta__opis h2,
.oferta__wymiary h2,
.oferta__podobne h2 {
  font: 600 var(--v-t-h3) var(--v-font-display);
  letter-spacing: var(--v-ls-h3);
}

.oferta__opis-tresc {
  font-size: 14px;
  line-height: 1.55;
  max-width: var(--v-w-text);
  /* Odstępy z pola opisu zostają: HTML zjada znaki nowej linii, a sprzedająca
     rozbija opis na akapity i chce je widzieć na ofercie. */
  white-space: pre-line;
}

/* Wada przy opisie, nie w przypisie na dole: kupująca ma ją zobaczyć przed decyzją,
   a nie po odebraniu paczki. Ochra, nie czerwień — to nie błąd, tylko stan rzeczy. */
.oferta__wada,
.oferta__zwrot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: var(--v-r-card);
  padding: 14px 16px;
}

.oferta__wada {
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
}

.oferta__zwrot {
  background: var(--v-success-soft);
  color: var(--v-success-text);
}

.oferta__wada-tytul,
.oferta__zwrot-tytul {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
}

.oferta__wada-tresc,
.oferta__zwrot-tresc {
  font-size: 12.5px;
  line-height: 1.55;
}

/* ---------- parametry rzeczy ---------- */

.oferta__parametry {
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.oferta__param {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--v-n-100);
}

.oferta__param:last-child { border-bottom: none; }

.oferta__param-klucz {
  font-size: 12.5px;
  color: var(--v-n-600);
  flex-shrink: 0;
}

.oferta__param-wartosc {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  text-align: right;
}

/* ---------- wymiary ---------- */

.oferta__wymiary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}

.oferta__wymiary-siatka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.oferta__wymiar {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  background: var(--v-n-50);
  border-radius: var(--v-r-input);
  padding: 10px 12px;
}

.oferta__wymiar-klucz {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--v-n-600);
}

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

.oferta__wymiary-nota {
  font-size: 12px;
  line-height: 1.5;
  color: var(--v-n-500);
}

/* ---------- karta akcji (desktop) i rezerwacja ---------- */

/* Na desktopie akcje stoją w przyklejonej prawej kolumnie (reguły w sekcji „web”).
   Na telefonie ten blok znika — od handoffu v65 akcje niesie jeden rząd `.oferta__dol`
   przyklejony do dołu ekranu (sekcja v65 na końcu arkusza). */
.oferta__pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px; /* makieta */
}

/* Linijka rezerwacji i blok „to twoja oferta" biorą cały rząd dla siebie. */
.oferta__pasek > .oferta__rezerwacja,
.oferta__pasek > .oferta__twoja { flex: 1 1 100%; }

/* Pasek jest już przyklejony przez rodzica — druga warstwa `sticky` tylko przeszkadza. */
.oferta__pasek .v-actions { position: static; }

/* Rzeczy zarezerwowanej NIE wyszarzamy: rezerwacja potrafi przepaść. Stan niesie
   pastylka i zdanie, a przycisk „Powiadom mnie” stoi PRZY nich, nie pod opisem. */
.oferta__rezerwacja {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--v-secondary-soft);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--v-n-700);
}

.oferta__rezerwacja-tresc { flex: 1; min-width: 0; }

/* Etykiety akcji bywają całym zdaniem („Powiadom mnie, jeśli rezerwacja przepadnie”),
   więc przyciski w pasku łamią się do drugiej linii zamiast uciekać poza ekran. */
.oferta__akcje { flex-wrap: wrap; }

.oferta__akcje .v-btn {
  flex: 1 1 auto;
  height: auto;
  min-height: var(--v-hit-min);
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
}

/* ---------- propozycja ceny ---------- */

.oferta__propozycja-akcje {
  display: flex;
  gap: 8px;
}

.oferta__propozycja-akcje .v-btn { flex: 1; }

.oferta__propozycja-akcje .oferta__serce {
  flex: 0 0 auto;
  width: 48px;
  padding: 0;
}

.oferta__propozycja-nota {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v-n-600);
}

/* ---------- sprzedająca, rozbicie kwoty, zasady ---------- */

.oferta__zaufanie {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.oferta__linia {
  height: 1px;
  background: var(--v-n-100);
}

.oferta__fakt {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 13px;
}

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

.oferta__fakt-wartosc {
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}

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

.oferta__pieniadze { align-self: flex-start; }

/* ---------- podobne ---------- */

.oferta__podobne {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.oferta__podobne-gora {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}

.oferta__podobne-ile {
  font-size: 13px;
  color: var(--v-n-600);
}

.oferta__podobne-siatka {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ---------- web ---------- */

@media (min-width: 761px) {
  .oferta {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
    align-items: start;
    gap: 32px;
    padding-bottom: 0;
  }

  .oferta__kolumna {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  /* Kolejność z HTML-a jest kolejnością makiety desktopowej — `order` służy tylko
     do przetasowania kolumn na wąskim ekranie i tutaj musi zejść z drogi. */
  .oferta__sciezka,
  .oferta__galeria,
  .oferta__zdjecie-blok,
  .oferta__glowka,
  .oferta__opis,
  .oferta__parametry,
  .oferta__wymiary,
  .oferta__zaufanie,
  .oferta__udostepnij,
  .oferta__zglos,
  .oferta__wiecej,
  .oferta__pasek { order: 0; }

  .oferta__kolumna--lewa { gap: 24px; }

  /* Prawa kolumna JEST kartą z makiety: jedna biel, jedno obramowanie, przyklejona
     do góry. Karty w środku tracą własne tło, żeby nie było karty w karcie. */
  .oferta__kolumna--prawa {
    position: sticky;
    /* makieta: aside ma top 100 px, skala czwórkowa daje 96 */
    top: 96px;
    gap: 16px;
    background: var(--v-n-0);
    border: 1px solid var(--v-n-100);
    border-radius: var(--v-r-card);
    padding: 24px;
  }

  .oferta__kolumna--prawa .v-card {
    background: none;
    border: none;
    padding: 0;
  }

  .oferta__pasek {
    flex-direction: column;
    align-items: stretch;
  }

  .oferta__pasek > .oferta__akcja,
  .oferta__pasek > .v-btn { order: 0; flex: 0 0 auto; }

  /* W wąskiej kolumnie akcje stoją jedna pod drugą, akcja główna na górze. */
  .oferta__akcje .v-btn { flex: 1 1 100%; }
  .oferta__akcje .v-btn--primary { order: -1; }

  .oferta__tytul { font: 600 22px/1.2 var(--v-font-display); }
  .oferta__cena { font: 600 var(--v-t-money) var(--v-font-display); }
  .oferta__opis-tresc { font-size: 15px; line-height: 1.6; }
  .oferta__parametry,
  .oferta__wymiary { padding: 18px 20px; }
  .oferta__podobne-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* ---------- cena w pasku akcji na desktopie ---------- */
/* Reguła ze styleguide'u mówi „pasek akcji zawsze z ceną" i na mobile ma rację: pasek
   stoi przyklejony do dołu, daleko od główki, więc bez kwoty kupuje się w ciemno.
   Na web pasek siedzi w kolumnie bocznej dwie linijki pod ceną 32 px, a przycisk i tak
   niesie kwotę („Kup teraz · 246,00 zł"), więc ta sama liczba pokazywałaby się trzy razy
   w jednym spojrzeniu. Ukrywamy TYLKO powtórzony wiersz, cena zostaje w przycisku. */
@media (min-width: 1024px) {
  .oferta__akcje .v-actions__cena { display: none; }
}


/* Karta produktowa: układ z prototypu desktop. */

.oferta__wroc {
  font-weight: 600;
  color: var(--v-primary);
}

.oferta__akcja { width: 100%; }

/* Wiersz sprzedającej: bez szarego pudełka, ze strzałką po prawej — prowadzi
   do profilu, więc musi wyglądać na klikalny. */
.oferta__osoba {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-s-3);
  padding: var(--v-s-3) 0;
  color: inherit;
  text-decoration: none;
}

.oferta__osoba .v-seller { background: transparent; padding: 0; }
.oferta__osoba:hover .v-seller__nazwa { text-decoration: underline; }

.oferta__osoba-strzalka {
  color: var(--v-n-500);
  font-size: 18px;
  flex: none;
}

.oferta__nota {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--v-n-600);
}


/* Panel propozycji ceny — makieta: w ramce, z polem kwoty, przyciskiem i zdaniami
   o zasadach. Desktop: otwarty w karcie; telefon: rozwija go wiersz pod ceną (v65). */

.oferta__propozycja-panel {
  margin-top: var(--v-s-3);
  padding: var(--v-s-4);
  border: 1px solid var(--v-n-200);
  border-radius: var(--v-r-input);
  display: flex;
  flex-direction: column;
  gap: var(--v-s-3);
}

.oferta__propozycja-tytul {
  font-weight: 700;
  font-size: 15px;
}

/* Pole, „zł” i „Wyślij” w jednej linii, równej wysokości (makieta: telefon 48 px, desktop 44).
   Elementem flex jest `.v-field` z x-input, nie sam <input> (klasa z atrybutów ląduje na
   inpucie), a `.v-field__wrap` bez etykiety niesie 6 px odstępu od góry — przez to pole
   stało niżej niż przycisk (zrzut Huberta 05.10). Góra do góry, nie środek: błąd pod polem
   wydłuża `.v-field` i przy środkowaniu przesunąłby przycisk. */
.oferta__propozycja-form {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* makieta */
  --propozycja-h: 48px; /* makieta, telefon */
}

.oferta__propozycja-form .v-field { flex: 1 1 auto; min-width: 0; }

.oferta__propozycja-form .v-field__wrap { margin-top: 0; }

.oferta__propozycja-form .v-input {
  height: var(--propozycja-h);
  padding: 0 12px; /* makieta */
  border-radius: 10px; /* makieta */
  font: 600 18px var(--v-font-display); /* makieta: Outfit 18/600 */
  color: var(--v-primary);
}

.oferta__propozycja-form .v-btn {
  flex-shrink: 0;
  height: var(--propozycja-h);
  padding: 0 16px; /* makieta */
  border-radius: 10px; /* makieta */
  font-size: 13.5px; /* makieta */
}

.oferta__propozycja-zl {
  display: flex;
  align-items: center;
  height: var(--propozycja-h);
  color: var(--v-n-600);
  font-size: 13px; /* makieta */
}

.oferta__propozycja-ile {
  margin: 0;
  font-weight: 700;
  font-size: 14px;
}

/* ---------- sekcje „a co jeszcze” ---------- */
.oferta__wiecej { display: flex; flex-direction: column; gap: 12px; min-width: 0; } /* makieta */

.oferta__wiecej-gora {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px; /* makieta */
}

.oferta__wiecej-gora h2 {
  margin: 0;
  font: 600 18px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
  color: var(--v-n-800);
}

/* Sekcja sprzedającej jest KARTĄ, dwie pozostałe stoją wprost na tle — tak rysuje
   to prototyp i to nie jest przypadek: „inne rzeczy od niej” to oferta na dokupienie
   do tej samej paczki, więc trzyma się razem.
   Od handoffu v74 („Oferta - Inne od sprzedajacej”): karta „kup razem” — awatar, tytuł,
   kafelki 3a z „Do paczki” i pasek z sumą na dole. */
.oferta__od-osoby {
  background: var(--v-n-0);
  border: 1px solid var(--v-n-100); /* makieta #E3E8EF, najbliższy token */
  border-radius: 20px; /* makieta */
  padding: var(--v-s-6);
  gap: 18px; /* makieta */
}

.oferta__od-osoby-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px; /* makieta */
}

.oferta__od-osoby-tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px; /* makieta */
  min-width: 240px; /* makieta */
}

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

.oferta__od-osoby-nota { font: 400 14px/1.45 var(--v-font-body); color: var(--v-n-700); } /* makieta */

.v-btn.oferta__od-osoby-profil {
  gap: 6px; /* makieta */
  height: 44px; /* makieta */
  padding: 0 var(--v-s-4);
  border-color: var(--v-n-200);
  border-radius: 12px; /* makieta */
  font-size: 14px; /* makieta */
  font-weight: 700;
}

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

.oferta__paczka-siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v-s-4);
}

/* Mniej niż trzy rzeczy: wolne miejsce do końca rzędu mówi, co daje jedna paczka (5a). */
.oferta__paczka-zacheta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px; /* makieta */
  padding: var(--v-s-6) var(--v-s-7);
  border-radius: 18px; /* makieta */
  background: var(--v-n-50);
}

.oferta__paczka-zacheta--3 { grid-column: span 3; }
.oferta__paczka-zacheta--2 { grid-column: span 2; }

.oferta__paczka-zacheta-tytul {
  font: 600 20px/1.25 var(--v-font-display); /* makieta */
  letter-spacing: -.015em; /* makieta */
  text-wrap: balance;
  color: var(--v-primary);
}

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

.oferta__paczka-zaleta {
  display: flex;
  align-items: center;
  gap: 10px; /* makieta */
  font-size: 14px; /* makieta */
  color: var(--v-n-700);
}

.oferta__paczka-ptaszek {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 22px; /* makieta */
  height: 22px; /* makieta */
  border-radius: 50%;
  background: var(--v-success-soft); /* makieta #EEF6F1, najbliższy token */
  color: var(--v-success); /* makieta #2E7D4F, najbliższy token */
  font: 800 12px/1 var(--v-font-body); /* makieta */
}

/* Pasek na dole: jasny bez rzeczy w paczce, granatowy z sumą i „Kup razem” (5a/5b). */
.oferta__paczka-pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--v-s-4);
  padding: 14px var(--v-s-4) 14px var(--v-s-5); /* makieta */
  border-radius: var(--v-r-card);
  background: var(--v-n-50);
  color: var(--v-primary);
}

.oferta__paczka-pasek--pelny {
  background: var(--v-granat-staly);
  color: #FFFFFF; /* makieta, TODO token: biel stała na granacie */
}

.oferta__paczka-pasek-tresc {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px; /* makieta */
  min-width: 260px; /* makieta */
}

.oferta__paczka-pasek-tytul { font: 800 15px/1.35 var(--v-font-body); } /* makieta */
.oferta__paczka-pasek-opis { font-size: 13.5px; color: var(--v-n-600); } /* makieta */
.oferta__paczka-pasek--pelny .oferta__paczka-pasek-opis { color: var(--v-na-granacie); } /* makieta #C9D2DE */

.oferta__paczka-suma {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  animation: oferta-paczka-suma var(--v-dur-base) var(--v-ease);
}

.oferta__paczka-suma-kwota {
  font: 600 24px/1.1 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
}

.oferta__paczka-suma-opis { font-size: 12.5px; color: var(--v-na-granacie); } /* makieta */

.oferta__paczka-kup-form { display: contents; }

.v-btn.oferta__paczka-kup {
  height: 48px; /* makieta */
  padding: 0 22px; /* makieta */
  border-radius: 12px; /* makieta */
  background: var(--v-secondary-dark);
  color: var(--v-granat-staly);
  font-size: 15px; /* makieta */
  font-weight: 800;
}

.v-btn.oferta__paczka-kup:hover { background: #E8BB66; } /* makieta, TODO token */

@keyframes oferta-paczka-suma {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oferta__paczka-suma { animation: none; }
}

/* „Podobne” (handoff v75, „Oferta - Podobne”): nagłówek z kategorią jako odnośnikiem,
   jeden rząd czterech kafelków 3a (karta z sercem na zdjęciu) i przy mniej niż trzech
   wolne miejsce do końca rzędu prowadzące do kategorii (6a). */
.oferta__podobne {
  container: podobne / inline-size;
  gap: 18px; /* makieta */
}

.oferta__podobne-gora {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--v-s-3);
}

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

.oferta__podobne-naglowek h2 {
  margin: 0;
  font: 600 24px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
  color: var(--v-primary);
}

.oferta__podobne-ile { font-size: 14px; color: var(--v-n-700); } /* makieta */
.oferta__podobne-ile a { font-weight: 700; color: var(--v-primary); }
.oferta__podobne-ile a:hover { color: var(--v-secondary-text); }

.oferta__podobne-siatka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v-s-4);
}

/* Wolne miejsce bierze resztę rzędu: przy zero ofert cały, przy jednej trzy kolumny (6a). */
.oferta__podobne-malo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--v-s-4);
  padding: var(--v-s-7);
  border-radius: 20px; /* makieta */
  background: var(--v-n-50);
}

.oferta__podobne-malo--0 { grid-column: 1 / -1; }
.oferta__podobne-malo--1 { grid-column: span 3; }
.oferta__podobne-malo--2 { grid-column: span 2; }

.oferta__podobne-malo-tytul {
  font: 600 21px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
  text-wrap: balance;
  color: var(--v-primary);
}

.oferta__podobne-skroty {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-s-2);
}

.v-chip.oferta__podobne-skrot {
  height: 40px; /* makieta */
  padding: 0 var(--v-s-4);
  border-radius: 20px; /* makieta */
  font-size: 14px; /* makieta */
}

.v-chip.oferta__podobne-skrot:hover { border-color: var(--v-primary); background: var(--v-n-0); }

/* Wysokość jako minimum: w wąskiej karcie (dwie oferty w trzech kolumnach) długa nazwa
   kategorii łamie napis na dwie linie i przycisk musi urosnąć, a nie przyciąć tekst. */
.v-btn.oferta__podobne-przegladaj {
  align-self: flex-start;
  height: auto;
  min-height: 46px; /* makieta */
  padding: var(--v-s-3) var(--v-s-5);
  border-radius: 12px; /* makieta */
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

/* Węższa lewa kolumna (1440: 773 px, plansza zakłada 966) — jak „Inne rzeczy w Vistitio”:
   trzy kafelki w rzędzie, czwarty chowamy (prowadzi do niego kategoria w nagłówku),
   wolne miejsce bierze tyle kolumn, ile zostało. Telefon ma własny układ niżej. */
@media (min-width: 761px) {
  @container podobne (max-width: 879px) {
    .oferta__podobne-siatka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oferta__podobne-siatka > .v-tile:nth-child(n+4) { display: none; }
    .oferta__podobne-malo--1 { grid-column: span 2; }
    .oferta__podobne-malo--2 { grid-column: span 1; }
  }
}

/* „Inne rzeczy w Vistitio” oddziela kreska — to już nie jest podpowiedź do tej rzeczy.
   Od handoffu v73 („Oferta - Inne rzeczy”): kafelek 3a, do trzech ofert trzy kolumny
   z przyciskami i wolnym miejscem (4a), więcej — cztery kolumny bez przycisków (4c). */
.oferta__z-serwisu {
  container: z-serwisu / inline-size;
  gap: 18px; /* makieta */
  padding-top: var(--v-s-4);
  border-top: 1px solid var(--v-n-100);
}

.oferta__z-serwisu .oferta__wiecej-gora h2 { font-size: 24px; } /* makieta */

/* Ten sam odnośnik „… →” po prawej nagłówka w „Podobnych” (6b: „Zobacz wszystkie →”). */
.oferta__z-serwisu-link,
.oferta__podobne-wszystkie {
  font-size: 14px; /* makieta */
  font-weight: 700;
  color: var(--v-primary);
}

.oferta__z-serwisu-link:hover,
.oferta__podobne-wszystkie:hover { color: var(--v-secondary-text); }

.oferta__z-serwisu-siatka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--v-s-5);
}

.oferta__z-serwisu-siatka--cztery {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v-s-4);
}

/* Plansza 4c zakłada lewą kolumnę 966 px (kafelek ~230 px). U nas przy 1440 kolumna ma
   773 px — cztery kolumny dałyby kafelek 181 px, w którym linia Omnibus łamie się na dwie,
   a tytuły i kicker są ucięte. Węższa kolumna: trzy kafelki w rzędzie (~245 px, jak w makiecie)
   i dalej DWA rzędy — siódmy i ósmy chowamy, prowadzi do nich „Pokaż więcej nowych rzeczy”. */
@container z-serwisu (max-width: 879px) {
  .oferta__z-serwisu-siatka--cztery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oferta__z-serwisu-siatka--cztery > .v-tile:nth-child(n+7) { display: none; }
}

/* Wolne miejsce w siatce prowadzi do nowych ofert (4a). Przy jednej ofercie bierze dwie
   kolumny, żeby rząd nie kończył się pustą dziurą. */
.oferta__nowe {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--v-s-3);
  padding: var(--v-s-6);
  border: 1px dashed var(--v-n-300); /* makieta #C9D2DE, najbliższy token */
  border-radius: 20px; /* makieta */
  background: var(--v-n-50);
  color: var(--v-primary);
  text-decoration: none;
}

.oferta__nowe:hover { border-color: var(--v-primary); color: var(--v-primary); }
.oferta__z-serwisu-siatka > .v-tile:only-of-type + .oferta__nowe { grid-column: span 2; }

.oferta__nowe-tytul {
  font: 600 21px/1.2 var(--v-font-display); /* makieta */
  letter-spacing: -.02em; /* makieta */
  text-wrap: balance;
}

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

.oferta__nowe-dalej {
  display: flex;
  align-items: center;
  gap: var(--v-s-2);
  font-size: 14.5px; /* makieta */
  font-weight: 800;
}

.v-btn.oferta__z-serwisu-wiecej {
  align-self: center;
  gap: var(--v-s-2);
  height: 48px; /* makieta */
  padding: 0 var(--v-s-6);
  border: 1.5px solid var(--v-primary);
  border-radius: 12px; /* makieta */
  font-size: 15px; /* makieta */
  font-weight: 800;
}

/* TELEFON (plansze bez wersji 390 px): wszystkie trzy siatki po dwa kafelki w rzędzie —
   ten sam układ co profil, zamiast przewijanego w bok rzędu, który chowa połowę rzeczy
   za krawędzią. Wolne miejsca i pasek „kup razem” biorą całą szerokość. */
@media (max-width: 760px) {
  .oferta__od-osoby { padding: var(--v-s-4); gap: var(--v-s-4); }
  .oferta__od-osoby-tresc { min-width: 0; }
  .oferta__od-osoby-tresc h2 { font-size: 20px; } /* makieta */
  .oferta__od-osoby-nota { font-size: 13px; } /* makieta */
  .v-btn.oferta__od-osoby-profil { width: 100%; }

  .oferta__paczka-siatka,
  .oferta__z-serwisu-siatka,
  .oferta__z-serwisu-siatka--cztery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-s-3);
  }

  .oferta__paczka-zacheta,
  .oferta__paczka-zacheta--2,
  .oferta__paczka-zacheta--3 {
    grid-column: 1 / -1;
    gap: var(--v-s-3);
    padding: 18px var(--v-s-4); /* makieta */
  }

  .oferta__paczka-zacheta-tytul { font-size: 17px; } /* makieta */
  .oferta__paczka-zaleta { font-size: 13.5px; } /* makieta */

  .oferta__paczka-pasek {
    flex-direction: column;
    align-items: stretch;
    gap: var(--v-s-3);
    padding: 14px var(--v-s-4); /* makieta */
  }

  .oferta__paczka-pasek-tresc { min-width: 0; }
  .oferta__paczka-suma { align-items: flex-start; }
  .v-btn.oferta__paczka-kup { width: 100%; }

  /* „Podobne” na telefonie (plansza tylko desktop): jak „Inne rzeczy w Vistitio” — dwa
     kafelki w rzędzie, wolne miejsce zawsze w osobnym rzędzie, bo niesie chipy i przycisk. */
  .oferta__podobne { gap: var(--v-s-4); }
  .oferta__podobne-naglowek h2 { font-size: 20px; } /* makieta */
  .oferta__podobne-ile { font-size: 13px; } /* makieta */

  .oferta__podobne-siatka {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--v-s-3);
  }

  .oferta__podobne-malo,
  .oferta__podobne-malo--1,
  .oferta__podobne-malo--2 {
    grid-column: 1 / -1;
    gap: var(--v-s-3);
    padding: 18px var(--v-s-4); /* makieta */
  }

  /* Tło strony na telefonie to --v-n-50, czyli kolor karty z planszy — karta zlewałaby się
     z tłem. Odwracamy: biel z obwódką kafelka, ta sama różnica co na białej stronie desktopu. */
  .oferta__podobne-malo {
    border: 1px solid var(--v-n-100); /* makieta #E3E8EF, najbliższy token */
    background: var(--v-n-0);
  }

  .oferta__podobne-malo-tytul { font-size: 17px; } /* makieta */

  .oferta__z-serwisu .oferta__wiecej-gora h2 { font-size: 20px; } /* makieta */
  .oferta__z-serwisu-siatka > .v-tile:only-of-type + .oferta__nowe { grid-column: auto; }
  .oferta__z-serwisu-siatka > .v-tile + .v-tile + .oferta__nowe { grid-column: 1 / -1; }
  .oferta__nowe { padding: 18px var(--v-s-4); gap: var(--v-s-2); } /* makieta */
  .oferta__nowe-tytul { font-size: 17px; } /* makieta */
  .oferta__nowe-opis { font-size: 13px; } /* makieta */
  .oferta__nowe-dalej { font-size: 13.5px; } /* makieta */
}

/* Chipy wad na ofercie — to samo, co sprzedająca zaznaczyła przy wystawianiu. */
.oferta__wada-chipy { display: flex; flex-wrap: wrap; gap: 6px; } /* makieta */

/* Własna oferta: jeden blok zamiast przycisków kupującej. */
.oferta__twoja { display: flex; flex-direction: column; align-items: flex-start; gap: var(--v-s-3); }
.oferta__twoja-nota { margin: 0; font: 400 13px/1.5 var(--v-font-body); color: var(--v-n-600); }


/* UDOSTEPNIENIE OFERTY (handoff PWA). Jeden przycisk, dwa zachowania: okno
   systemowe tam, gdzie jest, kopiowanie linku tam, gdzie go nie ma. Bez
   JavaScriptu nie pokazuje sie wcale, bo obie drogi go wymagaja. */
.bez-js .v-tylko-z-js { display: none; }

.oferta__udostepnij {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* cel dotyku */
  margin-top: var(--v-s-4);
  padding: 0 var(--v-s-5);
  border: 1px solid var(--v-n-200);
  border-radius: var(--v-r-btn);
  background: var(--v-n-0);
  font: 600 var(--v-t-ui) var(--v-font-body);
  color: var(--v-primary);
  cursor: pointer;
}

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

/* Po skopiowaniu przycisk MOWI, co sie stalo — komunikat obok niczego by nie
   dodal, a w aplikacji nie ma paska adresu, z ktorego dalo by sie to poznac. */
.oferta__udostepnij-gotowe { display: none; }
.oferta__udostepnij[data-stan="skopiowane"] .oferta__udostepnij-domyslnie { display: none; }
.oferta__udostepnij[data-stan="skopiowane"] .oferta__udostepnij-gotowe { display: inline; }
.oferta__udostepnij[data-stan="skopiowane"] { border-color: var(--v-success); color: var(--v-success-text); }


/* ===========================================================================
   OFERTA W APLIKACJI (Prototyp Mobile, handoff PWA 36, ekran „Oferta”).

   Zdjecie zaczyna sie od samej gory ekranu — paska nad nim NIE MA. Wstecz i serce
   plywaja na zdjeciu jako biale kolka 44 px, a licznik zdjec siedzi w jego prawym
   dolnym rogu. W przegladarce nic z tego nie obowiazuje: tam wstecz daje pasek
   przegladarki, a serce stoi w przyklejonym pasku akcji na dole.
   =========================================================================== */


/* ⚠️ UKLADEM ODNIESIENIA JEST OPAKOWANIE, nie sama galeria: kolka stoja PRZED nia
   w znaczniku, wiec `position: relative` na galerii nic im nie daje — pierwsza wersja
   tych regul kotwiczyla je do powloki i plywaly nad paskiem promocyjnym (zrzut 05.10). */
.oferta__zdjecie-blok { position: relative; }

/* ⚠️ `order` bloku zdjecia stoi W JEDNYM MIEJSCU, przy reszcie kolejnosci telefonu
   (gora tego pliku). Powtorzony TUTAJ — czyli PO regule webowej zerujacej `order` —
   wygrywal z nia i galeria ladowala na samym dole karty produktu (zgloszone 07.10). */

/* KWOTA PRZED TYTULEM (makieta): cena 28 px, pod nia linijka o ochronie, dopiero
   potem tytul 20 px. Na stronie zostaje kolejnosc tytul → cena, bo tam obok stoi
   kolumna z kartą sprzedajacej i tytul jest wejsciem w tresc. */
.jak-aplikacja .oferta__glowka { display: flex; flex-direction: column; }
.jak-aplikacja .oferta__cena { order: 1; font-size: 28px; } /* makieta */
.jak-aplikacja .oferta__ochrona { order: 2; }
/* Linia Omnibus i wiersz propozycji (v65) należą do bloku ceny — bez `order` stałyby
   NAD kwotą, bo zero jest przed jedynką. */
.jak-aplikacja .oferta__omnibus,
.jak-aplikacja .oferta__rabat,
.jak-aplikacja .oferta__prop,
.jak-aplikacja .oferta__prop-blok { order: 2; }
.jak-aplikacja .oferta__tytul { order: 3; font-size: 20px; } /* makieta */
.jak-aplikacja .oferta__pastylki { order: 4; }

/* „Udostepnij" na cala szerokosc NIE MA w makiecie tego ekranu. Zostaje na stronie. */
.jak-aplikacja .oferta__udostepnij { display: none; }

/* OKRUSZKI SCHODZA W APLIKACJI. Makieta nie ma ich na tym ekranie i ma racje:
   w aplikacji nie ma paska adresu, wiec sciezka „Wszystko / Dom / Dywany" nie mowi,
   GDZIE sie jest — od tego jest dolny pasek — a zabiera wiersz nad opisem. Wstecz
   daje plywajace kolko na zdjeciu. Na stronie okruszki zostaja: tam sa nawigacja
   i sygnalem dla wyszukiwarki. */
.jak-aplikacja .oferta__sciezka { display: none; }

/* ---------- Przecena (handoff 50) ---------- */
/* Cena sprzed obniżki obok ceny: 17 px, szara (makieta „Strona oferty · panel ceny”). */
.oferta__bylo {
  margin-left: 10px; /* makieta */
  font: 400 17px/1 var(--v-font-display); /* makieta */
  letter-spacing: 0;
  color: var(--v-n-600);
}

.oferta__omnibus { margin-top: -2px; } /* makieta: rytm 4 px w bloku ceny */

/* ---------- Rabat za zestaw (etap B, makieta v78 „Pro Rabat za zestaw”, „Na ofercie”) ---------- */
/* Zielona ramka pod ceną: wyściółka 10/12, promień 12, odstęp 4; zdanie 13,5/800, odnośnik 13/700. */
.oferta__rabat {
  display: flex;
  flex-direction: column;
  gap: var(--v-s-1);
  margin: 0;
  padding: 10px var(--v-s-3); /* makieta */
  border-radius: var(--v-s-3);
  background: var(--v-success-soft);
  color: var(--v-success-text);
}
.oferta__rabat-tekst { font: 800 13.5px/1.4 var(--v-font-body); } /* makieta */
.oferta__rabat-link { font: 700 13px/1.4 var(--v-font-body); color: var(--v-success-text); text-decoration: underline; } /* makieta */
.oferta__rabat-link:hover { color: var(--v-primary); }

/* ---------- Zweryfikowane nagraniem (handoff 50, „Vistitio Nagranie Web”) ---------- */
/* Zielony blok pod ceną: promień 14, wyściółka 14/16, odstęp 10 (desktop);
   na telefonie 12/14 i przycisk wcięty pod tekst, jak w makiecie. */
.oferta__nagranie {
  display: flex;
  flex-direction: column;
  gap: 10px; /* makieta */
  padding: 14px 16px; /* makieta */
  border-radius: 14px; /* makieta */
  background: var(--v-success-soft);
  color: var(--v-primary);
  scroll-margin-top: 112px; /* makieta: pasek nagłówka i działów */
}

.oferta__nagranie-glowa { display: flex; align-items: flex-start; gap: 10px; } /* makieta */
.oferta__nagranie-znak { flex: none; color: var(--v-success); }
.oferta__nagranie-teksty { display: flex; flex-direction: column; gap: 3px; } /* makieta */
.oferta__nagranie-tytul { font: 800 14px/1.3 var(--v-font-body); color: var(--v-success); } /* makieta */
.oferta__nagranie-opis { font: 400 13px/1.5 var(--v-font-body); text-wrap: pretty; } /* makieta */
.oferta__nagranie-opis--tel { display: none; }

.v-btn.oferta__nagranie-przycisk {
  align-self: flex-start;
  height: 40px; /* makieta */
  min-height: 40px;
  padding: 0 14px 0 10px; /* makieta */
  border: 1.5px solid var(--v-success);
  border-radius: var(--v-r-btn);
  background: transparent;
  color: var(--v-success);
  font: 800 13px/1 var(--v-font-body); /* makieta */
}

.v-btn.oferta__nagranie-przycisk:hover { background: var(--v-n-0); }

.oferta__nagranie-napis { display: inline-flex; align-items: center; gap: 6px; } /* makieta */

/* „Film · 0:34” na zdjęciu — wejście do filmu na telefonie (na desktopie jest miniatura). */
.v-btn.oferta__film-pigulka { display: none; }

/* Odtwarzacz na pełnym ekranie — tylko telefon (otwiera go `vFilmPelny`). */
.oferta__film-pelny {
  position: fixed;
  inset: 0;
  z-index: calc(var(--v-z-toast) + 10);
  background: #000; /* makieta, TODO token */
}

.oferta__film-pelny-gracz { position: absolute; inset: 0; }

.v-btn.oferta__film-kup {
  width: 100%;
  min-height: 52px; /* makieta */
  border: none;
  border-radius: var(--v-r-input);
  background: var(--v-n-0);
  color: var(--v-primary);
  font: 800 15px/1 var(--v-font-body); /* makieta */
}

@media (max-width: 760px) {
  .oferta__nagranie { gap: 8px; padding: 12px 14px; } /* makieta */
  .oferta__nagranie-opis--web { display: none; }
  .oferta__nagranie-opis--tel { display: inline; }
  .oferta__nagranie-teksty { gap: 4px; } /* makieta */
  .v-btn.oferta__nagranie-przycisk { margin-left: 32px; } /* makieta: pod tekstem, nie pod ikoną */

  .v-btn.oferta__film-pigulka {
    display: inline-flex;
    position: absolute;
    left: 12px; /* makieta */
    bottom: 10px; /* makieta */
    z-index: 2;
    gap: 6px; /* makieta */
    height: 36px; /* makieta */
    min-height: 36px;
    padding: 0 14px 0 8px; /* makieta */
    border: none;
    border-radius: 18px; /* makieta */
    background: rgba(20, 28, 46, .8); /* makieta */
    color: var(--v-n-0);
    font: 800 13px/1 var(--v-font-body); /* makieta */
  }
}

@media (min-width: 761px) {
  .oferta__film-pelny { display: none !important; }
}


/* ===========================================================================
   KOSZYK NA OFERCIE (makieta v55). Desktop: pod „Kup teraz” — „Dodaj do koszyka”
   (48 px, obwódka granatowa) albo zielony wiersz „W koszyku · Zobacz · Usuń”.
   Telefon: od v65 „Dodaj do koszyka” stoi w pasku `.oferta__dol` (sekcja v65).
   =========================================================================== */

.oferta__koszyk { display: none; margin: 0; }

@media (min-width: 761px) {
  .oferta__koszyk { display: block; }
  .oferta__koszyk.v-btn { display: inline-flex; }

  .v-btn.oferta__koszyk-dodaj {
    width: 100%;
    height: 48px;
    border: 1.5px solid var(--v-primary); /* makieta */
    font-size: 14px;
    font-weight: 700;
  }

  .oferta__koszyk--jest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 14px; /* makieta */
    border-radius: var(--v-r-btn);
    background: var(--v-success-soft);
    color: var(--v-success-text);
    font: 700 14px/1 var(--v-font-body);
  }

  .oferta__koszyk-linki { display: flex; align-items: center; gap: var(--v-s-3); }
  .oferta__koszyk-linki form { margin: 0; display: contents; }

  .v-btn.oferta__koszyk-link {
    height: auto;
    padding: 0;
    color: inherit;
    font-size: 13.5px;
    font-weight: 800;
  }
}


/* ===========================================================================
   HANDOFF 57 — KARTA OFERTY NA DESKTOPIE (Prototyp Desktop v57). Osobny przycisk
   „Zaproponuj cenę” zniknął: pod „Dodaj do koszyka” stoi zdanie i ramka z tytułem,
   a kartę zamyka rząd dwóch akcji z ikoną i napisem (siatka 2 kolumny, bez obramowań,
   kreska nad nimi). Telefon: przyklejony pasek i zwinięta propozycja — bez zmian.
   =========================================================================== */

.oferta__web-akcje { display: none; }

@media (min-width: 761px) {
  .oferta__web-akcje {
    display: flex;
    flex-direction: column;
    gap: 8px; /* makieta */
    /* makieta: „Dodaj do koszyka” i zdanie o propozycji dzieli 8 px, kolumna daje 16 */
    margin-top: -8px;
  }

  .oferta__propozycja-web {
    display: flex;
    flex-direction: column;
    gap: 8px; /* makieta */
  }

  .oferta__propozycja-web > .oferta__propozycja-nota {
    margin: 0;
    font-size: 12px; /* makieta */
    line-height: 1.45;
    color: var(--v-n-600);
  }

  .oferta__propozycja-web .oferta__propozycja-panel {
    margin-top: 0;
    padding: 12px; /* makieta */
    gap: 8px; /* makieta */
    border: 1.5px solid var(--v-n-200); /* makieta */
    border-radius: 12px; /* makieta */
  }

  /* makieta desktop: pole i przycisk 44 px, kwota Outfit 17, przycisk 13 px z paddingiem 14 */
  .oferta__propozycja-web .oferta__propozycja-form { --propozycja-h: 44px; }
  .oferta__propozycja-web .oferta__propozycja-form .v-input { font-size: 17px; }
  .oferta__propozycja-web .oferta__propozycja-form .v-btn { padding: 0 14px; font-size: 13px; }

  .oferta__propozycja-web .oferta__propozycja-tytul {
    font: 700 13px/1.3 var(--v-font-body); /* makieta */
    color: var(--v-primary);
  }

  .oferta__propozycja-web .oferta__propozycja-panel .oferta__propozycja-nota,
  .oferta__propozycja-web .oferta__propozycja-ile {
    margin: 0;
    font-size: 12px; /* makieta */
  }

  .oferta__rozmowa-web {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px; /* makieta */
    padding-top: 6px; /* makieta */
    margin-top: 4px; /* makieta */
    border-top: 1px solid var(--v-n-100);
  }

  .oferta__rozmowa-web form { display: contents; }

  .v-btn.oferta__rozmowa-web-akcja {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* makieta */
    width: 100%;
    height: auto;
    min-height: 48px; /* makieta */
    padding: 8px 4px; /* makieta */
    border: none;
    border-radius: 12px; /* makieta */
    background: transparent;
    color: var(--v-primary);
    font: 600 14px/1.25 var(--v-font-body); /* makieta */
    text-decoration: none;
  }

  .v-btn.oferta__rozmowa-web-akcja:hover { background: var(--v-n-50); color: var(--v-primary); }
}

/* Handoff 57 (zrzut Huberta): duża pusta przerwa nad „Udostępnij” na desktopie — to był
   `margin-top` z bazy DOŁOŻONY do odstępu kolumny (16 + 16 px). W kolumnie wystarcza odstęp. */
@media (min-width: 761px) {
  .oferta__udostepnij { margin-top: 0; }
}

/* Osoba z odznakami w jednej ramce (handoff 60, plansza „M Oferta”). Bez odznak ramki nie ma —
   wiersz osoby zostaje taki, jak w handoffie 57. */
.oferta__sprzedajaca { display: flex; flex-direction: column; gap: 12px; }
.oferta__sprzedajaca--odznaki {
  padding: 14px;
  border: 1px solid var(--v-n-100);
  border-radius: 14px;
  background: var(--v-n-0);
}
.oferta__sprzedajaca--odznaki .oferta__osoba { padding: 0; }


/* ===========================================================================
   HANDOFF v65 — PASEK AKCJI OFERTY NA TELEFONIE (README, punkt 14; „Vistitio Pasek
   Oferty.dc.html”, kierunek 1a; Prototyp Mobile, ekran „Oferta”).

   Jeden rząd 78 px przyklejony do SAMEGO DOŁU ekranu: serce z licznikiem · „Dodaj
   do koszyka” (obrys, szerokość napisu) · „Kup” (reszta). Dolna nawigacja serwisu na tym
   ekranie ustępuje paskowi — w prototypie ekran oferty nie ma paska zakładek
   (`showTabBar`), a README liczy wysokość paska od krawędzi ekranu plus wcięcie systemu.
   „Zaproponuj cenę” to wiersz pod ceną, który rozwija pole kwoty. Serce zeszło ze zdjęcia.
   Na desktopie (> 760 px) nic z tej sekcji nie istnieje.
   =========================================================================== */

.oferta__mobilne,
.oferta__prop,
.oferta__prop-blok,
.oferta__rezerwacja-tel,
.oferta__napisz-tel { display: none; }

.oferta__osoba-rzad { display: flex; align-items: center; gap: 12px; } /* makieta */
.oferta__osoba-rzad > .oferta__osoba { flex: 1; min-width: 0; }

/* ---------- baner nad ceną ----------
   Rezerwacja: tylko telefon (widoczność w sekcji niżej). Oferta pokazowa (05.10): ten sam
   baner na KAŻDEJ szerokości (`--zawsze`), bo karta akcji na desktopie nie niesie zdania. */
.oferta__rezerwacja-tel {
  align-items: flex-start;
  gap: 10px; /* makieta */
  margin-bottom: 10px; /* makieta: 16 do ceny = 6 odstępu główki + 10 */
  padding: 12px 14px; /* makieta */
  border-radius: 16px; /* makieta */
  background: var(--v-warning-soft);
  color: var(--v-warning-text);
}

.oferta__rezerwacja-tel--zawsze { display: flex; }

.oferta__rezerwacja-tel .v-icon { flex-shrink: 0; }
.oferta__rezerwacja-tel-teksty { display: flex; flex-direction: column; gap: 2px; } /* makieta */
.oferta__rezerwacja-tel-tytul { font: 800 14px/normal var(--v-font-body); } /* makieta */
.oferta__rezerwacja-tel-tresc { font: 400 13px/1.5 var(--v-font-body); } /* makieta */

@media (max-width: 760px) {
  .oferta__mobilne { display: block; }
  .oferta__pasek { display: none; }

  /* Dolna nawigacja ustępuje paskowi akcji, a powłoka zostawia pod treścią (i stopką)
     miejsce równe paskowi z wcięciem — ostatni element da się wysunąć ponad pasek. */
  body:has(.oferta__dol) .powloka__dol { display: none; }
  body:has(.oferta__dol) .powloka { padding-bottom: calc(78px + env(safe-area-inset-bottom)); } /* makieta */

  /* Pływaki i komunikaty siadają 12 px nad paskiem (makieta: snackbar 114 = 78 + 24 + 12).
     Chip ciasteczek i strzałka różnią się o 3 px, żeby ich środki leżały w jednej linii. */
  body:has(.oferta__dol) .v-ck-znaczek { bottom: calc(90px + env(safe-area-inset-bottom)); } /* makieta */
  body:has(.oferta__dol) .v-na-gore { bottom: calc(93px + env(safe-area-inset-bottom)); } /* makieta */
  body:has(.oferta__dol) .v-toast-obszar { bottom: calc(90px + env(safe-area-inset-bottom)); } /* makieta */

  /* ---------- pasek ---------- */
  .oferta__dol {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--v-z-header);
    display: grid;
    grid-template-columns: 58px auto minmax(96px, 1fr); /* makieta */
    gap: 8px; /* makieta */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); /* makieta */
    background: var(--v-n-0);
    border-top: 1px solid var(--v-n-100);
    transition: box-shadow var(--v-dur-fast);
  }

  /* W spoczynku sama linia; cień, gdy treść przewija się pod pasek. */
  .oferta__dol--cien { box-shadow: 0 -6px 18px rgba(20, 28, 46, .10); } /* makieta */
  :root.jak-aplikacja[data-motyw="ciemny"] .oferta__dol--cien { box-shadow: 0 -6px 18px rgba(0, 0, 0, .45); } /* makieta */

  .oferta__dol--wlasna { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr); } /* makieta */
  .oferta__dol--rezerwacja,
  .oferta__dol--pokazowa { grid-template-columns: 58px minmax(0, 1fr); } /* makieta */

  /* Formularze (serce, koszyk) znikają z układu — kolumną siatki jest sam przycisk. */
  .oferta__dol .oferta__serce-form,
  .oferta__dol-form { display: contents; }

  .v-btn.oferta__dol-akcja {
    min-width: 0;
    height: 54px; /* makieta */
    padding: 0 14px; /* makieta */
    border-radius: 16px; /* makieta */
    white-space: nowrap;
  }

  .oferta__dol .v-btn.oferta__dol-obrys {
    gap: 6px; /* makieta */
    border: 1.5px solid var(--v-n-300);
    background: var(--v-n-0);
    color: var(--v-primary);
    font: 700 14px/1 var(--v-font-body); /* makieta */
  }

  .oferta__dol .v-btn.oferta__dol-kup { font: 800 15px/1 var(--v-font-body); } /* makieta */

  .oferta__dol .v-btn.oferta__dol-koszyk--jest {
    gap: 6px; /* makieta */
    border: none;
    background: var(--v-success-soft);
    color: var(--v-success-text);
    font: 800 14px/1 var(--v-font-body); /* makieta */
  }

  /* Rezerwacja: makietowego „Daj znać, gdy wróci” nie ma (serwis nie zapisuje takich
     próśb) — zostaje informacja, wyciszona, bez udawania akcji. */
  .oferta__dol .v-btn.oferta__dol-rezerwacja {
    border: none;
    background: var(--v-n-100);
    color: var(--v-n-600);
    font: 700 14px/1.25 var(--v-font-body); /* makieta */
    white-space: normal;
    text-align: center;
  }

  /* Serce 58 × 54: ikona 22 nad licznikiem 11 / 800, aktywne ochrą. */
  .oferta__dol .v-btn.oferta__serce,
  .oferta__serce--licznik {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px; /* makieta */
    width: 58px; /* makieta */
    height: 54px; /* makieta */
    padding: 0 8px; /* makieta */
    border-radius: 16px; /* makieta */
  }

  .oferta__dol .v-btn.oferta__serce {
    border: 1.5px solid var(--v-n-300);
    background: var(--v-n-0);
    color: var(--v-primary);
  }

  .oferta__serce--wlaczone .v-icon { color: var(--v-secondary); }

  /* Własna oferta: licznik w chipie, nieklikalny. */
  .oferta__serce--licznik { background: var(--v-n-100); color: var(--v-n-600); }

  .oferta__serce-ile { font: 800 11px/1 var(--v-font-body); color: var(--v-primary); } /* makieta */

  /* ---------- pasek z ceną u góry ---------- */
  /* Zjeżdża, gdy linijka „z ochroną” schowa się pod nagłówkiem (IntersectionObserver
     w `pasek-mobilny`). 64 px jak w makiecie, tytuł w jednej linii, kwota zielona. */
  .oferta__gora-cena {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: calc(var(--v-z-header) + 1);
    display: flex;
    align-items: center;
    gap: 4px; /* makieta */
    height: calc(64px + env(safe-area-inset-top)); /* makieta */
    padding: env(safe-area-inset-top) 16px 0 6px; /* makieta */
    background: var(--v-n-0);
    border-bottom: 1px solid var(--v-n-100);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--v-dur-fast) var(--v-ease), visibility var(--v-dur-fast);
  }

  .oferta__gora-cena--widac { transform: none; visibility: visible; }

  .v-btn.oferta__gora-wstecz {
    flex-shrink: 0;
    width: 48px; /* makieta */
    height: 48px; /* makieta */
    padding: 0;
    color: var(--v-primary);
    text-decoration: none;
  }

  .oferta__gora-teksty { display: flex; flex-direction: column; gap: 1px; min-width: 0; } /* makieta */

  .oferta__gora-tytul {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font: 700 14.5px/1.35 var(--v-font-body); /* makieta */
    color: var(--v-primary);
  }

  .oferta__gora-kwota { font: 700 12.5px/1.35 var(--v-font-body); color: var(--v-success); } /* makieta */

  /* ---------- wiersz propozycji pod ceną ---------- */
  .oferta__prop-blok {
    display: flex;
    flex-direction: column;
    gap: 10px; /* makieta: 4 pod wierszem + 6 odstępu */
    margin: 6px 0 4px; /* makieta */
  }

  .oferta__prop {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* makieta */
    margin: 6px 0 4px; /* makieta */
    padding: 12px 14px; /* makieta */
    border-radius: 16px; /* makieta */
    line-height: normal;
    text-align: left;
  }

  .oferta__prop-blok > .oferta__prop { margin: 0; }

  .oferta__prop .v-icon { flex-shrink: 0; }

  .oferta__prop-teksty { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* makieta */
  .oferta__prop-tytul { font: 800 14.5px/normal var(--v-font-body); } /* makieta */
  .oferta__prop-podpis { font: 400 12.5px/1.45 var(--v-font-body); } /* makieta */

  /* Domyślnie: wiersz-przycisk z obrysem i strzałką, która obraca się przy rozwinięciu. */
  .v-btn.oferta__prop--wiersz {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 56px; /* makieta */
    padding: 9px 12px 9px 14px; /* makieta */
    border: 1.5px solid var(--v-n-300);
    background: var(--v-n-0);
    color: var(--v-primary);
    font-weight: 400;
  }

  .v-btn.oferta__prop--wiersz:hover { background: var(--v-n-50); }
  .oferta__prop--wiersz .oferta__prop-teksty { gap: 1px; } /* makieta */
  .oferta__prop--wiersz .oferta__prop-podpis { line-height: normal; color: var(--v-n-600); }

  .oferta__prop-strzalka {
    font-size: 20px; /* makieta */
    line-height: 1;
    color: var(--v-n-500);
    transition: transform .15s; /* makieta */
  }

  .oferta__prop--wiersz[aria-expanded="true"] .oferta__prop-strzalka { transform: rotate(90deg); }

  /* Propozycja czeka: ciepły kolor, zegar. */
  .oferta__prop--czeka {
    padding: 12px 12px 12px 14px; /* makieta */
    background: var(--v-warning-soft);
    color: var(--v-warning-text);
  }

  /* Limit wykorzystany: informacja w chipie, bez obrysu i strzałki. */
  .oferta__prop--limit { background: var(--v-n-100); color: var(--v-primary); }
  .oferta__prop--limit .v-icon,
  .oferta__prop--limit .oferta__prop-podpis { color: var(--v-n-600); }

  /* Rozwinięte pole kwoty (ten sam panel co na desktopie, układ z Prototypu Mobile). */
  .oferta__propozycja-panel--tel {
    margin: 0 0 4px; /* makieta */
    padding: 12px; /* makieta */
    gap: 8px; /* makieta */
    border: 1.5px solid var(--v-n-200);
    border-radius: 16px; /* makieta */
    background: var(--v-n-0);
  }

  .oferta__propozycja-panel--tel .oferta__propozycja-nota { margin: 0; font-size: 12px; line-height: 1.5; } /* makieta */
  .oferta__propozycja-panel--tel .oferta__propozycja-ile { font: 600 12px/normal var(--v-font-body); color: var(--v-primary); } /* makieta */

  /* Bez JavaScriptu wiersz niczego nie rozwinie — pole kwoty stoi wtedy otwarte. */
  .bez-js .oferta__prop-rozwiniete[x-cloak] { display: block !important; }

  /* ---------- baner rezerwacji nad ceną ---------- */
  /* Wygląd banera stoi nad tą sekcją (wspólny z banerem oferty pokazowej); tu tylko widoczność. */
  .oferta__rezerwacja-tel { display: flex; }

  /* ---------- „Napisz” przy osobie ---------- */
  .oferta__napisz-tel { display: block; flex-shrink: 0; }

  .oferta__napisz-tel.v-btn,
  .oferta__napisz-tel .v-btn {
    display: inline-flex;
    padding: 0 14px; /* makieta */
    font-size: 13px; /* makieta */
  }
}

/* Zdanie „Następną rzecz wystawisz szybciej z aplikacji” pod „To twoja oferta” (10.10).
   Odnośnik `x-button variant="link"` płynie w zdaniu, bez wysokości przycisku. */
.oferta__twoja-aplikacja .v-btn--link {
  display: inline;
  height: auto;
  font: inherit;
  font-weight: 600;
  color: var(--v-primary);
  white-space: nowrap;
}

/* Hasztagi w opisie: odnośniki do wyszukiwarki, spokojniejsze od treści (decyzja Huberta 10.10). */
.oferta__tag {
  color: var(--v-n-500);
  text-decoration: none;
}

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