/* ==========================================================================
   dobre.audio — redesign "Apple-like": białe karty na jasnoszarym tle,
   pigułkowe przyciski, karty produktów z hoverem, font Inter.
   Zweryfikowane na żywo w Chrome na presta9.dobre.audio (strona główna,
   kategoria, karta produktu, koszyk, checkout).
   Ładować GLOBALNIE (każda strona) przez hookDisplayHeader modułu
   dobre_audio_assets, tym samym mechanizmem filemtime()-cache-busting co
   pozostałe pliki CSS tego modułu.
   ========================================================================== */

/* Font Inter — SELF-HOSTED (bez Google Fonts, świadoma decyzja: brak
   zewnętrznego połączenia do fonts.googleapis.com/fonts.gstatic.com —
   szybciej, i bez przesyłania IP odwiedzającego do Google przy każdym
   wejściu na stronę). Pliki .woff2 muszą leżeć w
   modules/dobre_audio_assets/views/fonts/ — ścieżki względne poniżej
   (../fonts/...) liczone są od lokalizacji TEGO pliku CSS
   (views/css/apple-like-redesign.css).
   Dwa podzbiory na każdą wagę: "latin" (podstawowe znaki) i "latin-ext"
   (m.in. polskie znaki diakrytyczne: ą ć ę ł ń ó ś ź ż) — przeglądarka
   sama dociąga tylko ten podzbiór, którego faktycznie potrzebuje do
   wyrenderowania tekstu na stronie (dzięki unicode-range), więc nie ma
   kosztu pobierania obu naraz bez potrzeby.
   Tylko .woff2 (obsługiwane przez wszystkie aktualne przeglądarki) — bez
   fallbacku .woff dla bardzo starych przeglądarek; tam po prostu
   zadziała fallback systemowy z --al-font niżej (font-display: swap). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/inter-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --al-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body, .header, .footer, .section-title, .product-miniature, button, input, h1, h2, h3 {
  font-family: var(--al-font) !important;
}

/* Jasnoszare tło strony (dokładny odcień Apple) */
body, main.wrapper, .page-content--home, .center-column {
  background: #f5f5f7 !important;
}

/* --------------------------------------------------------------------------
   STRONA GŁÓWNA: każda sekcja = biała karta, oprócz baneru i głównego slidera
   -------------------------------------------------------------------------- */
.page-content--home > section:not(.ps-banner):not(.ps-imageslider),
.page-content--home > .dobre-audio-deal-banner-row {
  width: 100% !important; /* wymagane razem z margin:auto - inaczej siatka
                              produktów (container queries) zapada się do
                              1 kolumny */
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  max-width: 1400px !important; /* poniżej ~1350px siatka spada z 4 do 3 kolumn */
  box-sizing: border-box !important;
  margin: 0 auto !important;
  padding: 20px 24px !important;
}
.page-content--home > .dobre-audio-deal-banner-row {
  padding: 18px !important;
}
/* POPRAWKA (zgłoszenie: "odstępy na stronie głównej chciałbym
   zmniejszyć", zrzut ekranu z zaznaczoną na czerwono przerwą między
   przyciskiem "Wszystkie nowe produkty" a kartą "Wytwornice dymu").
   `.page-content--home` to natywny (z motywu, nie nasz) grid z
   `gap: 40px` między sekcjami - odkąd każda sekcja ma teraz własną
   białą "kartę" z cieniem, ten odstęp jest dużo bardziej widoczny niż
   wcześniej (gdy sekcje nie miały tła, 40px "znikało" wzrokowo).
   Zmniejszone do 24px na desktopie i 16px na mobile - spójne z resztą
   odstępów kart w tym redesignie (20px margin-bottom kart produktu/
   opisu, 16px padding stron na mobile). */
.page-content--home {
  gap: 24px !important;
}
@media (max-width: 767.98px) {
  .page-content--home {
    gap: 16px !important;
  }
}
/* POPRAWKA prewencyjna (2026-09-10, ten sam wzorzec "za duży padding na
   mobile" znaleziony już 2x - gotchas #18 i wyżej dla opisu produktu -
   zastosowana z góry na WSZYSTKICH pozostałych "kartach" w serwisie,
   zamiast czekać na kolejne osobne zgłoszenie tego samego problemu na
   każdej podstronie z osobna). Sekcje strony głównej i boki
   koszyka/checkoutu mają ten sam 20-28px padding pomyślany pod
   desktop - zmniejszony na mobile do tej samej wartości co reszta
   serwisu (16px/12px), dla spójności. */
@media (max-width: 767.98px) {
  .page-content--home > section:not(.ps-banner):not(.ps-imageslider),
  .page-content--home > .dobre-audio-deal-banner-row {
    padding: 16px 12px !important;
  }
}
/* UWAGA: reguła mobile dla .cart-grid__content/.checkout-grid__content/
   .cart-grid__aside/.checkout-grid__aside PRZENIESIONA niżej (patrz przy
   regułach bazowych tych klas) - patrz gotcha #20. */
/* POPRAWKA v2, UX audit mobile (2026-09-10, zgłoszenie: "jest zdecydowanie
   za ciasno na tych kafelkach, powinno być większe, może mniejsze
   odstępy od krawędzi").
   Prawdziwa przyczyna ciasnoty nie leżała głównie w odstępie SIATKI
   (poprzednia poprawka, gap 24px->14px, dała tylko ~5px na kafelek) -
   głównym "złodziejem" miejsca był padding karty `.center-column`
   (28px 32px, patrz reguła "Apple-like" białej karty wyżej w pliku),
   pomyślany dla DESKTOPU, ale zastosowany bez wyjątku również na
   telefonie: na ekranie 390px szerokości to 64px (32+32) zjedzone po
   samych bokach, zanim siatka produktów w ogóle dostanie jakąkolwiek
   przestrzeń - to ok. 16% szerokości ekranu.
   Standardowa praktyka UX dla list produktów w e-commerce na mobile
   (Amazon, Allegro, Zalando i inni) to marginesy strony rzędu 12-16px,
   NIE 32px jak na desktopie, oraz odstęp między kartami w siatce
   rzędu 8-12px. Przycisk dodaj-do-koszyka (44x44px, patrz gotcha #10)
   i tak jest już na dolnej granicy zalecanego minimalnego obszaru
   dotyku (Apple HIG: 44pt, Material Design: 48dp) - CELOWO nie
   zmniejszony dalej, mimo że użytkownik pytał, czy przycisk/cena/nazwa
   nie powinny być pomniejszone: zmniejszenie obszaru dotyku poniżej
   tego progu jest uznawane za błąd dostępności/UX, więc oszczędności
   miejsca szukamy w PADDINGU strony i ODSTĘPIE siatki, nie w rozmiarze
   elementów interaktywnych. Cena (16px) i nazwa (14px, 2 linie z
   `-webkit-line-clamp`) zostają bez zmian - to już są rozmiary bliskie
   dolnej granicy czytelności na małym ekranie, dalsze zmniejszanie
   pogorszyłoby czytelność bardziej niż zyskałoby miejsca.
   Efekt zweryfikowany w symulowanym viewporcie 390px: kafelek urósł ze
   148px (przed jakąkolwiek poprawką) przez 153px (v1, sam gap) do
   175px (v2, padding karty + gap) - wzrost o ok. 18% względem stanu
   wyjściowego, przy zachowaniu widocznego marginesu od krawędzi ekranu
   (13px) i minimalnym, ale wystarczającym odstępie między kartami
   (10px). Filtry (`.left-column`) dostały ten sam, mniejszy padding
   dla spójności wizualnej. */
/* UWAGA: reguła mobile dla .center-column.page i .left-column PRZENIESIONA
   niżej (patrz przy regułach bazowych tych klas) - patrz gotcha #20. */
@media (max-width: 767.98px) {
  .products {
    gap: 10px !important;
  }
}
.section-title {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
  margin-bottom: 16px !important;
}

/* --------------------------------------------------------------------------
   STRONA KATEGORII: sidebar (filtry) + treść jako dwie osobne karty
   -------------------------------------------------------------------------- */
.columns-container.container {
  padding-top: 8px !important;
}
.breadcrumb__wrapper {
  background: transparent !important;
  /* POPRAWKA (zgłoszenie: "przy kategorii u góry jest dość duży odstęp
     od okruszków", zrzut ekranu z zaznaczoną przerwą) - natywny margines
     motywu pod okruszkami to 40px, razem z naszym `padding-top: 8px` na
     `.columns-container` (wyżej) dawało 48px odstępu do kart
     sidebar/treść - zauważalnie więcej niż odstępy używane gdzie indziej
     w redesignie (16-24px). Zmniejszone do 16px, spójnie z resztą. */
  margin-bottom: 16px !important;
}
.left-column {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  align-self: flex-start !important;
}
/* Mobile - patrz gotcha #20 (kolejność w pliku): musi być PO regule
   bazowej powyżej, inaczej !important o tej samej specyficzności
   przegrywa z bazą mimo media query. */
@media (max-width: 767.98px) {
  .left-column {
    padding: 16px !important;
  }
}
/* POPRAWKA: nadpisanie paddingu na .left-column/.center-column (wyżej i
   niżej) sprawiło, że białe "karty" (tło na całym border-box kolumny)
   dotykają się bezpośrednio - w natywnej siatce Bootstrapa kolumny w
   .row (display:flex, flex-shrink:0, szerokości w % sumujące się do
   100% powiększonego przez ujemny margines rzędu) i tak stykają się
   swoimi zewnętrznymi krawędziami; "gutter" istniał tylko jako padding
   WEWNĄTRZ każdej kolumny (niewidoczny, bo oryginalne kolumny nie miały
   własnego tła). Odkąd nasze karty mają tło na całej kolumnie, ten
   wewnętrzny odstęp przestał być widoczny jako odstęp między kartami.
   Samo dodanie `gap` na rzędzie NIE WYSTARCZY - flex-shrink:0 na
   kolumnach oznacza, że przeglądarka nie może "skurczyć" ich szerokości
   żeby zrobić miejsce na gap, więc cały wiersz się zawijał (sidebar i
   treść lądowały jedna pod drugą zamiast obok siebie). Fix: jawny `gap`
   NA RZĘDZIE (działa niezależnie od paddingu kolumn, nie rusza innych
   `.row` w serwisie dzięki :has()) + jawne zmniejszenie szerokości OBU
   kolumn o połowę gapu (10px z każdej strony = 20px łącznie), osobno dla
   breakpointów col-md-4/col-md-8 i col-lg-3/col-lg-9 używanych w tym
   motywie - żeby zwolnione miejsce dokładnie odpowiadało gapowi i nic
   się nie zawijało. Zweryfikowane na żywo na wdrożonym arkuszu stylów:
   left-column.right=932.5, center-column.left=952.5 (odstęp 20px, brak
   zawinięcia w drugi wiersz). */
/* POPRAWKA #2 (2026-09-10, zgłoszenie: "widok kategorii zupełnie nie
   działa na mobile, są 2 kolumny"): reguły `.left-column.col-lg-3` /
   `.center-column.col-lg-9` NIE miały media query - to mój błąd. Nazwa
   klasy `col-lg-3` to tylko statyczny selektor CSS, sam w sobie nie
   niesie żadnej logiki "tylko od 992px wzwyż" - tę logikę zapewnia
   WYŁĄCZNIE to, że naga reguła Bootstrapa ustawiająca tę szerokość jest
   opakowana w `@media (min-width: 992px)`. Nasza reguła, dopisana bez
   takiego opakowania, matchowała ten sam selektor (klasa jest obecna w
   HTML niezależnie od szerokości ekranu) i wygrywała z Bootstrapem
   (dzięki !important) na KAŻDEJ szerokości ekranu, łącznie z mobile -
   efekt: sidebar i treść wymuszane do wąskich kolumn obok siebie
   zamiast naturalnego układania jedna pod drugą poniżej 768px. Fix:
   opakowanie w `@media (min-width: 992px)`, dokładnie tak jak robi to
   Bootstrap dla `col-lg-*`. Zweryfikowane na żywo w symulowanym
   viewporcie 390px (iframe) - kolumny wracają do naturalnego układu
   jednokolumnowego (sidebar pełnej szerokości nad treścią). */
.row:has(> .left-column):has(> .center-column) {
  gap: 20px !important;
}
@media (min-width: 992px) {
  .left-column.col-lg-3 {
    width: calc(25% - 10px) !important;
  }
  .center-column.col-lg-9 {
    width: calc(75% - 10px) !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .left-column.col-md-4 {
    width: calc(33.3333% - 10px) !important;
  }
  .center-column.col-md-8 {
    width: calc(66.6666% - 10px) !important;
  }
}
.center-column.page:not(:has(.cart-grid)):not(:has(.checkout-grid)):not(:has(.page-content--home)) {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 28px 32px !important;
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
}
/* GOTCHA #20 (2026-09-10, zgłoszenie: "sprawdź box opisu, tam gdzie jest
   treść, moim zdaniem nic się tam nie zmieniło"): ta reguła mobile była
   już raz napisana wyżej w pliku (przy sekcji "STRONA GŁÓWNA"), ale
   fizycznie PRZED tą bazową regułą .center-column.page (i przed bazową
   .left-column). Przy IDENTYCZNEJ specyficzności (te same selektory) i
   obu z !important, o wygranej decyduje WYŁĄCZNIE kolejność w pliku -
   reguła zdefiniowana PÓŹNIEJ wygrywa, niezależnie od media query.
   Efekt: baza (28px 32px, bez media query - obowiązuje zawsze) była
   zdefiniowana PO wersji mobile, więc to ona wygrywała nawet na wąskim
   ekranie - wersja mobile (16px 12px) nigdy się nie renderowała, mimo że
   plik CSS był poprawnie wgrany i mimo że wewnętrzny box `.product__bottom`
   (osobna reguła, tam kolejność była poprawna) faktycznie się zmniejszył.
   Dlatego użytkownik widział zmianę na karcie "Opis" (mniejszy padding
   wewnątrz), ale NIE na całej karcie strony (`.center-column`, rodzic
   wszystkiego na stronie, w tym karty "Opis") - stąd wrażenie "nic się
   nie zmieniło" mimo realnie wdrożonej poprawki. Fix: przeniesienie
   reguły mobile TUTAJ, fizycznie PO regule bazowej (dokładnie ten sam
   wzorzec co już poprawnie działający `.product__bottom`/
   `.product-comments-wrapper` niżej w pliku). LEKCJA: przy regule mobile
   z !important dla selektora, który ma też regułę bazową bez media query,
   ZAWSZE umieszczać wersję mobile PO wersji bazowej w pliku - inaczej
   kolejność w źródle cicho unieważnia media query. */
@media (max-width: 767.98px) {
  .center-column.page:not(:has(.cart-grid)):not(:has(.checkout-grid)):not(:has(.page-content--home)) {
    padding: 16px 12px !important;
  }
}
/* GOTCHA #24 (2026-09-10, zgłoszenie: "na stronie kategorii - tło jest
   jednolite, szare, na stronie głównej ma jakąś dodatkową ramkę białą,
   a pod nią z nowu szare?"): motyw używa klas `.center-column.page` jako
   ogólnego wrappera treści na WIĘKSZOŚCI typów stron - łącznie ze
   stroną główną, gdzie `.page-content--home` (właściwy kontener sekcji
   strony głównej, już samodzielnie stylowany na osobne białe "karty" -
   patrz reguła wyżej w pliku) siedzi WEWNĄTRZ `.center-column.page`.
   Reguła powyżej (biała karta z paddingiem 28px/32px) matchowała więc
   RÓWNIEŻ na stronie głównej, owijając całą stronę w dodatkową,
   niezamierzoną białą "ramkę" (z własnym paddingiem i cieniem) - w
   środku której nasze osobne białe karty sekcji pływały na własnym,
   ponownie szarym tle `.page-content--home`. Efekt: szare tło strony →
   biała ramka (niezamierzona) → szare tło sekcji → białe karty sekcji -
   dokładnie "ramka biała, a pod nią z nowu szare" ze zgłoszenia. Na
   stronie kategorii tego problemu nie było, bo tam `.center-column.page`
   TO WŁAŚCIWY kontener treści (nie ma w nim zagnieżdżonego
   `.page-content--home`), więc renderuje się jako jedna, poprawna biała
   karta. Fix: dodanie `:not(:has(.page-content--home))` do obu reguł
   (bazowej i mobile) `.center-column.page` - dokładnie ten sam wzorzec
   ochronny jak istniejące już `:not(:has(.cart-grid))`/
   `:not(:has(.checkout-grid))` dla koszyka/checkoutu. Strona główna
   wraca do jednej warstwy szarego tła z białymi kartami sekcji, bez
   dodatkowej otaczającej ramki. LEKCJA: przy stylowaniu selektora
   "ogólnego kontenera treści" typu `.center-column.page`, który motyw
   reużywa na wielu RÓŻNYCH typach stron, zawsze sprawdzić, czy na
   KTÓREJŚ z tych stron ten sam kontener nie owija już INNEGO,
   samodzielnie stylowanego elementu (tu: `.page-content--home`) -
   inaczej dwie niezależnie zaprojektowane "karty" nakładają się na
   siebie. */

.page-title-section,
h1.h1 {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
}

/* --------------------------------------------------------------------------
   KARTA PRODUKTU: opis i opinie jako osobne karty pod głównym blokiem
   -------------------------------------------------------------------------- */
.product__bottom,
.product-comments-wrapper {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 28px 32px !important;
  box-sizing: border-box !important;
  margin-bottom: 20px !important;
}
/* POPRAWKA (zgłoszenie użytkownika 2026-09-10: "sprawdź kartę produktu,
   opis ma ten sam problem, box jest za wąski, marginesy wielkie") -
   ten sam błąd co w gotchcie #18 (padding karty 28px 32px pomyślany
   pod desktop, zastosowany bez wyjątku na mobile), tylko na innej
   parze elementów ("Opis" i sekcja opinii na karcie produktu zamiast
   `.center-column`/`.left-column` na liście/kategorii). Ten sam fix:
   mniejszy padding na mobile. Zweryfikowane w symulowanym viewporcie
   390px na `/4772-...` - kolumna tekstu opisu wyraźnie szersza,
   marginesy boczne proporcjonalne do ekranu zamiast desktopowych
   32px. */
@media (max-width: 767.98px) {
  .product__bottom,
  .product-comments-wrapper {
    padding: 16px 12px !important;
  }
}

/* --------------------------------------------------------------------------
   KOSZYK I CHECKOUT: dwie kolumny, każda z naturalną wysokością (NIE
   rozciągają się do siebie nawzajem) + realny odstęp między nimi
   -------------------------------------------------------------------------- */
.cart-grid,
.checkout-grid {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important; /* bez tego krótsza kolumna rozciąga
                                          się do wysokości dłuższej */
  gap: 20px !important;
}
.cart-grid__content,
.checkout-grid__content {
  flex: 1 1 0 !important;
  max-width: none !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 24px 28px !important;
  box-sizing: border-box !important;
  margin-block-end: 0 !important; /* patrz gotcha #22 - nadpisuje natywny
    margin-block-end motywu (3rem/4rem), zdublowany z naszym flex gap:20px
    na `.cart-grid` */
}
.cart-grid__aside,
.checkout-grid__aside {
  flex: 0 0 340px !important;
  max-width: none !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  margin-block-end: 0 !important; /* patrz gotcha #22 */
}
.cart-grid__footer {
  margin-top: 12px !important;
  flex-basis: 100% !important;
}
.checkout-steps {
  background: transparent !important;
  padding-top: 12px !important;
}
/* Poniżej ~992px (próg Bootstrap "lg", zgodny z oryginalnymi klasami
   col-lg-8/col-lg-4) obie kolumny wracają do układu pełnej szerokości,
   jedna pod drugą - bez tego sztywne flex: 0 0 340px na .cart-grid__aside
   / .checkout-grid__aside nie kurczy się na wąskich ekranach i może
   powodować ściśnięcie/poziomy scroll na telefonach. */
@media (max-width: 991.98px) {
  .cart-grid__content,
  .checkout-grid__content,
  .cart-grid__aside,
  .checkout-grid__aside {
    flex: 1 1 100% !important;
  }
}
/* Mobile - patrz gotcha #20 (kolejność w pliku): musi być PO regule
   bazowej (padding: 24px 28px / 24px, wyżej), inaczej !important o tej
   samej specyficzności przegrywa z bazą mimo media query. Reguła była
   pierwotnie napisana wyżej w pliku (przed bazą) i nigdy się nie
   renderowała - niezweryfikowana na żywo (pusty koszyk testowy), błąd
   wykryty dopiero przy analizie tego samego problemu na innym elemencie. */
@media (max-width: 767.98px) {
  .cart-grid__content,
  .checkout-grid__content,
  .cart-grid__aside,
  .checkout-grid__aside {
    padding: 16px 12px !important;
  }
}

/* --------------------------------------------------------------------------
   KARTY PRODUKTÓW (.product-miniature) - identyczne na każdej stronie
   -------------------------------------------------------------------------- */
/* POWAŻNA POPRAWKA (zgłoszenie użytkownika 2026-09-10, ze zrzutem ekranu:
   tytuł produktu i cena WIZUALNIE NACHODZĄ NA SIEBIE na kafelkach z
   przeceną, na mobile). Przyczyna NIE leży w naszym pliku, tylko w
   starszym, wcześniej istniejącym pliku tego samego modułu
   `product-listing-tweaks.css`, reguła:
   `.product-miniature__bottom:not(.ps-specials *) {
      grid-template-rows: auto 38px auto !important; }`
   Środkowy wiersz siatki CSS Grid (na cenę: `.product-miniature__title`,
   `.product-miniature__prices`, `.product-list-review` to bezpośrednie
   dzieci `.product-miniature__bottom` dzięki `.product-miniature__infos {
   display: contents }`) ma SZTYWNĄ wysokość 38px - wystarcza dokładnie
   na JEDNĄ linię ceny bez przeceny. Gdy produkt ma przecenę (stara cena
   przekreślona + nowa cena + "Najniższa cena (30 dni)"), blok cen
   potrzebuje ~90-100px, ale wiersz siatki i tak zostaje ucięty do 38px -
   efekt: treść bloku cen renderuje się zachodząc na wiersz tytułu nad
   nią (oba w pełni widoczne, po prostu na tej samej przestrzeni). Błąd
   ISTNIAŁ JUŻ W NATYWNYM MOTYWIE/wcześniejszym pliku modułu - potwierdzone
   przez wyłączenie naszego pliku CSS i odtworzenie tego samego
   nachodzenia. Fix: nadpisanie TEGO SAMEGO selektora (identyczny łańcuch
   `:not()`, żeby dopasować/przebić specyficzność - inaczej nasza wcześniejsza,
   prostsza wersja selektora przegrywała mimo !important i późniejszego
   załadowania pliku) wartościami `auto` zamiast sztywnych px - wiersze
   rosną do wysokości faktycznej zawartości. Zweryfikowane na żywo w
   symulowanym viewporcie 390px na `/181-wytwornice-dymu` (produkt
   "LIGHT4ME FOG 500"): przed poprawką tytuł kończył się na y=918, cena
   zaczynała się na y=896 (zachodzenie 22px); po poprawce brak
   zachodzenia, zweryfikowane też zrzutem ekranu. */
.product-miniature__bottom:not(.ps-specials *) {
  grid-template-rows: auto auto auto !important;
}
.product-miniature__inner {
  border-radius: 16px !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  background: #fff !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  overflow: hidden !important;
}
.product-miniature__inner:hover {
  transform: translateY(-4px) !important;
  /* POPRAWKA: cień hover był zbyt duży (0 20px 32px, rozmycie 32px) -
     zgłoszenie użytkownika. Zmniejszony do bardziej subtelnego. Dodatkowo
     rozbity na DWIE mniejsze, nakładające się warstwy zamiast jednej
     dużej - różne przeglądarki/silniki renderujące (zwłaszcza na
     Windows vs macOS, różne GPU) potrafią renderować BARDZO duże
     rozmycia cienia niejednolicie (mniej "miękko", czasem z widocznym
     twardszym brzegiem) - mniejsze wartości blur renderują się
     bardziej przewidywalnie i spójnie między przeglądarkami niż jedna
     ekstremalnie duża wartość. */
  /* v2 poprawki: dolna (większa) warstwa nadal zbyt duża wg użytkownika -
     zmniejszona z 0 10px 18px na 0 6px 12px, drugie zgłoszenie 2026-09-10. */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 6px 12px rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(0, 0, 0, 0.02) !important;
}
.product-miniature__image-container {
  overflow: hidden !important;
  border-radius: 0 !important;
  position: relative !important;
}
.product-miniature__image {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
.product-miniature__inner:hover .product-miniature__image {
  transform: scale(1.06) !important;
}

/* "Szybki podgląd" w tym motywie to PEŁNA BELKA pod zdjęciem
   (position:absolute, top:100%, width:100%), NIE okrągły przycisk -
   mimo że ma klasę .btn-square-icon (używaną gdzie indziej dla
   faktycznie okrągłych przycisków, np. stepper ilości). Stąd selektor
   musi być bardziej specyficzny niż `.btn-square-icon`, inaczej wygrywa
   ta reguła i belka robi się owalna/rozjechana. */
.product-miniature .product-miniature__quickview-button.btn.btn-square-icon {
  border-radius: 0 !important;
}
.product-miniature__quickview-button {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(6px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(180%) !important;
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: none !important;
  padding: 12px 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1d1d1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Przycisk "Dodaj do koszyka" na karcie produktu (kafelek listingu) - pigułka
   z ikoną i tekstem, NIE okrągły. */
/* POPRAWKA v2: pierwsza wersja tej reguły (border-radius:980px +
   padding:10px 18px + width:auto) zakładała widoczny tekst obok ikony,
   którego tu nie ma (tekst "Dodaj do koszyka" jest CELOWO display:none,
   tylko dla czytników ekranu) — asymetryczny padding rozciągał samą
   ikonę w owalny, spłaszczony kształt. Cofnięcie do oryginalnego,
   natywnego kształtu (border-radius:50%, okrągły) było MYLNE — to
   właśnie ten okrągły kształt użytkownik chciał zmienić, nie zachować.
   Docelowo: kompaktowy PROSTOKĄT z zaokrąglonymi rogami (spójne z resztą
   "Apple-like" języka wizualnego — karty, belka quickview — żadnego
   elementu na stronie nie robimy już idealnie okrągłym poza stepperem
   ilości), stały rozmiar 44×44px zamiast paddingu zależnego od
   (nieistniejącego wizualnie) tekstu. */
.product-miniature__add.btn {
  border-radius: 12px !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.product-miniature__add.btn:hover {
  transform: translateY(-2px) scale(1.05) !important;
  /* zmniejszony cień (zgłoszenie użytkownika 2026-09-10, ten sam typ
     poprawki co na karcie produktu - patrz gotcha #14 w notatkach) */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}
/* POPRAWKA (zgłoszenie "zobacz na mobile wytwornice dymu co się dzieje",
   2026-09-10): w widgecie "okazje"/specials na stronie głównej
   (`.dobre-audio-deal-banner-row .ps-specials`, osobny plik deal.css -
   NIE nasz) istnieje własna reguła
   `.dobre-audio-deal-banner-row .ps-specials .product-miniature__add
   { width: 100% !important; }` o WYŻSZEJ specyficzności niż nasza
   (3 klasy w łańcuchu potomków vs. nasze 2) - deal.css ładuje się też
   PO naszym pliku w <head>, więc wygrywałby nawet przy remisie
   specyficzności. Na MOBILE ten przycisk jest icon-only (deal.css sam
   ukrywa tekst `.product-miniature__add-text` w
   `@media (max-width: 767px)`), więc `width:100%` rozciągał go na całą
   (wąską, ~112px) szerokość kafelka - efekt: duża, rozjechana niebieska
   pigułka zamiast małej ikonki, szczególnie widoczne przy 2 kafelkach w
   rzędzie. Fix: reguła z tym samym łańcuchem selektorów co w deal.css +
   dodatkowa klasa `.btn` (4 klasy - wyższa specyficzność, wygrywa
   niezależnie od kolejności ładowania plików).
   POPRAWKA v2 (2026-09-10, zgłoszenie ze zrzutem ekranu: "w ofertach
   specjalnych przycisk dodaj do koszyka się zepsuł, [...] był na
   szerokość kafelka") - BŁĄD WŁASNY: powyższa reguła nie miała media
   query, więc wymuszała 44x44px/icon-only również na DESKTOPIE. Na
   desktopie (≥768px) deal.css NIE ukrywa `.product-miniature__add-text`
   - przycisk ma tam z założenia widoczny tekst "Dodaj do koszyka" w
   szerszej pigułce. Ściśnięcie takiego przycisku do sztywnego kwadratu
   44x44 z `padding:0` nie usuwało tekstu (sam tekst nie jest ukrywany
   przez naszą regułę) - efekt: tekst łamał się w środku na 2-3 linijki
   i wystawał/nachodził poza mały kwadrat ("Doda/do/koszy..."), dokładnie
   jak na zrzucie ekranu. Fix: reguła wymuszająca rozmiar 44x44
   ograniczona do tej samej granicy `@media (max-width: 767.98px)` co
   ukrywanie tekstu w deal.css - poza tą granicą przycisk wraca do
   natywnego, szerszego kształtu z widocznym tekstem, tak jak było
   zamierzone w oryginalnym pliku modułu. LEKCJA: przy przejmowaniu
   rozmiaru/kształtu przycisku, który gdzie indziej (w innym pliku) ma
   WARUNKOWE (media-query) chowanie swojej zawartości (tu: tekstu),
   nasza reguła zmieniająca jego wymiary musi być objęta DOKŁADNIE TĄ
   SAMĄ granicą - inaczej wymuszamy kształt "dla ikonki" na przycisku,
   który wciąż ma w sobie pełny tekst. */
@media (max-width: 767.98px) {
  .dobre-audio-deal-banner-row .ps-specials .product-miniature__add.btn {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   PRZYCISKI OGÓLNE (CTA typu "Dodaj do koszyka" na karcie produktu,
   "Przejdź do realizacji zamówienia", "Wszystkie produkty" itd.) - pigułka,
   ale z rozsądnym paddingiem/font-size (bez tego duże, pełnoszerokościowe
   przyciski robią się absurdalnie grube/wysokie). Steppery ilości
   (.btn-square-icon) i karty produktów (patrz wyżej) mają własne reguły
   i są tu świadomie wykluczone.
   -------------------------------------------------------------------------- */
.btn-primary:not(.product-miniature__add):not(.product-miniature__quickview-button):not(.btn-square-icon),
.btn-outline-primary {
  border-radius: 980px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  /* NIE ustawiać width:auto tutaj - część tych przycisków (np. główne
     "Dodaj do koszyka" na karcie produktu, "Przejdź do realizacji
     zamówienia" w koszyku) ma być pełnej szerokości swojego kontenera,
     tak jak w oryginalnym motywie - width:auto zamieniało je w małe,
     "skurczone" pigułki. Ograniczamy tylko padding/font-size, żeby przy
     pełnej szerokości nie robiły się absurdalnie grube/wysokie. */
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.btn-primary:not(.product-miniature__add):not(.product-miniature__quickview-button):not(.btn-square-icon):hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}
/* POPRAWKA: ta reguła ma robić okrągłe przyciski dla steppera ilości
   (.btn-square-icon), ale przycisk "Dodaj do koszyka" na kafelku listingu
   (.product-miniature__add) też ma klasę .btn-square-icon w tym motywie.
   Bez wykluczenia poniżej ta reguła miała TAKĄ SAMĄ specyficzność co
   reguła `.product-miniature__add.btn` (2 klasy vs klasa+:not(klasa)) i,
   będąc zdefiniowana PÓŹNIEJ w pliku, wygrywała w kaskadzie - efekt:
   przycisk na listingu wracał do okrągłego kształtu mimo poprawnej
   reguły wyżej. Stąd jawne :not(.product-miniature__add) tutaj. */
.btn-square-icon:not(.product-miniature__quickview-button):not(.product-miniature__add) {
  border-radius: 50% !important;
  transition: transform 0.15s ease !important;
}
.btn-square-icon:not(.product-miniature__quickview-button):not(.product-miniature__add):hover {
  transform: scale(1.08) !important;
}

/* Menu górne - subtelny hover */
.header nav a,
.header .menu a {
  transition: opacity 0.2s ease !important;
}
.header nav a:hover,
.header .menu a:hover {
  opacity: 0.6 !important;
}

/* ==========================================================================
   UWAGA MOBILE: zweryfikowane na żywo w symulowanym viewporcie 390px
   (koszyk) - z powyższym media query 991.98px brak poziomego scrolla,
   karty koszyka/podsumowania poprawnie układają się jedna pod drugą,
   pigułkowe przyciski poprawnej szerokości. `backdrop-filter` (belka
   szybkiego podglądu) i `:has()` (wykluczenie koszyka/checkoutu z
   generycznej karty kolumny) degradują się bezpiecznie na starszych
   przeglądarkach bez ich wsparcia - odpowiednio: zwykłe półprzezroczyste
   tło bez rozmycia, i brak zastosowania stylu karty (oryginalny wygląd),
   nic się nie łamie wizualnie.
   ========================================================================== */

/* ==========================================================================
   STRZAŁKI PRZEWIJANIA "Oferty specjalne" (widget dobre_audio_deal, sekcja
   dwuwierszowa na desktopie, ≥768px) — zgłoszenie: "nie podoba mi się że
   przyciski/strzałki lewo/prawo zajmują miejsce, nie da się tego pokazać
   dopiero po najechaniu na to pole?" (2026-09-29).
   Natywne `.dobre-audio-deal-slider-btn` (plik modułu dobre_audio_deal,
   deal.css - NIE ten plik) są flex-siblingami `.dobre-audio-deal-rows-inner`
   wewnątrz `.dobre-audio-deal-two-rows-wrap` (position:static, flex:0 0
   auto, 36px) - zajmują więc REALNĄ przestrzeń w layoucie po obu stronach
   siatki produktów, nawet gdy nikt nie najeżdża myszą. Fix: wyjęcie ich z
   przepływu (`position:absolute`, nałożone na krawędzie kontenera) +
   domyślnie niewidoczne (`opacity:0; pointer-events:none`), pokazywane
   dopiero na hover całego `.dobre-audio-deal-two-rows-wrap` (nie tylko
   samego przycisku - inaczej trzeba by trafić myszą dokładnie w 36px
   przycisk, żeby go w ogóle zobaczyć). Element wyjęty przez
   `position:absolute` automatycznie przestaje być uczestnikiem flexboksa
   rodzica, więc `.dobre-audio-deal-rows-inner` (flex:1 1 auto) sam
   rozciąga się na odzyskane miejsce - zweryfikowane na żywo: szerokość
   `.dobre-audio-deal-rows-inner` zrównała się z szerokością całego
   `.dobre-audio-deal-two-rows-wrap` (wcześniej węższa o miejsce zajęte
   przez oba przyciski + gap). */
.dobre-audio-deal-slider-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease !important;
  z-index: 5 !important;
}
.js-dobre-audio-deal-slider-prev {
  left: 4px !important;
}
.js-dobre-audio-deal-slider-next {
  right: 4px !important;
}
.dobre-audio-deal-two-rows-wrap:hover .dobre-audio-deal-slider-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ==========================================================================
   UWAGA WDROŻENIOWA: font Inter jest SELF-HOSTED (patrz reguły @font-face
   na samej górze tego pliku) — NIE wymaga już żadnego linku do Google
   Fonts w <head>. Wymaga natomiast wgrania 8 plików .woff2 do
   modules/dobre_audio_assets/views/fonts/ (po 4 wagi × 2 podzbiory:
   inter-latin-400/500/600/700.woff2, inter-latin-ext-400/500/600/700.woff2).
   Bez tych plików font-family spadnie na -apple-system / system-ui (strona
   nie wywali się, po prostu font nie będzie identyczny z tym, co
   testowaliśmy na żywo).
   ========================================================================== */