/* --------------------------------------------------------------------
 * Kategoria: "opis dodatkowy" jako osobny, biały box POD kartą
 * produktów (nie wewnątrz niej).
 *
 * Renderowane przez hook displayWrapperBottom (dobre_audio_assets.php,
 * hookDisplayWrapperBottom) — czyli już POZA #center-column, na szarym
 * tle strony (#f5f5f7). Dzięki temu margin-top poniżej tworzy
 * PRAWDZIWĄ przerwę (nie iluzję CSS) między kartą produktów a tym
 * boxem.
 *
 * WAŻNE: box NIE ma własnej stylizacji tła/promienia/cienia/paddingu —
 * dostaje ją "za darmo", bo w markupie (patrz hookDisplayWrapperBottom)
 * używa DOKŁADNIE tych samych klas co prawdziwa karta produktów
 * (.center-column.page) oraz ten sam mechanizm odstępu między
 * kolumnami (.row:has(> .left-column):has(> .center-column) { gap: 20px }
 * w apple-like-redesign.css). Sprawdzone na żywo w Chrome: to jedyny
 * sposób, żeby box wyrównywał się co do piksela z kartą powyżej na
 * KAŻDEJ szerokości ekranu — reimplementacja tej szerokości osobnym
 * CSS-em (wcześniejsza wersja, max-width/col-md-8 wprost) rozjeżdżała
 * się o kilkanaście px i dawała za wcześnie zawijający się tekst.
 * -------------------------------------------------------------------- */

/* Bez własnego margin-top: karta produktów (.center-column.page) ma
   już margin-bottom: 20px !important — to jest STANDARDOWY odstęp,
   jakim ten motyw rozdziela białe karty od siebie (ten sam co wszędzie
   indziej w "Apple-like redesign"). Dokładanie tu WŁASNEGO marginesu
   (wcześniej 1.5rem/24px) sumowało się z tamtym i dawało niepotrzebnie
   wielką przerwę — sprawdzone na żywo: 20px (sam margines karty)
   wygląda spójnie z resztą strony, bez dokładania niczego od siebie. */
.dobre-audio-category-footer-standalone {
  margin-bottom: 2rem;
}

/* Pusty spacer po lewej (klasa "left-column" użyta tylko po to, żeby
   .row:has(...) złapało gap:20px) — wygaszamy jego własny wygląd karty,
   ma być niewidoczny, samo puste miejsce.
   WAŻNE: reguła ".left-column" w apple-like-redesign.css ustawia
   background/border/box-shadow/padding z !important — bez !important
   też tutaj ta reguła by wygrała (kolejność w <head> nie ma znaczenia
   przy remisie !important vs bez), więc też musi być !important.
   Sprawdzone na żywo — bez tego po lewej wyskakuje widmowy biały box. */
.dobre-audio-footer-spacer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Tekst ma WYPEŁNIAĆ box (żadnego max-width) — .center-column.page już
   nadaje białe tło/promień/cień/padding, tu tylko typografia treści.
   Tak samo: nadpisujemy jawnie na wypadek jakiejś reguły motywu na
   .rich-text z max-width — !important dla pewności. */
.category__footer--standalone .category__additional-description {
  max-width: none !important;
  line-height: 1.7;
  color: #444;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .dobre-audio-category-footer-standalone {
    margin-bottom: 1.5rem;
  }
}