/* Arkusz stron listingowych: kategoria, promocje, nowosci, wyszukiwarka,
   bestsellery, producent. Laduje go catalog/listing/product-list.tpl (blok
   hook_extra w <head>), czyli kazda strona z $listing; taka strona ma na
   <body> klase anmil-listing (nadaje layouts/layout-both-columns.tpl).
   Prefiks kazdej reguly to :is() z id strony kategorii i ta klasa, a nie
   sama klasa: :is() przyjmuje wage najsilniejszego argumentu, wiec regula
   zachowuje wage ID sprzed etapu 03. Sklejka CCC ma ~305 selektorow z ID
   celujacych w #left-column, #search_filters, #js-product-list, #products,
   ktore z gola klasa (0,1,1) zaczelyby wygrywac - id kategorii zostaje
   w :is() wylacznie jako nosnik wagi (plan _tools/front/plany/etap-03.md,
   par. 2c). */
body:is(#category, .anmil-listing) {
    background: #f7f7f7;
}

body:is(#category, .anmil-listing) #wrapper {
    background: #f7f7f7;
}

body:is(#category, .anmil-listing) #wrapper > .container.tv-left-layout {
    padding-right: 0;
    padding-left: 0;
}

body:is(#category, .anmil-listing) .breadcrumb {
    margin: 14px 0 8px;
    padding: 0;
    background: transparent;
    color: #8b8b8b;
    font-size: 14px;
}

/* Opis kategorii (sekcja SEO pod lista). Motyw daje mu margin: 0 -15px,
   przez co wychodzil poza kontener - przy 1440px tekst konczyl sie na 1440
   zamiast 1425, a na telefonie zaczynal sie na -15px. */
body:is(#category, .anmil-listing) .block-category {
    margin-left: 0;
    margin-right: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body:is(#category, .anmil-listing) #wrapper > .container.tv-left-layout > .row {
    position: relative;
    display: block;
    margin-right: 0;
    margin-left: 0;
}

body:is(#category, .anmil-listing) #content-wrapper {
    float: none;
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

body:is(#category, .anmil-listing) #content-wrapper > .theiaStickySidebar,
body:is(#category, .anmil-listing) #main {
    width: 100%;
}

body:is(#category, .anmil-listing) .anmil-category-title-row {
    margin: 0 0 10px;
    background: transparent;
    border: 0;
}

body:is(#category, .anmil-listing) .tv-sub-category-title-wrapper {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Tytul listingu to <h1> (product-list.tpl). theme.css wymusza naglowkom
   "h1, ... { font-family: 'Cabinet Grotesk' !important }" - inherit
   zostawia tytul w kroju strony (Satoshi), jak gdy byl <div>. Marginesy,
   rozmiar, grubosc i kolor h1 z theme.css nadpisuje ta sama regula. */
body:is(#category, .anmil-listing) .tv-sub-category-title-wrapper .tv-sub-category-title {
    margin: 0;
    padding: 0;
    color: #202020;
    font-family: inherit !important;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: none !important;
}

/* Dodatki w tytule listingu (decyzja 03.6), oba inline z tekstem tytulu:
   - krzyzyk wyszukiwarki (search.tpl): szare kolko, powrot na strone glowna;
   - przyrostek z aktywnej opcji filtru "extras" (product-list.tpl: "Lozka
     w promocji") - ten sam kroj, rozmiar i grubosc co tytul (dziedziczy),
     tylko kolor podpowiedzi z custom.css (decyzja 03.8: #767676 =
     --anmil-hint); pusty span (brak filtra) bez marginesu i paddingu nie
     zajmuje miejsca. */
body:is(#category, .anmil-listing) .anmil-listing-title-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    border-radius: 50%;
    background: #8b8b8b;
    color: #fff;
    vertical-align: middle;
    text-decoration: none;
}

body:is(#category, .anmil-listing) .anmil-listing-title-clear:is(:hover, :focus) {
    background: #545454;
}

/* odstep od tytulu daje spacja wewnatrz spana (product-list.tpl / custom.js),
   nie margin - textContent = "Meble w promocji" */
body:is(#category, .anmil-listing) .anmil-listing-title-suffix {
    color: var(--anmil-hint);
}

@media (max-width: 767px) {
    body:is(#category, .anmil-listing) .anmil-listing-title-clear {
        width: 28px;
        height: 28px;
    }
}

body:is(#category, .anmil-listing) .anmil-category-subcategories {
    margin: 0 0 34px;
    position: relative;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body:is(#category, .anmil-listing) .tvcategory-name-image {
    position: relative;
    display: block;
    max-height: none;
    padding: 0 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    background: transparent !important;
    cursor: grab;
    scroll-snap-type: x proximity;
}

body:is(#category, .anmil-listing) .tvcategory-name-image::-webkit-scrollbar {
    height: 0;
}

/* Zapasowy odstep, gdy Swiper sie nie zainicjuje. Gdy dziala, rozstaw robi
   spaceBetween z assets/js/custom.js (te same 6px, 14z.1) i gap musi byc 0. */
body:is(#category, .anmil-listing) .tvcategory-name-image .swiper-wrapper {
    display: flex;
    gap: 6px;
}

body:is(#category, .anmil-listing) .tvcategory-name-image.swiper-initialized .swiper-wrapper {
    gap: 0;
}

body:is(#category, .anmil-listing) .tv-sub-category-wrapper {
    flex: 0 0 120px;
    width: 120px !important;
    padding: 0;
    scroll-snap-align: start;
}

body:is(#category, .anmil-listing) .tv-sub-category-wrapper.swiper-slide {
    height: auto;
}

body:is(#category, .anmil-listing) .tv-sub-category-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Kafel miniatury kategorii - kwadrat. Rozmiar trzymamy w jednym miejscu:
   szerokosc slajdu (.tv-sub-category-wrapper) i bok kafla sa zawsze rowne,
   zeby kafel wypelnial slajd bez doklejania paddingu. */
body:is(#category, .anmil-listing) .tv-category-image {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 120px;
    height: 120px;
    padding: 10px;
    overflow: hidden;
    background: #f1f1ef;
    border-radius: 5px;
}

body:is(#category, .anmil-listing) .tv-category-image a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

body:is(#category, .anmil-listing) .tv-category-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    /* Category thumbs are white-background JPGs — multiply blends the white
       into the tile background so the tile reads as one uniform surface */
    mix-blend-mode: multiply;
}

body:is(#category, .anmil-listing) .tvcategory-name {
    text-align: left;
    /* Odstep od kafla wnosi gap kolumny (.tv-sub-category-inner, 4px);
       motyw dokladal tu jeszcze 15px marginesu i podpis odjezdzal w dol. */
    margin-top: 0;
}

/* Nazwa w najwyzej 2 liniach na kazdej szerokosci (14z.1, rejestr "14z (uwagi
   wlasciciela 27.09, cz. 2)"): telefon mial wlasna regule nowrap + ellipsis
   i ucinal po 1 linii ("Lozka Tapic..." - podkategorie o wspolnym poczatku
   byly nie do odroznienia), komputer lamal najdluzsze na 3 ("Wersalki Z
   Pojemnikiem Na Posciel"). Wyrownanie do lewej niesie .tvcategory-name wyzej. */
body:is(#category, .anmil-listing) .tvcategory-name .category-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #202020;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
}

body:is(#category, .anmil-listing) .anmil-subcategory-nav {
    position: absolute;
    top: 45px;
    z-index: 3;
    width: 32px;
    height: 48px;
    padding: 0;
    border: 0;
    background: rgba(245, 245, 245, .96);
    color: #202020;
    cursor: pointer;
    transition: color .2s ease, opacity .2s ease;
}

body:is(#category, .anmil-listing) .anmil-subcategory-prev {
    left: 0;
}

body:is(#category, .anmil-listing) .anmil-subcategory-next {
    right: 0;
}

body:is(#category, .anmil-listing) .anmil-subcategory-nav::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 11px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}

body:is(#category, .anmil-listing) .anmil-subcategory-prev::before {
    transform: translate(-35%, -50%) rotate(-135deg);
}

body:is(#category, .anmil-listing) .anmil-subcategory-next::before {
    transform: translate(-65%, -50%) rotate(45deg);
}

body:is(#category, .anmil-listing) .anmil-subcategory-nav:hover {
    color: #b70000;
}

body:is(#category, .anmil-listing) .anmil-subcategory-nav.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

/* #left-column / .anmil-cat-sidebar — desktop: normal flex child */
body:is(#category, .anmil-listing) #left-column {
    position: sticky;
    top: 20px;
    align-self: flex-start;
    flex: 0 0 284px;
    width: 284px;
    max-width: 284px;
    padding: 0;
    z-index: 1;
    max-height: none !important;
    overflow: visible !important;
    opacity: 1;
    transform: none;
    transition: none;
}

body:is(#category, .anmil-listing) #left-column > .theiaStickySidebar,
body:is(#category, .anmil-listing) #left-column .theiaStickySidebar {
    position: static !important;
    transform: none !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body:is(#category, .anmil-listing) #left-column .tvleft-column-remove,
body:is(#category, .anmil-listing) #left-column .tvleft-customer-services-wrapper-info,
body:is(#category, .anmil-listing) #left-column .tvleft-product-wrapper,
body:is(#category, .anmil-listing) #left-column .tvfilter-brand-list-wrapper,
body:is(#category, .anmil-listing) #left-column .tvfilter-supplier-list-wrapper,
body:is(#category, .anmil-listing) #left-column .tvcmscustomer-services,
body:is(#category, .anmil-listing) #left-column .tvcms-left-testimonial,
body:is(#category, .anmil-listing) #left-column .tvcmsblog-left-side {
    display: none !important;
}

body:is(#category, .anmil-listing) #left-column #search_filters {
    display: block;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    overflow: visible;
}

body:is(#category, .anmil-listing) #left-column .tvleft-right-penal-all-block {
    padding: 26px 24px;
    max-height: none !important;
    overflow: visible !important;
}

body:is(#category, .anmil-listing) #left-column .tvleft-right-title-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
    background: transparent;
}

body:is(#category, .anmil-listing) #left-column .tvleft-right-title {
    color: #222;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

body:is(#category, .anmil-listing) #left-column .tvleft-right-title-toggle {
    display: none;
}

/* "Wyczyść filtry" pod naglowkiem panelu - modul renderuje ten przycisk
   tylko gdy cokolwiek jest wybrane, wiec nie ma go czym warunkowac w JS.
   Wizualnie nalezy do naglowka, dlatego kreska oddzielajaca od listy
   facetow przechodzi POD niego (border .tvserach-filter-wrapper -> tutaj). */
body:is(#category, .anmil-listing) #left-column .tvserach-filter-wrapper:has(> .clear-all-wrapper) {
    border-top: 0;
    padding-top: 0;
}

body:is(#category, .anmil-listing) #left-column .clear-all-wrapper {
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    text-align: left;
}

body:is(#category, .anmil-listing) #left-column .js-search-filters-clear-all,
body:is(#category, .anmil-listing) #js-product-list-top .js-search-filters-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0 4px 7px 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #222;
    border-radius: 0;
    box-shadow: none;
    color: #222;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    /* motyw ustawia .btn na capitalize - dalby "Wyczyść Filtry" */
    text-transform: none;
    text-decoration: none;
}

body:is(#category, .anmil-listing) #left-column .js-search-filters-clear-all:hover,
body:is(#category, .anmil-listing) #js-product-list-top .js-search-filters-clear-all:hover {
    color: #000;
    border-bottom-color: #000;
    box-shadow: none;
}

body:is(#category, .anmil-listing) #left-column .js-search-filters-clear-all i,
body:is(#category, .anmil-listing) #js-product-list-top .js-search-filters-clear-all i {
    font-size: 18px;
    line-height: 1;
}

/* "Wyczyść filtry" przy liczniku produktow (custom.js). Na desktopie zbedne,
   BO panel ma swoje - modul nie renderuje go tylko przy 0 wynikow, a wtedy
   czyszczenie daje komunikat (.anmil-empty-clear, sekcja 8 w custom.js)
   i JS tego przycisku nie tworzy. Stad warunek zamiast zwyklego ukrycia. */
body:is(#category, .anmil-listing):has(#left-column .clear-all-wrapper) #js-product-list-top .clear-all-wrapper {
    display: none;
}

body:is(#category, .anmil-listing) #left-column .tvsearch-filter-content-wrapper {
    display: block;
    max-height: none !important;
    overflow: visible !important;
}

body:is(#category, .anmil-listing) #left-column .facet {
    width: 100%;
    margin: 0;
    padding: 22px 0;
    border-top: 1px solid #ededed;
}

body:is(#category, .anmil-listing) #left-column .facet:first-child {
    border-top: 0;
}

body:is(#category, .anmil-listing) #left-column .facet-title {
    margin: 0 0 14px;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
}

/* Sekcja "Wybrane filtry" w panelu przy 0 wynikow (JS, emptyState) - markup
   facetu z facets.tpl, ale lista bez klasy tvfilter-search-types-dropdown
   (scalanie panelu w custom.js bierze taka liste za facet z serwera), wiec
   zerowanie marginesow listy ma tu. */
body:is(#category, .anmil-listing) #left-column .tvfilter-search-types-dropdown,
body:is(#category, .anmil-listing) #left-column .anmil-facet-selected ul {
    margin: 0;
    padding: 0;
    max-height: none !important;
    overflow: visible !important;
}

body:is(#category, .anmil-listing) #left-column .facet li {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
}

body:is(#category, .anmil-listing) #left-column .facet-label {
    display: flex;
    /* checkbox rowno z PIERWSZA linia tekstu - przy dwuliniowych etykietach
       (np. "Kanapy i Wersalki") centrowanie zsuwalo go na srodek dwoch linii */
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    color: #545454;
    font-size: 16px;
    line-height: 1.35;
    white-space: normal;
}

body:is(#category, .anmil-listing) #left-column .anmil-facet-toggle {
    margin-top: 6px;
    color: #222;
    /* 12px/400 czytalo sie jak szare mimo koloru #222 */
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

body:is(#category, .anmil-listing) #left-column .anmil-facet-toggle:hover {
    color: #b70000;
}

body:is(#category, .anmil-listing) #left-column .facet-label a {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    margin: 0;
    color: #545454;
    font-size: 16px;
    line-height: 1.35;
}

body:is(#category, .anmil-listing) #left-column .facet-label .magnitude {
    flex: 0 0 auto;
    margin-left: 8px;
    color: #9a9a9a;
    font-size: 14px;
}

body:is(#category, .anmil-listing) #left-column .custom-checkbox,
body:is(#category, .anmil-listing) #left-column .custom-radio {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    /* (16px * 1.35 - 18px) / 2 - domyka checkbox do srodka pierwszej linii */
    margin: 1px 0 0;
}

body:is(#category, .anmil-listing) #left-column .custom-checkbox input,
body:is(#category, .anmil-listing) #left-column .custom-radio input {
    width: 18px;
    height: 18px;
}

/* Rozmiar, ramka, promien i kolor zaznaczenia sa wspolne dla calego
   sklepu - siedza w custom.css, w sekcji "KONTROLKI FORMULARZY".
   Tutaj zostaje tylko to, co jest specyficzne dla panelu filtrow. */
body:is(#category, .anmil-listing) #left-column .custom-radio > span {
    display: block;
}

body:is(#category, .anmil-listing) #products {
    margin-left: 0;
}

/* Suwak zakresu przeniesiony do custom.css - do etapu 03 ten plik ladowal
   sie WYLACZNIE na kategorii, wiec na /szukaj, /promocje, /nowe-produkty,
   bestsellerach i stronie producenta zostawal surowy suwak jQuery UI
   z bitmapowym torem (modules/ps_facetedsearch/views/dist/front.css). Ten
   sam filtr ceny, dwa zupelnie rozne widzety. Dzis plik laduje sie na kazdym
   listingu (body.anmil-listing); reguly zostaja w custom.css, bo dzialaja -
   scalenie tutaj to temat T5, poza etapem. */

/* Od/Do inputs above slider */
body:is(#category, .anmil-listing) #left-column .anmil-slider-inputs {
    margin-bottom: 4px;
}

body:is(#category, .anmil-listing) #left-column .anmil-slider-row {
    display: flex;
    gap: 10px;
}

body:is(#category, .anmil-listing) #left-column .anmil-slider-field {
    flex: 1;
}

body:is(#category, .anmil-listing) #left-column .anmil-slider-label {
    display: block;
    margin-bottom: 6px;
    color: #888;
    font-size: 14px;
    /* medium - spojnie z pozostalymi labelkami nad polami */
    font-weight: 500;
}

/* Wysokosc, tlo, ramke, promien, kolor i rozmiar pisma bierze regula
   `.anmil-slider-input` z custom.css (sekcja "KONTROLKI FORMULARZY") - tutaj
   zostaje tylko to, czym pole Od/Do rozni sie od reszty kontrolek: pelna
   szerokosc kolumny, wesze boki, tekst na srodku i bez strzalek liczbowych. */
body:is(#category, .anmil-listing) #left-column .anmil-slider-input {
    display: block;
    width: 100%;
    padding: 0 10px;
    text-align: center;
    -moz-appearance: textfield;
}

body:is(#category, .anmil-listing) #left-column .anmil-slider-input::-webkit-outer-spin-button,
body:is(#category, .anmil-listing) #left-column .anmil-slider-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

body:is(#category, .anmil-listing) #left-column .anmil-slider-input:focus {
    outline: 0;
    border-color: var(--anmil-focus);
    box-shadow: 0 0 0 3px var(--anmil-focus-ring);
}

body:is(#category, .anmil-listing) .tvleft-penal-product-top {
    margin-bottom: 0;
}

body:is(#category, .anmil-listing) #js-product-list-top.products-selection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 74px;
    margin: 0;
    /* 45px w poziomie - tyle co w kazdym innym bialym boxie sklepu */
    padding: 30px 45px 28px;
    background: #fff;
    /* zdejmuje ramke .tvcenter-block-product-section z custom.css */
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
}

body:is(#category, .anmil-listing) #js-product-list-top .tv-left-search-totle-product,
body:is(#category, .anmil-listing) #js-product-list-top .tv-grid-list-all-wrapper,
body:is(#category, .anmil-listing) #js-product-list-top .tvall-page-shortby {
    float: none;
    /* polowa na licznik, polowa na sortowanie; <= 991px nadpisuja reguly
       mobilne nizej (100% !important) */
    width: 50%;
    max-width: none;
    padding: 0;
}

/* "Produkty" w pierwszym wierszu, pod spodem licznik i "Wyczyść filtry"
   obok siebie. Wyrownanie po linii pisma, nie po dolnej krawedzi - inaczej
   podkreslenie przycisku wchodzi w rachunek i napis siada nizej niz licznik. */
body:is(#category, .anmil-listing) #js-product-list-top .tv-left-search-totle-product {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* jawnie do lewej - motyw daje tej kolumnie justify-content: center */
    justify-content: flex-start;
    column-gap: 16px;
}

/* flex, nie block: linia pisma wrappera to wtedy linia pisma przycisku,
   a nie niewidzialnej "strut" odziedziczonej po 16px otoczenia */
body:is(#category, .anmil-listing) #js-product-list-top .clear-all-wrapper {
    display: flex;
    margin: 0;
    padding: 0;
    border-bottom: 0;
}

/* #js-active-search-filters = chipy aktywnych filtrow modulu; licznik
   "Filtry (N)" w custom.js liczy je z DOM, wiec element musi istniec,
   ale nie jest pokazywany */
body:is(#category, .anmil-listing) #js-product-list-top .tv-grid-list-all-wrapper,
body:is(#category, .anmil-listing) #js-product-list-top .tvcms-left-column-wrapper,
body:is(#category, .anmil-listing) #js-product-list-top .tv_search_filter_wrapper,
body:is(#category, .anmil-listing) #js-active-search-filters {
    display: none !important;
}

body:is(#category, .anmil-listing) .anmil-products-heading {
    font-family: 'Cabinet Grotesk', sans-serif!important;
    display: block !important;
    width: 100%;
    margin: 0 0 4px;
    color: #222;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

body:is(#category, .anmil-listing) .tv-total-product {
    display: block !important;
    margin: 0;
}

body:is(#category, .anmil-listing) .tv-total-product-number {
    display: block !important;
    margin: 0;
    color: #333;
    font-size: 16px;
    line-height: 1.25;
}

body:is(#category, .anmil-listing) .anmil-products-count .tv-total-product-number span,
body:is(#category, .anmil-listing) .anmil-products-count .tv-total-product-number strong {
    display: inline !important;
    font: inherit;
}

body:is(#category, .anmil-listing) .sort-by-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
}

body:is(#category, .anmil-listing) .sort-by {
    display: none !important;
}

body:is(#category, .anmil-listing) .products-sort-order {
    width: 250px;
    padding: 0;
}

/* Wyglad przycisku sortowania przeniesiony do custom.css - do etapu 03 ten
   plik ladowal sie WYLACZNIE na kategorii (warunek w _partials/head.tpl),
   wiec trzymanie tu wymiarow oznaczalo, ze /szukaj, /promocje,
   /nowe-produkty, bestsellery i strona producenta dostawaly inny przycisk
   (40px, cien, ramka rgba(0,0,0,.07)) z theme.css:8048. Dzis plik laduje
   sie na kazdym listingu (body.anmil-listing); reguly zostaja w custom.css,
   bo dzialaja - scalenie tutaj to temat T5, poza etapem. */

body:is(#category, .anmil-listing) #js-product-list {
    /* 45px w poziomie - tyle co w kazdym innym bialym boxie sklepu */
    padding: 0 45px 28px;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: none;
}

/* Komunikat zamiast kafli, gdy filtry nie zwracaja nic. Siedzi w
   #js-product-list, wiec bialy kafel i marginesy boczne ma juz po nim -
   stoi dokladnie tam, gdzie normalnie sa produkty. Kremowy panel (makieta A
   etapu 03b, decyzja 03.4 c): odcina komunikat od siatki produktow listingu
   bez filtrow, ktora JS doklada pod nim (custom.js, emptyState). Tlo i zloto
   ikony to karta zaznaczona z custom.css (--anmil-select-*). Selektory
   z ">" - chipy filtrow wewnatrz maja wlasne ikony i spany. */
body:is(#category, .anmil-listing) .anmil-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 44px 24px 40px;
    background: var(--anmil-select-bg);
    border-radius: 12px;
    text-align: center;
}

/* Odstep kremowego panelu od gory bialego kafla jako padding LISTY, nie
   margines panelu: #js-product-list nie ma gornego paddingu, wiec margines
   pierwszego dziecka przechodzi przez niego na zewnatrz i miedzy naglowkiem
   listy a kaflem otwierala sie szara szczelina. */
body:is(#category, .anmil-listing) #js-product-list:has(> .anmil-no-results) {
    padding-top: 32px;
}

body:is(#category, .anmil-listing) .anmil-no-results > .material-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 0 20px;
    background: #fff;
    border-radius: 50%;
    color: var(--anmil-select-border);
    font-size: 36px;
}

body:is(#category, .anmil-listing) .anmil-no-results p {
    margin: 0 0 10px;
    max-width: 26em;
    color: #222;
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
}

body:is(#category, .anmil-listing) .anmil-no-results > span {
    max-width: 30em;
    color: var(--anmil-hint);
    font-size: 16px;
    line-height: 1.45;
}

/* Wiersz "Twoje filtry:" + chipy + "Wyczysc wszystkie filtry" (JS,
   emptyState) - zawijany, wysrodkowany jak reszta panelu. Chip to caly
   link zdejmujacy jeden filtr; krzyzyk jest tylko ikona. */
body:is(#category, .anmil-listing) .anmil-empty-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    width: 100%;
    margin-top: 24px;
}

body:is(#category, .anmil-listing) .anmil-empty-label {
    color: #222;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

body:is(#category, .anmil-listing) .anmil-empty-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

body:is(#category, .anmil-listing) .anmil-empty-chips li {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

body:is(#category, .anmil-listing) .anmil-empty-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 8px 8px 8px 14px;
    background: #fff;
    border: 1px solid var(--anmil-select-border);
    border-radius: 999px;
    color: #222;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: normal;
}

body:is(#category, .anmil-listing) .anmil-empty-chip b {
    font-weight: 600;
}

/* krzyzyk chipa i przycisku "Wyczysc wszystkie filtry" - jedna ikona wiersza */
body:is(#category, .anmil-listing) .anmil-empty-filters .material-icons {
    font-size: 18px;
    line-height: 1;
}

body:is(#category, .anmil-listing) .anmil-empty-chip .material-icons {
    flex: 0 0 auto;
    color: var(--anmil-hint);
}

body:is(#category, .anmil-listing) .anmil-empty-chip:hover,
body:is(#category, .anmil-listing) .anmil-empty-chip:focus-visible {
    border-color: #222;
}

body:is(#category, .anmil-listing) .anmil-empty-chip:hover .material-icons {
    color: #222;
}

/* Siatka listingu bez filtrow pod komunikatem: naglowek jak "Produkty" nad
   lista (.anmil-products-heading), kafle biora siatke z reguly
   "#js-product-list .products" nizej; przycisk glowny przy regulach
   przyciskow (koniec pliku). */
body:is(#category, .anmil-listing) .anmil-empty-products .anmil-products-heading {
    margin: 40px 0 24px;
}

body:is(#category, .anmil-listing) #js-product-list .products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px 28px;
    margin: 0;
}

body:is(#category, .anmil-listing) #js-product-list .product-miniature {
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
}

body:is(#category, .anmil-listing) #js-product-list .thumbnail-container,
body:is(#category, .anmil-listing) #js-product-list .tvproduct-wrapper {
    height: 100%;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

body:is(#category, .anmil-listing) #js-product-list .tvproduct-image {
    /* kwadrat i odstep wokol fotografii wnosi regula bazowa (custom.css) */
    background: transparent;
    border-radius: 12px;
}

body:is(#category, .anmil-listing) #js-product-list .product-thumbnail,
body:is(#category, .anmil-listing) #js-product-list .lazy-container {
    width: 100%;
}

body:is(#category, .anmil-listing) #js-product-list .lazy-load:not(.tvproduct-hover-img) {
    opacity: 1 !important;
}

/* Hover image stays hidden until the card is hovered — inline lazy-load
   styles must not override this (see lazyLoadImages in custom.js) */
body:is(#category, .anmil-listing) #js-product-list .tvproduct-wrapper .tvproduct-hover-img {
    opacity: 0;
}

body:is(#category, .anmil-listing) #js-product-list .tvproduct-wrapper:hover .tvproduct-hover-img {
    opacity: 1;
}

body:is(#category, .anmil-listing) #js-product-list .lazy-placeholder {
    display: none !important;
}

body:is(#category, .anmil-listing) #js-product-list .comments_note {
    text-align: left;
}

body:is(#category, .anmil-listing) #js-product-list .tvproduct-color {
    justify-content: flex-start;
    min-height: 34px;
    margin-top: 8px;
}

body:is(#category, .anmil-listing) #js-product-list .tvproduct-color-box-border {
    width: 28px;
    height: 28px;
    margin-right: 6px;
    padding: 2px;
    border: 1px solid #ededed;
    border-radius: 3px;
}

body:is(#category, .anmil-listing) #js-product-list .tvproduct-color-box-border .tvporoduct-color-box {
    width: 100%;
    height: 100%;
    border-radius: 2px;
}

body:is(#category, .anmil-listing) #js-product-list .tvproduct-flags {
    opacity: 1;
}

body:is(#category, .anmil-listing) #category-description {
    margin: 20px 0 0 0;
    color: #222;
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 1199px) {
    body:is(#category, .anmil-listing) #left-column {
        flex: 0 0 260px;
        width: 260px;
        max-width: 260px;
    }

    body:is(#category, .anmil-listing) #products {
        margin-left: 0;
    }

    body:is(#category, .anmil-listing) #js-product-list .products {
        gap: 30px 20px;
    }
}

@media (max-width: 991px) {
    /* Motyw rozpycha wiersze ujemnymi marginesami (.row: 0 -15px) i karuzele
       maja tresc szersza od ekranu. Bylo to obciete dopiero ponizej 576px -
       na calym ukladzie mobilnym nic nie ma prawa jechac w bok. */
    body:is(#category, .anmil-listing) {
        overflow-x: hidden;
    }

    body:is(#category, .anmil-listing) #wrapper > .container.tv-left-layout > .row,
    body:is(#category, .anmil-listing) #content-wrapper,
    body:is(#category, .anmil-listing) #content-wrapper > .theiaStickySidebar,
    body:is(#category, .anmil-listing) #main {
        display: block;
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-left: 0;
        padding-right: 0;
        padding-left: 0;
    }

    body:is(#category, .anmil-listing) #products {
        margin-left: 0;
    }

    body:is(#category, .anmil-listing) #js-product-list-top.products-selection {
        flex-wrap: wrap;
        /* sortowanie przenioslo sie do paska na dole, wiec w naglowku listy
           nie ma juz drugiego wiersza, ktory ten odstep rozdzielal */
        gap: 0;
    }

    /* uklad naglowka jest wspolny dla obu siatek - patrz regula bazowa
       ".tv-left-search-totle-product" wyzej */

    /* Z listy sortowania zostaje sam rozwijany panel (position:fixed, arkusz
       nizej) - przycisk otwierajacy siedzi w pasku na dole ekranu. */
    body:is(#category, .anmil-listing) .products-sort-order .select-title {
        display: none;
    }

    body:is(#category, .anmil-listing) #js-product-list-top .tvall-page-shortby,
    body:is(#category, .anmil-listing) .sort-by-row,
    body:is(#category, .anmil-listing) .products-sort-order {
        width: 100% !important;
        max-width: 100%;
        height: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body:is(#category, .anmil-listing) #js-product-list .products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Kontener strony ma na tablecie padding 0 (biale boxy ida od krawedzi
       do krawedzi), a breadcrumb, tytul i pasek kategorii sa jego
       bezposrednimi dziecmi - przez to "Strona glowna" i "Meble" zaczynaly
       sie w punkcie x=0, przyklejone do krawedzi okna. Dajemy im tyle
       wciecia, ile ma wewnetrzny padding bialego boxa na tym progu (45px),
       zeby staly z nim w jednej linii. Ponizej 576px blok nizej zmienia to
       na 16px - tam bialy box ma 16px. Powyzej 991px wciecia nie ma:
       uklad jest dwukolumnowy i tekst stoi na krawedzi kontenera, rowno
       z lewa krawedzia boxa filtrow - tak jak na dev. */
    body:is(#category, .anmil-listing) .breadcrumb,
    body:is(#category, .anmil-listing) .anmil-category-title-row,
    body:is(#category, .anmil-listing) .anmil-category-subcategories,
    body:is(#category, .anmil-listing) .block-category {
        padding-left: 45px;
        padding-right: 45px;
    }

    /* Odstep od naglowka wnosi juz #header (custom.css, sekcja
       "SIATKA MOBILNA") - breadcrumb nie doklada wlasnych 14px. */
    body:is(#category, .anmil-listing) .breadcrumb {
        margin-top: 0;
    }
}

@media (max-width: 575px) {

    /* Kontener strony bez wciecia bocznego - dokladnie tak, jak na karcie
       produktu, blogu i stronie glownej. Dzieki temu bialy box listingu
       siega do krawedzi ekranu (bez szarych pasow po bokach), a odstep 16px
       niosa juz pojedyncze elementy: breadcrumb, tytul, pasek kategorii
       i wnetrze bialego boxa. */
    body:is(#category, .anmil-listing) #wrapper > .container.tv-left-layout {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding-right: 0;
        padding-left: 0;
        box-sizing: border-box;
    }

    /* Elementy lezace na szarym tle trzymaja linie siatki (16px). */
    body:is(#category, .anmil-listing) .breadcrumb,
    body:is(#category, .anmil-listing) .anmil-category-title-row,
    body:is(#category, .anmil-listing) .anmil-category-subcategories,
    body:is(#category, .anmil-listing) .block-category {
        padding-left: 16px;
        padding-right: 16px;
    }

    body:is(#category, .anmil-listing) .tv-category-main-div,
    body:is(#category, .anmil-listing) .anmil-category-title-row,
    body:is(#category, .anmil-listing) .anmil-category-subcategories,
    body:is(#category, .anmil-listing) #products,
    body:is(#category, .anmil-listing) #js-product-list-top.products-selection,
    body:is(#category, .anmil-listing) #js-product-list {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    body:is(#category, .anmil-listing) .tv-sub-category-title-wrapper .tv-sub-category-title {
        font-size: 24px;
    }

    body:is(#category, .anmil-listing) .anmil-category-subcategories {
        width: 100% !important;
        max-width: 100%;
        margin-bottom: 24px;
        overflow: hidden;
    }

    body:is(#category, .anmil-listing) .tvcategory-name-image {
        display: block !important;
        width: 100% !important;
        max-width: 100%;
        padding: 0 0 6px;
        overflow: hidden;
        cursor: grab;
        transform: none !important;
    }

    body:is(#category, .anmil-listing) .tvcategory-name-image .swiper-wrapper {
        flex-wrap: nowrap !important;
    }

    body:is(#category, .anmil-listing) .tv-sub-category-wrapper {
        position: static !important;
        float: none !important;
        flex: 0 0 110px !important;
        width: 110px !important;
        max-width: 110px !important;
        min-width: 0 !important;
        /* marginesu NIE zerujemy - Swiper wpisuje tu margin-right rowny
           spaceBetween i wlicza go w dlugosc tasmy. Wyzerowany zostawial
           na koncu karuzeli 13 x 18px = 234px pustki po prawej, a ostatnie
           kafle laduly przy lewej krawedzi. */
        padding: 0 !important;
        /* Poziome auto z theme.css (@media max-width 575px: margin: 15px auto)
           zerujemy BEZ !important (14z.1): przy kaflach, ktore nie wypelniaja
           paska (Lozka: 2), auto rozkladalo wolne miejsce miedzy nie (69 px
           zamiast spaceBetween), a Swiper mierzy slajd po zdjeciu swojego
           margin-right z linii - auto wchodzilo w pomiar (179 zamiast 114 px),
           wiec nie blokowal przewijania i pokazywal strzalke. Po pomiarze jego
           margin-right w linii i tak wygrywa z arkuszem. */
        margin-right: 0;
        margin-left: 0;
    }

    /* Kwadrat 110x110 (na desktopie 120x120); kafel wypelnia caly slajd.
       Wczesniej slajd mial 104px, a .tv-sub-category-inner doklejal 12px
       paddingu z kazdej strony, wiec z kafla zostawalo 80x96. */
    body:is(#category, .anmil-listing) .tv-category-image {
        position: relative !important;
        width: 110px;
        height: 110px;
        overflow: hidden !important;
    }

    body:is(#category, .anmil-listing) .tv-sub-category-inner {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        transform: none !important;
    }

    body:is(#category, .anmil-listing) .anmil-subcategory-nav {
        top: 40px;
        width: 28px;
        height: 44px;
    }

    body:is(#category, .anmil-listing) .tv-category-image a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        transform: none !important;
    }

    body:is(#category, .anmil-listing) .tv-category-image img {
        position: static !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 100% !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        transform: none !important;
    }

    body:is(#category, .anmil-listing) #js-product-list {
        padding: 0 16px 22px;
        border-radius: 0 0 8px 8px;
    }

    body:is(#category, .anmil-listing) .anmil-no-results {
        padding: 40px 8px 52px;
    }

    body:is(#category, .anmil-listing) .anmil-no-results p {
        font-size: 22px;
    }

    body:is(#category, .anmil-listing) #js-product-list-top.products-selection {
        /* 16px = linia siatki mobilnej; naglowek "Produkty" stoi w jednej
           linii z breadcrumbem, tytulem kategorii i kaflami nizej */
        padding: 22px 16px;
        border-radius: 8px 8px 0 0;
    }

    body:is(#category, .anmil-listing) #js-product-list-top .tv-left-search-totle-product {
        /* flex ustawia regula bazowa; tu tylko szerokosc kolumny */
        width: 100% !important;
    }

    body:is(#category, .anmil-listing) #js-product-list-top .tvall-page-shortby {
        width: 100%;
        min-width: 0;
    }

    body:is(#category, .anmil-listing) #js-product-list-top .tv_search_filter_wrapper {
        display: none !important;
    }

    body:is(#category, .anmil-listing) #js-product-list .products {
        width: 100% !important;
        max-width: 100%;
        /* 2 karty w rzedzie na telefonie, tak jak na home (wczesniej bylo 1fr / pelna szerokosc) */
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 12px;
    }

    body:is(#category, .anmil-listing) .products-sort-order {
        width: 100%;
    }

    body:is(#category, .anmil-listing) #js-product-list .product-miniature,
    body:is(#category, .anmil-listing) #js-product-list .thumbnail-container,
    body:is(#category, .anmil-listing) #js-product-list .tvproduct-wrapper,
    body:is(#category, .anmil-listing) #js-product-list .tvproduct-image {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* min-height:330px usuniete - bylo dobrane pod pelna szerokosc karty (1fr);
       przy 2 kolumnach obraz skaluje sie przez aspect-ratio:1/1 (regula bazowa L.619) */

    body:is(#category, .anmil-listing) #js-product-list .product-flag {
        /* max-width:calc(100% - 24px) usuniete: % liczy sie wzgledem .tvproduct-flags
           (UL, position:absolute, shrink-to-fit ~40px), wiec dawalo 40-24=16px i
           realnie obcinalo tekst odznaki (np. "-30,00 zł"). Bez max-width badge
           naturalnie dopasowuje sie do tresci (shrink-to-fit), co wystarcza. */
        white-space: nowrap;
    }
}

/* ============================================================
 * New flex two-column layout for category pages
 * ============================================================ */

/* Reset: outer row no longer needs position:relative trick */
body:is(#category, .anmil-listing) #wrapper > .container.tv-left-layout > .row {
    position: static;
    display: block;
    margin: 0;
}

/* The content wrapper fills the full row width */
body:is(#category, .anmil-listing) .anmil-cat-content-wrapper {
    width: 100%;
    padding: 0;
}

/* Row 2: two-column flex container */
body:is(#category, .anmil-listing) .anmil-cat-body {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 0;
}

/* Sidebar — flex child, sticky */
body:is(#category, .anmil-listing) .anmil-cat-sidebar {
    flex: 0 0 284px;
    width: 284px;
    min-width: 0;
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

/* Close button — hidden on desktop */
body:is(#category, .anmil-listing) .anmil-cat-sidebar-close {
    display: none;
}

/* Backdrop — hidden by default */
body:is(#category, .anmil-listing) .anmil-cat-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 900;
    cursor: pointer;
}

body:is(#category, .anmil-listing) .anmil-cat-sidebar-backdrop.anmil-sidebar-open {
    display: block;
    /* gest zaczety na przyciemnieniu nie przewija strony pod spodem - to
       zastepuje dawne overflow:hidden na <html>/<body> */
    touch-action: none;
}

/* Main area — flex child, grows */
body:is(#category, .anmil-listing) .anmil-cat-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Hide the duplicate #search_filters rendered by products-top.tpl
   (we have the real one in the sidebar) */
body:is(#category, .anmil-listing) .anmil-cat-main .tvleft-penal-product-top > #search_filters,
body:is(#category, .anmil-listing) .anmil-cat-main .tvleft-penal-product-top > .tvcms-left-column-product-top-wrapper {
    display: none !important;
}

/* Pasek "Sortowanie | Filtry", nagłówek arkusza sortowania i pasek akcji
   panelu — tylko mobile. Reguły muszą stać PRZED media query, bo mają tę samą
   specyficzność (przy remisie wygrywa ta późniejsza w pliku). */
body:is(#category, .anmil-listing) .anmil-cat-mobile-bar,
body:is(#category, .anmil-listing) .anmil-sort-head,
body:is(#category, .anmil-listing) .anmil-cat-actions {
    display: none;
}

/* ── Sidebar filter styles (shared desktop + mobile) ────────────────── */
body:is(#category, .anmil-listing) .anmil-cat-sidebar #search_filters {
    display: block;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    overflow: visible;
}

/* Motyw wciaga panel filtrow w swoja siatke i wychodzi ujemnym marginesem
   poza kontener (-15px / -30px w media queries). W pelnoekranowej szufladzie
   na mobile dawalo to poziomy pasek przewijania wewnatrz panelu. */
body:is(#category, .anmil-listing) #left-column #search_filters_wrapper {
    margin-left: 0;
    margin-right: 0;
}

/* Kategoria bez skonfigurowanych filtrow - nie zostawiamy pustej kolumny,
   lista idzie na pelna szerokosc. Klase ustawia custom.js RAZ, przy wejsciu na
   strone. Wczesniej stal tu selektor :not(:has(#search_filters)) liczony na
   zywo - i gdy modul przyslal pusty panel (a przysyla, gdy filtry zawezily
   wynik do zera), znikala cala szuflada RAZEM z przyciskiem "Filtry". */
body:is(#category, .anmil-listing).anmil-cat-no-filters .anmil-cat-sidebar,
body:is(#category, .anmil-listing).anmil-cat-no-filters .anmil-cat-sidebar-backdrop,
body:is(#category, .anmil-listing).anmil-cat-no-filters .anmil-cat-filter-toggle {
    display: none !important;
}

/* ...i czwarta kolumna zamiast rozciagania kafli - bez panelu jest na nia
   miejsce, a karta produktu zostaje tej samej wielkosci co w innych
   kategoriach (na wezszych ekranach zostaja reguly z media queries nizej) */
@media (min-width: 992px) {
    body:is(#category, .anmil-listing).anmil-cat-no-filters #js-product-list .products {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1199px) {
    body:is(#category, .anmil-listing) .anmil-cat-body {
        gap: 20px;
    }

    body:is(#category, .anmil-listing) .anmil-cat-sidebar {
        flex: 0 0 260px;
        width: 260px;
    }
}

/* ── Mobile: overlay sidebar ───────────────────────────────────────── */
@media (max-width: 991px) {
    body:is(#category, .anmil-listing) .anmil-cat-body {
        display: block;
        gap: 0;
    }

    /* Pelnoszerokosciowy panel (nie boczne menu/drawer) - user zazadal
       identycznego ukladu jak mockup: panel zajmuje cala szerokosc ekranu,
       bez widocznego przyciemnionego tla z boku */
    /* Szuflada. Selektor celowo laczy ID z klasa (#left-column.anmil-cat-sidebar
       to ten sam <aside>): motyw i stary custom.css opisuja ten element przez
       #left-column, wiec sama klasa by nie wystarczyla. Jedna definicja zamiast
       dwoch blizniaczych - te wczesniej trzeba bylo recznie trzymac w zgodzie. */
    body:is(#category, .anmil-listing) #left-column.anmil-cat-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        flex: none !important;
        z-index: 901 !important;
        background: #fff !important;
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
        /* JEDEN kontener przewijania - szuflada. Pasek przyciskow jest z niego
           wyjety (position: fixed), wiec nie doklada wysokosci; zapas na dole to
           dokladnie jego zmierzona wysokosc.
           overscroll-behavior zastepuje dawna blokade przewijania strony: gdy
           szuflada dojedzie do konca, przewijanie NIE przechodzi na strone pod
           spodem. Bez ustawiania czegokolwiek na <html>/<body>, wiec nie ma
           stanu, ktory moglby zostac i zamrozic strone. */
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding: 0 0 var(--anmil-cat-bar, 80px) !important;
        transform: translateY(100%) !important;
        transition: transform .3s cubic-bezier(.25,.46,.45,.94) !important;
    }

    body:is(#category, .anmil-listing) #left-column.anmil-cat-sidebar.anmil-sidebar-open {
        transform: translateY(0) !important;
        /* przebija legacy "#left-column{display:none}" z custom.css (~L8860) */
        display: block !important;
    }

    /* Krzyzyk w prawym rogu, w jednej linii z naglowkiem "Filtry" (ten
       naglowek to .tvleft-right-title z #search_filters - przycisk jest jego
       rodzenstwem, wiec ustawiamy go bezwzglednie wzgledem szuflady) */
    body:is(#category, .anmil-listing) .anmil-cat-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 24px;
        right: 24px;
        z-index: 2;
        width: 32px;
        height: 32px;
        padding: 0;
        background: none;
        border: 0;
        color: #222;
        cursor: pointer;
    }

    body:is(#category, .anmil-listing) .anmil-cat-sidebar-close .material-icons {
        font-size: 24px;
    }

    /* Kreska pod naglowkiem panelu - na desktopie rysuje ja "Wyczyść filtry",
       ktore na mobile przenioslo sie do paska na dole */
    body:is(#category, .anmil-listing) #left-column .tvleft-right-title-wrapper {
        padding-bottom: 18px;
        border-bottom: 1px solid #ededed;
    }

    /* Ramka karty z motywu. W pelnoekranowym panelu rysowala kreske nad
       naglowkiem i drugą pod ostatnia grupa filtrow - widac ja bylo po
       dojechaniu na sam dol. Kreski maja oddzielac wylacznie grupy.
       Boczne tez zdejmujemy: dokladaly 1px do wciecia, przez co tresc stala
       21px od krawedzi zamiast rownych 24px. */
    body:is(#category, .anmil-listing) #left-column .tvleft-right-penal-all-block,
    body:is(#category, .anmil-listing) #left-column .tvserach-filter-wrapper {
        border: 0;
    }

    /* "Wyczyść filtry" jest w pasku na dole panelu i przy liczniku produktow -
       u gory bylby trzeci raz. Zostaje w DOM, bo to jego klik obsluguje motyw. */
    body:is(#category, .anmil-listing) #left-column .clear-all-wrapper {
        display: none;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters {
        border-radius: 0;
    }

    body:is(#category, .anmil-listing) #left-column .tvleft-right-penal-all-block {
        /* 24px po bokach - jeden wspolny margines panelu filtrow; ten sam
           trzymaja krzyzyk i pasek akcji nizej */
        padding: 24px !important;
        /* odstep spod karty na desktopie - w pelnoekranowej szufladzie robil
           tylko pusta biala przestrzen nad paskiem przyciskow */
        margin-bottom: 0;
    }

    /* ── Pasek "Sortowanie | Filtry" przyklejony do dolu ekranu ────────── */
    /* Stala szerokosc i dwie rowne polowki - pasek nie zmienia rozmiaru ani
       polozenia, gdy przy "Filtry" pojawi sie licznik. */
    body:is(#category, .anmil-listing) .anmil-cat-mobile-bar {
        display: flex;
        position: fixed;
        left: 50%;
        /* 28px, nie 16 - przy 16px pigulka siedziala tak nisko, ze na telefonie
           nie rzucala sie w oczy przy wejsciu na listing */
        bottom: calc(28px + env(safe-area-inset-bottom));
        z-index: 890;
        width: 320px;
        max-width: calc(100% - 28px);
        transform: translateX(-50%);
        background: #222;
        border-radius: 999px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
    }

    body:is(#category, .anmil-listing) .anmil-cat-sort-toggle,
    body:is(#category, .anmil-listing) .anmil-cat-filter-toggle {
        display: inline-flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        gap: 10px;
        position: relative;
        margin: 0;
        padding: 15px 12px;
        background: none;
        border: 0;
        border-radius: 0;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
        text-transform: none;
        white-space: nowrap;
        cursor: pointer;
    }

    /* Kreska miedzy polowkami: nie dotyka gornej i dolnej krawedzi, wiec nie
       moze byc obramowaniem przycisku (border + zaokraglenie dawaly luk).
       Znika razem z "Filtry" w kategorii bez filtrow. */
    body:is(#category, .anmil-listing) .anmil-cat-filter-toggle::before {
        content: '';
        position: absolute;
        top: 13px;
        bottom: 13px;
        left: 0;
        width: 1px;
        background: rgba(255, 255, 255, .3);
    }

    body:is(#category, .anmil-listing) .anmil-cat-sort-toggle .material-icons,
    body:is(#category, .anmil-listing) .anmil-cat-filter-toggle .material-icons {
        font-size: 20px;
    }

    /* Licznik aktywnych filtrow (custom.js). Poza ukladem przycisku, zeby
       napis "Filtry" stal w tym samym miejscu z licznikiem i bez niego. */
    body:is(#category, .anmil-listing) .anmil-cat-filter-toggle span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 14px;
        min-width: 24px;
        height: 24px;
        padding: 0 5px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 999px;
        color: #222;
        font-size: 13px;
        font-weight: 600;
    }

    /* Pelna szerokosc (szuflada wyszla z ukladu) + miejsce pod ostatnim rzedem
       kafli, zeby nie zaslanial go pasek "Sortowanie | Filtry". */
    body:is(#category, .anmil-listing) .anmil-cat-main {
        width: 100%;
        padding-bottom: 84px;
    }

    /* ── Sortowanie jako arkusz wysuwany od dolu ───────────────────────── */
    /* z-index musi byc WYZSZY niz 990: na urzadzeniach dotykowych Bootstrap
       wstawia przy otwarciu <div class="dropdown-backdrop"> (fixed, cały
       ekran, z-index 990 - theme.css) do łapania kliknięć poza listą. Przy
       niższej wartości każde tapnięcie w opcję trafiało w tę przykrywkę:
       arkusz się zamykał, a sortowanie nie było stosowane. */
    body:is(#category, .anmil-listing) .products-sort-order .dropdown-menu {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 995;
        width: 100%;
        max-height: 80vh;
        margin: 0;
        padding: 0 20px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border: 0;
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, .15);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body:is(#category, .anmil-listing) .anmil-sort-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 0 18px;
        border-bottom: 1px solid #ededed;
        color: #222;
        font-family: 'Cabinet Grotesk', sans-serif;
        font-size: 20px;
        font-weight: 600;
    }

    body:is(#category, .anmil-listing) .anmil-sort-head button {
        display: flex;
        padding: 0;
        background: none;
        border: 0;
        color: #222;
        cursor: pointer;
    }

    body:is(#category, .anmil-listing) .anmil-sort-head .material-icons {
        font-size: 24px;
    }

    body:is(#category, .anmil-listing) .products-sort-order .select-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 0;
        border-bottom: 1px solid #ededed;
        color: #222;
        font-size: 16px;
        white-space: normal;
    }

    body:is(#category, .anmil-listing) .products-sort-order .select-list.current::after {
        /* "check" z Material Icons - ligatury nie sa tu wlaczone, wiec kod znaku */
        content: '\e5ca';
        font-family: 'Material Icons';
        font-size: 22px;
    }

    /* Typografia panelu filtrow ma byc taka sama jak na desktopie. Motyw
       zmniejsza tu etykiety do 13px, a tytuly facetow pisze WERSALIKAMI
       (theme.css: @media max-width:767px -> text-transform: uppercase). */
    body:is(#category, .anmil-listing) #left-column #search_filters .facet .facet-title,
    body:is(#category, .anmil-listing) #left-column #search_filters .facet .title .facet-title {
        font-size: 16px;
        text-transform: none;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters .facet .facet-label,
    body:is(#category, .anmil-listing) #left-column #search_filters .facet .facet-label a {
        font-size: 16px;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters .facet .facet-label .magnitude {
        font-size: 14px;
    }

    /* Motyw doklada tu wcięcia (padding na wrapperze, liście i tytule facetu)
       i kreskę pod nazwą grupy. Na desktopie tego nie ma - wszystko stoi przy
       lewej krawędzi, a szara kreska (border-top na .facet) oddziela wyłącznie
       grupy od siebie. Wyrównujemy mobile do tego. */
    /* padding: 0, a nie tylko po bokach - pionowy motyw daje tylko wtedy, gdy
       nie ma "Wyczyść filtry", przez co odstęp nagłówka od pierwszej grupy
       skakał między 36 a 51px zależnie od tego, czy coś jest wybrane */
    body:is(#category, .anmil-listing) #left-column .tvserach-filter-wrapper {
        padding: 0;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters .facet ul {
        padding: 0;
    }

    /* motyw zeruje tu padding grupy (#category #left-column #search_filters
       .facet), przez co tytul i "Pokaż więcej" siadaly na kreskach - wracamy
       do rytmu z desktopu */
    body:is(#category, .anmil-listing) #left-column #search_filters .facet {
        padding: 22px 0;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters .facet .title .facet-title {
        padding: 0 0 10px;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters .facet .title,
    body:is(#category, .anmil-listing) #left-column #search_filters .facet {
        border-bottom: 0;
    }

    /* Bialy pasek akcji panelu: "Wyczyść filtry" (gdy cokolwiek wybrano) +
       "Pokaż produkty", ktore zamyka panel i JAKO JEDYNE przeladowuje liste.

       Siedzi POZA szuflada (custom.js doklada go do <body>) i jest przypiety do
       okna. W srodku szuflady sie nie da: ma ona transform, wiec "fixed"
       zaczepialoby sie o nia i jechalo razem z trescia.

       W ukladzie jest ZAWSZE - przy zamknietym panelu tylko zjezdza za dolna
       krawedz. Dzieki temu da sie zmierzyc jego wysokosc, a z niej bierze sie
       zapas na dole szuflady (--anmil-cat-bar). Przy sztywnej wartosci zostawal
       pod przyciskami pasek ~9px pustki widoczny po dojechaniu na sam dol. */
    body:is(#category, .anmil-listing) .anmil-cat-actions {
        display: flex;
        flex-wrap: wrap;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 903;
        gap: 10px;
        padding: 12px 24px calc(12px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid #ededed;
        transform: translateY(100%);
        transition: transform .3s cubic-bezier(.25,.46,.45,.94);
        pointer-events: none;
    }

    body:is(#category, .anmil-listing).anmil-filters-open .anmil-cat-actions {
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Dlaczego zostal sam przycisk czyszczenia - user widzi to jeszcze w panelu,
       zanim wyjdzie na pusta liste */
    body:is(#category, .anmil-listing) .anmil-cat-note {
        width: 100%;
        margin: 0;
        /* czerwien z palety motywu (ta sama co ceny i flagi), a nie kolejny
           odcien wymyslony na potrzebe jednego napisu */
        color: #A50000;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.35;
        text-align: center;
    }

    body:is(#category, .anmil-listing) .anmil-cat-clear-filters,
    body:is(#category, .anmil-listing) .anmil-cat-show-products {
        flex: 1 1 0;
    }
}

/* Przyciski sklepu: glowny #222/#fff, drugorzedny bialy z ramka. Jedna
   para regul dla paska akcji panelu (mobile, wyzej) i dla stanu pustej listy
   (chip "Wyczysc wszystkie filtry" i "Zobacz wszystkie N produktow" - JS,
   emptyState; te sa linkami, stad text-decoration). Poza
   media query, bo stan pustej listy jest tez na desktopie; pasek i tak
   widac tylko przy otwartym panelu. */
body:is(#category, .anmil-listing) .anmil-cat-clear-filters,
body:is(#category, .anmil-listing) .anmil-cat-show-products,
body:is(#category, .anmil-listing) .anmil-empty-clear,
body:is(#category, .anmil-listing) .anmil-empty-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 14px 12px;
    border: 1px solid #222;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
}

body:is(#category, .anmil-listing) .anmil-cat-clear-filters,
body:is(#category, .anmil-listing) .anmil-empty-clear {
    background: #fff;
    color: #222;
}

/* drugorzedny w wierszu chipow: nizszy, z ikona krzyzyka jak chipy */
body:is(#category, .anmil-listing) .anmil-empty-clear {
    padding: 9px 16px;
    font-size: 14px;
}

body:is(#category, .anmil-listing) .anmil-empty-clear:hover,
body:is(#category, .anmil-listing) .anmil-empty-clear:focus-visible {
    background: #222;
    color: #fff;
}

body:is(#category, .anmil-listing) .anmil-cat-show-products,
body:is(#category, .anmil-listing) .anmil-empty-all {
    background: #222;
    color: #fff;
}

body:is(#category, .anmil-listing) .anmil-cat-show-products:hover,
body:is(#category, .anmil-listing) .anmil-cat-show-products:focus,
body:is(#category, .anmil-listing) .anmil-empty-all:hover,
body:is(#category, .anmil-listing) .anmil-empty-all:focus-visible {
    background: #000;
    color: #fff;
}

/* fit-content, bo wspolna regula przyciskow daje display: flex (pelna szerokosc) */
body:is(#category, .anmil-listing) .anmil-empty-all {
    width: fit-content;
    margin: 36px auto 0;
}

@media (max-width: 575px) {
    /* komunikat na telefonie: chipy pod etykieta, oba przyciski na cala
       szerokosc - jak pasek akcji panelu */
    body:is(#category, .anmil-listing) #js-product-list:has(> .anmil-no-results) {
        padding-top: 20px;
    }

    body:is(#category, .anmil-listing) .anmil-no-results {
        padding: 32px 16px 24px;
        border-radius: 8px;
    }

    body:is(#category, .anmil-listing) .anmil-empty-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    body:is(#category, .anmil-listing) .anmil-empty-clear,
    body:is(#category, .anmil-listing) .anmil-empty-all {
        width: 100%;
        padding: 13px 16px;
        font-size: 15px;
    }

    body:is(#category, .anmil-listing) .anmil-empty-products .anmil-products-heading {
        margin: 28px 0 18px;
    }

    body:is(#category, .anmil-listing) .anmil-empty-all {
        margin-top: 24px;
    }
}

/* ── Mobile <= 767px: trzy reguly panelu filtrow z theme.css ──────────
   theme.css (kompilowany, poza zakresem) daje je w @media (max-width:767px)
   tylko stronie z id kategorii, wiec pozostale listingi (promocje, nowosci,
   szukaj) by ich nie dostaly. Ten sam breakpoint 767, nie 991: kategoria
   przy 768-991px ma zostac bez zmian. */
@media (max-width: 767px) {
    body:is(#category, .anmil-listing) #left-column #search_filters .facet .title {
        cursor: pointer;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters .facet .facet-title {
        color: #232323;
    }

    body:is(#category, .anmil-listing) #left-column #search_filters .facet .h6 {
        margin-bottom: 0;
    }
}


/* ----- Faceted navigation styles ----- */
body:is(#category, .anmil-listing) #left-column .tvleft-right-title-wrapper .facet-label {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size:20px;
    color:#222;
    font-weight:600;
    margin-top:5px;
}

/* ============================================================
 * Filtry: kolejnosc wg projektu (JS reorder w custom.js) +
 * podpis "Raty od Xzl / msc" pod polami Od/Do + przycisk powrotu
 * ============================================================ */
body:is(#category, .anmil-listing) #left-column .anmil-slider-installment {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    color: #999;
    font-size: 11px;
    line-height: 1.3;
}

body:is(#category, .anmil-listing) #left-column .anmil-slider-installment .material-icons {
    font-size: 13px;
    line-height: 1;
}

/* ============================================================
 * Filtry: suwak zakresu zamiast checkboxow dla facetow liczbowych
 * (Szerokosc, Dlugosc, Wysokosc, Glebokosc...) - budowany w custom.js.
 * Tor suwaka to zwykly jQuery UI slider, wiec styl toru i uchwytow
 * bierze z sekcji "suwak zakresu" w custom.css - tak samo jak cena.
 * (Wczesniej reguly staly w tym pliku wyzej; przenioslo je uspojnienie
 * kontrolek, bo do etapu 03 poza kategoria ten arkusz sie nie ladowal.)
 * ============================================================ */
body:is(#category, .anmil-listing) #left-column .anmil-range {
    margin-top: 2px;
}

/* wartosci, ktorych nie da sie sprowadzic do liczby (np. "40 + 40 cm"),
   zostaja checkboxami pod suwakiem */
body:is(#category, .anmil-listing) #left-column .anmil-has-range ul.tvfilter-search-types-dropdown {
    margin-top: 2px;
}

/* Chevron rozwijania jest dekoracyjny - .tvsearch-filter-content-wrapper i
   .tvfilter-search-types-dropdown maja juz max-height:none!important (L303-333),
   wiec sekcje sa zawsze rozwiniete; strzalka sugerowalaby zwijanie ktore nie dziala */
body:is(#category, .anmil-listing) #left-column .tvdropdown-btn {
    display: none;
}

/* Pozycja filtra bez produktow w biezacym wyniku (licznik 0 - dokłada ja
   scalanie panelu w assets/js/custom.js, "mergeFacets"). Stoi na koncu listy,
   przygaszona, ale klikalna: w obrebie jednego facetu wartosci lacza sie LUB,
   wiec dodanie jej do zaznaczonej moze dac wynik. */
body:is(#category, .anmil-listing) #search_filters li.anmil-facet-zero {
    opacity: .45;
}