@charset "UTF-8";
/* ============================================================
   MODUŁ „ZAPYTANIE" - arkusz wspólny.

   Ładowany osobno od theme-style.css (patrz moduly/zapytanie/init.php),
   bo to zamknięty mechanizm z własnym stanem i własną biblioteką.
   Tokeny (`--space-*`, `--radius-*`, paleta) biorą się z theme-style.css,
   który stoi wcześniej w kolejce - tutaj tylko z nich korzystamy.

   Kompilacja:
   npx sass moduly/zapytanie/assets/zapytanie.scss:moduly/zapytanie/assets/zapytanie.css --style=expanded --no-source-map
   ============================================================ */
/* ============================================================
   PODGLĄD PDF - katalog otwierany wprost na stronie.
   Odwzorowanie `.pdf-modal` z makiety (src/css/sliders.css). Warstwa jest
   globalna, bo markup stoi w stopce (moduly/zapytanie/podglad.php), a nie
   w bloku - okładek jest kilkanaście, panel jeden.

   Zachowanie: moduly/zapytanie/assets/podglad.js.
   ============================================================ */
body.is-podglad-open {
  overflow: hidden;
}
body .tb-podglad {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.5vw, 32px);
}
body .tb-podglad[hidden] {
  display: none;
}
body {
  /* ── tło ──────────────────────────────────────────────── */
}
body .tb-podglad__tlo {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 10, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
body .tb-podglad.is-otwarty .tb-podglad__tlo {
  opacity: 1;
}
body {
  /* ── panel ────────────────────────────────────────────── */
}
body .tb-podglad__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(1040px, 100%);
  height: min(88vh, 900px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--wp--preset--color--ink-1);
  border: 1px solid var(--line-d-2);
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
body .tb-podglad.is-otwarty .tb-podglad__panel {
  opacity: 1;
  transform: none;
}
body {
  /* ── pasek tytułu ─────────────────────────────────────── */
}
body .tb-podglad__pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 14px var(--space-md) 14px var(--space-lg);
  border-bottom: 1px solid var(--line-d);
  background: var(--wp--preset--color--ink-2);
  color: var(--wp--preset--color--paper);
}
body .tb-podglad__id {
  display: grid;
  gap: 1px;
  min-width: 0;
}
body .tb-podglad__id b {
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.018em;
}
body .tb-podglad__id span {
  font-size: 12px;
  color: var(--wp--preset--color--text-on-dark-soft);
}
body .tb-podglad__akcje {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex: none;
}
body {
  /* ── pobieranie ───────────────────────────────────────── */
}
body .tb-podglad__pobierz {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 10px var(--space-md);
  border: 1px solid var(--line-d-2);
  border-radius: var(--radius-full);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--paper);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
body .tb-podglad__pobierz:hover {
  border-color: transparent;
  background: var(--grad-brand);
}
body .tb-podglad__pobierz .icon {
  width: 16px;
  height: 16px;
}
body .tb-podglad__pobierz[hidden] {
  display: none;
}
body {
  /* ── zamknięcie ───────────────────────────────────────── */
}
body .tb-podglad__zamknij {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line-d-2);
  border-radius: var(--radius-full);
  background: none;
  color: var(--wp--preset--color--paper);
  cursor: pointer;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.4s var(--ease-out);
}
body .tb-podglad__zamknij:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: rotate(90deg);
}
body .tb-podglad__zamknij .icon {
  width: 18px;
  height: 18px;
}
body {
  /* ── dokument ─────────────────────────────────────────── */
}
body .tb-podglad__dok {
  position: relative;
  overflow: hidden;
  background: var(--wp--preset--color--ink-2);
}
body .tb-podglad__dok > object,
body .tb-podglad__dok > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
body {
  /* ── wczytywanie ──────────────────────────────────────── */
  /* Katalogi ważą od 7 do 35 MB, więc bez tej warstwy panel stoi pusty
     przez kilka sekund i wygląda na zepsuty. Zdejmuje ją `load` ramki. */
}
body .tb-podglad__ladowanie {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-md);
  padding: var(--space-xl);
  text-align: center;
  background: var(--wp--preset--color--ink-2);
}
body .tb-podglad__ladowanie[hidden] {
  display: none;
}
body .tb-podglad__ladowanie b {
  font-family: var(--ffont);
  font-weight: 700;
  color: var(--wp--preset--color--paper);
}
body .tb-podglad__ladowanie p {
  margin: 0;
  max-width: 40ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--wp--preset--color--text-on-dark);
}
body {
  /* Pasek postępu pobierania. NIE `__pasek` - tak nazywa się pasek tytułu
     modalu i te reguły zgniatały go do 3 px wysokości. `scaleX` zamiast
     szerokości: transform nie przelicza układu. */
}
body .tb-podglad__postep {
  position: relative;
  width: min(280px, 60vw);
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--line-d-2);
}
body .tb-podglad__postep[hidden] {
  display: none;
}
body .tb-podglad__postep i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--grad-brand);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.2s linear;
}
body .tb-podglad__spinner {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  border: 3px solid var(--line-d-2);
  border-top-color: var(--wp--preset--color--accent-on-dark);
  animation: tb-podglad-obrot 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  body {
    /* Pasek postępu pobierania. NIE `__pasek` - tak nazywa się pasek tytułu
    modalu i te reguły zgniatały go do 3 px wysokości. `scaleX` zamiast
    szerokości: transform nie przelicza układu. */
  }
  body .tb-podglad__postep {
    position: relative;
    width: min(280px, 60vw);
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--line-d-2);
  }
  body .tb-podglad__postep[hidden] {
    display: none;
  }
  body .tb-podglad__postep i {
    position: absolute;
    inset: 0;
    border-radius: 3px;
    background: var(--grad-brand);
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.2s linear;
  }
  body .tb-podglad__spinner {
    animation-duration: 2.4s;
  }
}
body {
  /* ── katalog bez pliku ────────────────────────────────── */
}
body .tb-podglad__brak {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-md);
  height: 100%;
  padding: var(--space-xl);
  text-align: center;
  color: var(--wp--preset--color--text-on-dark-soft);
}
body .tb-podglad__brak-ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
}
body .tb-podglad__brak-ico .icon {
  width: 30px;
  height: 30px;
}
body .tb-podglad__brak b {
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 18px;
  color: var(--wp--preset--color--paper);
}
body .tb-podglad__brak p {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
}
body .tb-podglad__brak-cta {
  padding: 10px var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--grad-brand);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 14px;
  color: var(--wp--preset--color--paper);
  box-shadow: var(--shadow-glow);
}
@media only screen and (max-width: 620px) {
  body .tb-podglad__panel {
    height: 92vh;
  }
  body .tb-podglad__pobierz {
    display: none;
  }
}

@keyframes tb-podglad-obrot {
  to {
    transform: rotate(1turn);
  }
}
/* ── płótno i stopka podglądu ──────────────────────────────── */
/* Dokument rysuje pdf.js na <canvas>, nie wyświetla go wbudowana przeglądarka
   PDF-a - patrz komentarz w moduly/zapytanie/assets/podglad.js. Stopka niesie nawigację
   po stronach i JEDEN przycisk zapisu do listy zapytania. */
body .tb-podglad__plotno {
  display: block;
  margin: auto;
  border-radius: var(--radius-xs);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.85);
}
body .tb-podglad__dok {
  overflow: auto;
}
body .tb-podglad__stopka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--line-d-2);
  background: var(--wp--preset--color--ink-2);
  color: var(--wp--preset--color--paper);
}
@media only screen and (max-width: 719px) {
  body .tb-podglad__stopka {
    flex-wrap: wrap;
    justify-content: center;
  }
}
body .tb-podglad__stopka[hidden] {
  display: none;
}
body .tb-podglad__nawi,
body .tb-podglad__zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
body .tb-podglad__strzalka {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line-d-2);
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), opacity var(--transition-fast);
}
body .tb-podglad__strzalka:hover:not(:disabled) {
  border-color: var(--wp--preset--color--azure);
}
body .tb-podglad__strzalka:disabled {
  opacity: 0.3;
  cursor: default;
}
body .tb-podglad__strzalka svg.icon {
  width: 16px;
  height: 16px;
}
body .tb-podglad__strzalka--wstecz svg.icon {
  transform: rotate(180deg);
}
body .tb-podglad__licznik {
  min-width: 76px;
  text-align: center;
}
body .tb-podglad__licznik b {
  color: var(--wp--preset--color--paper);
}
body .tb-podglad__zoom {
  font-family: var(--ffont);
  font-size: 13px;
  color: var(--wp--preset--color--text-on-dark);
}
body .tb-podglad__zoom button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-d-2);
  border-radius: var(--radius-sm);
  background: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
body .tb-podglad__zoom button:hover {
  border-color: var(--wp--preset--color--azure);
}
body .tb-podglad__zoom span {
  min-width: 46px;
  text-align: center;
}
@media only screen and (max-width: 719px) {
  body .tb-podglad__zoom {
    display: none;
  }
}
body {
  /* Przycisk zapisu - sedno warstwy, więc gradient marki jak `typ-1`. */
}
body .tb-podglad__zapisz {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 46px;
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition);
}
body .tb-podglad__zapisz:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
body .tb-podglad__zapisz svg.icon {
  width: 16px;
  height: 16px;
}

/* ── pasek zapisanych stron ────────────────────────────────── */
/* Odpowiada na pytanie „co ja już zaznaczyłem", gdy klient wraca do katalogu
   następnego dnia. Bez niego zapisywał tę samą stronę drugi raz. */
body .tb-podglad__zapisane[hidden] {
  display: none;
}
body .tb-podglad__zapisane {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-top: 1px solid var(--line-d-2);
  background: var(--wp--preset--color--ink-1);
  color: var(--wp--preset--color--paper);
}
body .tb-podglad__zapisane-etykieta {
  flex: none;
}
@media only screen and (max-width: 719px) {
  body .tb-podglad__zapisane-etykieta {
    display: none;
  }
}
body .tb-podglad__zapisane-lista {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scrollbar-width: none;
}
body .tb-podglad__zapisane-lista::-webkit-scrollbar {
  display: none;
}
body .tb-podglad__chip {
  flex: none;
  min-width: 32px;
  height: 28px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--line-d-2);
  border-radius: var(--radius-full);
  background: none;
  color: var(--wp--preset--color--text-on-dark);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
body .tb-podglad__chip:hover {
  border-color: var(--wp--preset--color--azure);
  color: var(--wp--preset--color--paper);
}
body .tb-podglad__chip.is-tu {
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
}
body {
  /* Stan „zapisana": przycisk jest przełącznikiem, więc musi wyglądać
     inaczej, gdy kliknięcie ZDEJMIE stronę z listy. Zieleń zamiast
     gradientu marki, bo gradient znaczy „zrób to", a tu jest już zrobione. */
}
body .tb-podglad__zapisz.is-zapisana {
  background: #2fbf71;
}
body .tb-podglad__zapisz.is-zapisana:hover {
  background: #e5484d;
  box-shadow: none;
  transform: none;
}

/* ============================================================
   SCHOWEK ZAPYTANIA - pigułka z licznikiem i panel z listą.

   Prymityw globalny, nie styl bloku: warstwa siedzi w stopce każdej strony
   (moduly/zapytanie/schowek.php), bo lista ma być pod ręką także tam, gdzie
   katalogów nie ma - na `/kontakt/` dopiero się jej używa.

   Kształty przepisane z tego, co motyw już ma: pigułka to promień `full`
   i gradient marki jak przycisk `typ-1`, panel to karta jak `single/opinia`
   (obrys hairline, promień `xl`, tło `paper`, cień `lg`).

   Zachowanie: moduly/zapytanie/assets/schowek.js.
   ============================================================ */
body {
  /* `[hidden]` MUSI być tu wypisane. Reguła przeglądarki `[hidden]{display:none}`
     ma specyficzność (0,1,0), a nasze `body .tb-schowek` (0,1,1) - czyli
     własne `display: grid` wygrywa i atrybut przestaje działać. To samo
     dotyczy panelu i wiersza akcji niżej. */
}
body .tb-schowek[hidden],
body .tb-schowek__panel[hidden],
body .tb-schowek__akcje[hidden],
body .tb-schowek__pusto[hidden] {
  display: none;
}
body .tb-schowek {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 60;
  display: grid;
  justify-items: end;
  gap: var(--space-sm);
}
@media only screen and (max-width: 619px) {
  body .tb-schowek {
    right: var(--space-md);
    bottom: var(--space-md);
    left: var(--space-md);
    justify-items: stretch;
  }
}
body {
  /* ── pigułka ──────────────────────────────────────────── */
}
body .tb-schowek__pigulka {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 52px;
  padding-inline: var(--space-lg);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--grad-brand);
  box-shadow: var(--shadow-lg);
  color: var(--wp--preset--color--paper);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition), visibility var(--transition);
}
body .tb-schowek__pigulka:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
body .tb-schowek__pigulka svg.icon {
  width: 18px;
  height: 18px;
}
@media only screen and (max-width: 619px) {
  body .tb-schowek__pigulka {
    justify-content: center;
  }
}
body {
  /* Pigułka schodzi z drogi, gdy formularz jest już na ekranie: jej jedyne
     zadanie to przewinąć do niego, a zasłaniała przycisk „Dalej".
     `visibility`, nie `display`, żeby zejście było płynne. */
}
body .tb-schowek__pigulka.is-zbedna {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
}
body .tb-schowek__licznik {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding-inline: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  letter-spacing: 0;
}
body {
  /* ── panel ────────────────────────────────────────────── */
}
body .tb-schowek__panel {
  display: grid;
  gap: var(--space-md);
  width: min(94vw, 380px);
  max-height: min(70vh, 560px);
  padding: var(--space-lg);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-xl);
  background: var(--wp--preset--color--paper);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
}
@media only screen and (max-width: 619px) {
  body .tb-schowek__panel {
    width: auto;
  }
}
body .tb-schowek__pasek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
body .tb-schowek__zamknij {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-l);
  border-radius: var(--radius-full);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
body .tb-schowek__zamknij:hover {
  border-color: var(--wp--preset--color--iris);
  color: var(--wp--preset--color--iris);
}
body .tb-schowek__zamknij svg.icon {
  width: 16px;
  height: 16px;
}
body {
  /* ── lista ────────────────────────────────────────────── */
  /* `list-style: none` i zerowanie wcięcia, bo globalne `ul` w theme-style
     dokłada kropki i padding - tu wiersze mają własną siatkę. */
}
body .tb-schowek__lista {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
body .tb-schowek__poz {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-md);
}
body {
  /* Miniatura strony - to ona robi robotę. Sam napis „strona 14" nic nie
     mówi po tygodniu; obrazek przypomina, o który produkt chodziło. */
}
body .tb-schowek__poz-mini {
  flex: none;
  width: 58px;
  height: auto;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line-l);
}
body .tb-schowek__poz-tresc {
  display: grid;
  gap: 2px;
  min-width: 0;
}
body .tb-schowek__poz-skad {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body .tb-schowek__poz-usun {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper-2);
  color: var(--wp--preset--color--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
body .tb-schowek__poz-usun:hover {
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--paper);
}
body .tb-schowek__pusto {
  margin: 0;
}
body .tb-schowek__akcje {
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
}
body {
  /* Przycisk „Wstaw" ma wypełnić panel - to główna akcja tej warstwy. */
}
body .tb-schowek__akcje .wp-block-buttons,
body .tb-schowek__akcje .wp-block-button,
body .tb-schowek__akcje .wp-block-button__link {
  width: 100%;
}
body .tb-schowek__wyczysc {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}
body .tb-schowek__wyczysc:hover {
  color: var(--wp--preset--color--plum);
}

/* ============================================================
   LISTA ZAPISANYCH STRON - panel w karcie formularza.

   Siedzi nad polami, w tej samej białej karcie. Nie jest osobnym pudełkiem
   z własnym cieniem - byłby wtedy kartą w karcie. Oddziela go od formularza
   sama kreska, tak jak stopkę w karcie opinii.
   ============================================================ */
body .tb-zlista__pusto[hidden],
body .tb-zlista__wyczysc[hidden] {
  display: none;
}
body .tb-zlista {
  display: grid;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line-l);
}
body .tb-zlista__pasek {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
body .tb-zlista__wyczysc {
  padding: 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--text-soft);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transition-fast);
}
body .tb-zlista__wyczysc:hover {
  color: var(--wp--preset--color--plum);
}
body .tb-zlista__pusto {
  margin: 0;
  color: var(--wp--preset--color--text-muted);
  font-size: 14px;
  line-height: 22px;
}
body {
  /* Wiersze poziomo, nie w kolumnie: przy sześciu zapisanych stronach lista
     w pionie zepchnęłaby formularz pod krawędź ekranu. */
}
body .tb-zlista__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}
body .tb-zlista__poz {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-sm) 6px 6px;
  border: 1px solid var(--line-l);
  border-radius: var(--radius-md);
  background: var(--wp--preset--color--paper);
}
body {
  /* Miniatura robi tu robotę: „strona 14" po tygodniu nic nie mówi,
     obrazek przypomina, o który produkt chodziło. */
}
body .tb-zlista__mini {
  flex: none;
  width: 34px;
  height: auto;
  border-radius: var(--radius-xs);
}
body .tb-zlista__tresc {
  display: grid;
  line-height: 1.25;
}
body .tb-zlista__tresc b {
  font-size: 13px;
}
body .tb-zlista__skad {
  color: var(--wp--preset--color--text-soft);
  font-size: 11px;
}
body .tb-zlista__usun {
  flex: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper-2);
  color: var(--wp--preset--color--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
body .tb-zlista__usun:hover {
  background: var(--wp--preset--color--plum);
  color: var(--wp--preset--color--paper);
}
body {
  /* Przewinięcie z pigułki kończy się o ekran niżej - trzeba powiedzieć,
     PO CO się tu przyjechało. Jedno mrugnięcie obrysem, nie animacja
     przyciągająca uwagę na stałe. */
}
body .tb-zlista.is-wskazany {
  animation: tb-zlista-mrugnij 1.6s var(--ease-out);
}
@keyframes tb-zlista-mrugnij {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(74, 99, 196, 0);
  }
  18% {
    box-shadow: 0 0 0 6px rgba(74, 99, 196, 0.18);
  }
  60% {
    box-shadow: 0 0 0 6px rgba(74, 99, 196, 0.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  body .tb-zlista.is-wskazany {
    animation: none;
  }
}

/* ── kroki formularza ──────────────────────────────────────── */
/* Formularz na jednym ekranie ma dziewięć pól i odbija ludzi samą długością.
   Kroki to grupy pól tego samego formularza CF7, przełączane w JS. */
body .tb-zform [data-krok][hidden],
body .tb-zform [data-zform-krok][hidden],
body .tb-zform .tb-form__stopka[hidden],
body .tb-zform__wstecz[hidden],
body .tb-zform__dalej[hidden] {
  display: none;
}
body .tb-zform__kroki {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}
body .tb-zform__krok {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-top: var(--space-sm);
  border-top: 2px solid var(--line-l);
  text-align: center;
  transition: border-color var(--transition);
}
body .tb-zform__krok.is-aktywny,
body .tb-zform__krok.is-zrobiony {
  border-top-color: var(--wp--preset--color--indigo);
}
body .tb-zform__krok.is-zrobiony {
  cursor: pointer;
}
body .tb-zform__nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--wp--preset--color--paper-2);
  color: var(--wp--preset--color--text-soft);
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 12px;
  transition: background-color var(--transition), color var(--transition);
}
body .tb-zform__krok.is-aktywny .tb-zform__nr,
body .tb-zform__krok.is-zrobiony .tb-zform__nr {
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
}
body .tb-zform__nazwa {
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--text-soft);
}
body .tb-zform__krok.is-aktywny .tb-zform__nazwa {
  color: var(--wp--preset--color--text);
}
body {
  /* ── nawigacja ────────────────────────────────────────── */
}
body .tb-zform__nawi {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
body .tb-zform__dalej {
  margin-left: auto;
}
body .tb-zform__wstecz,
body .tb-zform__dalej {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 48px;
  padding-inline: var(--space-lg);
  border: 1px solid var(--line-l);
  border-radius: var(--radius-md);
  background: none;
  color: inherit;
  font-family: var(--ffont);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition-fast), transform var(--transition);
}
body .tb-zform__wstecz svg.icon,
body .tb-zform__dalej svg.icon {
  width: 16px;
  height: 16px;
}
body .tb-zform__wstecz svg.icon {
  transform: rotate(180deg);
}
body .tb-zform__wstecz:hover {
  border-color: var(--wp--preset--color--iris);
}
body .tb-zform__dalej {
  border-color: transparent;
  background: var(--grad-brand);
  color: var(--wp--preset--color--paper);
}
body .tb-zform__dalej:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
body .tb-zform .tb-form__stopka {
  margin-top: var(--space-lg);
}
@media only screen and (max-width: 560px) {
  body .tb-zform__nazwa {
    display: none;
  }
}

/* ============================================================
   SAMOUCZEK - dymek przyklejony do przycisku zapisu.

   W kolorach panelu podglądu (`ink-3`), nie białą kartą: ma wyglądać jak
   część narzędzia, a nie jak okno, które przyszło z zewnątrz. Ogonek celuje
   w przycisk; jego pozycję ustawia JS zmienną `--ogonek`.

   `position: fixed`, bo panel podglądu ma `overflow: hidden` i dymek
   z ogonkiem zostałby przy krawędzi przycięty.
   ============================================================ */
body .tb-samouczek[hidden] {
  display: none;
}
body .tb-samouczek {
  --ogonek: 50%;
  position: fixed;
  z-index: 260;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  width: min(360px, 100vw - 24px);
  padding: var(--space-md);
  border: 1px solid var(--line-d-2);
  border-radius: var(--radius-md);
  background: var(--wp--preset--color--ink-3);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.75);
  color: var(--wp--preset--color--paper);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out);
}
body .tb-samouczek.is-otwarty {
  opacity: 1;
  transform: none;
}
body {
  /* Ogonek: obrócony kwadrat z tym samym tłem i obrysem co dymek.
     Dwa boki obrysu, nie cztery - reszta chowa się pod dymkiem. */
}
body .tb-samouczek::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: var(--ogonek);
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-right: 1px solid var(--line-d-2);
  border-bottom: 1px solid var(--line-d-2);
  background: var(--wp--preset--color--ink-3);
  transform: rotate(45deg);
}
body .tb-samouczek__tekst {
  margin: 0;
  font-size: 14px;
  line-height: 21px;
  color: var(--wp--preset--color--text-on-dark);
}
body .tb-samouczek__ok {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: -2px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: none;
  color: var(--wp--preset--color--text-on-dark-soft);
  cursor: pointer;
  transition: color var(--transition-fast);
}
body .tb-samouczek__ok:hover {
  color: var(--wp--preset--color--paper);
}
body .tb-samouczek__ok svg.icon {
  width: 13px;
  height: 13px;
}