/* =============================================================================
   styl.css · wspólne: tokeny, tryb nocny, baza i komponenty używane na stronie publicznej i w panelu
   Cukiernia Śliwka · cukierniasliwka.pl

   Układ plików: styl.css (ten) + styl-klient.css (strona publiczna) ALBO styl-panel.css (panel). Każdy układ HTML
   ładuje ten plik i swój (src/strony/uklad.tsx, src/panel/uklad.tsx).

   Źródło: makiety v2 i v3 (makiety/v2/styl.css, makiety/v3-klient/styl-v3.css, makiety/v3-panel/styl-v3.css), stan z 08.10.2026 ~11:35.
   Przeniesione 1:1 poza zmianami wymaganymi przez aplikację:
    - tryb nocny jest zbiorem ROLI (tokenów) w dwóch identycznych blokach (atrybut data-motyw i prefers-color-scheme),
      a nie zestawem reguł dla komponentów (wcześniej: html[data-motyw="ciemny"] .przycisk itd.);
    - powierzchnie zawsze ciemne (menu panelu, pas hasła, logowanie) używają stałych --tusz / --krem-staly;
    - fonty self-hosted (public/fonty), zamiast Google Fonts.
   Zasady: mobile-first, kolory tylko z tokenów (pochodne liczone przez color-mix), dwa kroje (Cormorant Garamond, Iwona),
   zero stylów inline w HTML (CSP: style-src 'self'), cele dotykowe co najmniej 44 x 44 px (--cel).
   Zgięcie Duo rozłożonego leży w pasie x 421-469 px przy szerokości 890 px: od 768 do 1023 px układ to dwie połówki
   z rynną --rynna (48 px) na środku; w rynnie nie leżą przyciski, pola, nagłówki ani liczby.
   Punkty przełamań: 768 (tablet, Duo rozłożone), 1024 (desktop), 1280, 1360 (panel: kolumna boczna obok treści).
   ============================================================================= */

/* ---------- Fonty (self-hosted, font-display: swap; podzbiory latin i latin-ext pokrywają polskie znaki) ---------- */
/* Cormorant Garamond: plik zmiennościowy obsługuje 500 i 600 (ta sama zawartość pliku dla obu wag) */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonty/cormorant-garamond-500-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonty/cormorant-garamond-500-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonty/cormorant-garamond-500-kursywa-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/fonty/cormorant-garamond-500-kursywa-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Iwona (krój tekstu, decyzja Przemka 18.10.2026): GUST e-foundry, projekt Małgorzata Budyta (1975), digitalizacja Janusz M. Nowacki,
   wersja 0.995, GUST Font License (wolno osadzać). Osobny plik na grubość (OTF nie jest zmiennościowy): 400 Regular, 500 Medium,
   600 i 700 Bold, kursywa 400. Podzbiory latin i latin-ext jak w Google Fonts, cechy OpenType tylko kern, liga, locl, lnum, tnum, pnum
   (jak przygotować pliki: DEPLOY.md, „Kroje pisma”).
   Metryki: Iwona ma niższą wysokość x niż poprzedni krój (0,45 em wobec 0,54 em). size-adjust 105% podnosi ją do 0,47 em, a zdanie
   jest najwyżej o 3% szersze niż dotąd (110% dawało 8% i łamało menu i pasek). Wersaliki Iwony są szersze (H 0,79 em wobec 0,66 em),
   dlatego menu ma 13 px (styl-klient.css). ascent/descent-override (skalowane przez size-adjust: 1,09 + 0,27 em) dają tę samą
   wysokość line-height: normal co wcześniej i środek wersalików jak dotąd, więc napisy w przyciskach i pigułkach stoją na środku.
   600 idzie na Bold, nie na Medium: Medium Iwony jest niewiele cięższy od Regular i półgrube etykiety, menu i liczby traciły hierarchię
   (porównanie: makiety/v7c-kroje/wdrozone/waga-600-*.png). */
@font-face {
  font-family: 'Iwona';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/iwona-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Iwona';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/iwona-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Iwona';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonty/iwona-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Iwona';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonty/iwona-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Iwona';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonty/iwona-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Iwona';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/fonty/iwona-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Iwona';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/iwona-400-kursywa-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Iwona';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonty/iwona-400-kursywa-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  size-adjust: 105%;
  ascent-override: 104%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ---------- Tokeny: paleta, role, kształty, skala pisma ---------- */
:root {
  color-scheme: light;
  /* tożsamość */
  --sliwka-900: #2a0a52;
  --sliwka-700: #3f1283;
  --sliwka-500: #5a1fb8;
  --sliwka-100: #ece4f7;
  --sliwka-50: #f6f2fb;
  --zloto-500: #e3b422;
  --zloto-700: #b8901a;
  --krem-50: #fbf8f2;
  --krem-100: #f3ede2;
  --krem-200: #e7dfd0;
  --tekst-900: #1d1530;
  --tekst-600: #5c5470;
  --biel: #ffffff;

  /* statusy w panelu */
  --ok: #2f7d4f;
  --ok-tlo: #e6f3ea;
  --uwaga: #b9771d;
  --uwaga-tlo: #fbf0df;
  --blad: #a83a3a;
  --blad-tlo: #f9e5e5;

  /* panel */
  --panel-tlo: #f6f5f9;
  --panel-ramka: #e6e2ee;

  /* wydruk: czerń na bieli */
  --druk-tekst: #000000;
  --druk-tlo: #ffffff;

  /* pochodne tokenów. Powód: --zloto-700 na kremie daje 2,8:1, a --ok i --uwaga na własnych
     jasnych tłach 4,4:1 i 3,3:1. Mały tekst potrzebuje 4,5:1, więc ciemniejsze odcienie
     liczymy z tokenów bazowych (kontrasty sprawdza sprawdz.mjs).
     --zloto-duzy służy tylko dużym cyfrom (48 px), gdzie wystarczy 3:1.
     --obrys to granica pól i niewybranych chipów: min. 3:1 do bieli, kremu i tła panelu
     (WCAG 1.4.11). Wcześniej krem-200 dawał 1,3:1. */
  --zloto-tekst: color-mix(in srgb, var(--zloto-700) 64%, var(--tekst-900));
  --zloto-duzy: color-mix(in srgb, var(--zloto-700) 85%, var(--tekst-900));
  --ok-tekst: color-mix(in srgb, var(--ok) 80%, var(--tekst-900));
  --uwaga-tekst: color-mix(in srgb, var(--uwaga) 66%, var(--tekst-900));
  --blad-tekst: var(--blad);
  --obrys: color-mix(in srgb, var(--tekst-600) 72%, var(--biel));
  --wyszarzone: color-mix(in srgb, var(--tekst-600) 64%, var(--biel));
  --podpis-foto: color-mix(in srgb, var(--sliwka-700) 80%, var(--krem-100));
  --menu-tekst: color-mix(in srgb, var(--krem-staly) 78%, var(--tusz));
  --menu-linia: color-mix(in srgb, var(--krem-staly) 14%, var(--tusz));
  --zloto-linia: color-mix(in srgb, var(--zloto-700) 75%, transparent);

  /* kształty: skala promieni i cienie */
  --promien-xxs: 4px;
  --promien-xs: 8px;
  --promien-s: 10px;
  --promien-m: 12px;
  --promien: 14px;
  --promien-l: 20px;
  --promien-duzy: 24px;
  --promien-pelny: 999px;
  --cien: 0 10px 30px color-mix(in srgb, var(--sliwka-900) 8%, transparent);
  --cien-maly: 0 2px 10px color-mix(in srgb, var(--sliwka-900) 6%, transparent);

  /* skala pisma */
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-44: 44px;
  --fs-48: 48px;
  --fs-64: 64px;

  /* cele dotykowe i rynna zgięcia */
  --cel: 44px;
  --rynna: 48px;
  --pasek-zapisu-wys: 73px;

  /* kroje */
  --czcionka-ui: 'Iwona', system-ui, sans-serif;
  --czcionka-naglowki: 'Cormorant Garamond', Georgia, serif;

  --gutter: 16px;

  /* ---- STAŁE: te kolory nie zmieniają się w trybie nocnym (powierzchnie zawsze ciemne: menu panelu, pas hasła, logowanie) ---- */
  --tusz: #2a0a52;
  --sliwka-700-staly: #3f1283;
  --krem-staly: #fbf8f2;
  --bialy-staly: #ffffff;

  /* ---- ROLE zależne od motywu: nocą zmieniają się wartości, komponenty sięgają po role ---- */
  --na-przycisku: var(--biel);            /* napis na przycisku głównym (nocą ciemny, bo przycisk jest jasny) */
  --focus-na-przycisku: var(--zloto-500); /* obrys fokusu na przyciskach z ciemnym tłem */
  --obrys-na-pasie: var(--sliwka-100);    /* obrys edytowalnego tekstu na ciemnym pasie hasła */
  --obrys-zablokowany-na-pasie: var(--obrys);
  --logo-filtr: none;                     /* logo ma ciemny obrys: nocą dostaje jasną poświatę */

  /* pasek komunikatu: tło śliwkowe, tekst krem w obu trybach (złoto tylko jako linia 2 px i ikona, nigdy płaszczyzna) */
  --komunikat-tlo: var(--sliwka-700);
  --komunikat-tekst: #f3ede2;

  /* połowa kontenera przy dwóch połówkach z rynną (procent liczy się względem elementu, w którym użyty) */
  --polowka: calc((100% - var(--rynna)) / 2);
  /* wysokość przyklejonego paska zamówienia (do scroll-padding, żeby fokus nie chował się pod paskiem) */
  --pasek-zamow-wys: 100px;

  /* pochodne panelu (v3-panel): liczone z tokenów, więc nocą przeliczają się same */
  --znacznik-szary-tlo: color-mix(in srgb, var(--tekst-600) 12%, var(--biel));
  --tlo-zaznaczone: color-mix(in srgb, var(--sliwka-50) 55%, var(--biel));
  --rzeka: color-mix(in srgb, var(--sliwka-500) 55%, var(--biel));
  --kolko: color-mix(in srgb, var(--sliwka-500) 22%, transparent);
  --kolko-dom: color-mix(in srgb, var(--zloto-500) 50%, transparent);

  /* ---- Styl C „Złota nić” (strona publiczna, decyzja Przemka 15.10.2026; makiety/v4-premium/C-zlota-nic.html) ----
     Trzy kolory w roli: śliwka (scena i atrament), złoto (linie, a jako tekst TYLKO na śliwce), krem (karty i tekst na śliwce).
     Te wartości są stałe (nie zależą od motywu); role strony publicznej mapuje na nie styl-klient.css (sekcja „Złota nić”).
     Panel ich nie używa. Kontrasty: krem na scenie 17:1, złoto na scenie 11:1, atrament na kremie 14:1, złoto na kremie 1,6:1 (zakaz). */
  --scena-tlo: #13022c;           /* noc: tło całej strony publicznej */
  --scena-tlo-jasniejsze: #1d0446;/* górny poblask sceny (gradient) i powierzchnie na scenie */
  --sliwka-atrament: #300070;     /* śliwka z logo: napis na kremowym przycisku, tekst marki na kremie */
  --krem-karty: #faf6ee;          /* krem: karty produktów, arkusze formularzy i tekst na scenie */
  --zloto-na-sliwce: #f0c010;     /* złoto z logo: tekst wyłącznie na śliwce (>= 18 px albo pogrubiony), punkty, pieczęć */
  --zloto-linia-sceny: color-mix(in srgb, #f0c010 58%, transparent); /* włoskowe obwódki i linie na scenie */
  --krzywa-c: cubic-bezier(0.16, 1, 0.3, 1);
  /* grawerunek z owali (giloszowanie jak na banknocie), kafel 240 x 150 */
  --wzor-owale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150' fill='none' stroke='%23f0c010' stroke-width='.7'%3E%3Cg%3E%3Cellipse cx='120' cy='75' rx='118' ry='73'/%3E%3Cellipse cx='120' cy='75' rx='96' ry='59'/%3E%3Cellipse cx='120' cy='75' rx='74' ry='45'/%3E%3Cellipse cx='120' cy='75' rx='52' ry='31'/%3E%3Cellipse cx='120' cy='75' rx='30' ry='17'/%3E%3C/g%3E%3Cg%3E%3Cellipse cx='0' cy='0' rx='118' ry='73'/%3E%3Cellipse cx='240' cy='0' rx='118' ry='73'/%3E%3Cellipse cx='0' cy='150' rx='118' ry='73'/%3E%3Cellipse cx='240' cy='150' rx='118' ry='73'/%3E%3Cellipse cx='0' cy='0' rx='74' ry='45'/%3E%3Cellipse cx='240' cy='0' rx='74' ry='45'/%3E%3Cellipse cx='0' cy='150' rx='74' ry='45'/%3E%3Cellipse cx='240' cy='150' rx='74' ry='45'/%3E%3C/g%3E%3C/svg%3E");
  /* ten sam wzór ledwie widoczny (7,5%): tło sceny; pełny wzór odsłania tylko światło w hero */
  --wzor-owale-tlo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150' viewBox='0 0 240 150' fill='none' stroke='%23f0c010' stroke-width='.7' stroke-opacity='.075'%3E%3Cg%3E%3Cellipse cx='120' cy='75' rx='118' ry='73'/%3E%3Cellipse cx='120' cy='75' rx='96' ry='59'/%3E%3Cellipse cx='120' cy='75' rx='74' ry='45'/%3E%3Cellipse cx='120' cy='75' rx='52' ry='31'/%3E%3Cellipse cx='120' cy='75' rx='30' ry='17'/%3E%3C/g%3E%3Cg%3E%3Cellipse cx='0' cy='0' rx='118' ry='73'/%3E%3Cellipse cx='240' cy='0' rx='118' ry='73'/%3E%3Cellipse cx='0' cy='150' rx='118' ry='73'/%3E%3Cellipse cx='240' cy='150' rx='118' ry='73'/%3E%3Cellipse cx='0' cy='0' rx='74' ry='45'/%3E%3Cellipse cx='240' cy='0' rx='74' ry='45'/%3E%3Cellipse cx='0' cy='150' rx='74' ry='45'/%3E%3Cellipse cx='240' cy='150' rx='74' ry='45'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

/* ---------- Tryb nocny: ROLE kolorów (ARCHITEKTURA §11.4; wzór: wealthbuilder.pl) ----------
   Kolejność wyboru: ręczny wybór (atrybut data-motyw ustawiany skryptem z localStorage["sl-motyw"]) > prefers-color-scheme > jasny.
   Bez JS działa blok @media (prefers-color-scheme: dark), o ile nie ma wymuszonego motywu "jasny".
   Dwa bloki mają IDENTYCZNĄ treść (generowane razem): przy zmianie kolorów zmień oba. Komponenty nie mają reguł nocnych,
   bo używają tokenów; wyjątek to powierzchnie zawsze ciemne, które używają stałych (--tusz, --krem-staly). */
:root[data-motyw="ciemny"] {
  color-scheme: dark;
  --krem-50: #150a2b;     /* tło strony */
  --krem-100: #1d0f38;    /* sekcje */
  --krem-200: #3a2a5c;    /* obramowania */
  --biel: #22123f;        /* karty, nagłówek, pola */
  --tekst-900: #f3ede2;
  --tekst-600: #bdb3d1;
  --sliwka-900: #f3ede2;  /* w nocy "atrament" marki jest jasny: nagłówki i przyciski główne */
  --sliwka-700: #c9b3ff;  /* akcent linków */
  --sliwka-500: #c9b3ff;
  --sliwka-100: #2a1650;  /* początek gradientu miejsc na zdjęcia, chipy */
  --sliwka-50: #26143f;
  /* statusy i panel w nocy: pochodne --ok-tekst, --uwaga-tekst, --obrys liczą się z tych tokenów same */
  --ok: #5fbf88;
  --ok-tlo: #143a2b;
  --uwaga: #e0a13a;
  --uwaga-tlo: #3a2610;
  --blad: #f08a8a;
  --blad-tlo: #3d1a24;
  --panel-tlo: #1d0f38;
  --panel-ramka: #3a2a5c;
  /* role */
  --na-przycisku: #2a0a52;
  --focus-na-przycisku: var(--sliwka-500);
  --obrys-na-pasie: var(--sliwka-500);
  --obrys-zablokowany-na-pasie: var(--tekst-600);
  --logo-filtr: drop-shadow(0 0 6px color-mix(in srgb, var(--tekst-900) 35%, transparent));
  --komunikat-tlo: #22123f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    color-scheme: dark;
    --krem-50: #150a2b;     /* tło strony */
    --krem-100: #1d0f38;    /* sekcje */
    --krem-200: #3a2a5c;    /* obramowania */
    --biel: #22123f;        /* karty, nagłówek, pola */
    --tekst-900: #f3ede2;
    --tekst-600: #bdb3d1;
    --sliwka-900: #f3ede2;  /* w nocy "atrament" marki jest jasny: nagłówki i przyciski główne */
    --sliwka-700: #c9b3ff;  /* akcent linków */
    --sliwka-500: #c9b3ff;
    --sliwka-100: #2a1650;  /* początek gradientu miejsc na zdjęcia, chipy */
    --sliwka-50: #26143f;
    /* statusy i panel w nocy: pochodne --ok-tekst, --uwaga-tekst, --obrys liczą się z tych tokenów same */
    --ok: #5fbf88;
    --ok-tlo: #143a2b;
    --uwaga: #e0a13a;
    --uwaga-tlo: #3a2610;
    --blad: #f08a8a;
    --blad-tlo: #3d1a24;
    --panel-tlo: #1d0f38;
    --panel-ramka: #3a2a5c;
    /* role */
    --na-przycisku: #2a0a52;
    --focus-na-przycisku: var(--sliwka-500);
    --obrys-na-pasie: var(--sliwka-500);
    --obrys-zablokowany-na-pasie: var(--tekst-600);
    --logo-filtr: drop-shadow(0 0 6px color-mix(in srgb, var(--tekst-900) 35%, transparent));
    --komunikat-tlo: #22123f;
  }
}

/* ---------- 1. Reset i baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--czcionka-ui);
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--tekst-900);
  background: var(--krem-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* jeden kolor stanu "wybrane" w każdym kontekście */
body.klient { --wybrane: var(--sliwka-900); }
body.panel { --wybrane: var(--sliwka-700); }

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
summary { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--czcionka-naglowki);
  font-weight: 600;
  line-height: 1.12;
  color: var(--sliwka-900);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.005em;
}
h1 em, h2 em, h3 em { font-style: italic; font-weight: 500; }

.pomin {
  position: absolute; left: 16px; top: -120px; z-index: 100;
  padding: 12px 20px; border-radius: var(--promien-pelny); background: var(--sliwka-900); color: var(--biel);
  font-weight: 600; text-decoration: none;
}
.pomin:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--sliwka-500); outline-offset: 3px; }
.ciemne :focus-visible { outline-color: var(--zloto-500); }

.kontener { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tylko-druk { display: none; }

/* ---------- 2. Elementy wspólne ---------- */
/* etykieta pola: zdaniowo, 15 px (wcześniej wersaliki 12 px) */
.etykieta {
  display: block;
  font-family: var(--czcionka-ui);
  font-size: var(--fs-15); font-weight: 600; line-height: 1.4;
  color: var(--tekst-900);
}
.etykieta__wym { margin-left: 6px; font-size: var(--fs-14); font-weight: 500; color: var(--tekst-600); }
/* nadtytuł: krótka dekoracyjna etykieta, wersaliki 13 px */
.nadtytul {
  display: block;
  font-family: var(--czcionka-ui);
  font-size: var(--fs-13); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--tekst-600);
}
.nadtytul--zloty { color: var(--zloto-tekst); }
.nadtytul--z-linia { display: inline-flex; align-items: center; gap: 12px; }
.nadtytul--z-linia::before { content: ""; width: 28px; height: 1px; background: var(--zloto-700); }

.ikona {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.ikona--16 { width: 16px; height: 16px; }
.ikona--24 { width: 24px; height: 24px; }
.ikona--28 { width: 28px; height: 28px; }

.logo { display: block; height: 56px; width: auto; filter: var(--logo-filtr); }

/* przyciski (klient 52 px, panel 48 px, przyciski tekstowe 44 px) */
.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid var(--sliwka-900); border-radius: var(--promien-pelny);
  background: var(--sliwka-900); color: var(--na-przycisku);
  font-family: var(--czcionka-ui); font-size: var(--fs-16); font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap; text-align: center;
}
.przycisk:hover { background: var(--sliwka-700); border-color: var(--sliwka-700); }
.przycisk--drugi { background: transparent; color: var(--sliwka-900); }
.przycisk--drugi:hover { background: var(--sliwka-50); border-color: var(--sliwka-900); color: var(--sliwka-900); }
.przycisk--caly { display: flex; width: 100%; }
.przycisk--ok { background: var(--ok); border-color: var(--ok); }
.przycisk--ok:hover { background: var(--ok-tekst); border-color: var(--ok-tekst); }
.przycisk:disabled, .przycisk:disabled:hover { background: var(--panel-tlo); border-color: var(--panel-ramka); color: var(--tekst-600); cursor: not-allowed; }
.przycisk--panel { min-height: 48px; padding: 0 20px; font-size: var(--fs-15); white-space: normal; }
.przycisk-tekst {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--cel); min-height: var(--cel); padding: 0 10px; border: 0; background: none;
  font-size: var(--fs-14); font-weight: 600; line-height: 1.3; color: var(--sliwka-700);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sliwka-700) 40%, transparent);
}
.przycisk-tekst:hover { color: var(--sliwka-900); text-decoration-color: currentColor; }
.przycisk-tekst--ostrzezenie { color: var(--blad-tekst); text-decoration-color: color-mix(in srgb, var(--blad) 40%, transparent); }
.przycisk-okragly {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cel); height: var(--cel); padding: 0; border: 1px solid var(--obrys); border-radius: var(--promien-pelny);
  background: var(--biel); color: var(--sliwka-900); text-decoration: none;
}

/* znaczniki statusu (nieinteraktywne) */
.znacznik {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: var(--promien-pelny);
  background: var(--sliwka-100); color: var(--sliwka-700);
  font-size: var(--fs-13); font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.znacznik--ok { background: var(--ok-tlo); color: var(--ok-tekst); }
.znacznik--uwaga { background: var(--uwaga-tlo); color: var(--uwaga-tekst); }
.znacznik--blad { background: var(--blad-tlo); color: var(--blad-tekst); }
.znacznik--krem { background: var(--krem-100); color: var(--tekst-900); }
/* "do zrobienia" ma osobny, neutralny kolor: pomarańcz znaczy tylko "wymaga telefonu" */
.znacznik--do-zrobienia { background: var(--panel-tlo); color: var(--tekst-900); box-shadow: inset 0 0 0 1px var(--panel-ramka); }
.znacznik--wrap { white-space: normal; }
/* znacznik "wymaga uwagi" (nieobsłużona wiadomość klienta): ikona przy pierwszej linii, gdy chip zawija się do dwóch */
.znacznik--wymaga-uwagi { align-items: flex-start; }
.znacznik--wymaga-uwagi .ikona { margin-top: 2px; }

/* karty */
.karta {
  background: var(--biel); border: 1px solid var(--krem-200);
  border-radius: var(--promien); box-shadow: var(--cien);
}

/* wybór chipami (radio i checkbox, w pełni natywne, bez JS) */
.wybory { display: flex; flex-wrap: wrap; gap: 8px; }
.wybor { position: relative; display: inline-flex; }
.wybor input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.wybor span {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: var(--cel); padding: 0 18px;
  border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel);
  font-size: var(--fs-15); font-weight: 500; line-height: 1.25; color: var(--tekst-900);
}
.wybor:hover span { border-color: var(--sliwka-500); }
.wybor input:checked + span { background: var(--wybrane); border-color: var(--wybrane); color: var(--biel); font-weight: 600; }
.wybor input:checked + span::before {
  content: ""; flex: none; width: 5px; height: 9px; margin: -2px 10px 0 -2px;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.wybor input:focus-visible + span { outline: 3px solid var(--sliwka-500); outline-offset: 2px; }
.wybory--siatka2 { display: grid; grid-template-columns: 1fr 1fr; }
.wybory--siatka2 .wybor span { width: 100%; }
.wybory--male .wybor span { padding: 0 14px; font-size: var(--fs-14); }
.wybory--male .wybor input:checked + span::before { margin-right: 8px; }

/* pola formularza */
.wejscie {
  display: block; width: 100%; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--obrys); border-radius: var(--promien); background: var(--biel);
  font-size: var(--fs-16); font-weight: 500; line-height: 1.4; color: var(--tekst-900);
}
textarea.wejscie { min-height: 96px; padding: 14px 16px; resize: vertical; }
.wejscie:focus-visible { outline: 3px solid var(--sliwka-500); outline-offset: 2px; border-color: var(--sliwka-500); }
.wejscie::placeholder { color: var(--tekst-600); opacity: 1; }
select.wejscie {
  appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst-600) 50%), linear-gradient(135deg, var(--tekst-600) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.pole__etykieta-wiersz { margin-bottom: 8px; }
.pole__licznik { display: block; margin-top: 6px; text-align: right; font-size: var(--fs-14); font-weight: 500; color: var(--tekst-600); font-variant-numeric: tabular-nums; }
.pole__podpowiedz { display: block; margin-top: 4px; font-size: var(--fs-14); line-height: 1.45; color: var(--tekst-600); }

/* checkbox i radio: pole 24 px, etykieta 44 px */
.opcja { display: flex; align-items: center; gap: 12px; min-height: var(--cel); font-size: var(--fs-15); line-height: 1.4; cursor: pointer; }
.opcja input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--wybrane); }

/* ramka informacyjna */
.info-ramka {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px;
  border: 1px solid var(--sliwka-100); border-radius: var(--promien); background: var(--sliwka-50);
  font-size: var(--fs-15); line-height: 1.55; color: var(--tekst-900);
}
.info-ramka .ikona { margin-top: 2px; color: var(--sliwka-700); }
.info-ramka strong { color: var(--sliwka-900); }

/* alergeny */
/* alergeny jako chipy (05 i 06; klasa .wybor-alergenow, bo .alergeny to ramka alergenów z formularza produktu w panelu, styl.css): znacznik "zawiera", pomarańczowe ostrzeżenie wyświetlane czystym CSS (:has), zdanie o śladach */
.wybor small.wybor__zawiera { margin-left: 8px; padding: 1px 8px; border-radius: var(--promien-pelny); background: var(--uwaga-tlo); color: var(--uwaga-tekst); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--uwaga) 55%, transparent); font-size: var(--fs-13); font-weight: 600; line-height: 1.4; }
.ostrzezenie { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--uwaga); border-left-width: 4px; border-radius: var(--promien); background: var(--uwaga-tlo); font-size: var(--fs-15); line-height: 1.55; color: var(--tekst-900); }
.ostrzezenie .ikona { margin-top: 2px; color: var(--uwaga-tekst); }
.ostrzezenie strong { font-weight: 700; }
.wybor-alergenow__ostrzezenie { display: none; margin-top: 14px; }
.wybor-alergenow:has(input[value="gluten"]:checked, input[value="jaja"]:checked, input[value="mleko"]:checked) .wybor-alergenow__ostrzezenie { display: flex; }
/* zdanie ostrzeżenia składane z zaznaczonych składników produktu (kolejność gluten, jaja, mleko):
   „zawiera mleko” / „gluten i jaja” / „gluten, jaja i mleko”; spójnik „i” dostaje tylko ostatni widoczny, przecinek środkowy */
.wybor-alergenow__skladnik, .wybor-alergenow__sep { display: none; }
.wybor-alergenow:has(input[value="gluten"]:checked) .wybor-alergenow__skladnik--gluten,
.wybor-alergenow:has(input[value="jaja"]:checked) .wybor-alergenow__skladnik--jaja,
.wybor-alergenow:has(input[value="mleko"]:checked) .wybor-alergenow__skladnik--mleko { display: inline; }
/* jaja po glutenie: " i " (a gdy mleko też jest zaznaczone: ", ") */
.wybor-alergenow:has(input[value="gluten"]:checked) .wybor-alergenow__skladnik--jaja .wybor-alergenow__sep--i { display: inline; }
.wybor-alergenow:has(input[value="gluten"]:checked):has(input[value="mleko"]:checked) .wybor-alergenow__skladnik--jaja .wybor-alergenow__sep--i { display: none; }
.wybor-alergenow:has(input[value="gluten"]:checked):has(input[value="mleko"]:checked) .wybor-alergenow__skladnik--jaja .wybor-alergenow__sep--przecinek { display: inline; }
/* mleko (zawsze ostatnie) po glutenie albo jajach: " i " */
.wybor-alergenow:has(input[value="gluten"]:checked, input[value="jaja"]:checked) .wybor-alergenow__skladnik--mleko .wybor-alergenow__sep { display: inline; }

/* pozostałe 7 alergenów w natywnym <details>: przełącznik 44 px, strzałka rysowana CSS-em, etykieta zmienia się z „Pokaż” na „Ukryj” */
.wybor-alergenow__wiecej { margin-top: 4px; }
.wybor-alergenow__przelacznik {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--cel); margin-left: -10px; padding: 0 12px 0 10px; border-radius: var(--promien-pelny);
  font-size: var(--fs-15); font-weight: 600; line-height: 1.3; color: var(--sliwka-700); cursor: pointer; list-style: none;
}
.wybor-alergenow__przelacznik::-webkit-details-marker { display: none; }
.wybor-alergenow__przelacznik span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--sliwka-700) 40%, transparent); }
.wybor-alergenow__przelacznik:hover span { text-decoration-color: currentColor; }
.wybor-alergenow__przelacznik::after { content: ""; flex: none; width: 8px; height: 8px; margin-top: -3px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wybor-alergenow__wiecej[open] > .wybor-alergenow__przelacznik::after { margin-top: 3px; transform: rotate(-135deg); }
.wybor-alergenow__ukryj { display: none; }
.wybor-alergenow__wiecej[open] .wybor-alergenow__pokaz { display: none; }
.wybor-alergenow__wiecej[open] .wybor-alergenow__ukryj { display: inline; }
.wybor-alergenow__wiecej > .wybory { margin-top: 6px; }
/* zdania pod chipami: „Coś innego?", ślady, zgoda (drobny szary druk, jeden blok) */
.wybor-alergenow__info { display: grid; gap: 6px; margin-top: 10px; }
.wybor-alergenow__info .pole__podpowiedz { margin-top: 0; }

/* miejsce na zdjęcie (celowy placeholder, nie dziura) */
.foto {
  position: relative; isolation: isolate; container-type: inline-size;
  display: flex; align-items: center; justify-content: center;
  width: 100%; overflow: hidden; border-radius: var(--promien); text-align: center;
  background: linear-gradient(135deg, var(--sliwka-100), var(--krem-100));
}
.foto::before {
  content: ""; position: absolute; inset: 12px; z-index: -1; pointer-events: none;
  --k: var(--zloto-linia);
  background:
    linear-gradient(var(--k), var(--k)) top left / 18px 1px no-repeat,
    linear-gradient(var(--k), var(--k)) top left / 1px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) top right / 18px 1px no-repeat,
    linear-gradient(var(--k), var(--k)) top right / 1px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) bottom left / 18px 1px no-repeat,
    linear-gradient(var(--k), var(--k)) bottom left / 1px 18px no-repeat,
    linear-gradient(var(--k), var(--k)) bottom right / 18px 1px no-repeat,
    linear-gradient(var(--k), var(--k)) bottom right / 1px 18px no-repeat;
}
.foto__podpis {
  max-width: 78%;
  font-family: var(--czcionka-naglowki); font-style: italic; font-weight: 500;
  font-size: clamp(15px, 6.4cqw, 28px); line-height: 1.22; color: var(--podpis-foto);
  text-wrap: balance;
}
.foto--4x5 { aspect-ratio: 4 / 5; }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--16x9 { aspect-ratio: 16 / 9; }
.foto--1x1 { aspect-ratio: 1 / 1; }
.foto--duze { border-radius: var(--promien-duzy); }
.foto--mini { border-radius: var(--promien-m); }
.foto--mini::before { inset: 7px; }
.foto--mini .foto__podpis { max-width: 86%; font-size: clamp(13px, 8cqw, 16px); }

/* ---------- Menu mobilne (natywne details; nagłówek strony i pasek panelu) -------- */
/* menu mobilne: natywne <details>, bez JS */
.menu-mobilne summary { list-style: none; }
.menu-mobilne summary::-webkit-details-marker { display: none; }
.menu-przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 48px; height: 48px; padding: 0; border: 1px solid var(--obrys); border-radius: var(--promien-pelny);
  background: var(--biel); color: var(--sliwka-900); font-size: var(--fs-15); font-weight: 600;
}
.menu-mobilne__lista {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  padding: 4px var(--gutter) 12px; background: var(--biel);
  border-bottom: 1px solid var(--krem-200); box-shadow: var(--cien);
}
.menu-mobilne__lista a {
  display: flex; align-items: center; gap: 12px; min-height: 52px;
  border-bottom: 1px solid var(--krem-200);
  font-size: var(--fs-17); font-weight: 600; color: var(--tekst-900); text-decoration: none;
}
.menu-mobilne__lista li:last-child a { border-bottom: 0; }

/* ---------- Okruszki i drobne elementy wspólne (v3) ------------------------------- */
.nb { white-space: nowrap; }  /* tekst, który nie może się zawinąć (ceny, daty) */
.okruszki ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: var(--fs-14); font-weight: 500; line-height: 1.5; color: var(--tekst-600); }
.okruszki li { display: flex; align-items: center; min-height: var(--cel); }
.okruszki li + li::before { content: "\203A"; margin-right: 10px; color: var(--zloto-tekst); }
.okruszki a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--cel); min-height: var(--cel); color: var(--tekst-600); text-underline-offset: 3px; }
.okruszki [aria-current="page"] { color: var(--tekst-900); }

.przycisk--maly { min-height: var(--cel); padding: 0 18px; gap: 8px; font-size: var(--fs-15); }
.przycisk--zawijany { white-space: normal; padding-block: 10px; line-height: 1.3; text-wrap: balance; }
.logo--maly { height: 52px; }
.foto--3x2 { aspect-ratio: 3 / 2; }
.znacznik--duzy { padding: 7px 16px; font-size: var(--fs-16); font-weight: 700; }
.chip-szary {
  display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px;
  border: 1px solid var(--panel-ramka); border-radius: var(--promien-pelny); background: var(--panel-tlo);
  font-size: var(--fs-14); font-weight: 600; line-height: 1.4; color: var(--tekst-600);
}
/* notatka z etykietą: wąsko (telefon, połówka 768-1023) etykieta nad tekstem, a nie obok niego (inaczej tekst zawija się w wąskiej kolumnie obok etykiety) */
@media (max-width: 1023px) {
  .chip-szary:has(.chip-szary__etykieta) { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 14px; border-radius: var(--promien-m); }
  .chip-szary:has(.chip-szary__etykieta) .chip-szary__etykieta { margin-right: 0; }
}
.chip-szary__etykieta { margin-right: 10px; padding: 0 9px; border-radius: var(--promien-pelny); background: var(--biel); box-shadow: inset 0 0 0 1px var(--obrys); font-size: var(--fs-13); font-weight: 700; line-height: 1.5; color: var(--tekst-900); white-space: nowrap; }
.odznaka {
  display: inline-flex; align-items: center; align-self: flex-start; min-height: 24px; padding: 2px 10px;
  border-radius: var(--promien-pelny); background: var(--zloto-500); color: var(--tusz);
  font-size: var(--fs-13); font-weight: 700; line-height: 1.3; white-space: nowrap;
}
.odznaka--sezon { background: var(--sliwka-900); color: var(--krem-50); }
/* odznaka na zdjęciu leży wewnątrz złotej ramki narożników (ramka: 12 px od krawędzi, ramiona 18 px), więc jej nie zakrywa */
.odznaka--na-foto { position: absolute; top: 24px; left: 24px; z-index: 1; box-shadow: var(--cien-maly); }
.foto:has(.odznaka--na-foto) { padding-top: 56px; }
@media (max-width: 429px) { .odznaka--na-foto { top: 22px; left: 22px; min-height: 22px; padding: 1px 8px; } }
/* okruszki: znak rozdzielający stoi na końcu poprzedniej pozycji, więc po zawinięciu nowy wiersz nie zaczyna się od "›" */
.okruszki li + li::before { content: none; }
.okruszki li:not(:last-child)::after { content: "\203A"; margin-left: 10px; color: var(--zloto-tekst); }
.okruszki ol { gap: 0 10px; }
/* przy dwóch połówkach (768-1023) podpisy nie mogą przechodzić przez rynnę, a okruszki zawijają się w połowie */
@media (min-width: 768px) and (max-width: 1023px) { .okruszki { max-width: var(--polowka); } }

/* ---------- Przełącznik dzień/noc ------------------------------------------------- */
.przelacznik-motywu {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 1px solid var(--obrys); border-radius: var(--promien-pelny);
  background: var(--biel); color: var(--sliwka-900);
}
.przelacznik-motywu:hover { border-color: var(--sliwka-900); }
/* ikona pokazuje CEL kliknięcia: w dzień księżyc (przełącz na noc), w nocy słońce; bez JS (brak data-motyw) przycisk jest ukryty */
.przelacznik-motywu .ikona--slonce { display: none; }
:root[data-motyw="ciemny"] .przelacznik-motywu .ikona--ksiezyc { display: none; }
:root[data-motyw="ciemny"] .przelacznik-motywu .ikona--slonce { display: block; }
:root:not([data-motyw]) .przelacznik-motywu { display: none; }

/* kurtyna kołowa przy przełączeniu motywu (View Transition; animację clip-path uruchamia public/motyw.js, tylko gdy ruch jest dozwolony) */
@media (prefers-reduced-motion: no-preference) {
  html[data-przejscie="motyw"]::view-transition-old(root),
  html[data-przejscie="motyw"]::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  html[data-przejscie="motyw"]::view-transition-old(root) { z-index: 1; }
  html[data-przejscie="motyw"]::view-transition-new(root) { z-index: 2; }
}

/* ruch ograniczony na życzenie: żadnych animacji ani płynnego przewijania */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Kalendarz (strona klienta i mini-kalendarz panelu) -------------------- */
.kal__naglowek { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.kal__naglowek strong { font-size: var(--fs-17); font-weight: 700; color: var(--sliwka-900); }
.kal__strzalka { display: inline-flex; align-items: center; justify-content: center; width: var(--cel); height: var(--cel); padding: 0; border: 1px solid var(--obrys); border-radius: var(--promien-pelny); background: var(--biel); color: var(--sliwka-900); }
.kal { width: 100%; table-layout: fixed; }
.kal th { padding-bottom: 4px; font-size: var(--fs-14); font-weight: 600; color: var(--tekst-600); text-align: center; }
.kal td { padding: 1px 0; text-align: center; vertical-align: top; }
.kal__dzien { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 52px; height: var(--cel); margin-inline: auto; cursor: pointer; }
.kal__dzien input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.kal__dzien span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font-size: var(--fs-16); font-weight: 600; line-height: 1; color: var(--tekst-900); font-variant-numeric: tabular-nums; }
.kal__dzien input:not(:disabled):hover + span { background: var(--sliwka-100); }
.kal__dzien input:checked + span { background: var(--wybrane); color: var(--biel); }
.kal__dzien input:focus-visible + span { outline: 3px solid var(--sliwka-500); outline-offset: 2px; }
.kal__dzien input:disabled { cursor: default; }
.kal__dzien input:disabled + span { color: var(--wyszarzone); font-weight: 500; }
.kal__dzien--dzis span { box-shadow: inset 0 0 0 2px var(--zloto-tekst); }
.kal__dzien--brak input:disabled + span { text-decoration: line-through; }
.kal__podpis td { position: relative; padding: 0 0 6px; }
.kal__podpis td:nth-child(2)::before { content: ""; position: absolute; left: 6px; right: 6px; top: 0; height: 5px; border: 1px solid var(--tekst-600); border-bottom: 0; opacity: .55; }
.kal__podpis span { display: block; margin-inline: -32px; padding-top: 9px; font-size: var(--fs-14); font-weight: 600; line-height: 1.3; color: var(--tekst-600); white-space: nowrap; text-align: center; }
.kal__legenda { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-top: 14px; font-size: var(--fs-14); line-height: 1.35; color: var(--tekst-600); }
.kal__legenda li { display: flex; align-items: center; gap: 10px; }
.kal__legenda i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: var(--fs-15); font-style: normal; font-weight: 500; font-variant-numeric: tabular-nums; }
.kal__legenda .l-dzis { box-shadow: inset 0 0 0 2px var(--zloto-tekst); color: var(--wyszarzone); }
.kal__legenda .l-wyszarzone { color: var(--wyszarzone); }
.kal__legenda .l-brak { color: var(--wyszarzone); text-decoration: line-through; }
.kal__wybrano { margin-top: 12px; font-size: var(--fs-15); color: var(--tekst-600); }
.kal__wybrano strong { color: var(--sliwka-900); }

/* ---------- Strefa upuszczania pliku (formularz Kontakt i panel) ------------------ */
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 16px;
  border: 2px dashed var(--obrys); border-radius: var(--promien); background: var(--sliwka-50);
  text-align: center; font-size: var(--fs-14); color: var(--tekst-600);
}
.dropzone .ikona { width: 28px; height: 28px; color: var(--sliwka-500); }
.dropzone label.przycisk:focus-within { outline: 3px solid var(--sliwka-500); outline-offset: 3px; }
.dropzone label.przycisk { cursor: pointer; }
.dropzone strong { color: var(--sliwka-900); font-weight: 700; }

/* natywny wybór pliku: ten sam krój co reszta (tekst wewnętrzny kontrolki) */
input[type="file"], input[type="file"]::file-selector-button { font: inherit; }

/* SPEC-ZDJECIA (18.10.2026): punkt ostrości zdjęcia przez klasę zamiast style="" (CSP style-src 'self'); wspólne dla stron klienta i panelu */
.ostrosc--lg { object-position: 0% 0%; } .ostrosc--sg { object-position: 50% 0%; } .ostrosc--pg { object-position: 100% 0%; }
.ostrosc--ls { object-position: 0% 50%; } .ostrosc--sr { object-position: 50% 50%; } .ostrosc--ps { object-position: 100% 50%; }
.ostrosc--ld { object-position: 0% 100%; } .ostrosc--sd { object-position: 50% 100%; } .ostrosc--pd { object-position: 100% 100%; }