/* Karta produktu `/produkt/[slug]` — arkusz szablonu (fala 1).
 *
 * ŹRÓDŁA WARTOŚCI, przeczytane w chwili pisania z `canvas:Karta Produktu
 * Finalna.dc.html`:
 *   · szkielet i siatka 58/42 ← l. 343–359
 *   · panel zakupowy          ← l. 380–457
 *   · taby                    ← l. 462–495
 *   · cross-sell              ← l. 544–555
 *   · przyklejony pasek       ← l. 561–568 (desktop), l. 1067–1073 (390 px)
 *   · widok 390 px            ← l. 881–1063
 *
 * ZERO SUROWYCH HEKSÓW. Krycia z canvasu rozpisane `color-mix()` na tokenach.
 * Sprawdzone znak w znak z `tokens.css`: `rgba(200,169,110,…)` to Sand Gold,
 * `rgba(107,74,42,…)` Camel Brown, `rgba(28,16,7,…)` Smoked Tent,
 * `rgba(245,233,211,…)` Parchment.
 *
 * ⚠︎ JEDNO ŚWIADOME ODEJŚCIE OD CANVASU. Podtytuł kursywą nad cross-sellem
 * jest na canvasie w Sand Gold na Camel Brown — to **3,55:1**, poniżej progu
 * 4,5:1, i `tokens.css` rozstrzyga to wprost: „na Camel Brown nadtytuły idą
 * w Parchment". Reguła jest przekrojowa (`PORT.md` §2d), więc bije pojedynczy
 * kadr. Opisane w `NOTES.md`.
 */

.szewko-produkt-strona {
  --produkt-obrys: color-mix(in srgb, var(--color-sand-gold) 40%, transparent);
  --produkt-kreska: color-mix(in srgb, var(--color-sand-gold) 35%, transparent);
  --produkt-cichy: color-mix(in srgb, var(--color-camel-brown) 70%, transparent);

  background: var(--color-parchment);
}

/* ─── CELE DOTYKOWE ODNOŚNIKÓW TEKSTOWYCH ───────────────────────────────
 *
 * Sztuczka „rysunek 28 px, pole trafienia 44 px" z `PORT.md` §2d: czysty CSS,
 * zero JS, zero zmiany wyglądu. Rozwiązuje pozycję „zmierzyć cele dotykowe
 * linków tekstowych", która wraca w §5 przy każdej podstronie.
 *
 * Pole rośnie WYŁĄCZNIE W PIONIE. Rozepchnięcie w poziomie zderzyłoby sąsiednie
 * okruszki — dzieli je 8 px, więc po 13 px z każdej strony pola zachodziłyby
 * na siebie i klik trafiałby w cudzy link.
 *
 * Zmierzone Playwrightem 04.08 (390 px): okruszki 19 px, odnośnik tabeli 27 px,
 * „Clear" 18 px — wszystkie poniżej progu, wszystkie w tym porcie nowe.
 */
.szewko-produkt__okruszki a,
.szewko-warianty__tabela {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset-block: -13px;
    inset-inline: -2px;
  }
}

/* Zakładka „Opis" ma 36 px szerokości przy 46 px wysokości — brakuje jej
   w poziomie, nie w pionie, więc pole rośnie na boki. Odstęp między
   zakładkami to 36 px, więc 4 px z każdej strony niczego nie zderza. */
.szewko-produkt-strona .wc-tabs a {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline: -4px;
  }
}

/* Kontener 1400 px z wyściółką 80 px — ten sam w każdej sekcji, także
   w pasach pełnej szerokości, gdzie tło wychodzi poza niego. */
.szewko-produkt__kolumna {
  box-sizing: border-box;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 80px;

  @media (max-width: 1024px) {
    padding-inline: var(--space-xl);
  }

  @media (max-width: 640px) {
    padding-inline: var(--space-lg);
  }
}

/* ⚠︎ **KONTENER SIEDZI NA TRZECH BLOKACH GÓRNYCH, A NIE NA `.product`.**
 *
 * Tak było odwrotnie i to była usterka widoczna gołym okiem: `.product`
 * dostawało `max-width: 1400px`, a recenzje i cross-sell renderują się
 * **wewnątrz niego** (`woocommerce_after_single_product_summary` stoi
 * w `content-single-product.php`, w środku tego samego `<div>`). Pas
 * na Dark Mahogany kończył się więc 1240 px szerokości pośrodku okna,
 * zamiast iść od krawędzi do krawędzi. Zmierzone 10.08 na 1905 px:
 * sekcja recenzji `x = 332,5`, `width = 1240`, przy `main` szerokim na 1905.
 *
 * Odrzucone: `width: 100vw; margin-left: calc(50% - 50vw)` na samych pasach.
 * `100vw` liczy razem z paskiem przewijania, więc każdy pas byłby o jego
 * szerokość za szeroki i dokładałby poziome przewijanie całej podstronie.
 *
 * Kontener dostają zamiast tego **trzy bloki, które go naprawdę potrzebują**:
 * okruszki, siatka zakupowa i pas zakładek. Pasy pełnej szerokości mają
 * własny w środku (`.szewko-produkt__kolumna`), czyli dokładnie ten układ,
 * który rysuje canvas (l. 504–507: pas na pełną szerokość, w nim
 * `max-width: 1400px; padding: 0 80px`).
 *
 * ⚠︎ **DZIECKO BEZPOŚREDNIE, NIE POTOMEK** — reguła zostaje w mocy dla
 * odstępu górnego. `.product` to klasa, którą `wc_product_class()` daje
 * **obu** znacznikom: opakowaniu podstrony i **każdej pozycji pętli**
 * (`<li>` z `content-product.php`). Karty cross-sellu stoją wewnątrz tego
 * opakowania, więc selektor potomka wchodził też w nie i dokładał każdej
 * karcie wyściółkę. Zmierzone 10.08 po ustawieniu pierwszych up-sellów:
 * karta 270 px, a jej wnętrze 108 px. */
.szewko-produkt-strona > .product {
  padding-top: var(--space-xl);

  @media (max-width: 640px) {
    padding-top: var(--space-lg);
  }
}

.szewko-produkt__okruszki,
.szewko-produkt__zakup,
.szewko-produkt-strona > .product > .woocommerce-tabs {
  box-sizing: border-box;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 80px;

  @media (max-width: 1024px) {
    padding-inline: var(--space-xl);
  }

  @media (max-width: 640px) {
    padding-inline: var(--space-lg);
  }
}

/* ─── OKRUSZKI ──────────────────────────────────────────────────────────── */

.szewko-produkt__okruszki {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);

  /* ⚠︎ `padding-block`, nie skrót `padding` — skrót zeruje `padding-inline`
     ustawione wyżej w regule kontenera i okruszki wracają do krawędzi okna. */
  padding-block: 6px 22px;
  font-family: var(--font-ui);
  font-size: 12.5px;

  & a {
    color: var(--color-camel-brown);

    &:hover {
      color: var(--color-desert-rust);
    }
  }

  /* Ostatni człon jest PEŁNĄ nazwą produktu i się nie skraca (r1 pkt 11):
     ścieżka i nagłówek muszą mówić to samo. Na wąskim ekranie łamie się
     do kolejnych linii — `flex-wrap` wyżej. */
  & [aria-current="page"] {
    color: color-mix(in srgb, var(--color-camel-brown) 70%, transparent);
  }
}

.szewko-produkt__okruszek-znak {
  color: color-mix(in srgb, var(--color-camel-brown) 55%, transparent);
}

/* ─── SEKCJA ZAKUPOWA ───────────────────────────────────────────────────── */

.szewko-produkt__zakup {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: 56px;
  align-items: start;

  /* Podział 58/42 jest zatwierdzony i „ma zostać dokładnie taki, jaki jest"
     (r1, sekcja F). Poniżej 900 px kolumny nie mają czego dzielić — panel
     schodzi pod galerię. */
  @media (max-width: 900px) {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* Druga kolumna siatki: `.summary` przychodzi z szablonu Woo. */
.szewko-produkt-strona .summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ─── PANEL: STATUS, NAZWA, CENA ────────────────────────────────────────── */

.szewko-produkt__status {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-ui);
  font-weight: 600;
  /* `mikro` (ekw. 12) — było 10 px, czyli 10,2. Plakietka niesie stan
     magazynowy, więc jest DANĄ, nie ozdobnikiem (T5); podłoga obowiązuje ją
     tym mocniej. Wersalik rośnie tu o 20 %, a płytka ma padding, nie stałą
     wysokość — pudełko idzie za literami samo. */
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;

  /* Cztery skóry tej samej plakietki. Kolor NIGDY nie niesie znaczenia sam —
     obok stoi ikona i słowo, więc odróżnienie działa też bez rozpoznawania
     barw (ustalenie przekrojowe §2d). */
  background: var(--color-oasis-green);
  color: var(--color-parchment);

  &.szewko-produkt__status--ostatnie {
    background: var(--color-terracotta);
  }

  &.szewko-produkt__status--niedostepny,
  &.szewko-produkt__status--wyczerpany {
    background: var(--color-dark-mahogany);
    color: var(--color-sand-gold);
  }

  /* Piąta skóra — zakup z dłuższą dostawą (canvas PGc C1). Camel Brown
     z Pergaminem: nie Terracotta („ostatnie sztuki" = pośpiech), nie Dark
     Mahogany (to „niedostępny"). Klepsydra + słowo, nie sam kolor. */
  &.szewko-produkt__status--dostawa {
    background: var(--color-camel-brown);
    color: var(--color-parchment);
  }
}

.szewko-produkt-strona .product_title {
  margin: 14px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.25;
  color: var(--color-smoked-tent);
  text-wrap: pretty;

  @media (max-width: 640px) {
    font-size: 24px;
    line-height: 1.3;
  }
}

.szewko-produkt__ceny {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

/* ⚠︎ Obie ceny idą `--font-cena`, nie `--font-heading` — decyzja **T2**
   z 11.08.2026 (`docs/TYPOGRAFIA.md` §3). Powód, i to, dlaczego stopnie
   zostają nietknięte, stoi przy `.szewko-karta__cena`
   w `content-product.css`. */
.szewko-produkt__cena {
  font-family: var(--font-cena);
  font-weight: 600;
  font-size: 34px;
  color: var(--color-desert-rust);

  @media (max-width: 640px) {
    font-size: 28px;
  }
}

/* Produkt o różnych cenach wariantów (karta podarunkowa): „od” mniejsze, jak
   na liście (`content-product.css`, `.szewko-karta__od`), a po wyborze wariantu
   cena wybranej kwoty stoi tylko tutaj — powtórka Woo pod pigułkami znika
   (KP10, brief KP4 P1). */
.szewko-produkt__ceny--zakres .szewko-karta__od {
  font-size: 18px;
  font-weight: 400;
}

.szewko-produkt-strona:has(.szewko-produkt__ceny--zakres) .woocommerce-variation-price {
  display: none;
}

.szewko-produkt__cena-stara {
  font-family: var(--font-cena);
  font-size: 18px;
  color: var(--color-camel-brown);
  text-decoration: line-through;

  @media (max-width: 640px) {
    font-size: 16px;
  }
}

/* Omnibus — pełne zdanie pod rzędem ceny, 14 px, 6,5:1 na Pergaminie
   (canvas `cena-promocyjna` A-P1440; brief §2 pkt 5). */
.szewko-produkt__omnibus {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-camel-brown);
}

.szewko-produkt__omnibus-kwota {
  font-family: var(--font-cena);
  font-weight: 600;
  white-space: nowrap;
}

.szewko-produkt__rabat {
  padding: 3px var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-terracotta);
  color: var(--color-parchment);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
}

.szewko-produkt__sku {
  margin: var(--space-sm) 0 0;
  font-family: var(--font-ui);
  /* `mikro` — było 11 px (ekw. 11,2). SKU jest kodem, który klient przepisuje
     do reklamacji; poniżej podłogi mylą się w nim 1 i l. */
  font-size: 12px;
  color: color-mix(in srgb, var(--color-camel-brown) 65%, transparent);
}

.szewko-produkt-strona .woocommerce-product-details__short-description {
  margin: 14px 0 0;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--color-dark-mahogany);

  /* Kreska pod krótkim opisem jest `<hr>` na canvasie (l. 393). W motywie
     to obramowanie akapitu: pusty element bez treści byłby dla czytnika
     szumem, a wygląd jest ten sam. */
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--produkt-obrys);
}

/* ─── PANEL: RUBRYKA PUBLIKACJI CYFROWEJ ────────────────────────────────── */

.szewko-produkt__rubryka {
  margin: 18px 0 0;
  border-top: 1px solid var(--produkt-obrys);
}

.szewko-produkt__rubryka-wiersz {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);

  & dt {
    font-family: var(--font-ui);
    font-weight: 600;
    /* `mikro` — było 11 px (ekw. 11,2). Etykieta pola rubryki jest DANĄ:
       bez niej wartość obok nie znaczy nic (T5). */
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-camel-brown);
  }

  & dd {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-dark-mahogany);
    text-align: right;
  }
}

/* ─── PANEL: WARIANTY ───────────────────────────────────────────────────── */

.szewko-warianty__lista {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-top: var(--space-lg);
}

/* Przełącznik wersji (dwie karty jednego biletu) stoi nad ilością, poza
   formularzem wariantów — odstęp bierze z tej samej miary co lista wariantów. */
.szewko-produkt__wersja {
  margin-top: var(--space-lg);
}

.szewko-warianty__belka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.szewko-warianty__etykieta {
  font-family: var(--font-ui);
  font-weight: 600;
  /* `mikro` — było 10 px (ekw. 10,2). Ta sama liczba stoi przy
     `.szewko-produkt__etykieta-ilosci`; canvas trzyma obie w jednym zapisie. */
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark-mahogany);
}

/* Nazwa wybranego koloru — pełnym słowem, nie skrótem: „Piaskowy Brąz
   z przetarciem" jest częścią opisu towaru, nie etykietą kontrolki. */
.szewko-warianty__wybrany {
  color: var(--color-camel-brown);
  text-transform: none;
  letter-spacing: 0;

  &:not(:empty)::before {
    content: ": ";
  }
}

.szewko-warianty__tabela {
  padding: 4px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--color-camel-brown);
  text-decoration: underline;
  text-underline-offset: 3px;

  &[hidden] {
    display: none;
  }

  &:hover {
    color: var(--color-desert-rust);
  }
}

.szewko-warianty__pigulki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: flex-start;
}

.szewko-warianty__pozycja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

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

  /* 44 px bez wyjątków — dotyczy też desktopu (r1 pkt 32). */
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--color-camel-brown) 50%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-smoked-tent);

  /* `aria-current` — pigułka-ODNOŚNIK (przełącznik wersji Złotego Biletu,
     `inc/bilet-e-widok.php` §6): dwie karty produktu, więc bieżącą oznacza się
     jak bieżącą stronę, nie jak wciśnięty przycisk. Wygląd ten sam. */
  &[aria-pressed="true"],
  &[aria-current="true"] {
    border: 2px solid var(--color-brass-lantern);
    background: color-mix(in srgb, var(--color-sand-gold) 18%, transparent);
  }

  /* Pigułka bywa odnośnikiem — bez podkreślenia, jak przycisk obok. */
  &:is(a) {
    text-decoration: none;
  }

  /* Niedostępny wariant PRZEKREŚLAMY, nie wygaszamy: „brak XXL na liście
     czyta się jako «nie produkujemy», a to inna informacja". Zrobione
     `line-through`, a nie `opacity`, żeby pigułka pozostała czytelna —
     ma nieść informację, nie zniknąć. */
  &.szewko-warianty__pigulka--brak {
    color: color-mix(in srgb, var(--color-camel-brown) 60%, transparent);
    text-decoration: line-through;
    cursor: not-allowed;
  }
}

/* ⚠︎ Sonda tego nie zobaczyła — podpis „Wyprzedane" renderuje się dopiero
   przy wariancie bez zapasu, a produkt demonstracyjny takiego nie ma.
   Złapane odczytem arkusza: 9,5 px to ekwiwalent 9,7, najniższa wartość
   w całym pakiecie 2. `min-height` szło za rozmiarem i idzie dalej. */
.szewko-warianty__podpis {
  font-family: var(--font-ui);
  font-size: 12px;
  min-height: 15px;
  color: var(--produkt-cichy);
}

/* Krążek koloru. Obrys przez `box-shadow`, nie `border`: border zjada
   32 px średnicy od środka, a canvas rysuje pierścień NA ZEWNĄTRZ krążka. */
.szewko-warianty__krazek {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--wariant-kolor, var(--color-bleached-linen));
  box-shadow: 0 0 0 1px var(--color-camel-brown);
}

.szewko-warianty__pigulki--kolor .szewko-warianty__pigulka {
  min-width: 44px;
  padding: 0;
  border: none;
  background: transparent;

  &[aria-pressed="true"] {
    border: none;
    background: transparent;

    & .szewko-warianty__krazek {
      box-shadow:
        0 0 0 2px var(--color-parchment),
        0 0 0 4px var(--color-brass-lantern);
    }
  }
}

/* `<select>` żyje dalej — bez niego skrypt wariacji Woo nie ma czego czytać.
   Schowany wizualnie, NIE `display:none`: ukryte pole formularza bywa
   pomijane przez walidację przeglądarki, a to jest pole wymagane. */
.szewko-warianty__natywny {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Odnośnik „Clear" Woo — potrzebny funkcjonalnie, na canvasie go nie ma.
   Zostaje drobny i cichy zamiast zniknąć: bez niego nie da się cofnąć
   wyboru wariantu inaczej niż przeładowaniem strony. */
/* ⚠︎ **WOO CHOWA „CLEAR" PRZEZ `visibility`, A TO ZOSTAWIA JEGO WYSOKOŚĆ.**
 *
 * `wc-add-to-cart-variation.js` ustawia na tym odnośniku
 * `style="visibility: hidden"` dopóki nie ma wybranego wariantu — element
 * znika z oczu, ale **nadal zajmuje miejsce w układzie**. Przy naszym celu
 * dotykowym (13 px wyściółki z góry i z dołu) to jest **44 px pustki** między
 * rzędem rozmiarów a etykietą „ILOŚĆ”, czyli dokładnie ta przerwa, którą
 * właściciel pokazał na zrzucie z 10.08. Zmierzone: pigułki kończą się na
 * 873 px, stepper zaczyna na 960.
 *
 * Dopasowanie po atrybucie `style`, bo Woo nie daje na to ani klasy, ani
 * zdarzenia. Gdyby przyszła wersja zmieniła zapis, wraca stara przerwa —
 * nie awaria. */
.szewko-produkt-strona .reset_variations[style*="hidden"] {
  display: none;
}

.szewko-produkt-strona .reset_variations {
  display: inline-block;

  /* ⚠︎ Wyściółka, a NIE sztuczka `::before` z §2d. Zmierzone 04.08: nad tym
     odnośnikiem stoi rząd pigułek, a pseudoelement bez własnego kontekstu
     układania przegrywa z późniejszym rodzeństwem w potoku — `elementFromPoint`
     10 px nad „Clear" trafiał w pigułkę, nie w odnośnik. Sztuczka działa tam,
     gdzie nad elementem jest wolne pole (okruszki, odnośnik tabeli); tutaj nie
     ma. Prawdziwa wyściółka daje 44 px bez zgadywania, kto na kim leży. */
  padding-block: 13px;
  margin-top: -5px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--produkt-cichy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── PANEL: ILOŚĆ I CTA ────────────────────────────────────────────────── */

/* Ta sama typografia, co „KOLOR" i „ROZMIAR" nad pigułkami wariantów
   (`.szewko-warianty__etykieta`) — canvas trzyma wszystkie trzy w jednym
   zapisie. `display: block` odsuwa stepper do własnego wiersza. */
.szewko-produkt__etykieta-ilosci {
  display: block;
  margin-top: var(--space-lg);
  font-family: var(--font-ui);
  font-weight: 600;
  /* `mikro` — było 10 px (ekw. 10,2); patrz `.szewko-warianty__etykieta`. */
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-dark-mahogany);
}

/* Przy sprzedaży po jednej sztuce `quantity-input.php` zostawia w tym miejscu
   sam `<input type="hidden">` i etykietę dla czytnika. Pudełko z obramowaniem
   zostawało wtedy jako kreska wysoka na 2 px pod rubryką — zmierzone na karcie
   depeszy. Chowamy je, gdy nie ma czego oprawiać. */
.szewko-produkt-strona .quantity:not(:has(input[type="number"])) {
  display: none;
}

.szewko-produkt-strona .quantity {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 14px 0 0;
  border: 1px solid var(--color-camel-brown);
  border-radius: var(--radius-sm);

  & input[type="number"] {
    width: 40px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    color: var(--color-smoked-tent);

    /* Strzałki natywnego `number` są 12 px i stoją obok przycisków 44 px —
       dwa różne sposoby na to samo, z czego jeden nie spełnia progu dotyku. */
    -moz-appearance: textfield;
    appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      margin: 0;
      -webkit-appearance: none;
      appearance: none;
    }
  }
}

.szewko-produkt__krok {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 18px;
  color: var(--color-camel-brown);

  &[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
  }
}

/* ⚠︎ Sonda tego nie zobaczyła — komunikat pokazuje się dopiero po dobiciu
   steppera do limitu. Odczytane z arkusza: 11,5 px to ekwiwalent 11,7.
   Szczebel `pomocniczy` (14), bo to komunikat progu, czyli DANA (T5). */
.szewko-produkt__limit {
  margin: 6px 0 0;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-camel-brown) 75%, transparent);

  &[hidden] {
    display: none;
  }
}

/* Przycisk pierwszorzędny — 56 px, gradient, cień. Woo renderuje go jako
   `button.single_add_to_cart_button`, więc klasa Woo i nasza obok siebie. */
.szewko-produkt__cta,
.szewko-produkt-strona .single_add_to_cart_button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-sizing: border-box;
  width: 100%;
  min-height: 56px;
  margin-top: var(--space-lg);
  padding: 0 var(--space-lg);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-sunrise-glow);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-desert-rust) 28%, transparent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-parchment);
  text-align: center;

  /* ⚠︎ Pierścień ogniskowej trzeba tu przywrócić RĘCZNIE — K6, uzupełnienie
     z 12.08.2026. Powód jest inny niż przy pozostałych pięciu miejscach i dlatego
     umknął przy pierwszym przejściu: ta reguła NIE JEST stanowa. Zwykły
     `box-shadow` przycisku ma specyficzność `.klasa .klasa`, czyli wyższą niż
     globalne `:focus-visible` z `base.css` — i wygrywa z nim także w ogniskowej,
     mimo że o niej nie mówi. Zostawał sam złoty obrys, a to na jasnej karcie
     produktu **1,87:1**.
     ⚠︎ Szukając podobnych miejsc nie wystarczy grep po `:focus-visible` —
     trzeba szukać KAŻDEGO `box-shadow` na elemencie ogniskowalnym. */
  &:focus-visible {
    box-shadow:
      var(--pierscien-ogniskowej),
      0 4px 14px color-mix(in srgb, var(--color-desert-rust) 28%, transparent);
  }

  &:disabled,
  &.disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  /* Stan ładowania — jedyna realna część pozycji „szkielet ładowania"
     z `PORT.md` §5. Napis zostaje na miejscu (podmiana tekstu przesuwałaby
     przycisk), a nad nim wjeżdża wirujący pierścień. */
  &[data-stan="laduje"] {
    position: relative;
    color: transparent;

    &::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      border: 2px solid color-mix(in srgb, var(--color-parchment) 40%, transparent);
      border-top-color: var(--color-parchment);
      border-radius: var(--radius-full);
      animation: szewko-produkt-obrot 700ms linear infinite;
    }
  }
}

@keyframes szewko-produkt-obrot {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .szewko-produkt__cta[data-stan="laduje"]::after,
  .szewko-produkt-strona .single_add_to_cart_button[data-stan="laduje"]::after {
    animation-duration: 2s;
  }
}

/* Komunikat błędu dodania (klatka `2g`). Inline pod przyciskiem, w Terracocie,
   z ikoną — **nie toast**, nie znikający. Przycisk wraca do stanu klikalnego. */
.szewko-produkt__blad {
  margin: 10px 0 0;
  font-size: 13px;

  &[hidden] {
    display: none;
  }
}

/* ─── PANEL: ODŁÓŻ NA BOK ───────────────────────────────────────────────── */

.szewko-produkt__odloz-blok {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Waga osłabiona świadomie (r1 pkt 19): 44 px wobec 56 px, obrys zamiast
   wypełnienia, tekst w Camel Brown. Wcześniej oba przyciski miały niemal
   tę samą wagę. */
.szewko-produkt__odloz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--color-sand-gold) 50%, transparent);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-camel-brown);

  &[aria-pressed="true"] {
    border-color: var(--color-brass-lantern);
    background: color-mix(in srgb, var(--color-sand-gold) 15%, transparent);

    & .szewko-ikona {
      fill: currentColor;
    }
  }
}

.szewko-produkt__odloz-druk {
  margin: -2px 0 0;
  text-align: center;
  font-family: var(--font-ui);
  /* `pomocniczy` — było 11,5 px (ekw. 11,7). Zdanie mówi, GDZIE odłożona
     rzecz się znajdzie, więc jest instrukcją, nie ozdobnikiem (T5). */
  font-size: 14px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-camel-brown) 70%, transparent);
}

/* ─── PANEL: STAN NIEDOSTĘPNY ───────────────────────────────────────────── */

.szewko-produkt__brak {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: var(--space-lg);
  padding: var(--space-md) 20px;
  border: 1px solid color-mix(in srgb, var(--color-sand-gold) 50%, transparent);
  border-radius: var(--radius-md);
  background: var(--color-bleached-linen);
}

.szewko-produkt__brak-obraz {
  flex: 0 0 auto;
  width: 84px;
  height: auto;
}

/* ⚠︎ Zdjęty krój akcentowy — mechanizm 3, decyzja **T5** z 11.08.2026.
   Do 11.08 stała tu kursywa akcentowa, a niesie ona jedno z dwóch zdań:
   „Nakład wyczerpany. Ta rzecz nie wróci na szlak." albo „Kolejna partia
   wyrusza z manufaktury." Różnica między nimi rozstrzyga, czy warto czekać —
   to jest DANA, nie głos, a kursywa mówi czytelnikowi „to poboczne"
   niezależnie od tego, jak dobrze się składa. */
.szewko-produkt__brak-tekst {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;

  /* ⚠︎ Kursywa w Sand Gold na jasnym tle daje ~1,9:1 przy wymaganych 4,5:1
     (r1 pkt 14). Na Parchment i Bleached Linen idzie w Camel Brown. */
  color: var(--color-camel-brown);
}

/* Formularz „Powiadom, gdy wróci" pod płytką braku ma od PG4 własny part
   i arkusz (`powiadom-formularz.css`) — wspólny dla karty, landingów
   i zakładki „Odłożone". */

/* ─── PANEL: SYGNAŁY ZAUFANIA ───────────────────────────────────────────── */

.szewko-produkt__zaufanie {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 18px;
}

.szewko-produkt__sygnal {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--color-camel-brown);

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

.szewko-produkt__nota-prawna {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-camel-brown);
}

.szewko-produkt__platnosci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 6px 0 0;
  padding: 0;
  list-style: none;

  & li {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--color-camel-brown) 25%, transparent);
    border-radius: var(--radius-sm);
    background: var(--color-bleached-linen);
  }

  & img {
    display: block;
    height: 16px;
    width: auto;
  }
}

/* ─── TABY ──────────────────────────────────────────────────────────────
 *
 * Znacznik zostaje Woo (`.woocommerce-tabs`, `.wc-tabs`, `.wc-tab`), bo na
 * nim wisi przełączanie z `wc-single-product.js` — razem z obsługą klawiatury
 * i `aria-selected`. Napisane od nowa działałoby, dopóki ktoś nie użyłby
 * strzałek.
 *
 * ⚠︎ Taby stoją PONIŻEJ obu kolumn, na pełną szerokość kontenera (r1 pkt 15):
 * wcześniej pas zaczynał się, gdy panel wciąż wisiał po prawej.
 */

.szewko-produkt-strona .woocommerce-tabs {
  margin-top: 72px;

  @media (max-width: 640px) {
    margin-top: var(--space-xl);
  }
}

.szewko-produkt-strona .wc-tabs {
  display: flex;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--produkt-obrys);

  /* ⚠︎ ZAWIJANIE DO DWÓCH WIERSZY — DECYZJA WŁAŚCICIELA 19.08.2026 (D101).
     Do tego dnia stało tu przewijanie poziome z uzasadnieniem „wzorzec
     natywny; łamanie rozbiłoby kreskę pod aktywną" — i było ono policzone
     na TRZY zakładki, a jest ich cztery.

     Zmierzone przy 390 px: rząd ma 342 px widoku na 699 px treści, a czwarta
     zakładka („Wysyłka i zwroty") zaczyna się na 553 px, czyli 211 px za
     krawędzią ekranu. Pasek przewijania jest ukryty (`scrollbar-width: none`),
     gradientu zanikania nie ma — więc nic nie zapowiada, że rząd da się
     przesunąć. Ciężar jest handlowy, nie estetyczny: w tej jednej zakładce
     stoją koszty dostawy, próg darmowej dostawy i termin zwrotu, czyli
     informacje, które sprzedawca ma podać PRZED zamówieniem.

     ⚠︎ Skrócenie nazw tego nie ratuje i to zostało policzone: cztery nazwy
     ścięte do minimum („Opis · Dane · Producent · Wysyłka") dają ~430 px,
     nadal o sto kilkadziesiąt za dużo.

     KRESKA PRZENOSI SIĘ NA PANEL, nie znika. Przy zawijaniu `border-bottom`
     kontenera leży pod DRUGIM wierszem, więc podkreślenie aktywnej zakładki
     z wiersza pierwszego wisiałoby w środku bloku. Kreska idzie więc na
     `border-top` panelu tuż niżej — to ta sama linia w tym samym miejscu na
     ekranie, tylko narysowana przez sąsiada. Razem z nią odchodzi
     `margin-bottom: -1px` anchora, bo nie ma już czego nakładać.

     ⚠︎ Odchodzimy tu od canvasu świadomie: canvas karty produktu rysuje rząd
     TRZECH zakładek i nie ma stanu z czterema na telefonie.

     ⚠︎ PRÓG 820 px, nie 640 (15.10.2026): cztery zakładki w rzędzie mają
     ~730 px, więc między 641 a ~815 px rząd wystawał za ekran i cała karta
     przewijała się w bok (768 px: o 7 px). Próg trzymają trzy reguły naraz —
     to tu, `a` niżej i `border-top` na `.wc-tab`. */
  @media (max-width: 820px) {
    gap: var(--space-lg);
    flex-wrap: wrap;
    row-gap: 0;
    border-bottom: 0;
  }

  & li {
    margin: 0;
    white-space: nowrap;
  }

  & a {
    display: block;
    padding: 12px 2px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;

    @media (max-width: 820px) {
      margin-bottom: 0;
    }
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--produkt-cichy);
  }

  & li.active a,
  & li[aria-selected="true"] a {
    border-bottom-color: var(--color-desert-rust);
    color: var(--color-smoked-tent);
  }
}

.szewko-produkt-strona .wc-tab {
  max-width: 800px;
  padding: var(--space-xl) 0 0;

  /* Kreska pod rzędem zakładek — przy zawijaniu rysuje ją panel, nie lista.
     Rozwód przy `flex-wrap` wyżej. */
  @media (max-width: 820px) {
    border-top: 1px solid var(--produkt-obrys);
  }

  /* `min-height` z canvasu (l. 468): bez niego przełączenie na krótszą
     zakładkę podrywa całą stopkę do góry. */
  min-height: 260px;

  & > h2 {
    /* Woo dokłada nagłówek „Description" wewnątrz panelu, a nazwa zakładki
       stoi już w pasie wyżej. Zostaje dla czytnika, znika z oczu. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  & p {
    margin: 0 0 18px;
    max-width: 62ch;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-dark-mahogany);
    text-wrap: pretty;
  }
}

/* Śródtytuły i listy w treści opisu („Parametry", „Wartość odżywcza w 100 g").
   Akapity mają swój rytm z reguły wyżej; te dwa znaczniki go nie miały, więc
   lista stykała się ze śródtytułem pod nią i z akapitem za nią, a wiersze
   listy szły szerzej niż tekst. Tylko dzieci BEZPOŚREDNIE treści opisu — blok
   „Melanż" i zakładka producenta mają własne nagłówki i własne odstępy.
   Drugi rodzic to opis owinięty układem z `melanz.css`. */
.szewko-produkt-strona :is(.woocommerce-Tabs-panel--description, .szewko-melanz-uklad__opis) {
  & > :is(h3, h4) {
    margin: 28px 0 var(--space-sm);
  }

  & > :is(ul, ol) {
    margin: 0 0 18px;
    padding-left: 22px;
    max-width: 62ch;
  }
}

/* Wyjątek od prawa odstąpienia — zdanie dokładane do akapitu o zwrocie tylko
   na Towarach objętych wyjątkiem (dziś: kategoria `prowiant`, dwie czekolady).
   ⚠︎ Siedzi W ŚRODKU akapitu, nie pod nim: `zwroty § 5 ust. 2` wymaga, żeby
   uprzedzenie stało przy obietnicy zwrotu, a nie osobnym blokiem obok niej —
   inaczej karta dalej czyta się jako „zwrot bez wyjątku, a niżej drobny druk".
   Stąd `inline`, półgruby, w Terracocie: wyróżnia zdanie bez wyjmowania go
   z toku akapitu. */
.szewko-produkt__wyjatek {
  font-weight: 600;
  color: var(--color-terracotta);
}

/* To samo zdanie na dole opisu Towaru — dokłada je filtr `the_content`
   (`szewko_odstapienie_wyjatek_w_opisie()`), bo `zwroty § 5 ust. 2` wymaga go
   ODDZIELNIE w opisie i w podsumowaniu zamówienia. Odstęp z góry, żeby nie
   sklejało się z ostatnim akapitem opisu; reszta rysunku z reguły akapitu
   panelu wyżej.

   ⚠︎ Selektor jest długi CELOWO. `.szewko-produkt-strona .wc-tab p` wyżej ma
   specyficzność 0,2,1 i ustawia `color: var(--color-dark-mahogany)`; sama
   klasa (0,1,0) przegrałaby z nim i zdanie renderowałoby się w kolorze
   zwykłego akapitu, czyli bez wyróżnienia. */
.szewko-produkt-strona .wc-tab p.szewko-produkt__wyjatek-opis {
  margin-top: 24px;
  color: var(--color-terracotta);
}

/* Glosa kursywą — na Parchment w Camel Brown, nie w Sand Gold (r1 pkt 14). */
.szewko-produkt__glosa {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--color-camel-brown);
}

.szewko-produkt-strona .woocommerce-product-attributes {
  width: 100%;
  max-width: 800px;
  border-collapse: collapse;

  & th {
    width: 220px;
    padding: 14px var(--space-lg) 14px 0;
    border-bottom: 1px solid var(--produkt-kreska);
    vertical-align: top;
    text-align: left;
    font-family: var(--font-ui);
    font-weight: 600;
    /* `mikro` — było 11 px (ekw. 11,2); ta sama rola, co `dt` rubryki wyżej. */
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-camel-brown);
  }

  & td {
    padding: 14px 0;
    border-bottom: 1px solid var(--produkt-kreska);
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--color-dark-mahogany);

    & p {
      margin: 0;
    }
  }

  @media (max-width: 640px) {
    & tr {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 10px 0;
      border-bottom: 1px solid var(--produkt-kreska);
    }

    & th,
    & td {
      width: auto;
      padding: 0;
      border: none;
    }
  }
}

/* Odstęp między zakładkami a falą wprowadzającą w recenzje — canvas trzyma
   separator w `<div style="margin-top:56px">` (l. 499). Fala stoi tu
   w przepływie, więc odstęp jest jej marginesem, a nie wyściółką sekcji. */
.szewko-produkt__fala {
  margin-top: 56px;

  @media (max-width: 640px) {
    margin-top: var(--space-xl);
  }
}

/* ─── CROSS-SELL ────────────────────────────────────────────────────────── */

.szewko-produkt__crosssell {
  position: relative;

  /* ⚠︎ **BEZ TEGO PRZEWIJANY PAS KAFLI WYPYCHA CAŁY DOKUMENT.** Poniżej
     1100 px rząd przechodzi w pas ze `scroll-snap` i ma własne
     `overflow-x: auto` — a mimo to na 390 px `documentElement.scrollWidth`
     wychodził **817 px przy oknie 390** i strona realnie przewijała się
     w bok o 300 px (sprawdzone `window.scrollTo`, nie samym pomiarem).
     Przycięcie na sekcji zamyka sprawę u źródła: pas przewija się dalej
     wewnątrz, ale nie ma jak rozepchnąć rodzica. Ta sama reguła stoi
     w `cross-sells.css` koszyka i z tego samego powodu. */
  overflow: hidden;
  padding: 80px 0 88px;
  background: var(--color-camel-brown);

  /* Ziarno 0,06 — decyzja właściciela z 10.08 po ocenie trzech dróg (płaski
     kolor / ziarno / fotografia płótna jak w koszyku). Wybrana środkowa:
     płaszczyzna przestaje być martwa, a **waga wizualna sekcji się nie
     zmienia** — a to jest tu istotne, bo cross-sell stoi na końcu karty,
     po opiniach, i ma zostać trzeci w kolejce ważności po panelu zakupu
     i recenzjach. Fotografia z przyciemnieniem 60 % podniosłaby go do rangi
     sekcji nośnej i dołożyła czwartą fakturę na jednym przewinięciu.

     Ta sama receptura, co w sekcji kategorii strony głównej i w stopce:
     szum `fractalNoise` 400 × 400 przy kryciu 0,06. ⚠︎ Wartość musi być
     ta sama, co `grain` fali wprowadzającej w tę sekcję — inaczej na styku
     zostaje pas o innym tonie (reguła 2 z `CLAUDE.md`). */
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='z'%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(%23z)'/%3E%3C/svg%3E");
    background-size: 400px 400px;
    opacity: 0.06;
    pointer-events: none;
  }

  /* Treść nad ziarnem — bez tego szum leżałby na kaflach, nie pod nimi. */
  & > .szewko-produkt__kolumna {
    position: relative;
    z-index: 1;
  }

  @media (max-width: 640px) {
    padding: 44px 0 56px;
  }
}

.szewko-produkt__naglowek {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-parchment);

  @media (max-width: 640px) {
    font-size: 20px;
  }
}

.szewko-produkt__podtytul {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 15px;

  /* ⚠︎ ODEJŚCIE OD CANVASU. Plik rysuje ten podpis w Sand Gold — na Camel
     Brown to 3,55:1, poniżej progu 4,5:1. `tokens.css` rozstrzyga wprost:
     „na Camel Brown nadtytuły idą w Parchment". Reguła przekrojowa (§2d)
     bije pojedynczy kadr. W sekcji recenzji, na Dark Mahogany, Sand Gold
     zostaje — tam trzyma 5,99:1. */
  color: var(--color-parchment);
}

/* ⚠︎ Od 10.08 rząd niesie **kafle dokładki** (`karta-crosssell.php`), nie karty
   siatki — decyzja właściciela, rozpisana w nagłówku `up-sells.php`. Kafel ma
   własną szerokość 250 px, więc kolumna nie narzuca mu wymiaru: `auto-fit`
   układa tyle, ile wejdzie, a `justify-content: start` trzyma je przy lewej
   krawędzi, gdy jest ich mniej niż cztery. */
.szewko-produkt__karty .products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  align-items: stretch;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;

  /* Poniżej 1100 px cztery kafle po 250 px nie mieszczą się w kontenerze.
     Rząd przechodzi w przewijany pas ze `scroll-snap` — kontrakt gestu
     z §3: „skrawek następnej karty przy prawej krawędzi zostaje". */
  @media (max-width: 1100px) {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: var(--space-sm);
    scrollbar-width: none;

    & > * {
      flex: 0 0 240px;
      scroll-snap-align: start;
    }
  }
}

/* ─── PRZYKLEJONY PASEK ZAKUPU ──────────────────────────────────────────── */

/* Wysokość paska ma jedno źródło i mieszka na `<body>`, a nie na samym pasku:
   czyta ją także rozpórka stopki na dole tego arkusza, a `.szewko-stopka`
   nie jest potomkiem paska, więc z jego reguły nic by nie odziedziczyła.
   Dwie liczby w dwóch miejscach rozjechałyby się przy pierwszej zmianie
   wysokości — a wtedy pasek znów zaczyna zjadać wiersz stopki. */
.single-product {
  --szewko-pasek-h: 68px;
}

.szewko-produkt__pasek {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 340;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: var(--szewko-pasek-h);
  padding: 0 var(--space-xl);
  background: var(--color-smoked-tent);
  border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 30%, transparent);

  &[hidden] {
    display: none;
  }
}

.szewko-produkt__pasek-kadr {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--produkt-obrys);
  border-radius: var(--radius-sm);
}

.szewko-produkt__pasek-nazwa {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-product);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-parchment);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.szewko-produkt__pasek-cena {
  flex: 0 0 auto;
  /* T2 — jak obie ceny w panelu wyżej. */
  font-family: var(--font-cena);
  font-weight: 600;
  font-size: 20px;

  /* Cena na ciemnym idzie w Brass Lantern, nie w Desert Rust: czerwień
     na Smoked Tencie daje ~1,8:1 i nie niesie komunikatu (reguła z `tokens.css`). */
  color: var(--color-brass-lantern);
}

.szewko-produkt__pasek-cta {
  flex: 0 0 auto;
  width: auto;
  min-height: 44px;
  margin-top: 0;
  padding: 0 var(--space-xl);
  font-size: 13px;
  text-decoration: none;
}

/* Pasek zasłania koniec strony (r1 pkt 29) — wolne pole równe jego wysokości
   plus 16 px. Na desktopie pasek też jest `fixed`, więc rozpórka obowiązuje
   wszędzie, nie tylko na telefonie.

   ⚠︎ **ROZPÓRKA NALEŻY DO OSTATNIEJ SEKCJI, NIE DO `<main>`.** Na `<main>`
   była wyściółką pod wszystkim, co się w nim renderuje — a ostatnia sekcja
   karty ma własne, ciemne tło. Między nią a stopką stawał więc pas Pergaminu
   wysoki na 84 px, czytający się jak niedokończony styk. Przeniesiona na
   sekcję, rozpórka ma jej kolor i znika z oczu.

   Obie sekcje są opisane wariantem `:last-child`, bo ostatnia bywa raz jedna,
   raz druga: cross-sell renderuje się tylko przy ustawionych up-sellach. */
.szewko-produkt__recenzje:last-child,
.szewko-produkt__crosssell:last-child {
  padding-bottom: 172px;

  @media (max-width: 640px) {
    padding-bottom: 140px;
  }
}

/* Karta z zamkniętymi komentarzami i bez up-sellów kończy się zakładkami,
   czyli Pergaminem — tam rozpórka może zostać zwykłym marginesem, bo tło
   pod nią jest tego samego koloru co sekcja nad nią. */
.szewko-produkt-strona > .product > .woocommerce-tabs:last-child {
  margin-bottom: 84px;
}

/* ⚠︎ ROZPÓRKI WYŻEJ NIE WYSTARCZAJĄ — I DOPIERO POMIAR POKAZUJE, GDZIE.
   Domknięcie pozycji `PO-PORCIE.md` §B („Przyklejony pasek zakupowy karty
   produktu zasłania koniec treści na 390 px").

   Wpis rozpoznawał to jako brak kompensacji na `.szewko-produkt` — a ta jest
   i działa. Zmierzone 19.08.2026 Playwrightem, przewinięcie na sam dół:

     390 px  wiersz „© 2026 Szewko…"  776–796 px   pasek od 776 px  → cały zakryty
     1440 px wiersz „© 2026 Szewko…"  826–845 px   pasek od 832 px  → 13 px zakryte

   Czyli pasek nie zasłania karty, tylko **ostatni wiersz stopki**: sekcje
   karty mają rozpórkę, a stopka — dokument globalny — nie ma i mieć nie może,
   bo pasek stoi wyłącznie na tej jednej podstronie.

   Rozpórka idzie na `.szewko-stopka`, nie na `<main>` ani na `body`, i to jest
   ta sama nauka co przy rozpórce wyżej: wyściółka poza sekcją zostawia pas
   Pergaminu. Tutaj rozpórka jest w środku stopki, więc bierze jej Smoked Tent,
   a nakładki `__roza` i `__ziarno` mają `inset: 0` i rosną razem z nią.

   ⚠︎ Reguła należy do arkusza karty produktu, choć celuje w stopkę: istnieje
   WYŁĄCZNIE z powodu paska tej podstrony i ma zniknąć razem z nim. W
   `footer.css` byłaby regułą bez powodu widocznego na miejscu.

   Pasek jest `fixed` na KAŻDEJ szerokości, więc rozpórka też — nie ma jej
   pod media query. */
.single-product .szewko-stopka {
  /* 68 px = wysokość paska; `--szewko-pasek-h` stoi przy jego regule wyżej. */
  padding-bottom: var(--szewko-pasek-h);
}

@media (max-width: 640px) {
  .szewko-produkt__pasek {
    display: grid;
    grid-template-columns: 44px auto 1fr;
    gap: 12px;
    padding: 0 var(--space-lg);
  }

  /* Nazwa wypada na 390 px — pasek ma zmieścić miniaturę, cenę i przycisk
     w 390 px minus 2 × 24 px wyściółki (r1 pkt 28). Przycisk „nie ma stałej
     szerokości" i skraca napis, zamiast dać się uciąć krawędzią. */
  .szewko-produkt__pasek-nazwa {
    display: none;
  }

  .szewko-produkt__pasek-cena {
    font-size: 16px;
    white-space: nowrap;
  }

  .szewko-produkt__pasek-cta {
    width: 100%;
    min-width: 0;
    padding: 0 var(--space-sm);
    font-size: 12.5px;
  }
}