/* ─── KOMUNIKAT SYSTEMOWY ─────────────────────────────────────────────────
 *
 * Transkrypcja wariantu 5 (kafel) i wariantu 1 (pasmo). Runda rozstrzygająca:
 * `docs/strony/poprawki/komunikaty-r2.md`, kadry `Screenshot_159` … `_167`.
 *
 * ## Jeden komponent, dwa nośniki, próg 920 px
 *
 * Powyżej progu komunikat jest pływającym kaflem w PRAWYM górnym rogu kolumny
 * treści; poniżej — pasmem w toku strony.
 *
 * ⚠︎ Róg prawy to wybór właściciela z 11.08.2026, podjęty PO zobaczeniu kosztu.
 * Canvas rekomendował lewy (kadr C) i miał ku temu zmierzony powód: prawa
 * kolumna koszyka jest przyklejona, więc czego kafel tam zasłoni, tego nie da
 * się odsunąć przewinięciem — a zasłania „DO KASY", plakietki płatności
 * i „14 dni na zwrot". Po lewej wszystko się przewija. Rachunek kolizji stoi
 * w kadrze A wariantu 5 i w `docs/PO-PORCIE.md` §D; decyzja jest właściciela,
 * więc kafel stoi po prawej, a cena jest zapisana, nie przemilczana.
 *
 * ⚠︎ Próg to 920 px, a NIE 1024 px z kadru. Canvas nazwał go „tą samą granicą,
 * na której panel rachunku przestaje być kolumną" — i rozumowanie jest słuszne,
 * tylko liczba nie: `cart-totals.css` zdejmuje `position: sticky` na 920 px.
 * Przy 1024 px między 920 a 1024 kafel stałby obok panelu, który już nie jest
 * kolumną, czyli dokładnie w sytuacji, której cała reguła unika.
 *
 * ## Dlaczego PASMO jest postacią bazową, a kafel nadpisaniem
 *
 * Odwrotnie, niż podpowiada kolejność rund. Powód jest praktyczny: pasmo
 * obowiązuje w DWÓCH sytuacjach — na wąskim ekranie (media query) i wymuszone
 * klasą `--pasmo` w kasie, niezależnie od szerokości. Gdyby to kafel był bazą,
 * anatomię pasma trzeba by wypisać dwa razy i pilnować, żeby kopie się nie
 * rozjechały. Kafel występuje w jednej sytuacji, więc to on jest wyjątkiem:
 * szeroki ekran ORAZ brak wymuszenia.
 *
 * ## Skąd kafel wie, gdzie jest kolumna
 *
 * Nie mierzy jej. Kontener powtarza siatkę treści (`max-width: 1440px`
 * + `padding-inline: clamp(24px, 5vw, 80px)`), więc jego lewa krawędź JEST
 * lewą krawędzią kolumny na każdej szerokości — także tam, gdzie canvas
 * podawał 80 px, a wychodzi 72 px (5vw z 1440). Wartość bezwzględna działałaby
 * na jednej szerokości; ta sama pułapka co przy fali wydmy.
 */

/* ─── KONTENER I STOS ───────────────────────────────────────────────────── */

.szewko-komunikaty {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);

  &:not(:empty) {
    margin-bottom: var(--space-lg);
  }

  /* Kafel: pływa pod paskiem nawigacji, w linii kolumny listy. 24 px odstępu
     od paska — canvas ma górę stosu na 114 px przy pasku 90 px. Odstęp między
     kaflami to 10 px, a nie odstęp pasm. */
  /* ⚠︎ `--w-toku` wypada z całej tej sekcji. Stawia ją PHP tam, gdzie nośnikiem
     jest pasmo niezależnie od szerokości okna — dziś na panelu konta. Bez tego
     pasmo nadal pływałoby w rogu, tyle że w postaci pasma: zmierzone 404 px
     przyklejone do prawej krawędzi. */
  @media (min-width: 921px) {
    &:not(.szewko-komunikaty--w-toku) {
      position: fixed;
      z-index: 340;
      inset-inline: 0;

      /* ⚠︎ Pozycja liczy się od DOLNEJ KRAWĘDZI PASKA, a nie od stałych 90 px.
         Pasek ogłoszeń („Herold") stoi nad nawigacją i spycha ją w dół, więc przy
         przewinięciu na samą górę stos wchodził pod pasek i znikał. Offset podaje
         `navbar.js` na korzeniu dokumentu; przy braju paska ogłoszeń wynosi 0
         i wzór wraca do samej wysokości nawigacji. */
      top: calc(
        var(--szewko-navbar-offset, 0px) + var(--szewko-pasek-wysokosc) +
          var(--space-lg)
      );

      /* PRAWY róg — wybór właściciela z 11.08, świadomie wbrew rekomendacji
         kadru C. Cena jest zmierzona i zapisana w `docs/PO-PORCIE.md` §D:
         przy krótkim koszyku stos zasłania dolną krawędź przyklejonego panelu
         rachunku, czyli „DO KASY", plakietki płatności i „14 dni na zwrot",
         a tego nie da się spod niego przewinąć. */
      align-items: flex-end;

      max-width: 1440px;
      margin-inline: auto;
      padding-inline: clamp(24px, 5vw, 80px);
      gap: 10px;

      &:not(:empty) {
        margin-bottom: 0;
      }

      /* Kontener jest szeroki na całą siatkę i pusty poza kaflami. Bez tego
         zjada kliknięcia w nagłówek strony na całej swojej szerokości. */
      pointer-events: none;

      & > * {
        pointer-events: auto;
      }
    }
  }
}

/* ─── POSTAĆ BAZOWA: PASMO ──────────────────────────────────────────────── */

/* ⚠︎ Ta reguła musi ISTNIEĆ, choć wygląda na zbędną. Atrybut `hidden` niesie
   `display: none` z arkusza przeglądarki, a ten przegrywa z KAŻDĄ regułą
   autorską ustawiającą `display` — więc `display: flex` niżej odsłania kafle
   zwinięte przez limit stosu. Zmierzone: stos czterech miał 394 px zamiast
   308 px, mimo że skrypt policzył ukrycie poprawnie.
   Kolejność nie ma tu znaczenia, bo selektor z atrybutem jest bardziej
   specyficzny — liczy się samo istnienie reguły. */
.szewko-komunikat[hidden] {
  display: none;
}

.szewko-komunikat {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 56px;
  padding: 7px 6px 7px 12px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-sm);

  /* ⚠︎ `--font-ui`, nie `--font-body`. Canvas pisze komunikat krojem Source
     Sans 3, którego motyw nie ma — nie ma w ogóle kroju bezszeryfowego. Wybór
     rozstrzygnęła miara, nie podobieństwo nazw: przy `--font-body` najdłuższe
     ze zdań („Metody wysyłki zostaną zaktualizowane…") łamie się na TRZY linie
     i kafel rośnie do 99 px, przez co stos czterech wychodzi 416 px zamiast
     308 px — czyli przebija granicę 34 % okna, którą canvas stawia wprost.
     Przy `--font-ui` wszystkie cztery zdania mają po 78 px, co do piksela jak
     w kadrze. Tego kroju używała też poprzednia reguła komunikatów w `base.css`. */
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;

  /* Jawnie, bo komunikat wchodzi w cudze sekcje i dziedziczy ich wyrównanie.
     Zmierzone na 390 px: na koszyku pasma wychodziły wyśrodkowane. Poprzednia
     reguła w `base.css` miała tę linię z tego samego powodu. */
  text-align: left;

  & p {
    margin: 0;
  }

  & a {
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* ⚠︎ PŁYTKA JEST NIEPRZEZROCZYSTA — i to jest poprawka z 12.08.2026 (K7).
 *
 * Do tego dnia stało tu `color-mix(… var(--color-dark-mahogany) 62%, transparent)`,
 * czyli tło zależne od tego, co akurat pod komunikatem przejeżdża. Kontener
 * `.szewko-komunikaty` jest `fixed`, więc pod spodem bywa **wszystko** —
 * i wynik rozjeżdżał się o rząd wielkości:
 *
 *     nad ciemną sekcją      tekst 10,06:1   znak 3,86:1   ✔
 *     nad jasną sekcją       tekst  3,56:1   znak 1,31:1   ✖ (progi 4,5 i 3)
 *
 * Zmierzone sondą `scripts/audyt-kontrastu.js`; pełny rachunek w
 * `docs/KONTRAST.md` §6a.3. W kasie problemu nie widać, bo tam tło jest ciemne —
 * ⚠︎ dlatego nie wyszedł wcześniej, mimo że pasmo jest tam postacią domyślną.
 * Uderzał za to w **cały widok telefonu**, gdzie pasmo jest domyślne poniżej 921 px.
 *
 * ⚠︎ To NIE jest odejście od canvasu, tylko dociągnięcie do niego: runda 2
 * (`docs/strony/poprawki/komunikaty-r2.md`, kadr 4) opisuje nośnik jako
 * „Dark Mahogany" bez rozcieńczenia, a wariant błędu ma pełną płytkę
 * pergaminową od początku. Półprzezroczystość została po przegranym wariancie 1
 * i nigdzie nie była uzasadniona.
 *
 * ⚠︎ Ta sama liczba tłumaczy, dlaczego `--color-oasis-green-light` ma
 * w `tokens.css` uzasadnienie „3,9:1 na Dark Mahogany": ono jest prawdziwe
 * dla tła PEŁNEGO. Przy 62 % krycia przestawało obowiązywać, a nikt tego
 * nie zauważył. Po tej poprawce znów obowiązuje. */
.szewko-komunikat--sukces {
  color: color-mix(in srgb, var(--color-parchment) 94%, transparent);
  background: var(--color-dark-mahogany);
  border-color: color-mix(in srgb, var(--color-oasis-green-light) 42%, transparent);
  border-left-color: var(--color-oasis-green-light);

  & .szewko-komunikat__znak {
    color: var(--color-oasis-green-light);
  }
}

.szewko-komunikat--info {
  color: color-mix(in srgb, var(--color-parchment) 94%, transparent);
  background: var(--color-dark-mahogany);
  border-color: color-mix(in srgb, var(--color-sand-gold) 40%, transparent);
  border-left-color: var(--color-sand-gold);

  & .szewko-komunikat__znak {
    color: var(--color-sand-gold);
  }
}

/* Błąd na ODWRÓCONYM POLU — jasna płytka, tekst i znak w Terracocie (6,89:1).
   Reguła kontrastowa `tokens.css`, punkt 2; obowiązuje w obu nośnikach.
   Terracotta na ciemnym daje 1,8:1, więc wariant „czerwone na ciemnym"
   nie wchodzi w grę i nie jest kwestią gustu. */
.szewko-komunikat--blad {
  color: var(--color-terracotta);
  background: var(--color-parchment);
  border-color: color-mix(in srgb, var(--color-terracotta) 35%, transparent);
  border-left-color: var(--color-terracotta);

  & .szewko-komunikat__znak {
    color: var(--color-terracotta);
  }
}

/* ─── ZNAK ──────────────────────────────────────────────────────────────── */

/* W paśmie znak siedzi w kwadracie 40 px z własnym obrysem — pasmo jest szersze
   i bez tego ikona ginie na początku wiersza. */
/* ⚠︎ **Rysunek ikony trzeba odtworzyć w CSS-ie, bo kasa go rozbiera.**
 *
 * `szewko_ikona()` wypisuje `fill="none" stroke="currentColor"` na `<svg>`
 * i normalnie to wystarcza. Kasa jednak odpowiada AJAX-em, a `wc_print_notices()`
 * przepuszcza CAŁĄ odpowiedź przez `wc_kses_notice()` — czyli
 * `wp_kses_allowed_html( 'post' )` (`wc-notice-functions.php:283–299`). Ta lista
 * dopuszcza sam znacznik `<svg>` i `<path>`, ale **nie zna atrybutów `fill`
 * ani `stroke`**, więc je zdejmuje. Zostaje ścieżka bez obrysu i z domyślnym
 * wypełnieniem SVG, czyli CZARNY TRÓJKĄT na pergaminowej płytce.
 *
 * Zmierzone na nieudanym „Złóż zamówienie": `fill: rgb(0,0,0)`, `stroke: none`.
 * Reguła w arkuszu przez kses nie przechodzi, więc odtwarza rysunek na obu
 * drogach — i przy okazji wiąże go z kolorem stanu. */
.szewko-komunikat svg,
.szewko-banderola svg,
.szewko-slad svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.szewko-komunikat__znak {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* ─── TREŚĆ ─────────────────────────────────────────────────────────────── */

.szewko-komunikat__tresc {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-wrap: pretty;

  /* Woo wypisuje błędy jako `<ul>`, a sukcesy jako `<div>`. Lista wewnątrz
     komunikatu ma się czytać jak zdania, nie jak wypunktowanie. */
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li + li {
    margin-top: var(--space-xs);
  }

  /* Woo daje „Zobacz koszyk" klasę `button`, przez co łapał wygląd CTA sekcji.
     Ma być odnośnikiem w treści zdania. Reguła przeniesiona z `base.css`. */
  & .button {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
}

/* ─── ZAMKNIĘCIE ────────────────────────────────────────────────────────── */

.szewko-komunikat__zamknij {
  flex: 0 0 auto;
  align-self: center;
  width: 44px;
  height: 44px;
  margin: -2px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;

  /* ⚠︎ 70 %, nie 55 % — poprawka z 12.08.2026 (K7).
     Krzyżyk dziedziczy kolor po komunikacie, więc jedno krycie obsługuje trzy
     różne pary. Rozstrzyga NAJTRUDNIEJSZA: Terracotta na pergaminowej płytce
     błędu dawała przy 55 % **2,59:1**, poniżej progu 3:1 dla elementu
     nietekstowego (WCAG 1.4.11). Przy 70 % to 3,51:1, a w sukcesie i info
     — 5,77:1 zamiast 4,17:1.
     Krzyżyk zostaje przygaszony wobec treści (o to chodziło w 55 %), tylko
     przestaje wypadać z progu tam, gdzie płytka jest jasna. */
  color: color-mix(in srgb, currentColor 70%, transparent);

  &:hover,
  &:focus-visible {
    color: currentColor;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
  }
}

/* ─── POSTAĆ NADPISUJĄCA: KAFEL ─────────────────────────────────────────── */

/* Warunek jest podwójny i oba człony są konieczne: szeroki ekran ORAZ brak
   wymuszenia pasma. Kasa stawia `--pasmo` z PHP i wypada z tej reguły na
   każdej szerokości. */
@media (min-width: 921px) {
  .szewko-komunikat:not(.szewko-komunikat--pasmo) {
    width: 360px;
    max-width: 100%;
    min-height: 0;
    gap: 12px;
    padding: 14px 52px 18px 16px;
    border: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);
    border-radius: var(--radius-md);
    background: var(--color-dark-mahogany);

    /* Kafel leży NA treści, więc musi mieć pod sobą cień — inaczej na ciemnym
       tle zlewa się z sekcją i czyta się jak wstawka w toku strony. */
    box-shadow:
      0 18px 44px color-mix(in srgb, var(--color-smoked-tent) 60%, transparent),
      0 4px 12px color-mix(in srgb, var(--color-smoked-tent) 45%, transparent);

    &.szewko-komunikat--blad {
      background: var(--color-parchment);
      border-color: color-mix(in srgb, var(--color-terracotta) 40%, transparent);
    }

    /* Kwadrat wokół ikony to element pasma. W kaflu znak stoi luzem, wyrównany
       do pierwszej linii tekstu. */
    & .szewko-komunikat__znak {
      width: auto;
      height: auto;
      margin-top: 1px;
      border: 0;
      background: none;
    }

    & .szewko-komunikat__tresc {
      min-height: 0;
      display: block;
    }

    /* 52 px prawej wyściółki wyżej to miejsce właśnie na ten przycisk. */
    & .szewko-komunikat__zamknij {
      position: absolute;
      top: 0;
      right: 0;
      align-self: auto;
      margin: 0;
    }
  }
}

/* ─── PASEK ZBIORCZY ────────────────────────────────────────────────────── */

/* Kafle nie znikają same, więc stos rośnie. Limit to trzy widoczne; czwarty
   nie tworzy czwartej karty, tylko zwija najstarszy do paska 44 px, który jest
   przy okazji miejscem na „Zamknij wszystkie". Rachunek z canvasu: trzy kafle
   to 254 px (28 % okna 900 px), z paskiem 308 px (34 %) — granica, powyżej
   której komunikat przestaje być komunikatem i staje się drugą kolumną. */
.szewko-komunikaty__zbiorczy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 var(--space-md);
  border: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-dark-mahogany) 92%, transparent);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--color-parchment) 70%, transparent);

  & button {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-sand-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
  }

  @media (min-width: 921px) {
    border-radius: var(--radius-md);
  }
}

/* ─── CUDZY ZNACZNIK BLOKOWY W POSTACI PASMA ────────────────────────────── */

/* `wc-block-components-notice-banner` to **drugi znacznik tego samego bytu**.
 * Rdzeń wypisuje go w bramce blokowej, a sięgają po niego wtyczki z własnymi
 * zakładkami konta — pierwszą złapaną jest „Płatności One click" Przelewy24
 * („Brak zapisanej płatności/zakupu one click."). Klas `woocommerce-*` na nim
 * nie ma, więc reguły komponentu go nie widzą.
 *
 * Dostaje **pasmo, nie kafel**, i to nie z lenistwa: pojawia się wewnątrz
 * zakładki panelu konta, czyli w dokumencie, do którego się wraca. Ta sama
 * reguła, co przy komunikatach własnych na koncie (`szewko_komunikaty_nosnik()`).
 *
 * ⚠︎ `wc-blocks.css` kolejkuje się PRZED arkuszami motywu (zmierzone na
 * `moje-konto/p24-one-click/`), więc przy równej wadze wygrywa reguła stąd.
 * Waga jest jednak podniesiona do dwóch klas przy wariantach, bo wtyczka
 * pisze je jako `.wc-block-components-notice-banner.is-info`. */
.wc-block-components-notice-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-height: 56px;
  margin: 0 0 var(--space-lg);
  padding: 7px 6px 7px 12px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  text-align: left;

  /* Glif wtyczki staje się znakiem pasma: kwadrat 40 px z własnym obrysem.
     `padding` na `<svg>` działa — to element zastępowany, więc rysunek skaluje
     się do pola treści, a 40 − 2 × 9 − 2 × 1 daje glif 20 px, jak w kadrze.
   *
   * ⚠︎ **Klasa jest w selektorze dwa razy i to jest jedyny powód, dla którego
   * ta reguła działa.** `wc-blocks.css` maluje ten glif NIEBIESKIM TŁEM
   * (`rgb(0,124,186)`) z selektora o dwóch klasach; przy jednej klasie moja
   * reguła przegrywała wagą i na paśmie siedział niebieski kwadrat — widoczny
   * na zrzucie właściciela z 11.08.2026. Podwojenie klasy wyrównuje wagę,
   * a przy remisie wygrywa arkusz kolejkowany później, czyli ten.
   * `!important` nie jest tu potrzebny i dlatego go nie ma. */
  &.wc-block-components-notice-banner > svg {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    padding: 9px;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, currentColor 12%, transparent);
    fill: currentColor;
  }

  /* Sama ścieżka też, bo `fill` na `<svg>` nie dosięga potomka z własnym. */
  &.wc-block-components-notice-banner > svg path {
    fill: currentColor;
  }

  & a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.wc-block-components-notice-banner.is-success {
  color: color-mix(in srgb, var(--color-parchment) 94%, transparent);
  background: color-mix(in srgb, var(--color-dark-mahogany) 62%, transparent);
  border-color: color-mix(in srgb, var(--color-oasis-green-light) 42%, transparent);
  border-left-color: var(--color-oasis-green-light);
}

.wc-block-components-notice-banner.is-info {
  color: color-mix(in srgb, var(--color-parchment) 94%, transparent);
  background: color-mix(in srgb, var(--color-dark-mahogany) 62%, transparent);
  border-color: color-mix(in srgb, var(--color-sand-gold) 40%, transparent);
  border-left-color: var(--color-sand-gold);
}

/* Odwrócone pole — ta sama reguła kontrastowa, co przy błędzie własnym. */
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
  color: var(--color-terracotta);
  background: var(--color-parchment);
  border-color: color-mix(in srgb, var(--color-terracotta) 35%, transparent);
  border-left-color: var(--color-terracotta);
}

/* ─── DOLNE PIĘTRO: ŚLAD PO ZDJĘTEJ POZYCJI ─────────────────────────────── */

/* Wiersz zostaje na liście, w miejscu, w którym stała rzecz. Wysokość wiersza
   produktu (132 px) zostaje nietknięta, więc sąsiedzi nie skaczą — a to jest
   cały sens dolnego piętra. Marginesy 10/4 px odtwarzają kadr: przerywany
   prostokąt jest wsunięty w wiersz, nie jest wierszem.

   Ślad NIE MA krzyżyka i to nie jest przeoczenie: nie ma czego zamykać poza
   pustym miejscem, a przy przejściu dalej znika sam razem z kolejką Woo. */
.szewko-slad {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 112px;
  margin: 10px 4px;
  padding: 12px var(--space-md);
  border: 1px dashed color-mix(in srgb, var(--color-sand-gold) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-parchment) 4%, transparent);
  text-align: center;

  /* Kotwica `#poz-…` z łącza usuwania celuje w ten wiersz. Bez zapasu chowa
     się pod przyklejonym paskiem nawigacji — 90 px paska plus 24 px oddechu,
     ten sam rachunek co przy górze stosu kafli. */
  scroll-margin-top: calc(var(--szewko-pasek-wysokosc) + var(--space-lg));
}

.szewko-slad__tekst {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-parchment) 68%, transparent);
  text-wrap: pretty;
}

/* „Cofnij?" jest tu WIĘKSZE niż w komunikacie (16 px) i ma ikonę, bo jest
   jedyną akcją w wierszu, a nie dopiskiem do zdania. */
.szewko-slad__cofnij {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 6px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-sand-gold);
  text-decoration: underline;
  text-underline-offset: 4px;

  &:hover {
    color: var(--color-brass-lantern);
  }
}

/* ─── DOLNE PIĘTRO: BANDEROLA PRZY RZECZY NIEDOSTĘPNEJ ──────────────────── */

/* Wiersz dostaje obrys terakotowy i przygaszenie, żeby było widać, że nie
   liczy się do rachunku. `outline` zamiast `border`, bo lewa krawędź wiersza
   jest już zajęta: ma tam 3 px przezroczystej kreski, która zapala się na
   Sand Gold przy najechaniu (`cart.css`). Ujemny offset wciąga obrys do środka,
   więc nic nie skacze. */
.szewko-pozycja--niedostepna {
  outline: 1px solid color-mix(in srgb, var(--color-terracotta) 60%, transparent);
  outline-offset: -1px;
  background: color-mix(in srgb, var(--color-terracotta) 7%, transparent);

  /* Przygaszenia z kadru: zdjęcie 55 %, nazwa 62 %, cena 50 %. */
  & .szewko-pozycja__kadr {
    opacity: 0.55;
    filter: saturate(0.7);
  }

  & .szewko-pozycja__nazwa a,
  & .szewko-pozycja__nazwa {
    color: color-mix(in srgb, var(--color-parchment) 62%, transparent);
  }

  & .szewko-pozycja__suma {
    color: color-mix(in srgb, var(--color-sand-gold) 50%, transparent);
  }
}

/* Banderola siedzi WEWNĄTRZ obrysu wiersza, przyklejona do jego dolnej
   krawędzi — jest częścią pozycji, nie osobnym blokiem na liście. Ujemne
   marginesy zdejmują wyściółkę wiersza (20 px u dołu, `--space-sm` po bokach),
   żeby pasek dobił do krawędzi. 44 px to cel dotykowy odnośnika w środku. */
.szewko-banderola {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-height: 44px;
  margin: 14px calc(-1 * var(--space-sm)) -20px;
  padding: 6px 12px;
  background: var(--color-parchment);
  border-top: 1px solid color-mix(in srgb, var(--color-terracotta) 35%, transparent);
  color: var(--color-terracotta);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.4;

  /* Na wąskim ekranie wiersz przestaje być siatką i staje się flexem
     z zawijaniem (`cart.css`, próg 920 px) — `grid-column` nic tam nie znaczy,
     więc szerokość trzeba wziąć wprost.

     ⚠︎ Marginesy poziome schodzą do zera, bo wiersz ma tam `padding: 20px 0`,
     czyli **żadnej wyściółki po bokach**. Ujemny margines nie miał więc czego
     zdejmować i wypychał banderolę POZA wiersz: zmierzone na 390 px — pasek
     zaczynał się na 16 px przy wierszu stojącym na 24 px, czyli 8 px na lewo
     od niego, i o tyle samo nie dobijał do prawej krawędzi. Pionowy zostaje,
     bo wyściółka dolna jest ta sama. */
  @media (max-width: 920px) {
    width: 100%;
    margin-inline: 0;
  }
}

.szewko-banderola__znak {
  flex: 0 0 auto;
  display: flex;
}

.szewko-banderola__tekst {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  text-wrap: pretty;
}

.szewko-banderola__wyjscie {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 600;
  color: var(--color-terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* ─── PASMO KASY ────────────────────────────────────────────────────────── */

/* Przeszkoda stoi NAD przyciskiem „Złóż zamówienie" i nie ma krzyżyka —
   przeszkody się nie zamyka. Powód i zablokowany przycisk mają być widoczne
   w jednym spojrzeniu, stąd jeden `--space-md` odstępu i nic więcej.
   Rozstrzygnięcie z wariantu 1, podtrzymane w wariancie 5 (kadr „jeden nośnik").
   Slot stoi w DOM od załadowania, bo `checkout.js` wstawia komunikat po AJAX-ie
   i musi mieć dokąd. */
.szewko-kasa__przeszkoda {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  &:not(:empty) {
    margin-bottom: var(--space-md);
  }
}