/* System wizualny sklepu /gift.
   Referencja: **print.gg** - sklep macierzysty (polecenie Arta 9.08 08:33,
   wytyczne w `SPEC_WYGLAD_SCALENIE.md`). Wczesniej apple.com; zmiana bierze
   sie stad, ze od scalenia koszyka klient przechodzi z `/gift` na `/koszyk/`
   sklepu w polowie sciezki zakupowej i widzial dwie rozne witryny.

   Zasady, ktore trzymaja ten plik razem:
   - Kontrast KAZDEGO koloru tekstu zmierzony wobec OBU tel (bialego i szarego
     `--tlo-2`), nie dobrany na oko. Akcent TEKSTOWY (`--akcent`) i kolor MARKI
     (`--marka`) to dwie rozne role, nie jedna wartosc w dwoch miejscach.
   - Zero animacji odslaniajacych przy przewijaniu. Ukrywanie tresci do czasu
     zadzialania przejscia konczy sie pusta strona wszedzie tam, gdzie
     przejscia nie startuja: w tle karty, w czytniku, w rendererze zrzutow.
*/

:root {
  /* Kolor. Wartosci zmierzone na print.gg 2026-08-09 odczytem
     `getComputedStyle` ze wszystkich elementow strony. */
  --ink: #000000;          /* 21,00 na bialym, 19,09 na --tlo-2. Sklep uzywa
                              czystej czerni - 755 elementow */
  --ink-2: #666666;        /* 5,74 / 5,22. Sklep: 249 elementow */
  --tlo: #ffffff;
  --tlo-2: #f4f4f4;        /* tlo sekcji i siatki */
  --linia: #dddddd;
  --linia-slaba: #ebebeb;
  --akcent: #0068cf;       /* TEKST i linki: 5,41 / 4,92 */

  /* ⛔ ZOLC MARKI JEST WYLACZNIE TLEM. Jako kolor tekstu daje na bieli
     1,62:1, czyli jest nieczytelna. Na tle z czarnym napisem - 12,95:1.
     Dlatego `--marka` i `--marka-tekst` wystepuja ZAWSZE w parze.
     ⚠️ Swiadome odstepstwo: sam przycisk odcina sie od bialego tla tylko
     w 1,62:1, ponizej progu 3:1, ktorego WCAG 1.4.11 chce dla granicy
     elementu. Rozpoznaje go czarny napis. print.gg ma dokladnie tak samo
     i wiernosc marce wygrywa tu z norma - ale to jest DECYZJA, nie
     przeoczenie. */
  --marka: #fcc300;
  --marka-hover: #e8b400;  /* czern na niej 10,96 */
  --marka-tekst: #000000;

  --alarm: #b3261e;        /* 6,54 / 5,94 */
  --alarm-tlo: #fdf1f0;
  --ok: #1d7d3f;           /* 5,18 / 4,71 */
  --ok-tlo: #eef7f0;

  /* Wymiary */
  --kontener: 1120px;
  --waski: 700px;
  --r-kafel: 12px;         /* sklep jest mniej zaokraglony niz apple.com */
  --r-pole: 8px;
  --r-pigulka: 50px;       /* wartosc print.gg; efekt ten sam co 980px */
  --nag-wys: 90px;         /* wysokosc naglowka print.gg (zmierzona) */

  /* Ruch. Krzywa wyhamowujaca, bez odbicia. */
  --ruch: 400ms cubic-bezier(0.32, 0.72, 0, 1);
  --ruch-szybko: 200ms cubic-bezier(0.32, 0.72, 0, 1);

  /* Warstwy - skala nazwana, zeby nie konczyc na 9999 */
  --z-tresc: 1;
  --z-lepki: 100;
  --z-naglowek: 200;
  --z-modal: 300;
}

/* Epilogue - font sklepu macierzystego print.gg (1618 elementow jego strony
   uzywa tego kroju). HOSTOWANY U NAS, nie z Google Fonts: `/gift` ma decyzje
   „biblioteki nigdy z CDN" po incydencie skimmera kart, ta sama droga co
   pdf.js i konva. Zrodlo, licencja (SIL OFL 1.1) i md5 w `fonty/WERSJA.txt`.

   ⛔ Font ZMIENNY - jeden plik obsluguje cala os wagi 100-900, stad
   `font-weight: 100 900` zamiast czterech blokow po jednej wadze. Cztery
   osobne bloki pobralyby ten sam plik cztery razy.
   ⛔ `unicode-range` jest tu po to, zeby przegladarka pobrala TYLKO potrzebny
   podzbior. Bez niego kazdy klient sciaga oba pliki (67 kB) zamiast jednego.
   Polskie znaki (ą, ć, ę, ł, ń, ó, ś, ź, ż) leza w `latin-ext`. */
@font-face {
  font-family: Epilogue;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonty/epilogue-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: Epilogue;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonty/epilogue-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;
}

*, *::before, *::after { box-sizing: border-box; }

/* MINA CSS: atrybut `hidden` to tylko domyslne `display: none` przegladarki -
   KAZDA wlasna regula `display` go nadpisuje. `.formularz { display: grid }`
   pokazywalo formularz kontaktu mimo `hidden`, a `element.hidden` w JS nadal
   zwracalo `true`. Odczyt DOM potwierdzalby ukrycie; zlapal to dopiero ZRZUT. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--ink);
  /* Zapasowe kroje zostaja: `font-display: swap` pokazuje tekst nimi, zanim
     dojdzie Epilogue, a przy niepowodzeniu pobrania strona dalej sie czyta. */
  font: 400 17px/1.47 Epilogue, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--akcent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* Widoczny focus dla klawiatury - nie kasujemy obrysu, tylko go porzadkujemy. */
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; border-radius: 4px; }

/* Etykieta dla czytnika ekranu. Nie `display: none` ani `visibility: hidden` -
   tamte usuwaja element takze z drzewa dostepnosci, czyli kasuja to, po co
   etykieta istnieje. */
.wizualnie-ukryte {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.kontener { max-width: var(--kontener); margin: 0 auto; padding: 0 22px; }

/* ---------------------------------------------------------------- naglowek */
/* Przezroczystosc z rozmyciem jest tu odwzorowaniem referencji, a nie ozdoba:
   pasek ma zostac czytelny nad przewijana siatka zdjec. Stosowana WYLACZNIE
   tutaj; kafle i panele sa kryjace. */
.naglowek {
  position: sticky; top: 0; z-index: var(--z-naglowek);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--linia-slaba);
}
@supports not (backdrop-filter: blur(1px)) {
  .naglowek { background: #fff; }
}
.naglowek-tresc {
  max-width: var(--kontener); margin: 0 auto; padding: 0 22px;
  min-height: var(--nag-wys);
  display: flex; align-items: center; gap: 18px;
}
/* Logo sklepu macierzystego. Zolta kropka to jedyny akcent marki w naglowku
   POZA przyciskiem - zgodnie z zasada, ze zolc jest tlem, nie tekstem:
   kropka jest KSZTALTEM w kolorze marki, nie napisem. */
.logo {
  font-size: 21px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 1px;
}
.logo:hover { text-decoration: none; }
.logo-kropka { color: var(--marka); font-size: 26px; line-height: 0; }

/* Menu sklepu. `.teraz` oznacza sekcje, w ktorej klient JEST - pogrubieniem,
   nie kolorem, bo kolor marki na tekscie ma 1,62:1. */
.menu-sklepu { display: flex; align-items: center; gap: 22px; margin-left: 8px; }
.menu-sklepu a { font-size: 15px; color: var(--ink); white-space: nowrap; }
.menu-sklepu a:hover { color: var(--akcent); text-decoration: none; }
.menu-sklepu .teraz { font-weight: 600; }

.naglowek-akcje { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* „Zaloguj sie" - pigulka w kolorze marki, jak w sklepie. Czarny napis,
   bo biel na zolci ma 1,62:1. */
.konto {
  padding: 9px 20px; font-size: 14px; font-weight: 500;
  color: var(--marka-tekst); background: var(--marka);
  border-radius: var(--r-pigulka); white-space: nowrap;
  transition: background var(--ruch-szybko);
}
.konto:hover { background: var(--marka-hover); color: var(--marka-tekst);
  text-decoration: none; }

/* Koszyk z licznikiem. Licznik jest UKRYTY przy pustym koszyku - „0" na
   plakietce to szum, a nie informacja. */
.koszyk { position: relative; display: inline-flex; color: var(--ink);
  padding: 4px; }
.koszyk:hover { color: var(--akcent); text-decoration: none; }
.koszyk .licznik {
  position: absolute; top: -3px; right: -5px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: var(--r-pigulka);
  background: var(--marka); color: var(--marka-tekst);
  font-size: 11px; font-weight: 600; line-height: 17px; text-align: center;
}

/* Szukajka w ksztalcie pola Apple: pigulka na szarym, bez obwodki. */
.szukajka { position: relative; flex: 1; max-width: 420px; }
.szukajka input {
  width: 100%; padding: 8px 14px 8px 36px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: var(--tlo-2); border: 1px solid transparent;
  border-radius: var(--r-pigulka);
  transition: background var(--ruch-szybko), border-color var(--ruch-szybko);
}
.szukajka input::placeholder { color: #6e6e73; }   /* 4,66 na --tlo-2 */
.szukajka input:focus { background: #fff; border-color: var(--linia); outline: none; }
.szukajka input:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.szukajka::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%); pointer-events: none; opacity: .5;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------- hero */
.hero { text-align: center; padding: 56px 22px 40px; }
.hero h1 {
  margin: 0 0 10px;
  font-size: clamp(2.1rem, 5.2vw, 3.4rem);   /* 34-54 px, sufit daleko od krzyku */
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.028em;                   /* powyzej podlogi -0.04em */
  text-wrap: balance;
}
.hero p {
  margin: 0 auto; max-width: 46ch;   /* wezsze lamalo zdanie w pol slowa */
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  color: var(--ink-2); line-height: 1.35; text-wrap: balance;
}
.hero .linki { margin-top: 18px; display: flex; gap: 26px; justify-content: center;
  flex-wrap: wrap; font-size: 17px; }
.strzalka::after { content: " \203A"; }

/* -------------------------------------------------------------- kategorie */
.kategorie-pas { position: sticky; top: var(--nag-wys); z-index: var(--z-lepki);
  background: var(--tlo); border-bottom: 1px solid var(--linia-slaba); }
/* Zanikanie przy prawej krawedzi mowi, ze pasek jedzie dalej. Bez tego
   ucieta w polowie nazwa kategorii wyglada jak blad ukladu. */
.kategorie-pas::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1px; width: 46px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 78%);
}
.kategorie {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  max-width: var(--kontener); margin: 0 auto; padding: 11px 22px;
  scroll-snap-type: x proximity;
}
.kategorie::-webkit-scrollbar { display: none; }
.kategorie button, .kategorie a {
  /* Pigulki sa teraz ODNOSNIKAMI (patrz katalog.js) - te same reguly musza
     obowiazywac oba znaczniki, inaczej pasek rozjezdza sie po jednej zmianie. */
  display: inline-block; text-decoration: none;
  white-space: nowrap; scroll-snap-align: start;
  padding: 7px 15px; font-size: 14px; font-family: inherit; color: var(--ink);
  background: var(--tlo-2); border: 0; border-radius: var(--r-pigulka);
  cursor: pointer; transition: background var(--ruch-szybko), color var(--ruch-szybko);
}
.kategorie button:hover, .kategorie a:hover { background: #ebebef; }
.kategorie button[aria-pressed="true"], .kategorie a[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* Drugi poziom - kategorie WYBRANEJ grupy. Lzejszy wizualnie od paska grup,
   zeby bylo widac, ktory jest nadrzedny: mniejsze pigulki na szarym tle. */
.kategorie-pas--drugi { background: var(--tlo-2); border-bottom-color: var(--linia); }
.kategorie-pas--drugi .kategorie { padding-block: 8px; }
.kategorie-pas--drugi .kategorie button, .kategorie-pas--drugi .kategorie a { font-size: 13px; padding: 6px 13px;
  background: var(--tlo); }
.kategorie-pas--drugi .kategorie button:hover, .kategorie-pas--drugi .kategorie a:hover { background: #ebebeb; }
.kategorie-pas--drugi .kategorie button[aria-pressed="true"], .kategorie-pas--drugi .kategorie a[aria-pressed="true"] {
  background: var(--ink); color: #fff; }
/* ⛔ Gradient krawedzi dziedziczy sie z `.kategorie-pas`, ale tam jest bialy.
   Na szarym tle drugiego paska bialy gradient rysuje jasna plame. */
.kategorie-pas--drugi::after {
  background: linear-gradient(to right, rgba(244,244,244,0), var(--tlo-2) 78%);
}

.kategorie-pas--trzeci {
  background: var(--tlo); border-bottom-color: var(--linia-slaba);
}
/* Trzeci poziom jest jeszcze lzejszy od drugiego: obrys zamiast wypelnienia.
   Trzy rzedy pelnych pigulek jeden pod drugim czytaja sie jak jeden blok
   i przestaje byc widac, ktory poziom jest ktory. */
.kategorie-pas--trzeci .kategorie { padding-block: 7px; }
.kategorie-pas--trzeci .kategorie button, .kategorie-pas--trzeci .kategorie a {
  font-size: 12px; padding: 5px 12px; background: transparent;
  border: 1px solid var(--linia); color: var(--ink-2, var(--ink)); }
.kategorie-pas--trzeci .kategorie button:hover, .kategorie-pas--trzeci .kategorie a:hover { background: var(--tlo-2); }
.kategorie-pas--trzeci .kategorie button[aria-pressed="true"], .kategorie-pas--trzeci .kategorie a[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #fff; }
/* Drugi pasek nie moze byc lepki razem z pierwszym - dwa przyklejone paski
   plus naglowek zabieraja pol ekranu.
   ⛔ Trzeci tak samo, i to nie jest kopia reguly przez nieuwage: pasek
   przyklejony POJEDYNCZO, gdy nadrzedny odjezdza z trescia, czyta sie gorzej
   niz brak przyklejania - zmierzone, trzeci stawal na 188 px nad pustym
   miejscem po drugim. */
.kategorie-pas--drugi,
.kategorie-pas--trzeci { position: relative; top: auto; }

/* ------------------------------------------------------------------ siatka */
.tlo-siatki { background: var(--tlo-2); padding: 30px 0 64px; }
.podsumowanie { color: var(--ink-2); font-size: 14px; margin: 0 0 18px; }
.siatka { display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }

/* Kafel produktu. Siatka kafli jest tu wlasciwa afordancja - kazdy kafel to
   osobny towar, ktory klient porownuje wzrokiem; to nie jest dekoracyjny
   raster "ikona + naglowek". */
.karta {
  display: flex; flex-direction: column;
  background: var(--tlo); border-radius: var(--r-kafel);
  padding: 16px 16px 18px; color: inherit; text-decoration: none;
  transition: box-shadow var(--ruch), transform var(--ruch);
}
.karta:hover { text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .09); transform: translateY(-2px); }
.karta:hover .foto img { transform: scale(1.045); }
.karta h2 {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  margin: 0 0 3px; line-height: 1.3; text-wrap: balance;
}
/* Regula BAZOWA, nie kontekstowa: `.kat` rysuje tez koszyk (`koszyk.js`),
   a zawezenie jej do `.karta`/`.opis` zostawialoby tam goly tekst. */
.kat { color: var(--ink-2); font-size: 13px; }
.karta .cena { margin-top: auto; padding-top: 10px; font-size: 15px; font-weight: 600; }
.karta .cena .od { font-weight: 400; color: var(--ink-2); }
/* ⛔ KOLIZJA NAZW, nie kosmetyka: `.niedostepny` jest jednoczesnie komunikatem
   alarmowym na karcie produktu (czerwony tekst na rozowym tle). Kafel katalogu
   dostawal ten sam styl, wiec towar chwilowo wyprzedany czytal sie jak awaria
   sklepu - czerwona nazwa i rozowe tlo w siatce. Kafel wycisza sie samym
   przygaszeniem zdjecia; komunikat alarmowy zostaje przy `p.niedostepny`. */
.karta.niedostepny { background: var(--tlo); color: var(--ink); }
.karta.niedostepny .foto { opacity: .5; }
.karta.niedostepny h2 { color: var(--ink-2); }
.karta .brak { color: var(--ink-2); font-size: 14px; font-weight: 400; }

/* Ramka zdjecia trzyma proporcje ZAWSZE, takze gdy zdjecia nie ma - inaczej
   kafelki bez zdjecia bylyby nizsze i siatka robilaby sie poszarpana. */
.foto { aspect-ratio: 1; margin-bottom: 14px; border-radius: 10px;
  background: #fff; display: grid; place-items: center; overflow: hidden; }
/* `contain`, nie `cover`: dostawca fotografuje produkt wpisany w kwadrat na
   bialym tle, wiec `cover` obcinalby dlugopisy i parasole przy krawedziach. */
.foto img { width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform var(--ruch); }
.foto.pusta { background: var(--tlo-2); }
.foto .znak { color: var(--ink-2); font-size: 13px; }

/* Probki dostepnych kolorow pod kaflem.
   Rysuje je `katalog.js` tylko przy wiecej niz jednym kolorze - 63 % katalogu
   ma jeden i pasek z pojedyncza kropka bylby szumem. */
.kolory { display: flex; align-items: center; gap: 5px; margin-top: 8px;
  flex-wrap: wrap; }
.probka { width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 1px var(--linia);
  display: grid; place-items: center; flex: 0 0 auto; }
/* ⛔ ZOOM 270 %, nie `cover`. Dostawca fotografuje produkt WPISANY w kwadrat
   na bialym tle, a zdjecie jest kwadratowe - wiec `cover` w kolku 22 px
   pokazuje cale zdjecie, czyli glownie biel. Zoom przycina do srodka kadru,
   gdzie jest towar. Zmierzone na 14 produktach: caly kadr daje probke prawie
   biala w 2 przypadkach, srodek 50 % w ZERO, a srodek 35 % oddaje odcien
   najwierniej (towar „Czarny" wychodzi #343432 zamiast #e6e6e7). */
.probka img { width: 270%; height: 270%; object-fit: contain; display: block; }
.probka.pusta { background: var(--tlo-2); }
/* ⛔ `.reszta`, NIE `.wiecej` - ta druga nazwa nalezy do przycisku paginacji
   pod siatka i nadawala dopiskowi „+8" pigulke 64x41 px w osobnym wierszu. */
.kolory .reszta { font-size: 12px; color: var(--ink-2); margin-left: 2px; }
/* Kafel wyszarza probki razem ze zdjeciem - towar wyprzedany nie ma
   reklamowac palety kolorow mocniej niz samego siebie. */
.karta.niedostepny .kolory { opacity: .5; }

.wiecej { display: block; margin: 34px auto 0; padding: 11px 24px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: var(--tlo); border: 1px solid var(--linia);
  border-radius: var(--r-pigulka); cursor: pointer;
  transition: background var(--ruch-szybko); }
.wiecej:hover { background: #ebebef; }

/* ---------------------------------------------------------- karta produktu */
.produkt { max-width: var(--kontener); margin: 0 auto;
  display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) 372px;
  padding: 34px 22px 72px; align-items: start; }
.produkt > * { min-width: 0; }

.opis h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1.1; margin: 0 0 6px; text-wrap: balance; }
.opis .kat { font-size: 15px; margin: 0 0 22px; }
.opis .tresc { max-width: 62ch; color: var(--ink-2); text-wrap: pretty;
  overflow-wrap: anywhere; }

/* Sufit szerokosci: bez niego zdjecie rozciaga sie na cala kolumne i na
   szerokim ekranie torba na zakupy ma 700 px, czyli wiecej niz cokolwiek
   innego na stronie. */
.foto-produkt { aspect-ratio: 1; width: 100%; max-width: 560px;
  margin: 0 0 28px; background: var(--tlo-2); border-radius: var(--r-kafel);
  display: grid; place-items: center; overflow: hidden; }
.foto-produkt img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ------------------------------------------------------------- konfigurator */
.kalkulator { background: var(--tlo-2); border-radius: var(--r-kafel);
  padding: 22px; display: grid; gap: 16px; position: sticky; top: calc(var(--nag-wys) + 18px); }
.kalkulator label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.kalkulator select, .kalkulator input {
  padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--ink);
  background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--r-pole);
  width: 100%; max-width: 100%; min-width: 0;
  transition: border-color var(--ruch-szybko);
}
.kalkulator select:hover, .kalkulator input:hover { border-color: #b8b8bf; }
.kalkulator fieldset > * { min-width: 0; }
.kalkulator input:disabled { background: #ebebef; color: var(--ink-2); }
.kalkulator fieldset { border: 1px solid var(--linia); border-radius: var(--r-pole);
  padding: 15px; display: grid; gap: 13px; margin: 0; background: var(--tlo); }
.kalkulator legend { font-size: 12px; color: var(--ink-2); padding: 0 5px; }

.wynik { border-top: 1px solid var(--linia); padding-top: 16px; }
.cena-glowna { font-size: 30px; font-weight: 600; letter-spacing: -0.025em; }
.cena-glowna small { font-size: 13px; font-weight: 400; color: var(--ink-2);
  letter-spacing: 0; }
.cena-szt { color: var(--ink-2); font-size: 14px; margin-top: 2px; }
.rozbicie { width: 100%; margin-top: 14px; font-size: 13px; color: var(--ink-2);
  border-collapse: collapse; }
.rozbicie td { padding: 3px 0; }
.rozbicie td:last-child { text-align: right; color: var(--ink); }
.blad { color: var(--alarm); font-size: 14px; margin: 8px 0 0; }
/* Selektor ZAWEZONY do akapitu. Bez tego lapie tez `.karta.niedostepny`
   w siatce katalogu - patrz komentarz przy kaflu wyzej. */
p.niedostepny { margin: 0; padding: 13px 15px; border-radius: var(--r-pole);
  background: var(--alarm-tlo); color: var(--alarm); font-size: 14px; }

/* ----------------------------------------------------------------- kreator */
.kreator { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--linia-slaba); }
.kreator h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.kreator-wstep { color: var(--ink-2); font-size: 15px; margin: 0 0 18px; max-width: 58ch; }
.kreator-pasek { display: flex; gap: 10px; align-items: center; margin-bottom: 16px;
  flex-wrap: wrap; }
.podglad { display: block; width: 100%; max-width: 520px; height: auto;
  background: var(--tlo-2); border-radius: var(--r-kafel);
  cursor: grab; touch-action: none; }
/* `touch-action: none` jest konieczne, nie kosmetyczne: bez tego przeciagniecie
   palcem po plotnie przewija strone zamiast przesuwac logo. */
.podglad.ciagnie { cursor: grabbing; }

.narzedzia-logo { display: flex; align-items: end; gap: 14px; flex-wrap: wrap;
  max-width: 520px; margin-top: 14px; }
.narzedzia-logo .suwak { flex: 1; min-width: 200px; display: grid; gap: 6px;
  font-size: 13px; color: var(--ink-2); }
.narzedzia-logo input[type="range"] { width: 100%; accent-color: var(--ink); }
.narzedzia-logo .przelacznik { display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2); white-space: nowrap; cursor: pointer; }
.narzedzia-logo .przelacznik input { accent-color: var(--ink);
  width: 17px; height: 17px; }
.podglad-info { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; max-width: 520px; }
.podglad-info.uwaga { color: var(--alarm); }

/* --------------------------------------------------------------- przyciski */
/* ⛔ Zolc marki ZAWSZE z czarnym napisem (`--marka-tekst`). Podmiana samego
   tla bez koloru tekstu dalaby biel na zolci, czyli 1,62:1 - nieczytelne.
   Te dwie wartosci nie moga sie rozjechac, stad para tokenow. */
.przycisk, .do-koszyka, .wgraj {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 22px; font-size: 15px; font-family: inherit; font-weight: 500;
  color: var(--marka-tekst); background: var(--marka); border: 0;
  border-radius: var(--r-pigulka); cursor: pointer; text-decoration: none;
  transition: background var(--ruch-szybko), transform var(--ruch-szybko);
}
.przycisk:hover, .do-koszyka:hover, .wgraj:hover {
  background: var(--marka-hover); color: var(--marka-tekst);
  text-decoration: none; }
.przycisk:active, .do-koszyka:active { transform: scale(.985); }
.do-koszyka { width: 100%; padding: 13px 22px; font-size: 16px; }
/* Stan wylaczony NIE jest przygaszona zolcia - blada zolc na bieli znika.
   Szare tlo z ciemniejszym napisem czyta sie jako „nieczynne", nie „zepsute". */
.do-koszyka:disabled { background: #e4e4e4; color: #767676; cursor: not-allowed; }
.do-koszyka:disabled:hover { background: #e4e4e4; }

.usun {
  padding: 11px 20px; font-size: 15px; font-family: inherit;
  color: var(--ink); background: transparent;
  border: 1px solid var(--linia); border-radius: var(--r-pigulka); cursor: pointer;
  transition: background var(--ruch-szybko);
}
.usun:hover { background: #ebebef; }
.do-koszyka + .usun, .usun.pod-glownym { width: 100%; margin-top: 10px; }

/* ----------------------------------------------------------------- koszyk */
.waski { max-width: var(--waski); margin: 0 auto; padding: 40px 22px 80px; }
.waski h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 600;
  letter-spacing: -0.025em; margin: 0 0 26px; }
.waski h2 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  margin: 6px 0 4px; }
.pozycja { display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
  align-items: center; padding: 18px; background: var(--tlo-2);
  border-radius: var(--r-kafel); margin-bottom: 12px; }
.pozycja-kwota { font-weight: 600; white-space: nowrap; }
.sumy { width: 100%; margin: 24px 0; border-collapse: collapse; font-size: 16px; }
.sumy td { padding: 7px 0; color: var(--ink-2); }
.sumy td:last-child { text-align: right; color: var(--ink); }
.sumy .brutto td { font-size: 22px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em; border-top: 1px solid var(--linia); padding-top: 14px; }

.formularz { display: grid; gap: 14px; margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--linia); }
.formularz label { display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.formularz input, .formularz textarea {
  padding: 11px 13px; font-size: 16px; font-family: inherit; color: var(--ink);
  background: var(--tlo); border: 1px solid var(--linia); border-radius: var(--r-pole);
  width: 100%; resize: vertical;
}
.opcjonalne { color: var(--ink-2); font-weight: 400; }
.potwierdzenie { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r-pole);
  background: var(--ok-tlo); color: var(--ok); font-size: 15px; }
.pod-przyciskiem { margin: 12px 0 0; font-size: 12px; color: var(--ink-2);
  text-align: center; }

/* ------------------------------------------------------------ responsywnosc */
/* Progi wziete z referencji: 734 px (telefon -> tablet), 1068 px (-> desktop). */
@media (max-width: 1068px) {
  .produkt { grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; }
  /* ⛔ Menu sklepu schodzi do WLASNEGO wiersza. Szesc pozycji obok logo,
     szukajki i dwoch akcji nie miesci sie ponizej ~1050 px - przy 375 px
     cala strona przewijala sie w poziomie, a „Zaloguj sie" konczylo sie
     na „Zalo". Przewijanie poziome samego menu jest tanszym rozwiazaniem
     niz chowanie go pod przycisk: `/gift` ma byc widoczna sekcja sklepu,
     a menu schowane w hamburgerze przestaje o tym mowic. */
  .naglowek-tresc { flex-wrap: wrap; row-gap: 4px; padding-block: 10px; }
  .menu-sklepu {
    order: 10; width: 100%; margin-left: 0; gap: 18px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .menu-sklepu::-webkit-scrollbar { display: none; }
}
@media (max-width: 860px) {
  .produkt { grid-template-columns: 1fr; gap: 26px; padding-top: 26px; }
  /* Na waskim ekranie panel zakupu przestaje byc lepki - inaczej zabiera
     pol ekranu i klient nie moze doczytac opisu. */
  .kalkulator { position: static; }
  .foto-produkt { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 734px) {
  body { font-size: 16px; }
  .hero { padding: 38px 22px 28px; }
  .naglowek-tresc { gap: 12px; padding: 0 16px; }
  .kontener, .kategorie { padding-inline: 16px; }
  .produkt, .waski { padding-inline: 16px; }
  .siatka { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .karta { padding: 12px 12px 14px; border-radius: 14px; }
  .karta h2 { font-size: 15px; }
  .logo { font-size: 18px; }
  .logo-kropka { font-size: 22px; }
  .menu-sklepu a { font-size: 14px; }
  /* „Zaloguj sie" zwezone, ale NIE zamienione na sama ikone - to jedyne
     wejscie do konta, a ikona ludzika bez podpisu bywa czytana jako profil
     sprzedawcy. */
  .konto { padding: 8px 15px; font-size: 13px; }
}
@media (max-width: 560px) {
  .pozycja { grid-template-columns: 1fr auto; }
  .pozycja .usun { grid-column: 2; }
}
/* Szukajka schodzi pod pasek marki, zamiast sciskac sie do nieczytelnosci. */
@media (max-width: 620px) {
  .naglowek-tresc { flex-wrap: wrap; padding-block: 8px; row-gap: 8px; }
  .szukajka { order: 3; flex-basis: 100%; max-width: none; }
  .naglowek-akcje { margin-left: auto; }
  /* ⛔ Naglowek przestaje byc LEPKI. Na telefonie ma juz trzy rzedy (logo
     z akcjami, szukajka, menu) i przyklejony zabieralby jedna trzecia
     ekranu na kazdym przewinieciu. */
  .naglowek { position: static; }
  /* Pasek przestaje byc lepki (naglowek z szukajka zjada juz dwa rzedy),
     ale MUSI zostac kontekstem pozycjonowania - inaczej gradient krawedzi
     (`::after`) ucieka do innego przodka i laduje w poprzek strony.
     Zlapane pomiarem `position: static` + `pseudo_ma_kontekst: false`. */
  .kategorie-pas { top: auto; position: relative; }
}

/* --------------------------------------------------------------- less ruch */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .karta:hover { transform: none; }
  .karta:hover .foto img { transform: none; }
}