/* Szuflada koszyka — nakładka, panel, paski nad listą i wiersz pozycji.
 *
 * Arkusz partu `template-parts/szuflada-koszyka.php`, ale trzyma też style
 * `woocommerce/cart/mini-cart.php`. To jest **świadome odstępstwo od reguły
 * „jeden arkusz na part"** i nie łamie jej powodu: nadpisanie mini-koszyka
 * renderuje się WYŁĄCZNIE wewnątrz tej szuflady, więc arkusz nadal ginie razem
 * ze swoim jedynym konsumentem. Osobny plik dla szablonu Woo dawałby dwa pliki
 * opisujące jedną powierzchnię i regułę kaskady między nimi.
 *
 * Podsumowanie ma własny part i własny arkusz — `szuflada-podsumowanie.css`.
 *
 * SKALA Z-INDEX MOTYWU: pasek nawigacji 350, nakładka mobilna nawigacji 360,
 * nakładki `/produkt` 500–520, przyklejone paski decyzji 600, kurtyna ładowania
 * 9999. Szuflada musi przykryć paski decyzji (na `/koszyk` i w kasie stoją
 * dokładnie pod jej CTA) i przepuścić kurtynę — stąd 700 i 701. Komponent
 * Reacta ma 1000/1001, ale tam nie ma paska ogłoszeń ani kurtyny, więc liczba
 * jest u niego dowolna, a tutaj miejscem w skali.
 */

/* ─── NAKŁADKA ────────────────────────────────────────────────────────── */

.szewko-szuflada {
  position: fixed;
  inset: 0;
  z-index: 700;

  /* Bez tego zamknięta szuflada NADAL BY SIĘ POKAZYWAŁA — `[hidden]` jest
     regułą arkusza przeglądarki, a autorskie `display` bije ją niezależnie
     od specyficzności. Ta sama pułapka co w panelu filtrów i w rozmiarówce. */
  &[hidden] {
    display: none;
  }
}

/* Pasek administratora WordPressa jest przyklejony do góry okna i NIE przesuwa
   elementów `fixed` — bez tego nagłówek „Twoja skrzynia" chowa się pod nim
   razem z krzyżykiem, ale tylko zalogowanym. Zmierzone: 32 px zjadane z 69 px
   nagłówka. Ta sama reguła i te same liczby, co przy nakładce mobilnej
   nawigacji (`header.css`); problem nie istnieje w Reakcie, więc nie ma go
   w źródle designu. */
.admin-bar .szewko-szuflada {
  top: 32px;

  @media screen and (max-width: 782px) {
    top: 46px;
  }
}

.szewko-szuflada__zaslona {
  position: absolute;
  inset: 0;

  /* W komponencie `rgba(0, 0, 0, 0.45)`. Czerni nie ma w palecie, a `rgba()`
     z rozpisanymi składowymi to surowy kolor w przebraniu (zasada 3) — bierze
     ją więc Smoked Tent, ten sam token, którym przyciemniają tło trzy nakładki
     `/produkt`. */
  background: color-mix(in srgb, var(--color-smoked-tent) 45%, transparent);
  backdrop-filter: blur(2px);
}

/* ─── PANEL ───────────────────────────────────────────────────────────── */

.szewko-szuflada__panel {
  position: absolute;
  inset: 0 0 0 auto;
  z-index: 701;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  background: var(--color-smoked-tent);
  box-shadow: -8px 0 32px color-mix(in srgb, var(--color-smoked-tent) 55%, transparent);
  animation: szewko-szuflada-wjazd 320ms var(--ease-sand) forwards;

  /* Panel dostaje `tabindex="-1"` od `nakladka.js` i fokus na wejściu —
     obrys wokół całego panelu byłby wtedy ramką na pół ekranu. */
  &:focus {
    outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
    animation: none;
  }
}

@keyframes szewko-szuflada-wjazd {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

/* Ziarno na całej powierzchni panelu — ta sama turbulencja, co w komponencie
   i w sekcjach strony głównej. `pointer-events: none`, bo warstwa leży NAD
   treścią i bez tego zjadałaby kliknięcia w stepper. */
.szewko-szuflada__ziarno {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.08;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 400px 400px;
}

/* ─── NAGŁÓWEK ────────────────────────────────────────────────────────── */

.szewko-szuflada__glowa {
  position: relative;
  z-index: 3;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 12px 12px 12px var(--space-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-sand-gold) 25%, transparent);
  background: var(--color-dark-mahogany);
}

.szewko-szuflada__tytul {
  margin: 0;
  /* T8 (12.08.2026) — nadtytuł schodzi z Cinzel Decorative na Literatę.
     Powód przy `.szewko-home-kafel__nazwa` w `home-kafel-kategorii.css`:
     krój ozdobny poniżej 26 px zamienia wypustki liter w szum. */
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sand-gold);
}

.szewko-szuflada__zamknij {
  display: flex;
  align-items: center;
  justify-content: center;

  /* Cel dotykowy 44 px — naprawa 16 z rundy r1; w komponencie zamknięcie miało
     40 × 40 i było jedynym wyjściem widocznym na dotyku. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-sand-gold);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-desert);

  &:hover,
  &:focus-visible {
    color: var(--color-parchment);
  }

  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: 2px;
  }
}

/* ─── WNĘTRZE (fragment `wc_fragments`) ───────────────────────────────── */

.szewko-szuflada__wnetrze {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;

  /* Czas oczekiwania na odpowiedź. Krycie 0.6 nie jest wymyślone: dokładnie
     tym przygasza fragmenty `add-to-cart.js`, gdy podmienia je po zdjęciu
     pozycji. Stan ładowania szuflady nie ma rysunku (r1, „Do następnej
     rundy" 1), więc powtarzamy zachowanie natywne zamiast projektować własne. */
  &[aria-busy='true'] {
    opacity: 0.6;
    pointer-events: none;
  }
}

/* ─── PASEK „COFNIJ" ──────────────────────────────────────────────────── */

.szewko-szuflada__cofniecie {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 12px var(--space-sm) var(--space-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-sand-gold) 20%, transparent);
  background: color-mix(in srgb, var(--color-terracotta) 35%, transparent);
}

.szewko-szuflada__cofniecie-tekst {
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-parchment);
}

.szewko-szuflada__cofniecie-nazwa {
  font-style: italic;
}

.szewko-szuflada__cofniecie-akcja {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--color-sand-gold);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-desert);

  &:hover,
  &:focus-visible {
    color: var(--color-parchment);
  }

  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: 2px;
  }
}

/* ─── PAS POTWIERDZENIA ───────────────────────────────────────────────── */

.szewko-szuflada__potwierdzenie {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px var(--space-lg);
  background: var(--color-oasis-green);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-parchment);

  &[hidden] {
    display: none;
  }

  & .szewko-ikona {
    flex-shrink: 0;
  }
}

/* ─── OBSZAR PRZEWIJANIA ──────────────────────────────────────────────── */

.szewko-szuflada__przewijak {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;

  /* Maska 28 px (decyzja 3 z r2). Bez niej fala wydmy przykrywała ostatni
     widoczny wiersz krzywizną i czytało się to jak błąd renderowania, a nie
     jak zapowiedź dalszego ciągu. Przy krótkiej liście nie widać jej wcale. */
  mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
}

.szewko-szuflada__lista {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ilustracja skrzyni zwija się sama (decyzja 4 z r2): siedzi POD listą,
   w tym samym obszarze przewijania, na `flex: 1; min-height: 0`. Przy dwóch
   pozycjach wypełnia miejsce, które i tak zostaje; gdy lista zaczyna
   przewijać — wysokość spada do zera i ilustracja znika. Bez warunku
   na liczbę pozycji, który i tak byłby zły na jednej z dwóch szerokości. */
.szewko-szuflada__wypelniacz {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  padding: var(--space-sm) var(--space-lg);

  & img {
    max-height: 100%;
    width: auto;
    max-width: 150px;
    object-fit: contain;
    opacity: 0.4;

    @media (max-width: 480px) {
      max-width: 69px;
    }
  }
}

/* ─── WIERSZ POZYCJI ──────────────────────────────────────────────────── */

.szewko-szuflada__pozycja {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--color-sand-gold) 12%, transparent);
}

/* Rzecz właśnie dodana — złota listwa i przygaszone tło. Klasę zakłada skrypt,
   nie PHP: fragmenty lądują w `sessionStorage` i wracają przy następnym
   wejściu na stronę, więc potwierdzenie wyrenderowane przez serwer
   potwierdzałoby czynność sprzed pół godziny. */
.szewko-szuflada__pozycja--dodana {
  border-left: 3px solid var(--color-sand-gold);
  padding-left: 21px;
  background: color-mix(in srgb, var(--color-sand-gold) 6%, transparent);
}

.szewko-szuflada__rzecz {
  display: flex;
  gap: 12px;
}

.szewko-szuflada__kadr {
  flex-shrink: 0;

  & img {
    display: block;
    width: 96px;
    height: 96px;
    object-fit: cover;
    border: 1px solid color-mix(in srgb, var(--color-sand-gold) 20%, transparent);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
  }
}

.szewko-szuflada__opis {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.szewko-szuflada__wiersz-nazwy {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
}

.szewko-szuflada__nazwa {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-product);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-parchment);

  /* Dwie linie, potem wielokropek. Najdłuższa realna nazwa w katalogu
     („Wielbłąd pluszowy Karawana jedzie przez Wielki Step") mieści się
     w dwóch — trzecia rozpychała wiersz ponad miniaturę. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  & a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-desert);

    &:hover,
    &:focus-visible {
      color: var(--color-sand-gold);
    }

    &:focus-visible {
      outline: 2px solid var(--color-sand-gold);
      outline-offset: 2px;
    }
  }
}

/* Akcja destrukcyjna świadomie SŁABSZA wizualnie od steppera (decyzja 8 z r2):
   ikona bez wypełnienia w Sand Gold, kolor ostrzegawczy dopiero na hover
   i focus. Ujemne marginesy trzymają rysunek przy krawędzi wiersza, mimo
   celu dotykowego 44 px. */
.szewko-szuflada__zdejmij {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px 0 0;
  border-radius: var(--radius-sm);
  color: var(--color-sand-gold);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-desert);

  &:hover,
  &:focus-visible {
    color: var(--color-terracotta-light);
  }

  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: 2px;
  }
}

.szewko-szuflada__wariant {
  margin: 0;
  font-family: var(--font-body);
  /* Szczebel `mikro` (ekw. 12) → 12,5 px; 12 px dawało ekw. 11,9. Wariant
     zostaje pod nazwą rzeczy (14 px Libre Baskerville), więc nie awansuje. */
  font-size: 12.5px;
  color: var(--color-sand-gold);
}

.szewko-szuflada__dol {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: var(--space-xs);
}

/* ─── STEPPER ─────────────────────────────────────────────────────────── */

.szewko-szuflada__stepper {
  display: flex;
  align-items: center;
}

/* Rysunek 28 × 28, pole trafienia 44 × 44 (korekta wizualna wiersza z r2).
   Pseudoelement rozciąga obszar kliknięcia o 8 px w każdą stronę, nie ruszając
   wyglądu — bez tego wracałaby usterka 16 z rundy r1. Odstęp między „−" a „+"
   to liczebnik o szerokości 36 px, więc dwie otoczki po 8 px się nie zachodzą
   i nie da się kliknąć „+", celując w „−". Sztuczka jest czystym CSS-em
   i przechodzi do każdego miejsca, gdzie design chce drobnej kontrolki. */
.szewko-szuflada__krok {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--color-sand-gold);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1;
  color: var(--color-sand-gold);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-desert),
    color var(--duration-fast) var(--ease-desert);

  &::before {
    content: '';
    position: absolute;
    inset: -8px;
  }

  &:hover:not([disabled]) {
    background: color-mix(in srgb, var(--color-sand-gold) 10%, transparent);
  }

  &:focus-visible {
    outline: 2px solid var(--color-sand-gold);
    outline-offset: 2px;
  }

  &[disabled] {
    border-color: color-mix(in srgb, var(--color-sand-gold) 25%, transparent);
    color: color-mix(in srgb, var(--color-sand-gold) 35%, transparent);
    cursor: not-allowed;
  }
}

.szewko-szuflada__ilosc {
  width: 36px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--color-parchment);
}

.szewko-szuflada__cyfrowa {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-parchment) 55%, transparent);
}

/* Cena wiersza w Brass Lantern, nie w Desert Rust: reguła kontrastowa
   z `tokens.css` — Desert Rust na Smoked Tencie daje 2,2:1 i najważniejsza
   liczba wiersza byłaby jego najgorzej czytelnym elementem (błąd 14 z r1). */
/* ⚠︎ Krój to `--font-cena`, nie `--font-heading` — decyzja T2 z 11.08.2026
   (`docs/TYPOGRAFIA.md`). Ceny wierszy stoją w szufladzie jedna pod drugą
   przy prawej krawędzi; Playfair nie ma cyfr tabelarycznych, więc końcówki
   „zł" się nie zgrywały. Source Serif 4 ma je domyślnie (`tokens.css`). */
.szewko-szuflada__cena {
  margin: 0;
  font-family: var(--font-cena);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-brass-lantern);

  & .amount,
  & bdi {
    color: inherit;
  }

  /* Cena przekreślona pozycji przecenionej przychodzi z Woo w `<del>`. */
  & del {
    opacity: 0.55;
    font-size: 13px;
  }
}

/* ─── SKRZYNIA PUSTA ──────────────────────────────────────────────────── */

.szewko-szuflada__pusta {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}

.szewko-szuflada__pusta-rysunek {
  width: 208px;
  height: auto;
  margin-bottom: var(--space-lg);
  filter: drop-shadow(0 8px 20px color-mix(in srgb, var(--color-desert-rust) 25%, transparent));
}

.szewko-szuflada__pusta-tytul {
  margin: 0 0 12px;
  font-family: var(--font-accent);
  font-size: 18px;
  font-style: italic;
  color: var(--color-sand-gold);
}

.szewko-szuflada__pusta-tekst {
  max-width: 20rem;
  margin: 0 0 var(--space-xl);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-parchment);
}

.szewko-szuflada__pusta-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  max-width: 100%;
  min-height: 48px;
  padding: 0 var(--space-xl);
  border-radius: var(--radius-sm);
  background: var(--gradient-sunrise-glow);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-parchment);
  transition: box-shadow var(--duration-mid) var(--ease-desert);

  &:hover {
    box-shadow: 0 4px 16px color-mix(in srgb, var(--color-sand-gold) 25%, transparent);
  }

  &:focus-visible {
    outline: 2px solid var(--color-parchment);
    outline-offset: 2px;
  }
}

/* ─── BANER ZGÓD POD OTWARTĄ SZUFLADĄ ─────────────────────────────────── */

/* DŁUG Z ZADANIA 0.3, SPŁACANY TUTAJ. Reguła powstała w `theme.css` repo
 * designu przy naprawie błędu 1 z rundy r1: baner ciasteczek stał na z-indeksie
 * wyższym niż szuflada i zjadał „Kontynuuj zakupy" na 1440 px, a na 390 px
 * CAŁE podsumowanie razem z obydwoma CTA — szuflada była tam bezużyteczna,
 * dopóki użytkownik nie rozstrzygnął ciasteczek. Samo podniesienie z-indeksu
 * nie wystarczało: baner zostawał widoczny pod półprzezroczystą nakładką
 * i czytał się jak artefakt renderowania.
 *
 * ✅ SELEKTOR MA JUŻ CEL (07.08.2026, **D70**). Reguła jest w CSS, a nie
 * w propsach, właśnie dlatego, że „w WordPressie zgoda będzie wtyczką, której
 * reactowego stanu nie ruszymy" — i to było **kryterium wyboru wtyczki**, nie
 * kosmetyka: CMP musiał mieć baner z możliwym do wskazania selektorem.
 * WPConsent go ma i to jest jedyne kryterium, które zaliczył czysto.
 *
 * ⚠︎ **`#wpconsent-root`, a nie `#wpconsent-container`** — mimo że to drugie
 * jest hostem shadow roota z samym banerem. Powód jest tu inny niż w mierzeniu
 * paska landingu: `#wpconsent-root` obejmuje **także nakładkę preferencji
 * i pływający przycisk**, więc jedna reguła chowa wszystko, co wtyczka kładzie
 * nad szufladą. Wygaszanie hosta zostawiłoby pozostałe warstwy na wierzchu.
 *
 * `[data-cookie-banner]` zostaje obok, choć w motywie nikt go dziś nie stawia:
 * kosztuje jeden selektor, a jest jedynym śladem kontraktu z etapu Reacta —
 * i zadziała od razu, gdyby baner kiedykolwiek wrócił do motywu.
 * To jedyne miejsce w motywie, w którym ta reguła żyje. */
/* Przejście stoi w stanie WYJŚCIOWYM, nie w regule zmiany — żeby wygaszanie
 * i powrót jechały tak samo. Z `transition` wpisanym wyłącznie do reguły
 * warunkowej baner wraca skokiem: po zamknięciu szuflady stan docelowy nie ma
 * już żadnego przejścia, od którego przeglądarka mogłaby zacząć.
 *
 * ⚠︎ PUŁAPKA POMIARU, NIE KODU — zapisana, bo kosztowała pół godziny.
 * Sprawdzana automatem karta jest `document.visibilityState === "hidden"`,
 * a **nieaktywna karta zamraża zegar przejść CSS**: `getComputedStyle()`
 * pokazuje `opacity: 1` po sekundzie, przejście stoi w stanie `running`,
 * i wygląda to jak reguła, która nie działa. Nie jest. Dowód: to samo
 * przejście dociągnięte ręcznie (`element.getAnimations()[0].finish()`)
 * daje `opacity: 0` natychmiast. **Wygaszanie mierz po `finish()` albo
 * na karcie na wierzchu** — inaczej „naprawisz" regułę, która była zdrowa. */
#wpconsent-root,
[data-cookie-banner] {
  transition: opacity var(--duration-mid) var(--ease-desert);

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

body[data-szuflada='otwarta'] #wpconsent-root,
body[data-szuflada='otwarta'] [data-cookie-banner] {
  opacity: 0;
  pointer-events: none;
}