/*
  Laris 2026 — katalog i karta produktu.

  Selektory celują w to, co faktycznie jest w znacznikach: WooCommerce,
  filtr WOOF i widok listy BeRocket (klasy berocket_lgv_*). Szablonów
  nie przepisujemy, więc aktualizacja wtyczek nie rozjeżdża wyglądu.

  Wzorzec — układ katalogu shop.laris.ua: biała karta filtrów po lewej,
  biały pasek z liczbą wyników i sortowaniem nad siatką, karty produktu
  z okrągłym turkusowym przyciskiem koszyka w rogu.
*/

/* ═══ nagłówek kategorii ═══ */

.page-title,
.woocommerce .page-title {
  font-family: var(--l-font-head);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .5px;
}

.term-description {
  color: var(--l-muted);
  max-width: 80ch;
}

/* ═══ pasek nad siatką: „Pokaż”, sortowanie, widok ═══

   Trzy kontrolki motyw nadrzędny kładł BEZWZGLĘDNIE nad tytułem strony
   (style.css:1758 — „right: 280/65/15; top: 2”, niżej „top: 40”). Wychodziło
   z tego coś, co z daleka wyglądało na rząd, a rzędem nie było. Zmierzone
   na /sklep/ przy 1366 px:

     • „Pokaż: 15 na stronę”      164 × 30, góra 193
     • „Sortuj wg popularności”   200 × 43, góra 193
     • przełącznik widoku         cała szerokość, góra 248

   czyli dwa pola różnej wysokości obok siebie i ikony 55 px niżej, w swoim
   własnym wierszu. Do tego dwa różne wyglądy pola: „Pokaż” z ramką
   nadrzędnego (#e1e1e1, 12 px, tło przezroczyste), sortowanie z naszą kartą
   (biel, 14 px, zaokrąglenie) — i strzałka doklejona zaraz za napisem,
   bo nadrzędny rysuje ją elementem „:after” OBOK pola, nie w nim.

   Wszystkie trzy są RODZEŃSTWEM w kontenerze skrótu „woof_shortcode_output”,
   więc rząd składamy bez ruszania szablonów wtyczki: kontener na flex,
   kontrolki w jeden wiersz, siatka i stronicowanie na pełną szerokość.
   Kolejność w znacznikach to „Pokaż” → przełącznik → sortowanie, a chcemy
   „Pokaż” → sortowanie → przełącznik przy prawej krawędzi, więc ustawia
   ją „order”.

   Tytuł strony nie potrzebuje już zapasu 500 px po prawej — kontrolki nad
   nim nie wiszą. */

.woocommerce .woof_shortcode_output {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Cokolwiek jeszcze wtyczka tam wstawi (nakładka ładowania, komunikaty)
   dostaje własny wiersz na końcu, zamiast wskoczyć między kontrolki. */
.woocommerce .woof_shortcode_output > * {
  flex: 0 0 100%;
  order: 6;
}

.woocommerce .woof_shortcode_output > .woocommerce-notices-wrapper {
  order: 0;
}

/* Pusty pojemnik na komunikaty i tak zajmowałby wiersz razem z odstępem. */
.woocommerce .woof_shortcode_output > .woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce .woof_shortcode_output > .woocommerce-perpage {
  order: 1;
}

.woocommerce .woof_shortcode_output > .woocommerce-ordering {
  order: 2;
}

.woocommerce .woof_shortcode_output > .widget_berocket_lgv_widget {
  order: 3;
  justify-content: flex-end;
}

.woocommerce .woof_shortcode_output > ul.products {
  order: 4;
}

.woocommerce .woof_shortcode_output > .woocommerce-pagination {
  order: 5;
}

/* „width: auto” obowiązkowo: poniżej 768 px nadrzędny rozciąga każdą
   kontrolkę na 100% (style.css:2382) i rząd rozpadłby się na trzy wiersze. */
.woocommerce .woof_shortcode_output > .woocommerce-perpage,
.woocommerce .woof_shortcode_output > .woocommerce-ordering,
.woocommerce .woof_shortcode_output > .widget_berocket_lgv_widget {
  position: static;
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Przełącznik odsuwamy do prawej krawędzi kolumny — osobno i PO zerowaniu
   marginesów wyżej, bo „margin: 0” w tamtej regule zjada „margin-left”. */
.woocommerce .woof_shortcode_output > .widget_berocket_lgv_widget {
  margin-left: auto;
}

/* Oba pola wyglądają tak samo: ta sama wysokość, ramka, zaokrąglenie
   i strzałka W polu, przy prawej krawędzi. */
.woocommerce .woocommerce-perpage select,
.woocommerce .woocommerce-ordering select,
.woocommerce-perpage select,
.woocommerce-ordering select {
  box-sizing: border-box;
  height: 42px;
  width: auto;
  min-width: 190px;
  max-width: 100%;
  padding: 0 40px 0 15px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  background: var(--l-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.8 6.2 8 10.4l4.2-4.2' fill='none' stroke='%232d343c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  background-size: 12px 12px;
  font-family: var(--l-font-body);
  font-size: 14px;
  color: var(--l-ink);
  cursor: pointer;
  text-indent: 0;
}

.woocommerce .woocommerce-perpage select:hover,
.woocommerce .woocommerce-ordering select:hover {
  border-color: var(--l-brand);
}

/* Strzałka nadrzędnego stała OBOK pola i przy szerszym polu odklejała się
   od jego krawędzi. Rysujemy własną, tłem — dokładnie w polu. */
.woocommerce .woocommerce-perpage::after,
.woocommerce .woocommerce-ordering::after {
  content: none;
}

/* Przełącznik widoku jako jeden segmentowany element, nie dwie luźne ikony.
   Wysokość składa się do 42 px, czyli tyle co pola: 34 + 2 × 3 wyściółki
   + 2 × 1 ramki. „padding” z „!important”, bo wtyczka wpisuje go stylem
   bezpośrednio w znacznik. */
.woocommerce .berocket_lgv_widget {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px !important;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  background: var(--l-surface);
}

/* Nadrzędny trzyma tu rozmiary, tło i zaokrąglenie na „!important”
   (style.css:1782), więc bez „!important” nie da się ich zmienić.

   „filter: none” jest tu konieczny, nie kosmetyczny. Nadrzędny barwi WYBRANĄ
   ikonę filtrem kolorystycznym (style.css:1800), a filtr działa na cały
   element — razem z jego tłem. Dopóki tło było przezroczyste, barwił samą
   ikonę; gdy podłożyliśmy jasną podkładkę, zamienił ją w jednolity niebieski
   prostokąt, w którym ikona ginęła. Zamiast filtra dajemy własne rysunki
   w dwóch kolorach. */
.woocommerce .berocket_lgv_widget a.berocket_lgv_button {
  display: block !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  filter: none !important;
  opacity: .62;
  transition: background-color .15s ease, opacity .15s ease;
}

.woocommerce .berocket_lgv_widget a.berocket_lgv_button_grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232d343c'%3E%3Crect x='1' y='1' width='4' height='4' rx='1'/%3E%3Crect x='6' y='1' width='4' height='4' rx='1'/%3E%3Crect x='11' y='1' width='4' height='4' rx='1'/%3E%3Crect x='1' y='6' width='4' height='4' rx='1'/%3E%3Crect x='6' y='6' width='4' height='4' rx='1'/%3E%3Crect x='11' y='6' width='4' height='4' rx='1'/%3E%3Crect x='1' y='11' width='4' height='4' rx='1'/%3E%3Crect x='6' y='11' width='4' height='4' rx='1'/%3E%3Crect x='11' y='11' width='4' height='4' rx='1'/%3E%3C/svg%3E") !important;
}

.woocommerce .berocket_lgv_widget a.berocket_lgv_button_list {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232d343c'%3E%3Crect x='1' y='2' width='3.6' height='3.6' rx='1'/%3E%3Crect x='6.4' y='2.8' width='8.6' height='2' rx='1'/%3E%3Crect x='1' y='6.2' width='3.6' height='3.6' rx='1'/%3E%3Crect x='6.4' y='7' width='8.6' height='2' rx='1'/%3E%3Crect x='1' y='10.4' width='3.6' height='3.6' rx='1'/%3E%3Crect x='6.4' y='11.2' width='8.6' height='2' rx='1'/%3E%3C/svg%3E") !important;
}

.woocommerce .berocket_lgv_widget a.berocket_lgv_button:hover {
  opacity: 1;
  background-color: var(--l-surface-2) !important;
}

/* Wybrany widok: jasna podkładka i ikona w kolorze marki — widać, który
   z dwóch jest włączony, a nie tylko że jeden jest ciemniejszy. */
.woocommerce .berocket_lgv_widget a.berocket_lgv_button.selected {
  opacity: 1;
  background-color: var(--l-brand-tint) !important;
}

.woocommerce .berocket_lgv_widget a.berocket_lgv_button_grid.selected {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231073a2'%3E%3Crect x='1' y='1' width='4' height='4' rx='1'/%3E%3Crect x='6' y='1' width='4' height='4' rx='1'/%3E%3Crect x='11' y='1' width='4' height='4' rx='1'/%3E%3Crect x='1' y='6' width='4' height='4' rx='1'/%3E%3Crect x='6' y='6' width='4' height='4' rx='1'/%3E%3Crect x='11' y='6' width='4' height='4' rx='1'/%3E%3Crect x='1' y='11' width='4' height='4' rx='1'/%3E%3Crect x='6' y='11' width='4' height='4' rx='1'/%3E%3Crect x='11' y='11' width='4' height='4' rx='1'/%3E%3C/svg%3E") !important;
}

.woocommerce .berocket_lgv_widget a.berocket_lgv_button_list.selected {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231073a2'%3E%3Crect x='1' y='2' width='3.6' height='3.6' rx='1'/%3E%3Crect x='6.4' y='2.8' width='8.6' height='2' rx='1'/%3E%3Crect x='1' y='6.2' width='3.6' height='3.6' rx='1'/%3E%3Crect x='6.4' y='7' width='8.6' height='2' rx='1'/%3E%3Crect x='1' y='10.4' width='3.6' height='3.6' rx='1'/%3E%3Crect x='6.4' y='11.2' width='8.6' height='2' rx='1'/%3E%3C/svg%3E") !important;
}

/* ═══ filtry w bocznej kolumnie ═══ */

/* Tylko widgety najwyższego poziomu dostają ramkę karty. Filtr WOOF
   trzyma widgety zagnieżdżone jeden w drugim i bez tego zastrzeżenia
   robiła się karta w karcie. */
.shop-sidebar > .widget,
#shop-sidebar > .widget,
aside > .widget {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--l-shadow-sm);
}

.widget .widget {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

.widgettitle {
  font-family: var(--l-font-head);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .4px;
  color: var(--l-ink);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--l-line);
}

/* nagłówki grup filtra WOOF */
.woof_container .woof_container_inner > h4,
.woof_block_html_items h4,
.woof_container h4 {
  font-family: var(--l-font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--l-ink);
  margin: 0 0 10px;
}

.woof_list label,
.woof_container label {
  font-size: 14px;
  color: var(--l-ink-soft);
  cursor: pointer;
}

.woof_list label:hover {
  color: var(--l-teal-dark);
}

/* suwaki zakresów — cena, moc, wymiary */
.woof_price_search_container .ui-slider,
.irs-line {
  border-radius: var(--l-r-pill);
}

.irs-bar,
.woof_price_search_container .ui-slider-range {
  background: var(--l-teal);
}

.irs-handle > i:first-child,
.woof_price_search_container .ui-slider-handle {
  background: var(--l-surface);
  border: 2px solid var(--l-teal);
}

/* Dymki z ceną mają w środku napis — ciemniejszy stopień.
   Sama belka i obrys uchwytu wyżej zostają na podstawowym: to czysta
   grafika bez tekstu, a tam próg to 3:1, nie 4,5:1. */
.irs-from, .irs-to, .irs-single {
  background: var(--l-brand-dark);
  border-radius: var(--l-r-sm);
}

/* ═══ siatka produktów ═══ */

/* Świadomie NIE przestawiamy siatki na grid. Motyw nadrzędny układa
   produkty na floatach i procentach, a kolumna filtrów ma stałą szerokość.
   Podmiana układu rozjeżdża nagłówek kategorii z sortowaniem i ściska
   filtry — sprawdzone. Zmieniamy wyłącznie wygląd kart, układ zostaje. */

/* ═══ karta produktu ═══ */

.woocommerce ul.products li.product .lgv_link,
.woocommerce ul.products li.product .lgv_link_simple {
  display: block;
}

/* Obszar zdjęcia — stała proporcja, żeby siatka nie skakała.

   Wróciliśmy do kwadratu z kadru 4:5. Kadr pionowy miał sens dla wysokich
   grzejników, ale ORYGINAŁY WIĘKSZOŚCI TOWARÓW SĄ KWADRATOWE (800 × 800,
   1200 × 1200) — w pionowej ramce zostawiały pasy bieli u góry i u dołu,
   czyli „dużo zbędnego miejsca”. Przy kwadracie kwadratowe wypełniają
   ramkę, a wysokie i tak nie są przycinane — „contain” nigdy nic nie ucina,
   tylko pokazuje je węższe. */
.woocommerce ul.products li.product .archive-gallery-slider,
.woocommerce ul.products li.product > a > img,
.woocommerce ul.products li.product img.wp-post-image {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  height: auto;
  background: var(--l-surface);
}

/* etykiety w lewym górnym rogu */
.woocommerce ul.products li.product .onsale,
.woocommerce ul.products li.product .itsnew,
.woocommerce ul.products li.product .bestseller {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  margin: 0;
  z-index: 3;
  border-radius: var(--l-r-sm);
  font-family: var(--l-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 5px 10px;
  line-height: 1.3;
  color: #fff;
}

/* Etykiety to napis 700 wielkimi literami, ale mały — obowiązuje próg 4,5:1,
   nie 3:1. Biel na pomarańczowym dawała 2,66:1, czyli dokładnie to, co dla
   przycisków zostało już raz odrzucone (HANDOVER). Rozwiązanie zależy od tła:
   na pomarańczowym wystarczy zmienić napis na grafit (4,74:1), na niebieskim
   grafit nie pomaga (3,53:1), więc tam ciemnieje tło. Zielony przechodzi
   bez zmian (5,32:1). */
.woocommerce ul.products li.product .onsale {
  background: var(--l-orange);
  color: var(--l-ink);
}

.woocommerce ul.products li.product .bestseller {
  top: 14px;
}

/* Selektor złożony, bo motyw nadrzędny maluje te dwie etykiety właśnie tak:
   „.onsale.bestseller” i „.onsale.newest” (style.css:1268 i :1271). Pojedyncza
   klasa przegrywa z nimi specyficznością — sprawdzone na żywej stronie:
   napis zmieniał się na grafitowy, a tło zostawało nadrzędne.

   Uwaga na znacznik: jeden <span> nosi naraz „itsnew onsale bestseller”,
   więc reguł nie da się rozdzielić po samych klasach — wygrywa ostatnia
   pasująca. Dlatego etykieta bestsellera dostaje własną parę tło + napis,
   a nie samo tło.

   #1490ca z grafitem to 3,52:1, a napis ma 11 px, czyli obowiązuje próg
   4,5:1. Biel na #1c7aaa daje 4,76:1. Zieleń nadrzędna #388e3c z bielą
   to 4,52:1 — przechodzi, zostawiamy kolor i pilnujemy tylko napisu. */
.woocommerce ul.products li.product .onsale.bestseller,
.woocommerce span.bestseller {
  background-color: var(--l-blue-deep);
  color: #fff;
}

.woocommerce ul.products li.product .onsale.newest,
.woocommerce span.newest {
  color: #fff;
}

.woocommerce ul.products li.product .itsnew { background: var(--l-ok); }

/* Tu stały dwie linijki układające etykiety w kolumnę:
   „.bestseller { top: 46px }” i „.itsnew { top: 78px }”. Były pisane przy
   założeniu, że każda etykieta ma własny <span> — a jest dokładnie odwrotnie
   i jest o tym mowa dwadzieścia wierszy wyżej: motyw nadrzędny wypisuje JEDEN
   <span class="itsnew onsale bestseller">.

   Skutkiem było to, co klient nazwał „wyrównać w jedną linię”: karta z samą
   „Promocją” miała etykietę 14 px od góry, a każda z „Bestsellerem” — 78 px,
   bo dla tego samego znacznika wygrywała ostatnia pasująca reguła. Różnica
   64 px w rzędzie kafelków.

   Kolumna nie jest potrzebna: przy jednym znaczniku etykieta jest zawsze
   jedna. Wszystkie siadają na 14 px z reguły podstawowej wyżej. */

/* ═══ „Porównaj” i „Śledź cenę” znikają z katalogu ═══

   Decyzja klienta: w katalogu zostaje samo „Dodaj do ulubionych”.
   Porównywarka i powiadomienie o spadku ceny to narzędzia detalu,
   a serwis idzie w stronę B2B — hurtownik nie śledzi ceny jednej sztuki.

   „display: none”, a nie „visibility” czy „opacity”: element ma zniknąć
   także z obchodu klawiaturą i z odczytu czytnika, nie tylko z oczu.

   Skąd te napisy biorą się w katalogu. Motyw nadrzędny wypisuje cały rząd
   („Dodaj do ulubionych / Porównaj / Śledź cenę”) na haku
   „woocommerce_product_meta_end” (functions.php:456). W siatce tego haka
   nie ma — przy zdjęciu stoi samo serduszko — ale w widoku listy wtyczka
   Gridlist wypisuje metę towaru w bloku „lgv_meta”, więc rząd pojawia się
   przy KAŻDEJ pozycji spisu. Stąd trzy pary selektorów: kafel, blok danych
   spisu i sama „lgv_meta”.

   Strony pojedynczego towaru to nie dotyczy — wszystko jest zamknięte
   w „ul.products”. Tam rząd zostaje, bo klient prosił tylko o katalog. */
.woocommerce ul.products li.product .compare_product_btn,
.woocommerce ul.products li.product .follow-price,
.woocommerce ul.products .berocket_lgv_additional_data .compare_product_btn,
.woocommerce ul.products .berocket_lgv_additional_data .follow-price,
.woocommerce ul.products .lgv_meta .compare_product_btn,
.woocommerce ul.products .lgv_meta .follow-price {
  display: none;
}

/* ═══ cena na kafelku ═══ */

/* Motyw nadrzędny chowa cenę w katalogu (style.css:1278
   „.woocommerce ul.products li.product .price { display: none }”).
   Na shop.laris.ua cena jest jednym z mocniejszych elementów kafelka,
   więc w tym motywie ją przywracamy. To zmiana handlowa, nie kosmetyczna
   — dlatego wchodzi razem z nowym motywem, do obejrzenia przed włączeniem.
   Żeby wrócić do stanu poprzedniego, wystarczy usunąć tę regułę. */
.woocommerce ul.products li.product .price {
  display: block;
  font-family: var(--l-font-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--l-ink);
  margin: 6px 0 0;
}

/* ═══ kafelek jako kolumna: ceny w jednej linii, karta niższa ═══

   Klient, dwa razy tym samym: „передвинул выше и компактнее сделал карточку”
   i „цены в 1 уровень, высоту карточек уменьшить”. Zmierzone przed zmianą
   (1440 px, kafel 252 px): karta 408 px wysokości, z czego 54 px to pusty
   pas pod ceną, bo kółko koszyka stało we WŁASNYM wierszu, a podpis
   „Dostępne N kolorów” był przyklejony do dołu karty na miejscu
   rezerwowanym wyściółką.

   Ceny nie stały w jednej linii z innego powodu: nazwy mają jedną, dwie
   albo trzy linijki, a wszystko pod nimi płynęło za nazwą. Widać to na
   „polubionych produktach”, gdzie nazwy są najdłuższe w serwisie.

   Rozwiązanie: odnośnik kafelka staje kolumną i rozciąga się na całą
   wysokość karty, a cena dostaje „margin-top: auto”. Wtedy cena siada na
   dole KAŻDEJ karty — a karty w rzędzie siatki mają równą wysokość, więc
   ceny wychodzą w jednej linii niezależnie od długości nazwy.

   To NIE jest wcześniej odrzucona próba (components.css:247): tam kafle
   pływały na floatach i własnych wysokościach motywu nadrzędnego. Siatka
   („display: grid” niżej w tym pliku) tamten model wysokości zniosła.

   Kolejność w kodzie jest inna niż na ekranie — motyw nadrzędny wypisuje
   podpis o kolorach PRZED nazwą (functions.php:197) — więc porządek
   ustawiamy własnością „order”, znaczników nie ruszamy. */
.woocommerce ul.products:not(.berocket_lgv_list) li.product {
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products:not(.berocket_lgv_list) li.product > a.woocommerce-LoopProduct-link,
.woocommerce ul.products:not(.berocket_lgv_list) li.product > a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.woocommerce ul.products li.product .archive-gallery-slider,
.woocommerce ul.products li.product > a > img { order: 1; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { order: 2; }
.woocommerce ul.products li.product .color-amount { order: 3; }
.woocommerce ul.products li.product .price { order: 4; }

/* Liczba kolorów: z dołu karty pod nazwę.

   Motyw nadrzędny robił z niej szary pas na całą szerokość, przyklejony do
   dołu i z z-indeksem 10 (style.css:1068) — wyglądał jak stopka doklejona
   do karty. Potem stała u nas w rogu, ale wciąż bezwzględnie, więc karta
   musiała trzymać pod nią pustą szufladę. Teraz idzie normalnym przepływem
   tuż pod nazwą: ta sama informacja, o 40 px wyżej i bez rezerwy. */
.woocommerce ul.products li.product .color-amount {
  position: static;
  width: auto;
  max-width: none;
  margin: 0 0 6px;
  padding: 0;
  background: transparent;
  color: var(--l-muted);
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
}

.woocommerce ul.products li.product .color-amount b {
  font-weight: 500;
}

/* Wiersz ceny. Wysokość równa kółku koszyka, bo kółko na nim siedzi —
   dzięki temu jedno i drugie ma wspólną linię środkową, a nie „koło niżej,
   cena wyżej”. Wyściółka po bokach jest symetryczna, żeby cena została na
   środku karty: kółko zajmuje prawy dolny róg. */
.woocommerce ul.products li.product .price {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  margin-top: auto;
  padding: 0 46px;
}

/* ── kafel z przeceną: stara cena NAD nową, nie obok ──

   Klient: „цена не ровная”, „кружок цены сжались”. Zmierzone na kafelku
   z przeceną przy różnych szerokościach okna:

     1366 px  kafel 252 px  wiersz ceny 42 px  do kółka zostaje 18 px
     1200 px  kafel 168 px  wiersz ceny 95 px  do kółka zostaje  4 px
     1024 px  kafel 214 px  wiersz ceny 66 px  do kółka zostaje  4 px

   Czyli: przy dwóch cenach w jednym wierszu treść nie mieści się w tym,
   co zostaje po odjęciu 92 px wyściółki zarezerwowanej na kółko koszyka —
   wiersz łamie się na dwa albo trzy poziomy i podjeżdża pod kółko na
   cztery piksele. Przy jednej cenie problemu nie ma i nigdy nie było.

   Stara cena idzie więc nad nową, drobniejsza: w dolnym wierszu zostaje
   sama cena do zapłaty i ona zawsze mieści się obok kółka. Kafli bez
   przeceny to nie dotyczy — mają jedno dziecko i kolumna niczego nie
   zmienia. */
/* UWAGA na opakowanie WOOCS-a. Wtyczka walut owija OBIE ceny w jeden
   <span class="woocs_price_code">, więc kolumna nałożona na sam „.price”
   nic nie daje — ma dokładnie jedno dziecko i to ono jest całym wierszem.
   Kolumnę zakładamy więc na jedno i na drugie. Sprawdzone na żywej stronie:
   drzewo to .price > span.woocs_price_code > (del, ins), a font-size na
   opakowaniu wynosi 0 (sztuczka wtyczki na zjedzenie spacji), przez co
   rozmiary trzeba ustawiać na „.woocommerce-Price-amount” w środku,
   a nie na samym del/ins. */
.woocommerce ul.products li.product .price:has(del),
.woocommerce ul.products li.product .price:has(del) > .woocs_price_code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 100%;
  line-height: 1.15;
  /* Z lewej tyle, co z prawej — inaczej treść w kolumnie stoi obok środka. */
  padding: 4px 46px;
}

.woocommerce ul.products li.product .price:has(del) > .woocs_price_code {
  padding: 0;
}

.woocommerce ul.products li.product .price:has(del) del {
  order: -1;
  display: block;
  margin: 0;
  font-weight: 500;
}

.woocommerce ul.products li.product .price:has(del) ins {
  display: block;
  margin: 0;
  text-decoration: none;
}

/* Rozmiary na kwotach, nie na del/ins — patrz uwaga o font-size: 0 wyżej. */
.woocommerce ul.products li.product .price:has(del) del .woocommerce-Price-amount {
  font-size: 13px;
}

.woocommerce ul.products li.product .price:has(del) ins .woocommerce-Price-amount {
  font-size: 19px;
}

/* dane dodatkowe BeRocket pod tytułem */

/* Pasek „Dostępne N kolorów” ma własne tło i w drzewie idzie po przycisku,
   więc zamalowywał dolną połowę turkusowego koła. Sam z-index na przycisku
   nie wystarczał — element nieustawiony nie bierze udziału w porządku
   nakładania. Ustawiamy oba i porządek staje się jednoznaczny. */
.berocket_lgv_additional_data {
  position: relative;
  z-index: 1;
}

.berocket_lgv_additional_data,
.lgv_meta,
.lgv_meta_simple {
  font-size: 12.5px;
  color: var(--l-muted);
}

.lgv_description,
.lgv_description_simple {
  font-size: 13px;
  color: var(--l-muted);
  line-height: 1.5;
}

/* ═══ widok listy ═══

   Przełącznik nad siatką ma dwa położenia i drugie od 12.08 nie działało.

   Co robi wtyczka „gridlist-view” po przełączeniu na listę (podejrzane
   w DOM-ie, nie w dokumentacji): każdemu kafelkowi dopisuje klasę
   „berocket_lgv_list”, a ukryty dotąd blok „berocket_lgv_additional_data”
   — nazwa, opis, symbol, działy, cena — WYJMUJE Z KAFELKA i wstawia obok
   niego, jako kolejne dziecko listy. Za nim idzie pusty
   „berocket_lgv_after_additional” z „clear: both”. Wiersz powstaje więc
   z opływania: kafel pływa w lewo, blok danych pływa obok, rozpórka
   zamyka wiersz.

   Nasza siatka opływanie zniosła („siatka towarów: odstępy” niżej w tym
   pliku), a blok danych stał się zwykłą komórką siatki. Zmierzone na
   kategorii „Suszarki elektryczne”: po przełączeniu na listę piętnaście
   towarów zajmowało 9502 px zamiast 1489, bo na każdy towar wychodził
   kafel 179 px, pod nim blok danych 420 px i rozpórka — jeden pod drugim,
   w rozsypce (x = 358, 1114, 862…).

   Skoro układ wiersza wtyczka ma własny i poprawny, w tym jednym widoku
   oddajemy jej pole: lista wraca na „display: block”, opływanie działa,
   a my zajmujemy się samym wyglądem. Rozpoznanie idzie przez „:has()” —
   wtyczka znakuje tylko kafle, na samej liście nie zostawia niczego.
   W przeglądarce bez „:has()” reguła po prostu nie zadziała i widok listy
   zostanie taki, jaki był; siatka — czyli widok domyślny — nie ucierpi.

   Uwaga na tropiciela: reguły kart mają zastrzeżenie
   „ul.products:not(.berocket_lgv_list)”. Ono NIGDY nie działa — klasa siada
   na „li”, nie na „ul”. Zostaje jako ślad po pierwszym podejściu. */

.woocommerce ul.products:has(li.berocket_lgv_list) {
  display: block;
}

/* Kafel zostaje kartą, ale wąską: w wierszu niesie samo zdjęcie, bo nazwę
   i cenę wtyczka chowa w nim, a pokazuje we własnym bloku obok.

   Selektor z „[class*=columns-]” w pierwszym wierszu nie jest ozdobą.
   Szerokość kafla ustawia niżej w tym pliku reguła siatki, dokładnie tak
   samo szczegółowa (0,4,2) i STOJĄCA PÓŹNIEJ, więc wygrywała: kafel dostawał
   „width: auto”, czyli przy opływaniu szerokość treści — zmierzone 418 px
   zamiast 176. Wtedy kafel i blok danych (790 px) nie mieściły się w 990 px
   kolumny i blok spadał pod zdjęcie, czyli wracała ta sama usterka, tylko
   ładniejsza. Atrybut daje o jeden stopień więcej i spór się kończy. */
.woocommerce ul.products[class*="columns-"] li.product.berocket_lgv_list,
.woocommerce ul.products li.product.berocket_lgv_list {
  float: left;
  width: 176px;
  margin: 0 !important;
  padding: 12px;
}

.woocommerce ul.products li.product.berocket_lgv_list .archive-gallery-slider {
  padding: 0;
}

/* „Dostępne N kolorów” w wąskim kafelku wchodzi pod okrągły przycisk
   koszyka — ten stoi w prawym dolnym rogu i przy 176 px zakrywa połowę
   napisu. W wierszu kafel jest samym zdjęciem, informacje są obok. */
.woocommerce ul.products li.product.berocket_lgv_list .color-amount {
  display: none;
}

/* Blok danych. Selektor przez dziecko listy celowo: w siatce ten sam blok
   siedzi WEWNĄTRZ kafelka (i jest tam ukryty), więc reguły dla wiersza nie
   mogą go dosięgnąć przypadkiem. */
.woocommerce ul.products > .berocket_lgv_additional_data {
  float: left;
  width: calc(100% - 200px);
  max-width: none;
  min-height: 176px;
  padding: 6px 0 0 24px;
  line-height: 1.5;
  /* Kolejność w znacznikach to nazwa → opis → dane → cena, czyli cena leżała
     na samym dole, pod znakiem „Polski producent” i wierszem odnośników.
     W spisie cena ma stać przy nazwie, więc kolumna i „order” — znaczników
     wtyczki nie ruszamy. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.woocommerce ul.products > .berocket_lgv_additional_data .lgv_link,
.woocommerce ul.products > .berocket_lgv_additional_data .lgv_link_hover {
  order: 1;
}

.woocommerce ul.products > .berocket_lgv_additional_data .lgv_price {
  order: 2;
}

.woocommerce ul.products > .berocket_lgv_additional_data .lgv_description {
  order: 3;
}

.woocommerce ul.products > .berocket_lgv_additional_data .lgv_meta {
  order: 4;
}

/* Krótki opis towaru to u wszystkich ten sam znak „Polski producent”
   wklejony obrazkiem — dlatego pomiar tekstu pokazywał zero znaków przy
   piętnastu z piętnastu. W oryginale ma 200 px szerokości i w spisie
   rozpychał każdy wiersz o sto pikseli. Zostaje, ale wielkości podpisu. */
.woocommerce ul.products > .berocket_lgv_additional_data .lgv_description img {
  max-height: 30px;
  width: auto;
}

/* Rozpórka wtyczki to puste 10 px z „clear: both”. Skoro i tak zamyka
   wiersz, niech zamyka go widocznie — cienką linią, jak w spisie. */
.woocommerce ul.products > .berocket_lgv_after_additional {
  height: 1px;
  margin: 18px 0 22px;
  background: var(--l-line);
}

.woocommerce ul.products > .berocket_lgv_additional_data:last-child + .berocket_lgv_after_additional,
.woocommerce ul.products > .berocket_lgv_after_additional:last-child {
  display: none;
}

/* Nazwa towaru. Motyw nadrzędny daje jej 24 px w kolorze marki i 30 px
   odstępu pod spodem (style.css:1809) — w wierszu listy to nagłówek działu,
   nie nazwa towaru. */
.woocommerce ul.products > .berocket_lgv_additional_data .lgv_link h3,
.woocommerce ul.products > .berocket_lgv_additional_data .lgv_link_hover h3 {
  margin: 0 0 8px;
  font-family: var(--l-font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--l-ink);
}

.woocommerce ul.products > .berocket_lgv_additional_data .lgv_link:hover h3 {
  color: var(--l-brand-dark);
}

.woocommerce ul.products > .berocket_lgv_additional_data .lgv_meta {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--l-muted);
}

/* Wiersz „Dodaj do ulubionych / Porównaj / Śledź cenę” motyw nadrzędny
   odsuwa o 50 px — to odstęp spod karty towaru, gdzie stoi na końcu
   kolumny. W spisie zostawiał dziurę wielkości zdjęcia. */
.woocommerce ul.products > .berocket_lgv_additional_data .product-nav-footer {
  margin-top: 14px;
}

/* ── „Dodaj do ulubionych” w spisie: napis, a nie szara plama ──

   Klient: w widoku listy zaznaczenie tekstu myszą zakrywa napisy szarymi
   pasami. Winny nie jest ani „::selection”, ani tło pseudoelementu —
   winny jest FILTR. Motyw nadrzędny barwi ikonę przy napisie filtrem
   nałożonym na cały element:

     .product-nav-footer span { filter: invert(50%) sepia(1%) saturate(2%)
       hue-rotate(23deg) brightness(91%) contrast(85%) }   (style.css:1553)

   Filtr działa na gotowy obraz elementu, więc przechodzi przez niego
   również podświetlenie zaznaczenia. Błękit tła zaznaczenia (#1490ca)
   i biel napisu wychodzą z takiego filtra dwoma odcieniami tej samej
   szarości — napis znika w pasku, choć nadal tam jest.

   Filtr istniał wyłącznie po to, żeby czarny plik SVG stał się szary.
   Zdejmujemy go, a ikonę rysujemy „::before” z data-URI — dokładnie tak,
   jak strzałki galerii i ikony przełącznika widoku wyżej w tym pliku.
   Napis zostaje wtedy zwykłym tekstem i zaznacza się normalnie.

   „Porównaj” i „Śledź cenę” tej kuracji nie potrzebują — są ukryte
   wyżej; zostaje jedno działanie i jedna ikona. */
.woocommerce ul.products .product-nav-footer span.lovebutton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  filter: none;
  background-image: none;
  padding-left: 0;
  color: var(--l-muted);
}

.woocommerce ul.products .product-nav-footer span.lovebutton::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23696e82'%3E%3Cpath d='M12 21.35 10.55 20.03C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}

/* Najechanie i stan „polubione” zostają ciepłe — tak zaplanował to motyw
   nadrzędny (#f08200) i tak czyta się serce na całym sklepie. Sam
   pomarańcz jako NAPIS daje 2,66:1, więc napis idzie na --l-orange-text
   (5,21:1 na bieli), a serce zostaje pełnym pomarańczem: to grafika,
   dla niej próg wynosi 3:1. */
.woocommerce ul.products .product-nav-footer span.lovebutton:hover,
.woocommerce ul.products .product-nav-footer span.lovebutton.loved {
  filter: none;
  color: var(--l-orange-text);
}

.woocommerce ul.products .product-nav-footer span.lovebutton:hover::before,
.woocommerce ul.products .product-nav-footer span.lovebutton.loved::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f08200'%3E%3Cpath d='M12 21.35 10.55 20.03C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z'/%3E%3C/svg%3E");
}

/* Własne zaznaczenie na kartach katalogu. Nadrzędne jest ciemne
   („::selection { color:#fff; background-color:#1490ca }”, style.css:9),
   a na kartach zaznacza się głównie drobny szary tekst — jasny podkład
   z grafitowym napisem czyta się w każdym z tych miejsc (grafit na
   --l-brand-tint to 11:1).

   Dwie osobne reguły, nie jedna lista: przeglądarka odrzuca CAŁĄ grupę
   selektorów, jeśli nie zna choćby jednego, a „::-moz-selection” zna
   tylko Firefox. */
.woocommerce ul.products ::selection {
  background-color: var(--l-brand-tint);
  color: var(--l-ink);
}

.woocommerce ul.products ::-moz-selection {
  background-color: var(--l-brand-tint);
  color: var(--l-ink);
}

.woocommerce ul.products > .berocket_lgv_additional_data .lgv_price {
  margin: 0 0 12px;
  font-family: var(--l-font-head);
  font-size: 21px;
  font-weight: 700;
  color: var(--l-ink);
}

/* Opisu skróconego nie ma ani przy jednym towarze (sprawdzone: 15 z 15
   pustych), a wtyczka i tak zostawia po nim 5 px odstępu. */
.woocommerce ul.products > .berocket_lgv_additional_data .lgv_description:empty {
  display: none;
}

/* Telefon: zdjęcie węższe, dane pod spodem — dwie kolumny na 360 px to
   dwa słupki po jednym słowie. */
@media (max-width: 767px) {
  /* Ta sama para selektorów, co wyżej — zapytanie o szerokość ekranu
     szczegółowości nie dodaje, więc bez atrybutu reguła siatki wygrywałaby
     i tutaj (zmierzone na 390 px: kafel zostawał 176 px i blok danych spadał
     pod zdjęcie). */
  .woocommerce ul.products[class*="columns-"] li.product.berocket_lgv_list,
  .woocommerce ul.products li.product.berocket_lgv_list {
    width: 132px;
  }

  .woocommerce ul.products > .berocket_lgv_additional_data {
    width: calc(100% - 150px);
    min-height: 132px;
    padding-left: 16px;
  }
}

/* ═══ karta produktu — prawa kolumna ═══

   Klient o „Surfing ze stali nierdzewnej”: „не доделанная еще”. Zmierzone
   na tej stronie (okno 1440 px, pozycje od góry dokumentu):

     „Kod produktu” 289 → cena 366   — 50 px pustki między nimi, bo motyw
                                        nadrzędny daje temu wierszowi
                                        „margin-bottom: 50px” (style.css:1473)
     plakietka 397, formularz 472    — plakietka „Polski producent” dotykała
                                        tabeli wariantów
     „SKU: …” 828                    — ten sam symbol drugi raz, u dołu
                                        kolumny, w bloku „product_meta”

   Czyli numer produktu stał na stronie dwa razy, a między nim i ceną była
   dziura wielkości wiersza tekstu. */

/* Numer produktu: wiersz pod nazwą, nie osobny akapit z przepaścią. */
.woocommerce div.product .prduct-sku {
  margin-bottom: 14px;
  color: var(--l-muted);
  font-size: 13.5px;
}

/* Drugi numer, u dołu kolumny, zdejmujemy — zostaje ten pod nazwą.
   Kategorie motyw nadrzędny i tak chowa („.posted_in { display: none }”),
   więc z „product_meta” zostaje sam rząd działań. */
.woocommerce div.product .product_meta .sku_wrapper {
  display: none;
}

.woocommerce div.product .product_meta {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--l-line);
  font-size: 14px;
}

/* ── znak „Polski producent” ──

   Plakietka siedzi w krótkim opisie towaru, czyli w polu redakcyjnym —
   dajemy jej odstęp od tabeli wariantów i sufit wysokości, żeby wygląd
   kolumny nie zależał od tego, jaki plik zostanie tam wgrany następnym
   razem.

   Klient: znak stoi w białej ramce i wygląda jak karta z ceną obok.
   Ramki nie rysuje żaden arkusz — rysuje ją SAM PLIK. Znak ma własne
   białe tło, a prawa kolumna karty leży na tle strony (--l-bg #f5f7f9),
   więc biel pliku odcinała się od niej prostokątem i znak czytało się
   jako kafelek, a nie jako pieczątkę. Lekarstwo to samo, co przy zdjęciach
   towarów niżej w tym pliku: „mix-blend-mode: multiply”. Biel pliku (255)
   razy tło daje równo tło, a sam rysunek ciemnieje o kilka procent —
   wychodzi znak postawiony wprost na stronie.

   Zerowanie ramki, tła, wyściółki i cienia zostaje na wszelki wypadek:
   krótki opis jest polem redakcyjnym i obrazek bywa w nim owinięty
   akapitem albo blokiem z własnym wyglądem. */
.woocommerce div.product .woocommerce-product-details__short-description {
  margin: 0 0 20px;
}

.woocommerce div.product .woocommerce-product-details__short-description p {
  margin: 0;
}

.woocommerce div.product .woocommerce-product-details__short-description,
.woocommerce div.product .woocommerce-product-details__short-description p,
.woocommerce div.product .woocommerce-product-details__short-description img {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-product-details__short-description img {
  display: block;
  max-height: 54px;
  width: auto;
  height: auto;
  mix-blend-mode: multiply;
}

/* ═══ karta produktu — strona pojedyncza ═══ */

/* ── dwa działania pod ceną: „Do koszyka” i „Zamów telefonicznie” ──

   Klient: przyciski różnej wielkości, a przy najechaniu wyskakuje
   prostokątna podkładka.

   PODKŁADKA. To sztuczka motywu nadrzędnego: każdy przycisk ma „:before”
   — pusty prostokąt, który przy najechaniu rozrasta się do 100% × 100%
   i zalewa go pomarańczem (style.css:240–258). Prostokąt NIE jest
   przycinany zaokrągleniem przycisku, bo promień przycina własne tło
   elementu, a nie jego dzieci — pod pigułką pojawia się więc kwadratowa
   plama. Ten sam mechanizm opisany jest w HANDOVER przy koszyku.
   Zdejmujemy podkładkę i piszemy najechanie wprost, kolorem tła.

   ROZMIAR. Wzorcem jest „Do koszyka”: 50 px wysokości, wyściółka 14/34
   (layout.css, sekcja „strona towaru: główne działanie”). „Zamów
   telefonicznie” to <a class="button-classic order-phone">
   (functions.php:426) — bez klasy „button”, więc ŻADNA z reguł przycisków
   sklepu go nie dotyczyła i zostawał na nadrzędnych 10/30 przy piśmie
   14 px, czyli o kilkanaście pikseli niższy od sąsiada. Dostaje ten sam
   rozmiar pudełka. Liczby są tu powtórzone za layout.css świadomie:
   para ma być równa, więc przy zmianie jednej trzeba zmienić drugą.

   „box-sizing” obowiązkowo — oba mają ramkę 1 px i bez niego różniłyby
   się o dwa piksele. „inline-flex” daje napis w pionowej osi przycisku;
   przy „inline-block” z „min-height” napis siada u góry i wygląda
   na przesunięty. */
.woocommerce div.product form.cart .button.single_add_to_cart_button,
.woocommerce div.product form.cart a.button-classic.order-phone {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1.2;
  text-align: center;
}

.woocommerce div.product form.cart a.button-classic.order-phone {
  min-height: 50px;
  padding: 14px 34px;
  border: 1px solid var(--l-brand-dark);
  border-radius: var(--l-r-btn);
  background-color: transparent;
  color: var(--l-brand-dark);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.woocommerce div.product form.cart .button.single_add_to_cart_button::before,
.woocommerce div.product form.cart a.button-classic.order-phone::before {
  content: none;
}

/* „!important” tylko na ramce i tylko dlatego, że nadrzędny sam go tam
   postawił: „button.button:hover { border: 1px solid #f08200!important }”
   (style.css:275). Bez tego oba przyciski pod kursorem dostają
   pomarańczową obwódkę wokół niebieskiego tła. */
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover {
  background-color: var(--l-brand-deep);
  border-color: var(--l-brand-deep) !important;
  color: #fff;
}

/* Drugie działanie jest drugie także kolorem: obwiedzione, wypełnia się
   dopiero pod kursorem. Biel na --l-brand-dark to 5,26:1. */
.woocommerce div.product form.cart a.button-classic.order-phone:hover {
  background-color: var(--l-brand-dark);
  border-color: var(--l-brand-dark) !important;
  color: #fff;
}

/* ═══ zakładki pod kartą towaru ═══

   Klient: „Opinie” zdjąć całkiem, resztę („Specyfikacje”, „Tabela
   rozmiarów”, „Załączniki”) uporządkować — „dziwny wygląd”.

   Na ten dziwny wygląd składały się trzy arkusze naraz: WooCommerce daje
   zakładkom szare tło, ujemny margines −5 px i doklejone rogi
   („li::before/::after”); motyw nadrzędny zdejmuje wszystkie ramki poza
   dolną (style.css:1497); a nasz buttons.css nadawał im promień pigułki
   999 px, bo trafiły do wspólnej listy „wszystko, co wygląda jak
   przycisk”. Wychodził rząd napisów w łukach, bez widocznej ramy
   i oderwany od treści pod spodem.

   Teraz to zwykłe zakładki-karty: rząd na flexie, aktywna zrasta się
   z panelem, panel jest białą kartą z ramką. Selektory powtarzają pełną
   ścieżkę WooCommerce („.woocommerce div.product .woocommerce-tabs
   ul.tabs li”), bo krótszy zapis przegrywa z rdzeniem wtyczki. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* −1 px wsuwa rząd na ramkę panelu, żeby aktywna zakładka i panel
     stykały się bez szczeliny. */
  margin: 0 0 -1px;
  padding: 0;
  overflow: visible;
  list-style: none;
}

/* Linię pod rzędem rysuje u WooCommerce „ul.tabs::before”. W układzie
   elastycznym pseudoelement staje się DZIECKIEM flexa, czyli pustą
   kolumną w rzędzie zakładek — a linię i tak rysuje teraz ramka panelu. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0;
  background: var(--l-bg);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r) var(--l-r) 0 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: 11px 20px;
  font-family: var(--l-font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--l-ink-soft);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  background: var(--l-surface);
}

/* Aktywna zakładka nie ma dolnej krawędzi — to ona robi z zakładki
   i panelu jedną bryłę.

   Skrót „border”, a nie sam kolor: motyw nadrzędny daje aktywnej zakładce
   dolną krawędź GRUBOŚCI 2 px („border-bottom: 2px solid #1490ca”,
   style.css:1509). Sama podmiana koloru zostawiłaby białą kreskę
   wystającą pod panel o piksel. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-bottom-color: var(--l-surface);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--l-brand-dark);
}

/* Blok zakładek węższy od strony.

   Klient: „может таблицу сделаем меньше, чтобы всё аккуратненько выглядело”.
   Zawartość zakładek to tabela techniczna, rysunek i krótkie akapity —
   przy 1330 px wiersz tekstu ma ponad 150 znaków, a tabela rozjeżdża się
   na sześć kolumn z jedną liczbą w każdej. 1000 px trzyma i jedno, i drugie
   w rozsądnych proporcjach; pasek nazw zakładek zwęża się razem z kartą,
   więc lewa i prawa krawędź nadal się zgadzają. */
.woocommerce div.product .woocommerce-tabs {
  max-width: 1000px;
}

/* Panel jako karta: wcześniej treść leżała wprost na tle strony i nie
   było widać, gdzie kończy się jedna zakładka, a zaczyna druga. */
.woocommerce div.product .woocommerce-tabs .panel,
.woocommerce div.product .woocommerce-tabs .woocommerce-Tabs-panel {
  margin: 0 0 40px;
  padding: 24px 26px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: 0 var(--l-r) var(--l-r) var(--l-r);
  font-size: 15px;
  line-height: 1.6;
  color: var(--l-ink-soft);
}

/* ── telefon: zakładki rysunkiem, nie napisem ──

   Klient: „табы внизу (сделай табы вместо текста иконки)”. Zmierzone
   na 390 px: trzy podpisy — „Specyfikacje” 136 px, „Tabela rozmiarów”
   175 px i „Załączniki” 116 px — nie mieszczą się w kolumnie 360 px
   i łamią się na dwa rzędy, przez co pas zakładek rósł dwukrotnie,
   a trzecia zakładka wisiała sama pod spodem.

   Zamiast ściskać stopień pisma dajemy rysunki: trzy pola dotyku
   po równo, jeden rząd, wysokość jednej zakładki.

   Napis NIE ZNIKA z dokumentu — schodzi z ekranu przez „font-size: 0”,
   więc czytnik ekranu nadal go czyta, a wyszukiwarka nadal widzi.
   „Ukrywanie” przez display:none zabrałoby go obu.

   Zakładki celujemy po WŁASNYCH kluczach („#tab-title-laris-spec”),
   które nadaje inc/karta-uklad.php. Po numerach nadrzędnego celować
   nie wolno: numer zależy od tego, ile zakładek ma dana karta. */
@media (max-width: 767px) {
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 1 1 0;
    min-width: 0;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0;
    font-size: 0;
    line-height: 0;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a::before {
    content: "";
    width: 22px;
    height: 22px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  /* Specyfikacje — kartka z wierszami danych. */
  .woocommerce div.product .woocommerce-tabs ul.tabs li#tab-title-laris-spec a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d343c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M8 13h8M8 17h5'/%3E%3C/svg%3E");
  }

  /* Tabela rozmiarów — linijka. */
  .woocommerce div.product .woocommerce-tabs ul.tabs li#tab-title-laris-rozmiary a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d343c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='10' rx='2'/%3E%3Cpath d='M6 7v4M10 7v3M14 7v4M18 7v3'/%3E%3C/svg%3E");
  }

  /* Załączniki — spinacz. */
  .woocommerce div.product .woocommerce-tabs ul.tabs li#tab-title-laris-zalaczniki a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d343c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.44 11.05 12.25 20.24a5.5 5.5 0 0 1-7.78-7.78l8.49-8.49a3.5 3.5 0 0 1 4.95 4.95l-8.49 8.49a1.5 1.5 0 0 1-2.12-2.12l7.78-7.78'/%3E%3C/svg%3E");
  }

  /* Opinie — dymek. Zakładka bywa włączona, więc rysunek też ma być. */
  .woocommerce div.product .woocommerce-tabs ul.tabs li#tab-title-reviews a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d343c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z'/%3E%3C/svg%3E");
  }

  /* Zakładka otwarta — rysunek w kolorze marki, tak jak podpis na dużym
     ekranie. Osobny plik dla każdego stanu, bo kolor siedzi w SVG. */
  .woocommerce div.product .woocommerce-tabs ul.tabs li.active a::before {
    filter: invert(38%) sepia(74%) saturate(1246%) hue-rotate(170deg) brightness(88%) contrast(92%);
  }
}

/* ── akapity w zakładce: rytm zamiast jednej bryły ──

   Klient o „Specyfikacjach”: „тут текст некрасиво выглядит — сжато
   как-то визуально”.

   Powód jest jednowierszowy: motyw nadrzędny zeruje odstępy KAŻDEMU
   akapitowi w serwisie („p { margin: 0 }”, style.css). W zakładce
   specyfikacji stoi osiem <p> pod rząd — materiał, zasilanie, zalety,
   uwaga, gwarancja, próba izolacji — i wszystkie zlewały się w jeden
   blok tekstu o wysokości 582 px, bez jednej przerwy. Zmierzone:
   „margin-top: 0px, margin-bottom: 0px” na wszystkich ośmiu.

   Odstęp między akapitami odtwarzamy, ale mniejszy od pełnego wiersza —
   to jest specyfikacja, czyli lista faktów, nie proza. Wnętrze akapitu
   (wiersze łamane <br>-ami: częstotliwość, napięcie, regulator) zostaje
   zbite razem i przez to widać, że należy do siebie.

   Szerokość wiersza ograniczona osobno: karta ma 1000 px, a tekst 15 px
   rozciągnięty na całą tę szerokość to ponad 150 znaków w linijce —
   oko gubi początek następnej. Rysunku technicznego i tabeli to nie
   dotyczy, ograniczenie dostają same akapity i listy. */
.woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol {
  max-width: 78ch;
  margin: 0 0 14px;
  line-height: 1.65;
}

.woocommerce div.product .woocommerce-tabs .panel p:last-child,
.woocommerce div.product .woocommerce-tabs .panel ul:last-child,
.woocommerce div.product .woocommerce-tabs .panel ol:last-child {
  margin-bottom: 0;
}

/* Redaktor zostawia w treści puste akapity — same <p></p> bez znaku.
   Przy zerowym marginesie były niewidoczne, po dodaniu odstępu zaczęłyby
   robić dziury nie wiadomo skąd. */
.woocommerce div.product .woocommerce-tabs .panel p:empty {
  display: none;
}

/* Podpisy pól („Materiał:”, „Napięcie zasilania:”) redaktor pisze
   pogrubieniem. Ciemniejszy stopień szarości niż reszta akapitu — wtedy
   wzrok skacze po nazwach pól, a nie czyta wszystkiego po kolei. */
.woocommerce div.product .woocommerce-tabs .panel p strong,
.woocommerce div.product .woocommerce-tabs .panel p b {
  color: var(--l-ink);
  font-weight: 600;
}

/* Tabela rozmiarów i specyfikacja przychodzą z pola ACF, czyli razem
   z tabelą wklejoną przez redaktora. Nadrzędny daje jej ramki #e1e1e1
   i podświetlenie wiersza na jasnozielono (#f0fff4, style.css:1533) —
   zieleń nie występuje w tym motywie nigdzie indziej. */
/* Tabela nie rozciąga się na całą szerokość strony.

   Klient o zakładce „Specyfikacje”: „тут бы как-то сжать по ширине, а то всё
   растянуто”. Zmierzone: panel zakładek ma 1330 px, a tabela specyfikacji
   ma SZEŚĆ wąskich kolumn (odległość między centrami, wysokość, szerokość,
   liczba rur, moc, widok rur) — rozciągnięta na 1330 px daje w każdej
   komórce jedną liczbę i pół ekranu pustego pola wokół niej.

   „width: auto” pozwala tabeli zająć tyle, ile potrzebuje jej treść,
   a „max-width” trzyma ją w panelu. Tabele redaktorskie z długim tekstem
   w komórce urosną do pełnej szerokości tak jak dotąd. */
.woocommerce div.product .woocommerce-tabs .panel table {
  /* Tabela wypełnia kartę zakładki — to KARTA jest węższa, nie tabela.

     Droga do tego: najpierw tabela była rozciągnięta na całą szerokość
     panelu (1278 px) i przy sześciu wąskich kolumnach wyglądała jak
     rozstrzelony wiersz. Zwęziliśmy samą tabelę do 920 px i wyszło gorzej —
     klient: „не нравится, что таблица не на всю ширину”. Bo wtedy w białej
     karcie 1330 px siedziała tabela 920 px i po prawej zostawał pusty pas.

     Teraz węższy jest cały blok zakładek (razem z paskiem nazw), a tabela
     zajmuje go w całości. Krawędzie się zgadzają i nie ma pustego pasa.

     „!important” jest tu potrzebne i to jedyne miejsce, gdzie go używamy
     w tym pliku: tabela przyszła z edytora ze stylem w znaczniku
     („width: 87.3308%; height: 70px”), a stylu w znaczniku nie przebije
     żadna reguła arkusza. Bez tego tabela stała 826 px w karcie 946 px
     i po prawej znów zostawał pusty pas. Wysokość też zdejmujemy — 70 px
     wpisane w znaczniku przy trzech wierszach nic nie znaczy. */
  width: 100% !important;
  height: auto !important;
  margin: 0;
  border: 1px solid var(--l-line);
  border-collapse: collapse;
  font-size: 14px;
}

.woocommerce div.product .woocommerce-tabs .panel table th,
.woocommerce div.product .woocommerce-tabs .panel table td {
  padding: 10px 14px;
  border: 1px solid var(--l-line);
  text-align: left;
  vertical-align: top;
}

.woocommerce div.product .woocommerce-tabs .panel table th {
  background: var(--l-surface-2);
  font-weight: 600;
  color: var(--l-ink);
}

/* Przy tabeli rozmiarów na kilkanaście wierszy oko gubi linię. */
.woocommerce div.product .woocommerce-tabs .panel table tbody tr:nth-child(even) {
  background: var(--l-bg);
}

.woocommerce div.product .woocommerce-tabs .panel table tbody tr:hover {
  background: var(--l-brand-tint);
}

/* Szeroka tabela przewija się WEWNĄTRZ panelu. Inaczej na telefonie
   rozpycha stronę i cała strona jedzie w bok. */
.woocommerce div.product .woocommerce-tabs .panel .dimensions-content,
.woocommerce div.product .woocommerce-tabs .panel .specyfication-content {
  max-width: 100%;
  overflow-x: auto;
}

/* Specyfikacja to tekst plus rysunek techniczny — obok siebie, dopóki
   jest na to miejsce. */
.woocommerce div.product .woocommerce-tabs .panel .specyfication-tab {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.woocommerce div.product .woocommerce-tabs .panel .specyfication-content {
  flex: 1 1 320px;
}

.woocommerce div.product .woocommerce-tabs .panel .specyfication-picture {
  flex: 0 1 340px;
}

.woocommerce div.product .woocommerce-tabs .panel .specyfication-picture img {
  max-width: 100%;
  height: auto;
}

/* Załączniki: każdy plik jako kafelek z ikoną PDF.

   Odstęp ustawia teraz „gap”, i to jest zmiana względem poprzedniej
   wersji tego komentarza. Wcześniej marginesy wpisywał PROSTO W ZNACZNIK
   motyw nadrzędny („style=margin-right:20px…”), więc dokładanie drugiego
   źródła odstępu dawałoby podwójny. Znaczniki tej zakładki wypisuje teraz
   inc/karta-uklad.php (nadrzędna wersja nie domykała <a> i rozsypywała
   dalszą część strony) — i wypisuje je bez stylów w atrybucie. Bez „gap”
   kafelki plików posklejały się bokami; klient: „тут нет отступа
   на файлах”. */
.woocommerce div.product .woocommerce-tabs .panel .row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}

.woocommerce div.product .woocommerce-tabs .panel .attachment-product a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  background: var(--l-bg);
  color: var(--l-ink);
  font-size: 14px;
  font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs .panel .attachment-product a:hover {
  border-color: var(--l-brand);
  color: var(--l-brand-dark);
}

/* ── „Opinie” zdjęte ──

   Życzenie klienta: sklep idzie w B2B, a pod towarami nie ma ani jednej
   opinii — pusta zakładka „Opinie” mówi tylko tyle, że nikt tu nic nie
   kupił. Zakładka i panel razem: sama zakładka zostawiłaby w dokumencie
   formularz oceny, dostępny z klawiatury. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.reviews_tab {
  display: none;
}

/* „!important” wyjątkowo. Panelami przełącza skrypt WooCommerce, wpisując
   „display” PROSTO W ZNACZNIK (style="display:block"), a styl w znaczniku
   bije każdą regułę bez tego dopisku. Bez niego panel wróciłby przy
   wejściu na adres z „#reviews”. */
.woocommerce div.product .woocommerce-tabs #tab-reviews {
  display: none !important;
}

/* Odnośnik „(N opinii)” przy gwiazdkach prowadzi do tej zakładki —
   po jej zdjęciu kliknięcie nie robiłoby nic. */
.woocommerce div.product .woocommerce-product-rating a.woocommerce-review-link {
  display: none;
}

/* tabela atrybutów — najczęściej czytany fragment karty */
.woocommerce div.product .shop_attributes {
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce div.product .shop_attributes th,
.woocommerce div.product .shop_attributes td {
  border: 0;
  border-bottom: 1px solid var(--l-line);
  padding: 11px 16px;
  font-size: 14px;
}

.woocommerce div.product .shop_attributes tr:last-child th,
.woocommerce div.product .shop_attributes tr:last-child td {
  border-bottom: 0;
}

.woocommerce div.product .shop_attributes th {
  background: var(--l-surface-2);
  font-weight: 600;
  color: var(--l-ink);
  width: 42%;
}

/* ═══ telefony ═══ */

@media (max-width: 767px) {
  .woocommerce ul.products {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .woocommerce ul.products li.product {
    padding: 12px;
  }

  /* Kafel ma tu 150–180 px, więc symetryczna wyściółka wiersza ceny nie
     zostawiłaby na samą cenę i pięćdziesięciu pikseli. Na telefonie cena
     idzie więc do lewej, a kółko zostaje w prawym rogu — jeden wiersz,
     bez nachodzenia. */
  .woocommerce ul.products li.product .price {
    justify-content: flex-start;
    min-height: 38px;
    padding: 0 42px 0 0;
    font-size: 18px;
  }

  .woocommerce ul.products li.product .color-amount {
    text-align: left;
  }

  .woocommerce ul.products li.product a.button.add_to_cart_button,
  .woocommerce ul.products li.product a.button.product_type_simple,
  .woocommerce ul.products li.product a.button.ajax_add_to_cart {
    width: 38px;
    height: 38px;
  }
}

/* ═══ listowy dubel karty produktu ═══ */

/* Wtyczka „Gridlist View” dokłada do każdej karty drugi wariant treści
   i chowa go swoim arkuszem. Poza katalogiem ten arkusz zdejmujemy
   (inc/performance.php), więc regułę chowającą dopisujemy sami — klasę
   „laris-lgv-off” stawia na <body> ta sama funkcja, która zdejmuje wtyczkę,
   żeby chowanie i zdejmowanie nigdy się nie rozjechały. */
body.laris-lgv-off .berocket_lgv_additional_data {
  display: none;
}

/* ═══ karta produktu: galeria i cena ═══ */

/* Galeria była złamana: kontener stoi na „display: flex", więc pasek
   miniatur ustawiał się OBOK zdjęcia głównego i rósł w dół bez końca —
   zmierzone 246 × 2583 px przy zdjęciu 380 × 378. Dziesięć miniatur jedna
   pod drugą ciągnęło się przez całą stronę, a samo zdjęcie produktu było
   od nich mniejsze.

   Układamy normalnie: zdjęcie na całą szerokość kolumny, miniatury pod nim
   w rzędzie. */
/* Selektor musi mieć tę samą wagę co nadrzędny: on pisze
   „.woocommerce div.product div.images.woocommerce-product-gallery"
   (style.css) i krótszy zapis mu przegrywa mimo późniejszego arkusza. */
.woocommerce div.product div.images.woocommerce-product-gallery {
  /* TYLKO display. „float" i „width: 48%" zostawiamy nadrzędnemu —
     to one trzymają dwie kolumny: zdjęcia po lewej, opis po prawej.
     Zdjęcie ich zdjęcie rozciągnęło galerię na całą stronę. */
  display: block;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport {
  /* „relative” trzyma strzałki: skrypt karty przenosi je tutaj z końca
     galerii, gdzie kładzie je Flexslider (inc/karta-galeria.php). */
  position: relative;
  width: 100%;
  height: auto;
  margin-bottom: 14px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  overflow: hidden;
  background: var(--l-surface);
}

/* ═══ strzałki przy dużym zdjęciu ═══

   WooCommerce uruchamia Flexslider z „directionNav: false”, więc kadr
   zmieniało się tylko miniaturą albo palcem. Przy dziesięciu zdjęciach
   („Lavina Electro 500×1200”) i miniaturach po 84 px każde kolejne zdjęcie
   wymagało trafienia w kwadracik. Włączamy strzałki filtrem w PHP,
   a ubieramy je tutaj: arkusza Flexslidera w tym motywie nie ma — sprawdzone,
   strzałki weszły jako dwa gołe napisy „Previous” i „Next” pod miniaturami. */
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav,
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: block;
  width: 44px;
  height: 44px;
  border: 1px solid var(--l-line);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .93);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  box-shadow: var(--l-shadow-sm);
  /* Napis „Previous”/„Next” zostaje w znaczniku dla czytnika ekranu,
     ale go nie widać. */
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a.flex-prev {
  left: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M10.4 2.6 5 8l5.4 5.4' fill='none' stroke='%232d343c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a.flex-next {
  right: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.6 2.6 11 8l-5.4 5.4' fill='none' stroke='%232d343c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a:hover {
  background-color: #fff;
  border-color: var(--l-brand);
}

/* Galeria nie zapętla się (opcja WooCommerce), więc na pierwszym i ostatnim
   kadrze jedna strzałka jest martwa. Zostaje widoczna, ale przygaszona —
   inaczej znikałaby i wracała przy każdym przewinięciu. */
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a.flex-disabled {
  opacity: .3;
  pointer-events: none;
}

/* ═══ karuzela zdjęć: kadry OBOK siebie ═══

   Tu leżało powiększenie, na które skarżył się klient („нажимаешь на лупу
   и выходишь — пропадает зум”). Przy pierwszym zdjęciu wszystko działało,
   po zmianie kadru — nic. Zmierzone prawdziwą myszą i po współrzędnych
   kadrów, bo z samego wyglądu nie było tego widać:

     kadry:   x = −1203 dla WSZYSTKICH pięciu, y = 245, 881, 1518, 2154, 2791
     obudowa: width: 638 px (inline, od Flexslidera), transform: −1272 px

   Czyli kadry stały JEDEN POD DRUGIM, a nie w rzędzie: Flexslider wpisał
   obudowie szerokość jednego kadru, więc opływające kadry łamały się do
   kolejnych wierszy. Przy przesunięciu o −1272 px cała kolumna wyjeżdżała
   w lewo za okno — w kadrze nie było już ani zdjęcia, ani niczego, na co
   da się najechać. Stąd „zniknięcie” powiększenia.

   Kadry układamy więc rzędem układem elastycznym: opływanie przestaje mieć
   znaczenie, szerokość obudowy przestaje cokolwiek psuć (dzieci wychodzą
   poza nią i tak), a przewijanie Flexslidera zaczyna działać zgodnie
   z jego własnym przesunięciem. „!important” tylko na szerokości —
   Flexslider wpisuje ją stylem inline i inaczej wygrywa. */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: auto !important;
}

.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image {
  flex: 0 0 auto;
}

/* Miniatury JEDNYM rzędem, z przewijaniem w bok.

   Wcześniej stało tu pięć w rzędzie, czyli przy dwunastu zdjęciach trzy
   rzędy i 275 px wysokości pod kadrem. Wzorzec od klienta
   (work.polarholz-sauna.de) ma jeden rząd 88 px i tyle. Miniatura 78 px
   mieści osiem w kolumnie 638 px, reszta dojeżdża przewinięciem —
   tak samo, jak w tamtym pasku.

   „scroll-snap” jest po to, żeby pasek zatrzymywał się na miniaturze,
   a nie w połowie kadru. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-nav,
.woocommerce div.product div.images.woocommerce-product-gallery ol.flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
  position: static;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  /* Bez widocznego paska przewijania. Klient: „не нравится нижняя полоска
     в слайдере”. Przewijanie zostaje — palcem, kółkiem i klawiszami —
     ale szara szyna pod miniaturami znika. Na szerokim ekranie miniatury
     i tak się mieszczą, a paska nie było po co pokazywać. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery ol.flex-control-thumbs::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Miniatury dzielą całą szerokość kolumny.

   Klient: „миниатюры в слайдере должны быть на всю ширину”. Wcześniej
   każda miała sztywne 78 px i rząd kończył się w połowie kolumny albo —
   przy dziesięciu zdjęciach — wyjeżdżał poza nią i trzeba go było
   przewijać. Teraz kafle dzielą dostępną szerokość po równo:
   „flex: 1 1 0” przy „min-width: 0” pozwala im zejść poniżej własnej
   zawartości, więc rząd zawsze kończy się dokładnie na krawędzi zdjęcia
   głównego, ile by ich nie było. */
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  /* Sufit, bez którego „na całą szerokość” obraca się przeciwko sobie.
     Klient o karcie „Grand z półką”: „миниатюры в слайдере сильно
     большие”. Przy dziesięciu zdjęciach podział całej szerokości daje
     84 px na kafel i wygląda dobrze; przy DWÓCH ten sam podział daje
     po 300 px — miniatura wielkości zdjęcia głównego. Sufit zostawia
     zachowanie „na całą szerokość” tam, gdzie zdjęć jest dużo, i nie
     pozwala urosnąć, gdy jest ich kilka. */
  max-width: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
  scroll-snap-align: start;
}

.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  /* Bez zaokrąglenia — tak samo jak zdjęcia w spisie (components.css).
     Miniatura jest tu jednocześnie kafelkiem i zdjęciem: to na niej siedzi
     obramowanie i podkład, więc ścięte rogi widać wprost na zdjęciu. */
  border-radius: 0;
  padding: 4px;
  cursor: pointer;
  opacity: 1;
  transition: border-color .16s ease;
}

.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img.flex-active,
.woocommerce div.product .woocommerce-product-gallery ol.flex-control-thumbs li img:hover {
  border-color: var(--l-brand);
}

/* Zdjęcie główne całe w kadrze — bez przycinania.

   „:not(.zoomImg)” jest tu konieczne. Powiększenie (jquery.zoom) wkłada do
   kadru DRUGI obrazek — kopię pliku w pełnej wielkości, klasa „zoomImg”,
   ustawioną bezwzględnie i przesuwaną za kursorem. Szerokość i wysokość
   pisze jej sam zoom stylem w znaczniku, więc nasze przegrywają, ale
   „object-fit: contain” zostawało nasze i wpasowywało kopię z powrotem
   w ramkę — czyli kasowało cały sens powiększenia. */
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__image img:not(.zoomImg),
.woocommerce div.product .woocommerce-product-gallery .flex-viewport img:not(.zoomImg) {
  width: 100%;
  /* Wysokość ograniczona, a nie „ile wyjdzie”.

     Klient: „слайдер компактный сделай, как на work.polarholz-sauna.de”.
     Zmierzone tam: kadr główny 568 × 360 i JEDEN rząd miniatur 568 × 88,
     razem 532 px. U nas było 636 × 749 plus dwa rzędy miniatur 638 × 275,
     razem 1037 px — grzejnik to wyrób pionowy, więc zdjęcie w naturalnych
     proporcjach zjadało cały ekran, a opis i przycisk zakupu spadały poniżej
     krawędzi okna.

     „contain” zostaje: wyrób ma być cały w kadrze, a nie przycięty. */
  height: clamp(320px, 34vw, 470px);
  object-fit: contain;
}

/* Cena. W znaczniku <del> stoi PRZED <ins>, ale motyw nadrzędny spycha
   przekreśloną cenę floatem na prawą krawędź kolumny — nowa cena zostawała
   sama po lewej, a stara wisiała kilkaset pikseli dalej i nie czytało się
   ich jako pary. Kładziemy obie obok siebie, nową pierwszą. */
.woocommerce div.product .summary p.price,
.woocommerce div.product .summary .woocs_price_code {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  float: none;
}

/* Stopnie ceny — wydanie drugie.

   Właściciel po obejrzeniu karty na żywo: „ценник очень маленький”. I miał
   rację, mimo że reguła niżej mówiła 30 px. Powód jest w znacznikach:

     <ins><span class="woocommerce-Price-amount"><bdi>216 €</bdi></span></ins>

   Stopień z reguły dostawał <ins>, a KWOTA siedzi w <span> w środku — a ten
   ma własne 18 px z arkusza nadrzędnego, więc niczego nie dziedziczył.
   Zmierzone na żywej karcie przed poprawką: „216 €” renderowało się w 18 px
   przy regule mówiącej 30. Dlatego stopień idzie teraz na <span> i <bdi>,
   nie tylko na <ins>.

   Przy okazji para rozjeżdża się mocniej: 34 px kwota do zapłaty, 17 px
   przekreślona. Przy 30/18 obie czytało się jak jedną liczbę. */
.woocommerce div.product .summary p.price del,
.woocommerce div.product .summary .woocs_price_code del,
.woocommerce div.product .summary p.price del .woocommerce-Price-amount,
.woocommerce div.product .summary p.price del bdi {
  float: none;
  order: 2;
  font-size: 17px;
  font-weight: 400;
  color: var(--l-muted);
}

.woocommerce div.product .summary p.price ins,
.woocommerce div.product .summary .woocs_price_code ins,
.woocommerce div.product .summary p.price ins .woocommerce-Price-amount,
.woocommerce div.product .summary p.price ins bdi,
.woocommerce div.product .summary p.price ins .woocommerce-Price-currencySymbol {
  order: 1;
  text-decoration: none;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--l-err);
}

/* Towar bez przeceny nie ma ani <ins>, ani <del> — kwota leży wprost
   w „woocs_price_code”. Bez tej reguły duża cena byłaby tylko na promocji,
   a na wszystkich pozostałych kartach zostałaby przy 18 px. */
.woocommerce div.product .summary p.price > .woocommerce-Price-amount,
.woocommerce div.product .summary .woocs_price_code > .woocommerce-Price-amount,
.woocommerce div.product .summary .woocs_price_code > .woocommerce-Price-amount bdi,
.woocommerce div.product .summary .woocs_price_code > .woocommerce-Price-amount .woocommerce-Price-currencySymbol {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--l-ink);
}

/* Znak waluty dostaje ten sam stopień, co liczba — inaczej „110 €” wychodzi
   jako duża liczba z drobnym „€” doklejonym u dołu. Nie jest to zamierzony
   zabieg typograficzny, tylko skutek tego, że arkusz nadrzędny trzyma symbol
   w osobnym <span> z własnym stopniem. Przekreślona cena tak samo. */
.woocommerce div.product .summary p.price del .woocommerce-Price-currencySymbol {
  font-size: 17px;
}

/* ═══ warianty na karcie produktu ═══ */

/* Wtyczka „Variation Swatches" nadaje wszystkim próbkom klasę
   „swatch-shape-circle", czyli border-radius: 50%. Dla próbki koloru to
   w porządku — kwadrat 30×30 staje się kółkiem. Ale dla próbki tekstowej
   („500", „1200", „Po lewej") pole jest szerokie i 50% robi z niego elipsę.
   Okrągłe zostają tylko kolory i obrazki. */
/* Selektor złożony (.swatch.swatch-shape-circle.swatch-type-label), bo
   pojedyncza klasa remisuje z wtyczkową „.swatch-shape-circle" i nie wygrywa. */
/* Pełna ścieżka wtyczki plus klasa typu. Wtyczka pisze:
     .woocommerce div.product .cart.variations_form .tawcvs-swatches
       .swatch.swatch-shape-circle { border-radius: 50% !important }
   czyli siedem klas i „!important". Krótsze zapisy — próbowałem trzech —
   przegrywają nawet z własnym „!important”, bo przy dwóch „!important”
   rozstrzyga specyficzność. Dokładamy .swatch-type-label, żeby przebić
   o jedną klasę i NIE ruszyć próbek kolorów, które mają być okrągłe. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle.swatch-type-label,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-shape-circle.swatch-type-button,
.swatch.swatch-type-label,
.swatch.swatch-type-button {
  /* „!important" wyjątkowo i tylko na promieniu. Wtyczka ma 140 KB
     zminifikowanego arkusza z piętnastoma własnymi „!important" i wymusza
     border-radius: 50% mocniej niż da się to przebić selektorem. Elipsa
     z napisem „Po prawej” to nie jest coś, z czym można zostawić sklep. */
  border-radius: var(--l-r-sm) !important;
  /* Wydanie drugie rozmiaru. Klient o tym rzędzie: „кнопки сломаны”.
     Działały — klikanie przestawia wariant, sprawdzone — ale wyglądały jak
     nieskończone: 30 px wysokości, włos ramki i wybrana wartość różniąca
     się od pozostałych jedną cienką kreską w środku. Teraz to pigułki
     wielkości pola formularza, a wybrana ma tło marki, więc widać ją
     z drugiego końca ekranu. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--l-line-strong);
  background: var(--l-surface);
  color: var(--l-ink);
  font-size: 14.5px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.swatch.swatch-type-label:hover,
.swatch.swatch-type-button:hover {
  border-color: var(--l-brand);
  background: var(--l-teal-tint);
}

.swatch.swatch-type-label.selected,
.swatch.swatch-type-button.selected {
  border-color: var(--l-brand);
  background: var(--l-teal-tint);
  color: var(--l-brand-dark);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--l-brand);
}

/* Wartość, której nie da się kupić w tym zestawie, wtyczka oznacza klasą
   „disabled”, ale zostawia ją wyglądającą jak każda inna. */
.swatch.swatch-type-label.disabled,
.swatch.swatch-type-button.disabled {
  border-color: var(--l-line);
  background: var(--l-bg);
  color: var(--l-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Próbka koloru zostaje kółkiem, ale rośnie do rozmiaru pigułki obok
   i dostaje wyraźny pierścień po wybraniu — wcześniej wybrany kolor
   różnił się od niewybranego niczym. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-color {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border: 1px solid var(--l-line-strong);
  box-shadow: none;
}

.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-color.selected {
  border-color: var(--l-brand);
  box-shadow: 0 0 0 3px var(--l-teal-tint), 0 0 0 4px var(--l-brand);
}

/* ── obwódka wyboru wtyczki ──

   Poza samą próbką wtyczka rysuje jeszcze jedną rzecz: „::before” odsunięty
   o 4 px na wszystkie strony, z „border-radius: 50%”. Na próbce koloru to
   pierścień, ale na pigułce tekstowej — ELIPSA szersza od napisu. Zmierzone
   na „Lavina Electro 500×1200”: pigułka „500” ma 62 × 38 px, a obwódka wokół
   niej 66 × 43 px z promieniem 50%, czyli owal narysowany dookoła prostokąta.
   Niewybrane dostają owal szary (#ddd), wybrane FIOLETOWY (#674399) — kolor
   spoza palety serwisu, domyślny w tej wtyczce.

   Przy pigułkach obwódka jest zbędna: wybraną widać po tle i ramce marki.
   Przy okrągłych próbkach zostaje — tam pierścień jest na miejscu — ale
   w kolorze marki. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-type-label::before,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-type-button::before {
  content: none;
}

.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-color::before,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-type-image::before {
  border-color: transparent;
}

.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-color.selected::before,
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-type-image.selected::before {
  border-width: 2px;
  border-color: var(--l-brand);
}

/* ── próbka ze zdjęciem pokrycia ──

   „Pokrycie” to najważniejszy wybór na tej karcie, a wtyczka daje mu
   30 × 30 px BEZ RAMKI. Czarne pokrycie widać, kremowe zlewało się z białym
   tłem karty — dwa kółka, z których jedno wyglądało na puste miejsce.
   Reguły wyżej dotyczą klasy „swatch-color”; zdjęcie ma własną
   („swatch-type-image”) i szło dotąd bez niczego. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch.swatch-type-image {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border: 1px solid var(--l-line-strong);
  background-size: cover;
  background-position: center;
}

/* ── nazwa wybranej wartości ──

   Dopisuje ją skrypt (inc/karta-warianty.php) i tylko przy kółkach, gdzie
   sama próbka nic nie mówi. Stoi pod nazwą cechy, drobniej: „Pokrycie”
   zostaje nagłówkiem wiersza, a „Malowany na czarno” jest odpowiedzią. */
.woocommerce div.product form.cart table.variations .laris-wariant-wartosc {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--l-muted);
}

/* Próbka jest <div>-em, więc własnego pierścienia fokusu nie ma. Po dodaniu
   „tabindex” bez tego widać byłoby tylko, że coś się zmienia po Enterze. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches .swatch:focus-visible {
  outline: 2px solid var(--l-ink);
  outline-offset: 3px;
}

/* ── cecha z jedną jedyną wartością ──

   „Rozstaw przyłączy: 500” i „Wysokość: 1200” mają po jednej wartości —
   to nie wybór, tylko dana o wyrobie, a wyglądały dokładnie jak wiersze
   z prawdziwym wyborem obok. Zostają w tym samym miejscu i dalej dają się
   kliknąć (po „Wyczyść” trzeba je czymś przywrócić), ale wyglądają na to,
   czym są: na wartość, nie na przycisk. */
.woocommerce div.product .cart.variations_form .tawcvs-swatches:has(> .swatch-item-wrapper:only-child) .swatch,
.woocommerce div.product .cart.variations_form .tawcvs-swatches:has(> .swatch-item-wrapper:only-child) .swatch.selected {
  border-color: var(--l-line);
  background: var(--l-bg);
  color: var(--l-ink);
  box-shadow: none;
  cursor: default;
}

/* Tabela wariantów. Nadrzędny motyw daje nagłówkowi 330 px i wyrównanie
   do środka — między nazwą cechy a jej wartościami robiła się przepaść
   na pół kolumny. Kładziemy nazwę i wartości obok siebie, do lewej. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr {
  display: block;
  width: 100%;
  margin: 0;
}

.woocommerce div.product form.cart table.variations tr {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--l-line);
}

.woocommerce div.product form.cart table.variations th.label {
  display: block;
  width: 190px;
  min-width: 190px;
  padding: 0;
  text-align: left;
  font-weight: 600;
  font-size: 14px;
  color: var(--l-ink);
}

.woocommerce div.product form.cart table.variations td.value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: auto;
  flex: 1;
  padding: 0;
}

@media (max-width: 767px) {
  .woocommerce div.product form.cart table.variations th.label {
    width: 100%;
    min-width: 0;
  }
}

/* ═══ filtry: porządek w kolumnie ═══

   Kolumna filtrów miała 2686 px wysokości — dziewięć grup, wszystkie
   rozwinięte, a każda pozycja w osobnym wierszu. Sama „Szerokość [mm]”
   zajmowała 545 px na jedenaście liczb. Obok stała siatka towarów niższa
   od tego o połowę. Klient: „tut w ogóle chaos”.

   Nie ruszamy zwijania wtyczki (ma własne, ze stanem) — porządkujemy to,
   co realnie zjada wysokość: układ list i ramy grup. */

/* Każda grupa jako osobna karta — widać, gdzie kończy się jedna,
   a zaczyna druga. Wcześniej wszystkie zlewały się w jeden słupek. */
.woof .woof_container {
  margin: 0 0 14px;
  padding: 16px 18px;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

.woof .woof_container .woof_container_inner > h4,
.woof .woof_container h4 {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--l-line);
  font-size: 14.5px;
}

/* Strzałka zwijania wtyczki to <img> wstawiony w nagłówek — ustawiamy ją
   po prawej, żeby nie rozpychała napisu i była w jednym miejscu w każdej
   grupie. Samego działania nie dotykamy. */
.woof .woof_container h4 .woof_front_toggle {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 1;
}

.woof .woof_container h4 .woof_front_toggle img {
  width: 13px;
  height: auto;
  opacity: .5;
}

/* Sedno: listy w dwóch kolumnach zamiast jednej.

   Wartości są krótkie — same liczby („500”, „600”, „1200”) — więc wiersz
   po jednej pozycji marnował trzy czwarte szerokości. Dwie kolumny tną
   wysokość każdej grupy o połowę, a przy bardzo długich listach dokłada
   się własny pasek przewijania: lepiej przewinąć dziesięć pozycji niż
   przewijać całą stronę przez jedną grupę. */
.woof .woof_container_radio ul,
.woof .woof_container_checkbox ul,
.woof .woof_list_radio,
.woof .woof_list_checkbox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  max-height: 250px;
  overflow-y: auto;
}

.woof .woof_container_radio ul li,
.woof .woof_container_checkbox ul li,
.woof .woof_list_radio li,
.woof .woof_list_checkbox li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 3px 0;
  width: auto;
  float: none;
  list-style: none;
}

.woof .woof_container label {
  margin: 0;
  line-height: 1.3;
}

/* Pasek przewijania w grupie — cienki i cichy, żeby nie udawał treści. */
.woof .woof_container_radio ul::-webkit-scrollbar,
.woof .woof_container_checkbox ul::-webkit-scrollbar {
  width: 6px;
}

.woof .woof_container_radio ul::-webkit-scrollbar-thumb,
.woof .woof_container_checkbox ul::-webkit-scrollbar-thumb {
  background: var(--l-line-strong);
  border-radius: 3px;
}

/* Szukanie po symbolu i suwaki — wyrównane do reszty pól w serwisie. */
.woof .woof_sku_search_container input[type="text"],
.woof .woof_container input[type="text"],
.woof .woof_container input[type="number"] {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--l-line-strong);
  border-radius: var(--l-r-field);
  font-size: 14px;
}

/* ═══ pole szukania po symbolu (SKU) ═══

   Klient: „pojawia się lupa, krzyżyk, a przy naciśnięciu wyszukiwarka
   jest u mnie zielona. Nie podoba mi się, jak wygląda ten wyszukiwarz”.

   Powód jest prostszy, niż wygląda: pole ma type="search", a wszystkie
   reguły pól — i nadrzędne (style.css:17), i nasze wiersz wyżej —
   celują w input[type="text"]. Pole zostawało więc SYSTEMOWE: bez naszej
   ramki, bez wysokości pozostałych pól i z krzyżykiem kasowania, którego
   dorysowuje sama przeglądarka.

   Robimy z niego pole formularza takie samo jak reszta serwisu (42 px,
   --l-line, --l-r, 14 px pisma), a lupę — przyciskiem w kolorze marki
   przy prawej krawędzi pola. Ikona rysowana data-URI, jak strzałki galerii
   i ikony przełącznika widoku wyżej w tym pliku: nie dokłada zapytania
   do serwera i barwi się razem z tłem przycisku.

   Fokusu nie ruszamy — pierścień daje wspólna reguła „:focus-visible”
   z design-system.css i to ona ma zostać jedyna. */
.woof .woof_show_sku_search_container {
  position: relative;
}

.woof .woof_sku_search_container input.woof_show_sku_search,
.woof input[type="search"].woof_show_sku_search {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  margin: 0;
  /* Z prawej miejsce na przycisk lupy, żeby napis nie wchodził pod niego. */
  padding: 0 52px 0 14px;
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
  background: var(--l-surface);
  font-family: var(--l-font-body);
  font-size: 14px;
  color: var(--l-ink);
  /* Bez tego Safari rysuje polom szukania własną, owalną ramkę. */
  -webkit-appearance: none;
  appearance: none;
}

.woof .woof_sku_search_container input.woof_show_sku_search:hover {
  border-color: var(--l-brand);
}

/* Krzyżyk kasowania rysuje SAMA przeglądarka (Chrome, Safari) i nie da się
   go ubrać ani przesunąć — stoi dokładnie tam, gdzie nasz przycisk lupy,
   więc w polu były dwa znaki obok siebie. Zdejmujemy go; treść pola kasuje
   się klawiszem, a cały filtr — przyciskiem „Wyczyść filtr”. */
.woof input[type="search"]::-webkit-search-cancel-button,
.woof input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  display: none;
}

.woof .woof_show_sku_search_container a.woof_sku_search_go {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: block;
  width: 34px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--l-r-sm);
  background-color: var(--l-brand-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='m10.6 10.6 3.2 3.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  /* Gdyby wtyczka wpisała do środka podpis — nie ma go zasłaniać ikoną. */
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color .16s ease;
}

/* Gdyby wtyczka rysowała swoją lupę pseudoelementem (ikona z fontu),
   stałyby dwie naraz — nasza i jej. */
.woof .woof_show_sku_search_container a.woof_sku_search_go::before,
.woof .woof_show_sku_search_container a.woof_sku_search_go::after {
  content: none;
}

.woof .woof_show_sku_search_container a.woof_sku_search_go:hover {
  background-color: var(--l-brand-deep);
}

/* ═══ „Wyczyść filtr”: najechanie bez pomarańczu ═══

   Klient: „niewygodne”. Pomarańcz #f08200 jest w tym motywie kolorem
   wezwania B2B, a to przycisk COFAJĄCY wybór — pod kursorem krzyczał
   mocniej niż samo filtrowanie.

   Pomarańcz brał się z dwóch reguł nadrzędnych naraz: „button.button:hover
   { border: 1px solid #f08200!important; background-color: #f08200 }”
   (style.css:270–277) oraz rozrastającego się „:before” (style.css:240) —
   tej samej podkładki, która psuła przyciski na karcie towaru.
   „!important” powtarzamy TYLKO na ramce i tylko dlatego, że nadrzędny
   sam go tam postawił. */
.woof .woof_reset_search_form,
.woof button.woof_reset_search_form,
.woocommerce .woof .button.woof_reset_search_form {
  width: 100%;
  margin-top: 8px;
  padding: 10px 18px;
  border: 1px solid var(--l-line-strong);
  background-color: transparent;
  color: var(--l-ink-soft);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.woof .woof_reset_search_form::before,
.woof button.woof_reset_search_form::before {
  content: none;
}

.woof .woof_reset_search_form:hover,
.woof button.woof_reset_search_form:hover,
.woocommerce .woof .button.woof_reset_search_form:hover {
  border-color: var(--l-brand) !important;
  background-color: var(--l-brand-tint);
  color: var(--l-brand-dark);
}

/* Przycisk filtrowania — jedno wyraźne działanie na dole kolumny. */
.woof .woof_submit_search_form,
.woof input[type="submit"],
.woof button.woof_submit_search_form {
  width: 100%;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--l-r-btn);
  background: var(--l-brand);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.woof .woof_submit_search_form:hover,
.woof button.woof_submit_search_form:hover {
  background: var(--l-brand-dark);
}

/* Poniżej 992 px kolumna filtrów staje nad siatką towarów. Jedna kolumna
   list byłaby tam znowu słupkiem na pół ekranu — dajemy im więcej kolumn,
   bo szerokości jest wtedy pod dostatkiem. */
@media (max-width: 991px) {
  .woof .woof_container_radio ul,
  .woof .woof_container_checkbox ul,
  .woof .woof_list_radio,
  .woof .woof_list_checkbox {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    max-height: none;
  }
}

/* Puste odstępy wewnątrz grupy — to one robiły z kolumny filtrów słupek
   dłuższy od siatki towarów.

   Zmierzone na żywej stronie: grupa „Szerokość [mm]” miała 399 px, z czego
   sama lista 197. Reszta to WYŚCIÓŁKA wtyczki: „woof_container_inner”
   dostaje od niej padding-top 85 px (miejsce pod nakładkę ładowania,
   która i tak jest pozycjonowana bezwzględnie), a nagłówek jeszcze 20.
   Sto dwadzieścia pikseli pustki razy dziewięć grup.

   Uwaga na przyszłość: to PADDING, nie margines. Pierwsze podejście zerowało
   marginesy i nie zmieniło ani piksela. */
.woof .woof_container .woof_container_inner {
  padding: 0;
  /* I szare tło wtyczki (#f3f3f3, style.css:1731). Każda grupa filtrów jest
     u nas białą kartą, więc to tło rysowało w środku karty drugi, szary
     prostokąt — klient: „фоны … не нравится”. */
  background-color: transparent;
}

/* Wyściółkę listy wtyczka też podaje osobno („padding-left: 20px”,
   style.css:1739) i przy zdjętym szarym tle wyglądała jak przypadkowe
   wcięcie pierwszej kolumny. */
.woof .woof_container .woof_container_inner ul,
.woof .woof_price_filter .woof_container_inner,
.woof .woof_container_slider .woof_container_inner {
  padding-left: 0;
}

/* ═══ „Seria”: jedna kolumna, nie dwie ═══

   Dwie kolumny są dobre dla samych liczb, ale nazwy kategorii mają do
   26 znaków („Akcesoria do łazienki”, „Siedziska prysznicowe”) i w kolumnie
   129 px łamały się na dwie linijki, a strzałka rozwijania podlistków
   wisiała obok złamanego napisu. Ta grupa dostaje więc pełną szerokość. */
.woof .woof_container_product_cat .woof_container_inner ul,
.woof .woof_container_product_cat .woof_list_radio,
.woof .woof_container_product_cat .woof_list_checkbox {
  grid-template-columns: minmax(0, 1fr);
}

/* Podlistki kategorii są zagnieżdżone W POZYCJI listy, a pozycja jest
   wierszem („display: flex”). Bez tych dwóch reguł podlistek stawał się
   drugą siatką wewnątrz wiersza — 123 px na całą gałąź, czyli „Boston
   elektryczne” ucięte do „Bo el” z własnym poziomym suwakiem. */
.woof .woof_container li.woof_childs_list_li {
  flex-wrap: wrap;
}

.woof .woof_container .woof_childs_list {
  display: block;
  flex: 0 0 100%;
  max-height: none;
  overflow: visible;
  margin: 2px 0 0;
  padding-left: 22px;
}

.woof .woof_block_html_items {
  margin: 0;
}

.woof .woof_container h4 {
  padding-top: 0;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.woof .woof_container_radio ul,
.woof .woof_container_checkbox ul {
  max-height: 220px;
}

/* ═══ „Seria”: cała lista od razu ═══

   Klient prosi, żeby ta grupa była rozwinięta bez dodatkowych ruchów.
   Ma siedemnaście wartości (Alfa, Astor, Atlant, Boston…), a listy filtrów
   mają wyżej w tym pliku sufit wysokości z własnym przewijaniem. Przy
   najczęściej używanym filtrze wychodziło z tego przewijanie WEWNĄTRZ
   przewijanej strony — i połowa serii niewidoczna.

   Sufit zdejmujemy tylko tej jednej grupie. W pozostałych („Szerokość”,
   „Moc”) zostaje: to on trzyma kolumnę filtrów krótszą od siatki towarów,
   czyli naprawia dokładnie to, o co klient prosił poprzednio.

   Dwa człony klas („.woof_container.woof_container_seriaseriesserie”),
   a nie jeden: sufit stoi na „.woof .woof_container_checkbox ul”, czyli
   na tej samej wadze i na TYM SAMYM elemencie — przy remisie decydowałaby
   kolejność w pliku. Jedna klasa więcej rozstrzyga spór niezależnie od
   tego, gdzie te reguły kiedyś trafią. Ostatni wiersz to zapas na wypadek,
   gdyby wtyczka przeniosła klasę grupy na inny element niż „woof_container”. */
.woof .woof_container.woof_container_seriaseriesserie ul,
.woof .woof_container.woof_container_seriaseriesserie .woof_list_radio,
.woof .woof_container.woof_container_seriaseriesserie .woof_list_checkbox,
.woof .woof_container_seriaseriesserie .woof_container_inner ul {
  max-height: none;
  overflow: visible;
}


/* ═══ „nie znaleziono produktów” ═══

   Znacznik: inc/brak-wynikow.php. Karta stoi na środku kolumny wyników
   i ma wysokość, bo przy pustej liście cała kolumna jest pusta — sam pas
   tekstu wyglądał jak usterka strony, nie jak odpowiedź. */
.laris-pusto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 340px;
  margin: 0 0 24px;
  padding: 40px 24px;
  text-align: center;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

.laris-pusto-znak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--l-bg);
  color: var(--l-teal-dark);
}

.laris-pusto-tytul {
  margin: 0;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
}

.laris-pusto-tekst {
  margin: 0;
  max-width: 46ch;
  font-size: 15.5px;
  color: var(--l-ink-soft);
}

.laris-pusto-rada {
  margin: 0;
  max-width: 52ch;
  font-size: 14px;
  color: var(--l-muted);
}

.laris-pusto-dzialania {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 14px;
}

.laris-pusto-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 22px;
  border: 1px solid var(--l-brand);
  border-radius: var(--l-r-btn);
  background: var(--l-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  transition: background-color .16s ease, color .16s ease;
}

.laris-pusto-btn:hover {
  background: var(--l-brand-dark);
  border-color: var(--l-brand-dark);
  color: #fff;
}

.laris-pusto-btn--obwiedziony {
  background: transparent;
  color: var(--l-brand-dark);
}

.laris-pusto-btn--obwiedziony:hover {
  background: var(--l-brand);
  color: #fff;
}

/* Trzecie wyjście jest podpisem, nie przyciskiem: dwa przyciski obok
   siebie już się biją o uwagę, a to jest oferta, nie następny krok. */
.laris-pusto-link {
  flex: 0 0 100%;
  color: var(--l-teal-dark);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.laris-pusto-link:hover {
  color: var(--l-brand-dark);
}

/* ═══ siatka towarów: odstępy ═══

   WooCommerce układa kafle na float-ach i rozstawia je marginesami: 37,6 px
   w prawo i 44,9 px w dół (zmierzone na żywej stronie). Przy kafelku 304 px
   szerokości to odstęp wielkości jednej trzeciej towaru — klient: „odstępy
   między kartami ogromne”.

   Siatka zamiast float-ów: jeden odstęp w obu kierunkach, kolumny liczą się
   same od szerokości dostępnego miejsca. „auto-fill” z progiem 232 px daje
   trzy kolumny w katalogu z belką filtrów i cztery bez niej. */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

/* Selektor z „[class*=columns-]”, a nie samo „ul.products li.product”.

   WooCommerce ustawia szerokość kafla procentem pod liczbę kolumn:
   „ul.products.columns-3 li.product { width: 30.75% }”. To selektor
   bardziej szczegółowy od naszego, więc „width: auto” przegrywało — kafel
   dostawał 30,75% szerokości KOMÓRKI siatki, czyli 72 px zamiast 234.
   Atrybut daje tę samą szczegółowość, a nasz arkusz idzie później. */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce ul.products li.product {
  width: auto;
  /* „!important” tylko tutaj i tylko dlatego, że inaczej się nie da.

     Klient dwa razy: „отступы сильно большие между карточек”, potem
     „отступ между рядами не уменьшил”. Odstęp między rzędami wynosił
     42 px przy zadanych 12 — zmierzone na 414 px w „Podobnych
     produktach”: rząd pierwszy kończył się na 3160, drugi zaczynał
     na 3202.

     Brakujące 30 px to margines kafla z motywu nadrzędnego, wpisany
     jako „.woocommerce ul.products li.product { margin-bottom: 30px
     !important }” (style.css). Reguła z „!important” przegrywa wyłącznie
     z inną „!important” o nie mniejszej szczegółowości — samo wydłużanie
     selektora nic tu nie daje. Nasze „margin: 0” bez tego było martwe
     na wszystkich siatkach naraz: i w katalogu, i w karuzelach strony
     głównej, i w „Podobnych produktach”.

     Odstęp rzędów należy do SIATKI („gap”), a nie do kafla — dzięki temu
     jest jeden i widać go w jednym miejscu. */
  margin: 0 !important;
  float: none;
  clear: none;
  /* Wyściółka też schudła: 16/16/26 zostawiało pod przyciskiem pustą
     szufladę wysokości wiersza tekstu. Dół równa się teraz odsunięciu
     kółka koszyka (components.css), więc koło i wiersz ceny kończą się
     w tej samej linii. */
  padding: 12px;
}

/* ═══ zwarty nagłówek kategorii ═══

   Zastąpił baner na całą szerokość, który brał obrazek z jednego pola ACF,
   więc nad KAŻDĄ kategorią wisiało to samo zdjęcie wysokie na 273 px.
   Spychało pierwszy towar poniżej krawędzi ekranu i nie mówiło nic o tym,
   gdzie kupujący jest. */
.laris-kat-naglowek {
  padding: 22px 0;
  background: var(--l-bg);
  border-bottom: 1px solid var(--l-line);
}

.laris-kat-inner {
  display: flex;
  align-items: center;
  gap: 18px;
}

.laris-kat-foto {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  overflow: hidden;
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--l-r);
}

.laris-kat-foto img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.laris-kat-tekst {
  min-width: 0;
}

.laris-kat-nazwa {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.15;
}

.laris-kat-ile {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--l-muted);
}

.laris-kat-opis {
  margin: 6px 0 0;
  max-width: 70ch;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--l-ink-soft);
}

/* ═══ stronicowanie ═══ */

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 26px 0 0;
  padding: 0;
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
  margin: 0;
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: block;
  min-width: 40px;
  padding: 9px 12px;
  border: 1px solid var(--l-line-strong);
  border-radius: var(--l-r-sm);
  background: var(--l-surface);
  color: var(--l-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  border-color: var(--l-brand);
  color: var(--l-brand-dark);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--l-brand);
  border-color: var(--l-brand);
  color: #fff;
}

/* Opakowanie przełącznika widoku (wtyczka „berocket_lgv”).

   „position: static” obowiązkowo: u wtyczki jest ono POZYCJONOWANE
   BEZWZGLĘDNIE, więc leżało nad siatką niezależnie od tego, co zrobimy
   z opływaniem — to był właściwy powód nachodzenia, a nie float. Sam wygląd
   przełącznika stoi wyżej, przy pasku nad siatką. */
.woocommerce .widget_berocket_lgv_widget {
  position: static;
  display: flex;
  align-items: center;
  float: none;
}

.woocommerce ul.products {
  clear: both;
}

/* Miniatura ma oddychać. „contain” niczego nie ucina, ale bez wyściółki
   towar dotykał krawędzi kafla i przy jasnych zdjęciach zlewał się z nią. */
.woocommerce ul.products li.product .archive-gallery-slider {
  padding: 6px;
}

/* ═══ jasnoszare tło pod zdjęciem towaru ═══

   Tak samo jak na shop.laris.ua — i tam, i tutaj same PLIKI zostają na białym.
   Sprawdzone: zdjęcia referencji mają rogi (255, 255, 255), a szare jest
   dopiero pole pod nimi — `.ty-grid-list__image` w kolorze rgb(245, 247, 249),
   czyli dokładnie naszym --l-bg. Robi to jedna właściwość: „mix-blend-mode:
   multiply” na obrazie.

   Dlaczego tak, a nie przez przerobienie plików: przy mnożeniu biel pliku
   (255) razy tło (245) daje równo tło, a sam towar ciemnieje o 4% — czyli
   wychodzi to samo, co zdjęcie zrobione na szarym kartonie. Przerabianie
   plików musiałoby ODRÓŻNIĆ tło od towaru, a tego nie da się zrobić
   automatycznie: na osiemnastu zmierzonych kartach osiem towarów jest
   BIAŁYCH albo chromowanych (jasność 213–234 przy tle 255), więc każde
   „zamień biel na szare” zjadałoby połowę wyrobu razem z tłem.

   Tło kładziemy na wszystkich trzech warstwach karuzeli, nie tylko na
   zewnętrznej: slick nadaje torowi „transform”, a to zakłada nowy kontekst
   składania — mieszanie widziałoby wtedy przezroczystość zamiast szarości. */

.woocommerce ul.products li.product .archive-gallery-slider,
.woocommerce ul.products li.product .archive-gallery-slider .slick-list,
.woocommerce ul.products li.product .archive-gallery-slider .slick-track {
  background-color: var(--l-bg);
}

.woocommerce ul.products li.product .archive-gallery-slider img,
.woocommerce ul.products li.product img.wp-post-image {
  mix-blend-mode: multiply;
  background-color: transparent;
}

/* To samo na karcie towaru: zdjęcie główne i miniatury. */
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .flex-viewport,
.woocommerce div.product div.images figure {
  background-color: var(--l-bg);
}

/* Znowu „:not(.zoomImg)”, i tym razem chodzi o szybkość. Kopia
   powiększenia to kilka megapikseli, która przesuwa się za każdym ruchem
   myszy; mieszanie „multiply” każe przeglądarce przeliczać ją przy każdej
   klatce ruchu. Sam kadr ma zostać na szarym tle — kopia niczego takiego
   nie potrzebuje, bo zakrywa kadr w całości. */
.woocommerce div.product div.images .woocommerce-product-gallery__image img:not(.zoomImg) {
  mix-blend-mode: multiply;
  background-color: transparent;
}

/* Wyrób na środku kafelka.

   Pola boczne w plikach bywają nierówne — u „Atlant Electro 500×700” to 9%
   z lewej i 20% z prawej, czyli wyrób stoi 5,5% szerokości obok środka.
   inc/karta-kadr.php liczy tę różnicę raz na załącznik i podaje ją tutaj
   zmienną; obraz przesuwamy, pliku nie ruszamy. Przesunięcie, a nie
   skalowanie — na ostrości nic nie tracimy. */
.woocommerce ul.products li.product .archive-gallery-slider {
  overflow: hidden;
}

.woocommerce ul.products li.product .archive-gallery-slider img {
  transform: translateX(var(--laris-kadr, 0));
}