/* Generowane przez tools/krytyczne-style.mjs; nie edytuj ręcznie. */
/* ============================================================
   ONLY FAST CARS · Poznań — design system "Quiet Luxury"
   Fotografia na pierwszym planie, ciemne szkło, spokojna typografia.
   Czerwień marki tylko jako drobny akcent i kolory funkcjonalne.
   ============================================================ */

/* ---------- krój: Hanken Grotesk (self-hosted, zmienny woff2) ----------
   Grotesk z domieszką geometrii: szerokie, otwarte litery, okrągłe brzuszki,
   końcówki cięte poziomo — ta sama kategoria, w której leży Soin Sans Neue
   używany przez Gordona Murraya (krój komercyjny, więc tu wolny odpowiednik).
   Zmienny, jeden plik na podzakres niesie wagi 300–800. Zakres latin-ext
   dokłada ą ę ć ł ń ó ś ź ż — bez niego przeglądarka podmieniłaby polskie
   znaki na zastępczy krój i w słowie „MARZEŃ" jedna litera byłaby obca. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg0: #0a0a0b;
  --bg1: #101012;
  --bg2: #16161a;
  --ink: #f5f5f4;
  --dim: #a2a6ac;
  --line: rgba(255, 255, 255, .08);
  --red: #e32227;
  --red2: #ff4a50;
  --amber: #f5a524;
  --green: #2fbf71;
  --glass-bg: rgba(17, 17, 19, .55);
  --glass-border: rgba(255, 255, 255, .1);
  --shadow-lg: 0 22px 60px rgba(0, 0, 0, .45);
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 11px;
  --font-display: "Hanken Grotesk", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --font-data: "Hanken Grotesk", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --nav-h: 76px;
}

/* ---------- reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* atrybut hidden musi wygrywać z display: flex/grid ustawianym niżej */
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  /* Safari wypełnia obszar wokół strony kolorem html/body. Jawne tło usuwa
     prześwit nad przypiętym paskiem na urządzeniach z bezpieczną strefą. */
  background: var(--bg0);
  /* Pełny arkusz jest włączany po pierwszym malowaniu. Elementy formularza
     leżące niżej nie mogą w tej krótkiej chwili rozszerzyć layout viewportu
     i wypchnąć mobilnej nawigacji poza ekran. */
  max-width: 100%;
  overflow-x: hidden;
  /* Safari na telefonie w poziomie sam powiększa tekst w szerokich blokach,
     żeby „lepiej wypełnić" wiersz; łamie to każdą wyliczoną wysokość i psuje
     rytm typografii. Strona ma własne skalowanie przez clamp(). */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Szara plama, którą Safari i Chrome rysują na dotkniętym elemencie, spóźnia
     się o ~100 ms i zostaje jeszcze po puszczeniu palca; przy ciemnym tle
     wygląda jak usterka. Własne stany :active niżej dają odpowiedź od razu. */
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(227, 34, 39, .85); color: #fff; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .75); outline-offset: 3px; border-radius: 6px; }

body::after { /* delikatne ziarno */
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- typografia ---------- */
/* Nagłówki: wersaliki w wadze średniej, trakting leciutko rozstrzelony,
   interlinia z zapasem. Odwrotnie niż w typografii plakatowej — tu siła
   bierze się z powietrza wokół liter, nie z ich grubości. Dlatego waga 500,
   a nie 700: wersaliki i tak niosą wagę wizualną, a bold w tym zestawieniu
   robi się ciężki. Dodatnie odstępy są konieczne, bo wielkie litery mają
   płaskie boki i przy zerowym traktingu zlewają się w jeden pas. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .012em;
  line-height: 1.14;
  text-transform: uppercase;
  text-wrap: balance;        /* wersaliki łatwo zostawiają wdowę — wyrównujemy wiersze */
  margin: 0;
}
.eyebrow {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  margin: 0 0 18px;
}
.eyebrow::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  flex: none;
}
.accent { color: var(--red); }

.lead { color: var(--dim); font-size: 1rem; max-width: 58ch; font-weight: 400; }

/* ---------- layout ---------- */
.container { width: min(1240px, 92vw); margin-inline: auto; }
/* Szersza odmiana dla stron, na których się pracuje, a nie czyta: karta auta
   (galeria, cennik, dane) i sekcja rezerwacji. Tam 1240 px zostawiało po ~340 px
   czerni na boku, a kalendarz i listy pakietów dusiły się w kolumnach. Przy
   samym tekście zostaje węższa miara wiersza, bo tak się go czyta wygodniej. */
.container--szeroki { width: min(1560px, 94vw); }
.section { padding-block: clamp(80px, 10vw, 140px); position: relative; }
.section-head { margin-bottom: clamp(36px, 5vw, 64px); }
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-head .lead { margin-top: 12px; }

/* ---------- płynne szkło (liquid glass) ---------- */
.lg {
  position: relative;
  isolation: isolate;
  background: linear-gradient(168deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .018) 46%, rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 24px;
  backdrop-filter: blur(34px) saturate(190%);
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .35),
    0 30px 70px -28px rgba(0, 0, 0, .8);
}
.lg::before { /* refleks światła u góry — jak na szkle Apple */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: radial-gradient(130% 74% at 24% -12%, rgba(255, 255, 255, .16), transparent 62%);
}

/* ---------- ciemne szkło ---------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--shadow-lg);
}

/* subtelna poświata (ekran logowania admina) */
.streak {
  position: absolute;
  pointer-events: none;
  width: 120%;
  height: 200px;
  left: -10%;
  background: radial-gradient(50% 100% at 50% 50%, rgba(227, 34, 39, .12), transparent 70%);
  filter: blur(50px);
}

/* ---------- przyciski ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: 14px 30px;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s, box-shadow .25s, color .25s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: #fff;
  color: #0b0b0c;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
}
.btn-primary:hover { background: #ebebeb; box-shadow: 0 16px 44px rgba(0, 0, 0, .45); }
.btn-ghost {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); }
.btn-red {
  background: var(--red);
  color: #fff;
  box-shadow: 0 10px 30px rgba(227, 34, 39, .28);
}
.btn-red:hover { background: #c91d22; box-shadow: 0 14px 38px rgba(227, 34, 39, .4); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- chipy ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--dim);
}
.chip b { color: var(--ink); font-weight: 500; }
.chip-red { border-color: rgba(227, 34, 39, .45); color: #ff9ea1; background: rgba(227, 34, 39, .1); }

/* ============================================================
   NAWIGACJA
   ============================================================ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10, 10, 11, .62);
  border-bottom-color: var(--line);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
/* pasek idzie od krawędzi do krawędzi — nie trzyma się kolumny treści.
   Skrajne elementy odsuwa od brzegu sam padding, rosnący razem z ekranem. */
.nav-inner {
  display: flex; align-items: center; gap: 34px;
  width: 100%;
  padding-inline: clamp(20px, 3.2vw, 48px);
}
.nav-logo { display: flex; align-items: center; margin-right: auto; }
.nav-logo .logo { font-size: 19px; }
.nav-links { display: flex; gap: 28px; align-items: center; }
/* Pięć działów zamiast czterech (doszedł „Program partnerski", najdłuższy
   napis w pasku) i na stronie miasta jeszcze plakietka lokalizacji obok.
   Poniżej 1080 px schodzi ramka telefonu, ale menu i tak dobijało wtedy do
   lupy, więc na tych szerokościach odstępy między działami są ciaśniejsze.
   Pasek zwija się do burgera dopiero przy 720 px. */
@media (max-width: 1080px) { .nav-links { gap: 18px; } }
/* Sześć działów (doszedł „Voucher") nie mieści się już na tablecie obok
   pełnego znaku: „Kontakt" i lupa wypadały za prawą krawędź. Między burgerem
   (720 px) a ~920 px zostaje sam monogram OFC — ten sam zabieg co poniżej
   560 px — a odstępy między działami schodzą jeszcze o stopień. */
@media (min-width: 721px) and (max-width: 920px) {
  .nav-logo .logo-rule, .nav-logo .logo-text { display: none; }
  .nav-links { gap: 14px; }
}
.nav-links a, .nav-city {
  font-size: .86rem;
  font-weight: 400;
  color: var(--dim);
  padding: 6px 2px;
  position: relative;
  white-space: nowrap;
  transition: color .25s;
}
.nav-links a::after, .nav-city::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: rgba(255, 255, 255, .7);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s;
}
.nav-links a:hover, .nav-city:hover { color: var(--ink); }
.nav-links a:hover::after, .nav-city:hover::after { transform: scaleX(1); }
.nav .btn { padding: 11px 24px; font-size: .84rem; border-radius: 10px; }

/* ---------- telefon w pasku ----------
   Numer i lupa to jedna para na prawym końcu paska: ta sama wysokość, ten sam
   promień, ta sama kreska. Przycisk nie ma własnej powierzchni; zostaje sama
   ramka narysowana na tym, co pod spodem, więc nad kadrem hero widać przez
   niego zdjęcie, a po zescrollowaniu mrożone tło paska. Promień 10 px bierze
   z `.nav .btn` wyżej, dlatego ten blok musi zostać za tamtym.
   Komputer pokazuje pełny numer, telefon krótkie „Zadzwoń", a dotknięcie od
   razu wybiera numer; stąd dwa napisy w środku, a mobilny blok niżej przełącza
   jeden na drugi. Na szerokościach pośrednich (tablet, zanim pasek zwinie się
   do burgera) ramka schodzi całkiem; obok pełnych odnośników i plakietki
   miasta nie ma już na nią miejsca. */
.nav .nav-call {
  height: 40px; padding: 0 16px;
  font-size: .82rem;
  white-space: nowrap;
  color: var(--ink);
  background: none;
  /* ta sama kreska, którą lupa pokazuje po najechaniu; --line (.08) gubiło
     się na jasnych partiach kadru */
  border: 1px solid rgba(255, 255, 255, .14);
  /* napis ma nowrap, więc zamiast się złamać wyszedłby poza ramkę */
  flex: none;
}
/* obok stoi nieruchoma lupa, więc ramka nie podskakuje jak zwykły .btn */
.nav .nav-call:hover { transform: none; }
.nav-call-cta { display: none; }
@media (max-width: 1080px) {
  .nav .nav-call { display: none; }
}
/* Numer i lupa to jedna grupa na prawym końcu paska: obie prowadzą do
   działania, a nie do działu strony, więc stoją bliżej siebie niż
   odnośniki menu (34 px odstępu w .nav-inner). */
.nav-akcje { display: flex; align-items: center; gap: 12px; }

/* ---------- wybrana lokalizacja w pasku ----------
   Mówi, czyją stronę oglądasz, a klik wraca na mapę wyboru. Ubrana dokładnie
   jak sąsiednie odnośniki menu (wspólne reguły wyżej) — to część tej samej
   listy, tylko z nazwą miasta zamiast działu. */

/* ---------- wyszukiwarka w nawigacji ---------- */
.nav-search { position: relative; }
.nav-search-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.nav-search-btn svg { width: 19px; height: 19px; }

/* ---------- konto klienta w pasku ----------
   Ikona wstawiana przez shared.js (initNav), ubrana jak lupa obok; kropka
   znaczy „zalogowany" (klasa .zalogowany z localStorage). */
.nav-konto {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  color: var(--ink);
  border: 1px solid transparent;
  transition: background .25s, border-color .25s;
}
.nav-konto svg { width: 19px; height: 19px; }
.nav-konto:hover, .nav-konto[aria-current="page"] {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}
.nav-konto-kropka {
  position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--bg0);
  opacity: 0; transform: scale(.5);
  transition: opacity .25s, transform .25s;
}
.nav-konto.zalogowany .nav-konto-kropka { opacity: 1; transform: none; }

/* pasek „zalogowany w Klubie OFC" nad formularzem rezerwacji (car.js) */
.klub-pasek {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; padding: 12px 16px;
  border: 1px solid rgba(227, 34, 39, .35);
  border-radius: var(--r-sm);
  background: linear-gradient(120deg, rgba(227, 34, 39, .12), rgba(227, 34, 39, .03));
  font-size: .85rem; line-height: 1.55; color: var(--ink);
}
.klub-pasek svg { flex: none; color: var(--red2); }
.klub-pasek span { flex: 1; min-width: 0; }
.klub-pasek a { flex: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* serduszko „ulubione" w pasku klubu; czerwone, gdy auto jest na liście */
.klub-serce {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18); color: var(--ink);
  transition: background .2s, color .2s, border-color .2s, transform .25s;
}
.klub-serce svg { width: 15px; height: 15px; }
.klub-serce:hover { transform: scale(1.08); }
.klub-serce.on { background: var(--red); border-color: var(--red); color: #fff; }
.klub-serce[disabled] { opacity: .6; }
.sum-row.klub b { color: var(--green); }
/* numer telefonu dzieli stan najechania z lupą; po najechaniu oba mają
   dokładnie tę samą warstwę i tę samą kreskę */
.nav-search-btn:hover,
.nav-search.open .nav-search-btn,
.nav .nav-call:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
}
.search-panel {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: min(420px, calc(100vw - 6vw));
  border-radius: var(--r-md);
  padding: 10px;
  z-index: 101;
  animation: search-in .18s ease-out;
}
@keyframes search-in { from { opacity: 0; transform: translateY(-6px); } }
.search-field { display: flex; align-items: center; gap: 10px; padding: 0 10px; }
/* ta sama lupa co w filtrach floty, więc i ten sam kolor */
.search-field svg { width: 17px; height: 17px; color: var(--red); flex: none; }
.search-field input {
  flex: 1; min-width: 0;
  padding: 11px 0;
  background: none; border: 0; outline: none;
  font-size: .92rem;
}
.search-field input::placeholder { color: var(--dim); }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-results { list-style: none; margin: 0; padding: 0; max-height: min(58vh, 420px); overflow-y: auto; }
.search-results:not(:empty) { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
.search-results a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  transition: background .18s;
}
.search-results a:hover,
.search-results li.on a { background: rgba(255, 255, 255, .07); }
.search-results img {
  width: 62px; height: 42px; flex: none;
  object-fit: cover; border-radius: 7px;
}
.search-res-tx { min-width: 0; flex: 1; }
.search-res-tx b { display: block; font-size: .88rem; font-weight: 500; line-height: 1.3; }
.search-res-tx span {
  display: block; font-size: .74rem; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-res-price { font-size: .78rem; color: var(--dim); white-space: nowrap; }
.search-empty { padding: 14px 10px 10px; font-size: .84rem; color: var(--dim); }
/* 44 px w pionie to najmniejsze pole, w które palec trafia bez celowania;
   sam rysunek trzech kresek ma 14 px, więc niesie go padding. */
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; min-height: 44px; padding: 10px; }
.nav-burger span { width: 24px; height: 1.5px; background: var(--ink); transition: .3s; }
/* Przy otwartym menu kreski składają się w krzyżyk. Bez tego jedynym sygnałem,
   że tym samym miejscem się je zamyka, jest domysł. Przesunięcie 6,5 px to
   odstęp między środkami kresek (gap 5 + grubość 1,5). */
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(8, 8, 9, .88);
  backdrop-filter: blur(28px) saturate(130%);
  -webkit-backdrop-filter: blur(28px) saturate(130%);
  display: none;
  flex-direction: column; align-items: center; gap: 6px;
  /* Wyściółka zamiast wyśrodkowania w całym oknie: u góry stoi pasek
     nawigacji, u dołu pigułka ustawień, więc menu dostaje wyłącznie pas
     między nimi. Bez tego przy niższym oknie (telefon z paskami przeglądarki
     ma około 700 px, nie 844) ostatnia pozycja wchodziła na przycisk
     z numerem, a przy jeszcze niższym także na pigułkę ustawień. */
  padding: calc(var(--nav-h) + 4px) 20px calc(96px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.open { display: flex; }
/* Dwa marginesy „auto" dzielą wolne miejsce na pół: pozycje siadają pośrodku
   pasa, stopka przy jego dolnej krawędzi. Gdy miejsca zabraknie, oba schodzą
   do zera i menu się przewija, zamiast nakładać jedno na drugie. */
.mobile-menu > a:first-child { margin-top: auto; }
.mobile-menu a {
  font-weight: 500;
  font-size: clamp(1.5rem, 6vw, 2.2rem);
  letter-spacing: -.01em;
  padding: 12px;
  color: var(--ink);
}
.mobile-menu a:hover { color: var(--dim); }
/* Odnośnik do działu, na którym właśnie stoimy, nie może wyglądać tak samo jak
   pozostałe; na telefonie menu jest jedyną mapą serwisu. */
.mobile-menu a[aria-current="page"] { color: var(--dim); }

/* ---------- stopka menu telefonu (dokłada ją shared.js) ----------
   Menu było listą pięciu odnośników na pustym ekranie: całą górę i cały dół
   zajmowała czerń, a jedyne realne działanie w wypożyczalni (telefon) siedziało
   w małej ramce paska, przykrytej właśnie otwartym menu. Tutaj dostaje pełną
   szerokość i wysokość, w jakiej palec nie musi celować. */
.mm-stopka {
  /* w układzie, nie nad nim: wcześniej wisiała bezwzględnie nad listą i przy
     krótszym oknie obie treści lądowały w tym samym miejscu */
  margin-top: auto;
  padding-top: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
}
/* Selektor złożony, bo .mobile-menu a wyżej ustawia wielkość napisu i wyściółkę
   dla wszystkich odnośników menu; sama klasa by z nim przegrała. */
.mobile-menu .mm-tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: min(100%, 340px);
  min-height: 54px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
}
/* Niskie okno (telefon w poziomie, mniejszy ekran, powiększona czcionka
   systemowa): sześć pozycji w rozmiarze plakatowym plus przycisk z numerem nie
   mieszczą się między paskiem a pigułką ustawień i menu zaczyna się przewijać,
   a pigułka — jako element pływający — kładzie się na stopce. Napisy schodzą
   więc o stopień i całość znów mieści się w kadrze. */
@media (max-height: 640px) {
  .mobile-menu { gap: 2px; padding-top: calc(var(--nav-h) + 2px); }
  .mobile-menu a { font-size: clamp(1.15rem, 4.6vw, 1.5rem); padding: 8px 12px; }
  .mm-stopka { padding-top: 14px; }
  .mobile-menu .mm-tel { min-height: 48px; font-size: .94rem; }
}

/* Bardzo niskie okno — przede wszystkim telefon obrócony na bok. Kolumna
   sześciu pozycji nie zmieści się tam w żadnym rozmiarze pisma, który da się
   jeszcze przeczytać, więc lista łamie się na dwie szpalty, a przycisk
   z numerem bierze cały wiersz pod nimi. */
@media (max-height: 520px) {
  .mobile-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 4px 14px;
    padding: calc(var(--nav-h) + 4px) 24px calc(92px + env(safe-area-inset-bottom));
  }
  .mobile-menu.open { display: grid; }
  .mobile-menu > a { font-size: 1.05rem; padding: 7px 10px; text-align: center; }
  /* margines z układu kolumnowego rozpychałby wiersz siatki */
  .mobile-menu > a:first-child { margin-top: 0; }
  .mm-stopka { grid-column: 1 / -1; margin-top: 8px; padding-top: 0; }
  .mobile-menu .mm-tel { min-height: 46px; }
}

.mm-tel svg { width: 19px; height: 19px; flex: none; color: var(--red2); }
.mm-tel:active { background: rgba(255, 255, 255, .08); }
html[data-motyw="jasny"] .mm-tel { border-color: rgba(23, 24, 27, .2); }

/* ============================================================
   HERO — wideo w tle (fotografia jako plakat / fallback)
   ============================================================ */
.hero {
  position: relative;
  min-height: max(680px, 100svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 34px;
}
/* Kadrowanie siedzi na tle, nie na całym hero: dryfujące zdjęcie nie może
   wystawać poza kadr, ale lista miast pod paskiem wyszukiwania musi móc
   wyjść poza dolną krawędź sekcji — hero z overflow: hidden ucinało ją
   w połowie ostatniej pozycji. */
.hero-bg { position: absolute; inset: 0; overflow: hidden; }
.hero-bg img,
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
.hero-bg img {
  transform: scale(1.02);
  animation: hero-drift 26s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.02) translateX(0); }
  to { transform: scale(1.07) translateX(-1.2%); }
}
/* wideo dociąga się w tle i wchodzi miękko na plakat (ta sama klatka — brak przeskoku) */
.hero-video {
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}
.hero.is-playing .hero-video { opacity: 1; }
.hero.is-playing .hero-bg img { animation: none; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.55), transparent 24%),
    /* dół hero dochodzi do czystej czerni, bo pod nim zaczyna się czarny
       manifest — bez tego na styku sekcji widać ostrą krechę */
    linear-gradient(180deg, transparent 34%, rgba(10,10,11,.66) 72%, rgba(0,0,0,.94) 90%, #000),
    linear-gradient(100deg, rgba(10,10,11,.72), rgba(10,10,11,.12) 58%),
    /* kadr z filmu jest jaśniejszy i mocniej nasycony niż reszta strony */
    linear-gradient(rgba(10,10,11,.18), rgba(10,10,11,.18));
}
.hero-content { position: relative; z-index: 2; padding-bottom: 46px; text-align: center; }
.hero-content h1 {
  margin-inline: auto;       /* h1 ma własną miarę — bez tego wyśrodkowałby się
                                sam tekst, a blok zostałby przy lewej krawędzi */
  /* dolna granica skaluje się z ekranem, nie jest stała — inaczej na wąskim
     telefonie najdłuższy człon („prowadź auto marzeń,") nie mieści się w wierszu
     i łamie się w środku, zostawiając osierocone „marzeń," */
  font-size: clamp(1.35rem, 6.4vw, 3.1rem);
  /* hasło ma się łamać na przecinkach, a nie w środku „auto marzeń" — dlatego
     bez balansowania wierszy (ono wyrównuje ich długość i rozbija frazę)
     i z miarą dobraną tak, by pierwszy człon zmieścił się w całości */
  max-width: 24ch;
  text-wrap: initial;
  /* lekka przezroczystość — kadr delikatnie przebija przez litery. Alfa siedzi
     w kolorze, a nie w opacity, bo opacity przygasiłoby też czerwone
     podkreślenie, które ma zostać pełne. */
  color: rgba(245, 245, 244, .84);
}

/* ---------- nagłówek hero na stronie lokalizacji ----------
   Dwa człony w jednej kolumnie: rodzaj wypożyczalni drobnym, rozstrzelonym
   pismem i nazwa miasta na całą szerokość kadru. Miasto niesie tu całą wagę,
   bo to ono odpowiada na pytanie, po co ktoś wszedł na tę stronę; człon nad
   nim mówi tylko, o jakiej wypożyczalni mowa. */
.hero-h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .42em;
  max-width: none;
  font-size: inherit;
}
.hero-h1-lead {
  font-size: clamp(.58rem, 1.5vw, .8rem);
  font-weight: 500;
  letter-spacing: .3em;
  line-height: 1.5;
  color: rgba(245, 245, 244, .62);
}
.hero-h1-city {
  font-size: clamp(2.5rem, 9vw, 5.6rem);
  line-height: .96;
  letter-spacing: .008em;
  color: rgba(245, 245, 244, .94);
}
/* dawne hasło hero; po dołożeniu miasta schodzi pod nagłówek i zostaje
   zdaniem, a nie tytułem */
.hero-tag {
  margin: 16px auto 0;
  /* miara na całe zdanie w jednym wierszu na desktopie; na telefonie i tak
     zawija, ale wtedy łamie się na przecinku, a nie przed ostatnim słowem */
  max-width: 46ch;
  text-wrap: balance;
  color: var(--dim);
  font-size: clamp(.86rem, 2vw, 1rem);
}

/* ---------- wyszukiwarka terminu w hero ----------
   Ciemna pigułka z segmentami rozdzielonymi włoskowymi kreskami: miejsce
   odbioru, termin, godzina i model auta; szukanie zatwierdza Enter.
   Obok osobny biały przycisk do floty. Całość wyśrodkowana pod nagłówkiem. */
.hero-find {
  display: flex; justify-content: center; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-top: 38px;
}
/* Powłoka trzyma podpowiedzi i kalendarz przy pasku — pasek sam jest flexem,
   więc pozycjonowanie względem niego rozbiłoby układ segmentów.
   Miara jest dobrana pod treść: pole szukania jako jedyne rośnie i zabiera
   cały zapas, więc szerszy pasek to nie równomiernie większe segmenty, tylko
   jedno rozdęte pole tekstowe obok czterech normalnych. */
.hf-shell { position: relative; width: min(430px, 100%); }
.hf-bar {
  display: flex; align-items: center;
  /* równo z 44-pikselowym „Zobacz kolekcję" obok; kiedyś tę wysokość nadawała
     strzałka szukania, po jej usunięciu pigułka opadała do wiersza tekstu */
  min-height: 44px;
  padding: 5px 17px;
  border-radius: 999px;
  background: rgba(26, 26, 29, .72);
  border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  transition: border-color .25s;
}
.hf-bar:focus-within { border-color: rgba(255, 255, 255, .22); }
/* Wyściółka pól jest wąska nie z upodobania, tylko z arytmetyki: cztery
   segmenty w 430-pikselowej pigułce dzielą się co do piksela, a „Wrocław" jest
   o 10 px szerszy od „Poznania". Przy 12 px na stronę data urywała się
   wielokropkiem, gdy padło na dłuższe miasto. */
.hf-field { display: flex; align-items: center; gap: 8px; padding: 0 10px; cursor: pointer; }
.hf-city { padding-left: 0; }
/* pole z otwartym kalendarzem podświetla się na tle pigułki — inaczej przy
   panelu na pół ekranu nie widać, które z dwóch pól się właśnie ustawia */
.hf-field.open { background: rgba(255, 255, 255, .07); border-radius: 999px; }
/* pełna, wypełniona pinezka — przy tym samym rozmiarze niesie więcej masy niż
   konturowa, więc jest odrobinę mniejsza i ciemniejsza, żeby nie przeważyła
   nad nazwą miasta obok */
.hf-pin { width: 12px; height: 12px; color: #7e838a; flex: none; }
.hf-lbl {
  font-size: .58rem; font-weight: 500; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
.hf-field input,
.hf-field select {
  border: 0; background: none; padding: 0;
  font-size: .87rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.hf-field input:focus, .hf-field select:focus { outline: none; }
/* Klikalne ma być całe pole, nie sam wiersz tekstu. Przy wyśrodkowaniu input
   miał 24 px w 56-pikselowej pigułce i dotknięcie jej górnej krawędzi nic nie
   robiło; rozciągnięcie oddaje palcowi całą wysokość. */
.hf-field input,
.hf-field select,
.hf-city-btn,
.hf-pick-btn { align-self: stretch; }
/* Pole szukania bierze to, co zostanie po sąsiadach, ale nie mniej niż próg,
   przy którym nie widać już wpisywanych liter. Miara startowa jest równa temu
   progowi, a nie własnej szerokości pola tekstowego: przy „auto" input żądał
   około 170 px, przez co pasek liczył się jako przepełniony i ściskał datę
   obok, urywając ją wielokropkiem.

   Próg jest o tyle niski, żeby przy najdłuższym zestawie (Wrocław + termin
   z dwóch miesięcy) została jeszcze rezerwa na datę. To pole ma się kurczyć
   pierwsze: napis „Szukaj" da się dopowiedzieć z kontekstu, urwanej daty nie. */
.hf-q { flex: 1 1 76px; min-width: 76px; }
.hf-q input { width: 100%; cursor: text; }
.hf-q input::placeholder { color: var(--dim); font-weight: 400; }
/* natywny krzyżyk czyszczenia w input[type=search] jest czarny i ginie na
   ciemnym tle — pole i tak czyści się klawiaturą */
.hf-q input::-webkit-search-cancel-button { appearance: none; }
/* ---- wybór miasta ---- */
.hf-city { position: relative; }
.hf-city-btn {
  display: flex; align-items: center; gap: 7px;
  font-size: .87rem; font-weight: 500; color: var(--ink);
  white-space: nowrap;
}
/* Strzałka listy była rysunkiem 10×7; nowa jest kwadratowa, więc pole też
   musi być kwadratem — inaczej maska zmieściłaby się na siedmiu pikselach. */
.hf-chev { width: 11px; height: 11px; color: var(--dim); transition: transform .22s ease; }
.hf-city.open .hf-chev { transform: rotate(180deg); }
.hf-city-list {
  position: absolute; top: calc(100% + 14px); left: -6px;
  z-index: 25;
  min-width: 148px;
  list-style: none; margin: 0; padding: 6px;
  border-radius: 14px;
  text-align: left;
  /* menu musi być kryjące — szkło z reszty serwisu jest zbyt przezroczyste
     i spod listy przebijałaby treść paska */
  background: rgba(20, 20, 23, .97);
  animation: hf-drop .18s ease-out;
}
@keyframes hf-drop { from { opacity: 0; transform: translateY(-6px); } }
.hf-city-list li {
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .86rem; font-weight: 500; color: #c8cbd0;
  cursor: pointer;
  transition: background .18s, color .18s;
}
/* biel wprost, nie przez --ink: menu zostaje ciemne również w jasnym motywie,
   a zmienna przewracała napis pod kursorem na czarny i gasiła go w tle */
.hf-city-list li:hover, .hf-city-list li.on { background: rgba(255, 255, 255, .09); color: #fff; }
/* wybrane miasto znika z listy — na pasku i tak je widać, więc w rozwinięciu
   zostają same realne alternatywy */
.hf-city-list li[aria-selected="true"] { display: none; }

/* ---- rozwijane pole wyboru (initSelect) ----
   Skórka na natywnym <select>; ten sam język co przy wyborze lokalizacji, więc
   filtry katalogu przestają wyglądać jak wklejka ze stylu systemu. Lista zostaje
   ciemna także w jasnym motywie — dokładnie jak menu miast i panel kalendarza. */
/* align-self, nie sama szerokość: klikalna ma być cała pigułka, a nie wiersz
   tekstu w jej środku — dotknięcie górnej krawędzi palcem musi otwierać listę */
.ofc-pick {
  position: relative;
  display: flex; align-items: center; align-self: stretch;
  width: 100%; min-width: 0;
}
.ofc-pick-btn {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-width: 0; height: 100%;
  font-size: .82rem; font-weight: 400; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap;
  cursor: pointer;
}
.ofc-pick-label { overflow: hidden; text-overflow: ellipsis; }
.ofc-pick-btn .hf-chev { margin-left: auto; }
.ofc-pick.open .hf-chev { transform: rotate(180deg); }
.ofc-pick-list {
  position: absolute; top: calc(100% + 12px); left: -14px;
  z-index: 25;
  min-width: calc(100% + 28px);
  max-height: 320px; overflow-y: auto;
  list-style: none; margin: 0; padding: 6px;
  border-radius: 14px;
  text-align: left;
  background: rgba(20, 20, 23, .97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  animation: hf-drop .18s ease-out;
}
.ofc-pick-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: .84rem; color: #c8cbd0;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, color .18s;
}
/* Biel wpisana wprost, nie przez --ink: menu zostaje ciemne także w jasnym
   motywie, a zmienna przewróciłaby napisy na czarne i schowała je w tle. */
.ofc-pick-list li:hover, .ofc-pick-list li.on { background: rgba(255, 255, 255, .09); color: #fff; }
/* ptaszek zamiast samego podświetlenia: przy otwartej liście kursor i tak
   podświetla wiersz pod myszą, więc wybór musi się odróżniać czymś trwałym */
.ofc-pick-list li[aria-selected="true"] { color: #fff; }
.ofc-pick-list li[aria-selected="true"]::after {
  content: '✓'; margin-left: auto; font-size: .8em; color: var(--red2);
}
.hf-sep { width: 1px; height: 19px; background: rgba(255, 255, 255, .14); flex: none; }

/* ---- termin i godzina ----
   Oba pola otwierają to samo rozwinięcie; różnią się tylko tym, na czym
   stawiają ognisko po otwarciu. */
/* Pole terminu może się zwęzić poniżej swojej treści, a etykieta wtedy urwie
   się wielokropkiem. To zabezpieczenie, nie stan docelowy: pasek jest na tyle
   szeroki, że mieści najdłuższą postać („16.08 → 30.08"). Bez tego wyjścia
   dłuższa etykieta rozpychała zawartość i wypychała strzałkę poza pigułkę. */
.hf-when { position: relative; min-width: 0; }
.hf-ico { width: 13px; height: 13px; color: #7e838a; flex: none; }
.hf-pick-btn {
  display: flex; align-items: center;
  min-width: 0;
  font-size: .87rem; font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hf-pick-label { overflow: hidden; text-overflow: ellipsis; }
/* stan bez wyboru czyta się jak podpowiedź w polu tekstowym, nie jak wartość */
.hf-pick-btn.empty .hf-pick-label { color: var(--dim); font-weight: 400; }

/* ---- rozwinięcie z kalendarzem ----
   Otwiera się W GÓRĘ: pasek stoi tuż nad dolną krawędzią hero, więc panel
   rozwinięty w dół wisiałby w całości na następnej sekcji. Nad paskiem
   miejsca jest aż nadto. */
.hf-cal {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  /* Szerokość dyktuje treść, nie pasek: dwa miesiące obok siebie potrzebują
     swojego, a pasek jest od nich znacznie węższy. Panel jest więc rozwinięciem
     wyśrodkowanym na polu, nie jego przedłużeniem. */
  width: min(560px, calc(100vw - 28px));
  padding: 18px 18px 16px;
  border-radius: 22px;
  text-align: left;
  /* panel musi być kryjący — pod spodem jest jasny kadr z filmu, a przez
     zwykłe szkło z reszty serwisu przebijałyby przez siatkę dni */
  background: rgba(16, 16, 19, .95);
  animation: hf-rise .2s ease-out;
}
@keyframes hf-rise { from { opacity: 0; transform: translateX(-50%) translateY(10px); } }
.hf-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.hf-cal .cal-head { margin-bottom: 4px; }
.hf-cal .cal-title { font-size: .8rem; }
.hf-cal .cal-grid { gap: 2px; }
.hf-cal .cal-day { padding: 0; font-size: .78rem; }
.hf-nav-btn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid; place-items: center;
  font-size: .95rem; line-height: 1; color: var(--dim);
  transition: color .2s, border-color .2s, background .2s;
}
/* Strzałka miesiąca zapala się czerwienią marki — kalendarz jest rozwinięciem
   paska wyszukiwania, więc reaguje jego kolorem akcentu. */
.hf-nav-btn:hover:not(:disabled) {
  color: var(--red2);
  border-color: rgba(227, 34, 39, .5);
  background: rgba(227, 34, 39, .1);
}
.hf-nav-btn:disabled { opacity: .25; cursor: default; }
/* Każdy miesiąc ma obie strzałki, bo na wąskim ekranie zostaje z nich tylko
   jeden; przy dwóch widocznych zbędne połówki znikają. */
.hf-cal-months .cal:first-child .hf-nav-btn.next,
.hf-cal-months .cal + .cal .hf-nav-btn.prev { visibility: hidden; }

.hf-cal-hours { margin-top: 15px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.hf-cal-lbl {
  margin: 0 0 10px;
  font-size: .78rem; font-weight: 500; color: #e4e6e9;
}
.hf-cal-lbl span { font-size: .74rem; font-weight: 400; color: var(--dim); }
.hf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hf-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
  font-size: .78rem; color: #c8cbd0;
  font-variant-numeric: tabular-nums;
  transition: background .18s, border-color .18s, color .18s;
}
.hf-chip:hover { border-color: rgba(227, 34, 39, .45); color: #fff; }
/* Wybrana godzina nie jest czystą bielą, tylko mleczną z ciepłym przejściem —
   tym samym refleksem marki, który wędruje po przyciskach w pasku. */
.hf-chip.on {
  background: linear-gradient(135deg, #fff 52%, rgba(255, 224, 224, .96));
  border-color: #fff;
  color: #0b0b0c; font-weight: 500;
}
.hf-chip--day { padding-inline: 15px; }
/* dopłata za wieczorną godzinę; w jednej linii z godziną, żeby pigułki
   w zawijanym rzędzie zostały tej samej wysokości */
.hf-chip small { margin-left: 6px; font-size: .7rem; color: #9aa0a7; }
.hf-chip.on small { color: rgba(11, 11, 12, .58); }
.hf-chip:hover small { color: #d7d9dd; }
.hf-chip.on:hover small { color: rgba(11, 11, 12, .58); }

.hf-cal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.hf-cal-sum { margin: 0; font-size: .78rem; color: var(--dim); line-height: 1.5; }
.hf-cal-sum b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.hf-cal-acts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hf-cal-clear {
  font-size: .78rem; color: var(--dim);
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25);
  text-underline-offset: 4px;
  transition: color .2s, text-decoration-color .2s;
}
.hf-cal-clear:hover { color: var(--ink); text-decoration-color: rgba(255, 255, 255, .6); }
/* Ten sam przycisk co „Zobacz kolekcję” w hero: mleczna baza z wędrującym
   rozjaśnieniem i ciepłym refleksem marki. Reguły tła i fali stoją niżej,
   przy .hf-all — tutaj zostaje sam rozmiar. */
.hf-cal-done {
  padding: 9px 22px; border-radius: 999px;
  color: #0b0b0c;
  font-size: .8rem; font-weight: 500;
}

/* przyciemnienie tła należy do wariantu arkuszowego (wąski ekran) */
.hf-scrim { display: none; }

/* ---- mleczne przyciski z falującym tłem ----
   Tło i fala siedzą w pseudoelementach na z-index: -1, bo pseudoelement
   pozycjonowany bez ujemnego z-index malowałby się NAD tekstem przycisku.
   isolation: isolate zamyka je w przycisku, żeby nie wypadły pod hero. */
.hf-all, .hf-cal-done, .time-chip.on {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hf-all::before, .hf-cal-done::before, .time-chip.on::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* baza celowo nie jest czystą bielą — dopiero na przygaszonym tle widać
     wędrujące rozjaśnienie; alfa zostawia ślad kadru pod spodem */
  background: rgba(243, 243, 244, .82);
  transition: background .25s;
}
.hf-all:hover::before, .hf-cal-done:hover::before, .time-chip.on:hover::before { background: rgba(250, 250, 250, .9); }
/* jasna plama dryfuje po przycisku, a za nią idzie ledwo widoczny ciepły
   refleks marki — razem czyta się jak powolne falowanie światła, nie jak
   kolorowy gradient */
.hf-all::after, .hf-cal-done::after, .time-chip.on::after {
  content: "";
  position: absolute; inset: -45%; z-index: -1;
  background:
    radial-gradient(44% 68% at 32% 45%, rgba(255, 255, 255, .98), transparent 66%),
    radial-gradient(38% 62% at 70% 58%, rgba(227, 34, 39, .16), transparent 68%);
  animation: hf-wave 9s ease-in-out infinite alternate;
}
.hf-all::after { animation-duration: 12s; animation-delay: -4s; }
@keyframes hf-wave {
  0%   { transform: translate3d(-20%, -10%, 0) scale(1); }
  50%  { transform: translate3d(16%, 11%, 0) scale(1.22); }
  100% { transform: translate3d(-9%, 15%, 0) scale(1.06); }
}
/* podpowiedzi pod paskiem — ta sama lista co w lupie w nawigacji */
.hf-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0;
  z-index: 20;
  max-height: 340px; overflow-y: auto;
  list-style: none; margin: 0; padding: 8px;
  border-radius: var(--r-md);
  text-align: left;
}
.hf-results li a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 10px;
  transition: background .18s;
}
.hf-results li a:hover, .hf-results li.on a { background: rgba(255, 255, 255, .08); }
.hf-results img { width: 56px; height: 38px; object-fit: cover; border-radius: 6px; flex: none; }
.hf-results .hf-res-tx { flex: 1; min-width: 0; }
.hf-results .hf-res-tx b {
  display: block; font-size: .88rem; font-weight: 500; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hf-results .hf-res-price { font-size: .78rem; color: var(--dim); white-space: nowrap; }
.hf-results .hf-empty { padding: 14px 10px; font-size: .84rem; color: var(--dim); text-align: center; }
/* auto zajęte w wybranym terminie; zostaje na liście, bo termin można zmienić,
   ale nie udaje dostępnego */
.hf-results li.off a { opacity: .6; }
.hf-res-ok, .hf-res-no { font-style: normal; font-weight: 500; }
.hf-res-ok { color: #8fe3b0; }
.hf-res-no { color: var(--red2); }

/* przycisk ma być dokładnie tak wysoki jak pasek: 34 px treści + 2 × 5 px
   wyściółki pigułki — dlatego stała wysokość zamiast pionowego paddingu */
.hf-all {
  height: 44px; padding: 0 26px;
  font-size: .86rem;
}
/* W hero przycisk stoi tuż przy pasku i jest odrobinę węższy, żeby nie
   konkurować z pigułką. Te same przyciski niżej stoją samotnie na swoich
   sekcjach i zostają szersze. */
.hero-find .hf-all { padding: 0 21px; font-size: .84rem; }
.hf-msg {
  margin: 18px 0 0;
  font-size: .85rem; color: var(--dim);
  min-height: 1.3em;                   /* stała wysokość — komunikat nie przesuwa hero */
}
.hf-msg b { color: var(--ink); font-weight: 500; }
.hf-msg.err { color: var(--red2); }
.hf-msg button {
  color: var(--ink); font-size: inherit;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35);
  text-underline-offset: 4px;
  transition: text-decoration-color .25s;
}
.hf-msg button:hover { text-decoration-color: var(--ink); }

/* ============================================================
   MANIFEST — czarny oddech między hero a flotą.
   Pełna wysokość okna, żeby przy czytaniu nie wystawała już flota.
   Zdanie rozświetla się słowo po słowie, ale NIE jest przywiązane do
   pozycji paska przewijania: skrypt dokłada klasę .lit, gdy zdanie
   wejdzie w środek ekranu, a resztę robią opóźnienia przejść. Dzięki
   temu wystarczy jeden ruch w dół — animacja dogrywa się sama.
   ============================================================ */
/* ============================================================
   PRELOADER — czarny ekran z podświetlającym się logo.
   Widoczny od pierwszego malowania (site.css blokuje render);
   home.js zdejmuje go po window.load, nie wcześniej niż po 1,4 s.
   ============================================================ */
.loader {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: #020203;
  transition: opacity .45s ease, visibility .45s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-box { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.loader-logo {
  font-size: clamp(24px, 4.4vw, 44px);
  filter: brightness(.3);
  /* czasy dobrane pod pół sekundy, przez którą plansza wisi; wcześniej trwały
     1,5 s i to one, a nie ładowanie, trzymały czarny ekran */
  animation: loader-light .62s ease-out .04s forwards;
}
@keyframes loader-light { /* logo „zapala się" i łapie czerwoną poświatę */
  55% { filter: brightness(.72); }
  100% { filter: brightness(1) drop-shadow(0 0 26px rgba(227, 34, 39, .3)); }
}
.loader-bar {
  align-self: stretch;      /* szerokość logo — box mierzy się najszerszym dzieckiem */
  height: 1px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.loader-bar i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--red), #ff6a4d);
  transform: scaleX(0); transform-origin: left;
  animation: loader-fill .58s cubic-bezier(.35, 0, .1, 1) .05s forwards;
}
@keyframes loader-fill { to { transform: scaleX(1); } }
/* dopóki loader wisi, strona pod nim nie przewija się */
body.is-loading { overflow: hidden; }

/* ---------- logo (typograficzne) ----------
   Rysowane tekstem zamiast bitmapą: ostre w każdej skali i na każdym DPI.
   Cały układ skaluje się jedną wartością font-size na .logo. */
.logo {
  display: inline-flex; align-items: center;
  gap: .82em;
  font-size: 20px;                  /* jedyne pokrętło rozmiaru */
  line-height: 1;
  white-space: nowrap;
  color: var(--ink);
}
.logo-mark {
  font-size: 1.62em;
  font-weight: 400;
  letter-spacing: .17em;
  text-indent: .17em;               /* kompensuje światło dodane po ostatniej literze */
}
.logo-rule {
  width: 1px; height: 2.4em;
  background: var(--red);
  flex: none;
}
.logo-text { display: flex; flex-direction: column; gap: .28em; }
.logo-name {
  font-size: .84em;
  font-weight: 400;
  letter-spacing: .13em;
  text-indent: .13em;
}
.logo-name em { font-style: normal; color: var(--red); }
.logo-sub {
  /* Podpis skaluje się razem ze znakiem, ale nie schodzi poniżej progu, przy
     którym jest już tylko szarą kreską: na telefonie logo ma 15–16 px, więc
     same .4em dawało 6 px. */
  font-size: max(.4em, 9.5px);
  font-weight: 400;
  letter-spacing: .2em;
  text-indent: .2em;
  text-transform: uppercase;
  color: #9aa0a7;
}

.ts-box:not(:empty) {
  display: flex;
  justify-content: center;
  margin: 0 0 14px;
}

.pulapka {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
  opacity: 0; pointer-events: none;
}

/* czytelne dla czytników, niewidoczne na ekranie */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}


/* ============================================================
   PODSTRONA AUTA
   ============================================================ */
/* ---------- kadr otwierający stronę auta ----------
   Ten sam pomysł co hero: zdjęcie na całą szerokość, treść na nim, przyciemnienie
   schodzące do tła strony. Nazwa auta dzieli się na markę (biała) i model
   (czerwony), pod spodem cztery najważniejsze dane. */
.car-hero { padding-top: 0; }

.car-cover {
  position: relative;
  /* Niższy kadr niż wcześniej (było 88vh): zdjęcie ma się przedstawić, a nie
     zająć cały ekran, bo zaraz pod nim zaczyna się galeria z cennikiem. */
  min-height: clamp(440px, 66vh, 780px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0a0a0b;
}
.car-cover > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Wyżej niż środek, więc kadr zjada górę zdjęcia: nad autem było najwięcej
     pustego nieba, a auto ma zostać w całości. */
  object-position: 50% 62%;
}
/* Lżej niż wcześniej: zdjęcie ma zostać czyste, przyciemniamy tylko górę
   pod pasek nawigacji i dół pod napisy. */
.car-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,6,7,.6), rgba(6,6,7,.06) 30%, rgba(6,6,7,.1) 55%, rgba(6,6,7,.72) 86%, var(--bg0) 100%);
  pointer-events: none;
}
/* bez własnej szerokości — .container ma ją ustawić, inaczej treść dokleja się
   do lewej krawędzi okna zamiast trzymać miarę reszty strony */
.car-cover-copy {
  position: relative;
  z-index: 2;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(26px, 3vw, 44px);
}
/* Typografia prosto z hero: rozstrzelenie i interlinia zostają te z .display,
   tu dokładamy tylko miarę i biel. Cała nazwa jest jednym kolorem. */
.car-cover-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, 4.6vw, 3.4rem);
}

/* Ruch identyczny z hero: zewnętrzny span przycina, wewnętrzny wyjeżdża.
   Stan początkowy siedzi tylko na .hw, których bez skryptu w ogóle nie ma. */
.car-cover-copy h1 .hwm {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .06em;
}
.car-cover-copy h1 .hw { display: inline-block; }
.car-cover.hw-split h1 .hw { transform: translateY(1.1em); }
.car-cover.gra h1 .hw {
  transform: none;
  transition: transform 1.15s cubic-bezier(.16, .86, .22, 1);
  transition-delay: calc(.1s + var(--i, 0) * 70ms);
}
/* Dane wchodzą za nazwą: kolumna po kolumnie, a wewnątrz kolumny podpis,
   wartość i dopisek wyjeżdżają w górę spod maski jeden po drugim. Maską jest
   sam wiersz (overflow), przesuwa się wkładka .cs-w. */
.car-spec .cs-w {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.car-cover.hw-split .car-spec .cs-w { transform: translateY(1.3em); opacity: 0; }
.car-cover.gra .car-spec .cs-w {
  transform: none;
  opacity: 1;
  transition: transform 1.05s cubic-bezier(.16, .86, .22, 1), opacity .7s ease;
  transition-delay: calc(.42s + var(--i, 0) * 90ms + var(--r, 0) * 55ms);
}

/* Pasek danych: podpis nad wartością, dopisek pod nią. Bez kresek; kolumny
   rozdziela sam odstęp. Kolumny mają własną miarę i stoją przy lewej pod
   nazwą, zamiast rozciągać się na całą szerokość okna. */
.car-cover-specs {
  display: grid;
  /* cztery kolumny: rocznik z klasą auta plus trzy grupy osiągów */
  grid-template-columns: repeat(4, minmax(0, 11.5rem));
  gap: clamp(14px, 2vw, 30px);
  /* Dane przychodzą z API. Rezerwacja wysokości usuwa przesunięcie tytułu
     i dalszej strony, gdy cztery kolumny pojawią się po pierwszej klatce. */
  min-height: 64px;
  margin-top: clamp(26px, 3vw, 42px);
  /* Miejsce na dane, zanim car.js je wpisze. Bez tej rezerwacji grid stał pusty
     do odpowiedzi API i cała kolumna z nazwą auta zjeżdżała w dół, gdy dane
     przyszły; na telefonie dawało to przesunięcie układu 0,093 przy progu 0,1,
     który Google liczy jako wadę strony. Pozycji jest zawsze cztery, więc
     liczba wierszy jest z góry znana: jeden przy czterech kolumnach, dwa przy
     trzech i przy dwóch. Wysokości zmierzone w przeglądarce, nie oszacowane. */
  min-height: 74px;
}
.car-spec { min-width: 0; }
.car-spec-label,
.car-spec b,
.car-spec-sub { display: block; overflow: hidden; color: #fff; }
.car-spec-label {
  margin-bottom: 7px;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.car-spec b {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.9vw, 1.7rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.car-spec-sub {
  margin-top: 4px;
  font-size: .66rem;
  line-height: 1.35;
}

.car-hero > .container { padding-top: clamp(26px, 3vw, 44px); }

@media (max-width: 980px) {
  /* trzy kolumny, czyli dwa wiersze; rezerwacja miejsca jak wyżej */
  .car-cover-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; min-height: 139px; }
}
@media (max-width: 720px) {
  /* Na telefonie tytuł i pięć par danych same zajmują ~430 px, więc kadr
     skraca się łagodniej niż na monitorze; przy 56vh napisy siadały autu
     na masce i ze zdjęcia nic nie zostawało. */
  .car-cover { min-height: clamp(380px, 64vh, 560px); }
  .car-cover-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; min-height: 144px; }
  /* .58rem to na telefonie 9,3 px; przy wersalikach i rozstrzeleniu za mało,
     żeby podpis dało się przeczytać jednym spojrzeniem. Podpis w tabeli danych
     potrzebuje mocniejszego zapisu, bo jego reguła stoi w arkuszu niżej. */
  .car-spec-label,
  .car-data .spec-cell span { font-size: .65rem; }
  .mod-ico { width: 56px; height: 56px; }
  .mod-ico img { width: 36px; height: 36px; }
  .mod-item span { font-size: .8rem; }
  /* strzałki miesięcy: 32 px to za mało na palec */
  .cal-nav, #calPrev, #calNext { width: 40px; height: 40px; }
}

/* ---------- reszta strony auta w języku katalogu ----------
   Czarne tło, kanciaste płaszczyzny, włos ramki zamiast szkła z cieniem.
   Przyciski zostają pigułkami — to element z hero i on się nie zmienia. */
.car-page {
  background: #000;
  /* overflow-x: hidden robi z body osobny kontener przewijania w pionie.
     Wtedy boczne podsumowanie liczy sticky względem nieruchomego body i
     ucieka razem z formularzem. clip obcina poziom bez tworzenia scroller-a. */
  overflow-x: clip;
}
.car-page .glass,
.car-page .monthly-card,
.car-page .rule,
.car-page .bk-step,
.car-page .book-panel,
.car-page .sum-card,
.car-page .cal-wrap,
.car-page .gallery-main,
.car-page .gallery-thumbs button,
.car-page .lg,
.car-page .bk-block,
.car-page .summary,
.car-page .sum-hero,
.car-page .sum-alert {
  border-radius: 0;
  background: #09090a;
  border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* pasek nawigacji i lupa zostają szkłem — są wspólne dla całego serwisu */
.car-page .nav .glass,
.car-page .search-panel { border-radius: var(--r-lg); }
.car-page .price-note { background: transparent; }
/* Nadpisy bez czerwonej kropki; na tej stronie prowadzi sam napis, a kropka
   wracała jako jedyny kolorowy punkt w spokojnym układzie. */
.car-page .eyebrow::before { display: none; }
.car-page .success-card { border-radius: 0; }
/* Bez strzałki, więc odnośnik dostaje język podpisów z kadru: wersaliki,
   rozstrzelenie, mała miara. Kreska pod tekstem robi dwie rzeczy naraz:
   niesie sygnał „to odnośnik" zamiast strzałki i odróżnia go od nadpisu
   „O aucie" tuż niżej, który bez niej wyglądał jak drugi taki sam podpis.
   Pionowy padding to pole dotyku: sam tekst ma 16 px, palec potrzebuje 40. */
.back-link {
  position: relative;
  display: inline-block;
  padding: 12px 0;
  font-size: .64rem; font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: clamp(10px, 1.4vw, 20px);
  transition: color .25s;
}
.back-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 1px;
  background: rgba(255, 255, 255, .26);
  transition: background .25s;
}
.back-link:hover { color: #fff; }
.back-link:hover::after { background: rgba(255, 255, 255, .7); }

.car-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: 30px; align-items: start; }
/* Jak przy podsumowaniu rezerwacji: na szerokim ekranie kolumna cennika dostaje
   górny limit, żeby nie rozlewała się na 600 px rzadkich wierszy. Nadmiar idzie
   w lewo, do galerii. Obie prawe kolumny na tej stronie mają więc 470 px. */
@media (min-width: 1500px) {
  .car-layout { grid-template-columns: minmax(0, 1.55fr) minmax(300px, 470px); }
}
/* Lewa kolumna to jeden blok: galeria i dane pod nią. Bez tego opakowania dane
   trafiłyby w drugi rząd siatki, a pole cennika kończyłoby się na wysokości
   samej galerii, więc przyklejanie miałoby jeszcze mniej miejsca. */
.car-main { display: grid; gap: clamp(26px, 3vw, 40px); min-width: 0; }

.gallery { display: grid; gap: 12px; }
.gallery-main {
  position: relative; aspect-ratio: 16 / 9.4; overflow: hidden;
  border-radius: var(--r-lg); border: 1px solid var(--glass-border);
  cursor: zoom-in;
  box-shadow: var(--shadow-lg);
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gallery-main:hover img { transform: scale(1.02); }
/* Miniatury zawsze w jednym rzędzie: liczbę kolumn podaje skrypt (--n), więc
   przy ośmiu zdjęciach nic się nie zawija na ogon, a przy trzech pasek nie
   rozciąga się bez potrzeby; kadr miniatury ma wtedy górne 130 px. */
/* Górny limit na miniaturę zostaje (przy trzech zdjęciach nie mają się rozdąć
   na pół ekranu), ale po poszerzeniu karty auta 130 px zostawiało pasek krótszy
   od zdjęcia nad nim; przy sześciu zdjęciach 168 px równa go z kadrem. */
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  gap: 10px;
  width: min(100%, calc(var(--n, 6) * 168px + (var(--n, 6) - 1) * 10px));
}
.gallery-thumbs button {
  aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; padding: 0;
  border: 1px solid var(--line); opacity: .5; transition: .25s;
}
.gallery-thumbs button.on, .gallery-thumbs button:hover { opacity: 1; border-color: rgba(255,255,255,.55); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }

.price-rail { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; gap: 16px; }
.price-card { padding: 24px; }
.price-card h3 {
  margin: 0 0 14px;
  font-size: .7rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}
.tier-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 2px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.tier-row:last-child { border-bottom: 0; }
.tier-row.tier-promo {
  margin: 6px -10px; padding: 13px 11px;
  background: linear-gradient(110deg, rgba(32, 180, 134, .14), rgba(32, 180, 134, .04));
  border: 1px solid rgba(32, 180, 134, .3); border-left: 3px solid #20b486;
}
.tier-promo .tier-val > b { color: #53dfa8; }
.tier-promo .tier-val { min-width: 0; }
.price-promo-date { display: block; max-width: 240px; margin: 5px 0 0; font-size: .7rem; line-height: 1.5; color: var(--dim); font-weight: 400; }
.tier-val .price-promo-date { text-align: right; }
.tier-range { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: #d6d8db; }
.tier-range svg { width: 14px; height: 14px; color: var(--red); flex: none; }
.tier-val { text-align: right; display: grid; }
/* Biel wpisana wprost, nie przez --ink: karta cennika zostaje ciemna także
   w jasnym motywie, a zmienna przewracała kwoty na czarne i gasiła je w tle
   (kontrast spadał do 1,1:1, czyli ceny znikały). */
.tier-val b { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; color: #f5f5f4; }
.tier-val span { font-size: .7rem; color: var(--dim); }
.tier-val .cena-nowa { font-size: inherit; color: inherit; }
.tier-val .cena-stara { font-size: .82rem; }
.monthly-card {
  padding: 22px 24px;
  /* Trzy wiersze ceny są wstawiane przez car.js; pusta karta zachowuje ich
     miejsce, więc kolumna poniżej nie skacze przy odpowiedzi API. */
  min-height: 142px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-left: 2px solid var(--red);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--shadow-lg);
}
.monthly-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 0; }
.monthly-card .row span { color: var(--dim); font-size: .84rem; }
.monthly-card .row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.monthly-card .big { font-size: 1.7rem; font-weight: 500; letter-spacing: -.01em; }
.monthly-card .row .monthly-price { display: grid; justify-items: end; gap: 3px; color: var(--ink); }
.monthly-card .monthly-price .cena-stara { color: var(--dim); }
.monthly-card .monthly-price .cena-nowa { color: inherit; font-size: inherit; }
.monthly-promo {
  display: inline-flex; align-items: center; min-height: 20px; padding: 2px 8px;
  border: 1px solid rgba(32, 180, 134, .4); border-radius: 999px;
  background: rgba(32, 180, 134, .13); color: #53dfa8;
  font-size: .64rem; font-style: normal; font-weight: 700;
  letter-spacing: .08em; line-height: 1; text-transform: uppercase;
}
.car-page .monthly-card.monthly-card-promo {
  background: linear-gradient(115deg, rgba(32, 180, 134, .13), rgba(32, 180, 134, .025)), #09090a;
  border-color: rgba(32, 180, 134, .3); border-left: 3px solid #20b486;
}
.monthly-card-promo .monthly-price .cena-nowa { color: #53dfa8; }
html[data-motyw="jasny"] .car-page .monthly-card.monthly-card-promo {
  background: linear-gradient(115deg, rgba(32, 180, 134, .11), rgba(32, 180, 134, .025)), #fff;
  border-color: rgba(15, 122, 82, .35);
}
html[data-motyw="jasny"] .monthly-card-promo .monthly-price .cena-nowa,
html[data-motyw="jasny"] .monthly-card-promo .monthly-promo { color: #087a50; }
.price-notes { display: grid; gap: 10px; }
.price-note {
  display: flex; gap: 12px; align-items: center;
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: .82rem; color: var(--dim);
}
/* Notki idą pod cennikiem w tej samej kolumnie, więc ich ikony chodzą w tej
   samej czerwieni co zegary przy stawkach; szare wyglądały jak resztka. */
.price-note svg { width: 17px; height: 17px; color: var(--red); flex: none; }

/* ---------- wstęp o aucie ----------
   Podpis „O aucie" z hasłem otwiera kartę auta: stoi między odnośnikiem
   powrotu a galerią, więc pierwszy ekran mówi, na co się patrzy. Sam opis
   czeka niżej, pod galerią i cennikiem (.car-lede). */
.car-lede-head { margin-bottom: clamp(22px, 2.8vw, 38px); }
.car-lede-eyebrow { margin-bottom: 12px; }
.car-lede-title { font-size: clamp(1.5rem, 3vw, 2.2rem); }
/* Opis stoi pod galerią i tabelą danych, więc odstęp jest mu potrzebny od
   góry, nie od dołu; niżej i tak zaczyna się sekcja rezerwacji z własną
   wyściółką. Bez tego akapity kleiłyby się do ramki z danymi. */
.car-lede { margin-top: clamp(44px, 5vw, 72px); }
.car-lede-text p { color: #c9cbce; margin: 0 0 16px; font-size: .97rem; max-width: 62ch; }
.car-lede-text p:last-child { margin-bottom: 0; }

/* ---------- dane techniczne pod zdjęciami ----------
   Osiem osobnych kafli po cztery w rzędzie, jak na arkuszu, z którego wycięte
   są rysunki. Wcześniej te same dane stały po dwa w rzędzie wewnątrz jednej
   dużej karty i zabierały ponad dwa razy tyle wysokości, choć żadna wartość
   nie ma więcej niż trzy słowa — pozycja kończyła się długą pustką z prawej,
   a cała tabela sięgała niżej niż galeria obok.

   Ramkę ma teraz każdy kafel z osobna, więc wspólna karta pod spodem zniknęła
   (patrz car.html); dwie obwódki jedna w drugiej niczego nie porządkowały.
   Rysunek zszedł przy okazji z 42 do 28 px: przy zwartym kaflu prowadzi
   wartość, a ikona ma tylko powiedzieć, na którą pozycję się patrzy. */
.car-data > .eyebrow { margin-bottom: 16px; }
.spec-table {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.spec-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #09090a;
  border: 1px solid rgba(255, 255, 255, .08);
}
.spec-ico { flex: none; display: block; width: 28px; height: 28px; }
.spec-ico img { display: block; width: 100%; height: 100%; }
/* Bez tego długa wartość („Quattro (AWD)") rozpychałaby kolumnę zamiast się
   złamać — element siatki domyślnie nie zwęża się poniżej swojej treści. */
.spec-txt { min-width: 0; }
.spec-cell span {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .5);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.spec-cell b {
  display: block;
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.35;
}
/* Kafel poniżej ~190 px przestaje działać: to w nim wartości takie jak
   „Quattro (AWD)" i podpis „Moment obrotowy" zaczynają się łamać na dwa
   wiersze, więc rząd puchnie zamiast się skracać. Cztery w rzędzie wymagają
   przez to ~780 px na całą siatkę, trzy — ~600 px.

   Szerokość siatki nie idzie tu za szerokością okna wprost: powyżej 1080 px
   tabela dzieli rząd z cennikiem i dostaje ledwie 1,55/2,55 kontenera, więc
   na cztery kafle ma miejsce dopiero od ~1420 px, a niżej mieszczą się trzy.
   Poniżej 1080 px cennik przenosi się nad nią, tabela odzyskuje całą szerokość
   strony i znów jest cztery — stąd te progi zamiast jednego.

   Przy trzech kolumnach ostatnia z ośmiu pozycji zostawałaby sama w rzędzie
   obok pustego miejsca, więc dostaje podwójną szerokość i rząd się domyka. */
@media (min-width: 1081px) and (max-width: 1420px) {
  .spec-table { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spec-cell:last-child { grid-column: span 2; }
}
@media (max-width: 850px) {
  .spec-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Na telefonie kafel ma ~164 px i węższa wyściółka z mniejszym rysunkiem
   dokładają tekstowi kilkanaście pikseli — tyle, żeby „Quattro (AWD)" zmieściło
   się w jednym wierszu. Dwuwyrazowe podpisy i tak się łamią: wersalikami z
   rozstrzeleniem „Moment obrotowy" potrzebuje ~130 px, a zejście z podpisem
   poniżej .65rem to na telefonie 9 px i już się tego nie czyta. Rząd rośnie
   wtedy o jeden wiersz podpisu i tyle. */
@media (max-width: 560px) {
  .spec-cell { padding: 14px 12px; gap: 10px; }
  .spec-ico { width: 24px; height: 24px; }
}

/* ---------- modyfikacje pod danymi technicznymi ----------
   Druga karta w tej samej kolumnie; odstęp jak między sekcjami strony auta,
   żeby podpis „Modyfikacje" należał wyraźnie do tego, co pod nim, a nie do
   tabeli wyżej. */
.car-mody { margin-top: clamp(30px, 3.2vw, 44px); }
.car-mody > .eyebrow { margin-bottom: 16px; }

/* ---------- modyfikacje ----------
   Kafle same się układają: przy czterech modyfikacjach stoją w jednym rzędzie
   jak w tabeli danych obok, przy siedmiu zawijają się bez dziur. Ikona siedzi
   w kółku z włosem ramki, tym samym co reszta szkła na stronie; podpis pod nią
   trzyma najwyżej ~20 znaków w wierszu, bo dłuższa linia rozpychałaby kolumnę
   i rozjeżdżała odstępy między kaflami. */
.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(22px, 2.4vw, 30px) clamp(14px, 1.8vw, 24px);
  padding: clamp(24px, 2.6vw, 32px);
}
.mod-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.mod-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
}
/* Rysunki są bogatsze niż zwykła piktogramowa kreska (siatka grilla, bieżnik
   opony, żeberka chłodnicy), więc dostają więcej miejsca; przy 26 px szczegóły
   zlewały się w plamę. */
.mod-ico img { width: 42px; height: 42px; }
.mod-item span {
  max-width: 20ch;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.35;
}


/* ---------- responsywność ---------- */
@media (max-width: 1080px) {
  .answers-grid { grid-template-columns: .75fr 1.25fr; gap: 64px; }
  .drive-story-media { clip-path: inset(15% 15% 15% 15% round 2px); }
  .car-layout, .booking-layout { grid-template-columns: 1fr; }
  /* W jednej kolumnie cennik ma iść zaraz po zdjęciach, a dane techniczne na
     koniec; opakowanie lewej kolumny znika, żeby dało się je przestawić. */
  .car-main { display: contents; }
  .gallery { order: 1; }
  .price-rail { order: 2; }
  .car-data { order: 3; }
  /* Po złożeniu kolumn podsumowanie znów jest częścią strony: bez własnej
     wysokości i bez drugiego pionowego przewijaka na telefonie. */
  .price-rail, .summary { position: static; max-height: none; overflow: visible; overscroll-behavior: auto; }
  /* Refleks .lg::before musi być liczony względem karty podsumowania.
     Przy position: static rozciągał się na całą .booking i robił szarą
     płaszczyznę od samej granicy danych technicznych. */
  .summary { position: relative; top: auto; }
  /* Na wąskim ekranie wszystkie rozdziały wracają do lewej. Samo text-align
     nie wystarczy: nadpis jest flexem, a kreska rysuje się od swojej krawędzi —
     bez tych trzech reguł wiersz „02 · DOSTAWA" zostawał przy prawej. */
  .chap-copy, .chap--right .chap-copy { max-width: none; margin-left: 0; text-align: left; }
  .chap--right .chap-no { justify-content: flex-start; }
  .chap--right .chap-no i { transform-origin: left; }
  .chap--right .chap-text { margin-left: 0; }
  .booking-layout { gap: 16px; }
  /* Bez podziału na lewo/prawo cała siła musi iść w pion — tekst leży tu
     w dolnej połowie, często na masce auta. Zmierzone bez tego: nadpis 2,8:1,
     akapit 3,1:1. */
  .chap-shade, .chap--right .chap-shade {
    background:
      linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 12%, transparent 28%),
      linear-gradient(180deg, transparent 22%, rgba(0,0,0,.55) 44%,
                      rgba(0,0,0,.84) 66%, rgba(0,0,0,.94) 86%, #000 100%);
  }
  /* na telefonie karta przy 66vw robi się pionowa i mocno przycina kadr —
     szersza i niższa trzyma proporcję bliżej zdjęcia */
  /* na telefonie karta 5:3 przy 66vw jest za niska na tekst — szersza
     i w proporcji 4:3 trzyma i kadr, i czytelny blok w rogu */
  /* na telefonie wracamy do wiązania z szerokością: przy wysokim, wąskim
     ekranie wiązanie z wysokością robiło z karty pionowy prostokąt */
  .fleet-card, .fleet-intro { flex: 0 0 88vw; height: auto; max-width: none; aspect-ratio: 4 / 3; }
  .cat-search { flex: 1; }
  .why-services { grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr); }
  .why-services-copy { width: 94%; }
  /* Dolne granice muszą tu zejść niżej niż w układzie szerokim: druga kolumna ma
     min. 500px, więc między 721 a ~900px kolumna tekstu zwęża się do ~160px. */
  .why-services-copy h2 { font-size: clamp(1.6rem, 3.6vw, 3.1rem); }
  .why-services-lead { font-size: clamp(.74rem, 1.1vw, 1.05rem); }
}
@media (max-width: 720px) {
  .brand-strip-list {
    min-height: 34px;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    padding-inline: 0;
  }
  .brand-strip-item {
    gap: 0;
  }
  .brand-strip-item img { width: 23px; height: 23px; }
  .brand-strip-item--audi img,
  .brand-strip-item--ford img,
  .brand-strip-item--camaro img { width: 31px; }
  .brand-strip-item--mclaren img { width: 56px; height: 42px; }
  .brand-strip-item span { display: none; }
  .hero-brands { margin-top: 20px; }
  .drive-story { height: 330svh; }
  .drive-story-pin { min-height: 560px; }
  .drive-story-media { clip-path: inset(18% 7% 18% 7% round 2px); }
  .drive-film { object-position: 53% center; }
  .drive-story-intro { width: 94vw; }
  .drive-story-intro p { margin-bottom: 16px; font-size: .58rem; }
  .drive-story-intro h2 { font-size: clamp(2.5rem, 12vw, 4.6rem); line-height: .93; }
  .drive-story-copy {
    left: 16px;
    right: 16px;
    bottom: 76px;
    width: auto;
    min-height: 300px;
  }
  .drive-copy h3 { font-size: clamp(2.35rem, 12vw, 4rem); }
  .drive-copy > p:not(.drive-kicker) { max-width: 33ch; margin-top: 16px; font-size: .87rem; }
  .drive-film-cta { margin-top: 22px; font-size: .66rem; }
  .drive-kicker { margin-bottom: 14px; font-size: .58rem; letter-spacing: .2em; }
  .drive-story-ui { left: 16px; right: 16px; bottom: 22px; grid-template-columns: 1fr auto; gap: 14px; }
  .drive-story-ui > span { display: none; }
  .drive-story-vignette {
    background:
      linear-gradient(180deg, rgba(0,0,0,.48), transparent 25%, transparent 48%, rgba(0,0,0,.9)),
      linear-gradient(90deg, rgba(0,0,0,.35), transparent 75%);
  }
  .drive-scene[data-scene="0"] img { object-position: 58% center; }
  /* Nad panelem nie stoi już żadna plansza z hasłem, więc odstęp od kafli
     floty musi dać sama sekcja; przy zerze karta auta dotykała jej krawędzi. */
  .ph-art { padding-top: 44px; }
  .why-services {
    width: calc(100% - 16px);
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .why-services-intro { min-height: max(620px, 78svh); }
  .why-services-bg { object-position: 42% 62%; }
  .why-services-shade {
    /* Uwaga przy edycji: ta reguła podmienia całe `background`, a nie dokłada
       warstwę — każda zmiana w wersji szerokoekranowej musi tu trafić osobno. */
    background:
      linear-gradient(180deg, rgba(12,13,14,.62), rgba(12,13,14,.42) 42%, rgba(18,19,20,.92) 100%),
      linear-gradient(90deg, rgba(14,15,16,.94), rgba(14,15,16,.6) 82%);
  }
  .why-services-copy {
    width: 100%;
    padding: 64px 20px 0;
  }
  .why-services-copy h2 {
    /* szersza miara niż wcześniej — przy świetle .display te same słowa
       schodziły o wiersz niżej */
    max-width: 17ch;
    font-size: clamp(2.1rem, 9.2vw, 2.75rem);
  }
  .why-services-lead {
    max-width: 34ch;
    margin-top: 28px;
    font-size: .78rem;
  }
  /* ---------- panel korzyści jako harmonijka ----------
     Na szerokim ekranie cztery wiersze dzielą stałą wysokość kadru i opis
     pojawia się w miejscu, które i tak stoi puste. Przeniesione wprost na
     telefon dawało to panel wysoki na 880 px (a poniżej 400 px nawet 980 px),
     w którym widać było wyłącznie cztery numery z tytułami: prawie tysiąc
     pikseli przewijania na cztery wiersze tekstu, a opis wymagał dotknięcia.

     Tutaj wiersz ma wysokość swojej treści, a opis rozwija się pod tytułem.
     Zamknięty panel to około 300 px zamiast 880, otwarty wiersz dokłada tyle,
     ile naprawdę zajmuje opis. Rozwijanie idzie przez grid-template-rows
     0fr → 1fr, więc animuje się bez zgadywanej wysokości i bez dodatkowego
     opakowania w HTML. */
  .why-panel {
    --wp-pad: 18px;
    --wp-no: 44px;
    --wp-gap: 14px;
    width: 100%;
    aspect-ratio: auto;
    min-height: 0;
    display: block;
    align-self: stretch;
    justify-self: stretch;
    border-top: 1px solid rgba(255,255,255,.09);
    border-left: 0;
  }
  .why-panel-item {
    display: grid;
    grid-template-rows: auto 0fr;
    padding: 20px var(--wp-pad);
    transition: grid-template-rows 340ms cubic-bezier(.23,1,.32,1), background 200ms ease;
  }
  .why-panel-item.is-active,
  .why-panel-item[aria-expanded="true"] { grid-template-rows: auto 1fr; }
  .why-panel-top {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    /* trzecia kolumna to znak rozwinięcia; bez niego nic nie mówi, że wiersz
       da się dotknąć */
    grid-template-columns: var(--wp-no) minmax(0, 1fr) 22px;
    transform: none;
  }
  .why-panel-top::after {
    content: "";
    width: 13px; height: 13px;
    justify-self: end;
    border-right: 1.5px solid rgba(255,255,255,.55);
    border-bottom: 1.5px solid rgba(255,255,255,.55);
    transform: rotate(45deg) translate(-3px, -3px);
    transition: transform 300ms cubic-bezier(.23,1,.32,1);
  }
  .why-panel-item.is-active .why-panel-top,
  .why-panel-item[aria-expanded="true"] .why-panel-top { transform: none; }
  .why-panel-item.is-active .why-panel-top::after,
  .why-panel-item[aria-expanded="true"] .why-panel-top::after {
    transform: rotate(225deg) translate(-3px, -3px);
  }
  .why-panel-no { font-size: 1.25rem; }
  .why-panel-top strong { font-size: 1.25rem; }
  .why-panel-description {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    /* min-height: 0 jest tu konieczne: bez niego wiersz 0fr i tak zajmuje
       wysokość treści i harmonijka nigdy się nie domyka */
    min-height: 0;
    overflow: hidden;
    max-width: none;
    padding-left: calc(var(--wp-no) + var(--wp-gap));
    font-size: .8rem;
    transform: none;
    transition: opacity 220ms ease, padding-top 300ms ease;
  }
  .why-panel-item.is-active .why-panel-description,
  .why-panel-item[aria-expanded="true"] .why-panel-description { padding-top: 12px; }
  .why-panel-item::after {
    background: linear-gradient(90deg, rgba(9,10,11,.93), rgba(9,10,11,.82) 60%, rgba(9,10,11,.88));
  }
  @media (max-width: 400px) {
    /* Na najwęższych ekranach „Dostawa i bezpośredni kontakt" łamie się na dwie
       linie; węższe kolumny boczne oddają miejsce tytułowi. */
    .why-panel { --wp-pad: 15px; --wp-no: 38px; --wp-gap: 12px; }
    .why-panel-no,
    .why-panel-top strong { font-size: 1.12rem; }
  }
  .ph-stats { width: 100%; gap: 8px; margin-top: 62px; text-align: center; }
  /* Podpisy liczb wyrównane do lewej mają całą szerokość kolumny; miara 12ch
     z wersji wyśrodkowanej łamała je w poszarpaną drabinkę. */
  .why-services-intro .ph-stats { width: 100%; padding: 48px 20px 54px; gap: 12px; }
  .why-services-intro .ph-stats p { max-width: none; font-size: .64rem; }
  .ph-stats > div { justify-items: center; gap: 8px; }
  .ph-stats strong { justify-content: center; font-size: clamp(1.65rem, 7.5vw, 2.25rem); }
  .ph-stats p { max-width: 12ch; font-size: .59rem; line-height: 1.35; }
  .answers { padding-block: 92px 110px; }
  .answers-grid { grid-template-columns: 1fr; gap: 72px; }
  .answers-head { position: static; }
  .answers-index { margin-bottom: 40px; }
  .answers-head h2 { font-size: clamp(3rem, 16vw, 5.6rem); }
  .answers-contact { margin-top: 34px; }
  .answers-list summary { grid-template-columns: 28px 1fr 22px; gap: 12px; padding: 23px 0; font-size: 1rem; line-height: 1.35; }
  .answers-list .faq-body { margin-left: 40px; padding: 0 14px 25px 0; font-size: .84rem; }
  /* Na wąskim ekranie dwie kolumny nie mają z czego żyć: nagłówek i zdanie
     z przyciskiem stają jedno pod drugim, a kadr robi się wyższy niż szerszy,
     bo inaczej z auta zostałby pasek. */
  .final-drive { padding-top: clamp(44px, 11vw, 72px); }
  .final-drive-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-inline: 20px;
  }
  .final-drive-copy h2 { max-width: 14ch; }
  .final-drive-card { margin-inline: 20px; min-height: clamp(360px, 56svh, 520px); }
  .final-drive-cta { width: auto; padding-inline: 34px; }
  /* Pasek nawigacji schodzi do 16 px dopiero TUTAJ, więc szyna i stopka muszą
     zmieniać wcięcie w tym samym progu. Wcześniej ta para siedziała w progu
     1080 px i między 721 a 1080 px karta stała o 8–18 px na lewo od logo. */
  .fleet-rail { padding-inline: 16px; }
  .fleet-view { scroll-padding-inline-start: 16px; }
  /* Etykieta znika z nadpisu na wąskim ekranie. Pełny ciąg („Isle of Man Green
     • BMW M3 Competition xDrive") łamał się na dwa wiersze i wypychał cały blok
     tekstu w górę karty, na jasną część zdjęcia. Sama nazwa modelu mieści się
     w jednym wierszu, a etykieta i tak zwykle powtarza to, co jest w haśle. */
  .fleet-no em, .fleet-no i { display: none; }
  /* Karta 4:3 na telefonie ma ~257 px wysokości, więc ten sam gradient
     w procentach daje o połowę mniej pikseli przyciemnienia niż na desktopie
     i blok tekstu ląduje na jasnym niebie. Zmierzone: nadpis miał kontrast
     0,82:1, czyli tło jaśniejsze od liter. Stopnie przesunięte wyżej. */
  .fleet-card::after, .fleet-intro::after {
    background:
      linear-gradient(0deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.9) 30%, rgba(0,0,0,.84) 52%,
                      rgba(0,0,0,.5) 70%, rgba(0,0,0,.16) 86%, transparent 100%),
      linear-gradient(90deg, rgba(0,0,0,.45) 0%, transparent 52%);
  }
  /* nadpis to najmniejszy tekst na karcie, więc na telefonie idzie bliżej bieli
     — sam gradient nie wyciągał go do progu czytelności */
  .fleet-no { color: #d7d9dc; }
  /* plakietka lokalizacji schodzi razem z menu — wejście na mapę jest
     w rozwijanym menu, a w pasku nie ma dla niej miejsca obok burgera */
  .nav-links, .nav .btn:not(.nav-call), .nav-city { display: none; }
  .nav-burger { display: flex; }
  /* ramka telefonu wraca przy burgerze, ale mówi krótko „Zadzwoń";
     pełny numer nie mieści się obok logo i lupy. Wysokość zostaje równa
     lupie, żeby obie krawędzie stały w jednej linii; węższa wyściółka,
     bo napis jest krótki, a o miejsce walczy jeszcze burger. */
  .nav .nav-call { display: inline-flex; height: 40px; padding: 0 14px; }
  .nav-call-nr { display: none; }
  .nav-call-cta { display: inline; }
  .nav-logo .logo { font-size: 16px; }
  /* pasek sięga krawędzi, więc na wąskim ekranie o miejsce walczą logo,
     lupa i burger — ściągamy odstępy, inaczej burger wychodzi poza kadr */
  .nav-inner { gap: 12px; padding-inline: 16px; }
  /* panel wyszukiwarki jest szerszy niż odległość lupy od lewej krawędzi,
     więc kotwiczony do przycisku uciekał poza ekran — na wąskim widoku
     rozpinamy go między krawędziami okna zamiast wieszać pod lupą */
  .search-panel {
    position: fixed;
    top: calc(var(--nav-h) - 8px);
    left: 16px; right: 16px;
    width: auto;
  }
  /* Na telefonie o szerokość walczy siedem kolumn naraz, więc kalendarz
     oddaje wewnętrzny margines i część odstępu: koło dnia ma zostać w rozmiarze
     wygodnym dla palca, a to jedyne miejsce, z którego można wziąć piksele. */
  .cal-wrap { grid-template-columns: 1fr; gap: 24px; padding: 14px 4px 16px; --cal-luz: 4px; }
  .form-grid { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .bk-block { padding: 22px 20px 24px; }
  .bk-steps { grid-template-columns: 1fr; gap: 8px; }
  .bk-step { padding: 11px 15px; }
  .bk-pills { grid-template-columns: 1fr 1fr; }
  .bk-pills .bk-pill:last-child { grid-column: 1 / -1; }
  .time-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
  /* Na telefonie dwie kolumny godzin dałyby po trzy kafelki w rzędzie, więc
     odbiór i zwrot ustawiają się jeden pod drugim; podpis nad każdą siatką
     dalej mówi, o którą porę chodzi. Podział na kolumny zostaje ten sam, bo
     kolumna rozciągnięta na całą szerokość ekranu ma na niego miejsce. */
  .time-two { grid-template-columns: 1fr; gap: 10px; }
  /* Na wąskim ekranie osiem miniatur w rzędzie zrobiłoby się nieklikalne,
     więc pasek przesuwa się palcem zamiast łamać na kilka rzędów. */
  .gallery-thumbs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .gallery-thumbs::-webkit-scrollbar { display: none; }
  .gallery-thumbs button { flex: 0 0 98px; scroll-snap-align: start; }
}
/* Poniżej ~560 px pełny znak z podpisem nie mieści się już obok języka, lupy
   i burgera — burger lądował poza prawą krawędzią i menu było nie do otwarcia.
   Zostaje sam monogram OFC; pełny znak dalej stoi w stopce i preloaderze. */
@media (max-width: 560px) {
  .nav-logo .logo-rule, .nav-logo .logo-text { display: none; }
}
/* ---------- kalendarz jako arkusz ----------
   Rozwinięcie w górę potrzebuje nad paskiem tyle miejsca, ile ma wysokości.
   Na wąskim ekranie tego miejsca nie ma w poziomie, na niskim w pionie — więc
   w obu przypadkach panel odkleja się od paska, siada przy dolnej krawędzi
   ekranu i przyciemnia tło. Warunek jest jednym zapytaniem, bo reguły są
   dokładnie te same.

   Granica wysokości wynika z rachunku, nie z okrągłej liczby: pasek stoi tuż
   nad dolną krawędzią hero, panel ma około 540 px, a przy 800 px widoku jego
   górna krawędź ląduje tuż pod nawigacją. Niżej zaczynałby wychodzić poza
   ekran, więc od tego miejsca w dół rządzi arkusz. */
@media (max-width: 760px), (max-height: 800px) {
  .hf-scrim {
    display: block;
    position: fixed; inset: 0; z-index: 29;
    background: rgba(6, 6, 7, .62);
    animation: hf-fade .2s ease-out;
    /* Machnięcie zaczęte na kurtynie przewijało stronę POD arkuszem; po paru
       gestach pod panelem stała już szyna aut i nietrafione „Gotowe" (tap
       w kurtynę zamyka arkusz) zostawiało palec nad kartą auta — następne
       dotknięcie otwierało stronę auta zamiast domknąć wybór terminu. */
    touch-action: none;
  }
  /* Otwarty arkusz ma być jedynym, co przyjmuje dotyk — dwiema warstwami
     obrony, bo strona jest pełna własnych z-indexów i pojedynczy przepis
     zawsze coś przepuszczał: najpierw nawigację (100), potem odnośniki kart
     „Poznaj naszą flotę" (z-index: 2–3 liczone w głównym kontekście strony,
     czyli PONAD warstwą hero z kurtyną). Klasę hf-arkusz zakłada shared.js
     na czas otwartego arkusza.

     1) Dotyk: cała strona traci zdarzenia wskaźnika; odzyskują je tylko
     arkusz i kurtyna (tap = zamknięcie). Nawet element namalowany nad
     kurtyną przez jakiś przyszły z-index nie przyjmie stuknięcia — hit-test
     omija martwe elementy i spada na kurtynę pod nimi. Toast (z-index: 400)
     dalej widać nad arkuszem; zdarzeń nie dostaje, ale tak ma zawsze
     (pointer-events: none w jego bazie) — nie wolno mu ich tu przywracać,
     bo pusty kontener toastu wisi na stałe nad dołem ekranu i łapałby
     stuknięcia w kurtynę.

     2) Malowanie: na stronie miasta kurtyna siedzi w warstwie hero
     (.hero-content, z-index: 2) i z jej środka nie da się jej wynieść wyżej,
     więc nad nawigację i sekcje idzie cała warstwa. Na stronie floty kurtyna
     stoi w głównym kontekście (29) — tam wystarczy zdjęcie nawigacji (100),
     pigułki ustawień (95) i podpowiedzi „przesuń" (90) w dół. */
  body.hf-arkusz { pointer-events: none; }
  body.hf-arkusz .hf-cal,
  body.hf-arkusz .hf-scrim { pointer-events: auto; }
  body.hf-arkusz .hero-content { z-index: 101; }
  body.hf-arkusz .nav,
  body.hf-arkusz .prefs-dock,
  body.hf-arkusz .hint-przesun { z-index: 1; }
  /* Wjazd hero (html.intro wyżej) trzyma na formularzu transform i filtr,
     a każde z nich robi z formularza układ odniesienia dla position: fixed —
     kurtyna i arkusz otwarte w trakcie wjazdu kryły wtedy sam formularz
     (361 × 250 px) zamiast okna i dotyk obok przechodził do strony. Otwarty
     arkusz i tak wszystko zasłania, więc wjazd dokańcza się natychmiast.
     !important, bo reguła wjazdu z trzema klasami jest bardziej szczegółowa. */
  body.hf-arkusz .hero-find {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hf-cal {
    position: fixed;
    top: auto; bottom: 12px;
    left: 50%; right: auto;
    width: min(600px, calc(100vw - 20px));
    /* Pasek nawigacji rysuje się NAD panelem (leży w kadrze hero, czyli
       w warstwie z-index: 2, a pasek ma 100), więc arkusz nie może sięgać pod
       niego. Przy oknie wysokim na 700 px nagłówek miesiąca i strzałki
       lądowały dokładnie pod znakiem firmowym, telefonem i burgerem. */
    max-height: calc(100svh - var(--nav-h) - 24px);
    overflow-y: auto;
    /* wnętrze panelu ma własny przewijak; po jego dnie gest nie może jechać
       dalej stroną pod kurtyną (patrz komentarz przy .hf-scrim wyżej) */
    overscroll-behavior: contain;
    animation: hf-sheet .24s cubic-bezier(.16, .86, .22, 1);
  }
  /* „Gotowe" zawsze w kadrze: panel bywa wyższy niż ekran i stopka lądowała
     poza nim — trzeba było jej szukać przewijaniem, a nietrafione dotknięcia
     lądowały obok arkusza. Stopka klei się więc do dna, a dni i godziny
     przewijają się pod nią; ujemne marginesy kładą ją też na wyściółce
     panelu, stąd własna wyściółka, kryjące tło (barwa panelu bez alfy,
     bo pod stopką suną komórki dni) i dolne zaokrąglenia arkusza. */
  .hf-cal-foot {
    position: sticky;
    bottom: -16px;
    margin: 15px -18px -16px;
    padding: 12px 18px 14px;
    background: rgb(16, 16, 19);
    border-radius: 0 0 22px 22px;
  }
  /* pigułka „Gotowe" rośnie do pełnego celu dotyku (44 px) */
  .hf-cal-done { padding: 11px 26px; }
}
@keyframes hf-fade { from { opacity: 0; } }
@keyframes hf-sheet { from { opacity: 0; transform: translateX(-50%) translateY(18px); } }

/* ---------- pasek wyszukiwania na węższym ekranie ----------
   Cztery pola w jednym rzędzie mieszczą się tylko na szerokim ekranie. Niżej
   pigułka łamie się na dwa wiersze: wybory (miasto, termin, godzina) zostają
   u góry, a szukanie auta schodzi pod nie na pełną szerokość. */
@media (max-width: 760px) {
  .hf-bar { flex-wrap: wrap; row-gap: 2px; }
  .hf-when { flex: 1 1 auto; justify-content: center; }
  /* Napis terminu centrował się w tym, co zostawało PO kalendarzyku, więc stał
     11 px w prawo od osi pigułki — obok „Szukaj" i miasta, które stoją w osi
     (lupa jest na wąskim ekranie ukryta, a strzałka miasta równoważy pinezkę).
     Ikona wychodzi z układu wiersza: pole odzyskuje pełną szerokość, a napis
     siada dokładnie na środku. Wyściółka po bokach zostaje symetryczna, żeby
     dłuższa wartość („28.08 → 30.08") nie weszła pod ikonę. */
  .hf-when .hf-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
  .hf-when .hf-pick-btn { padding-inline: 20px; }
  .hf-sep--q { display: none; }
  .hf-q { flex: 1 1 100%; order: 8; }

  /* jeden miesiąc naraz; przewijanie kalendarza w bok byłoby gorsze niż
     przeskok strzałką */
  .hf-cal-months { grid-template-columns: 1fr; }
  .hf-cal-months .cal + .cal { display: none; }
  .hf-cal-months .cal:first-child .hf-nav-btn.next { visibility: visible; }
  .hf-cal .cal-day { font-size: .85rem; }
}

@media (max-width: 460px) {
  /* na wąskim ekranie miasto i szukajka nie mieszczą się obok siebie —
     pigułka rozwija się w kolumnę zaokrąglonych wierszy. Termin i godzina
     dzielą jeden wiersz: obie wartości są krótkie, a pasek rozbity na pięć
     rzędów zjadałby pół ekranu telefonu. */
  .hf-bar {
    border-radius: 24px;
    padding: 8px;
    gap: 6px;
  }
  /* Wcięcie w pionie siedzi na samym polu, a nie na wierszu: inaczej input ma
     24 px wysokości w 56-pikselowej pigułce i dotknięcie jej górnej krawędzi
     nie ustawia kursora. */
  .hf-field {
    justify-content: center;
    padding: 0 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .05);
  }
  .hf-q input,
  .hf-city-btn,
  .hf-pick-btn { padding-block: 15px; }
  .hf-city { padding-left: 16px; }
  /* pole jest tu na całą szerokość paska, więc lista też — przyklejona do
     lewej krawędzi zasłaniałaby sąsiednie pole */
  .hf-city-list { left: 0; right: 0; min-width: 0; top: calc(100% + 8px); }
  .hf-city, .hf-q { flex: 1 1 100%; }
  .hf-when { flex: 1 1 100%; }
  .hf-q input { text-align: center; }
  /* napis centruje się w polu, a lupa jako osobny element flexa zostawała
     przy lewej krawędzi wiersza — bez niej pole wygląda jak sąsiednie */
  .hf-q .hf-ico { display: none; }
  /* wcięcie pola jest tu szersze niż w rzędzie wyżej, więc kalendarzyk
     (wyjęty z układu w zapytaniu o 760 px) odsuwa się razem z nim */
  .hf-when .hf-ico { left: 16px; }
  .hf-when .hf-pick-btn { padding-inline: 28px; }
  .hf-sep { display: none; }
  .hf-shell, .hf-all { width: 100%; }
  /* w finale przycisk stoi pod zdaniem i ma obejmować napis, a nie rozciągać
     się na kolumnę jak ten w hero */
  .final-drive-cta { width: auto; }
  .cat-grid { grid-template-columns: 1fr; }
}


/* ---------- pola formularzy na telefonie ----------
   iPhone przybliża całą stronę, gdy dotknięte pole ma litery mniejsze niż
   16 px, a po takim przybliżeniu trzeba ręcznie oddalać widok, żeby wrócić do
   formularza. Wszystkie pola do wpisywania dostają więc na wąskim ekranie
   równo 16 px; panel admina ma tę samą regułę u siebie. Pola wyboru (ptaszki)
   pomijamy — one przybliżenia nie wyzwalają.

   Ten blok musi stać po regułach bazowych: selektory mają tę samą ważność,
   a zapytanie o szerokość jej nie podnosi, więc decyduje kolejność. */
@media (max-width: 720px) {
  .field input, .field textarea, .field select,
  .bk-wlasny-pole input,
  .search-field input,
  .hf-q input { font-size: 16px; }
}

/* ---------- dostępność ruchowa ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  .rv { opacity: 1; transform: none; }
  /* treść odsłonięta od razu, bez czekania na obserwator wejścia w kadr */
  .rvg > * { opacity: 1; transform: none; filter: none; }
  /* Ściana opinii ma własne zapytanie o ograniczony ruch, przy swoich
     regułach niżej w pliku: pas musi tam dostać przewijanie w bok, a ta sama
     waga selektora z bloku stojącego wyżej by z nimi przegrała. */
  .hero-bg img { animation: none; }
  .hero-video { display: none; }

  /* Skrócenie czasu animacji NIE wyłącza ruchu sterowanego przewijaniem —
     taka animacja nie ma czasu trwania, jej postęp bierze się z pozycji paska.
     Paralaksę, dryf treści i pasek postępu trzeba więc zdjąć osobno; to
     dokładnie ten rodzaj ruchu, który ta preferencja ma wyciszać. */
  .chap-media img, .chap-inner, .closer-inner { animation: none !important; }
  .chap-media img { transform: scale(1.14); }
  .chap-inner, .closer-inner { transform: none; }
  .drive-story { height: auto; }
  .drive-story-pin { position: relative; min-height: 100svh; }
  .drive-story-media { clip-path: inset(0); }
  .drive-film { transform: none !important; }
  .drive-story-out { opacity: 0 !important; }
  .drive-story-intro { display: none; }
  .drive-story-copy { opacity: 1; transform: none; }
  .drive-story-ui { display: none; }
  .featured-card,
  .featured-card img { animation: none !important; }
  .featured-card { clip-path: inset(0); opacity: 1; }
  .featured-card img { transform: none; }
  .ph-reveal,
  .ph-reveal img { animation: none !important; transform: none; filter: none; }
  .ph-reveal { opacity: 1; clip-path: inset(0); }

  /* Wejście sekcji „Cztery rzeczy" — stan docelowy od razu, bez czekania na
     obserwator. Bez tego treść zostałaby przezroczysta, gdyby skrypt nie
     doszedł do skutku. */
  .why-services-bg { transform: scale(1.025) !important; transition: none; }
  .why-panel-item::before { transform: scaleX(1); transition: none; }
  .why-panel-top { opacity: 1; translate: none; transition: none; }
}


/* ============================================================
   JĘZYK I MOTYW — pływająca pigułka w lewym dolnym rogu, ta sama na
   każdej stronie publicznej. Zeszła z paska nawigacji, bo to ustawienia
   widoku, a nie nawigacja: u dołu są pod ręką, a górny pasek zostaje
   przy telefonie i wyszukiwarce. Obsługa w js/ustawienia.js.
   ============================================================ */
.prefs-dock {
  position: fixed;
  left: clamp(14px, 2.6vw, 28px);
  bottom: calc(clamp(14px, 2.6vw, 28px) + env(safe-area-inset-bottom));
  /* pod nawigacją (100) i menu telefonu (99), nad treścią strony */
  z-index: 95;
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(10, 10, 11, .62);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: transform .28s ease;
}
.pref-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; min-width: 34px; padding: 0 11px;
  border: 1px solid transparent; border-radius: 999px;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em;
  color: var(--dim);
  transition: color .25s, border-color .25s, background-color .25s;
}
.pref-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .09); }
.pref-btn svg { width: 17px; height: 17px; }
/* ikona motywu pokazuje to, NA CO przełącza: w ciemnym księżyc → słońce */
.ikona-slonce { display: none; }
html[data-motyw="jasny"] .ikona-slonce { display: block; }
html[data-motyw="jasny"] .ikona-ksiezyc { display: none; }
/* ---------- pigułka ustawień na telefonie ----------
   Na szerokim ekranie pływa w lewym dolnym rogu i nikomu nie przeszkadza; na
   telefonie leżała dokładnie na treści. Zmierzone przypadki: zasłaniała dzień
   31 w kalendarzu rezerwacji, godzinę 13:00 w wyborze odbioru, przycisk
   „Wyczyść" w panelu terminu i pierwsze wiersze każdej sekcji tekstowej.
   Wychodzi więc z widoku i wraca dopiero w otwartym menu telefonu, gdzie ma
   całą dolną krawędź dla siebie. Wariant „w stopce" (ekran wyboru miasta) tego
   nie dotyczy: on nie pływa i nie ma tam menu. */
@media (max-width: 900px) {
  .prefs-dock:not(.prefs-dock--wstopce) { display: none; }
  body.menu-open .prefs-dock:not(.prefs-dock--wstopce) {
    /* nad przykryciem menu (99), pod paskiem nawigacji (100) */
    z-index: 99;
    left: 50%;
    bottom: calc(28px + env(safe-area-inset-bottom));
    display: flex;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .06);
  }
  /* 44 px w obu wymiarach; wcześniej 32 px, czyli poniżej progu, w który palec
     trafia bez celowania */
  .pref-btn { height: 44px; min-width: 44px; padding: 0 14px; font-size: .68rem; }
}

/* ============================================================
   MOTYW JASNY
   Zasada podziału: CHROM strony (nawigacja, stopka, dokumenty, katalogowe
   filtry, panele rezerwacji, plansze tekstowe) przechodzi na jasne
   powierzchnie; pasma zbudowane NA FOTOGRAFIACH (hero, szyna floty,
   filozofia, finał) zostają ciemne — to kadry, nie tło strony.
   Tokeny niżej łapią wszystko, co pisane var(...); reszta to punktowe
   nadpisania miejsc z zaszytą ciemną barwą.
   ============================================================ */
html[data-motyw="jasny"] {
  color-scheme: light;
  --bg0: #f5f4f2;
  --bg1: #fdfdfc;
  --bg2: #eae8e4;
  --ink: #17181b;
  --dim: #575c65;
  --line: rgba(23, 24, 27, .13);
  --glass-bg: rgba(255, 255, 255, .82);
  --glass-border: rgba(23, 24, 27, .13);
  --shadow-lg: 0 22px 60px rgba(40, 42, 60, .16);
}
html[data-motyw="jasny"] body::after { opacity: .05; filter: invert(1); }

/* nawigacja i menu */
html[data-motyw="jasny"] .nav.scrolled { background: rgba(250, 249, 247, .8); }
html[data-motyw="jasny"] .nav-links a::after, html[data-motyw="jasny"] .nav-city::after { background: rgba(23, 24, 27, .65); }
html[data-motyw="jasny"] .nav .nav-call { border-color: rgba(23, 24, 27, .14); }
html[data-motyw="jasny"] .nav-search-btn:hover,
html[data-motyw="jasny"] .nav-search.open .nav-search-btn,
html[data-motyw="jasny"] .nav .nav-call:hover { background: rgba(23, 24, 27, .06); border-color: rgba(23, 24, 27, .14); }
html[data-motyw="jasny"] .prefs-dock { background: rgba(250, 249, 247, .82); }
html[data-motyw="jasny"] .pref-btn:hover { background: rgba(23, 24, 27, .07); }
html[data-motyw="jasny"] .mobile-menu { background: rgba(248, 247, 245, .95); }

/* przyciski */
html[data-motyw="jasny"] .btn-primary { background: #17181b; color: #fff; box-shadow: 0 12px 34px rgba(35, 38, 50, .22); }
html[data-motyw="jasny"] .btn-primary:hover { background: #2b2d33; box-shadow: 0 16px 44px rgba(35, 38, 50, .3); }
html[data-motyw="jasny"] .btn-ghost { background: rgba(23, 24, 27, .05); border-color: rgba(23, 24, 27, .16); }

/* stopka */
html[data-motyw="jasny"] .footer--dark { background: var(--bg2); }

/* dokumenty (regulamin, polityka) */
html[data-motyw="jasny"] .doc-page { background: var(--bg0); }

/* strona auta: tło i panele */
html[data-motyw="jasny"] .car-page { background: var(--bg0); }
html[data-motyw="jasny"] .car-page .lg,
html[data-motyw="jasny"] .car-page .bk-block,
html[data-motyw="jasny"] .car-page .summary,
html[data-motyw="jasny"] .car-page .sum-hero,
/* ramka kalendarza ma na jasnym tle ten sam kolor co blok, w którym stoi;
   bez tego zostawała czarnym prostokątem z ledwo widocznymi dniami */
html[data-motyw="jasny"] .car-page .cal-wrap { background: var(--bg1); border-color: var(--line); }
/* Wiersze podsumowania mają barwy dobrane pod ciemne tło (jasne szarości od
   #91969d do #d8dade). Na białej karcie „Wydanie i odbiór o 20:00" i „Razem
   netto" ginęły w tle, więc w jasnym motywie idą tokenami: opis przygaszony,
   kwota atramentem. Wiersz podatku zostaje o stopień lżejszy od reszty, bo
   to podsuma, a nie pozycja rachunku. */
html[data-motyw="jasny"] .sum-row span,
html[data-motyw="jasny"] .sum-row.fee span,
html[data-motyw="jasny"] .sum-row.extra span,
html[data-motyw="jasny"] .sum-row.netto span { color: var(--dim); }
html[data-motyw="jasny"] .sum-row b { color: var(--ink); }
html[data-motyw="jasny"] .sum-row.muted b { color: var(--dim); }
html[data-motyw="jasny"] .sum-row.vat span,
html[data-motyw="jasny"] .sum-row.vat b { color: var(--dim); }
html[data-motyw="jasny"] .sum-row b .sum-brutto,
html[data-motyw="jasny"] .sum-row b .sum-netto { color: var(--dim); }
html[data-motyw="jasny"] .sum-row b .sum-km { color: var(--dim); }
/* biała karta: kreska sekcji z tokenów, inaczej biały pasek ginie w tle */
html[data-motyw="jasny"] .sum-sep { background: rgba(23, 24, 27, .34); }
html[data-motyw="jasny"] .sum-total > span,
html[data-motyw="jasny"] .sum-total b small,
html[data-motyw="jasny"] .bk-pasek-info b small,
html[data-motyw="jasny"] .bk-pasek-info > .bk-pasek-netto small { color: var(--dim); }
/* kwota netto w pasku na jasnym tle: atramentem, nie jasną szarością z ciemnego motywu */
html[data-motyw="jasny"] .bk-pasek-info > .bk-pasek-netto { color: var(--ink); }
html[data-motyw="jasny"] .car-lede-text p { color: var(--dim); }
html[data-motyw="jasny"] .back-link:hover { color: var(--ink); }
html[data-motyw="jasny"] .back-link:hover::after { background: rgba(23, 24, 27, .6); }

/* pola formularza, kafelki godzin, kalendarz — zaszyte biało-przezroczyste
   ramki znikają na jasnym tle, więc dostają ciemne odpowiedniki */
html[data-motyw="jasny"] .field input,
html[data-motyw="jasny"] .field textarea,
html[data-motyw="jasny"] .field select { background: #fff; border-color: var(--line); }
/* podpowiedź do numeru blankietu: mleczne tło krzyżyka ginie na jasnej karcie */
html[data-motyw="jasny"] .pj-pomoc { background: rgba(240, 241, 243, .88); }
html[data-motyw="jasny"] .pj-pomoc-x { background: rgba(23, 24, 27, .05); }
html[data-motyw="jasny"] .pj-pomoc-x:hover { background: var(--ink); color: var(--bg0); }
html[data-motyw="jasny"] .time-chip,
html[data-motyw="jasny"] .bk-pill,
html[data-motyw="jasny"] .rule,
html[data-motyw="jasny"] .extra-pick,
html[data-motyw="jasny"] .monthly-card,
html[data-motyw="jasny"] .cal-month,
/* dni tylko w kalendarzu rezerwacji (.cal-wrap); ten sam kalendarz w hero
   (.hf-cal) wisi na ciemnym panelu i zachowuje barwy motywu ciemnego */
html[data-motyw="jasny"] .cal-wrap .cal-day { background: rgba(23, 24, 27, .035); border-color: var(--line); }
/* Reszta kalendarza rezerwacji idzie tą samą drogą: nazwa miesiąca, strzałki
   i stany dnia są opisane bielą, więc na jasnej ramce zaznaczony dzień robił
   się niewidzialny, a dni minione i niedostępne przestawały różnić się od
   wolnych. Zaznaczenie odwraca się tak samo jak kafelek godziny wyżej: ciemny
   krążek, jasny napis. Hero (.hf-cal) zostaje przy barwach ciemnych. */
html[data-motyw="jasny"] .cal-wrap .cal-title { color: var(--ink); }
html[data-motyw="jasny"] .cal-wrap .cal-nav button { color: var(--dim); border-color: var(--line); background: rgba(23, 24, 27, .04); }
html[data-motyw="jasny"] .cal-wrap .cal-nav button:hover { color: var(--ink); border-color: rgba(23, 24, 27, .4); background: rgba(23, 24, 27, .08); }
html[data-motyw="jasny"] .cal-wrap .cal-day.free:hover { color: var(--ink); border-color: rgba(23, 24, 27, .45); background: rgba(23, 24, 27, .09); }
html[data-motyw="jasny"] .cal-wrap .cal-day.past { color: rgba(23, 24, 27, .26); background: transparent; }
html[data-motyw="jasny"] .cal-wrap .cal-day.blocked {
  color: rgba(23, 24, 27, .3);
  background: repeating-linear-gradient(135deg, rgba(23, 24, 27, .09) 0 5px, transparent 5px 10px);
}
html[data-motyw="jasny"] .cal-wrap .cal-day.sel {
  background: #17181b !important; color: #f5f5f4 !important; border-color: #17181b !important;
}
html[data-motyw="jasny"] .cal-wrap .cal-day.range { background: rgba(23, 24, 27, .12); border-color: rgba(23, 24, 27, .08); color: var(--ink); }
/* legenda pod kalendarzem: te same trzy kropki opisane bielą */
html[data-motyw="jasny"] .leg .l-free { background: rgba(23, 24, 27, .12); }
html[data-motyw="jasny"] .leg .l-sel { background: #17181b; }
html[data-motyw="jasny"] .leg .l-partial { background: linear-gradient(135deg, rgba(227, 34, 39, .55) 0 46%, rgba(23, 24, 27, .12) 54%); }
html[data-motyw="jasny"] .leg .l-blocked { background: repeating-linear-gradient(135deg, rgba(23, 24, 27, .3) 0 3px, transparent 3px 6px); }
html[data-motyw="jasny"] .time-chip small { color: var(--dim); }
/* Ramka kolumny godzin: na jasnym tle biała przezroczystość znika, więc obie
   kolumny zlewałyby się w jedną plamę. */
html[data-motyw="jasny"] .time-col { background: rgba(23, 24, 27, .025); border-color: var(--line); }
html[data-motyw="jasny"] .time-col-val { color: var(--ink); }
/* Pasek z dokładną porą stoi wewnątrz kolumny godzin, więc na jasnym tle musi
   być o ton ciemniejszy od niej; z bielą 3,5% zniknąłby razem z ramką. */
html[data-motyw="jasny"] .time-pol { background: rgba(23, 24, 27, .05); border-color: var(--line); }
html[data-motyw="jasny"] .time-pol-lbl { color: var(--dim); }
/* Mleczna pigułka z hero działa na ciemnym tle; w jasnym motywie zlewałaby się
   z sekcją i nie było widać, która godzina jest wybrana. Zaznaczenie idzie tu
   więc odwrotnie: ciemny kafel, jasny napis. Falujące światło zostaje, ale
   przygaszone — na ciemnym tle pełna jasna plama byłaby kleksem. */
html[data-motyw="jasny"] .time-chip.on::before { background: rgba(23, 24, 27, .94); }
html[data-motyw="jasny"] .time-chip.on:hover::before { background: rgba(23, 24, 27, 1); }
html[data-motyw="jasny"] .time-chip.on::after { opacity: .22; }
html[data-motyw="jasny"] .time-chip.on {
  color: #f5f5f4;
  border-color: rgba(23, 24, 27, .94);
  box-shadow: 0 8px 22px rgba(23, 24, 27, .18);
}
html[data-motyw="jasny"] .time-chip.on small { color: rgba(245, 245, 244, .66); }
html[data-motyw="jasny"] .tier-row { border-color: var(--line); }
html[data-motyw="jasny"] .consent { color: var(--dim); }
/* Kwadracik pakietu ma ramkę z bieli 30% i na jasnej karcie znikał zupełnie —
   nie było widać, że w ogóle jest co zaznaczyć. Zaznaczenie idzie tu odwrotnie
   niż w ciemnym motywie, tak samo jak przy kafelkach godzin wyżej: ciemne pole,
   jasny znaczek. */
html[data-motyw="jasny"] .extra-pick .box { border-color: rgba(23, 24, 27, .32); }
html[data-motyw="jasny"] .extra-pick.on .box { background: #17181b; border-color: #17181b; }
html[data-motyw="jasny"] .extra-pick .box svg { color: #f5f5f4; }
/* Rysunki pakietów mają białą kreskę: na jasnej karcie zostałby po nich sam
   czerwony akcent. Kafelek robi się więc ciemny — tak samo jak zaznaczona
   godzina wyżej, ciemne pole i jasny rysunek. */
html[data-motyw="jasny"] .extra-ico { background: #17181b; border-color: #17181b; }
html[data-motyw="jasny"] .extra-pick.on .extra-ico { background: #17181b; border-color: #17181b; }


/* ============================================================
   TELEFON; wykończenie dotykowe
   Blok stoi na końcu pliku celowo: zbiera poprawki, które dotyczą wszystkich
   sekcji naraz (wielkość celów dotyku, odpowiedź na dotknięcie, widok
   poziomy), więc przy każdej z nich z osobna byłby powtórzony kilkanaście
   razy. Reguły są tu ostatnie w kolejności, a to przy równej ważności
   selektorów rozstrzyga.
   ============================================================ */

/* ---------- odpowiedź na dotknięcie ----------
   Bez kursora nie ma stanu „najechania", więc jedynym potwierdzeniem, że
   przycisk przyjął dotknięcie, jest to, co dzieje się w chwili nacisku.
   Domyślną szarą plamę przeglądarki wyłącza -webkit-tap-highlight-color na
   <body>; tu wchodzi zamiennik. Skala zamiast zmiany tła: działa tak samo
   w ciemnym i jasnym motywie, więc nie wymaga dwóch zestawów barw. */
@media (hover: none) {
  .btn:active,
  .nav-call:active,
  .nav-search-btn:active,
  .pref-btn:active,
  .wyb-skip:active,
  .cat-toggle:active,
  .hf-pick-btn:active,
  .ofc-pick-btn:active,
  .bk-pill:active,
  .cal-day:active,
  .time-grid button:active { transform: scale(.97); }
  /* Wiersze list i karty tylko przygasają: skala na elemencie o wysokości
     ekranu wygląda jak drgnięcie całej strony. */
  .wyb-lista a:active,
  .mobile-menu a:active,
  .cat-card:active,
  .search-results a:active,
  .pyt-pytanie:active,
  .why-panel-item:active { opacity: .72; }
  /* Przejście musi być krótkie: przy 250 ms z reguł najechania odpowiedź
     przychodzi już po oderwaniu palca. */
  .btn, .nav-call, .nav-search-btn, .pref-btn, .wyb-skip, .cat-toggle,
  .hf-pick-btn, .ofc-pick-btn, .bk-pill, .cal-day,
  .wyb-lista a, .mobile-menu a, .cat-card, .search-results a, .why-panel-item {
    transition-duration: 120ms;
  }
}

/* ---------- cele dotyku ----------
   Poniżej 44 px palec musi celować, a przy chybieniu strona reaguje nie tym,
   czym trzeba. Wartości mierzone na iPhonie 390 px i Androidzie 360 px. */
@media (max-width: 900px) {
  /* Najdrobniejsze podpisy (nadtytuły, miejsce przy poście z Instagrama,
     nagłówki kolumn stopki) miały 10,6–10,9 px; na telefonie w słońcu to za
     mało. Krok w górę o pół piksela nie rusza układu, a schodzi z listy
     zastrzeżeń audytu czytelności. */
  .eyebrow, .ig-gdzie, .footer-cols h4, .footer-cols .footer-heading { font-size: .72rem; }
  /* znak firmowy w pasku miał 26 px wysokości, a jest wyjściem na stronę
     główną z każdej podstrony */
  .nav-logo { display: inline-flex; align-items: center; min-height: 44px; }
  /* odnośniki w stopce stały w wierszach po 18–21 px, jeden pod drugim;
     w kolumnie takich samych odsyłaczy chybienie o wiersz jest najłatwiejsze */
  .footer-cols li a,
  .footer-bottom a,
  .lok-link { display: inline-flex; align-items: center; min-height: 40px; }
  /* W treści (regulamin, polityka, „O nas", pytania) odsyłacze siedzą w środku
     zdań, więc rozpychanie ich do 40 px połamałoby akapit. Zamiast tego rosną
     tylko odstępy nad i pod napisem: z 17 px robi się 33 px, palec ma w co
     trafić, a wiersz tekstu zostaje na miejscu. Przyciski (.btn) omijamy, bo
     mają własną wysokość, a nadmiarowa wyściółka spłaszczyłaby je do napisu. */
  .doc p a:not(.btn),
  .doc li a:not(.btn),
  .lok-faq p a,
  .consent span a,
  .ig-nick { padding-block: 13px; }
  /* pigułka „Zadzwoń" i lupa: równa wysokość, obie w progu trafienia */
  .nav .nav-call,
  .nav-search-btn { height: 44px; }
  .nav-search-btn { width: 44px; }
}

/* ---------- pola paska wyszukiwania wypełniają pigułkę ----------
   Obsługę otwierania przeniósł na całe pole shared.js (tam pełny opis), ale
   sam przycisk musi jeszcze urosnąć: to on dostaje obrys ogniska i reakcję na
   dotknięcie, więc zostawiony przy szerokości napisu podświetlałby środek
   pigułki, a resztę zostawiał martwą na oko. Zmierzone przed poprawką: pole
   miasta 341 px przy przycisku 74 px, pole terminu 341 px przy 54 px. */
@media (max-width: 760px) {
  .hf-city-btn,
  .hf-pick-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }
  /* Ikony pól nie są celem same w sobie; kliknięcie w nie i tak otwiera panel
     (obsługa siedzi na polu), a bez tego stoją między przyciskiem a krawędzią
     jak dziura w pigułce. */
  .hf-when .hf-ico,
  .hf-city .hf-pin { pointer-events: none; }
}

/* ---------- podłoga wielkości pisma ----------
   Drobne wersaliki z szerokim odstępem to język całej strony i nie ma powodu
   go zmieniać. Ale kilka z nich zeszło na telefonie do 9,3–10,2 px, a niosą
   rzeczy, na których klient traci pieniądze albo gubi się w formularzu:
   dopłaty przy godzinach i miejscach odbioru, etykiety pól, podpisy dat
   rezerwacji i wiersz „Razem". Te idą w górę; plakietki i nadpisy sekcji
   (dekoracja, nie treść) zostają jak były. */
@media (max-width: 720px) {
  .hero-h1-lead { font-size: .68rem; }
  .bk-pill span { font-size: .68rem; }
  .field label,
  .bk-wlasny-pole label { font-size: .7rem; }
  .time-chip small { font-size: .72rem; }
  .sum-total span { font-size: .72rem; }
  .back-link { font-size: .7rem; }
  .fleet-showcase-price small { font-size: .68rem; }
}

/* ---------- telefon w poziomie ----------
   Pasek nawigacji zwija się do burgera dopiero przy 720 px szerokości, więc
   telefon obrócony na bok (najczęściej 844×390) dostawał pełne menu w oknie
   wysokim na 390 px: „O nas" łamało się na dwie linijki, a hero z podłogą
   680 px zajmowało prawie dwa ekrany. Rozstrzyga tu wysokość okna, nie
   szerokość; przy 480 px i mniej mówimy już wyłącznie o telefonie. */
@media (orientation: landscape) and (max-height: 480px) {
  .nav-links a { white-space: nowrap; }
  .hero { min-height: 100svh; }
  /* Pasek wyszukiwania w hero i tak nie zmieści się pod nagłówkiem w oknie
     tej wysokości; nagłówek schodzi więc o stopień, żeby oba weszły w kadr. */
  .hero-h1-city { font-size: clamp(2.6rem, 11vh, 4.4rem); }
  .hero-content { padding-bottom: 18px; }
  /* Kalendarz jako arkusz ma już swoje zapytanie (max-height: 800px), ale
     przy 390 px wysokości musi jeszcze oddać margines górny. */
  .hf-cal { bottom: 8px; max-height: calc(100svh - var(--nav-h) - 16px); }
}

/* ---------- pasek nad otwartym menu telefonu ----------
   Nad kadrem hero pasek jest biały niezależnie od motywu (blok „MOTYW JASNY"
   wyżej), bo leży na fotografii. Otwarte menu podkłada pod niego własną,
   jasną powierzchnię i biały znak firmowy razem z krzyżykiem znikał z widoku;
   trzeba było trafić w niewidoczny przycisk, żeby menu zamknąć. Przy otwartym
   menu pasek wraca więc do barw motywu. */
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .logo,
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-search-btn,
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-call { color: var(--ink); }
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-call { border-color: rgba(23, 24, 27, .2); }
html[data-motyw="jasny"] body.menu-open .nav:not(.scrolled) .nav-burger span { background: var(--ink); }

/* ---------- pełne tło górnego paska na telefonie ----------
   Safari przedłuża kolor przypiętego nagłówka pod zegar i status telefonu.
   Przezroczystość i backdrop-filter zostawiały tam widoczny tekst przewijanej
   strony. Nieprzezroczyste tło obowiązuje od pierwszej klatki, także po
   obrocie telefonu; wysokość paska i położenie przycisków pozostają te same. */
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .nav,
  .nav.scrolled,
  html[data-motyw="jasny"] .nav.scrolled {
    background: var(--bg0);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Nad zdjęciem hero znak i przyciski są białe również w jasnym motywie.
     Ciemna powierzchnia zachowuje ich kontrast; otwarcie menu przywraca
     jasne tło razem z istniejącymi ciemnymi ikonami. */
  html[data-motyw="jasny"] body:has(.hero):not(.menu-open) .nav:not(.scrolled) {
    background: #0a0a0b;
  }
}


/* ==========================================================
   IKONY INTERFEJSU
   ==========================================================
   Rysunki leżą w /assets/ikony jako czarna kreska z kanałem alfa, wycięte
   z firmowego arkusza przez tools/wytnij-ikony-ui.js. Na stronie nie są
   obrazkiem, tylko maską: pod nią leży kolor tekstu, więc jedna ikona świeci
   bielą w nocy, czernieje w dzień i czerwienieje tam, gdzie czerwieni się
   napis obok. Dlatego dalej stoją w kodzie jako <svg>, tyle że pusty —
   wszystkie miary z tego arkusza (.hf-ico, .mm-tel svg, .op-gwiazdki svg…)
   celują w svg i mają działać bez zmian.

   Nowa ikona to plik w /assets/ikony plus jeden wiersz niżej; ten sam zestaw
   powtarza się w admin/admin.css, bo panel wczytuje własny arkusz.
   ========================================================== */
svg.ik {
  background-color: currentColor;
  -webkit-mask-image: var(--ik); mask-image: var(--ik);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.ik-auto { --ik: url("/assets/ikony/auto.webp"); }
.ik-blyskawica { --ik: url("/assets/ikony/blyskawica.webp"); }
.ik-dymek { --ik: url("/assets/ikony/dymek.webp"); }
.ik-gwiazdka { --ik: url("/assets/ikony/gwiazdka.webp"); }
.ik-kadr { --ik: url("/assets/ikony/kadr.webp"); }
.ik-kafle { --ik: url("/assets/ikony/kafle.webp"); }
.ik-kalendarz { --ik: url("/assets/ikony/kalendarz.webp"); }
.ik-karta { --ik: url("/assets/ikony/karta.webp"); }
.ik-klodka { --ik: url("/assets/ikony/klodka.webp"); }
.ik-koperta { --ik: url("/assets/ikony/koperta.webp"); }
.ik-ksiazka { --ik: url("/assets/ikony/ksiazka.webp"); }
.ik-ksiezyc { --ik: url("/assets/ikony/ksiezyc.webp"); }
.ik-link { --ik: url("/assets/ikony/link.webp"); }
.ik-lupa { --ik: url("/assets/ikony/lupa.webp"); }
.ik-metka { --ik: url("/assets/ikony/metka.webp"); }
.ik-naped { --ik: url("/assets/ikony/naped.webp"); }
.ik-olowek { --ik: url("/assets/ikony/olowek.webp"); }
.ik-pin { --ik: url("/assets/ikony/pin.webp"); }
.ik-plus { --ik: url("/assets/ikony/plus.webp"); }
.ik-procent { --ik: url("/assets/ikony/procent.webp"); }
.ik-ptaszek { --ik: url("/assets/ikony/ptaszek.webp"); }
.ik-samolot { --ik: url("/assets/ikony/samolot.webp"); }
.ik-serce { --ik: url("/assets/ikony/serce.webp"); }
.ik-skrzynia { --ik: url("/assets/ikony/skrzynia.webp"); }
.ik-slonce { --ik: url("/assets/ikony/slonce.webp"); }
.ik-strzalka-dol { --ik: url("/assets/ikony/strzalka-dol.webp"); }
.ik-strzalka-lewo { --ik: url("/assets/ikony/strzalka-lewo.webp"); }
.ik-strzalka-prawo { --ik: url("/assets/ikony/strzalka-prawo.webp"); }
.ik-telefon { --ik: url("/assets/ikony/telefon.webp"); }
.ik-uwaga { --ik: url("/assets/ikony/uwaga.webp"); }
.ik-wyloguj { --ik: url("/assets/ikony/wyloguj.webp"); }
.ik-zakladka { --ik: url("/assets/ikony/zakladka.webp"); }
.ik-zebatka { --ik: url("/assets/ikony/zebatka.webp"); }
.ik-zegar { --ik: url("/assets/ikony/zegar.webp"); }


/* ============================================================
   PASEK O CIASTECZKACH
   ============================================================
   Nazwy klas i id celowo bez słowa „cookie": listy blokujące powiadomienia
   o ciasteczkach (EasyList Cookie, wbudowana w Brave i Operę, w uBlocku pod
   „Annoyances") mają ogólne reguły w rodzaju ###cookieBar i ##.cookie-bar-*,
   które chowają taki element na każdej stronie chwilę po wstawieniu.
   Strona nie ustawia ciasteczek, więc to nie jest brama zgody: nic nie
   blokuje, niczego nie pyta, ma jeden przycisk zamykający i odnośnik do
   dokumentu. Stoi w prawym dolnym rogu, bo lewy zajmuje pigułka języka
   i motywu; na wąskim ekranie pigułka i tak znika, więc pasek bierze
   całą szerokość. Wstawia go js/ustawienia.js prosto do <body> — nakładki
   position: fixed nie wolno kłaść pod elementem z transform ani filter,
   bo wtedy odnoszą się do niego, a nie do okna. */
.pasek-info {
  position: fixed;
  right: clamp(14px, 2.6vw, 28px);
  bottom: calc(clamp(14px, 2.6vw, 28px) + env(safe-area-inset-bottom));
  /* nad pigułką ustawień (95), pod paskiem nawigacji (100) i menu (99) */
  z-index: 96;
  width: min(400px, calc(100vw - 28px));
  display: grid;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(10, 10, 11, .94);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.pasek-info.pokaz { opacity: 1; transform: none; }
.pasek-info-tekst { margin: 0; color: #b3b6bb; font-size: .82rem; line-height: 1.65; }
.pasek-info-tekst a {
  color: #f2f2f0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
@media (hover: hover) and (pointer: fine) {
  .pasek-info-tekst a:hover { color: var(--red2); }
}
.pasek-info-akcje { display: flex; justify-content: flex-end; }
.pasek-info .btn { padding: 11px 26px; font-size: .82rem; }
/* Otwarty arkusz rezerwacji zasłania ekran i sam trzyma stuknięcia; pasek
   wiszący nad nim łapałby palec obok arkusza (tak samo chowa się pigułka). */
body.hf-arkusz .pasek-info { display: none; }
@media (max-width: 700px) {
  /* Na telefonie pasek stoi nad pierwszym ekranem, więc liczy się każdy
     piksel wysokości: przycisk wchodzi w ten sam wiersz co tekst, zamiast
     stać pod nim. Pełna szerokość, bo pigułka ustawień i tak jest tu ukryta. */
  .pasek-info {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 14px;
    padding: 14px 16px;
  }
  .pasek-info-tekst { font-size: .78rem; line-height: 1.55; }
  /* 44 px wysokości: próg, w który palec trafia bez celowania */
  .pasek-info .btn { padding: 12px 20px; min-height: 44px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pasek-info { transition: none; }
}
html[data-motyw="jasny"] .pasek-info {
  border-color: rgba(23, 24, 27, .14);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 22px 60px rgba(23, 24, 27, .16);
}
html[data-motyw="jasny"] .pasek-info-tekst { color: #3e434c; }
html[data-motyw="jasny"] .pasek-info-tekst a { color: var(--ink); }