/* ==========================================================================
   ALLMEBLO 2026-08-06 - WNETRZE PANELU FILTROW pm_advancedsearch4.

   ZAKRES: wylacznie to, co widac PO ROZWINIECIU panelu. Pasek nad listingiem
   (licznik, przycisk "Filtruj", sortowanie, paginacja) oraz sam przycisk
   otwierajacy naleza do category-subheader.css i NIE sa tu ruszane.

   KOLEJNOSC WCZYTYWANIA: ten arkusz stoi w layout-both-columns.tpl PO
   category-subheader.css, wiec przy rownej specyficznosci wygrywa. Dzieki
   temu nie ma tu ani jednego !important.

   CO SIE ZMIENILO W SAMYM MODULE (baza, nie CSS) - zeby ten plik dalo sie
   czytac bez zagladania do panelu administracyjnego:
     - display_type grup 5,6,8,9,10,14,15: 1 (lista rozwijana) -> 4 (pola
       wyboru). Lista rozwijana zawsze wymaga kliknięcia, zeby zobaczyc
       zawartosc, a wlasciciel chcial wszystko widoczne od razu.
     - is_multicriteria=1 dla grup cech: mozna zaznaczyc kilka wartosci.
       Grupa "Kategoria" zostaje jednokrotna (przelaczniki radio).
     - hidden=0 dla wszystkich grup: znika odsylacz "Pokaż/ukryj opcje",
       ktory chowal 4 z 7 grup.
     - show_hide_crit_method=0: znika zwijanie kryteriow wewnatrz grupy
       (klasa PM_ASCriterionsToggleHover) i odsylacz "Pokaż wszystkie".

   UKLAD: siatka CSS auto-fill zamiast kolumn Bootstrapa. Modul wypisuje na
   kazdej grupie stale klasy "col-xs-12 col-sm-3" (czyli sztywne 4 kolumny
   od 576 px), przez co przy 320 px kolumny byly jednoelementowe, a przy
   1920 px marnowala sie polowa szerokosci. Siatka dobiera liczbe kolumn do
   dostepnej szerokosci sama.

   DLUGIE GRUPY: zmierzone na kategorii 7 (Narożniki, 260 produktow) po
   przejsciu na pola wyboru: Kategoria 44 pozycje = 1208 px wysokosci,
   Szerokosc mebla 29 pozycji = 807 px, caly panel 1922 px. Dlatego lista
   wewnatrz grupy dostaje wlasne przewijanie po przekroczeniu progu. Grupa
   zostaje widoczna i uzyteczna od razu, bez zadnego klikniecia, a panel ma
   przewidywalna wysokosc.
   ========================================================================== */

.PM_ASBlockOutput {
    --alm-f-green: #2a7c00;      /* kolor marki, 5,29:1 do bieli            */
    --alm-f-green-dark: #1f5c00; /* stan aktywny/hover, 7,88:1 do bieli     */
    --alm-f-ink: #2b2b2b;        /* tekst podstawowy, 13,9:1 do bieli       */
    --alm-f-muted: #5b6654;      /* licznik przy pozycji, 6,05:1 do bieli   */
    --alm-f-ctrl: #5f6b57;       /* obrys kontrolki, 5,69:1 - wymog 3:1     */
    --alm-f-card: #dfe5da;       /* obrys karty grupy, czysta dekoracja     */
    --alm-f-tint: #eef5e9;       /* podswietlenie zaznaczonego wiersza      */
    --alm-f-radius: 8px;
    /* Promien przyciskow. 2026-08-06 odczytane z zywej strony: theme.css
       konczy sie regula .btn{border-radius:20px!important}, wiec KAZDY
       przycisk w sklepie (CTA produktu, koszyk, stopka, "Wróć na stronę
       główną") ma dokladnie 20 px. Nasze kontrolki filtrow mialy 8 px
       i odstawaly. --alm-f-radius (8 px) zostaje dla KART grup i pol
       tekstowych, ktore przyciskami nie sa. */
    --alm-f-btn-radius: 20px;
}

/* --------------------------------------------------------------------------
   1. TLO PANELU

   Wlasciciel: "po rozsunieciu na category biale tlo". Przed zmiana panel mial
   #f1f7ec (zielonkawy) z category-subheader.css. Tu wracamy do czystej bieli;
   podzial na grupy niosa teraz obramowania kart, a nie kolor tla.
   -------------------------------------------------------------------------- */

.PM_ASBlockOutput .card-block {
    padding: 1rem;
    background: #fff;
}

/* --------------------------------------------------------------------------
   2. SIATKA GRUP

   .PM_ASCriterionsGroupList ma od modulu klase "row", a kazda grupa
   "col-xs-12 col-sm-3". Zerujemy skutki obu, zeby siatka miala pelna kontrole
   nad szerokoscia. Selektory sa dwuczlonowe (0,2,0), wiec bija reguly siatki
   Bootstrapa z theme.css (0,1,0) bez !important.
   -------------------------------------------------------------------------- */

.PM_ASBlockOutput .PM_ASCriterionsGroupList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.PM_ASBlockOutput .PM_ASCriterionsGroup {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: none;
    float: none;
    padding: 0;
    margin: 0;
}

/* Karta pojedynczej grupy. */
.PM_ASBlockOutput .PM_ASCriterionsOutput {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0.625rem 0.75rem 0.75rem;
    border: 1px solid var(--alm-f-card);
    border-radius: var(--alm-f-radius);
    background: #fff;
}

.PM_ASBlockOutput .PM_ASCriterions {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.PM_ASBlockOutput .PM_ASCriterionsGroupOuter {
    min-height: 0;
}

/* --------------------------------------------------------------------------
   3. NAGLOWEK GRUPY

   Modul renderuje go jako <p class="PM_ASCriterionsGroupTitle h4">. Nadpisanie
   szablonu w motywie dokłada na .PM_ASCriterionsOutput role="group" oraz
   aria-labelledby wskazujace na ten naglowek, wiec czytnik ekranu oglasza
   nazwe grupy przed kazdym polem wyboru.
   -------------------------------------------------------------------------- */

.PM_ASBlockOutput .PM_ASCriterionsGroupTitle {
    margin: 0 0 0.5rem;
    padding: 0 0 0.4375rem;
    border-bottom: 1px solid var(--alm-f-card);
    color: var(--alm-f-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
}

.PM_ASBlockOutput .PM_ASCriterionsGroupIcon {
    width: 18px;
    height: 18px;
    margin-right: 0.375rem;
    vertical-align: -3px;
}

/* --------------------------------------------------------------------------
   4. LISTA POZYCJI

   Prog przewijania: 4 wiersze na telefonie, 6 na desktopie. Cien u dolu
   sygnalizuje, ze lista ma ciag dalszy (samo pasmo przewijania na macOS
   i na telefonie bywa niewidoczne do pierwszego dotkniecia).
   -------------------------------------------------------------------------- */

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox {
    max-height: 13.5rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
    list-style: none;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--alm-f-ctrl) #fff;
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox::-webkit-scrollbar {
    width: 8px;
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox::-webkit-scrollbar-thumb {
    background: #9aa693;
    border-radius: 4px;
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox::-webkit-scrollbar-track {
    background: #f2f4f0;
    border-radius: 4px;
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox > li {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
}

/* Modul opakowuje kazde pole w <div class="checkbox"> albo <div class="radio">,
   a <input> jest RODZENSTWEM <label>, nie jego dzieckiem. Bez ukladu flex na
   tym opakowaniu przegladarka stawia pole wyboru w osobnym wierszu nad
   tekstem (zmierzone: wiersz miał 64 px zamiast 44 px i wygladal na dwie
   pozycje listy zamiast jedna). Do tego klasy .checkbox/.radio maja w
   theme.css wlasne marginesy i position:relative - zerujemy je. */
.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox > li > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: static;
    margin: 0;
    padding: 0;
    min-height: 0;
}

/* Cały wiersz jest celem dotkniecia. Wysokosc 44 px spelnia WCAG 2.5.8
   (Target Size) takze na desktopie. */
.PM_ASBlockOutput .PM_ASLabelCheckbox {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0.25rem 0.375rem 0.25rem 0;
    border-radius: 6px;
    color: var(--alm-f-ink);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.35;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox > li > div:hover .PM_ASLabelCheckbox {
    background: var(--alm-f-tint);
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox input[type="checkbox"],
.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox input[type="radio"] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    position: static;
    opacity: 1;
    accent-color: var(--alm-f-green);
    cursor: pointer;
}

/* Fokus z klawiatury. Obwodka idzie na etykiete, bo to ona jest widocznym
   celem; sam <input> ma 20 px i sama obwodka na nim gubi sie w wierszu. */
.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox input:focus-visible {
    outline: 2px solid var(--alm-f-green-dark);
    outline-offset: 2px;
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox input:focus-visible ~ .PM_ASLabelCheckbox {
    background: var(--alm-f-tint);
}

/* Odstep miedzy polem wyboru a lewa krawedzia karty, gdy wiersz jest
   podswietlony - podswietlenie ma obejmowac takze pole. */
.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox > li > div {
    padding: 0 0.375rem;
    border-radius: 6px;
}

.PM_ASBlockOutput .PM_ASCriterionGroupCheckbox > li > div:hover {
    background: var(--alm-f-tint);
}

/* Odsylacz wewnatrz etykiety. Modul wstawia go zawsze, ale sensowny adres ma
   tylko przy stronach SEO - nadpisanie szablonu zostawia <a> wylacznie w tym
   przypadku, a w pozostalych renderuje zwykly <span>. */
.PM_ASBlockOutput .PM_ASLabelLink,
.PM_ASBlockOutput .PM_ASLabelText {
    display: flex;
    align-items: baseline;
    gap: 0.3125rem;
    flex-wrap: wrap;
    color: inherit;
    text-decoration: none;
}

.PM_ASBlockOutput .PM_ASLabelLink:hover {
    color: inherit;
    text-decoration: none;
}

/* Licznik produktow przy pozycji. Modul renderuje go jako <div>, wiec
   trzeba wymusic uklad w linii. */
.PM_ASBlockOutput .PM_ASCriterionNbProduct {
    display: inline;
    color: var(--alm-f-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Pozycja zaznaczona. */
.PM_ASBlockOutput .PM_ASLabelCheckboxSelected {
    background: var(--alm-f-tint);
    color: var(--alm-f-green-dark);
    font-weight: 700;
}

.PM_ASBlockOutput .PM_ASLabelCheckboxSelected .PM_ASCriterionNbProduct {
    color: var(--alm-f-green-dark);
}

/* Pozycja bez wynikow. Modul daje jej disabled, wiec i tak jest nieklikalna;
   tu chodzi tylko o czytelny sygnal. Kontrast 4,58:1 - nadal czytelna. */
.PM_ASBlockOutput .PM_ASCriterionDisable > div > .PM_ASLabelCheckbox,
.PM_ASBlockOutput li.PM_ASCriterionDisable .PM_ASLabelCheckbox {
    color: #767676;
    cursor: not-allowed;
}

.PM_ASBlockOutput li.PM_ASCriterionDisable .PM_ASLabelCheckbox:hover {
    background: transparent;
}

/* Komunikat, gdy grupa nie ma zadnej dostepnej wartosci. */
.PM_ASBlockOutput .PM_ASCriterionNoChoice {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--alm-f-muted);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   4b. SZYBKIE SZUKANIE W DLUGIEJ GRUPIE

   Pole dokłada filtry.js grupom od 12 pozycji w gore (Kategoria: 44,
   Szerokosc mebla: 29). Nie ma atrybutu name, wiec nie trafia do zapytania
   filtrowania - dziala wylacznie po stronie przegladarki.
   -------------------------------------------------------------------------- */

.PM_ASBlockOutput .alm-f-szukaj {
    width: 100%;
    min-height: 40px;
    margin: 0 0 0.5rem;
    padding: 0 0.625rem;
    border: 1px solid var(--alm-f-ctrl);
    border-radius: 6px;
    background: #fff;
    color: var(--alm-f-ink);
    font-family: inherit;
    font-size: 0.8125rem;
}

.PM_ASBlockOutput .alm-f-szukaj::placeholder {
    color: #6a7364;
    opacity: 1;
}

.PM_ASBlockOutput .alm-f-szukaj:focus {
    outline: 2px solid var(--alm-f-green-dark);
    outline-offset: 1px;
    border-color: var(--alm-f-green-dark);
}

.PM_ASBlockOutput .alm-f-brak {
    margin: 0.25rem 0 0;
    color: var(--alm-f-muted);
    font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   5. SUWAK CENY (grupa 4, display_type=5, jQuery UI)
   -------------------------------------------------------------------------- */

.PM_ASBlockOutput .PM_ASCritRange {
    height: 6px;
    margin: 1.75rem 0.625rem 0.75rem;
    border: 0;
    border-radius: 3px;
    background: #dfe5da;
}

.PM_ASBlockOutput .PM_ASCritRange .ui-slider-range {
    background: var(--alm-f-green);
    border-radius: 3px;
}

.PM_ASBlockOutput .PM_ASCritRange .ui-slider-handle {
    top: 50%;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    border: 2px solid var(--alm-f-green-dark);
    border-radius: 50%;
    background: #fff;
    cursor: grab;
}

.PM_ASBlockOutput .PM_ASCritRange .ui-slider-handle:focus-visible {
    outline: 2px solid var(--alm-f-green-dark);
    outline-offset: 2px;
}

.PM_ASBlockOutput .PM_ASCritRangeValue {
    display: block;
    color: var(--alm-f-ink);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
}

/* --------------------------------------------------------------------------
   6. CZYSZCZENIE WYBORU

   "Wyczysc filtry" (.PM_ASResetSearch) modul renderuje PRZED formularzem
   i pokazuje JS-em dopiero, gdy cos jest zaznaczone. "Wyczysc" w obrebie
   grupy (.PM_ASResetGroup) pojawia sie tak samo warunkowo.
   -------------------------------------------------------------------------- */

/* UWAGA: as4_plugin-17.js pokazuje ten odsylacz przez .show(), czyli wpisuje
   mu styl "display: block" PROSTO W ATRYBUT style. Stylu wpisanego w atrybut
   nie da sie nadpisac arkuszem bez !important, wiec zamiast walczyc o display
   ograniczamy szerokosc (width nie jest ustawiany inline) i centrujemy tekst
   w pionie wysokoscia wiersza zamiast ukladem flex. Bez tego odsylacz
   rozciagal sie na cala szerokosc panelu - zmierzone 1256 px. */
.PM_ASBlockOutput .PM_ASResetSearch {
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    margin: 0 0 0.75rem;
    padding: 0 1.125rem;
    border: 1px solid var(--alm-f-ctrl);
    border-radius: var(--alm-f-btn-radius);
    color: var(--alm-f-green-dark);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 42px;
    text-align: left;
    text-decoration: none;
}

.PM_ASBlockOutput .PM_ASResetSearch:hover {
    background: var(--alm-f-tint);
    color: var(--alm-f-green-dark);
    text-decoration: none;
}

.PM_ASBlockOutput .PM_ASResetGroup {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    margin-top: 0.375rem;
    color: var(--alm-f-green-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: underline;
}

.PM_ASBlockOutput .PM_ASResetGroup:focus-visible,
.PM_ASBlockOutput .PM_ASResetSearch:focus-visible {
    outline: 2px solid var(--alm-f-green-dark);
    outline-offset: 2px;
}

/* Komunikat w panelu, gdy wybrane filtry nie daja zadnego produktu. Wstawia go
   filtry.js. Sam listing pokazuje w tej sytuacji tylko sucho "Pokazano 1-0
   z 0 pozycji" u dolu strony, wiec przy dlugim panelu filtrow uzytkownik
   moglby tego nie zauwazyc. */
.PM_ASBlockOutput .alm-f-pusto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid #9a3412;
    border-left-width: 4px;
    border-radius: var(--alm-f-radius);
    background: #fff7ed;
    color: #7c2d12;
    font-size: 0.875rem;
    font-weight: 600;
}

/* Komunikat dla czytnikow ekranu o zmienionej liczbie wynikow.
   Wstawia go filtry.js, tresc odswieza po kazdym filtrowaniu. */
.alm-f-live {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   6b. AKORDEON GRUP NA TELEFONIE  (< 768 px)

   Wlasciciel: "filtrowanie pm4 na mobile moze miec zwiniete opcje same
   w sobie po rozwinieciu calego filtrowania". Czyli po dotknieciu "Filtruj"
   uzytkownik ma dostac SPIS grup, a nie sciane wszystkich pozycji naraz.

   ZMIERZONE na kategorii 88 (Narożniki, 7 grup) przy szerokosci 390 px:
   panel .card-block mial 1849 px wysokosci (Kategoria 329, Szerokosc mebla
   291, Styl 243, Informacje dodatkowe 243, Powierzchnia spania 235, Idealne
   przeznaczenie 235, Cena 122). Po zwinieciu zostaje sam spis naglowkow.

   CO ROBI JS (filtry.js, sekcja 2b): dokłada do naglowka grupy <button>
   z aria-expanded i aria-controls, klase .alm-f-akordeon na .PM_ASCriterions
   oraz .is-open na grupach rozwinietych. Grupa z zaznaczonym filtrem
   rozwija sie sama. Na desktopie JS akordeon ROZBIERA, wiec cala ta sekcja
   moze zyc wylacznie w media query telefonu.

   DLACZEGO NIE display:none SAMO Z SIEBIE: zwijania nie da sie animowac.
   Uzywamy grid-template-rows 0fr -> 1fr (animowalne, bez znajomosci
   wysokosci tresci), a dla przegladarek bez tej obslugi zostaje
   display:none jako wariant zapasowy - stad kolejnosc i @supports ponizej.
   visibility:hidden przy zwinietej grupie usuwa jej tresc z drzewa
   dostepnosci i z kolejnosci tabulacji; przelacza sie bez opoznienia przy
   otwieraniu i dopiero PO animacji przy zamykaniu.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

    /* Karta grupy: przy zwinietej tresci calym wnetrzem jest naglowek,
       wiec wlasny odstep pionowy karty tylko dubluje wysokosc przycisku. */
    .PM_ASBlockOutput.alm-f-akordeon-on .PM_ASCriterionsOutput {
        padding: 0 0.75rem;
    }

    .PM_ASBlockOutput.alm-f-akordeon-on .alm-f-akordeon.is-open {
        padding-bottom: 0.75rem;
    }

    /* Naglowek przestaje byc kreska nad lista, a staje sie wierszem spisu.
       Obramowanie dolne pojawia sie dopiero po rozwinieciu. */
    .PM_ASBlockOutput .alm-f-akordeon > .PM_ASCriterionsGroupTitle {
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }

    .PM_ASBlockOutput .alm-f-akordeon.is-open > .PM_ASCriterionsGroupTitle {
        margin-bottom: 0.5rem;
        padding-bottom: 0.4375rem;
        border-bottom: 1px solid var(--alm-f-card);
    }

    /* Przelacznik. Cel dotykowy 48 px na pelnej szerokosci karty - z zapasem
       ponad wymagane 44x44 px (WCAG 2.5.8). */
    .PM_ASBlockOutput .alm-f-akord__btn {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 48px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--alm-f-ink);
        font-family: inherit;
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.25;
        text-align: left;
        text-transform: none;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .PM_ASBlockOutput .alm-f-akord__nazwa {
        flex: 1 1 auto;
        min-width: 0;
    }

    .PM_ASBlockOutput .alm-f-akord__btn:focus:not(:focus-visible) {
        outline: none;
    }

    .PM_ASBlockOutput .alm-f-akord__btn:focus-visible {
        outline: 2px solid var(--alm-f-green-dark);
        outline-offset: -2px;
        border-radius: 6px;
    }

    /* Ile pozycji w tej grupie jest zaznaczonych. Biel na #2a7c00 to 5,29:1. */
    .PM_ASBlockOutput .alm-f-akord__licznik {
        flex: 0 0 auto;
        min-width: 24px;
        height: 24px;
        padding: 0 0.4375rem;
        border-radius: 12px;
        background: var(--alm-f-green);
        color: #fff;
        font-size: 0.75rem;
        font-weight: 700;
        line-height: 24px;
        text-align: center;
        white-space: nowrap;
    }

    .PM_ASBlockOutput .alm-f-akord__licznik[hidden] {
        display: none;
    }

    /* Strzalka: dwa boki kwadratu obrocone o 45 stopni. Kontrast obrysu
       do bieli 5,69:1, czyli powyzej wymaganych 3:1 dla elementu
       nietekstowego. */
    .PM_ASBlockOutput .alm-f-akord__strzalka {
        flex: 0 0 auto;
        width: 9px;
        height: 9px;
        margin: -3px 4px 0 0;
        border-right: 2px solid var(--alm-f-ctrl);
        border-bottom: 2px solid var(--alm-f-ctrl);
        transform: rotate(45deg);
        transition: transform 0.22s ease;
    }

    .PM_ASBlockOutput .alm-f-akordeon.is-open .alm-f-akord__strzalka {
        margin-top: 3px;
        transform: rotate(-135deg);
    }

    /* Wariant zapasowy dla przegladarek bez grid-template-rows:0fr. */
    .PM_ASBlockOutput .alm-f-akordeon:not(.is-open) > .PM_ASCriterionsGroupOuter,
    .PM_ASBlockOutput .alm-f-akordeon:not(.is-open) > .PM_ASResetGroup,
    .PM_ASBlockOutput .alm-f-akordeon:not(.is-open) > .PM_ASSkipGroup {
        display: none;
    }
}

@supports (grid-template-rows: 0fr) {
    @media (max-width: 767px) {
        .PM_ASBlockOutput .alm-f-akordeon > .PM_ASCriterionsGroupOuter {
            display: grid;
            grid-template-rows: 1fr;
            overflow: hidden;
            visibility: visible;
            transition: grid-template-rows 0.22s ease;
        }

        .PM_ASBlockOutput .alm-f-akordeon:not(.is-open) > .PM_ASCriterionsGroupOuter {
            display: grid;
            grid-template-rows: 0fr;
            visibility: hidden;
            transition: grid-template-rows 0.22s ease, visibility 0s linear 0.22s;
        }

        /* Bez tego dziecko siatki ma domyslne min-height:auto i wiersz 0fr
           i tak zajmuje pelna wysokosc tresci. */
        .PM_ASBlockOutput .alm-f-akordeon > .PM_ASCriterionsGroupOuter > * {
            min-height: 0;
        }
    }
}

/* Uzytkownik prosil system o ograniczenie ruchu - zwijanie natychmiastowe. */
@media (prefers-reduced-motion: reduce) {
    .PM_ASBlockOutput .alm-f-akordeon > .PM_ASCriterionsGroupOuter,
    .PM_ASBlockOutput .alm-f-akordeon:not(.is-open) > .PM_ASCriterionsGroupOuter,
    .PM_ASBlockOutput .alm-f-akord__strzalka {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   7. SZEROKOSCI

   320-575 px  -> jedna kolumna, listy skrocone do 4 wierszy.
   576-767 px  -> siatka sama zlapie dwie kolumny (2 x 220 px + odstep).
   >= 768 px   -> listy do 6 wierszy, przycisk "Pokaż wyniki" w jednej linii.
   >= 1400 px  -> szersza minimalna kolumna, zeby dlugie nazwy sie nie lamaly.
   -------------------------------------------------------------------------- */

@media (max-width: 575px) {
    .PM_ASBlockOutput .card-block {
        padding: 0.75rem;
    }

    .PM_ASBlockOutput .PM_ASCriterionsGroupList {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .PM_ASBlockOutput .PM_ASCriterionGroupCheckbox {
        max-height: 11.5rem;
    }

    /* Przycisk zamykajacy panel (dokłada go category-subheader.js) przykleja
       sie do dolu ekranu, zeby po przewinieciu dlugiej listy filtrow nie
       trzeba bylo wracac na gore. */
    .PM_ASBlockOutput .alm-as-close {
        position: sticky;
        bottom: 0.5rem;
        z-index: 2;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    }
}

@media (min-width: 1400px) {
    .PM_ASBlockOutput .PM_ASCriterionsGroupList {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Uzytkownik prosil system o ograniczenie ruchu. */
@media (prefers-reduced-motion: reduce) {
    .PM_ASBlockOutput .PM_ASLabelCheckbox {
        transition: none;
    }
}