/* pki.eu v3 — kafel „stały rdzeń, zmienny ogon” (_ProductBox; makieta KafleOgon zatwierdzona przez Szymona 3.11; zastępuje układ
   po researchu z 080f4094). Osobny plik po pkieu-v3.css: nadpisuje „runda 47 — karta D5” (kontrolka nad tytułem) i margin-top:auto
   ceny. RDZEŃ o stałych wysokościach: okładka 2:3 → tytuł 2 linie → autor 1 linia → wiersz ceny 22 px → przycisk 40 px — karty w rzędzie
   mają identyczny rdzeń, przyciski na jednej linii; żadnych rezerw na rzeczy opcjonalne (bez linii dostępności, bez 2 linii noty).
   OGON (.tail) renderowany tylko z treścią, pod przyciskiem — kafel z ogonem jest dłuższy na dole, nie ma dziur w środku.
   Dotyczy każdego użycia _ProductBox (lista, wyniki, szyny PDP, główna). Styl marki bez zmian: wstążki (pkieu-v3.css „5) BADGE”),
   Montserrat wersalikami w przycisku i cenie, czerwień tylko przy akcji / promocji, ikony ze sprite'a. Wysoki kontrast i wąskie
   karty (< 172 / 152 px) przez container queries (.card = kontener). */
.card{gap:6px;}
.card .cv{margin-bottom:2px;}
/* tytuł: Roboto 700, 15 px, DWIE linie zarezerwowane i ucięte (line-clamp z pkieu-v3.css) */
.card h3{font-family:var(--sans);font-weight:700;font-size:15px;line-height:1.35;height:2.7em;margin-top:2px;}
/* autor: jedna linia zarezerwowana (pusta bez autora — &nbsp; w widoku) */
.card .aut{margin-top:-2px;height:17px;line-height:17px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* wiersz ceny stałej wysokości: Montserrat 20 px, czerwona tylko przy promocji (.card.promo .price b / b.deal), przekreślona stara obok */
.card .price{margin:0;display:flex;align-items:baseline;flex-wrap:nowrap;gap:8px;height:22px;min-width:0;}
.card .price b{font-family:var(--head);font-weight:700;font-size:20px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.card .price s{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* przycisk: pełna szerokość, 40 px (cel dotyku); DOMYŚLNIE pełny czerwony jak wszędzie w sklepie (Szymon 3.11: te same tokeny co
   DO KOSZYKA na karcie / DALEJ w kasie — .btn-primary z pkieu-v3.css: --red-fill, --on-fill, hover --red-fill-deep); tu tylko
   geometria i ramka 1 px w kolorze tła, żeby pudełko było identyczne z obrysowym „Powiadom” i stanem „W koszyku” */
.card .pbuy{display:block;position:relative;z-index:1;margin-top:2px;}
.card .pbuy .btn,.card .pbuy .na{height:40px;width:100%;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0 8px;
  font-family:var(--head);font-weight:700;font-size:11.5px;line-height:12px;letter-spacing:var(--ls-ui);text-transform:uppercase;white-space:normal;text-align:center;border-radius:var(--r);}
/* napis MUSI zmieścić się w przycisku (zrzut 3.11: „ZAMÓW W PRZEDSPRZEDAŻY” wychodził poza kafel 190 px w szynie): zawijanie
   w 2 linie w stałej wysokości 40 px na każdej szerokości — pełna etykieta zostaje, krótszych wariantów nie wprowadzamy */
.card .pbuy .btn-primary{border:1px solid var(--red-fill);}
.card .pbuy .btn-primary:hover,.card .pbuy .btn-primary:focus-visible{border-color:var(--red-fill-deep);}
.card .pbuy .btn .ico{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2;}
/* 6.11 (zrzut Szymona, lista kategorii z kolumną boczną, kafel 120 px): „PRZEDSPRZEDAŻY” to jedno słowo szersze niż przycisk — przy
   justify-content:center nadmiar wychodził w OBIE strony (ikona za lewą krawędzią). „safe center” przy przepełnieniu wyrównuje do
   lewej zamiast wypychać ikonę; .btn-t może się kurczyć; krótka etykieta .btn-ts (tylko przedsprzedaż) pokazywana poniżej 152 px */
.card .pbuy .btn,.card .pbuy .na{justify-content:safe center;}
.card .pbuy .btn-t{min-width:0;}
.card .pbuy .btn-ts{display:none;}
/* kafel 152–259 px: „Zamów w przedsprzedaży” łamie się na 2 linie, a zawinięty napis zajmuje całą szerokość — ikona stała daleko od
   tekstu; pudełko napisu = najdłuższa linia (min-content), ikona przy tekście. Tylko przycisk przedsprzedaży (ma .btn-ts). */
@container (min-width:152px) and (max-width:259.98px){
  .card .pbuy .btn:has(.btn-ts) .btn-t{width:min-content;}
}
/* stan „W koszyku · N” (tylko z JS, pkieu-v3.js markInCart): szare tło, ptaszek; klik dalej dodaje kolejną sztukę */
.card .pbuy .btn.in-cart{background:var(--wash);border-color:var(--line2);color:var(--ink);}
.card .pbuy .btn.in-cart:hover,.card .pbuy .btn.in-cart:focus-visible{background:var(--line);border-color:var(--line2);color:var(--ink);}
/* niedostępny: szary obrys „Powiadom o dostępności” z dzwonkiem = link do sekcji #powiadom karty produktu */
.card .pbuy .na{border:1px solid var(--line2);color:var(--muted);background:transparent;text-decoration:none;font-size:11px;}
.card .pbuy .na:hover,.card .pbuy .na:focus-visible{color:var(--ink);border-color:var(--ink);}
.card .pbuy .na .ico{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2;}
:root[data-contrast="more"] .card .pbuy .btn-primary,:root[data-contrast="more"] .card .pbuy .na,:root[data-contrast="more"] .card .pbuy .btn.in-cart{border-width:2px;}
/* ogon: tylko z treścią (widok nie renderuje pustego), muted 11 px, cyfry tabelaryczne; pozycje łączone „ · ” zawijają się naturalnie */
.card .tail{margin-top:0;font-size:11px;line-height:1.35;color:var(--muted);font-variant-numeric:tabular-nums;position:relative;z-index:1;}
/* wąskie karty (< 172 px): mniejszy stopień; < 152 px (telefony 320 px): napis przycisku łamie się na 2 linie w tej samej wysokości */
@container (max-width:171.98px){
  .card .pbuy .btn,.card .pbuy .na{font-size:10.5px;padding:0 6px;gap:6px;}
  .card .price b{font-size:18px;}
}
@container (max-width:151.98px){
  .card .pbuy .btn,.card .pbuy .na{padding:4px 6px;}
  .card .price b{font-size:16px;}
  /* przedsprzedaż na wąskim kaflu: „Przedsprzedaż” w jednej linii, bez ikony (pełna nazwa w aria-label) */
  .card .pbuy .btn:has(.btn-ts) .btn-t,.card .pbuy .btn:has(.btn-ts) .ico{display:none;}
  .card .pbuy .btn-ts{display:inline;white-space:nowrap;}
}