/*
 * dobre.audio — product-listing-tweaks.css
 * Poprawki wizualne na listach produktów (kategorie, strona główna,
 * wyniki wyszukiwania, "Sekcje produktowe"). Ładowany globalnie.
 */

/* Komunikat modułu historii cen (Omnibus, klasa gm_omniprice) na listach
   produktów — sprawdzone na żywo: domyślnie 16px, WIĘKSZY niż sama cena
   (13.6px), przez co dominował wizualnie i wyglądał nieproporcjonalnie
   duży. Scoped tylko do .product-miniature (listy) — NIE dotyka wyglądu
   na karcie pojedynczego produktu. Rozmiar czcionki teraz sterowany z
   panelu (patrz inline <style> wstrzykiwany przez PHP) — tu zostaje tylko
   kolor i wyrównanie.
   padding-left:0 — sprawdzone na żywo: domyślny padding (5px) z modułu
   powodował że tekst zaczynał się WYRAŹNIE dalej w prawo niż cena nad nim
   i przekreślona cena pod nim, mimo że sam element miał tę samą lewą
   krawędź — "nieidealne wyrównanie" które zgłosił użytkownik.
   margin-top:-9px — sprawdzone i potwierdzone na żywo (kilka iteracji z
   bezpośrednim podglądem): domyślne 5px+5px z modułu dawały zbyt duży
   odstęp między przekreśloną ceną a naszym tekstem. -9px daje odstęp
   ~0.5px — tekst tuż pod ceną, bez nachodzenia na nią. */
.product-miniature .gm_omniprice {
  line-height: 1.3 !important;
  color: #888 !important;
  padding-left: 0 !important;
  margin-top: -9px !important;
  padding-top: 0 !important;
}

/* ---------------------------------------------------------------------
   Karta produktu na listingu — usunięcie selektora ilości (+/-), przycisk
   "Dodaj do koszyka" obok ceny, większa cena. Zgłoszenie użytkownika,
   wrzesień 2026: przetestowane najpierw na żywo w Chrome (podgląd przez
   wstrzyknięty <style>+JS przestawiający elementy w DOM), zaakceptowane
   wizualnie, a NASTĘPNIE PRZEPISANE na czysty CSS (bez żadnej manipulacji
   DOM w JS) z jednego konkretnego powodu:

   JS-owe przestawianie elementów (przenoszenie ceny i przycisku do
   wspólnego wrappera) uruchamia się dopiero PO wstępnym wyrenderowaniu
   strony przez przeglądarkę — czyli użytkownik widziałby na ułamek
   sekundy STARY układ (selektor ilości, przycisk gdzie indziej), a
   dopiero potem JS przestawiałby wszystko na nowy układ. To tzw. FOUC
   (flash of unstyled content) / migotanie układu — tym bardziej
   zauważalne na wolniejszych urządzeniach/połączeniach. Czysty CSS (jak
   poniżej) jest stosowany przez przeglądarkę RAZEM z pierwszym
   renderowaniem strony (arkusz ładowany w <head>, tak jak reszta plików
   tego modułu) — więc nie ma żadnego "przeskoku", strona wygląda
   docelowo od razu, tak samo jak przy zwykłej zmianie CSS w innych
   miejscach tego modułu (np. subcategory-thumbnails.css).

   Mechanizm (bez przenoszenia niczego w DOM):
   Oryginalna struktura kafelka produktu (potwierdzona na żywo):
     .product-miniature__bottom
       .product-miniature__infos       (tytuł, cena, opinie — własny grid)
       .product-miniature__actions     (formularz: selektor ilości +
                                         przycisk „Dodaj do koszyka" —
                                         ALBO, dla produktów niedostępnych,
                                         sam link „Zobacz szczegóły")
   Zamieniamy ".product-miniature__bottom" w grid o 2 kolumnach (treść |
   akcja) i "rozpuszczamy" ".product-miniature__infos" przez
   "display:contents" — dzięki temu jego dzieci (tytuł/cena/opinie) stają
   się BEZPOŚREDNIMI elementami tego grida i można im przypisać
   grid-column/grid-row tak, jakby zawsze były w jednym wspólnym gridzie
   z przyciskiem — bez przenoszenia ani jednego węzła w JS.
   grid-template-rows: auto 38px auto — środkowy wiersz (cena/przycisk) ma
   wymuszoną minimalną wysokość 38px (wysokość przycisku) NIEZALEŻNIE od
   tego, czy w danym kafelku przycisk w ogóle istnieje (produkt
   niedostępny go nie ma) — bez tego wiersz z samą ceną (bez przycisku)
   wychodził niższy niż wiersz z ceną+przyciskiem, i ceny w tym samym
   rzędzie siatki produktów nie były już co do piksela wyrównane w
   poziomie (zauważone i poprawione na żywo).
   :has(.product-miniature__details) — nowoczesny selektor CSS (dobrze
   wspierany we wszystkich aktualnych przeglądarkach na 2026 rok) — chowa
   ".product-miniature__actions" TYLKO gdy w środku jest link „Zobacz
   szczegóły" (produkt niedostępny), NIE dotyka go, gdy w środku jest
   prawdziwy formularz z przyciskiem „Dodaj do koszyka".
   :not(.ps-specials *) — świadomie WYŁĄCZONE z tych wszystkich reguł:
   karuzela "Oferty specjalne" na stronie głównej (natywny moduł PrestaShop
   "ps_specials", renderowany w "<section class="ps-specials">") — użytkownik
   sprawdził to na żywo i zdecydował, że tam ma zostać jak było (pełny
   przycisk z tekstem, widoczne "Zobacz szczegóły").

   WAŻNE — poprawka po zgłoszeniu użytkownika ("przy ofertach specjalnych
   miga"): pierwsza wersja tego wykluczenia była oparta o klasę
   ".dobre-audio-deal-rows-inner" — ale ta klasa/wrapper karuzeli jest
   DODAWANA DOPIERO PRZEZ JS (skrypt przerabiający sekcję "Oferty specjalne"
   na przewijaną karuzelę) i nie istnieje w ogóle w surowym HTML z serwera
   (sprawdzone bezpośrednio: fetch() na URL strony, brak tego stringa w
   odpowiedzi). Efekt: przy pierwszym renderowaniu strony (zanim ten JS
   zdąży się uruchomić) kafelki w tej sekcji NIE były jeszcze wykluczone,
   więc nasz CSS się do nich stosował (zmieniony układ) — a UŁAMEK SEKUNDY
   później, gdy JS dokańczał budowę karuzeli i owijał je w
   ".dobre-audio-deal-rows-inner", nasze reguły przestawały pasować i
   kafelki WRACAŁY do oryginalnego wyglądu — czyli dokładnie ten sam rodzaj
   migotania (FOUC), któremu miało zapobiec przejście z JS-owego
   przestawiania DOM na czysty CSS. Naprawione przez oparcie wykluczenia o
   ".ps-specials" — to natywna, serwerowa klasa sekcji (obecna w HTML od
   samego początku, wygenerowana przez PHP modułu ps_specials, a nie przez
   żaden JS), więc wykluczenie działa od pierwszej klatki renderowania,
   bez żadnego opóźnienia i bez migotania.

   POPRAWKA 2026-09-30, v1 (zgłoszenie: "na pewnym etapie usuwaliśmy
   przycisk zmiany ilości z listingu, ale chyba coś poszło za daleko, bo
   zmiany ilości nie ma też w koszyku"): reguła ".quantity-button.js-
   quantity-button:not(.ps-specials *)" NIE BYŁA w ogóle ograniczona do
   kafelków listingu — klasy "quantity-button"/"js-quantity-button" to
   generyczne nazwy komponentu steppera ilości, używane przez motyw
   RÓWNIEŻ w linii produktu w koszyku (".product-line__quantity-button.
   quantity-button.js-quantity-button") i na karcie pojedynczego produktu
   (".product-actions__quantity.product__quantity.quantity-button.
   js-quantity-button"). Koszyk nie jest wewnątrz ".ps-specials", więc
   wykluczenie go nie chroniło.

   POPRAWKA 2026-09-30, v2 (doprecyzowanie użytkownika: "ukryte mają być
   wszędzie poza koszykiem, zmiana ilości ma być dostępna tylko na etapie
   koszyka" — w tym też w "Ofertach specjalnych", które we wcześniejszych
   gotchach #16/#17 były świadomie wyłączone z INNYCH reguł tego pliku,
   ale użytkownik potwierdził, że stepper ilości ma zniknąć i stamtąd):
   v1 (prefiks ".product-miniature") był za wąski — ukrywał tylko na
   listingu, ale NIE na karcie pojedynczego produktu (tam stepper ma
   klasę ".product-actions__quantity", nie jest wewnątrz ".product-
   miniature"). Docelowa logika jest odwrotna do poprzedniej: zamiast
   "ukryj wszędzie poza jednym wyjątkiem (.ps-specials)", teraz "ukryj
   wszędzie poza jednym wyjątkiem (koszyk)". Selektor oparty o własną,
   unikalną klasę BEM linii koszyka (".product-line__quantity-button" —
   dodawana TYLKO do steppera w ".cart__item.js-cart-item", potwierdzone
   na żywo), zamiast o kontekst nadrzędny — prostsze i równie bezpieczne,
   bo to jedyne miejsce w motywie z tą klasą.
   Zweryfikowane na żywo (element.matches(selektor)) w czterech
   kontekstach: listing kategorii (nadal ukryty), karta pojedynczego
   produktu (nowo ukryty), "Oferty specjalne" na stronie głównej (nowo
   ukryty), linia produktu w koszyku (jedyne miejsce, gdzie ZOSTAJE
   widoczny).
   --------------------------------------------------------------------- */

.quantity-button.js-quantity-button:not(.product-line__quantity-button) {
  display: none !important;
}

.product-miniature__add-text:not(.ps-specials *) {
  display: none !important;
}

.product-miniature__bottom:not(.ps-specials *) {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto 38px auto !important;
  row-gap: 8px !important;
  column-gap: 8px !important;
  align-items: start !important;
}

.product-miniature__infos:not(.ps-specials *) {
  display: contents !important;
}

.product-miniature__title:not(.ps-specials *) {
  /* grid-column: 1 / -1 (nie samo "1") — sprawdzone na żywo, wrzesień 2026,
     zgłoszenie użytkownika: "niektóre [nazwy] mają uciętą nazwę pomimo że
     jest miejsce na kafelku produktu, szczególnie po prawej stronie".
     Przyczyna: siatka ".product-miniature__bottom" ma kolumny
     "1fr auto" (auto = ~56px zarezerwowane na przycisk „Dodaj do koszyka"),
     a te kolumny są WSPÓLNE dla całej siatki, nie tylko dla wiersza z
     przyciskiem — więc tytuł (wiersz 1, gdzie żadnego przycisku nie ma)
     i tak miał do dyspozycji tylko węższą kolumnę 1, mimo że po jego
     prawej stronie, w TYM SAMYM wierszu, nie renderowało się nic (przycisk
     jest dopiero w wierszu 2). Efekt dokładnie taki jak zgłoszony: pusta
     przestrzeń po prawej stronie tytułu, a tekst i tak przycięty. Naprawione
     przez rozciągnięcie tytułu na OBIE kolumny (1/-1) — przycisk w wierszu 2
     nadal ma swoją kolumnę dla siebie, bo tytuł jej fizycznie nie zajmuje
     (inny wiersz). Sprawdzone na żywo: szerokość dostępna dla tytułu
     wzrosła ze 221px do 285px na kafelku 3-kolumnowym. */
  grid-column: 1 / -1 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  /* font-size/line-height/min-height: zmniejszone z domyślnych 16px/24px
     (min-height 48px = 2×24px) — użytkownik przetestował na żywo warianty
     12/13/14px na kategorii "Mikrofony" i stronie głównej, wybrał 14px
     jako czytelny kompromis (mniej zawijania na 2. linii niż 16px, ale
     bez utraty czytelności jak przy 12px). min-height odpowiednio
     przeliczony (2×20px), żeby wysokość rezerwowana pod tytuł nie
     zmieniała się o piksel między kafelkami z krótką i długą nazwą. */
  font-size: 14px !important;
  line-height: 20px !important;
  min-height: 40px !important;
}

.product-miniature__prices:not(.ps-specials *) {
  grid-column: 1 !important;
  align-self: center !important;
}

.product-list-review:not(.ps-specials *) {
  grid-column: 1 !important;
}

.product-miniature__actions:not(.ps-specials *) {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: center !important;
  justify-self: end !important;
}

.product-miniature__actions:has(.product-miniature__details):not(.ps-specials *) {
  display: none !important;
}

.product-miniature__add:not(.ps-specials *) {
  width: 56px !important;
}

.product-miniature__price:not(.ps-specials *),
.product-miniature__discount-price:not(.ps-specials *) {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.products__sort-label {
  display: none;
}

.products__sort-dropdown {
  flex-grow: 0;
}

.products__sort {
  justify-content: flex-end;
}

/* ---------------------------------------------------------------------
   Koszyk — rozmieszczenie steppera ilości i sumy za pozycję (gotcha #29,
   2026-09-30). Zgłoszenie: po przywróceniu widoczności steppera w
   koszyku (gotcha #27/#28) użytkownik ocenił natywny układ jako "coś się
   poprzesuwało" — cena jednostkowa i suma za pozycję nie były wyrównane
   do wspólnej linii/krawędzi, a stepper wizualnie dominował nad resztą
   wiersza. Poprawka wypracowana iteracyjnie na żywo w Chrome (kilka rund
   podglądu przez wstrzyknięty <style>, zaakceptowana dopiero na finalnej
   wersji):
   - Suma za pozycję (".product-line__price") pogrubiona i większa (18px/
     700) — to element PIERWSZOPLANOWY wiersza (kwota, którą klient
     faktycznie płaci za tę pozycję), wyrównana do prawej krawędzi.
   - Cena jednostkowa (".product-line__item-price") zmniejszona i
     wyszarzona (13px/#888) — drugoplanowy kontekst przy nazwie produktu,
     nie powinna konkurować wizualnie z sumą.
   - Stepper zmniejszony na DESKTOPIE (przyciski 26px zamiast natywnych
     38px, pole ilości 34px zamiast 83px) — natywny rozmiar wizualnie
     dominował nad tekstem ceny obok. ".product-line__content-right"
     ustawiony na poziomy układ (stepper | suma w jednej linii,
     "justify-content:space-between" — stepper bliżej lewej krawędzi
     kolumny, suma przy prawej) zamiast pionowego stosu.
   - Na MOBILE świadomie NIE zmniejszony — przyciski zostają 44×44px.
     Wprowadzone jako POPRAWKA w trakcie iteracji: pierwsza wersja
     zmniejszyła przyciski wszędzie (też na mobile), ale to zeszło
     poniżej minimalnego zalecanego rozmiaru pola dotykowego (44×44px —
     WCAG 2.5.5, Apple HIG, Material Design) — na desktopie to tylko
     estetyka (klika się myszką, precyzyjnie), na mobile to realny
     problem użyteczności (palcem trudniej trafić w mały przycisk).
     Pole ilości na mobile ma font-size:16px celowo — poniżej 16px iOS
     Safari automatycznie zooomuje widok po kliknięciu w input, co jest
     częstym, łatwym do przeoczenia błędem UX na formularzach mobilnych.
   - Poziomy układ (stepper|suma w jednej linii) zastosowany też na
     mobile (nie tylko desktop) — wcześniejsza próba z etykietą "Ilość"
     nad stepperem (nieużyta w finalnej wersji, użytkownik zrezygnował:
     "słowo ilość jednak tam nie jest potrzebne") wymagała POSZERZENIA
     prawej kolumny do 260px, co na 390px łamało stepper do dwóch linii
     — sprawdzone na żywo (symulacja iframe 390px). Po zmniejszeniu
     steppera i usunięciu etykiety węższa kolumna (bazowa, bez zmiany
     grid-template-columns na mobile) wystarcza na jedną linię bez
     łamania — zweryfikowane ponownie na żywo po każdej rundzie zmian.
   Zweryfikowane na żywo w Chrome (prawdziwy koszyk użytkownika, nie
   tylko dane testowe) na desktopie (~1600px) i w symulacji mobile
   (iframe 390px) — bez nachodzenia, bez łamania układu, poprawne
   wyrównanie w obu szerokościach.
   --------------------------------------------------------------------- */

.product-line__quantity-button {
  display: flex !important;
  align-items: center !important;
}

.quantity-button__group.input-group {
  width: auto !important;
}

.product-line__quantity-button .btn.decrement,
.product-line__quantity-button .btn.increment {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
}

.product-line__quantity-button .js-cart-line-product-quantity {
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
}

.product-line__price {
  text-align: right !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.product-line__item-price {
  color: #888 !important;
  font-size: 13px !important;
}

.product-line__content-right {
  gap: 10px !important;
}

@media (min-width: 768px) {
  .product-line__content {
    grid-template-columns: 1fr 220px !important;
    align-items: center !important;
  }

  .product-line__content-right {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  .product-line__quantity-button .btn.decrement,
  .product-line__quantity-button .btn.increment {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
  }

  .product-line__quantity-button .js-cart-line-product-quantity {
    width: 34px !important;
    height: 26px !important;
    font-size: 13px !important;
  }
}

/* ---------------------------------------------------------------------
   GOTCHA #31 (2026-09-30) — Filtr ceny na /promocje pokazywał natywny
   suwak PrestaShop zamiast naszych pól "Od / Do", mimo że na zwykłych
   kategoriach działało to poprawnie.

   PRAWDZIWA PRZYCZYNA (po dogłębnym śledztwie na żywo, DevTools):
   Reguły .dobre-audio-slider-hidden i .dobre-audio-price-input* NIE były
   wcześniej w ŻADNYM naszym pliku CSS z modułu dobre_audio_assets —
   siedziały WYŁĄCZNIE w skompilowanym/scache'owanym pliku motywu
   (np. theme-955a40149.css), który PrestaShop generuje OSOBNO dla każdej
   unikalnej kombinacji plików CSS ładowanych na danej stronie. Strona
   kategorii i strona /promocje (kontroler PricesDropController) ładują
   RÓŻNE kombinacje => RÓŻNE skompilowane pliki motywu z RÓŻNYMI hashami
   w nazwie (potwierdzone na żywo: theme-955a40149.css na kategorii vs.
   theme-f677e6149.css na /promocje) — a reguły .dobre-audio-slider-hidden
   / .dobre-audio-price-input* znalazły się tylko w tym PIERWSZYM pliku,
   więc na /promocje w ogóle nie były ładowane i suwak zostawał widoczny.

   To był błąd architektoniczny (reguły wstrzyknięte bezpośrednio do cache
   motywu zamiast do własnego, zawsze ładowanego pliku CSS) — mógł się
   ujawnić ponownie w dowolnym momencie, np. przy czyszczeniu cache
   motywu w PrestaShop, nawet na samej kategorii. Naprawa: te same reguły
   (odtworzone 1:1 z theme-955a40149.css) przeniesione tutaj, do
   product-listing-tweaks.css, który ładuje się globalnie na WSZYSTKICH
   stronach (potwierdzone: kategoria, /promocje, wyszukiwanie) — więc
   filtr ceny będzie teraz działał wszędzie tam, gdzie występuje widget
   filtrowania po cenie, niezależnie od tego, jaką kombinację CSS motywu
   PrestaShop akurat skompiluje dla danego kontrolera.

   LEKCJA: jeśli coś działa "na jednej stronie, ale nie na innej" mimo
   tej samej klasy CSS w HTML — zawsze sprawdź na żywo (DevTools →
   document.styleSheets), czy odpowiedzialna reguła CSS w ogóle jest
   ZAŁADOWANA na obu stronach, zanim szuka się przyczyny w PHP/kontrolerach.
   Tu początkowa hipoteza (błędny warunek php_self w addCSS()/addJS())
   była całkowicie błędna — addCSS()/addJS() dla category-price-filter.css
   okazały się w ogóle nie działać NIGDZIE (osobny, wcześniej znany bug),
   więc to nie mogła być przyczyna. Poprawka PHP przygotowana wcześniej
   (wgraj_promocje_filtr_patch.py) jest ZBĘDNA i NIE POWINNA być wgrywana
   — ten problem to czyste CSS, bez zmian w PHP. */
.dobre-audio-slider-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dobre-audio-price-inputs {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

.dobre-audio-price-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 0%;
}

.dobre-audio-price-input-group label {
  font-size: 0.75rem;
  color: var(--bs-secondary-color, #6c757d);
  margin: 0;
}

.dobre-audio-price-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.dobre-audio-price-input:focus {
  outline: none;
  border-color: var(--bs-primary, #0b69f6);
  box-shadow: 0 0 0 2px rgb(11 105 246 / 0.15);
}

.dobre-audio-price-input-sep {
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color, #6c757d);
}