/* Zamawiarka WWW — warstwa wizualna.
 *
 * Układ nie jest wymyślony od zera. Powtarza to, co robią zamawiarki, na
 * których klient już zamawiał — bo każdy nowy pomysł na ułożenie menu klient
 * musi się dopiero nauczyć, a nauka odbywa się kosztem porzuconego koszyka:
 *
 *   · pasek u góry z lokalem, adresem i koszykiem (Da Grasso, Pyszne, Glovo),
 *   · poziomy pasek kategorii, przyklejony pod nagłówkiem, podświetlający
 *     kategorię, którą się właśnie ogląda,
 *   · pozycja menu jako wiersz: opis po lewej, zdjęcie po prawej — czyta się
 *     lepiej niż kafelki, gdy nazwy są długie („kebab wołowy w tortilli…"),
 *   · koszyk przyklejony z boku na dużym ekranie, a na telefonie pasek pod
 *     kciukiem, nie ikonka w rogu,
 *   · wszystko jednym ciągiem, bez ekranów pośrednich: każdy dodatkowy krok
 *     to mierzalny ubytek zamówień.
 *
 * Krój: jeden plik z Google Fonts (Archivo — zwarty, trochę szyldowy) i
 * PORZĄDNY zapas systemowy. Gdy sieć go nie poda, strona ma wyglądać
 * zwyczajnie, a nie rozjechać się na inny rytm; dlatego zapas ma zbliżoną
 * szerokość znaku. Jedna linijka w index.php — do wycięcia bez śladu.
 *
 * Kolor marki wchodzi ze zmiennej `--marka` ustawianej w config.php i jest
 * JEDYNYM kolorem, który wolno zmieniać per marka. Reszta palety to szarości
 * dobrane pod kontrast — inaczej marka z jasnożółtym logo dostałaby biały
 * tekst na białym tle.
 *
 * CHARAKTER, a nie „ładne domyślne": ciepły papier zamiast zimnej szarości,
 * czarny tusz zamiast grafitu, menu jako LISTA z liniami zamiast siatki
 * kafelków. Sklep z jedzeniem ma wyglądać jak karta dań, a nie jak panel
 * administracyjny — a strona złożona z samych białych prostokątów na
 * jasnoszarym tle wygląda dokładnie tak, jak wygląda każda strona złożona
 * naprędce.
 */

:root {
    --marka: #e8590c;
    --marka-ciemna: color-mix(in srgb, var(--marka) 82%, #000);
    --marka-mgla:   color-mix(in srgb, var(--marka) 10%, var(--karta));
    --marka-obrys:  color-mix(in srgb, var(--marka) 35%, var(--karta));
    /* Kolor marki jako TEKST (linki, „zmień”, ikony). Startowo ciemniejsza
       marka; przy jasnym akcencie (żółty Tat Döner) rdzen.js podmienia go na
       mieszankę z tuszem — żółty napis na jasnym papierze jest nieczytelny. */
    --marka-tekst:  var(--marka-ciemna);

    /* Papier, nie interfejs: odrobina ciepła w tle i w szarościach robi
       różnicę między „karta dań" a „formularz". */
    /* Paleta neutralna uzgodniona z dwoma konsultantami (GPT i Gemini):
       ciepły „owsiany" papier, BIAŁE karty i grafit z domieszką brązu.
       Ma grać z KAŻDYM akcentem z panelu, więc sama nie ma koloru — kolor
       marki zostaje wyłącznie dla akcji (guziki, zaznaczenia, aktywne). */
    --tlo: #f5f1ea;
    --karta: #ffffff;
    --tlo-miekkie: #fbf8f3;
    --ramka: #e7ded2;
    --ramka-mocna: #d7ccbe;
    --tekst: #1f1915;
    --szary: #6e655d;         /* NIE jaśniej: niżej opisy przestają być czytelne */
    --szary-jasny: #a49a8d;
    --tusz: #171311;          /* pasek górny i sekcje „na czarno" */
    /* Tekst NA kolorze marki. Ustawia go JavaScript po policzeniu kontrastu,
       bo kolor przychodzi z panelu i bywa jasnożółty — biały napis na guziku
       znika wtedy zupełnie. Biel jest tylko wartością startową. */
    --na-marce: #fff;

    --zle: #b91c1c;
    --zle-tlo: #fef2f2;
    --dobrze: #15803d;
    --dobrze-tlo: #ecfdf5;
    --info: #1d4ed8;
    --info-tlo: #eff6ff;
    --uwaga: #92400e;
    --uwaga-tlo: #fef3c7;

    /* Zaokrąglenia jak w aplikacjach do jedzenia (Wolt, Uber Eats): karta
       14 px, pole i guzik 10 px. Ostrzejsze rogi czytały się jak panel
       administracyjny, a nie sklep. */
    --r: 14px;
    --r-male: 10px;
    --cien: 0 1px 2px rgba(20, 17, 14, .06), 0 4px 14px rgba(20, 17, 14, .07);
    --cien-uniesiony: 0 6px 18px rgba(20, 17, 14, .10);
    --cien-mocny: 0 14px 36px rgba(20, 17, 14, .18);
    /* Wysokość wszystkiego, w co się celuje palcem: pole, guzik, opcja.
       48 px to minimum z wytycznych Androida i iOS — mniej i co któreś
       kliknięcie trafia obok. */
    --dotyk: 3rem;
    --pasek-h: 3.75rem;
}

/* ── Motyw ciemny ──────────────────────────────────────────────────────
 *
 * `'motyw' => 'ciemny'` w config.php. Nie jest to przełącznik dla klienta,
 * tylko decyzja MARKI: kebab i burger wyglądają na ciemnym lepiej, pizzeria
 * i kawiarnia zwykle gorzej. Przestawiane są tylko zmienne — każdy komponent
 * niżej bierze kolory stąd, więc nie ma drugiego zestawu reguł, który mógłby
 * się rozjechać z pierwszym.
 */
[data-motyw="ciemny"] {
    /* Mgła i obrys muszą mieszać się z CIEMNYM tłem, inaczej „delikatny
       akcent" wychodzi jasną plamą. */
    --marka-mgla:  color-mix(in srgb, var(--marka) 16%, var(--tlo));
    --marka-obrys: color-mix(in srgb, var(--marka) 45%, var(--tlo));

    --zle-tlo:    color-mix(in srgb, #b91c1c 22%, var(--tlo));
    --dobrze-tlo: color-mix(in srgb, #15803d 22%, var(--tlo));
    --info-tlo:   color-mix(in srgb, #1d4ed8 22%, var(--tlo));
    --uwaga-tlo:  color-mix(in srgb, #b45309 25%, var(--tlo));
    --zle:    #fca5a5;
    --dobrze: #86efac;
    --info:   #93c5fd;
    --uwaga:  #fcd34d;

    --cien: 0 1px 2px rgba(0, 0, 0, .5);
    --cien-uniesiony: 0 6px 18px rgba(0, 0, 0, .55);
    --cien-mocny: 0 14px 36px rgba(0, 0, 0, .6);
}
/* Na ciemnym pasek zlewa się z resztą, więc dostaje kreskę; na jasnym
   oddziela go sam kontrast. */
[data-motyw="ciemny"] .pasek { border-bottom: 1px solid var(--ramka); }
[data-motyw="ciemny"] .toast { background: var(--tekst); color: var(--tlo); }
[data-motyw="ciemny"] .miniatura { background: color-mix(in srgb, var(--tekst) 8%, var(--karta)); }

/* ── Palety ────────────────────────────────────────────────────────────
 *
 * Trzy niezależne warstwy wyglądu (_meta/RESTIMO-STRONA-WWW.md, sekcja 5):
 *   data-paleta    — kolory (z niej wynika data-motyw: jasny/ciemny),
 *   data-charakter — fonty, kształty, guziki (niżej, „Charakter"),
 *   data-uklad     — rozmieszczenie (kolejne fazy).
 * Ustawia je serwer (index.php) z panelu marki, a bez wpisu tam — z configu.
 *
 * Papier = :root wyżej, Węgiel = dawny „motyw ciemny" — co do piksela, żeby
 * przejście na palety nie zmieniło wyglądu żadnej istniejącej marki.
 * Pozostałe osiem podaje tylko cztery kolory (tło, karta, tekst, akcent;
 * akcent i tryb siedzą w index.php), a szarości, ramki i pola wynikają z nich
 * wspólnym przepisem — każda nowa paleta to cztery linijki, nie komplet.
 * Kontrast tekstu na tle i karcie policzony: 11–18:1.
 */
[data-paleta="wegiel"] {
    --tlo: #0f0d0b;
    --karta: #191512;
    --ramka: #2c2521;
    --ramka-mocna: #453d36;
    --tekst: #f6f2ec;
    --szary: #a99e91;
    --szary-jasny: #786f65;
    --tusz: #070606;
    --tlo-miekkie: #14110e;   /* pola formularzy — na jasnym byłyby białe plamy */
}
[data-paleta="cegla"]  { --tlo: #fff2e7; --karta: #ffffff; --tekst: #38241c; }
[data-paleta="oliwka"] { --tlo: #f1f2e6; --karta: #ffffff; --tekst: #26362a; }
[data-paleta="bistro"] { --tlo: #fff8ed; --karta: #ffffff; --tekst: #25313c; }
[data-paleta="turkus"] { --tlo: #e8f5f1; --karta: #ffffff; --tekst: #15383a; }
[data-paleta="slonce"] { --tlo: #fff4d0; --karta: #fffdf4; --tekst: #30271a; }
[data-paleta="bordo"]  { --tlo: #21181b; --karta: #35242a; --tekst: #f5ece3; }
[data-paleta="neon"]   { --tlo: #10111e; --karta: #22243a; --tekst: #f8f7ff; }
[data-paleta="ogien"]  { --tlo: #1c1412; --karta: #33221d; --tekst: #fff1e9; }
/* Wspólny przepis na pochodne. Szarość opisów to domieszka tekstu do tła:
   72% na jasnych, 62% na ciemnych — przy tych tłach oba dają ≥ 4,7:1
   (policzone), czyli czytelny drobny druk, jak dzisiejszy Papier (5,1). */
:is([data-paleta="cegla"], [data-paleta="oliwka"], [data-paleta="bistro"], [data-paleta="turkus"],
    [data-paleta="slonce"], [data-paleta="bordo"], [data-paleta="neon"], [data-paleta="ogien"]) {
    --tlo-miekkie: color-mix(in srgb, var(--karta) 55%, var(--tlo));
    --ramka:       color-mix(in srgb, var(--tekst) 12%, var(--tlo));
    --ramka-mocna: color-mix(in srgb, var(--tekst) 22%, var(--tlo));
    --szary:       color-mix(in srgb, var(--tekst) 62%, var(--tlo));
    --szary-jasny: color-mix(in srgb, var(--tekst) 40%, var(--tlo));
}
/* Pasek górny i hero „na czarno": na jasnych paletach tusz to przyciemniony
   tekst palety (ciepły albo chłodny jak ona), na ciemnych — ciemniej od tła. */
:is([data-paleta="cegla"], [data-paleta="oliwka"], [data-paleta="bistro"],
    [data-paleta="turkus"], [data-paleta="slonce"]) {
    --tusz:  color-mix(in srgb, var(--tekst) 80%, #000);
    --szary: color-mix(in srgb, var(--tekst) 72%, var(--tlo));
}
:is([data-paleta="bordo"], [data-paleta="neon"], [data-paleta="ogien"]) {
    --tusz: color-mix(in srgb, var(--tlo) 60%, #000);
}

* { box-sizing: border-box; }

/* `hidden` musi wygrywać z każdym `display` niżej. Bez tego chip lokalu,
   pasek dolny i pola faktury pokazują się mimo `el.hidden = true` — bo mają
   własne `display: flex`, a atrybut ustawia tylko `display: none` domyślnie. */
[hidden] { display: none !important; }

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

body {
    margin: 0;
    background: var(--tlo);
    color: var(--tekst);
    font: 15px/1.55 Archivo, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Stopka na dole okna także przy krótkiej stronie (konto, logowanie):
       treść rośnie i dopycha ją w dół, zamiast stopka wisieć w połowie. */
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}
body > main { flex: 1 0 auto; }

a { color: var(--marka-tekst); }

/* Nagłówki ciasno i mocno — to one niosą charakter, nie ramki. */
h1, h2, h3 { line-height: 1.15; letter-spacing: -.025em; font-weight: 800; }

/* Kwoty w tabelarycznych cyfrach: w kolumnie cen mają stać w pionie,
   a nie tańczyć zależnie od tego, ile jest jedynek. */
.cena, .kwota, .suma span:last-child { font-variant-numeric: tabular-nums; }

img { max-width: 100%; }

.szkielet { max-width: 74rem; margin: 0 auto; padding: 0 1rem; }
/* Formularz rozciągnięty na 1200 px czyta się źle: oko gubi się między
   etykietą a polem. Ekran startowy i formularze trzymamy węziej. */
.waski { max-width: 46rem; margin: 0 auto; }
.rosnie { flex: 1; }
.cicho { color: var(--szary); }

/* ── Pasek górny ───────────────────────────────────────────────────────
 *
 * Przyklejony, bo koszyk i wybrany lokal muszą być widoczne przez całe
 * przewijanie menu — to jedyne dwie informacje, których klient szuka
 * w trakcie, a nie na początku.
 */

/* Pasek na czarno. Biały pasek na jasnym tle nie oddziela niczego od
   niczego; ten trzyma stronę razem i zostawia kolor marki dla rzeczy,
   które klient ma kliknąć. */
.pasek {
    background: var(--tusz);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 30;
}
.pasek a, .pasek .ikonka { color: #fff; }
.pasek .ikonka:hover { background: rgba(255, 255, 255, .12); }
.pasek-tresc {
    max-width: 74rem;
    margin: 0 auto;
    padding: .55rem 1rem;
    min-height: var(--pasek-h);
    display: flex;
    align-items: center;
    gap: .5rem;
}

.logo { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; }
.logo-znak {
    width: 2rem; height: 2rem;
    border-radius: 8px;
    background: var(--marka);
    color: var(--na-marce);
    display: grid; place-items: center;
    font-weight: 800;
    text-transform: uppercase;
}
.logo-nazwa { font-weight: 800; letter-spacing: -.02em; font-size: 1.05rem; }
.logo img { height: 2rem; width: auto; border-radius: 6px; }

/* Chip z wybranym lokalem/adresem. Klikalny — to jest „zmień lokal”,
   którego klient szuka właśnie tutaj, a nie w stopce. */
.chip {
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 16rem;
    padding: .32rem .7rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    font-size: .85rem;
}
.chip svg { fill: rgba(255, 255, 255, .75); }
/* Ucięcie z wielokropkiem musi siedzieć na TEKŚCIE, nie na chipie: inaczej
   nazwa lokalu urywa się w połowie słowa, bez żadnego znaku, że coś dalej
   jest. */
.chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip:hover { border-color: #fff; }
.chip svg { width: 1rem; height: 1rem; flex: none; }

.ikonka {
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .6rem;
    border: 0;
    border-radius: var(--r-male);
    background: transparent;
    color: var(--tekst);
    cursor: pointer;
    font-size: .9rem;
}
.ikonka:hover { background: var(--tlo); }
.ikonka svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

.koszyk-guzik { display: inline-flex; align-items: center; gap: .45rem; }
.koszyk-guzik svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }

@media (max-width: 40rem) {
    .logo-nazwa { display: none; }
    #konto-etykieta { display: none; }
    .chip { max-width: 9rem; }
}

/* ── Układ sklepu ──────────────────────────────────────────────────────
 *
 * Na dużym ekranie koszyk stoi z boku i jest przyklejony: klient widzi sumę
 * rosnącą przy dokładaniu, bez otwierania czegokolwiek. Na telefonie tej
 * kolumny nie ma i zastępuje ją pasek dolny.
 */

main { padding-bottom: 5rem; }

.sklep { max-width: 74rem; margin: 0 auto; padding: 1rem; }

@media (min-width: 64rem) {
    .sklep {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 21rem;
        gap: 1.5rem;
        align-items: start;
    }
    .kolumna-koszyka { position: sticky; top: calc(var(--pasek-h) + 1rem); }
    /* Ekrany bez koszyka z boku (lokale, konto, diagnostyka) nie mają
       zostawiać po nim pustej kolumny. */
    .sklep.pelna { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 63.99rem) {
    .kolumna-koszyka:not(.zawsze) { display: none; }
}

/* ── Karty i typografia ────────────────────────────────────────────────── */

.karta {
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: var(--r);
    padding: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: var(--cien);
}
.karta > :first-child { margin-top: 0; }
.karta > :last-child { margin-bottom: 0; }
.karta h1 { font-size: 1.35rem; margin: 0 0 .4rem; }
.karta h2 { font-size: 1.05rem; margin: 0 0 .7rem; }
.karta h3 { font-size: .8rem; margin: 1.1rem 0 .5rem; color: var(--szary);
            text-transform: uppercase; letter-spacing: .04em; }

.podpowiedz { color: var(--szary); font-size: .9rem; }
.mala { font-size: .8rem; }

/* ── Hero ──────────────────────────────────────────────────────────────
 *
 * Tło jest ROZBIELONYM kolorem marki, nie samym kolorem marki, i tekst na nim
 * jest ciemny. Powód: kolor przychodzi z configu i bywa jasnożółty albo
 * limonkowy. Biały napis na gradiencie wygląda świetnie dokładnie dopóty,
 * dopóki ktoś nie wpisze żółtego — a wtedy hero znika i nikt nie wie czemu.
 * Mgła z koloru marki działa dla każdego odcienia.
 */

/* Hero NA CZARNO (tusz), jak pasek nad nim — jeden ciemny blok, z którego
   wyjeżdża karta adresu. Rozbielony kolor marki dawał bladoróżowy pas, który
   wyglądał na niedokończony. Kolor marki zostaje jako POŚWIATA u dołu:
   rozmyta, więc nawet jasnożółta marka nie zrobi z napisu nieczytelnej
   plamy — tekst stoi zawsze na czerni. */
.hero {
    background:
        radial-gradient(ellipse 70% 90% at 50% 120%,
                        color-mix(in srgb, var(--marka) 45%, transparent), transparent 70%),
        var(--tusz);
    color: #fff;
    padding: 2.5rem 1rem 0;
    text-align: center;
}
.hero-logo {
    width: 4.5rem; height: 4.5rem;
    object-fit: contain;
    border-radius: 18px;
    background: var(--karta);
    padding: .4rem;
    box-shadow: var(--cien-mocny);
    margin-bottom: .8rem;
}
.hero-znak {
    width: 4.5rem; height: 4.5rem;
    border-radius: 18px;
    background: var(--marka);
    color: var(--na-marce);
    display: grid; place-items: center;
    font-size: 2rem; font-weight: 800;
    text-transform: uppercase;
    margin: 0 auto .8rem;
    box-shadow: var(--cien-mocny);
}
.hero h1 {
    margin: 0;
    font-size: clamp(2rem, 6vw, 3.25rem);
    letter-spacing: -.035em;
    text-transform: uppercase;
    line-height: 1.02;
}
.hero-tekst p { margin: .6rem auto 0; max-width: 34rem; color: rgba(255, 255, 255, .72); font-size: 1.02rem; }
/* Logo po lewej od nazwy — jeden rząd jak szyld. Margines pod logo
   (z czasów, gdy stało nad nazwą) zerujemy, odstęp robi gap. */
.hero-marka { display: flex; align-items: center; justify-content: center; gap: 1rem; text-align: left; }
.hero-marka .hero-logo, .hero-marka .hero-znak { margin: 0; flex: none; }
/* Logo obok nazwy ma ją równoważyć, a nie wisieć przy niej jak ikonka:
   mniej więcej wysokość dwóch linii nagłówka. */
.hero-marka .hero-logo { width: 6.5rem; height: 6.5rem; }
.hero.z-grafika .hero-marka { justify-content: flex-start; }
@media (max-width: 40rem) {
    .hero-marka { gap: .75rem; }
    .hero-marka .hero-logo, .hero-marka .hero-znak { width: 4.5rem; height: 4.5rem; font-size: 1.75rem; }
}

/* Formularz adresu stoi W hero, jako jasna karta. Bez grafiki: wycentrowany
   pod nazwą marki. */
.hero-wnetrze { max-width: 46rem; margin: 0 auto; }
.hero-karta {
    margin: 1.75rem 0 -3.5rem;      /* wystaje poza hero — łączy pas z resztą strony */
    position: relative; z-index: 1;
    text-align: left;
    color: var(--tekst);
    box-shadow: var(--cien-mocny);
    border-radius: 20px;
}
.hero + .sklep { padding-top: 4.5rem; }
.karta-adresu { padding: 1.25rem; }

/* ── Hero z grafiką z panelu ───────────────────────────────────────────
 *
 * Zdjęcie jedzenia zamiast czerni z poświatą: apetyt robi produkt, nie
 * ciemność. Nakładka przyciemnia TYLKO stronę z tekstem (na komputerze lewą,
 * na telefonie górę i dół), żeby biały napis był czytelny na każdym zdjęciu,
 * a prawa połowa z jedzeniem zostaje jasna. Grafiki wgrywa marka, więc
 * nakładka musi wytrzymać zdjęcie, którego nikt z nas nie widział.
 */
.hero.z-grafika {
    --nakladka: linear-gradient(90deg, rgba(23, 19, 17, .78) 0%, rgba(23, 19, 17, .6) 34%,
                                rgba(23, 19, 17, .22) 58%, rgba(23, 19, 17, 0) 100%);
    background: var(--nakladka), var(--hero-d) center right / cover no-repeat, var(--tusz);
    text-align: left;
    padding: 3rem 1rem 3rem;
    min-height: 34rem;
    display: flex; align-items: center;
}
.hero.z-grafika .hero-wnetrze { max-width: 74rem; width: 100%; }
.hero.z-grafika .hero-tekst, .hero.z-grafika .hero-karta { max-width: 32rem; }
.hero.z-grafika h1 { max-width: 10ch; font-size: clamp(2rem, 5vw, 3.75rem); line-height: .98;
                     text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.hero.z-grafika .hero-tekst p { margin-left: 0; color: rgba(255, 255, 255, .88); }
.hero.z-grafika .hero-logo { margin-left: 0; }
.hero.z-grafika .hero-karta { margin-bottom: 0; background: color-mix(in srgb, var(--karta) 97%, transparent); }
.hero.z-grafika + .sklep { padding-top: 1.5rem; }
@media (max-width: 40rem) {
    .hero.z-grafika {
        --nakladka: linear-gradient(180deg, rgba(23, 19, 17, .72) 0%, rgba(23, 19, 17, .38) 28%,
                                    rgba(23, 19, 17, .12) 50%, rgba(23, 19, 17, .55) 100%);
        background: var(--nakladka), var(--hero-m) center / cover no-repeat, var(--tusz);
        padding: 1.5rem 1rem 1.25rem;
        min-height: 0;
    }
    /* Zdjęcie ma być WIDAĆ między tytułem a formularzem — to ono sprzedaje. */
    /* Ale nie za dużo: na 667 px wysokości formularz nie może zaczynać się pod zgięciem. */
    .hero.z-grafika .hero-karta { margin-top: clamp(6rem, 22vh, 9rem); }
}

/* ── Baner nad menu i kafle promocyjne ─────────────────────────────────── */

.baner-lokalu { display: block; margin-bottom: 1rem; }
.baner-lokalu img {
    display: block; width: 100%;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: var(--r);
}
@media (max-width: 40rem) { .baner-lokalu img { aspect-ratio: 16 / 9; } }

/* Kafle w rzędzie na komputerze, przewijane w bok na telefonie — trzy
   kafle jeden pod drugim spychałyby listę lokali poza ekran. */
.promocje {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(13rem, 1fr);   /* trzy mieszczą się w kolumnie 46rem */
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-bottom: 1rem;
    scrollbar-width: none;
}
.promocje::-webkit-scrollbar { display: none; }
@media (max-width: 40rem) { .promocje { grid-auto-columns: 80%; } }
.promo {
    margin: 0;
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    scroll-snap-align: start;
    background: var(--karta);
    box-shadow: var(--cien);
}
.promo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.promo figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.5rem .9rem .8rem;
    background: linear-gradient(180deg, transparent, rgba(23, 19, 17, .82));
    color: #fff;
    display: grid; gap: .15rem;
}
.promo figcaption strong { font-size: 1.1rem; line-height: 1.15; }
.promo figcaption span { font-size: .88rem; color: rgba(255, 255, 255, .85); }
.karta-adresu h2 { font-size: 1.3rem; margin: 1.1rem 0 .8rem; }

/* Pola adresu: ulica szeroko, numer wąsko — w jednym rzędzie. Wariant
   `.trzy` dokłada numer lokalu (ekran zamówienia). */
.pola.pola-adresu { grid-template-columns: minmax(0, 1fr) 6.5rem; }
.pola.pola-adresu.trzy { grid-template-columns: minmax(0, 1fr) 5.5rem 5.5rem; }
.pola.pola-adresu .szeroko { grid-column: 1 / -1; }
.pola.pola-adresu.trzy .miasto { grid-column: 1 / 2; }
.pola.pola-adresu.trzy .kod { grid-column: 2 / 4; }
@media (max-width: 30rem) {
    .pola.pola-adresu { grid-template-columns: minmax(0, 1fr) 5.5rem; }
    .pola.pola-adresu.trzy { grid-template-columns: minmax(0, 1fr) 4.75rem 4.75rem; }
}

/* ── Nagłówek lokalu ───────────────────────────────────────────────────── */

/* Winieta, nie karta: nazwa lokalu ma otwierać stronę, a nie leżeć
   w kolejnym białym prostokącie obok wszystkich innych. */
.naglowek-lokalu {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ramka);
    border-radius: 0;
    padding: .25rem 0 1.1rem;
    margin-bottom: 1rem;
}
.naglowek-lokalu h1 {
    margin: 0 0 .25rem;
    font-size: clamp(1.5rem, 4vw, 2rem);
    letter-spacing: -.03em;
}
.lokal-glowa { display: flex; align-items: center; gap: .9rem; }
.lokal-glowa > div { min-width: 0; }
.lokal-logo {
    width: 3.25rem; height: 3.25rem;
    flex: none;
    object-fit: contain;
    border-radius: 12px;
    background: var(--marka-mgla);
    padding: .3rem;
}
.fakty { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.fakt {
    display: inline-flex; align-items: center; gap: .3rem;
    background: var(--tlo);
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .82rem;
    color: var(--tekst);
}
.fakt.otwarte { background: var(--dobrze-tlo); color: var(--dobrze); }
.fakt.zamkniete { background: var(--zle-tlo); color: var(--zle); }
.fakt svg { width: .9rem; height: .9rem; fill: currentColor; }

/* Pasek adresu w nagłówku lokalu. Przerywana ramka, dopóki adresu nie ma —
   pole „do wypełnienia" wygląda inaczej niż informacja. */
.pasek-adresu {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    margin-top: .8rem;
    padding: .65rem .8rem;
    border: 1px dashed var(--ramka-mocna);
    border-radius: var(--r-male);
    background: var(--tlo);
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.pasek-adresu:hover { border-color: var(--marka); background: var(--marka-mgla); }
.pasek-adresu svg { width: 1.05rem; height: 1.05rem; fill: var(--marka-tekst); flex: none; }
.pasek-adresu > span:first-of-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pasek-adresu .zmien {
    margin-left: auto;
    flex: none;
    color: var(--marka-tekst);
    font-size: .85rem;
    font-weight: 700;
}
/* Na wąskim ekranie zdanie nie mieści się razem z etykietą i urywa się
   w połowie słowa („Dowozimy pod Twój adres? Spra…"). Etykieta znika —
   przerywana ramka i tak mówi, że to pole do wypełnienia. */
@media (max-width: 30rem) {
    .pasek-adresu .zmien { display: none; }
}

/* ── Sposób odbioru: dostawa / odbiór ───────────────────────────────────
 *
 * Przełącznik, nie lista rozwijana. To pierwsza decyzja klienta i zmienia
 * cenę — musi być widoczna bez klikania, bo inaczej połowa zamówień na
 * odbiór wychodzi z doliczoną dostawą i klient dzwoni.
 */

.przelacznik {
    display: inline-flex;
    /* Domieszka tekstu, nie `--tlo`: na białej karcie owsiane tło prawie nie
       odcinało przełącznika. Mix z `--tekst` działa na obu motywach. */
    background: color-mix(in srgb, var(--tekst) 8%, var(--karta));
    border-radius: 999px;
    padding: .2rem;
    gap: .2rem;
}
.przelacznik button {
    font: inherit;
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .35rem .9rem;
    cursor: pointer;
    color: var(--szary);
    font-size: .9rem;
}
.przelacznik button[aria-pressed="true"] {
    background: var(--karta);
    color: var(--tekst);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 17, 14, .14);
}
.przelacznik button svg { width: 1rem; height: 1rem; fill: currentColor; vertical-align: -.15rem; margin-right: .2rem; }
/* Wariant na całą szerokość — pierwsza decyzja na ekranie startowym, więc
   dwa duże pola po połowie, a nie mała pigułka w rogu. */
.przelacznik.szeroki { display: flex; width: 100%; border-radius: var(--r-male); padding: .25rem; }
.przelacznik.szeroki button {
    flex: 1;
    min-height: var(--dotyk);
    border-radius: calc(var(--r-male) - 3px);
    font-size: .95rem;
}

/* ── Pasek kategorii ───────────────────────────────────────────────────
 *
 * Przyklejony pod nagłówkiem i podświetlający kategorię, którą widać na
 * ekranie. W menu na sto pozycji to jedyna nawigacja, z której klient
 * naprawdę korzysta.
 */

/* Zakładki z podkreśleniem zamiast kolorowych pigułek. Pigułki w rzędzie
   po dziesięć wyglądają jak filtry w sklepie z elektroniką; podkreślenie
   czyta się jak spis treści karty dań. */
.kategorie {
    position: sticky;
    top: var(--pasek-h);
    z-index: 20;
    background: var(--tlo);
    border-bottom: 1px solid var(--ramka);
    margin: 0 -1rem 1.5rem;
    padding: 0 1rem;
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.kategorie::-webkit-scrollbar { display: none; }
.kategorie button {
    font: inherit;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--szary);
    border-radius: 0;
    padding: .95rem 0;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.kategorie button:hover { color: var(--tekst); }
.kategorie button[aria-current="true"] {
    color: var(--tekst);
    border-bottom-color: var(--marka);
}
/* Ikona grupy — ta sama, którą widzi kasa i kiosk (`/assets/{marka}/group/{id}`).
   Kategoria ze zdjęciem trafia się okiem, kategoria samym napisem — czytaniem. */
.kategorie img {
    width: 1.5rem; height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
    background: var(--karta);
    filter: saturate(.9);
}

/* ── Menu ──────────────────────────────────────────────────────────────── */

.szukajka {
    background-repeat: no-repeat;
    background-position: .75rem center;
    background-size: 1.05rem;
    padding-left: 2.35rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2Zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z'/%3E%3C/svg%3E");
}

.grupa { margin-bottom: 2.5rem; scroll-margin-top: calc(var(--pasek-h) + 4rem); }
/* Nazwa działu jak nagłówek w karcie dań: wersaliki i kreska pod spodem. */
.grupa h2 {
    font-size: 1.35rem;
    margin: 0 0 .25rem;
    text-transform: uppercase;
    letter-spacing: .01em;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--tekst);
}

/* Pozycje jako KARTY z dużym zdjęciem — tak, jak w Wolcie i Uber Eats.
   Wcześniejsza lista rozdzielona liniami wyglądała jak cennik w hurtowni:
   jedzenie sprzedaje się zdjęciem, a 88-pikselowa miniatura na końcu wiersza
   go nie niosła. Ramka jest delikatna, cień wychodzi dopiero pod kursorem. */
.pozycje { display: grid; gap: .75rem; }
@media (min-width: 48rem) {
    .pozycje { grid-template-columns: 1fr 1fr; gap: 1rem; }
}

.pozycja {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: .9rem;
    background: var(--karta);
    border: 1px solid var(--ramka);
    border-radius: var(--r);
    padding: .8rem;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    box-shadow: var(--cien);
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.pozycja:hover { box-shadow: var(--cien-uniesiony); border-color: var(--marka-obrys); transform: translateY(-1px); }
.pozycja:active { transform: scale(.99); }
.pozycja:hover .dodaj { background: var(--marka-ciemna); }
.pozycja .nazwa { font-weight: 700; font-size: 1.02rem; margin-bottom: .2rem; letter-spacing: -.01em; }
.pozycja .opis {
    color: var(--szary);
    font-size: .85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Cena i „+" w jednym rzędzie, na dole kolumny z tekstem. Guzik przyklejony
   do rogu karty nie miał się już czego trzymać, gdy karta stała się
   wierszem listy. */
.pozycja .cena-rzad {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .55rem;
}
.pozycja .cena { font-weight: 800; font-size: 1.08rem; }
.pozycja .cena small { font-weight: 500; font-size: .8rem; color: var(--szary); }
.pozycja.bez-zdjecia { grid-template-columns: minmax(0, 1fr); }
.pozycja .miniatura {
    width: 100%; aspect-ratio: 1;
    height: auto;
    object-fit: cover;
    border-radius: var(--r-male);
    background: var(--tlo);
    align-self: center;
}
/* Brak zdjęcia NIE ZNACZY braku kafelka: pozycje bez fotografii robiły
   w siatce dziury i sąsiednie karty miały różną wysokość. Delikatna
   zaślepka w kolorze marki kosztuje nic i wyrównuje rząd. */
.pozycja .miniatura.pusta {
    display: grid;
    place-items: center;
    background: var(--tlo);
    box-shadow: inset 0 0 0 1px var(--ramka);
}
/* Ledwie widoczna. Przy menu, w którym połowa pozycji nie ma zdjęcia, mocna
   zaślepka przyciąga wzrok DO BRAKU — a ma tylko wyrównać rząd. */
.pozycja .miniatura.pusta svg { width: 1.6rem; height: 1.6rem; fill: var(--szary-jasny); opacity: .5; }
/* „+ Dodaj" jako pigułka z napisem — obaj konsultanci zgodnie: samo kółko
   z plusem czytało się jak ikona systemowa, a nie zaproszenie do zakupu. */
.pozycja .dodaj {
    min-height: 2.25rem;
    padding: 0 .95rem;
    flex: none;
    margin-left: auto;
    border-radius: 999px;
    border: 0;
    background: var(--marka);
    color: var(--na-marce);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex; align-items: center;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--marka) 35%, transparent);
    transition: background .12s;
}
/* Informacja, nie odznaka: przy każdej pozycji obwódka robiła z tego
   dziesięć małych plakietek na ekran. Ale CZYTELNA — 12 px jasnoszarego
   znikało, a „do wyboru: sos, rozmiar" to dla klienta ważna wiadomość. */
.pozycja .znacznik {
    display: block;
    font-size: .88rem;
    line-height: 1.4;
    color: var(--szary);
    margin-top: .3rem;
}

/* ── Lokale ────────────────────────────────────────────────────────────── */

/* Lokale w siatce: na komputerze po cztery w rzędzie (lista idzie na pełną
   szerokość strony), na tablecie po dwa, na telefonie jeden pod drugim. */
.lokale { display: grid; gap: .75rem; }
@media (min-width: 40rem) { .lokale { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .lokale { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lokal {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem;
    border: 1px solid var(--ramka);
    border-radius: var(--r);
    background: var(--karta);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    box-shadow: var(--cien);
}
.lokal:hover { border-color: var(--marka-obrys); box-shadow: var(--cien-uniesiony); }
.lokal .info { flex: 1; min-width: 0; }
.lokal .nazwa { font-weight: 700; font-size: 1.02rem; }
.lokal .lokal-logo { width: 3rem; height: 3rem; }
/* Strzałka mówi „to się klika i prowadzi dalej" — bez niej karta lokalu
   wyglądała jak informacja, a nie jak droga do menu. */
.lokal .strzalka { font-size: 1.8rem; line-height: 1; color: var(--marka-tekst); flex: none; }
.lokal.nieczynny { opacity: .72; }

/* ── Guziki ────────────────────────────────────────────────────────────── */

.guzik {
    font: inherit;
    padding: .5rem .9rem;
    border-radius: var(--r-male);
    border: 1px solid var(--marka);
    background: var(--marka);
    color: var(--na-marce);
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}
.guzik:hover:not(:disabled) { background: var(--marka-ciemna); border-color: var(--marka-ciemna); }
.guzik.cichy { background: var(--karta); color: var(--tekst); border-color: var(--ramka-mocna); font-weight: 500; }
.guzik.cichy:hover:not(:disabled) { background: var(--tlo); border-color: var(--ramka-mocna); }
.guzik.goly { background: transparent; border-color: transparent; color: var(--marka-tekst); }
.guzik.goly:hover:not(:disabled) { background: var(--marka-mgla); border-color: transparent; }
.guzik.zle { background: var(--zle); border-color: var(--zle); color: #fff; }
.guzik:disabled { opacity: .5; cursor: default; }
.guzik.szeroki { width: 100%; padding: .8rem; font-size: 1rem; min-height: var(--dotyk); }
.guzik.maly { padding: .3rem .6rem; font-size: .85rem; }
/* Guzik, który kończy krok (szukaj, dodaj do koszyka, zamawiam). Większy
   i grubszy od reszty — w jednym ekranie ma być JEDNA rzecz, która woła. */
.guzik.duzy { min-height: 3.25rem; font-size: 1.05rem; font-weight: 700; letter-spacing: .005em; }
.guzik:active:not(:disabled) { transform: scale(.985); }

.guziki { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Formularze ────────────────────────────────────────────────────────── */

/* 16 px w polach NIE jest kaprysem: iPhone przy mniejszym kroju sam
   przybliża stronę po dotknięciu pola i nie oddala jej z powrotem — klient
   zostaje z powiększonym, rozjechanym formularzem. */
input, select, textarea {
    font: inherit;
    font-size: 1rem;
    width: 100%;
    min-height: var(--dotyk);
    padding: .65rem .8rem;
    border: 1px solid var(--ramka-mocna);
    border-radius: var(--r-male);
    /* Miękkie tło pola zamiast białej dziury w karcie; ramka ZOSTAJE —
       na owsianym tle pole bez ramki po prostu znika. */
    background: var(--tlo-miekkie);
    color: var(--tekst);
    transition: border-color .12s, box-shadow .12s, background .12s;
}
input:focus, select:focus, textarea:focus {
    outline: 0;
    background: var(--karta);
    border-color: var(--marka);
    box-shadow: 0 0 0 3px var(--marka-obrys);
}
input::placeholder, textarea::placeholder { color: var(--szary-jasny); }

.pole { margin-bottom: .6rem; }
.pole > span { display: block; font-size: .82rem; font-weight: 600; color: var(--szary); margin-bottom: .25rem; }

.pola { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.pola .szeroko { grid-column: 1 / -1; }
/* Pusty pojemnik na podpowiedzi ulic nie może zajmować rzędu siatki —
   dokładał podwójny odstęp między ulicą a miastem. */
.pola > div:empty { display: none; }
@media (max-width: 30rem) { .pola { grid-template-columns: 1fr; } }

/* Pola wyboru NIE dziedziczą szerokości 100% z reguły wyżej — inaczej radio
   rozpycha się na całą szerokość i etykieta ląduje pod nim, w losowym
   miejscu. Wyszło przy pierwszym kliknięciu w produkt z dodatkami. */
textarea { min-height: 0; }
input[type="checkbox"], input[type="radio"] {
    width: 1.15rem;
    height: 1.15rem;
    min-height: 0;
    margin: 0;
    accent-color: var(--marka);
    flex: none;
}

.zgoda {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    font-size: .88rem;
    padding: .35rem 0;
    cursor: pointer;
}

/* Linki do regulaminu i polityki. POZA etykietą zgody, choć wyglądają na jej
   część: klik w link wewnątrz <label> przełączyłby przy okazji kwadracik,
   czyli klient „zaznaczyłby" zgodę, chcąc tylko przeczytać dokument.
   Wcięcie wyrównuje je do tekstu zgody, nie do kwadracika. */
.zgoda-linki {
    margin: -.2rem 0 .5rem 1.5rem;
    font-size: .8rem;
}

/* Dokument: długi tekst pisany do CZYTANIA, a nie do skanowania wzrokiem —
   stąd luźniejsza interlinia i węższa kolumna niż w reszcie sklepu. */
.dokument p { line-height: 1.65; margin: 0 0 .9rem; }

/* ── Wybór dodatków ────────────────────────────────────────────────────
 *
 * Opcja to cały wiersz, a nie sam kwadracik: na telefonie w kratkę 14 px
 * trafia się co drugi raz, a w wiersz zawsze.
 */

.produkt-foto {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: var(--r);
    margin-bottom: .8rem;
}
.produkt-cena { font-weight: 800; font-size: 1.25rem; margin: .2rem 0 1rem; }
.produkt-cena .podpowiedz { font-weight: 400; }

/* Grupa to <fieldset> — czytnik ekranu mówi wtedy „Sos, wymagane" przed
   każdą opcją. Domyślną ramkę i wcięcia przeglądarki zerujemy. */
.grupa-dodatkow {
    border: 0;
    margin: 0 0 1.25rem;
    padding: 0;
    min-width: 0;
    scroll-margin: 1rem;
}
.grupa-dodatkow .tytul {
    display: flex; align-items: center; gap: .5rem;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
}
.grupa-dodatkow .tytul strong { font-size: 1.02rem; }
/* Brakujący wybór po kliknięciu „Dodaj": grupa świeci na czerwono, a nie
   tylko zdanie przy guziku, którego na telefonie nie widać z góry listy. */
.grupa-dodatkow.brakuje .opcja { border-color: var(--zle); }
.grupa-dodatkow.brakuje .plakietka { background: var(--zle-tlo); color: var(--zle); }
.plakietka {
    background: var(--uwaga-tlo);
    color: var(--uwaga);
    border-radius: 999px;
    padding: .08rem .5rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
}
.plakietka.spokojna { background: var(--tlo); color: var(--szary); }

/* Opcja jako kafelek z ramką, wybrana — w kolorze marki. Kreska między
   gołymi wierszami nie mówiła, CO jest wybrane; trzeba było szukać kropki
   radia wielkości ziarnka pieprzu. */
.opcja {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: var(--dotyk);
    padding: .55rem .8rem;
    margin-bottom: .4rem;
    border: 1px solid var(--ramka);
    border-radius: var(--r-male);
    background: var(--karta);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.opcja:hover { border-color: var(--ramka-mocna); }
.opcja:has(input:checked) {
    border-color: var(--marka);
    background: var(--marka-mgla);
    box-shadow: inset 0 0 0 1px var(--marka);
}
.opcja:has(input:checked) .tresc { font-weight: 600; }
.opcja .tresc { flex: 1; min-width: 0; }
.opcja .doplata { color: var(--szary); font-size: .9rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Formy płatności ───────────────────────────────────────────────────── */

.platnosci { display: grid; gap: .5rem; margin-bottom: .6rem; }
@media (min-width: 40rem) { .platnosci { grid-template-columns: 1fr 1fr; } }
.platnosc {
    display: flex; align-items: center; gap: .65rem;
    min-height: var(--dotyk);
    padding: .6rem .85rem;
    border: 1px solid var(--ramka-mocna);
    border-radius: var(--r-male);
    background: var(--karta);
    cursor: pointer;
    font-weight: 500;
}
.platnosc:has(input:checked) {
    border-color: var(--marka);
    background: var(--marka-mgla);
    box-shadow: inset 0 0 0 1px var(--marka);
    font-weight: 650;
}

/* ── Ilość ─────────────────────────────────────────────────────────────── */

.licznik {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--ramka-mocna);
    border-radius: 999px;
    overflow: hidden;
    background: var(--karta);
}
.licznik button {
    font: inherit;
    width: 2.1rem; height: 2.1rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--tekst);
}
.licznik button:hover { background: var(--tlo); }
.licznik .ile { min-width: 2rem; text-align: center; font-weight: 650; }

/* ── Koszyk ────────────────────────────────────────────────────────────── */

.pozycja-koszyka {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .65rem 0;
    border-bottom: 1px solid var(--ramka);
}
.pozycja-koszyka:last-of-type { border-bottom: 0; }
.pozycja-koszyka .tresc { flex: 1; min-width: 0; }
.pozycja-koszyka .nazwa { font-weight: 600; font-size: .95rem; }
.pozycja-koszyka .dodatki { color: var(--szary); font-size: .82rem; }
.pozycja-koszyka .kwota { font-weight: 650; white-space: nowrap; }

.suma { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; font-size: .92rem; }
.suma.razem {
    font-weight: 800;
    font-size: 1.1rem;
    border-top: 1px solid var(--ramka);
    margin-top: .5rem;
    padding-top: .5rem;
}
.suma .cicho { color: var(--szary); }

/* Próg darmowej dostawy. Pasek, bo „brakuje 12 zł” działa, a „dostawa gratis
   od 60 zł” to informacja, którą trzeba samemu przeliczyć. */
.progres { height: .4rem; background: var(--ramka); border-radius: 999px; overflow: hidden; margin: .35rem 0; }
.progres i { display: block; height: 100%; background: var(--marka); border-radius: 999px; transition: width .25s; }

.pusty-koszyk { text-align: center; color: var(--szary); padding: 1.5rem 0; }
.pusty-koszyk svg { width: 2.5rem; height: 2.5rem; fill: var(--ramka-mocna); }

/* ── Komunikaty ────────────────────────────────────────────────────────── */

.komunikat {
    border-radius: var(--r-male);
    padding: .6rem .75rem;
    margin: .6rem 0;
    font-size: .89rem;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
}
.komunikat.zle { background: var(--zle-tlo); color: var(--zle); }
.komunikat.ok { background: var(--dobrze-tlo); color: var(--dobrze); }
.komunikat.info { background: var(--info-tlo); color: var(--info); }
.komunikat.uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
/* Ikona w komunikacie MUSI mieć rozmiar. `.komunikat` jest kontenerem flex,
   a `<svg>` bez width/height rozciąga się wtedy na całą dostępną wysokość —
   ekran „Zamówienie przyjęte" dostawał przez to ptaszka na pół strony.
   `flex: none`, żeby przy długim tekście ikona nie ściskała się do kreski. */
.komunikat svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    fill: currentColor;
    margin-top: .1rem;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 6.25rem;
    transform: translateX(-50%);
    background: var(--tusz);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: 999px;
    font-size: .9rem;
    z-index: 80;
    box-shadow: var(--cien-mocny);
    max-width: calc(100vw - 2rem);
}

/* ── Szuflada (koszyk, produkt, formularze) ────────────────────────────
 *
 * Na dużym ekranie wysuwa się z prawej, na telefonie wjeżdża od dołu i ma
 * uchwyt — tak, jak zachowuje się każda aplikacja, z której klient korzysta.
 */

.szuflada { position: fixed; inset: 0; z-index: 60; }
.szuflada-tlo { position: absolute; inset: 0; background: rgba(23, 19, 17, .45); }
.szuflada-panel {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: min(30rem, 100%);
    background: var(--karta);
    padding: 1.1rem;
    overflow: auto;
    box-shadow: var(--cien-mocny);
    animation: wjedz-z-boku .18s ease-out;
}
@keyframes wjedz-z-boku { from { transform: translateX(2rem); opacity: .6; } }

@media (max-width: 40rem) {
    .szuflada-panel {
        top: auto;
        left: 0;
        max-height: 92vh;
        max-height: 92dvh;      /* bez paska adresu Safari, który zasłaniał guzik */
        width: auto;
        border-radius: var(--r) var(--r) 0 0;
        padding-bottom: calc(2rem + env(safe-area-inset-bottom));
        animation: wjedz-z-dolu .2s ease-out;
    }
    @keyframes wjedz-z-dolu { from { transform: translateY(2rem); opacity: .6; } }
    .szuflada-panel::before {
        content: "";
        display: block;
        width: 2.5rem; height: .25rem;
        border-radius: 999px;
        background: var(--ramka-mocna);
        margin: -.35rem auto .8rem;
    }
}

.szuflada-glowa {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .8rem;
}
.szuflada-glowa h2 { margin: 0; font-size: 1.15rem; flex: 1; }
.zamknij {
    font: inherit;
    width: 2rem; height: 2rem;
    border: 0;
    border-radius: 50%;
    background: var(--tlo);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--szary);
}
.zamknij:hover { background: var(--ramka); }

/* Stopka szuflady z ceną — zawsze widoczna, bez przewijania do końca. */
.szuflada-stopka {
    position: sticky;
    bottom: -1.1rem;
    background: var(--karta);
    padding-top: .8rem;
    margin: .8rem -1.1rem -1.1rem;
    padding: .8rem 1.1rem 1.1rem;
    border-top: 1px solid var(--ramka);
}

/* ── Pasek dolny (telefon) ─────────────────────────────────────────────── */

.pasek-dolny {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--karta) 88%, transparent);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ramka);
}
@media (min-width: 64rem) { .pasek-dolny { display: none; } }
.pasek-dolny .guzik {
    display: flex; align-items: center; gap: .75rem;
    min-height: 3.25rem;
    padding: .6rem 1rem;
    border-radius: var(--r);
    font-weight: 700;
    font-size: 1.02rem;
    box-shadow: var(--cien-uniesiony);
}
.dolny-ile {
    min-width: 1.75rem; height: 1.75rem;
    padding: 0 .4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--na-marce) 22%, transparent);
    display: grid; place-items: center;
    font-size: .9rem;
}
.pasek-dolny .rosnie { text-align: left; }

/* ── Podpowiedzi ulic (GUGiK) ─────────────────────────────────────────── */

.podpowiedzi {
    border: 1px solid var(--ramka-mocna);
    border-radius: var(--r-male);
    background: var(--karta);
    max-height: 12rem;
    overflow: auto;
    box-shadow: var(--cien-mocny);
    margin-top: .25rem;
}
.podpowiedzi button {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    border: 0;
    background: transparent;
    padding: .5rem .7rem;
    cursor: pointer;
    font-size: .9rem;
}
.podpowiedzi button:hover, .podpowiedzi button:focus { background: var(--marka-mgla); }

/* ── Konto ─────────────────────────────────────────────────────────────── */

.zakladki { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: 1rem; scrollbar-width: none; }
.zakladki::-webkit-scrollbar { display: none; }
.zakladki button {
    font: inherit;
    flex: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: .5rem .7rem;
    cursor: pointer;
    color: var(--szary);
    white-space: nowrap;
}
.zakladki button[aria-current="true"] { color: var(--tekst); font-weight: 650; border-bottom-color: var(--marka); }

.lista { border: 1px solid var(--ramka); border-radius: var(--r); overflow: hidden; }
.lista .wiersz {
    display: flex;
    gap: .75rem;
    align-items: center;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--ramka);
    background: var(--karta);
}
.lista .wiersz:last-child { border-bottom: 0; }
.lista .wiersz .tresc { flex: 1; min-width: 0; }

.stan {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    border-radius: 999px;
    padding: .1rem .55rem;
    background: var(--tlo);
    color: var(--szary);
}
.stan.ok { background: var(--dobrze-tlo); color: var(--dobrze); }
.stan.zle { background: var(--zle-tlo); color: var(--zle); }
.stan.czeka { background: var(--uwaga-tlo); color: var(--uwaga); }

/* Ekran konta: powitanie z inicjałem, zakładki-pigułki, każda sekcja
   w swojej karcie. Same zmienne palety — konto wygląda jak reszta sklepu
   w każdym charakterze i palecie, bez osobnych reguł. */
.konto { max-width: 46rem; }
.konto-glowa { display: flex; align-items: center; gap: .9rem; margin: .4rem 0 1.1rem; }
.konto-glowa h1 { font-size: 1.45rem; margin: 0; line-height: 1.2; }
.konto-glowa .podpowiedz { margin: .15rem 0 0; overflow-wrap: anywhere; }
.konto-awatar {
    flex: none;
    width: 3.1rem; height: 3.1rem;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--marka); color: var(--na-marce);
    font-size: 1.35rem; font-weight: 700;
}
.konto-zakladki { gap: .4rem; margin-bottom: .9rem; }
.konto-zakladki button {
    border: 1px solid var(--ramka-mocna);
    border-radius: 999px;
    padding: .45rem .95rem;
    background: var(--karta);
}
.konto-zakladki button[aria-current="true"] { background: var(--marka); border-color: var(--marka); color: var(--na-marce); }
#k-tresc > .karta { margin-bottom: .8rem; }
#k-tresc > .guzik { margin-top: .2rem; }
.konto-stopka { margin-top: 1.2rem; text-align: center; }
.konto-pusto { text-align: center; padding: 2rem 1.2rem; }
.konto-pusto p:first-child { font-size: 1.1rem; font-weight: 650; margin: 0 0 .3rem; }

/* Zamówienie na liście: cały wiersz to guzik do szczegółów. */
.konto-zamowienia { display: grid; gap: .55rem; }
.konto-zamowienie {
    display: flex; align-items: center; gap: .75rem;
    width: 100%; margin: 0;
    font: inherit; color: inherit; text-align: left;
    cursor: pointer;
}
.konto-zamowienie:hover { border-color: var(--marka); }
.konto-zamowienie .rosnie { min-width: 0; }
.konto-zamowienie .rosnie strong, .konto-zamowienie .rosnie .podpowiedz { display: block; }
.konto-zamowienie .podpowiedz { font-size: .82rem; }
.konto-kwota { white-space: nowrap; }
.konto-strzalka { color: var(--szary); font-size: 1.4rem; line-height: 1; }
@media (max-width: 30rem) {
    .konto-zamowienie { flex-wrap: wrap; }
    .konto-zamowienie .rosnie { flex-basis: calc(100% - 2rem); }
}

.konto-szczegoly { padding: 0 1rem; }
.konto-szczegoly .lista { margin: .6rem 0 .9rem; }
.konto-podsumowanie { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; margin: 0 0 1rem; }
.konto-podsumowanie dt { color: var(--szary); }
.konto-podsumowanie dd { margin: 0; text-align: right; }
.konto-strefa { margin-top: .2rem; font-size: .82rem; }
.konto-poza { color: var(--uwaga); }
.konto-akcje { margin-top: .4rem; }
.konto-baner { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: .9rem; }
.konto-baner .guzik { flex: none; }
.konto-potwierdzenie { max-width: 30rem; margin: 2rem auto; text-align: center; }
.konto-potwierdzenie .guziki { justify-content: center; margin-top: 1rem; }
.konto-potwierdzenie-znak {
    width: 3.5rem; height: 3.5rem; margin: 0 auto .8rem;
    border-radius: 50%; display: grid; place-items: center;
    background: var(--dobrze-tlo); color: var(--dobrze);
    font-size: 1.8rem; font-weight: 700;
}
#k-tresc #d-zapisz { margin-top: .2rem; }

/* Usunięcie konta: zwinięte do jednej cichej linii, rozwija się na klik. */
.konto-usun { padding-top: .9rem; padding-bottom: .9rem; }
.konto-usun summary {
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    color: var(--szary); font-weight: 600;
}
.konto-usun summary::-webkit-details-marker { display: none; }
.konto-usun summary::after { content: '›'; font-size: 1.3rem; line-height: 1; transition: transform .15s; }
.konto-usun[open] summary { color: var(--zle); margin-bottom: .5rem; }
.konto-usun[open] summary::after { transform: rotate(90deg); }
.konto-usun-wiersz { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }
.konto-usun-wiersz input { flex: 1 1 12rem; min-width: 0; }
.konto-usun-wiersz .guzik { flex: none; }

/* ── Diagnostyka API ───────────────────────────────────────────────────── */

.endpoint { border-bottom: 1px solid var(--ramka); padding: .7rem 0; }
.endpoint:last-child { border-bottom: 0; }
.endpoint .glowa { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.metoda {
    font: 700 .72rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
    border-radius: 5px;
    padding: 0 .4rem;
    background: var(--tlo);
    color: var(--szary);
}
.metoda.get { background: var(--info-tlo); color: var(--info); }
.metoda.post { background: var(--dobrze-tlo); color: var(--dobrze); }
.metoda.delete { background: var(--zle-tlo); color: var(--zle); }
.sciezka { font: .85rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; }

pre.odpowiedz {
    background: #16181d;
    color: #e5e7eb;
    border-radius: var(--r-male);
    padding: .7rem .8rem;
    overflow: auto;
    max-height: 18rem;
    font: .78rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace;
    margin: .5rem 0 0;
}

/* ── Wczytywanie ───────────────────────────────────────────────────────── */

.szkic { border-radius: var(--r); background: linear-gradient(90deg, var(--ramka) 25%, var(--karta) 37%, var(--ramka) 63%);
         background-size: 400% 100%; animation: migotanie 1.3s ease-in-out infinite; }
@keyframes migotanie { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.szkic.pozycja-szkic { height: 7.5rem; }

/* ── Ruch ──────────────────────────────────────────────────────────────
 *
 * Delikatne wejście kart. Krótkie i bez przesuwania układu — animacja ma
 * dać wrażenie, że strona się złożyła, a nie kazać na siebie czekać.
 */

.grupa, .karta, .naglowek-lokalu { animation: pojaw .22s ease-out both; }
@keyframes pojaw { from { opacity: 0; transform: translateY(6px); } }

/* Kto wyłączył animacje w systemie, ma je wyłączone także tutaj. To nie jest
   uprzejmość: dla części ludzi ruch na ekranie znaczy zawroty głowy. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Stopka ────────────────────────────────────────────────────────────── */

.stopka {
    border-top: 1px solid var(--ramka);
    background: var(--karta);
    padding: 1.1rem 0;
    color: var(--szary);
    font-size: .82rem;
}
.stopka a { color: var(--szary); }
.stopka .el[hidden] { display: none; }
/* Kropka przed każdą widoczną pozycją, która ma przed sobą inną widoczną. */
.stopka .el:not([hidden]) ~ .el:not([hidden])::before {
    content: "·"; margin: 0 .4em; color: var(--szary); text-decoration: none; display: inline-block;
}

@media print { .pasek, .pasek-dolny, .szuflada, .stopka { display: none !important; } }

/* ── Zaplecze: ekran przyjmowania zamówień ─────────────────────────────
 *
 * Układ kasy: kafle po lewej, zamówienie po prawej. Na wąskim ekranie
 * jedna kolumna — obsługa przy telefonie i tak siedzi przy monitorze,
 * ale zaplecze bywa otwierane na tablecie.
 */
.kasa { display: grid; gap: 1rem; align-items: start; }
/* `minmax(0, …)`: pasek kategorii się nie zawija i bez tego jego pełna
   szerokość rozpychała lewą kolumnę, a kolumna klienta kurczyła się do 9rem. */
@media (min-width: 60rem) { .kasa { grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr); } }
.kasa > * { min-width: 0; }

.kafle {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

.kafel {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: left;
    padding: .7rem;
    min-height: 4.5rem;
    border: 1px solid var(--ramka);
    border-radius: var(--r-male);
    background: var(--karta);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .12s, transform .06s;
}
.kafel:hover { border-color: var(--marka); }
/* Wciśnięcie musi być WIDOCZNE: przy szybkim wklepywaniu zamówienia
   z telefonu jedyną informacją zwrotną jest to, że kafel drgnął. */
.kafel:active { transform: scale(.97); }

.kafel-nazwa { font-weight: 600; line-height: 1.2; }
.kafel-cena  { color: var(--marka-tekst); font-weight: 700; }
.kafel-znak  { font-size: .72rem; color: var(--szary-jasny); }

/* Kafel ze zdjęciem: obsługa trafia okiem w zdjęcie szybciej niż w napis,
   zwłaszcza w kategoriach, gdzie nazwy różnią się jednym słowem. */
.kafel { position: relative; overflow: hidden; }
.kafel.ze-zdjeciem img {
    width: calc(100% + 1.4rem);
    margin: -.7rem -.7rem .4rem;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-width: none;
}
/* Ile sztuk tego produktu już jest w zamówieniu — przy „trzy razy to samo"
   obsługa widzi licznik na kaflu i nie musi zerkać w prawą kolumnę. */
.kafel-ile {
    position: absolute; top: .4rem; right: .4rem;
    min-width: 1.6rem; height: 1.6rem;
    padding: 0 .35rem;
    border-radius: 999px;
    background: var(--marka);
    color: var(--na-marce);
    font-weight: 800;
    font-size: .85rem;
    display: grid; place-items: center;
    box-shadow: var(--cien-uniesiony);
}

/* ── Zaplecze (/admin) ──────────────────────────────────────────────────
 *
 * `width: 100%` jest tu najważniejszą linią: `main` to siatka sklepu,
 * a element z `margin: auto` w siatce kurczy się do treści — pusta lista
 * miała szerokość jednego zdania, a kolumna klienta w „Przyjmij" 9rem.
 */
.zaplecze { width: 100%; max-width: 80rem; margin: 0 auto; }
.pasek-zaplecza .pasek-tresc { max-width: 82rem; }
.zaplecze-znak {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: .15rem .45rem; border-radius: 999px; margin-left: .35rem; vertical-align: .15rem;
    background: rgba(255, 255, 255, .14);
}
.pasek-link {
    padding: .4rem .75rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem;
    border: 1px solid rgba(255, 255, 255, .25);
}
.pasek-link:hover { background: rgba(255, 255, 255, .12); }
.zaplecze-zakladki { gap: .4rem; margin: .2rem 0 1rem; }
.zaplecze-zakladki button {
    border: 1px solid var(--ramka-mocna); border-radius: 999px; padding: .45rem 1rem; background: var(--karta);
}
.zaplecze-zakladki button[aria-current="true"] { background: var(--tusz); border-color: var(--tusz); color: #fff; }

.zaplecze-glowa { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.zaplecze-glowa h1 { font-size: 1.5rem; margin: 0; }
.szukajka-zaplecza { display: flex; gap: .4rem; flex: 0 1 22rem; }
.szukajka-zaplecza input { flex: 1; min-width: 0; }
.szukajka-zaplecza .guzik { flex: none; }
.zaplecze-pusto { text-align: center; padding: 2.5rem 1rem; }
.zaplecze-pusto strong { font-size: 1.1rem; }
.zaplecze-pusto p { margin: .3rem 0 0; }
.zaplecze-pod-lista { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.zaplecze-pod-lista .podpowiedz { flex: 1 1 18rem; font-size: .82rem; }

.zaplecze-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.zaplecze-kafel {
    background: var(--karta); border-radius: var(--r); padding: .8rem 1rem;
    border: 1px solid var(--ramka); display: flex; flex-direction: column; gap: .1rem;
}
.zaplecze-kafel strong { font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.zaplecze-kafel span { color: var(--szary); font-size: .82rem; }
.zaplecze-kafel.uwaga { background: var(--uwaga-tlo); border-color: transparent; }
.zaplecze-kafel.uwaga strong { color: var(--uwaga); }
.zaplecze-kafel.zle { background: var(--zle-tlo); border-color: transparent; }
.zaplecze-kafel.zle strong { color: var(--zle); }
.zaplecze-widoki { margin-bottom: 1rem; flex-wrap: wrap; }

.zaplecze-dzien {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--szary);
    margin: 1.1rem .2rem .45rem;
}
.zaplecze-dzien:first-child { margin-top: 0; }
.zaplecze-dzien .podpowiedz { text-transform: none; letter-spacing: 0; font-size: .82rem; }

/* Wiersz zamówienia: na komputerze jedna linia, na telefonie dwie. */
.zam { padding: .7rem .9rem; margin-bottom: .45rem; border-left: 4px solid transparent; }
.zam.zam-nowe { border-left-color: var(--uwaga); }
.zam-wiersz {
    display: grid; align-items: center; gap: .5rem .9rem;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto 11rem 6rem 2rem;
}
.zam-nr {
    font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    display: flex; flex-direction: column; line-height: 1.2;
}
.zam-nr span { color: var(--szary); font-size: .85rem; }
.zam-kto { min-width: 0; display: flex; flex-direction: column; }
.zam-kto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zam-kto .podpowiedz { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zam-platnosc { justify-self: start; white-space: nowrap; }
.zam-status { font-size: .88rem; padding: .35rem .5rem; font-weight: 600; }
.zam-status.stan-ok   { color: var(--dobrze); }
.zam-status.stan-zle  { color: var(--zle); }
.zam-status.stan-czeka { color: var(--uwaga); }
.zam-kwota { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.zam-rozwin {
    font: inherit; font-size: 1.4rem; line-height: 1; color: var(--szary);
    background: none; border: 0; cursor: pointer; transition: transform .15s;
}
.zam.otwarte .zam-rozwin { transform: rotate(90deg); }
.zam-uwaga { margin: .45rem 0 0 5.4rem; font-size: .88rem; color: var(--info); }
.zam-tresc {
    display: grid; gap: 1.2rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--ramka);
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.zam-tresc h3 { margin-top: 1rem; }
.zam-dane { display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0 0 .8rem; font-size: .9rem; }
.zam-dane dt { color: var(--szary); }
.zam-dane dd { margin: 0; overflow-wrap: anywhere; }
.zam-historia { list-style: none; margin: 0; padding: 0; font-size: .85rem; display: grid; gap: .25rem; }
@media (max-width: 52rem) {
    .zam-wiersz {
        grid-template-columns: 4rem minmax(0, 1fr) auto;
        grid-template-areas: "nr kto kwota" "nr platnosc status";
    }
    .zam-nr { grid-area: nr; align-self: start; }
    .zam-kto { grid-area: kto; }
    .zam-kwota { grid-area: kwota; }
    .zam-platnosc { grid-area: platnosc; }
    .zam-status { grid-area: status; }
    .zam-rozwin { display: none; }
    .zam-uwaga { margin-left: 4.9rem; }
    .zam-tresc { grid-template-columns: minmax(0, 1fr); }
}

/* Klienci: tabela na komputerze, karty z podpisami na telefonie. */
.tabela-klientow { padding: 0; overflow: hidden; }
.klient {
    display: grid; gap: .3rem 1rem; align-items: center; padding: .7rem 1rem;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) 6.5rem 5rem 6.5rem 4.5rem;
    border-bottom: 1px solid var(--ramka); font-size: .92rem;
}
.klient:last-child { border-bottom: 0; }
.klient > span { min-width: 0; overflow-wrap: anywhere; }
.klient > span:nth-child(2) { display: flex; flex-direction: column; }
.klient a { color: inherit; }
.klient .stan { margin-left: .3rem; }
.klient-naglowek {
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--szary);
    background: var(--tlo-miekkie, var(--tlo));
}
@media (max-width: 52rem) {
    .klient { grid-template-columns: 1fr 1fr; }
    .klient > span:nth-child(-n+2) { grid-column: 1 / -1; }
    .klient > span[data-e]::before { content: attr(data-e) ': '; color: var(--szary); font-size: .8rem; }
    .klient-naglowek { display: none; }
}

.pasek-kasy { display: flex; gap: .75rem; flex-wrap: wrap; padding: .75rem; }
.pasek-kasy > * { min-width: 12rem; }
.kategorie-kasy { margin: .6rem 0; }
.kategorie-kasy button { font-weight: 600; }
@media (min-width: 60rem) {
    .kolumna-kasy { position: sticky; top: calc(var(--pasek-h) + 1rem); }
}

/* ── Runda 3: karty unoszą się cieniem zamiast cienkich linii ──────────
 *
 * Plan zebrany z uwag Gemini i GPT: mniej „tabeli w Excelu". Na ciemnym
 * motywie cień nie istnieje, więc tam ramka wraca.
 */
.karta, .pozycja, .lokal { border-color: transparent; }
[data-motyw="ciemny"] .karta, [data-motyw="ciemny"] .pozycja,
[data-motyw="ciemny"] .lokal { border-color: var(--ramka); }
.naglowek-lokalu { border-bottom-color: var(--ramka); }

/* Cień w kolorze marki pod przyciskami, które kończą krok. Bez gradientu:
   akcent z panelu bywa jasnożółty, a gradient zakłada pomarańcz. */
.guzik.duzy, .pasek-dolny .guzik, #z-zloz {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--marka) 35%, transparent);
}
.guzik.duzy:active { box-shadow: none; }

.pozycja .opis { font-size: .9rem; }
.fakt { font-size: .85rem; }

/* Fokus ląduje na nazwie produktu po otwarciu szuflady (czytnik ekranu
   i klawiatura) — bez ramki, bo to nie pole do edycji. */
.szuflada-glowa h2:focus { outline: 0; }

/* Dopowiedzenie, które na telefonie łamało guzik na dwie linie
   („Odbiór / osobisty") — tam wystarcza samo „Odbiór". */
@media (max-width: 30rem) { .tylko-szeroki { display: none; } }

/* ── Zaznaczenie i fokus: kreska z domieszką tuszu ─────────────────────
 *
 * Wybrana opcja i płatność: jasny odcień akcentu + kreska akcentu
 * zmieszanego z kolorem tekstu. Sam akcent jako obrys nie wystarcza —
 * żółty na bieli ma kontrast 1,2:1 i wybranej opcji po prostu nie widać.
 * Domieszka tuszu działa dla KAŻDEGO koloru z panelu i na obu motywach
 * (na ciemnym `--tekst` jest jasny, więc kreska też jasnieje).
 */
:root { --marka-kreska: color-mix(in srgb, var(--marka) 55%, var(--tekst)); }
.opcja:has(input:checked), .platnosc:has(input:checked) {
    border-color: var(--marka-kreska);
    box-shadow: inset 0 0 0 1px var(--marka-kreska);
    background: color-mix(in srgb, var(--marka) 14%, var(--karta));
}
input:focus, select:focus, textarea:focus { border-color: var(--marka-kreska); }
.guzik:focus-visible, .pozycja:focus-visible { outline: 2px solid var(--tekst); outline-offset: 3px; }

/* ── Układ: Wystawa ────────────────────────────────────────────────────
 *
 * Trzecia warstwa wyglądu (data-uklad). Ekspres to układ domyślny, czyli
 * wszystko powyżej; Wystawa przestawia TE SAME komponenty pod markę, która
 * sprzedaje zdjęciem: hero w dwóch kolumnach (tekst i formularz obok
 * fotografii), menu z dużymi kartami ze zdjęciem u góry, większe nagłówki
 * działów i kafle. Formularz adresu, koszyk i checkout bez zmian — to
 * rozmieszczenie, nie druga strona (_meta/RESTIMO-STRONA-WWW.md, 5.2).
 *
 * Stoi PRZED charakterami: gdy charakter ustawia np. rozmiar nagłówka
 * działu (Kraft, Street), wygrywa charakter.
 */
[data-uklad="wystawa"] .logo img { height: 2.6rem; }

/* Hero na komputerze: zdjęcie w prawej połowie jako osobny panel (pseudo-
   element, żeby kadrować `cover` w połowie, a nie w całym pasie), lewa
   połowa w kolorze tuszu z tekstem i formularzem. */
@media (min-width: 64rem) {
    [data-uklad="wystawa"] .hero.z-grafika {
        position: relative;
        background: var(--tusz);
        min-height: 40rem;
        padding: 3.5rem 1rem;
    }
    [data-uklad="wystawa"] .hero.z-grafika::after {
        content: '';
        position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
        background: var(--hero-d) center / cover no-repeat;
        /* Miękkie wejście zdjęcia w tusz, żeby szew nie wyglądał jak błąd. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4rem);
                mask-image: linear-gradient(90deg, transparent 0, #000 4rem);
    }
    [data-uklad="wystawa"] .hero.z-grafika .hero-wnetrze { position: relative; z-index: 1; }
    [data-uklad="wystawa"] .hero.z-grafika .hero-tekst,
    [data-uklad="wystawa"] .hero.z-grafika .hero-karta { max-width: min(30rem, 44vw); }
    [data-uklad="wystawa"] .hero.z-grafika h1 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); text-shadow: none; }
    [data-uklad="wystawa"] .hero.z-grafika .hero-karta { background: var(--karta); }
}

/* Hero na telefonie: zdjęcie DUŻE i u góry, tytuł na jego dolnej krawędzi,
   formularz pod spodem — nadal na pierwszym ekranie (zdjęcie ma limit
   wysokości liczony od ekranu). */
@media (max-width: 63.99rem) {
    [data-uklad="wystawa"] .hero.z-grafika {
        position: relative;
        background: var(--tusz);
        padding: clamp(11rem, 34vh, 15rem) 1rem 1.25rem;
        min-height: 0;
    }
    [data-uklad="wystawa"] .hero.z-grafika::before {
        content: '';
        position: absolute; top: 0; left: 0; right: 0;
        height: calc(clamp(11rem, 34vh, 15rem) + 4rem);
        background:
            linear-gradient(180deg, transparent 45%, var(--tusz) 100%),
            var(--hero-m) center / cover no-repeat;
    }
    [data-uklad="wystawa"] .hero.z-grafika .hero-wnetrze { position: relative; z-index: 1; }
    [data-uklad="wystawa"] .hero.z-grafika .hero-karta { margin-top: 1rem; background: var(--karta); }
}

/* Menu: karta ze zdjęciem u góry na całą szerokość. W znacznikach zdjęcie
   stoi PO treści, więc kolumna odwrócona — bez zmian w JavaScripcie. */
[data-uklad="wystawa"] .pozycja:not(.bez-zdjecia) {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0;
    padding: 0;
    overflow: hidden;
}
[data-uklad="wystawa"] .pozycja:not(.bez-zdjecia) > div { padding: .85rem .95rem .95rem; }
[data-uklad="wystawa"] .pozycja .miniatura {
    aspect-ratio: 16 / 10;
    border-radius: 0;
    align-self: stretch;
}
[data-uklad="wystawa"] .pozycja .nazwa { font-size: 1.12rem; }
[data-uklad="wystawa"] .pozycja .opis { -webkit-line-clamp: 3; }
[data-uklad="wystawa"] .pozycje { gap: 1rem; }

/* Działy: nagłówek jak w karcie restauracji, większy i z oddechem. */
[data-uklad="wystawa"] .grupa { margin-bottom: 3rem; }
[data-uklad="wystawa"] .grupa h2 { font-size: clamp(1.6rem, 3.6vw, 2.1rem); margin-bottom: 1rem; }

/* Kafle promocyjne większe i szersze — Wystawa sprzedaje obrazem. */
[data-uklad="wystawa"] .promocje { grid-auto-columns: minmax(18rem, 1fr); gap: 1rem; }
[data-uklad="wystawa"] .promo img { aspect-ratio: 16 / 10; }
[data-uklad="wystawa"] .promo figcaption strong { font-size: 1.3rem; }
@media (max-width: 40rem) { [data-uklad="wystawa"] .promocje { grid-auto-columns: 88%; } }

/* Baner nad menu wyższy. */
[data-uklad="wystawa"] .baner-lokalu img { aspect-ratio: 5 / 2; }
@media (max-width: 40rem) { [data-uklad="wystawa"] .baner-lokalu img { aspect-ratio: 4 / 3; } }

/* ── Układ: Katalog ────────────────────────────────────────────────────
 *
 * Dla marek z dużym menu (kebaby, talerze, obiady, zestawy, napoje):
 * przegląda się DZIAŁAMI. Telefon — kafle działów na początku menu, a pod
 * nimi zwykły przyklejony pasek do skakania po przewinięciu. Komputer —
 * działy jako przyklejona kolumna z lewej, menu w środku, koszyk z prawej.
 * Pozycje w zwartych wierszach, żeby na ekran weszło ich więcej.
 * Kafle (`.kafle-kategorii`) rysuje sklep zawsze; poza Katalogiem są ukryte.
 */
.kafle-kategorii { display: none; }

[data-uklad="katalog"] .kafle-kategorii {
    display: grid;
    /* Trzy w rzędzie na telefonie: przegląd działów ma się zmieścić
       na jednym, dwóch ekranach, a nie trzech. */
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}
[data-uklad="katalog"] .kafle-kategorii button {
    font: inherit; color: var(--tekst); text-align: left; cursor: pointer;
    display: grid; grid-template-rows: auto 1fr; gap: .1rem;
    padding: 0; overflow: hidden;
    background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r);
    box-shadow: var(--cien);
}
[data-uklad="katalog"] .kafle-kategorii img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--tlo-miekkie);
}
[data-uklad="katalog"] .kafle-kategorii .nazwa {
    padding: .45rem .45rem 0; font-weight: 700; font-size: .8rem; line-height: 1.2;
    /* Długie nazwy działów („Wegetariańskie") dzielą się z łącznikiem
       (lang="pl"), a dopiero w ostateczności łamią bez niego. */
    hyphens: auto; overflow-wrap: break-word;
}
[data-uklad="katalog"] .kafle-kategorii .ile { padding: 0 .6rem .5rem; color: var(--szary); font-size: .78rem; }
/* Dział bez zdjęcia: kafel w kolorze marki zamiast pustego prostokąta. */
[data-uklad="katalog"] .kafle-kategorii button:not(:has(img)) {
    background: var(--marka-mgla); border-color: var(--marka-obrys); min-height: 4.5rem; align-content: end;
}

/* Zwarte wiersze: mniejsza miniatura, opis w jednej linii, ciaśniej. */
[data-uklad="katalog"] .pozycje { gap: .5rem; }
[data-uklad="katalog"] .pozycja {
    grid-template-columns: minmax(0, 1fr) 4.75rem;
    gap: .7rem;
    padding: .6rem .7rem;
}
[data-uklad="katalog"] .pozycja.bez-zdjecia { grid-template-columns: minmax(0, 1fr); }
[data-uklad="katalog"] .pozycja .nazwa { font-size: .98rem; margin-bottom: .1rem; }
[data-uklad="katalog"] .pozycja .opis { -webkit-line-clamp: 1; font-size: .82rem; }
[data-uklad="katalog"] .pozycja .znacznik { font-size: .8rem; margin-top: .15rem; }
[data-uklad="katalog"] .pozycja .cena-rzad { margin-top: .35rem; }
[data-uklad="katalog"] .pozycja .dodaj { min-height: 2rem; padding: 0 .8rem; font-size: .85rem; }
[data-uklad="katalog"] .pozycja .cena { white-space: nowrap; }
[data-uklad="katalog"] .grupa { margin-bottom: 1.75rem; }
[data-uklad="katalog"] .grupa h2 { margin-bottom: .6rem; }

/* Komputer: działy w kolumnie z lewej. Siatka na #lewa tylko na ekranie
   menu (ma pasek kategorii); obszary nazwane, bo baner bywa, a bywa nie. */
@media (min-width: 64rem) {
    [data-uklad="katalog"] .kafle-kategorii { display: none; }
    /* Trzy kolumny (działy | menu | koszyk) potrzebują szerszej strony;
       wiersze w jednej kolumnie, dopóki środek nie zmieści dwóch wygodnie. */
    [data-uklad="katalog"] .sklep { max-width: 86rem; }
    [data-uklad="katalog"] .pozycje { grid-template-columns: minmax(0, 1fr); }
    [data-uklad="katalog"] #lewa:has(> .kategorie) {
        display: grid;
        grid-template-columns: 12.5rem minmax(0, 1fr);
        grid-template-areas: "baner baner" "glowa glowa" "kat szukaj" "kat menu";
        column-gap: 1.5rem;
        align-items: start;
    }
    [data-uklad="katalog"] #lewa > .baner-lokalu { grid-area: baner; }
    [data-uklad="katalog"] #lewa > .naglowek-lokalu { grid-area: glowa; }
    [data-uklad="katalog"] #lewa > .pole { grid-area: szukaj; }
    [data-uklad="katalog"] #lewa > #menu { grid-area: menu; }
    [data-uklad="katalog"] #lewa > .kategorie {
        grid-area: kat;
        position: sticky; top: calc(var(--pasek-h) + 1rem);
        max-height: calc(100vh - var(--pasek-h) - 2rem);
        overflow-y: auto;
        flex-direction: column; gap: .15rem;
        margin: 0; padding: 0;
        border-bottom: 0; background: transparent;
    }
    [data-uklad="katalog"] #lewa > .kategorie button {
        width: 100%; justify-content: flex-start; text-align: left; white-space: normal;
        padding: .55rem .7rem;
        border-bottom: 0; border-left: 3px solid transparent;
        border-radius: 0 var(--r-male) var(--r-male) 0;
        letter-spacing: .02em;
    }
    [data-uklad="katalog"] #lewa > .kategorie button:hover { background: var(--tlo-miekkie); }
    [data-uklad="katalog"] #lewa > .kategorie button[aria-current="true"] {
        background: var(--marka-mgla); border-left-color: var(--marka);
    }
}
@media (min-width: 80rem) {
    [data-uklad="katalog"] .pozycje { grid-template-columns: 1fr 1fr; }
}

/* ── Styl „kraft" (config `styl`) ──────────────────────────────────────
 *
 * Charakter odznaki Tat Döner: szeryf w nagłówkach, podwójna linia pod
 * kategorią, guziki jak stemple. Przełączany per marka, bo kod jest wspólny;
 * ceny, opisy i formularze zostają w Archivo — to ma się czytać, nie zdobić.
 */
[data-charakter="kraft"] { --stempel: rgba(23, 20, 17, .65); }
[data-charakter="kraft"][data-motyw="ciemny"] { --stempel: rgba(0, 0, 0, .85); }

[data-charakter="kraft"] .hero h1, [data-charakter="kraft"] .grupa h2,
[data-charakter="kraft"] .naglowek-lokalu h1, [data-charakter="kraft"] .karta-adresu h2,
[data-charakter="kraft"] .szuflada-glowa h2 {
    font-family: Bitter, Georgia, "Times New Roman", serif;
    font-weight: 800;
    letter-spacing: -.02em;
}
[data-charakter="kraft"] .grupa h2 {
    font-size: clamp(1.375rem, 3vw, 1.75rem);
    border-bottom: 4px double var(--tekst);
    padding-bottom: .4rem;
}
/* Stemple: twardy cień zamiast poświaty w kolorze marki. */
[data-charakter="kraft"] .guzik.duzy, [data-charakter="kraft"] .pasek-dolny .guzik,
[data-charakter="kraft"] #z-zloz, [data-charakter="kraft"] .pozycja .dodaj {
    border: 1px solid color-mix(in srgb, var(--tekst) 25%, transparent);
    box-shadow: 0 3px 0 var(--stempel);
    font-weight: 800;
}
[data-charakter="kraft"] .guzik.duzy:active, [data-charakter="kraft"] .pasek-dolny .guzik:active,
[data-charakter="kraft"] #z-zloz:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--stempel); }
/* Okrągła odznaka: bez białej karty i cienia pod spodem. */
[data-charakter="kraft"] .hero-logo {
    width: 8.5rem; height: 8.5rem;
    background: transparent; box-shadow: none; padding: 0; border-radius: 0;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35));
}
[data-charakter="kraft"] .lokal-logo { background: transparent; padding: 0; }
@media (max-width: 40rem) {
    [data-charakter="kraft"] .hero-marka .hero-logo { width: 5.5rem; height: 5.5rem; }
}

/* ── Charaktery: Street, Neon, Bistro, Nowoczesny ──────────────────────
 *
 * Charakter to paczka: krój nagłówków i tekstu, zaokrąglenia, cienie
 * i kształt guzików. Kolory NIE — te daje paleta, więc każdy charakter
 * działa z każdą paletą (_meta/RESTIMO-STRONA-WWW.md, sekcja 5.3).
 * Ustawiamy tylko tokeny i kilka nadpisań na tych samych selektorach co
 * Kraft; nowy charakter = nowy blok tutaj, bez ruszania komponentów.
 *
 * Fonty są u nas (assets/fonty, WOFF2, latin + latin-ext — polskie litery),
 * reguły @font-face na końcu pliku. Przeglądarka pobiera krój dopiero wtedy,
 * gdy coś go używa, więc strona ładuje fonty WYŁĄCZNIE swojego charakteru.
 */

/* Wspólne: krój nagłówków i tekstu jako zmienne charakteru. */
:is([data-charakter="street"], [data-charakter="neon"], [data-charakter="bistro"], [data-charakter="nowoczesny"]) body {
    font-family: var(--font-tekst);
}
:is([data-charakter="street"], [data-charakter="neon"], [data-charakter="bistro"], [data-charakter="nowoczesny"])
    :is(h1, h2, h3, .logo-nazwa) {
    font-family: var(--font-naglowki);
}

/* Street — miejski szyld: wąski krój, wersaliki, kontur i twardy cień. */
[data-charakter="street"] {
    --font-naglowki: "Barlow Condensed", "Arial Narrow", Archivo, sans-serif;
    --font-tekst: Barlow, Archivo, "Segoe UI", system-ui, sans-serif;
    --r: 4px;
    --r-male: 4px;
    --stempel: color-mix(in srgb, var(--tekst) 85%, transparent);
}
[data-charakter="street"] :is(h1, h2, h3) { font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
[data-charakter="street"] .hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); letter-spacing: .005em; }
[data-charakter="street"] .grupa h2 {
    font-size: clamp(1.5rem, 3.4vw, 2rem);
    border-left: 6px solid var(--marka);
    padding-left: .6rem;
}
[data-charakter="street"] :is(.guzik.duzy, .pasek-dolny .guzik, #z-zloz, .pozycja .dodaj) {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
    border: 2px solid var(--tekst);
    box-shadow: 3px 3px 0 var(--stempel);
}
[data-charakter="street"] :is(.guzik.duzy, .pasek-dolny .guzik, #z-zloz, .pozycja .dodaj):active {
    transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--stempel);
}
[data-charakter="street"] :is(.karta, .lokal, .pozycja) { border: 2px solid var(--ramka-mocna); box-shadow: none; }
[data-charakter="street"] .kategorie button { text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* Neon — nocny kebab: wysoki krój, ostrzejsze rogi, poświata tylko na akcji.
   Najlepiej z ciemną paletą (Neon, Ogień, Bordo, Węgiel); na jasnej działa,
   tylko bez efektu „nocy". */
[data-charakter="neon"] {
    --font-naglowki: Oswald, "Arial Narrow", Archivo, sans-serif;
    --font-tekst: Rubik, Archivo, "Segoe UI", system-ui, sans-serif;
    --r: 8px;
    --r-male: 8px;
}
[data-charakter="neon"] body {
    background:
        radial-gradient(70rem 40rem at 85% -10%, color-mix(in srgb, var(--marka) 14%, transparent), transparent 70%),
        var(--tlo);
    background-attachment: fixed;
}
[data-charakter="neon"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
[data-charakter="neon"] .hero h1 { letter-spacing: .02em; }
[data-charakter="neon"] .grupa h2 { color: var(--marka-tekst); letter-spacing: .06em; }
[data-charakter="neon"] :is(.guzik.duzy, .pasek-dolny .guzik, #z-zloz, .pozycja .dodaj) {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--marka) 60%, transparent),
                0 0 18px color-mix(in srgb, var(--marka) 45%, transparent);
}
[data-charakter="neon"] .kategorie button[aria-current="true"] {
    box-shadow: 0 0 14px color-mix(in srgb, var(--marka) 40%, transparent);
}

/* Bistro — rodzinny bar z obiadami: szeryf w nagłówkach, miękko i spokojnie.
   Bez wersalików: „Zupa dnia" ma wyglądać jak z karty, nie z szyldu. */
[data-charakter="bistro"] {
    --font-naglowki: Lora, Georgia, "Times New Roman", serif;
    --font-tekst: "Nunito Sans", Archivo, "Segoe UI", system-ui, sans-serif;
    --r: 18px;
    --r-male: 12px;
    --cien: 0 2px 10px rgba(20, 17, 14, .06), 0 10px 30px rgba(20, 17, 14, .06);
    --cien-uniesiony: 0 10px 30px rgba(20, 17, 14, .10);
}
[data-charakter="bistro"][data-motyw="ciemny"] {
    --cien: 0 2px 10px rgba(0, 0, 0, .35);
    --cien-uniesiony: 0 10px 30px rgba(0, 0, 0, .45);
}
[data-charakter="bistro"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: -.01em; }
[data-charakter="bistro"] .hero h1 { text-transform: none; letter-spacing: -.015em; }
[data-charakter="bistro"] .grupa h2 { font-style: italic; font-weight: 600; }
[data-charakter="bistro"] :is(.guzik.duzy, .pasek-dolny .guzik, #z-zloz) { border-radius: 999px; font-weight: 700; }

/* Nowoczesny — fast casual: jeden geometryczny krój, płasko, cienie ledwie. */
[data-charakter="nowoczesny"] {
    --font-naglowki: Manrope, Archivo, "Segoe UI", system-ui, sans-serif;
    --font-tekst: Manrope, Archivo, "Segoe UI", system-ui, sans-serif;
    --r: 14px;
    --r-male: 12px;
    --cien: 0 1px 2px rgba(20, 17, 14, .05);
    --cien-uniesiony: 0 4px 12px rgba(20, 17, 14, .08);
}
[data-charakter="nowoczesny"] :is(h1, h2, h3) { font-weight: 800; letter-spacing: -.03em; }
[data-charakter="nowoczesny"] .hero h1 { text-transform: none; letter-spacing: -.045em; }
[data-charakter="nowoczesny"] :is(.karta, .lokal, .pozycja) { box-shadow: none; border: 1px solid var(--ramka); }
[data-charakter="nowoczesny"] :is(.guzik.duzy, .pasek-dolny .guzik, #z-zloz, .pozycja .dodaj) {
    box-shadow: none; font-weight: 700;
}

/* ── Arkusz produktu na telefonie ──────────────────────────────────────
 * Zdjęcie 16:10 na całą szerokość zajmowało ~230 px i wypychało nazwę
 * i pierwszą grupę pod zgięcie. Stepper w stopce do rozmiaru palca.
 */
@media (max-width: 40rem) {
    .produkt-foto { aspect-ratio: auto; height: 10.5rem; }
}
.szuflada-stopka .licznik button { width: 2.75rem; height: 2.75rem; }

/* ── Kasa: rzadziej potrzebne pola zwinięte ────────────────────────── */
.szczegoly summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--marka-tekst);
    min-height: var(--dotyk);
    display: flex; align-items: center; gap: .4rem;
    list-style: none;
}
.szczegoly summary::-webkit-details-marker { display: none; }
.szczegoly summary::before { content: "+"; font-size: 1.2rem; width: 1rem; }
.szczegoly[open] summary::before { content: "−"; }
.pozycja-koszyka .edytuj { padding: 0; margin-top: .15rem; font-size: .85rem; }

/* Lokal bez zamawiania online: na liście, ale nie wygląda na klikalny. */
.lokal.na-miejscu { cursor: default; box-shadow: none; background: var(--tlo-miekkie); }
.lokal.na-miejscu:hover { border-color: transparent; box-shadow: none; }
.lokal.na-miejscu .nazwa { color: var(--szary); }

/* Lokal z jednym sposobem odbioru: informacja zamiast przełącznika. */
.tylko-jeden-tryb {
    display: flex; align-items: center; gap: .45rem;
    padding: .55rem .8rem;
    border-radius: var(--r-male);
    background: color-mix(in srgb, var(--tekst) 6%, var(--karta));
    font-size: .92rem;
}
.tylko-jeden-tryb svg { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }

/* Kafle na pełnej szerokości strony: niższy kadr, żeby trzy zdjęcia 4:3
   nie zajmowały całego ekranu nad listą lokali. */
@media (min-width: 64rem) { .promo img { aspect-ratio: 16 / 9; } }

/* Wyniki wyszukiwania adresu stoją w wąskiej karcie hero — tam jeden pod drugim. */
.karta-adresu .lokale { grid-template-columns: minmax(0, 1fr); }

/* To samo logo marki w każdej karcie lokalu nic nie mówi, a w czterech
   kolumnach zjadało miejsce na nazwę i godziny — na liście go nie ma. */
.lokale .lokal-logo { display: none; }
.lokale .lokal { align-items: flex-start; }
.lokale .lokal .strzalka { align-self: center; }

/* ── Mapa lokali (strona startowa, pod listą) ──────────────────────────
 * isolation: warstwy Leafleta mają z-index 400+ i bez tego wychodziłyby
 * nad przyklejony pasek górny i szufladę koszyka.
 */
.mapa-lokali {
    height: 22rem;
    margin-top: 1rem;
    border-radius: 14px;
    border: 1px solid var(--ramka);
    overflow: hidden;
    position: relative; z-index: 0; isolation: isolate;
    background: var(--tlo-miekkie);
}
@media (max-width: 40rem) { .mapa-lokali { height: 18rem; } }
.pinezka { color: var(--marka); background: none; border: 0; }
.pinezka svg { width: 36px; height: 36px; fill: currentColor;
               filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.pinezka svg circle { fill: var(--na-marce); }
.mapa-lokali .leaflet-popup-content-wrapper { border-radius: 12px; }
.mapa-lokali .leaflet-popup-content { margin: .75rem .9rem; font: inherit; color: var(--tekst); }
.mapa-lokali .leaflet-popup-content-wrapper, .mapa-lokali .leaflet-popup-tip { background: var(--karta); }
.dymek-lokalu { display: grid; gap: .25rem; min-width: 15rem; }
.dymek-lokalu strong { font-size: 1rem; }
.dymek-lokalu .podpowiedz { margin: 0; }
.dymek-guziki { display: flex; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.dymek-guziki .guzik { padding: .45rem .8rem; font-size: .9rem; text-decoration: none; }

/* ── Ustawienia szczegółowe (BrandTheme v2, faza 6) ───────────────────
 *
 * Osiem pokręteł ponad układ, charakter i paletę (_meta/RESTIMO-STRONA-WWW.md,
 * 5.5). Każde to atrybut na <html>, który serwer stawia TYLKO przy wartości
 * innej niż domyślna — bez atrybutu strona wygląda dokładnie jak przed nimi.
 * Selektory z `html` na początku: pokrętło ma wygrać z układem i charakterem
 * (ustawił je właściciel świadomie, ponad zestawem).
 */

/* Pasek górny: jasny albo w kolorze marki (domyślnie ciemny, tusz). */
html[data-naglowek="jasny"] .pasek {
    background: var(--karta); color: var(--tekst); border-bottom: 1px solid var(--ramka);
}
html[data-naglowek="jasny"] .pasek :is(a, .ikonka, .chip) { color: var(--tekst); }
html[data-naglowek="jasny"] .pasek .ikonka:hover { background: var(--tlo-miekkie); }
html[data-naglowek="jasny"] .chip { border-color: var(--ramka-mocna); }
html[data-naglowek="jasny"] .chip svg { fill: var(--szary); }
html[data-naglowek="marka"] .pasek { background: var(--marka); color: var(--na-marce); }
html[data-naglowek="marka"] .pasek :is(a, .ikonka, .chip) { color: var(--na-marce); }
html[data-naglowek="marka"] .chip { border-color: color-mix(in srgb, var(--na-marce) 40%, transparent); }
html[data-naglowek="marka"] .chip svg { fill: var(--na-marce); }
/* Koszyk w pasku jest w kolorze marki — na pasku w kolorze marki by zniknął. */
html[data-naglowek="marka"] .pasek .koszyk-guzik { background: var(--tusz); border-color: var(--tusz); color: #fff; }

/* Hero zwarte: menu i lokale bliżej góry. */
html[data-hero="zwarta"] .hero { padding-top: 1.5rem; }
html[data-hero="zwarta"] .hero.z-grafika { min-height: 24rem; padding-top: 2rem; padding-bottom: 2rem; }
@media (max-width: 40rem) {
    html[data-hero="zwarta"] .hero.z-grafika .hero-karta { margin-top: clamp(3rem, 12vh, 5rem); }
}
@media (min-width: 64rem) {
    html[data-hero="zwarta"][data-uklad="wystawa"] .hero.z-grafika { min-height: 30rem; padding: 2.5rem 1rem; }
}
@media (max-width: 63.99rem) {
    html[data-hero="zwarta"][data-uklad="wystawa"] .hero.z-grafika { padding-top: clamp(7rem, 22vh, 10rem); }
    html[data-hero="zwarta"][data-uklad="wystawa"] .hero.z-grafika::before { height: calc(clamp(7rem, 22vh, 10rem) + 4rem); }
}

/* Ramka logo: zaokrąglona albo okrągła plakietka na tle karty. */
html:is([data-logo="zaokraglona"], [data-logo="okragla"]) :is(.logo img, .hero-logo, .lokal-logo) {
    background: var(--karta); padding: .12em; object-fit: contain;
}
html[data-logo="zaokraglona"] :is(.logo img, .hero-logo, .lokal-logo) { border-radius: 22%; }
html[data-logo="okragla"] :is(.logo img, .hero-logo, .lokal-logo) { border-radius: 50%; }
html[data-logo="okragla"] .logo img { width: 2rem; }

/* Zdjęcia produktów: proporcje i kształt. */
html[data-zdjecia="poziome"] .pozycja .miniatura { aspect-ratio: 4 / 3; }
html[data-zdjecia="poziome"] .pozycja:not(.bez-zdjecia) { grid-template-columns: minmax(0, 1fr) 9rem; }
html[data-zdjecia="poziome"][data-uklad="katalog"] .pozycja:not(.bez-zdjecia),
html[data-zdjecia="poziome"][data-gestosc="zwarta"] .pozycja:not(.bez-zdjecia) { grid-template-columns: minmax(0, 1fr) 6.25rem; }
html[data-zdjecia="poziome"][data-uklad="wystawa"] .pozycja .miniatura { aspect-ratio: 16 / 9; }
html[data-ksztalt="kwadrat"] .pozycja .miniatura { border-radius: 2px; }
html[data-ksztalt="zaokraglone"]:not([data-uklad="wystawa"]) .pozycja .miniatura { border-radius: 1.25rem; }

/* Gęstość: zwarta = wiersze jak w Katalogu, w dowolnym układzie. */
html[data-gestosc="zwarta"] .pozycje { gap: .5rem; }
html[data-gestosc="zwarta"] .pozycja { gap: .7rem; padding: .6rem .7rem; }
html[data-gestosc="zwarta"]:not([data-uklad="wystawa"]) .pozycja:not(.bez-zdjecia) { grid-template-columns: minmax(0, 1fr) 4.75rem; }
html[data-gestosc="zwarta"][data-uklad="wystawa"] .pozycja:not(.bez-zdjecia) { padding: 0; }
html[data-gestosc="zwarta"][data-uklad="wystawa"] .pozycja:not(.bez-zdjecia) > div { padding: .6rem .7rem .7rem; }
html[data-gestosc="zwarta"] .pozycja .opis { -webkit-line-clamp: 1; font-size: .82rem; }
html[data-gestosc="zwarta"] .pozycja .cena { white-space: nowrap; }
html[data-gestosc="zwarta"] .pozycja .dodaj { min-height: 2rem; padding: 0 .8rem; font-size: .85rem; }

/* Pasek kategorii jako pigułki (domyślnie podkreślenie). Boczna kolumna
   Katalogu na komputerze zostaje sobą — ma własne, mocniejsze reguły. */
html[data-kategorie="pigulki"] .kategorie { gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
html[data-kategorie="pigulki"] .kategorie button {
    border: 1px solid var(--ramka-mocna); border-radius: 999px; padding: .45rem .9rem;
    background: var(--karta); color: var(--tekst);
}
html[data-kategorie="pigulki"] .kategorie button[aria-current="true"] {
    background: var(--marka); border-color: var(--marka); color: var(--na-marce);
}

/* Menu bez zdjęć: dla marek bez sesji zdjęciowej — tekst zamiast pustych
   ramek. Działy w kaflach Katalogu zdjęcia grup zachowują. */
html[data-bez-zdjec="1"] .pozycja .miniatura { display: none; }
html[data-bez-zdjec="1"] .pozycja:not(.bez-zdjecia) { grid-template-columns: minmax(0, 1fr); }
html[data-bez-zdjec="1"][data-uklad="wystawa"] .pozycja:not(.bez-zdjecia) { display: grid; padding: .85rem .95rem; }
html[data-bez-zdjec="1"][data-uklad="wystawa"] .pozycja:not(.bez-zdjecia) > div { padding: 0; }

/* ── Fonty charakterów (self-host) ─────────────────────────────────────
 * Wygenerowane z Google Fonts (licencja SIL OFL 1.1 — teksty w
 * assets/fonty/OFL-*.txt), tylko zestawy latin i latin-ext. Pliki nazwane
 * skrótem adresu źródła; nowa wersja fontu = nowy plik. Archivo i Bitter
 * (Klasyczny, Kraft) nadal idą z Google Fonts w index.php.
 */
/* Barlow Condensed — latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/barlow-condensed-latin-ext-e0ffcfa6.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed — latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/barlow-condensed-latin-5048d744.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;
}
/* Barlow Condensed — latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/barlow-condensed-latin-ext-a1e409dd.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed — latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/barlow-condensed-latin-e7616768.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;
}
/* Barlow Condensed — latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/barlow-condensed-latin-ext-b2c0bbcc.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow Condensed — latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/barlow-condensed-latin-00a5e45f.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;
}
/* Barlow — latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-ext-50e47d37.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow — latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-acc3a2d8.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;
}
/* Barlow — latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-ext-9afb00e9.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow — latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-81281c6a.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;
}
/* Barlow — latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-ext-5e03ee67.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow — latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-4b3ff090.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;
}
/* Barlow — latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-ext-713fe24b.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow — latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-c68ac8cd.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;
}
/* Barlow — latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-ext-c64144e6.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow — latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/barlow-latin-a7447386.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;
}
/* Oswald — latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/oswald-latin-ext-8cf70eb3.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Oswald — latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/oswald-latin-78c7a4dd.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;
}
/* Oswald — latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/oswald-latin-ext-8cf70eb3.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Oswald — latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/oswald-latin-78c7a4dd.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;
}
/* Oswald — latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/oswald-latin-ext-8cf70eb3.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Oswald — latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/oswald-latin-78c7a4dd.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;
}
/* Rubik — latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-ext-20c4b085.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rubik — latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-0ae40db1.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;
}
/* Rubik — latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-ext-20c4b085.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rubik — latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-0ae40db1.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;
}
/* Rubik — latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-ext-20c4b085.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rubik — latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-0ae40db1.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;
}
/* Rubik — latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-ext-20c4b085.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rubik — latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-0ae40db1.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;
}
/* Rubik — latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-ext-20c4b085.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Rubik — latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/rubik-latin-0ae40db1.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;
}
/* Lora — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/lora-latin-ext-b047e391.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/lora-latin-1ace0d36.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;
}
/* Lora — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/lora-latin-ext-b047e391.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/lora-latin-1ace0d36.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;
}
/* Lora — latin-ext */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/lora-latin-ext-b047e391.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Lora — latin */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/lora-latin-1ace0d36.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;
}
/* Nunito Sans — latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-ext-8aa72ded.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans — latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-426536c5.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;
}
/* Nunito Sans — latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-ext-8aa72ded.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans — latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-426536c5.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;
}
/* Nunito Sans — latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-ext-8aa72ded.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans — latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-426536c5.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;
}
/* Nunito Sans — latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-ext-8aa72ded.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans — latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-426536c5.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;
}
/* Nunito Sans — latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-ext-8aa72ded.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito Sans — latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonty/nunito-sans-latin-426536c5.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;
}
/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-ext-7965cb05.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-bcbadccc.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;
}
/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-ext-7965cb05.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-bcbadccc.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;
}
/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-ext-7965cb05.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-bcbadccc.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;
}
/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-ext-7965cb05.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-bcbadccc.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;
}
/* Manrope — latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-ext-7965cb05.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope — latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonty/manrope-latin-bcbadccc.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;
}