/*  Oznaczenia produktów — warianty kolorystyczne i plakietki.
 *
 *  ⛔ ARKUSZ WSPÓLNY, ŁADOWANY PRZEZ TRZY MIEJSCA: stronę produktu, listę części i podgląd
 *     w panelu. Te same klasy muszą wyglądać tak samo wszędzie — kopia w drugim arkuszu
 *     rozjechałaby się przy pierwszej korekcie barwy, a objawem byłaby plakietka wyglądająca
 *     inaczej na liście niż na produkcie, czyli usterka, której nikt nie kojarzy ze stylem.
 */

/* ══════════ OZNACZENIA: warianty kolorystyczne ══════════
   ⛔ NAZWY PO ZNACZENIU, NIE PO KOLORZE. „czerwony" zestarzeje się przy pierwszej zmianie
      palety, „uwaga" nie — a nazwa trafia do panelu, gdzie wybiera ją redakcja.
   ⛔ TRZY BARWY NA WARIANT, BO PLAKIETKA MA INNY PRÓG NIŻ BLOK. `--ob` to obwódka bloku
      (duża powierzchnia, pastel wystarcza), `--obm` obwódka PLAKIETKI — obrys małego
      elementu musi trzymać 3:1, a pastelowa ramka daje na białym ok. 1,7:1 i plakietka
      po prostu znika. Ten sam problem rozwiązano wcześniej przy plakietce reprodukcji
      (#c9a86b → #9a7b3f). `--tyt` to tekst nagłówka i plakietki, dobrany na 7:1.
   ⚠️ Wariant przychodzi z bazy, ale kontroler przycina go BIAŁĄ LISTĄ — do `class` nie
      trafia nic niesprawdzonego. */
.pp-w-ostrzezenie { --ob:#fcd34d; --tlo:#fffbeb; --tyt:#92400e; --obm:#b45309; }
.pp-w-uwaga       { --ob:#fca5a5; --tlo:#fef2f2; --tyt:#991b1b; --obm:#b91c1c; }
.pp-w-informacja  { --ob:#7dc3de; --tlo:#e8f3f8; --tyt:#0e6688; --obm:#0e6688; }
.pp-w-neutralne   { --ob:#d1d5db; --tlo:#f9fafb; --tyt:#374151; --obm:#6b7280; }
.pp-w-pozytywne   { --ob:#86efac; --tlo:#f0fdf4; --tyt:#166534; --obm:#15803d; }
/* ⚠️ Dołożone 18.08.2026 na prośbę użytkownika. Te same trzy role barw i te same progi:
   tekst nagłówka ≥ 7:1 na swoim tle, obwódka plakietki ≥ 3:1 na bieli.
   Nazwy po ZNACZENIU tam, gdzie znaczenie jest; „czarny" to wyjątek — najmocniejszy
   stopień szarości, który nie udaje, że coś znaczy. */
/* ⚠️ Obwódka plakietki `#0891b2`, nie `#0e7490` (poprawione 18.08.2026 po uwadze
   użytkownika: „w plakietce cyjan za ciemny, nie ten sam co w bloku"). Zmierzone: stary
   odcień dawał 5,36 na bieli — próg trzymał, ale różnica luminancji wobec wariantu
   `informacja` (#0e6688) wynosiła 0,032, czyli oba czytały się jak ten sam ciemny granat.
   Nowy ma 3,68 (próg 3:1 zachowany) i różnicę 0,121 — zostaje turkusem, zamiast zmieniać
   odcień na granatowy. ⛔ Jaśniejszy `#06b6d4` byłby ładniejszy, ale daje 2,43 i obrys
   plakietki znika na białym tle. */
.pp-w-cyjan       { --ob:#67e8f9; --tlo:#ecfeff; --tyt:#155e75; --obm:#0891b2; }
.pp-w-fiolet      { --ob:#d8b4fe; --tlo:#faf5ff; --tyt:#6b21a8; --obm:#7e22ce; }
.pp-w-czarny      { --ob:#9ca3af; --tlo:#f9fafb; --tyt:#111827; --obm:#374151; }

/*  CZYSTY — bez ramki i bez tła. Sam tekst, w barwie treści.
    ⛔ NIE WYSTARCZY USTAWIĆ BARW NA `transparent`: obwódka zostaje jako 1 px pustego
       miejsca i element nadal zajmuje o 2 px więcej niż powinien, a blok trzyma swój
       wewnętrzny odstęp. Dlatego wariant zdejmuje obwódkę SZEROKOŚCIĄ, a nie barwą.
    ⚠️ `--tyt` zostaje ciemny, bo w tym wariancie tekst jest jedyną rzeczą, jaka zostaje —
       musi się czytać na białym tle strony bez pomocy ramki. */
.pp-w-czysty      { --ob:transparent; --tlo:transparent; --tyt:#374151; --obm:transparent; }

/* ⚠️ Plakietki pod ceną. `flex-wrap`, bo produkt może mieć kilka oznaczeń naraz
   (uszkodzony ORAZ niekompletny) i drugie nie ma prawa rozepchnąć kolumny decyzji. */
.pp-plakietki {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
/*  Wariant czysty zdejmuje obwódkę i wewnętrzny odstęp — inaczej zostałaby po nich
    pusta przestrzeń, a element wyglądałby na przesunięty wobec sąsiadów. */
.pp-plakietka.pp-w-czysty { border-width: 0; background: none; padding-left: 0; padding-right: 0; }

.pp-plakietka {
  display: inline-flex;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tyt, #92400e);
  background: #fff;
  border: 1px solid var(--obm, #b45309);
  border-radius: 4px;
  padding: 2px 7px;
}