/* Dodatki po naszej stronie do arkusza pracowni graficznej.

   `wersja-e.css` przychodzi z paczki i ma zostać nietknięty, żeby każda
   następna paczka podmieniała go w całości zamiast wymagać scalania. Wszystko,
   czego projekt nie przewidział, a czego wymaga działająca strona, stoi tutaj.

   Kolory biorą się ze zmiennych z tamtego arkusza — nie z własnych wartości,
   bo te rozjechałyby się przy pierwszej korekcie palety. */

/* Pułapka na roboty. Ma być poza ekranem, a nie schowana `display:none` —
   część botów pomija pola niewidoczne w ten sposób i wtedy pułapka nie łapie
   nikogo. Czytnik ekranu pomija ją przez `aria-hidden` w znaczniku. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Edytor tekstu w panelu zapisuje pozycję listy jako `<li><p>…</p></li>`.
   Akapit w pozycji ma wyglądać jak sama pozycja — bez własnego odstępu
   i bez rozmiaru pisma akapitu treści. */
.dok__body li > p {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

/* Liczba stron dokumentacji w etapie procesu. W projekcie nosi klasę `.ile`,
   ale edytor tekstu w panelu zapisuje samo pogrubienie, bez klas — więc ten
   sam wygląd dostaje każde pogrubienie w tabliczce etapu. */
.plaque p strong {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  color: var(--snow);
}

/* Baner zgody na cookies. Panel w lewym dolnym rogu, w gorzkiej czekoladzie
   jak ciemne pasma; przyciski biorą wygląd z arkusza projektu (kontekst
   `.dark`). Pod preloaderem (90), nad nagłówkiem (50) i menu (45). */
.cookies {
  position: fixed;
  left: clamp(12px, 2vw, 28px);
  bottom: clamp(12px, 2vw, 28px);
  z-index: 80;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  overflow-y: auto;
  background: var(--night);
  color: var(--snow);
  box-shadow: 0 0 0 1px var(--hair), 0 24px 60px -20px rgba(0, 0, 0, .55);
}
.cookies[hidden] { display: none; }
.cookies__in { display: grid; gap: 14px; padding: clamp(20px, 3vw, 30px); }
.cookies h2 { font-size: clamp(22px, 2vw, 28px); }
.cookies p { font-size: 14px; line-height: 1.55; color: var(--snow-2); max-width: none; }
.cookies p a { color: var(--snow); border-bottom: 1px solid var(--brass-2); }
.cookies__ustawienia { display: grid; gap: 12px; padding: 14px 0 4px; border-top: 1px solid var(--hair); }
.cookies__ustawienia[hidden] { display: none; }
.cookies__opcja { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 13.5px; line-height: 1.5; color: var(--snow-2); cursor: pointer; }
.cookies__opcja input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brass-light); }
.cookies__opcja b { display: block; font-weight: 500; color: var(--snow); }
.cookies__akcje { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }
.cookies__akcje .btn { height: 46px; padding: 0 18px; font-size: 11.5px; letter-spacing: .14em; }
.cookies__akcje .btn[hidden] { display: none; }
@media (max-width: 640px) {
  .cookies { left: 0; right: 0; bottom: 0; width: 100%; }
  .cookies__akcje { display: grid; }
  .cookies__akcje .btn { justify-content: center; }
}
/* Odnośnik w stopce wygląda jak pozostałe pozycje kolumny. */
.footer__col button { font: inherit; color: inherit; text-align: left; line-height: 1.38; padding: 0; }
.footer__col button:hover { color: var(--brass); }

/* Sekcja budżetu na stronie oferty. Treść z listami redaguje się w panelu,
   a edytor nie przechowuje klas, więc wygląd list bierzemy z ich miejsca
   w układzie, nie z klasy `.list` z paczki. */
.budzet-pelny__tekst ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.budzet-pelny__tekst ul li { position: relative; display: block; padding-left: 26px; font-size: 15px; line-height: 1.55; }
.budzet-pelny__tekst ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); }
.budzet-pelny__tekst ul li > p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }

/* Nagłówek sekcji procesu na telefonie (błąd arkusza paczki v30).
   Na szerokim ekranie tytuł stoi po lewej, a dwa akapity wstępu po prawej,
   każdy przypięty do swojego wiersza siatki. Reguła zwijająca sekcję do
   jednej kolumny uwalnia tytuł i akapity, ale ma niższą wagę niż przypięcie
   akapitów, więc zostawały one w wierszach 2 i 3, a tytuł z wolnym wierszem
   spadał pod nie. Do v26 wstęp miał jeden akapit i nie było tego widać. */
@media (max-width: 899px) {
  .process__head p:first-of-type,
  .process__head p:nth-of-type(2) { grid-row: auto; }
}

/* Formularz zamówienia (strona /zamowienie). Paczka nie ma tej strony; układ
   bierzemy z jej widoku zamówienia w koncie, a tu tylko to, czego tam nie ma. */
.zamowienie__form { display: grid; gap: 56px; }
.zamowienie__kto { display: flex; flex-wrap: wrap; gap: 14px 32px; margin: 0; padding: 0; border: 0; }
.zamowienie__osoba { display: grid; }
.zamowienie__nip { display: flex; gap: 14px; align-items: center; }
.zamowienie__nip input { flex: 1 1 auto; min-width: 0; }
.zamowienie__nip .act { flex: none; white-space: nowrap; }
.zamowienie__zgody { display: grid; gap: 16px; }
.zamowienie__plik { display: grid; gap: 12px; margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.zamowienie__plik legend { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink); }
.zamowienie__plik.is-error legend { color: var(--brass-ink); }
.zamowienie__dopisek { display: block; margin-top: 4px; font-size: 12.5px; opacity: .85; }
.zamowienie .btn[disabled] { opacity: .45; cursor: not-allowed; }
/* Podsumowanie w wąskiej kolumnie bocznej: okładka, nazwa, kwota — bez
   kolumny ilości, która jest tu w podpisie pod nazwą. */
.zamowienie .konto__aside .row--poz { grid-template-columns: 56px minmax(0, 1fr) auto; }

/* Osoba prywatna / firma bez skryptu. Bez `:has` (starsze przeglądarki)
   widać wszystkie pola, a o tym, co trafia do zamówienia, decyduje serwer. */
@supports selector(:has(*)) {
  .zamowienie__firma, .zamowienie__adres { display: none; }
  .zamowienie:has(#z-firma:checked) .zamowienie__firma { display: grid; }
  .zamowienie:has(#z-firma:checked) .zamowienie__osoba { display: none; }
  .zamowienie:has(#z-firma:checked) .zamowienie__adres,
  .zamowienie:has(#z-osoba:checked):has(#z-faktura:checked) .zamowienie__adres { display: grid; }
}

/* Przycisk zakupu na kartach w /sklep (zmiana po paczce, 2026-10-01): ten sam
   napis co na stronie produktu, obok „Szczegóły”. Na wąskiej karcie akcje
   schodzą pod cenę, żeby nic się nie ściskało. */
.product__foot { flex-wrap: wrap; row-gap: 14px; }
.product__akcje { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 20px; margin-left: auto; }
@media (max-width: 599px) {
  /* Na telefonie akcje zawsze w osobnym rzędzie pod ceną — inaczej przy
     dłuższej cenie spadały, a przy krótszej nie, i karty wyglądały różnie. */
  .product__akcje { flex-basis: 100%; justify-content: space-between; margin-left: 0; }
}

/* Kod rabatowy pod suma — w koszyku i w zamowieniu. */
.kod-rabatowy { display: grid; gap: 8px; justify-self: end; width: min(100%, 380px); margin: 14px 0 0 auto; }
.kod-rabatowy__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.kod-rabatowy__form input { text-transform: uppercase; letter-spacing: .06em; }
.kod-rabatowy__jest { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; font-size: 13.5px; color: var(--ink-2); }
.kod-rabatowy__jest .act { background: none; border: 0; border-bottom: 1px solid var(--brass-2); padding: 0 0 6px; color: var(--ink); cursor: pointer; }
.kod-rabatowy__uwaga { margin: 0; font-size: 13px; color: var(--brass-ink); }