/* ==========================================================================
   Wodzilla.pl -- dopisy stylow dla klasy "kategoria produktowa"
   (src/kategorie/kategoria.njk), ladowane zamiast strony.css (ktore importuje
   nizej w calosci) - powod: layout.njk ma tylko jeden slot "extraCss", wiec
   ten plik jest jedynym miejscem, gdzie mozna dopisac reguly bez ruszania
   layout.njk (poza GRANICE tego zadania).

   Zawartosc ponizej naprawia WYLACZNIE wizualny skutek zmiany znacznikow
   <td><strong> -> <th scope="col"> w dwoch tabelach porownawczych opisu
   kategorii "dystrybutory" (audyt SEO, punkt "th/caption dla tabel") -
   przegladarka domyslnie centruje tekst w <th> i przygrubia go, podczas gdy
   oryginalne <td><strong> bylo wyrownane do lewej (przegladarkowy domysl dla
   td) z pogrubieniem tylko z <strong>. Bez tej reguly wyglad tabel by sie
   zmienil - a zadanie wymaga zero zmian wizualnych poza "Parametry
   techniczne" jako naglowkiem na stronie produktu.
   ========================================================================== */
@import url("strony.css");

.w-archive-product__description table th {
  text-align: left;
  font-weight: 700;
}

/* Pierwsza tabela porownawcza w opisie kategorii "dystrybutory" ma min-content
   373 px, wiec przy 375 px viewportu (kolumna tresci = 345 px) wystawala poza
   kontener, ktory ma overflow-x: visible - i rozpychala cala strone do
   scrollWidth 388 px (window.innerWidth spadalo z 375 do 388 przez poziomy
   pasek przewijania). Rozwiazanie jak w public/css/produkt.css, gdzie tabela
   parametrow siedzi w kontenerze z overflow-x: auto - tutaj markup pochodzi z
   gotowego HTML-a opisu (src/_data/kategorieTresc.json), wiec kontenerem
   przewijania jest sama tabela. Tylko mobile: od 768 px kolumna tresci jest
   szersza niz najszersza tabela, wiec nic sie nie zmienia. */
@media (max-width: 767.98px) {
  .w-archive-product__description table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* Plakietka "Najczesciej wybierany" na kafelku produktu.
   Kolor #0056d3 (a nie jasniejszy #1a8fe3) daje 6,42:1 dla bialego tekstu -
   powyzej progu WCAG AA. Pozycjonowana absolutnie wzgledem kontenera zdjecia,
   z-index 2, zeby nie chowala sie pod obrazkiem.
   pointer-events:none, bo caly kafelek jest odnosnikiem - plakietka nie moze
   przechwytywac klikniecia. */
/* Kontener zdjecia jest domyslnie static, wiec bez tego plakietka zaczepialaby sie
   o dalszego przodka i ladowala w zlym miejscu karty. Ustawiamy punkt odniesienia. */
.w-content-product__wrap--img { position: relative; }

.c-plakietka {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  /* Kontur zamiast wypelnienia (wariant 3, decyzja Nikodema 2026-09-11). Poprzednia
     wersja byla pelna granatowa pigulka z napisem "Najczesciej wybierany" - 20 znakow
     zajmowalo pol szerokosci kafelka i leżalo na zdjeciu urzadzenia.
     Tlo biale, a nie transparentne: wiekszosc zdjec produktowych ma biale tlo, wiec
     wizualnie wychodzi na to samo, ale gdyby ktores mialo ciemne, napis nadal bedzie
     czytelny. Kontur #0056d3 na bieli to 6,42:1, powyzej progu WCAG AA. */
  background: #fff;
  border: 1px solid #0056d3;
  color: #0056d3;
  font-size: 10px; font-weight: 600; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
  pointer-events: none;
}
@media (max-width: 575.98px) {
  .c-plakietka { font-size: 9.5px; padding: 4px 8px; top: 8px; left: 8px; }
}