/* =============================================================
   category-layout.css v9
   Przebudowa layoutu strony kategorii:
   - filtry z lewego sidebara → poziomy pasek nad siatką
   - siatka produktów → 3 kolumny (CSS grid)

   DOM path:
   body#category > main > section#wrapper > div.container
     > #left-column   (col-xs-12 col-sm-4 col-md-3)
     > #content-wrapper (col-xs-12 col-sm-8 col-md-9)
   ============================================================= */


/* ── 1. Layout — #left-column zostaje sidebar ───────────────
   Nie ruszamy Bootstrap grid. JS (category-layout.js) przenosi
   #search_filters_wrapper jako pierwszy dziecko #content-wrapper.

   Wynikowy DOM po JS:
     #left-column.col-md-3   ← .block-categories zostaje tutaj
     #content-wrapper.col-md-9
       #search_filters_wrapper  ← przeniesiony przez JS
       #products (siatka)
   ──────────────────────────────────────────────────────────── */

/* Wrapper filtrów po przeniesieniu wewnątrz #content-wrapper */
#content-wrapper #search_filters_wrapper {
    display:        block   !important;
    width:          100%    !important;
    margin-bottom:  0       !important;
    /* Usuń hidden-sm-down dziedziczone od oryginalnej pozycji w sidebarze */
    visibility:     visible !important;
}

/* Mobile: ukryj filtry (są dla desktop) */
@media (max-width: 767px) {
    #content-wrapper #search_filters_wrapper {
        display: none !important;
    }
}


/* ── 2. Diagnostyka wizualna (odkomentuj tymczasowo) ─────────
   Pozwala szybko zobaczyć w przeglądarce czy bloki są nad sobą
   czy obok siebie.

body#category #left-column    { outline: 2px solid red; }
body#category #content-wrapper { outline: 2px solid blue; }
   ──────────────────────────────────────────────────────────── */


/* ── 3. Wygląd filtrów — pill dropdowns (CSS-only override) ─
   Strategia:
   - Nie ruszamy ul[id^="facet_"] — Bootstrap collapse JS
     obsługuje show/hide przez .collapse → .collapse.in
   - Ukrywamy statyczny p.h6.facet-title (desktop, nieklikalny)
   - Odkrywamy .title.hidden-md-up (ma data-toggle="collapse")
     i stylujemy go jako pill — klik otwiera dropdown
   - Dla kolorów (.is-color-facet) — inny tryb: zawsze widoczny
     poziomy rząd kółek, max 5 sztuk, bez dropdown

   Struktura HTML z modułu:
   #search_filters
     .facet
       p.h6.facet-title           ← statyczny nagłówek — UKRYWAMY
       .title.hidden-md-up        ← ma data-toggle="collapse" — POKAZUJEMY jako pill
         p.h6.facet-title         ← kopia tytułu wewnątrz .title
         span.navbar-toggler
           i.material-icons.add   ← strzałka ▼ (zamknięte)
           i.material-icons.remove← strzałka ▲ (otwarte)
       ul#facet_XXXXX.collapse[.in]
         li > label.facet-label > span.custom-checkbox > span.color? + a.search-link
   ──────────────────────────────────────────────────────────── */

/* 3a. Kontener — poziomy pasek ─────────────────────────────── */
#search_filters {
    display:        flex                !important;
    flex-wrap:      wrap                !important;
    align-items:    center              !important;
    gap:            8px                 !important;
    padding:        12px 16px           !important;
    background:     #fff                !important;
    border:         0.5px solid #e0e0e0 !important;
    border-radius:  10px                !important;
    margin-bottom:  1rem                !important;
}

/* Ukryj nagłówki tytułu "Filter By" i przycisk "Clear all" */
#search_filters > .text-uppercase,
#search_filters #_desktop_search_filters_clear_all {
    display: none !important;
}

/* 3b. Każdy blok filtra ─────────────────────────────────────── */
#search_filters .facet {
    position:       relative        !important;
    display:        inline-block    !important;
    float:          none            !important;
    width:          auto            !important;
    padding:        0               !important;
    margin:         0               !important;
    clear:          none            !important;
}

/* Ukryj statyczny p.h6 (zawsze widoczny na desktop, nieklikalny) */
#search_filters .facet > p.h6,
#search_filters .facet > p.facet-title {
    display: none !important;
}

/* 3c. .title.hidden-md-up — odkryj i ostyluj jako pill ────────
   Bootstrap nadaje mu hidden-md-up (display:none na ≥768px).
   Odkrywamy go i używamy jako klikalny trigger collapse. */
#search_filters .facet .title {
    display:            inline-flex     !important;
    align-items:        center          !important;
    justify-content:    space-between   !important;
    gap:                6px             !important;
    padding:            5px 12px 5px 16px !important;
    border-radius:      20px            !important;
    border:             0.5px solid #e0e0e0 !important;
    background:         #fff            !important;
    font-size:          12px            !important;
    font-weight:        500             !important;
    color:              #222            !important;
    cursor:             pointer         !important;
    user-select:        none            !important;
    white-space:        nowrap          !important;
    transition:         border-color 0.15s, background 0.15s !important;
    /* Resetuj float-xs-right ze spana wewnątrz */
    line-height:        1.4             !important;
}

#search_filters .facet .title:hover {
    border-color: #999 !important;
}

/* Pill tytułu wewnątrz .title */
#search_filters .facet .title .h6,
#search_filters .facet .title .facet-title {
    display:        inline   !important;   /* nadpisz wcześniejsze display:none */
    font-size:      12px     !important;
    font-weight:    500      !important;
    color:          inherit  !important;
    margin:         0        !important;
    padding:        0        !important;
    text-transform: none     !important;
}

/* Strzałka toggle — .add widoczna gdy zamknięte, .remove gdy otwarte */
#search_filters .facet .title .navbar-toggler {
    display:    inline-flex !important;
    align-items: center     !important;
    margin-left: 2px        !important;
}
#search_filters .facet .title .navbar-toggler .add,
#search_filters .facet .title .navbar-toggler .remove {
    font-size:  14px    !important;
    color:      #888    !important;
    line-height: 1      !important;
}
/* Gdy zamknięte: pokaż .add (▼), ukryj .remove (▲) */
#search_filters .facet .title:not([aria-expanded="true"]) .collapse-icons .add    { display: inline !important; }
#search_filters .facet .title:not([aria-expanded="true"]) .collapse-icons .remove { display: none   !important; }
/* Gdy otwarte (aria-expanded ustawia Bootstrap JS): pokaż .remove */
#search_filters .facet .title[aria-expanded="true"] .collapse-icons .add    { display: none   !important; }
#search_filters .facet .title[aria-expanded="true"] .collapse-icons .remove { display: inline !important; }

/* Pill aktywny — gdy facet ma zaznaczony filtr (:has() Chrome105+/FF121+/Safari15.4+) */
#search_filters .facet:has(label.facet-label.active) .title {
    background:     #1a1a1a !important;
    border-color:   #1a1a1a !important;
    color:          #fff    !important;
}
#search_filters .facet:has(label.facet-label.active) .title .h6,
#search_filters .facet:has(label.facet-label.active) .title .facet-title {
    color: #fff !important;
}
#search_filters .facet:has(label.facet-label.active) .title .collapse-icons .add,
#search_filters .facet:has(label.facet-label.active) .title .collapse-icons .remove {
    color: rgba(255,255,255,0.7) !important;
}

/* 3d. Dropdown panel — ul.collapse otwiera się jako pływający panel */
#search_filters .facet ul[id^="facet_"] {
    /* Bootstrap 3 collapse: height:0;overflow:hidden → height:auto gdy .in */
    position:       absolute            !important;
    top:            calc(100% + 5px)    !important;
    left:           0                   !important;
    min-width:      180px               !important;
    background:     #fff                !important;
    border:         1px solid #e0e0e0   !important;
    border-radius:  10px                !important;
    box-shadow:     0 6px 20px rgba(0,0,0,0.10) !important;
    z-index:        200                 !important;
    list-style:     none                !important;
    padding:        6px 0               !important;
    margin:         0                   !important;
    /* Nadpisz Bootstrap collapse height:0 gdy zamknięte */
    overflow:       hidden              !important;
}

/* Otwarte (.collapse.in) — Bootstrap ustawia height:auto */
#search_filters .facet ul[id^="facet_"].in {
    overflow: visible !important;
}

/* Opcja w dropdownie */
#search_filters .facet ul[id^="facet_"] li {
    padding: 0 !important;
    margin:  0 !important;
}

#search_filters .facet ul[id^="facet_"] li label.facet-label {
    display:        flex            !important;
    align-items:    center          !important;
    gap:            8px             !important;
    padding:        7px 16px        !important;
    cursor:         pointer         !important;
    font-size:      12px            !important;
    color:          #222            !important;
    transition:     background 0.1s !important;
    margin:         0               !important;
    border:         none            !important;
    border-radius:  0               !important;
    background:     transparent     !important;
    white-space:    nowrap          !important;
}

#search_filters .facet ul[id^="facet_"] li label.facet-label:hover {
    background: #f5f5f5 !important;
}

/* Link nazwy opcji */
#search_filters .facet ul[id^="facet_"] li label a.search-link {
    font-size:       12px   !important;
    color:           #333   !important;
    text-decoration: none   !important;
    display:         inline !important;
}

/* Liczba wyników */
#search_filters .facet ul[id^="facet_"] li label .magnitude {
    color:      #bbb    !important;
    font-size:  11px    !important;
    margin-left: auto   !important;
}

/* Aktywna opcja — bold + checkmark */
#search_filters .facet ul[id^="facet_"] li label.facet-label.active {
    font-weight: 600    !important;
    color:       #111   !important;
    background:  #f9f9f9 !important;
}

#search_filters .facet ul[id^="facet_"] li label.facet-label.active a.search-link {
    color:       #111   !important;
    font-weight: 600    !important;
}

/* Ukryj natywny checkbox/radio (zostają w DOM dla PS JS) */
#search_filters .facet ul[id^="facet_"] input[type="checkbox"],
#search_filters .facet ul[id^="facet_"] input[type="radio"] {
    position:       absolute    !important;
    opacity:        0           !important;
    width:          1px         !important;
    height:         1px         !important;
    pointer-events: none        !important;
}

/* Ukryj checkmark span, zostaw span.color i span.texture */
#search_filters .facet .custom-checkbox > span:not(.color):not(.texture),
#search_filters .facet .custom-radio    > span {
    display: none !important;
}

/* 3e. Kolor — swatch 12px w opcjach dropdown ────────────────── */
#search_filters .facet .color {
    display:        inline-block            !important;
    width:          12px                    !important;
    height:         12px                    !important;
    border-radius:  50%                     !important;
    border:         0.5px solid rgba(0,0,0,0.15) !important;
    flex-shrink:    0                       !important;
}
#search_filters .facet .color.texture {
    background-size: cover !important;
}

/* 3e-bis. Kółka w pasku .is-color-facet — 20px, bez ograniczeń listy */
#search_filters .facet.is-color-facet ul[id^="facet_"] {
    max-height: none    !important;
    overflow:   visible !important;
}

#search_filters .facet.is-color-facet .facet-label {
    padding:    3px !important;
    border:     none !important;
    background: transparent !important;
}

#search_filters .facet.is-color-facet span.color {
    width:          20px    !important;
    height:         20px    !important;
    border-radius:  50%     !important;
}

/* 3f. Sekcja kolorów — inne zachowanie (:has() CSS4) ──────────
   Facet zawierający span.color: nie dropdown, lecz poziomy rząd
   kółek zawsze widoczny (bez .title jako toggle, bez ukrywania ul).
   Pierwsze 5 kółek widoczne, reszta ukryta. */
#search_filters .facet.is-color-facet .title {
    display: none !important;        /* ukryj pill-button dla koloru */
}

#search_filters .facet.is-color-facet ul[id^="facet_"] {
    position:       static          !important;
    display:        flex            !important;
    flex-wrap:      wrap            !important;
    gap:            4px             !important;
    align-items:    center          !important;
    height:         auto            !important;
    overflow:       visible         !important;
    border:         none            !important;
    box-shadow:     none            !important;
    padding:        0               !important;
    min-width:      0               !important;
    background:     transparent     !important;
    border-radius:  0               !important;
}

/* Pokaż tylko pierwsze 5 kółek */
#search_filters .facet.is-color-facet ul[id^="facet_"] li {
    display: none !important;
}
    display: list-item !important;
    padding: 0 !important;
    margin:  0 !important;
}

/* Label koloru — tylko kółko, bez tekstu i bez ramki pill */
#search_filters .facet.is-color-facet ul[id^="facet_"] li label.facet-label {
    display:        inline-flex !important;
    align-items:    center      !important;
    padding:        2px         !important;
    border:         none        !important;
    background:     transparent !important;
    cursor:         pointer     !important;
    border-radius:  50%         !important;
    gap:            0           !important;
    transition:     box-shadow 0.15s !important;
}

#search_filters .facet.is-color-facet ul[id^="facet_"] li label.facet-label:hover {
    background: transparent !important;
}

/* Kółko koloru — większe (20px) przy trybie zawsze-widocznym */
#search_filters .facet.is-color-facet .color {
    width:          20px                        !important;
    height:         20px                        !important;
    border:         0.5px solid rgba(0,0,0,0.12) !important;
    transition:     transform 0.15s, box-shadow 0.15s !important;
}

#search_filters .facet.is-color-facet li label:hover .color {
    transform:   scale(1.15)    !important;
}

/* Aktywny kolor — podwójna ramka */
#search_filters .facet.is-color-facet li label.active .color {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #1a1a1a !important;
}

/* Ukryj tekst nazwy koloru — tylko kółko widoczne */
#search_filters .facet.is-color-facet li label a.search-link {
    display: none !important;
}
#search_filters .facet.is-color-facet li label .magnitude {
    display: none !important;
}

/* 3g. Aktywne filtry (#js-active-search-filters) ────────────── */
#js-active-search-filters {
    margin-bottom: 0.5rem !important;
}

#js-active-search-filters .filter-block {
    display:        inline-flex !important;
    align-items:    center      !important;
    gap:            4px         !important;
    padding:        3px 10px    !important;
    border-radius:  20px        !important;
    background:     #f0f0f0     !important;
    font-size:      11px        !important;
    margin:         0 4px 4px 0 !important;
}

#js-active-search-filters .filter-block a {
    color:       #555   !important;
    line-height: 1      !important;
}

/* Mobile: cały wrapper ukryty przez .hidden-sm-down PS */
@media (max-width: 767px) {
    #search_filters_wrapper { display: none !important; }
}


/* ── 4. Siatka produktów — 3 kolumny (CSS grid) ─────────────
   Nadpisuje stały width:257px z theme.css.
   ──────────────────────────────────────────────────────────── */

#js-product-list .products.row {
    display:               grid                !important;
    grid-template-columns: repeat(3, 1fr)      !important;
    gap:                   20px                !important;
    margin-left:           0                   !important;
    margin-right:          0                   !important;
}

#js-product-list .products.row .product-miniature {
    margin:  0      !important;
    width:   100%   !important;
    float:   none   !important;
}

#js-product-list .products.row .product-miniature .thumbnail-container {
    width:          100%                    !important;
    height:         auto                    !important;
    margin-bottom:  0                       !important;
    border:         0.5px solid #e0e0e0    !important;
    border-radius:  12px                    !important;
    overflow:       hidden                  !important;
}

/* Tablet: 2 kolumny */
@media (max-width: 991px) {
    #js-product-list .products.row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

/* Mobile: 1 kolumna */
@media (max-width: 575px) {
    #js-product-list .products.row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
}


/* ── 5. Sidebar kategorii — .block-categories ───────────────
   Usuwa niebieski/domyślny nagłówek PS i stosuje czysty design.
   ──────────────────────────────────────────────────────────── */

/* Ukryj nagłówek bloku ("Kategorie") — selektory dla różnych wersji PS/motywów:
   PS renderuje różne elementy w zależności od wersji i motywu —
   pokrywamy wszystkie warianty. */
#left-column .block-categories > .title_block,
#left-column .block-categories > .block-title,
#left-column .block-categories > p.h5,
#left-column .block-categories > h2,
#left-column .block-categories > h3,
#left-column .block-categories > h4,
#left-column .block-categories > h5,
#left-column .blockcategories_title,
#left-column .block-categories .category_header,
#left-column .block-categories [class*="title"] {
    display: none !important;
}

/* Resetuj ramkę i tło kontenera */
.block-categories {
    background:  transparent    !important;
    border:      none           !important;
    box-shadow:  none           !important;
    padding:     0              !important;
    margin:      0              !important;
}

/* Linki w menu głównym i submenu */
.block-categories .category-top-menu li a,
.block-categories .category-sub-menu  li a {
    font-size:      13px                    !important;
    color:          #1a1a1a                 !important;
    text-decoration: none                   !important;
    display:        block                   !important;
    padding:        7px 0                   !important;
    border-bottom:  0.5px solid #f0f0f0     !important;
    line-height:    1.4                     !important;
    transition:     color 0.15s             !important;
}

.block-categories .category-top-menu li a:hover,
.block-categories .category-sub-menu  li a:hover {
    color: #555 !important;
}

/* Kategoria najwyższego poziomu — pogrubiona */
.block-categories .category-top-menu > li > a {
    font-weight: 600    !important;
    font-size:   13px   !important;
}

/* Aktywna / bieżąca kategoria */
.block-categories .category-top-menu li.current > a,
.block-categories .category-sub-menu  li.current > a {
    color:       #1a1a1a    !important;
    font-weight: 600        !important;
}

/* Resetuj pady/marginesy list */
.block-categories .category-top-menu,
.block-categories .category-sub-menu {
    list-style:  none   !important;
    padding:     0      !important;
    margin:      0      !important;
}

/* Subcategorie — lekki indent */
.block-categories .category-sub-menu {
    padding-left: 10px !important;
}

/* Usuń ostatnią linię separatora */
.block-categories .category-top-menu > li:last-child > a,
.block-categories .category-sub-menu  > li:last-child > a {
    border-bottom: none !important;
}

/* ── v10 poprawki ─────────────────────────────────────────── */

/* Niebieski nagłówek ps_categorytree */
#left-column .blockcategories_title,
#left-column > div > p.h5,
#left-column > div > .title_block,
#left-column .block-categories > div.category-header,
#left-column .block-categories > div:not(:has(ul)),
#left-column > div > div:first-child:not(.category-top-menu) {
    display: none !important;
}

/* Puste kropki w submenu */
.block-categories .category-sub-menu li:empty { display: none !important; }
.block-categories .category-sub-menu li a:empty { display: none !important; }
.block-categories .category-sub-menu li:has(a:empty) { display: none !important; }
.block-categories .category-sub-menu li { list-style: none !important; }
.block-categories ul { list-style: none !important; }

/* Kolory — poziomy rząd, 8 kółek */
#search_filters .facet.is-color-facet ul[id^="facet_"] {
    flex-wrap:      nowrap  !important;
    overflow-x:     auto    !important;
    max-width:      300px   !important;
    scrollbar-width: thin   !important;
}
#search_filters .facet.is-color-facet ul[id^="facet_"] li {
    display: list-item !important;
}
    display: list-item !important;
}
    display: none !important;
}

/* Karty produktów */
#js-product-list .products.row .product-miniature .thumbnail-container {
    border:           0.5px solid #e0e0e0 !important;
    border-radius:    12px                !important;
    overflow:         hidden              !important;
    background-color: #fff               !important;
}
#js-product-list .product-miniature article {
    background-color: #fff !important;
}

/* ── v11 poprawki ─────────────────────────────────────────── */

/* Niebieski link "Strona główna" w menu kategorii —
   to a.text-uppercase.h6 wewnątrz category-top-menu
   Nadpisz styl z theme.css który daje niebieskie tło */
#left-column .text-uppercase.h6,
#left-column .block-categories .category-top-menu li a.text-uppercase {
    background:     transparent !important;
    color:          #1a1a1a     !important;
    font-size:      11px        !important;
    font-weight:    500         !important;
    padding:        7px 0       !important;
    line-height:    1.4         !important;
    text-transform: uppercase   !important;
    letter-spacing: 0.04em      !important;
    display:        block       !important;
}



/* ── v12 poprawki ─────────────────────────────────────────── */

/* Ukryj "STRONA GŁÓWNA" — pierwszy li w category-top-menu */
#left-column .block-categories .category-top-menu > li:first-child {
    display: none !important;
}

/* ── Kolory — poziomy rząd kółek (finalna wersja) ────────── */
#search_filters .facet.is-color-facet {
    flex:       0 0 auto    !important;
}
#search_filters .facet.is-color-facet ul[id^="facet_"] {
    position:       static      !important;
    display:        flex        !important;
    flex-direction: row         !important;
    flex-wrap:      nowrap      !important;
    align-items:    center      !important;
    gap:            4px         !important;
    overflow:       hidden      !important;
    max-height:     none        !important;
    border:         none        !important;
    box-shadow:     none        !important;
    background:     transparent !important;
    padding:        0           !important;
    min-width:      0           !important;
    border-radius:  0           !important;
}
#search_filters .facet.is-color-facet ul[id^="facet_"] li {
    display:    list-item   !important;
    flex-shrink: 0          !important;
    padding:    0           !important;
}
    display: none !important;
}

/* ── v13 — kropki i drobne poprawki ──────────────────────── */

/* Usuń list-style z całego menu kategorii */
#left-column ul,
#left-column li,
#left-column .category-top-menu,
#left-column .category-sub-menu,
#left-column .category-top-menu li,
#left-column .category-sub-menu li {
    list-style:     none    !important;
    list-style-type: none   !important;
}

#left-column .category-top-menu li::before,
#left-column .category-sub-menu li::before,
#left-column .category-top-menu li::marker,
#left-column .category-sub-menu li::marker {
    display:  none      !important;
    content:  ''        !important;
}

/* ── v14 — sidebar kategorii zgodny z mockupem ───────────── */

/* Kontener */
#left-column .block-categories {
    background:  #fff               !important;
    border:      0.5px solid #e0e0e0 !important;
    border-radius: 10px             !important;
    overflow:    hidden             !important;
    padding:     0                  !important;
}

/* Każdy link w menu */
#left-column .block-categories .category-top-menu li a,
#left-column .block-categories .category-sub-menu li a {
    display:        flex            !important;
    align-items:    center          !important;
    justify-content: space-between  !important;
    padding:        9px 14px        !important;
    font-size:      13px            !important;
    font-weight:    400             !important;
    color:          #1a1a1a         !important;
    border-bottom:  0.5px solid #f0f0f0 !important;
    text-decoration: none           !important;
    background:     transparent     !important;
    transition:     background 0.15s !important;
}

#left-column .block-categories .category-top-menu li a:hover,
#left-column .block-categories .category-sub-menu li a:hover {
    background: #f7f7f5 !important;
}

/* Aktywna / bieżąca kategoria — czarne tło */
#left-column .block-categories .category-top-menu li.current > a,
#left-column .block-categories li.current > a {
    background:  #1a1a1a !important;
    color:       #ffffff !important;
    font-weight: 600     !important;
}

/* Liczba produktów po prawej */
#left-column .block-categories .category-top-menu li a .count,
#left-column .block-categories .category-sub-menu li a .count {
    font-size:   12px    !important;
    color:       #888    !important;
    margin-left: auto    !important;
    padding-left: 8px    !important;
}

#left-column .block-categories li.current > a .count {
    color: rgba(255,255,255,0.6) !important;
}

/* Ukryj przyciski +/- collapse */
#left-column .block-categories .collapse-icons,
#left-column .block-categories .navbar-toggler {
    display: none !important;
}

/* Usuń ostatnią linię */
#left-column .block-categories li:last-child a {
    border-bottom: none !important;
}

/* Subcategorie — lekkie wcięcie */
#left-column .block-categories .category-sub-menu {
    padding-left: 0 !important;
}

#left-column .block-categories .category-sub-menu li a {
    padding-left: 24px !important;
    font-size:    12px !important;
    color:        #555 !important;
}

/* ── v15 — aktywna kategoria (klasy dodawane przez JS) ───── */

#left-column .block-categories li.jg-active > a {
    background:  #1a1a1a !important;
    color:       #ffffff !important;
    font-weight: 600     !important;
}

#left-column .block-categories li.jg-active > a .count {
    color: rgba(255,255,255,0.6) !important;
}

#left-column .block-categories li.jg-parent-active > a {
    font-weight: 600     !important;
    color:       #1a1a1a !important;
}

/* ── v16 — wcięcia dla poziomów kategorii (data-depth) ───── */

/* depth 0 — kategoria główna (Gadżety reklamowe, Poligrafia...) */
#left-column .block-categories li[data-depth="0"] > a {
    font-weight: 600     !important;
    font-size:   13px    !important;
    padding-left: 14px   !important;
}

/* depth 1 — podkategoria (Długopisy, Breloki...) */
#left-column .block-categories li[data-depth="1"] > a {
    font-weight:  400    !important;
    font-size:    13px   !important;
    padding-left: 22px   !important;
    color:        #333   !important;
}

/* depth 2 — podpodkategoria (Akcesoria, Długopisy ekologiczne...) */
#left-column .block-categories li[data-depth="2"] > a {
    font-weight:  400    !important;
    font-size:    12px   !important;
    padding-left: 34px   !important;
    color:        #666   !important;
}

/* depth 3+ */
#left-column .block-categories li[data-depth="3"] > a,
#left-column .block-categories li[data-depth="4"] > a {
    font-size:    11px   !important;
    padding-left: 46px   !important;
    color:        #888   !important;
}

/* ── v17 — aktywna kategoria zawsze biały tekst ──────────── */
#left-column .block-categories li.jg-active > a,
#left-column .block-categories li[data-depth="0"].jg-active > a,
#left-column .block-categories li[data-depth="1"].jg-active > a,
#left-column .block-categories li[data-depth="2"].jg-active > a,
#left-column .block-categories li[data-depth="3"].jg-active > a {
    background:  #1a1a1a !important;
    color:       #ffffff !important;
    font-weight: 600     !important;
}

/* ── v19 — kolor jako dropdown (jak inne filtry) ─────────── */

/* Przywróć .title dla is-color-facet */
#search_filters .facet.is-color-facet .title {
    display:            inline-flex     !important;
    align-items:        center          !important;
    justify-content:    space-between   !important;
    gap:                6px             !important;
    padding:            5px 12px 5px 16px !important;
    border-radius:      20px            !important;
    border:             0.5px solid #e0e0e0 !important;
    background:         #fff            !important;
    font-size:          12px            !important;
    font-weight:        500             !important;
    color:              #222            !important;
    cursor:             pointer         !important;
    white-space:        nowrap          !important;
}

/* Lista kolorów w dropdownie — pionowa jak inne filtry */
#search_filters .facet.is-color-facet ul[id^="facet_"] {
    position:   absolute            !important;
    top:        calc(100% + 5px)    !important;
    left:       0                   !important;
    min-width:  200px               !important;
    background: #fff                !important;
    border:     1px solid #e0e0e0   !important;
    border-radius: 10px             !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;
    z-index:    200                 !important;
    padding:    6px 0               !important;
    overflow:   hidden              !important;
    display:    block               !important;
    flex-wrap:  unset               !important;
    flex-direction: column          !important;
}

#search_filters .facet.is-color-facet ul[id^="facet_"].in {
    overflow: visible !important;
}

/* Każda opcja koloru — kółko + nazwa */
#search_filters .facet.is-color-facet ul[id^="facet_"] li {
    display:     list-item  !important;
    flex-shrink: unset      !important;
    padding:     0          !important;
}

#search_filters .facet.is-color-facet label.facet-label {
    display:     flex       !important;
    align-items: center     !important;
    gap:         8px        !important;
    padding:     7px 16px   !important;
    border:      none       !important;
    background:  transparent !important;
    cursor:      pointer    !important;
    border-radius: 0        !important;
}

#search_filters .facet.is-color-facet label a.search-link {
    display:   inline   !important;
    font-size: 12px     !important;
    color:     #333     !important;
}

#search_filters .facet.is-color-facet label .magnitude {
    display:     inline     !important;
    font-size:   11px       !important;
    color:       #bbb       !important;
    margin-left: auto       !important;
}

#search_filters .facet.is-color-facet .color {
    width:         14px                         !important;
    height:        14px                         !important;
    border-radius: 50%                          !important;
    border:        0.5px solid rgba(0,0,0,0.15) !important;
    flex-shrink:   0                            !important;
}

/* Przycisk "Pokaż więcej" */
#search_filters .facet.is-color-facet li.jg-show-more {
    display:     list-item  !important;
    border-top:  0.5px solid #f0f0f0 !important;
}

#search_filters .facet.is-color-facet li.jg-show-more span {
    display:     block      !important;
    padding:     7px 16px   !important;
    font-size:   12px       !important;
    color:       #555       !important;
    cursor:      pointer    !important;
}

#search_filters .facet.is-color-facet li.jg-show-more span:hover {
    background: #f5f5f5 !important;
}

/* Pasek filtrów — pozwól zawijać (kolor może być w nowej linii jeśli nie ma miejsca) */
#search_filters {
    flex-wrap: wrap     !important;
    overflow-x: unset   !important;
}

/* ── v20 — fix overflow dla dropdownu kolorów ───────────── */
#search_filters {
    overflow:   visible !important;
    position:   relative !important;
}

#content-wrapper #search_filters_wrapper {
    overflow: visible !important;
}

/* Kolor — resetuj is-color-facet do zachowania jak inne .facet */
#search_filters .facet.is-color-facet ul[id^="facet_"] {
    position:   absolute            !important;
    top:        calc(100% + 5px)    !important;
    left:       0                   !important;
    z-index:    9999                !important;
}

/* ── v21 — fix zwijania kolorów ─────────────────────────── */

/* Nie wymuszaj display:block na zamkniętym dropdownie kolorów */
#search_filters .facet.is-color-facet ul[id^="facet_"] {
    display:    block   !important;
    overflow:   hidden  !important;
}

/* Gdy Bootstrap collapse ma height:0 — ukryj zawartość */
#search_filters .facet.is-color-facet ul[id^="facet_"]:not(.in) {
    height:     0       !important;
    padding:    0       !important;
    visibility: hidden  !important;
}

#search_filters .facet.is-color-facet ul[id^="facet_"].in {
    height:     auto    !important;
    overflow:   visible !important;
    visibility: visible !important;
}

/* ── v22 — ukryj suwaki gdy dropdown zamknięty ──────────── */

/* Suwaki jQuery UI są poza ul — ukryj gdy .title nie ma aria-expanded=true */
#search_filters .facet .ui-slider,
#search_filters .facet .faceted-slider,
#search_filters .facet p.facet-label {
    display: none !important;
}

/* Pokaż gdy dropdown otwarty (JS dodaje aria-expanded=true na .title) */
#search_filters .facet .title[aria-expanded="true"] ~ * .ui-slider,
#search_filters .facet .title[aria-expanded="true"] ~ .ui-slider,
#search_filters .facet:has(.title[aria-expanded="true"]) .ui-slider,
#search_filters .facet:has(.title[aria-expanded="true"]) .faceted-slider,
#search_filters .facet:has(.title[aria-expanded="true"]) p.facet-label {
    display: block !important;
}

/* ── v23 — trzy poprawki ─────────────────────────────────── */

/* 1. Podwójna ramka — usuń border z .product-thumbnail jeśli jest */
#js-product-list .thumbnail-container .product-thumbnail,
#js-product-list .thumbnail-container > a {
    border:        none !important;
    box-shadow:    none !important;
    border-radius: 0    !important;
}

/* 2. Suwaki — są poza ul więc collapse ich nie chowa.
   Schowaj cały facet-body / sekcję pod .title gdy zamknięty */
#search_filters .facet > *:not(.title):not(p.h6):not(p.facet-title) {
    overflow: hidden !important;
}

/* Suwaki widoczne tylko gdy .title[aria-expanded=true] */
#search_filters .facet:not(:has(.title[aria-expanded="true"])) .ui-slider,
#search_filters .facet:not(:has(.title[aria-expanded="true"])) .faceted-slider,
#search_filters .facet:not(:has(.title[aria-expanded="true"])) p.facet-label {
    display: none !important;
}

#search_filters .facet:has(.title[aria-expanded="true"]) .ui-slider,
#search_filters .facet:has(.title[aria-expanded="true"]) .faceted-slider,
#search_filters .facet:has(.title[aria-expanded="true"]) p.facet-label {
    display: block !important;
}

/* 3. Kolory — pokaż więcej niż 12 (brak limitu, JS obsługuje "Pokaż więcej") */
#search_filters .facet.is-color-facet ul[id^="facet_"] li {
    display: list-item !important;
}

/* ── v24 — fix overflow dropdown ────────────────────────── */

/* Dropdown otwarty — overflow visible żeby nie przycinać */
#search_filters .facet ul[id^="facet_"].in,
#search_filters .facet ul[id^="facet_"].collapsing {
    overflow: visible !important;
}

/* Gdy zamknięty — overflow hidden żeby ukryć zawartość */
#search_filters .facet ul[id^="facet_"]:not(.in):not(.collapsing) {
    overflow: hidden !important;
    height: 0 !important;
}

/* ── v25 — wymuś overflow visible na otwartym dropdownie ── */
body #search_filters .facet ul[id^="facet_"].in,
body #search_filters .facet ul[id^="facet_"].collapsing {
    overflow: visible !important;
    height: auto !important;
    clip: auto !important;
}

/* Ukryj zawartość gdy zamknięty ale nie przez height */
body #search_filters .facet ul[id^="facet_"]:not(.in):not(.collapsing) {
    overflow: hidden !important;
    height: 0 !important;
    padding: 0 !important;
}

/* ── v26 — trzy poprawki ─────────────────────────────────── */

/* 1. Wszystkie kolory widoczne — usuń limit nth-child */
    display: list-item !important;
}

/* 2. Podwójna ramka — produkt bez wariantów kolorów
   .product-miniature ma .thumbnail-container z border z naszego CSS
   ale motyw dodaje też border na .products-grid .product-miniature */
#js-product-list .product-miniature .thumbnail-container {
    box-shadow: none !important;
}
#js-product-list .product-miniature article,
#js-product-list .product-miniature .product-description {
    border: none !important;
    box-shadow: none !important;
}
/* Usuń border z elementów wewnątrz thumbnail-container */
#js-product-list .thumbnail-container .thumbnail,
#js-product-list .thumbnail-container img {
    border: none !important;
}

/* 3. Szary pasek pod filtrami — to jest scrollbar lub border
   na #search_filters lub #search_filters_wrapper */
#content-wrapper #search_filters_wrapper {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
#search_filters {
    border-bottom: none !important;
}
/* Ukryj scrollbar poziomy */
#search_filters::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
}

/* ── v27 — poprawki ramki i paska ────────────────────────── */

/* Upewnij się że tylko jedna ramka na karcie */
#js-product-list .thumbnail-container,
#js-product-list .pm-image-wrap,
#js-product-list .product-thumbnail,
#js-product-list .product-miniature article {
    border:     none        !important;
    box-shadow: none        !important;
    outline:    none        !important;
}

/* Jedna ramka tylko na thumbnail-container */
#js-product-list .products.row .product-miniature .thumbnail-container {
    border:           0.5px solid #e0e0e0 !important;
    border-radius:    12px                !important;
    overflow:         hidden              !important;
    background-color: #fff               !important;
}

/* Szary pasek — to jest border-bottom na search_filters_wrapper lub poziomy scrollbar */
#search_filters_wrapper,
#content-wrapper #search_filters_wrapper {
    overflow:      visible  !important;
    border-bottom: none     !important;
}
#search_filters {
    border-bottom: none     !important;
    overflow:      visible  !important;
    scrollbar-width: none   !important;
}
#search_filters::-webkit-scrollbar { height: 0 !important; width: 0 !important; }

/* Przycisk "Pokaż więcej" — limit kolorów */
#search_filters .facet.is-color-facet ul[id^="facet_"] li.jg-show-more {
    display: list-item !important;
}

/* ── v29 — ukrywanie kolorów przez klasę jg-hidden ──────── */
#search_filters .facet ul[id^="facet_"] li.jg-hidden {
    display: none !important;
}

/* ── v30 — usuń dolną linię na kartach produktów ─────────── */

/* Usuń border-bottom z product-description i pokrewnych elementów */
#js-product-list .product-miniature .product-description,
#js-product-list .product-miniature .product-description-short,
#js-product-list .product-miniature .highlighted-informations,
#js-product-list .product-miniature .product-price-and-shipping,
#js-product-list .product-miniature .variant-links,
#js-product-list .product-miniature .pm-body {
    border:        none !important;
    border-bottom: none !important;
    box-shadow:    none !important;
}

/* Szary pasek pod filtrami — scrollbar poziomy */
#search_filters_wrapper {
    overflow: visible !important;
}
#search_filters {
    overflow:        visible         !important;
    scrollbar-width: none           !important;
    -ms-overflow-style: none        !important;
}
#search_filters::-webkit-scrollbar {
    display: none !important;
}

/* ── v31 — thumbnail-container pełna wysokość karty ──────── */
#js-product-list .products.row .product-miniature {
    display: flex !important;
    flex-direction: column !important;
}

#js-product-list .products.row .product-miniature .thumbnail-container {
    flex: 1 !important;
    height: auto !important;
    min-height: 0 !important;
}

/* ── v32 — ukryj ul gdy zamknięty ───────────────────────── */
#search_filters .facet ul[id^="facet_"]:not(.in):not(.collapsing) {
    height:     0           !important;
    min-height: 0           !important;
    padding:    0           !important;
    margin:     0           !important;
    border:     none        !important;
    overflow:   hidden      !important;
    line-height: 0          !important;
    font-size:  0           !important;
}

/* ── v33 — scroll wewnątrz kolorów (nadpisuje v25) ──────── */
body #search_filters .facet.is-color-facet ul[id^="facet_"].in {
    overflow-y: auto    !important;
    overflow-x: hidden  !important;
    max-height: 300px   !important;
}

/* ── Wyszukiwarka kolorów — klasy filtrowania ──────────────── */
#search_filters .facet ul[id^="facet_"] li.jg-search-hidden {
    display: none  !important;
}
#search_filters .facet ul[id^="facet_"] li.jg-search-match {
    display: block !important;
}

/* ── Sortowanie — .products-sort-order ───────────────────────── */

/* 1. Ukryj natywny <select> — PS używa własnego .select-title + .select-list.
      Natywny select był widoczny równolegle i dawał podwójną strzałkę. */
.products-sort-order select {
    display: none !important;
}

/* 2. Styluj tylko .select-title (klikalny trigger PS dropdown) */
.products-sort-order .select-title {
    appearance:         none;
    -webkit-appearance: none;
    border:             0.5px solid #e0e0e0;
    border-radius:      20px;
    padding:            5px 28px 5px 16px;
    font-size:          12px;
    font-weight:        500;
    color:              #222;
    background:         #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
    cursor:             pointer;
}

/* 3. Dropdown .select-list — scroll gdy dużo opcji.
      PS obsługuje otwieranie/zamykanie natywnie, nie nadpisujemy JS. */
.products-sort-order .select-list {
    max-height:  200px;
    overflow-y:  auto;
}

/* ── v34 — sortowanie: ukryj ikonę material, popraw styl listy ── */

/* Ukryj ikonę Material Icons wewnątrz .select-title (druga strzałka) */
.products-sort-order .select-title i.material-icons {
    display: none !important;
}

/* Popraw styl listy dropdown */
.products-sort-order .dropdown-menu {
    border:        0.5px solid #e0e0e0  !important;
    border-radius: 10px                 !important;
    box-shadow:    0 6px 20px rgba(0,0,0,0.10) !important;
    padding:       6px 0                !important;
    min-width:     180px                !important;
    background:    #fff                 !important;
}

.products-sort-order .dropdown-menu .select-list {
    display:     block          !important;
    padding:     8px 16px       !important;
    font-size:   12px           !important;
    color:       #333           !important;
    text-decoration: none       !important;
    transition:  background 0.1s !important;
    background:  transparent    !important;
}

.products-sort-order .dropdown-menu .select-list:hover {
    background: #f5f5f5 !important;
    color:      #1a1a1a !important;
}

.products-sort-order .dropdown-menu .select-list.current {
    font-weight: 600        !important;
    color:       #1a1a1a    !important;
}

/* ── v35 — sortowanie: popraw strzałkę bez ukrywania ikony ── */

/* Nie ukrywaj ikony — zastąp jej zawartość przez CSS */
.products-sort-order .select-title i.material-icons {
    display:     inline-block   !important;
    font-size:   0              !important;
    width:       16px           !important;
    height:      16px           !important;
    background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center !important;
    vertical-align: middle      !important;
    float: right                !important;
}

/* Usuń background SVG z .select-title — ikona go zastępuje */
.products-sort-order .select-title {
    background-image: none !important;
}

/* ── v36 — suwaki Waga/Cena (ul.faceted-slider) ─────────── */

/* Padding wewnątrz dropdownu z suwakiem */
#search_filters .facet ul.faceted-slider.in {
    padding:    16px    !important;
    overflow:   visible !important;
    min-width:  220px   !important;
}

/* Etykieta z wartościami */
#search_filters .facet ul.faceted-slider p.facet-label {
    font-size:     12px     !important;
    color:         #555     !important;
    margin-bottom: 12px     !important;
    display:       block    !important;
}

/* Suwak jQuery UI */
#search_filters .ui-slider-horizontal {
    height:        4px              !important;
    background:    #e0e0e0          !important;
    border:        none             !important;
    border-radius: 2px              !important;
    margin:        8px 4px          !important;
}

#search_filters .ui-slider-range {
    background:    #1a1a1a  !important;
    border:        none     !important;
}

#search_filters .ui-slider-handle {
    width:         16px             !important;
    height:        16px             !important;
    border-radius: 50%              !important;
    background:    #1a1a1a          !important;
    border:        none             !important;
    top:           -6px             !important;
    cursor:        pointer          !important;
    outline:       none             !important;
}

#search_filters .ui-slider-handle:hover {
    background: #333 !important;
}

/* ── v51 — scroll wewnątrz dużych facetów tekstowych (Materiał itp.) ── */
body #search_filters .facet.is-text-facet ul[id^="facet_"].in {
    overflow-y: auto    !important;
    overflow-x: hidden  !important;
    max-height: 300px   !important;
}

/* ── v52 — Mobile: drawer z filtrami ───────────────────────── */

#jg-filter-overlay {
    display:    none;
    position:   fixed;
    inset:      0;
    background: rgba(0,0,0,0.45);
    z-index:    1040;
}
#jg-filter-overlay.jg-active {
    display: block;
}
body.jg-filter-open {
    overflow: hidden;
}

/* Drawer — osobny element w body */
#jg-filter-drawer {
    display:        none;
    position:       fixed;
    bottom:         0;
    left:           0;
    right:          0;
    max-height:     80vh;
    overflow-y:     auto;
    overflow-x:     hidden;
    background:     #fff;
    border-radius:  16px 16px 0 0;
    box-shadow:     0 -4px 24px rgba(0,0,0,0.18);
    z-index:        1050;
    padding:        0;
}

#jg-filter-drawer::before {
    content:        '';
    display:        block;
    width:          40px;
    height:         4px;
    background:     #ddd;
    border-radius:  2px;
    margin:         12px auto 8px;
}

#jg-filter-drawer #search_filters {
    display:        flex            !important;
    flex-direction: column          !important;
    align-items:    stretch         !important;
    gap:            4px             !important;
    padding:        8px 16px 24px   !important;
    border:         none            !important;
    border-radius:  0               !important;
    box-shadow:     none            !important;
    margin-bottom:  0               !important;
    background:     #fff            !important;
}

#jg-filter-drawer #search_filters .facet {
    display:    block   !important;
    width:      100%    !important;
    position:   relative !important;
}

#jg-filter-drawer #search_filters .facet .title {
    display:        flex            !important;
    width:          100%            !important;
    justify-content: space-between  !important;
    border-radius:  8px             !important;
    padding:        10px 16px       !important;
    box-sizing:     border-box      !important;
}

#jg-filter-drawer #search_filters .facet ul[id^="facet_"] {
    position:       relative    !important;
    top:            auto        !important;
    left:           auto        !important;
    box-shadow:     none        !important;
    border:         0.5px solid #f0f0f0 !important;
    border-radius:  8px         !important;
    margin-top:     4px         !important;
    max-height:     220px       !important;
    overflow-y:     auto        !important;
    width:          100%        !important;
}

@media (max-width: 767px) {
    /* Ukryj oryginalny wrapper na mobile */
    #search_filters_wrapper,
    #content-wrapper #search_filters_wrapper {
        display: none !important;
    }
}

/* ── v52b — Mobile: padding boczny strony ──────────────────── */
@media (max-width: 767px) {
    #wrapper .container {
        padding-left:  12px !important;
        padding-right: 12px !important;
    }
}

/* ── v53 — Mobile: styl przycisku FILTR + przycisk Wyczyść ─── */

/* Przycisk FILTR — styl jak add-to-cart */
#search_filter_toggler {
    display:        inline-flex         !important;
    align-items:    center              !important;
    justify-content: center            !important;
    gap:            8px                 !important;
    padding:        10px 20px           !important;
    background:     #1a1a1a            !important;
    color:          #fff               !important;
    border:         none               !important;
    border-radius:  10px               !important;
    font-family:    'DM Sans', sans-serif !important;
    font-size:      14px               !important;
    font-weight:    500                !important;
    letter-spacing: 0.03em             !important;
    cursor:         pointer            !important;
    transition:     background 0.18s   !important;
    text-transform: none               !important;
}

#search_filter_toggler:hover {
    background: #333 !important;
}

/* Ikona filtra przed tekstem */
#search_filter_toggler::before {
    content:     '';
    display:     inline-block;
    width:       16px;
    height:      16px;
    background:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='6' x2='20' y2='6'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='11' y1='18' x2='13' y2='18'/%3E%3C/svg%3E") no-repeat center;
    flex-shrink: 0;
}

/* Przycisk Wyczyść filtry — wewnątrz drawera mobile */
#jg-clear-filters {
    width:          100%            !important;
    padding:        10px 20px       !important;
    background:     #fff            !important;
    color:          #1a1a1a        !important;
    border:         1.5px solid #1a1a1a !important;
    border-radius:  10px            !important;
    font-family:    'DM Sans', sans-serif !important;
    font-size:      14px            !important;
    font-weight:    500             !important;
    cursor:         pointer         !important;
    transition:     background 0.18s, color 0.18s !important;
    text-align:     center          !important;
    margin-top:     8px             !important;
    text-transform: none            !important;
}

#jg-clear-filters:hover {
    background: #f5f5f5 !important;
}

/* Na desktop — przycisk wyczyść w pasku filtrów */
@media (max-width: 767px) {
    /* Na mobile JS ustawia display:block — pozwól mu wygrać */
    #jg-clear-filters {
        width:      100%    !important;
        margin-top: 8px     !important;
    }
}

@media (min-width: 768px) {
    #jg-clear-filters {
        display:        inline-flex     !important;
        align-items:    center          !important;
        gap:            6px             !important;
        width:          auto            !important;
        padding:        5px 14px        !important;
        font-size:      12px            !important;
        border-radius:  20px            !important;
        margin-top:     0               !important;
        border-width:   0.5px           !important;
    }
}

/* ── v59 — Mobile: fix content-wrapper height collapse ─────── */
@media (max-width: 767px) {
    #wrapper .row {
        display:    block   !important;
        float:      none    !important;
    }
    #left-column {
        display:    none    !important;
    }
    #content-wrapper {
        width:      100%    !important;
        float:      none    !important;
        min-height: 100px   !important;
    }
}

/* ── v60 — Mobile: fix content-wrapper hidden-sm-down ───────── */
@media (max-width: 767px) {
    #content-wrapper.hidden-sm-down {
        display: block !important;
    }
}

/* ── Sortowanie: margines od opisu + przesuń na prawo ── */
body#category .products-selection {
    margin-top: 16px !important;
}
body#category .products-selection .sort-by-row {
    justify-content: flex-end !important;
    align-items:     center   !important;
}

/* ── Sortowanie: zwęź trigger do szerokości tekstu ── */
body#category .products-sort-order {
    flex:         0 0 auto  !important;
    width:        auto      !important;
    max-width:    none      !important;
}
body#category .products-sort-order .select-title {
    width:        auto      !important;
    min-width:    180px     !important;
    white-space:  nowrap    !important;
    display:      inline-block !important;
}

/* ── v63 — Mobile: fix overflow z .row ujemnymi marginesami ── */
@media (max-width: 767px) {
    .products-selection,
    .sort-by-row {
        margin-left:  0 !important;
        margin-right: 0 !important;
    }
    .products-selection .col-md-6,
    .products-selection [class*="col-"] {
        padding-left:  8px !important;
        padding-right: 8px !important;
    }
}