/* Recenzje karty produktu — arkusz partu `produkt-recenzje.php` (fala 1).
 *
 * ŹRÓDŁA: `canvas:Karta Produktu Finalna` — sekcja l. 504–541, stan pusty
 * (klatka `1d`) l. 845–852, nakładka formularza (klatki `2a`–`2e`) l. 30–263.
 *
 * KONTRAST NA CIEMNYM. Sekcja stoi na Dark Mahogany, gdzie Sand Gold trzyma
 * 5,99:1 przy pełnym kryciu — i tu, w odróżnieniu od pasa cross-sellu,
 * zostaje zgodnie z canvasem. `tokens.css` podaje jednak podłogę krycia:
 * **min. 85 % na Dark Mahogany**, więc żadne krycie poniżej nie niesie tekstu.
 */

.szewko-produkt__recenzje {
  padding: 80px 0 88px;
  background: var(--color-dark-mahogany);

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

/* Stan pusty: CAŁY blok wyśrodkowany razem z nagłówkiem (poprawka r1 pkt 17).
   Wcześniej nagłówek stał przy lewej krawędzi, a ilustracja i przycisk były
   wyśrodkowane — „dwie osie w jednej sekcji". */
.szewko-produkt__recenzje--pusto {
  text-align: center;
}

/* ─── SIATKA: PODSUMOWANIE + LISTA ──────────────────────────────────────── */

.szewko-recenzje__siatka {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 72px;
  align-items: start;
  margin-top: var(--space-xl);

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

.szewko-recenzje__srednia {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  color: var(--color-parchment);

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

/* Gwiazdki: rząd tła plus nakładka przycięta do procentu oceny. Jedyny
   sposób na ułamek gwiazdki bez grafiki — i ten sam, którego używa canvas
   (l. 511). ⚠︎ Pięć pełnych gwiazdek przy ocenie 4,6 to była usterka
   poprawiona w r1 pkt 3; procent liczy PHP z prawdziwej średniej. */
.szewko-recenzje__gwiazdki {
  position: relative;
  display: inline-block;
  margin: var(--space-sm) 0 4px;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1;
  color: color-mix(in srgb, var(--color-parchment) 25%, transparent);
}

.szewko-recenzje__gwiazdki-pelne {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--recenzje-ocena, 0%);
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-brass-lantern);
}

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

.szewko-recenzje__rozklad {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.szewko-recenzje__rzad {
  display: flex;
  align-items: center;
  gap: 10px;
}

.szewko-recenzje__rzad-etykieta {
  width: 26px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-parchment) 70%, transparent);
}

.szewko-recenzje__tor {
  flex: 1;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-parchment) 12%, transparent);
}

/* Przy zerze pasek ma zerową długość, a TOR ZOSTAJE (r1 pkt 4) — inaczej
   wiersz znika i rozkład przestaje się czytać jako skala. */
.szewko-recenzje__pasek {
  display: block;
  height: 100%;
  width: var(--recenzje-udzial, 0%);
  background: var(--color-brass-lantern);
}

.szewko-recenzje__rzad-liczba {
  width: 20px;
  text-align: right;
  font-family: var(--font-ui);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-parchment) 60%, transparent);
}

/* ─── LISTA WPISÓW ──────────────────────────────────────────────────────── */

.szewko-recenzje__lista .commentlist {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.szewko-recenzja {
  padding: 22px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-sand-gold) 22%, transparent);
}

/* ⚠︎ **OCENA WPISU TEŻ WYMAGA WŁASNEGO RYSUNKU — z tego samego powodu,
 * co gwiazdki w formularzu.** Woo renderuje ją jako
 *
 *     <div class="star-rating" role="img" aria-label="Oceniono 5 na 5">
 *       <span style="width:100%">Oceniono <strong>5</strong> na 5</span>
 *     </div>
 *
 * i zamienia oba napisy na znaki własnym arkuszem, którego motyw nie ładuje.
 * Bez tej reguły przy każdym wpisie stało zdanie „Oceniono 5 na 5" w miejscu,
 * w którym canvas ma rząd gwiazdek (l. 525). Zmierzone 10.08.
 *
 * Sposób jest ten sam, co w bloku średniej i na canvasie: pełny rząd
 * w kolorze tła plus nakładka przycięta do procentu, który Woo wpisuje
 * `<span>`-owi w `width`. Ułamek gwiazdki wychodzi z tego za darmo.
 *
 * Napis zostaje w dokumencie — jest treścią, którą czyta czytnik ekranu —
 * i schodzi z oczu przez wypchnięcie poza obszar widoczny (`padding-top`
 * wysokości wiersza przy `overflow: hidden`), nie przez `display: none`. */
.szewko-produkt__recenzje .star-rating {
  position: relative;
  overflow: hidden;
  display: block;
  width: 5.6em;
  height: 1em;
  margin: 0 0 var(--space-sm);
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 1;
  color: color-mix(in srgb, var(--color-parchment) 25%, transparent);

  &::before {
    content: "★★★★★";
    position: absolute;
    top: 0;
    left: 0;
  }

  & > span {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    padding-top: 1.5em;
    color: var(--color-brass-lantern);

    &::before {
      content: "★★★★★";
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}

.szewko-recenzja__tytul {
  margin: 0 0 6px;
  font-family: var(--font-product);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-parchment);
}

.szewko-recenzja__tresc {
  & p {
    margin: 0 0 10px;
    max-width: 68ch;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--color-parchment);
    text-wrap: pretty;
  }

  /* Podpis i data — pod treścią, nie nad nią (canvas l. 528). */
  & .woocommerce-review__author,
  & .woocommerce-review__dash,
  & .woocommerce-review__published-date {
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: color-mix(in srgb, var(--color-parchment) 65%, transparent);
  }

  & .meta {
    margin: 0;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: color-mix(in srgb, var(--color-parchment) 65%, transparent);
  }
}

.szewko-recenzje__akcje {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 26px;
}

/* Przycisk obrysowy na ciemnym. Sand Gold przy pełnym kryciu — podłoga
   z `tokens.css` mówi min. 85 % na Dark Mahogany. */
.szewko-recenzje__przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 28px;
  border: 1px solid var(--color-sand-gold);
  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-sand-gold);
  text-decoration: none;

  &[hidden] {
    display: none;
  }

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

/* ─── STAN PUSTY ────────────────────────────────────────────────────────── */

.szewko-recenzje__pusto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: var(--space-sm) 0 var(--space-lg);
}

/* Sylwetka karawany w slocie stanu pustego. Canvas rysuje tu pole 240 × 170;
   asset jest pasem poziomym 1920 × 700 z pustą górą, więc szerokość rośnie
   do 360 px, a `height: auto` trzyma proporcję zamiast go przycinać. */
.szewko-recenzje__slot {
  display: block;
  width: 360px;
  max-width: 100%;
  height: auto;

  @media (max-width: 640px) {
    width: 260px;
  }
}

.szewko-recenzje__cisza {
  max-width: 48ch;
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 18px;
  color: var(--color-sand-gold);
}

/* ─── GOŚĆ BEZ ZAKUPU (klatka `2d`) ─────────────────────────────────────── */

.szewko-recenzje__zamkniete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 380px;
  margin: var(--space-xl) auto 0;
  padding: 30px 34px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
  text-align: center;

  & > span {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: 17px;
    color: var(--color-sand-gold);
  }
}

/* ─── NAKŁADKA FORMULARZA (klatki `2a`–`2e`) ────────────────────────────── */

.szewko-recenzje__nakladka {
  position: fixed;
  inset: 0;
  z-index: 520;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: left;

  &[hidden] {
    display: none;
  }

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

.szewko-recenzje__tlo {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  background: color-mix(in srgb, var(--color-smoked-tent) 92%, transparent);
}

/* ⚠︎ **PANEL PRZEWIJA SIĘ ŚRODKIEM, NIE CAŁOŚCIĄ** (canvas l. 36–75).
 *
 * Trzy pasy: głowa z nagłówkiem i towarem (`padding: 32px 36px 0`),
 * pola (`flex: 1; overflow-y: auto`) i stopka z kreską. Przewijanie całego
 * panelu — tak było — zabiera przy długim formularzu przycisk „WYŚLIJ WPIS”
 * pod krawędź ekranu, a na 390 px kadr canvasu `2e` mówi wprost, że CTA jest
 * **przyklejone do dołu**. Wyściółka schodzi więc z panelu na pasy. */
.szewko-recenzje__panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2 * var(--space-xl));
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-parchment);

  /* Na 390 px nakładka wchodzi na PEŁNY EKRAN (r1 pkt 23), a nie zostaje
     panelem z marginesem. */
  @media (max-width: 640px) {
    max-width: none;
    max-height: none;
    height: 100%;
    border-radius: 0;
  }
}

/* ⚠︎ **MIĘDZY PANELEM A FORMULARZEM STOJĄ DWA CUDZE OPAKOWANIA.**
 * `comment_form()` drukuje `<div id="respond" class="comment-respond">`,
 * a szablon Woo owija to jeszcze w `<div id="review_form">`. Kolumna flex
 * ustawiona na panelu widzi więc jako swoje dziecko `#review_form`, a nie
 * głowę i formularz — `flex: 1` na formularzu nie miało czego rozciągać.
 *
 * Zmierzone na 390 px przed poprawką: panel 844 px (pełny ekran), formularz
 * 779 px zaczynający się na 140 px, czyli **stopka z „WYŚLIJ WPIS” kończąca
 * się 75 px POD dolną krawędzią ekranu** — dokładnie to, przed czym broni
 * kadr `2e` („CTA przyklejone do dołu”).
 *
 * Oba opakowania muszą więc przekazać wysokość dalej. `min-height: 0`
 * w każdym z nich jest obowiązkowe: bez niego dziecko kolumny flex ma
 * `min-height: auto` i rozpycha rodzica zamiast oddać nadmiar przewijaniu. */
.szewko-recenzje__panel > #review_form,
.szewko-recenzje__panel .comment-respond {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.szewko-recenzje__glowa {
  flex: 0 0 auto;
  padding: 32px 36px 0;

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

/* Środek panelu — jedyne miejsce, które się przewija. `min-height: 0` jest
   obowiązkowe: dziecko kolumny flex ma domyślnie `min-height: auto`, więc
   bez niego pas rozpycha panel zamiast oddać nadmiar przewijaniu. */
.szewko-recenzje__panel .comment-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 36px 10px;

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

/* Stopka wychodzi z przewijanego pasa i siada na dole panelu. `position:
   sticky` zamiast czwartego elementu układu: `comment_form()` drukuje
   przycisk wysyłki WEWNĄTRZ `<form>` i wyjęcie go stamtąd znaczyłoby
   wysyłkę bez pól ukrytych. */
.szewko-recenzje__stopka {
  position: sticky;
  bottom: -10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-lg) -36px -10px;
  padding: var(--space-md) 36px 26px;
  border-top: 1px solid color-mix(in srgb, var(--color-sand-gold) 35%, transparent);
  background: var(--color-parchment);

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

.szewko-recenzje__anuluj {
  flex: 0 0 auto;
  padding: 10px 4px;
  border: none;
  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);

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

.szewko-recenzje__krzyzyk {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-camel-brown);
}

.szewko-recenzje__tytul {
  margin: 0 44px 18px 0;
  /* T8 (12.08.2026) — Cinzel → Literata. Krój ozdobny poniżej 26 px zamienia
     wypustki liter w szum; pełny powód przy `.szewko-home-kafel__nazwa`
     w `home-kafel-kategorii.css`. */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-smoked-tent);

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

.szewko-recenzje__towar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: var(--space-sm) 12px;
  border: 1px solid color-mix(in srgb, var(--color-sand-gold) 45%, transparent);
  border-radius: var(--radius-sm);

  & img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
  }

  & p {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-product);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-dark-mahogany);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.szewko-recenzje__pole {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 20px 0 0;

  /* ⚠︎ **`space-between` ROZRZUCAŁO TRZY RZECZY, NIE DWIE.** Etykieta ma
     nazwę pola, przy niej dopisek („· nieobowiązkowy”) albo gwiazdkę pola
     wymaganego, a przy prawej krawędzi licznik znaków. Rozstawienie
     równomierne wypychało dopisek na środek wiersza, przez co „TREŚĆ” i „*”
     stały po dwóch stronach pustki. Nazwa i dopisek trzymają się więc lewej,
     a odstęp bierze na siebie sam licznik. */
  & label {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: var(--space-sm);
    font-family: var(--font-ui);
    font-weight: 600;
    /* `mikro` (ekw. 12) — było 10 px, czyli 10,2 (`docs/TYPOGRAFIA.md` §4).
       Etykieta pola formularza jest DANĄ wprost z T5. */
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dark-mahogany);

    & .szewko-recenzje__licznik-pola {
      margin-left: auto;
    }
  }

  & input,
  & textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-camel-brown);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-smoked-tent);

    /* Skupienie: sam złoty obrys przy krawędzi pola. Do 03.10.2026 szedł tu
       wzór tonu jasnego (`.szewko-pole--jasny`, 2E) z pierścieniem Dark
       Mahogany 30 % — właściciel zdjął pierścień tego samego dnia.
       Do 03.10.2026 pole dostawało globalny pierścień z `base.css` — złoty
       obrys 2 px odsunięty o 2 px PLUS obwódkę 5 px Smoked Tent — czyli na
       Pergaminie nakładki grubą podwójną ciemną ramkę (właściciel,
       `Screenshot_76`). Tamten pierścień jest dla przycisków i linków; pole
       ma w motywie własny wzór i tu go dostaje.
       ⚠︎ `:focus` RAZEM z `:focus-visible`: przy fokusie, który przeglądarka
       uznaje za „niewidoczny" (np. nadany skryptem przy otwarciu nakładki),
       Chrome rysował własny obrys `auto` w kolorze tekstu — ten sam gruby,
       ciemny pierścień. Pole tekstowe pokazuje skupienie zawsze. */
    &:focus,
    &:focus-visible {
      border-color: var(--color-sand-gold);
      outline: 2px solid var(--color-sand-gold);

      /* Sam obrys, bez poświaty i bez odsunięcia (właściciel, 03.10.2026).
         ⚠︎ Obie linie są NADPISANIAMI, nie ozdobą — bez nich wraca reguła
         z `base.css`: odsunięcie 2 px i obwódka 5 px Smoked Tent. */
      outline-offset: 0;
      box-shadow: none;
    }
  }

  & input {
    height: 48px;
    padding-block: 0;
  }

  & textarea {
    min-height: 124px;
    resize: vertical;
  }
}

/* Trzy dopiski etykiety — wszystkie stały poniżej podłogi (ekw. 10,7 · 11,2
   · 11,7) i wszystkie schodzą na `mikro` (12 px w Literacie). Dopisek mówi,
   czy pole jest obowiązkowe, licznik — ile znaków zostało, podpowiedź — czego
   formularz oczekuje. Żadnego z tych trzech nie da się pominąć bez szkody,
   więc wszystkie są DANYMI (T5), a nie ozdobnikami etykiety. */
.szewko-recenzje__dopisek {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--color-camel-brown) 70%, transparent);
}

.szewko-recenzje__licznik-pola {
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: color-mix(in srgb, var(--color-camel-brown) 60%, transparent);
}

.szewko-recenzje__podpowiedz {
  font-family: var(--font-ui);
  font-size: 12px;
  color: color-mix(in srgb, var(--color-camel-brown) 70%, transparent);
}

/* Gwiazdki formularza renderuje `wc-single-product.js` z `<select id="rating">`.
   Cel dotykowy 44 × 44 — canvas rysuje je dokładnie w tym rozmiarze. */
.szewko-recenzje__ocena {
  margin-top: var(--space-sm);

  & label {
    display: block;
    font-family: var(--font-ui);
    font-weight: 600;
    /* `mikro` — było 10 px (ekw. 10,2); ta sama etykieta co w polach wyżej. */
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-dark-mahogany);
  }

  /* ⚠︎ **RYSUNEK GWIAZDKI NALEŻY DO ARKUSZA, BO ARKUSZE WOO SĄ ZDJĘTE.**
   *
   * `wc-single-product.js` stawia pięć odnośników z TREŚCIĄ TEKSTOWĄ —
   * „1 z 5 gwiazdek”, „2 z 5 gwiazdek”… Woo zamienia je na znaki własnym
   * arkuszem (`text-indent` plus ikona z fontu WooCommerce), a motyw ten
   * arkusz odpina (`woocommerce_enqueue_styles` → pusta tablica). Zostawał
   * więc goły tekst rozlewający się z pól 44 px: pięć podpisów jeden na
   * drugim, dokładnie to, co widać na zrzucie z 10.08.
   *
   * Tekst zostaje w dokumencie dla czytnika (jest jedyną etykietą tych
   * odnośników) i schodzi z oczu przez `font-size: 0`; znak rysuje
   * `::before`. `overflow: hidden` domyka sprawę na wypadek, gdyby
   * przeglądarka podniosła minimalny rozmiar pisma. */
  & p.stars {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 2px 0 0;

    & span {
      display: flex;
      align-items: center;
    }

    & a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      overflow: hidden;
      font-size: 0;
      line-height: 1;
      color: color-mix(in srgb, var(--color-camel-brown) 30%, transparent);
      text-decoration: none;

      &::before {
        content: "★";
        font-size: 30px;
        line-height: 1;
      }
    }

    /* Zapala się CIĄG od pierwszej gwiazdki do wskazanej, nie pojedynczy
       znak. ⚠︎ Woo trzyma stan w klasie `.active` na gwiazdce WYBRANEJ,
       a CSS nie ma kombinatora „poprzednie rodzeństwo” — stąd `:has()`,
       jedyny sposób, żeby zapalić także te przed nią. */
    & a.active,
    & a:has(~ a.active) {
      color: var(--color-brass-lantern);
    }

    /* Najazd bije wybór: cały rząd zapala się na złoto, po czym gwiazdki
       ZA kursorem gasną z powrotem. */
    &:hover a {
      color: var(--color-brass-lantern);
    }

    &:hover a:hover ~ a {
      color: color-mix(in srgb, var(--color-camel-brown) 30%, transparent);
    }
  }

  /* Etykieta wybranej oceny obok rzędu — „4 z 5” (canvas l. 52–54).
     Wypełnia ją `produkt.js`; pusta nie zajmuje miejsca. */
  & .szewko-recenzje__wybrana {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--color-camel-brown);

    &:empty {
      display: none;
    }
  }

  /* `<select>` zostaje w dokumencie — to on niesie wartość przy wysyłce.
     Chowamy go dopiero, gdy skrypt Woo postawi gwiazdki; sam
     `display:none` z arkusza zabrałby ocenę przy wyłączonym JS. */
  & p.stars ~ select,
  & p.stars + select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Błąd walidacji oceny (klatka `2b`) — inline pod rzędem gwiazdek,
   w odwróconym polu z `tokens.css`. Nie toast, nie alert. */
.szewko-recenzje__blad {
  align-items: center;
  margin: 4px 0 0;
  font-size: 13px;

  &[hidden] {
    display: none;
  }
}

.szewko-recenzje__wyslij {
  /* Przycisk siedzi w stopce i bierze całą resztę jej szerokości — canvas
     daje mu `flex: 1` obok tekstowego „ANULUJ” (l. 75). */
  flex: 1;
  box-sizing: border-box;
  min-height: 56px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--gradient-sunrise-glow);
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-parchment);
}

.szewko-produkt__recenzje .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--color-camel-brown);
}

/* ─── PO WYSŁANIU (klatka `2c`) ─────────────────────────────────────────── */

.szewko-recenzje__przyjete {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: var(--space-lg) 0;
  text-align: center;

  & p {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--color-dark-mahogany);
  }

  & .szewko-recenzje__przycisk {
    border-color: var(--color-camel-brown);
    color: var(--color-camel-brown);
  }
}

/* Pieczęć w slocie klatki `2c`. Canvas rysuje koło 120 px w kolorze tokenu —
   asset ma ten sam rozmiar i sam jest okrągły, więc `border-radius` znika
   razem z wypełnieniem. */
.szewko-recenzje__pieczec {
  display: block;
  width: 120px;
  height: 120px;
}