/* ==============================================================================
 * BENTO CATALOG STYLES - ZŁOTY STANDARD
 * ==============================================================================
 * Plik: bento-catalog.css
 * Opis: Style katalogu produktów, kategorii, filtrów nawigacyjnych.
 * SPIS TREŚCI:
 * 1. STRONA KATEGORII — Karta produktu (Bento Card)
 * 2. NAGŁÓWEK KATEGORII — Breadcrumb, Tytuł, Badge, Opis
 * 3. TOOLBAR KATEGORII — Sortowanie, Dropdown, Licznik
 * 4. SIDEBAR I FILTRY (Faceted Search)
 * 5. DRZEWO KATEGORII
 * ============================================================================== */

/*    12a. STRONA KATEGORII — Karta produktu (Bento Card) */
/* ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Karta produktu Bento */

body#category .btx-product-card,
body#index .btx-product-card,
body#search .btx-product-card,
body#product .btx-product-card,
body#index .btx-product-card {
    background: var(--btx-bg-tile) !important; /* Białe tło kafelka */
    border-radius: var(--btx-radius-2xl) !important; /* Duże zaokrąglenie */
    border: var(--btx-border-width) solid var(--btx-border-color) !important; /* Subtelna ramka */
    display: flex !important;             /* Kolumnowy flex */
    flex-direction: column !important;    /* Pionowy układ: zdjęcie → opis → cena */
    height: 100% !important;             /* Pełna wysokość wiersza siatki */
    overflow: hidden !important;         /* Obcięcie zawartości w rogach (zdjęcia) */
    position: relative !important;        /* Kotwica dla flag i stretched-link */
    transition: transform var(--btx-transition-md),
                box-shadow var(--btx-transition-md) !important; /* Animacja hover karty */
}

body#category .btx-product-card:hover,
body#index .btx-product-card:hover,
body#search .btx-product-card:hover,
body#product .btx-product-card:hover,
body#index .btx-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--btx-shadow-tile-hover) !important;
}

/* Flagi produktu (Nowość, Promocja) */

.btx-flags-container {
    position: absolute !important;        
    top: 16px !important;                
    left: 16px !important;               
    z-index: 20 !important;             
    padding: 0 !important;               
    display: flex !important;            
    flex-direction: row !important;      
    flex-wrap: nowrap !important;
    width: max-content !important;       /* Pozwala kontenerowi rosnąć w poziomie */
    pointer-events: none !important;      
}

.btx-flags-container .product-flags {
    display: flex !important;             
    flex-direction: row !important;       
    flex-wrap: nowrap !important;        /* Bezwzględny zakaz łamania linii */
    width: max-content !important;
    gap: 6px !important;                 
    list-style: none !important;         
    padding: 0 !important;               
    margin: 0 !important;                
}

.product-flags li.product-flag,
.btx-flags-container .product-flag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 8px !important;         /* Radykalnie odchudzony padding (pigułka jest znacznie niższa) */
    border-radius: var(--btx-radius-pill) !important;
    font-size: 9px !important;           /* Mniejsza czcionka */
    font-weight: 600 !important;          /* Lżejsza waga czcionki (Semi-bold zamiast Extra-bold) */
    text-transform: uppercase !important;
    line-height: 1 !important;
    width: fit-content !important;
    letter-spacing: 0.05em !important;
    margin: 0 !important;                
    pointer-events: none !important;
    
    /* Efekt Semi-transparent Glassmorphism */
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.btx-flags-container .product-flag.new {
    background: rgba(24, 24, 27, 0.15) !important;  
    color: var(--btx-text-secondary) !important;     
    border: 0.5px solid var(--btx-text-secondary) !important; 
}

.btx-flags-container .product-flag.on-sale,
.btx-flags-container .product-flag.discount {
    background: rgba(245, 158, 11, 0.4) !important; /* Ten sam piękny bursztynowy odcień co cena, 40% krycia */
    color: var(--btx-text-secondary) !important; 
    border: 0.5px solid var(--btx-text-secondary) !important; 
}


/* ============================================================
   12b. STRONA KATEGORII — Zdjęcie, Opis, Cena
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Karta produktu Bento > Zdjęcie i opis */

body#category .btx-thumbnail-wrapper,
body#search .btx-thumbnail-wrapper {
    background: transparent !important;
    margin: 0 !important;
    border-radius: var(--btx-radius-2xl) var(--btx-radius-2xl) 0 0 !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body#category .btx-thumbnail-wrapper .thumbnail,
body#search .btx-thumbnail-wrapper .thumbnail {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

body#category .btx-thumbnail-wrapper img,
body#search .btx-thumbnail-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: auto !important;
}

body#category .btx-product-description,
body#index .btx-product-description,
body#search .btx-product-description,
body#index .btx-product-description {
    padding: 20px 24px 24px 24px !important;
    display: flex !important;             /* Kolumnowy flex */
    flex-direction: column !important;    /* Pionowy układ */
    justify-content: flex-start !important; /* Treść od góry */
    align-items: flex-start !important;   /* Wyrównanie do lewej */
    flex-grow: 1 !important;             /* Wypycha cenę na dół kafelka */
    width: 100% !important;              /* Pełna szerokość */
    box-sizing: border-box !important;   /* Padding wliczony w szerokość */
    gap: 8px !important;                 /* 8px odstęp między elementami opisu */
}

body#category .product-title,
body#index .product-title,
body#search .product-title,
body#index .product-title {
    margin: 0 !important;                /* Reset marginesów */
    width: 100% !important;              /* Pełna szerokość */
    text-align: left !important;         /* Wyrównanie do lewej (Bento) */
}

body#category .product-title a,
body#index .product-title a,
body#search .product-title a {
    font-size: 14px !important;          /* 14px — czytelna nazwa na kafelku */
    font-weight: 700 !important;          /* Pogrubiony tytuł */
    color: var(--btx-text-primary) !important; /* Ciemny kolor */
    text-decoration: none !important;    /* Brak podkreślenia */
    text-align: left !important;         /* Wyrównanie do lewej */
    display: -webkit-box !important;     /* Konieczne dla line-clamp (WebKit) */
    -webkit-line-clamp: 2 !important;    /* Maksymalnie 2 linie tytułu */
    line-clamp: 2 !important;            /* Standard (nieprefixowany) */
    -webkit-box-orient: vertical !important; /* Wymagane przez line-clamp WebKit */
    box-orient: vertical !important;     /* Standard */
    overflow: hidden !important;         /* Obcięcie przekroczenia */
    text-overflow: ellipsis !important;  /* "..." na końcu obciętego tytułu */
    line-height: 1.4 !important;         /* Komfortowy interlinia */
}

/* Cena i przycisk akcji — dolna belka kafelka */

body#category .product-price-and-shipping,
body#index .product-price-and-shipping,
body#search .product-price-and-shipping {
    display: flex !important;             /* Cena i przycisk w jednej linii */
    justify-content: space-between !important; /* Cena po lewej, przycisk po prawej */
    align-items: center !important;        /* Pionowe wycentrowanie */
    width: 100% !important;              /* Pełna szerokość */
    min-width: 100% !important;          /* Absolutny zakaz kurczenia się */
    box-sizing: border-box !important;   /* Padding wliczony */
    margin-top: auto !important;         /* Sprężyna dociskająca belkę do dołu kafelka */
    padding: 8px 12px !important;        /* Padding belki */
    border: var(--btx-border-dashed) !important; /* Przerywana ramka belki ceny */
    border-radius: var(--btx-radius-xl) !important; /* 16px zaokrąglenie belki */
    background: transparent !important;  /* Transparentne tło */
}

body#category .btx-price-group,
body#index .btx-price-group,
body#search .btx-price-group {
    display: flex !important;             /* Cena regularna i cena obniżona w kolumnie */
    flex-direction: column !important;    /* Pionowy układ */
    align-items: flex-start !important;   /* Wyrównanie do lewej */
    justify-content: center !important;  /* Pionowe wycentrowanie */
    gap: 0 !important;                   /* Brak odstępu — ceny blisko siebie */
    margin: 0 !important;                /* Reset marginesów */
}

/* [DUPLIKAT — nadpisane przez: body#category .price ~linia poniżej] */
body#category .price,
body#index .price,
body#search .price {
    font-size: 16px !important;          /* 16px cena produktu */
    font-weight: 900 !important;          /* Najgrubszy */
    color: var(--btx-color-primary) !important; /* Niebieski */
    line-height: 1 !important;           /* Bez dodatkowych odstępów */
}

body#category .btx-price-group .invisible,
body#index .btx-price-group .invisible,
body#category .btx-price-group meta,
body#index .btx-price-group meta,
body#search .btx-price-group .invisible,
body#search .btx-price-group meta {
    display: none !important;            /* Ukrycie ukrytych elementów SEO Presty (psują wyrównanie) */
    height: 0 !important;               /* Brak wysokości */
    margin: 0 !important;               /* Brak marginesów */
    padding: 0 !important;              /* Brak paddingów */
}

body#category .regular-price,
body#index .regular-price,
body#search .regular-price {
    font-size: 11px !important;          /* 11px — mała przekreślona cena oryginalna */
    color: var(--btx-text-tertiary) !important; /* Jasny szary */
    text-decoration: line-through !important; /* Przekreślona — była cena */
    font-weight: 500 !important;          /* Medium */
    margin: 0 !important;               /* Reset marginesu */
}

body#category .price,
body#index .price,
body#search .price {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: var(--btx-color-primary) !important;
    line-height: 1 !important;
}


/* ============================================================
   12c. STRONA KATEGORII — Stretched Link i przycisk akcji
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Karta produktu Bento > Interakcja */

.btx-product-card {
    position: relative !important;
    border: var(--btx-border-width) solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-2xl) !important;
    background: var(--btx-bg-tile) !important;
    overflow: hidden !important;
}

.btx-product-card .btx-stretched-link::after {
    content: "";                           /* Pseudoelement tworzący niewidzialną nakładkę klikalności */
    position: absolute;                    /* Absolutny — pokrywa cały kafelek */
    top: 0;                                /* Góra kafelka */
    right: 0;                              /* Prawa krawędź */
    bottom: 0;                             /* Dół kafelka */
    left: 0;                               /* Lewa krawędź */
    z-index: 1;                            /* Nad treścią, pod przyciskiem akcji (z-index: 2) */
    pointer-events: auto;                  /* Przechwytuje kliknięcia (cały kafelek klikalny) */
}

body#category .btx-card-action-btn,
body#index .btx-card-action-btn,
body#search .btx-card-action-btn,
body#product .btx-card-action-btn {
    display: flex !important;             /* Centrowanie ikony strzałki */
    align-items: center !important;       /* Pionowe wycentrowanie */
    justify-content: center !important;  /* Poziome wycentrowanie */
    width: 40px !important;              /* Kwadratowy przycisk 40px */
    height: 40px !important;             /* Kwadratowy przycisk 40px */
    background: var(--btx-bg-input) !important; /* Szare tło domyślne */
    border-radius: 50% !important;       /* Okrągły */
    color: var(--btx-text-secondary) !important; /* Szary kolor ikony */
    transition: all var(--btx-transition-fast) !important; /* Szybka animacja */
    position: relative !important;        /* Pozycjonowanie względem kafelka */
    z-index: 2 !important;              /* Nad stretched-link (z-index: 1) */
    flex-shrink: 0 !important;           /* Nie zmniejsza się */
}

body#category .btx-product-card:hover .btx-card-action-btn,
body#index .btx-product-card:hover .btx-card-action-btn,
body#search .btx-product-card:hover .btx-card-action-btn,
body#product .btx-product-card:hover .btx-card-action-btn {
    background: var(--btx-color-primary) !important; /* Niebieski przycisk przy hover na kafelku */
    color: #ffffff !important;           /* Biała ikona */
    transform: scale(1.08) !important;  /* Lekkie powiększenie przycisku */
}


/* ============================================================
   12d. STRONA KATEGORII — Responsive
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Responsywność (Media Queries) > Strona kategorii */

@media (max-width: 991px) {
    body#category .btx-cat-layout {
        grid-template-columns: 1fr !important; /* Jedna kolumna (sidebar chowa się) */
    }
    body#category .btx-cat-sidebar {
        position: static !important;       /* Wyłączenie sticky na mobile */
        margin-bottom: var(--btx-gap-md) !important; /* 16px odstęp pod sidebarem */
    }
    body#category #products .products.row {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 kolumny na tabletach */
        gap: var(--btx-gap-md) !important; /* 16px odstęp */
    }
}

@media (max-width: 480px) {
    body#category #products .products.row {
        grid-template-columns: 1fr !important; /* 1 kolumna na małych telefonach */
    }
}


/* ============================================================
   13. NAGŁÓWEK KATEGORII — Breadcrumb, Tytuł, Badge, Opis
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Strona kategorii > Nagłówek */

.btx-cat-header {
    margin-bottom: var(--btx-gap-md) !important; /* 16px odstęp pod nagłówkiem */
    position: relative !important;        /* Kotwica dla absolutnie pozycjonowanego badge'a */
}

.btx-cat-header-inner {
    display: flex;                         /* Zawartość nagłówka w kolumnie */
    flex-direction: column;                /* Pionowy układ: breadcrumb → tytuł → opis */
    gap: var(--btx-gap-md);               /* 16px odstęp */
}

.btx-cat-header .btx-breadcrumb ol {
    display: flex;                         /* Elementy breadcrumb w jednym wierszu */
    flex-wrap: wrap;                       /* Zawijanie gdy brak miejsca */
    gap: 8px;                              /* Odstęp między elementami */
    list-style: none;                      /* Brak punktorów */
    padding: 0;                            /* Reset paddingu */
    margin: 0;                             /* Reset marginesu */
}

.btx-cat-header .btx-breadcrumb li {
    font-size: var(--btx-text-xs);        /* 11px — mały breadcrumb */
    color: var(--btx-text-muted);         /* Wygaszony szary kolor */
    font-weight: 500;                      /* Medium */
}

.btx-cat-header .btx-breadcrumb li a {
    color: var(--btx-text-tertiary);      /* Nieco ciemniejszy niż text-muted */
    text-decoration: none;                 /* Brak podkreślenia */
    transition: color var(--btx-transition-fast); /* Animacja hover */
}

.btx-cat-header .btx-breadcrumb li a:hover {
    color: var(--btx-color-primary);      /* Niebieski kolor linku hover */
}

.btx-cat-header .btx-breadcrumb li:not(:last-child)::after {
    content: "•";                          /* Separator "•" między elementami */
    margin-left: 8px;                      /* Odstęp przed separatorem */
    opacity: 0.3;                          /* Wygaszony separator */
}

.btx-cat-title-block {
    display: block;                        /* Block — pełna szerokość */
}

/* Badge licznika w prawym górnym rogu kafelka nagłówka */

.btx-cat-badge {
    position: absolute !important;
    top: var(--btx-tile-padding);
    right: var(--btx-tile-padding);
    background: var(--btx-bg-input) !important;
    color: var(--btx-text-tertiary) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: var(--btx-radius-pill) !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    z-index: 2;
    pointer-events: none !important;
}

.btx-cat-title {
    padding-right: 80px;                   /* Miejsce na badge (80px) — tytuł nie wchodzi pod badge */
}

@media (max-width: 768px) {
    .btx-cat-title {
        padding-right: 0;                  /* Na mobile brak miejsca — tytuł zajmuje pełną szerokość */
    }
    .btx-cat-badge {
        position: static !important;       /* Na mobile badge wraca do normalnego flow */
        display: inline-block;             /* Inline-block — szerokość dopasowana do tekstu */
        margin-bottom: 8px;                /* 8px odstęp pod badge'em */
    }
}

.btx-cat-desc-wrapper {
    padding-top: var(--btx-gap-md);       /* 16px padding nad opisem */
    border-top: var(--btx-border-dashed); /* Przerywana linia oddzielająca opis od tytułu */
    max-width: 800px;                      /* Ograniczenie szerokości dla czytelności długich opisów */
}

.btx-cat-desc {
    font-size: var(--btx-text-sm);        /* 13px — czytelny opis kategorii */
    line-height: 1.6;                      /* Komfortowy interlinia dla dłuższych tekstów */
    color: var(--btx-text-secondary);     /* Szary kolor tekstu */
}


/* ============================================================
   14. TOOLBAR KATEGORII — Sortowanie, Dropdown, Licznik
   ============================================================ */

/* [SUGESTIA] Przenieść do kategorii: Komponenty > Strona kategorii > Toolbar sortowania */

.btx-toolbar {
    background: var(--btx-bg-tile) !important; /* Białe tło toolbaru */
    border-radius: var(--btx-radius-xl) !important; /* 16px zaokrąglenie */
    border: var(--btx-border-width) solid var(--btx-border-color) !important; /* Ramka */
    padding: 12px 20px !important;        /* Padding toolbaru */
    display: flex !important;             /* Licznik i sortowanie obok siebie */
    align-items: center !important;        /* Pionowe wycentrowanie */
    justify-content: space-between !important; /* Licznik po lewej, sortowanie po prawej */
    margin-top: 0 !important;            /* Brak marginesu górnego */
    margin-bottom: var(--btx-gap-md) !important; /* 16px pod toolbarem */
    width: 100% !important;              /* Pełna szerokość */
}

#js-product-list {
    margin-top: 0 !important;
}


/* Wyrównanie elementów w wrapperze na mobile */
@media (max-width: 991px) {
    .btx-sort-wrapper {
        align-items: center !important;
    }
}

.btx-count {
    background: transparent !important;  /* Brak tła (pastylka usunięta) */
    padding: 0 !important;               /* Brak paddingu */
    border-radius: 0 !important;         /* Brak zaokrągleń */
    color: var(--btx-text-secondary) !important; /* Szary kolor */
    font-size: var(--btx-text-sm) !important; /* 13px */
    font-weight: 600 !important;          /* Semi-bold */
    text-transform: none !important;     /* Bez wielkich liter */
    letter-spacing: normal !important;   /* Normal letter-spacing */
}

.btx-toolbar-top {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

.btx-sort-wrapper {
    margin-left: auto !important;
    display: flex !important;
}

.btx-sort-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.products-sort-order.dropdown {
    width: auto !important;              /* Brak sztywnej szerokości Bootstrap */
    padding: 0 !important;              /* Reset paddingu Bootstrap */
}

.btx-sort-label {
    font-size: var(--btx-text-xs) !important; /* 11px — mała etykieta "Sortuj:" */
    color: var(--btx-text-muted) !important; /* Wygaszony kolor */
    font-weight: 600 !important;          /* Semi-bold */
}

.btx-sort-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    border: 1px solid var(--btx-border-color) !important;
    border-radius: var(--btx-radius-pill) !important;
    height: 32px !important;
    padding: 0 32px 0 16px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--btx-text-primary) !important;
    cursor: pointer !important;
    transition: all var(--btx-transition-fast) !important;
}

.btx-sort-button:hover {
    background: var(--btx-border-color) !important; /* Ciemniejsze szare tło przy hover */
}

.btx-sort-icon {
    color: var(--btx-text-muted) !important; /* Wygaszony kolor strzałki */
    transition: transform var(--btx-transition-fast) !important; /* Animacja obrotu strzałki */
}

.dropdown.show .btx-sort-icon {
    transform: rotate(180deg);            /* Obrót strzałki przy otwartym dropdownie */
}

.btx-dropdown-menu {
    border-radius: var(--btx-radius-lg) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    box-shadow: var(--btx-shadow-glass) !important; /* Szklany cień ujednolicony */
    padding: 8px !important;             /* Padding wewnętrzny listy */
    margin-top: 8px !important;          /* 8px odstęp od przycisku */
}

.btx-dropdown-menu .dropdown-item {
    border-radius: var(--btx-radius-sm) !important; /* 8px zaokrąglenie pozycji */
    font-size: 13px !important;          /* 13px */
    font-weight: 600 !important;          /* Semi-bold */
    padding: 8px 12px !important;        /* Wygodny padding */
    color: var(--btx-text-secondary) !important; /* Szary kolor domyślny */
}

.btx-dropdown-menu .dropdown-item:hover,
.btx-dropdown-menu .dropdown-item.active {
    background: var(--btx-bg-selected) !important; /* Jasnoniebieskie tło aktywnego/hover */
    color: var(--btx-color-primary) !important; /* Niebieski tekst */
}

/* Reset marginesów natywnych headerów Presty */

#js-product-list-header,
.products-selection {
    margin: 0 !important;                /* Reset marginesów */
    padding: 0 !important;              /* Reset paddingów */
}

#js-product-list {
    margin-top: 0 !important;            /* Reset marginesu górnego listy */
}


















/* ============================================================
   15. SIDEBAR I FILTRY (BENTO UI FINAL - CLEAN VERSION)
   ============================================================ */

/* --- 1. GŁÓWNY LAYOUT KAFELKOWY SIDEBARA --- */
body#category .btx-cat-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--btx-gap-md) !important;
    position: sticky !important;
    top: 110px !important;
    z-index: 10 !important;
    margin-top: 0 !important; 
}

/* Wygaszenie starych kontenerów Presty */
body#category #search_filters,
body#index #search_filters,
body#category #left-column .block,
body#index #left-column .block,
body#category .block-categories {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body#category #search_filters_wrapper {
    margin-top: var(--btx-gap-lg) !important;
}

/* Karta kategorii i filtru jako samodzielny kafelek Bento */
body#category .btx-tile.btx-category-tree-tile,
body#index .btx-tile.btx-category-tree-tile,
body#category #search_filters_wrapper.btx-tile {
    background: var(--btx-bg-tile) !important;
    border-radius: var(--btx-radius-2xl) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    /* Zmiana na symetryczny padding (20px góra/dół, 20px boki) */
    padding: 20px 20px !important; 
    box-shadow: var(--btx-shadow-tile) !important;
    transition: transform var(--btx-transition-fast), box-shadow var(--btx-transition-fast) !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

body#category .btx-tile.btx-category-tree-tile:hover,
body#index .btx-tile.btx-category-tree-tile:hover,
body#category .facet.btx-tile:hover {
    box-shadow: var(--btx-shadow-tile-hover) !important;
}

/* --- 2. TYTUŁY W KAFELKACH --- */

/* Główny tytuł "FILTRUJ WEDŁUG" - Pigułka (Pill) zrobiona w CSS */
body#category #search_filters > p.h6,
body#index #search_filters > p.h6,
body#category #search_filters > .h6 {
    background: var(--btx-bg-input) !important;
    color: var(--btx-text-secondary) !important;
    padding: 6px 14px !important;
    border-radius: var(--btx-radius-pill) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    display: inline-block !important; /* Pigułka otula tylko tekst */
    margin: 0 0 24px 0 !important; /* Odstęp do pierwszego filtra */
    border: 1px solid rgba(0,0,0,0.06) !important;
    align-self: flex-start !important; /* Blokuje rozciąganie pigułki przez flexbox rodzica */
    line-height: 1 !important;
}

/* Tytuły poszczególnych filtrów (Kategorie, Marka, Cena) - RÓWNE LINIE DASHED */
body#category .facet .facet-title,
body#index .facet .facet-title,
body#category .block-categories .h6 {
    display: block !important;
    width: 100% !important; /* Wymuszenie pełnej szerokości */
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
    text-transform: uppercase !important;
    margin: 0 0 16px 0 !important; /* Taki sam margines jak na górze */
    padding-bottom: 16px !important; /* Taki sam padding jak na górze */
    border-bottom: var(--btx-border-dashed) !important; /* PRZYWRÓCONA LINIA */
    letter-spacing: 0.05em !important;
    box-sizing: border-box !important;
}

/* Dodatkowy odstęp między grupami filtrów i wymuszenie pełnej szerokości */
body#category .facet {
    margin-bottom: 24px !important;
    padding: 0 !important; /* Reset ukrytych paddingów Presty */
    width: 100% !important;
}

/* --- 3. PRZYCISK "WYCZYŚĆ WSZYSTKO" --- */

/* Ustawiamy kontener filtrów jako flex, by móc manipulować kolejnością elementów */
body#category #search_filters {
    display: flex !important;
    flex-direction: column !important;
}

/* --- 3. PRZYCISK "WYCZYŚĆ WSZYSTKO" --- */
body#category #search_filters > .clear-all-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin: 0 0 24px 0 !important; /* Usunięty górny margines (niweluje dziurę), zostaje 24px pod spodem */
    width: 100% !important;
}

body#category #search_filters .js-search-filters-clear-all {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--btx-color-danger-light) !important;
    color: var(--btx-color-danger) !important;
    border-radius: var(--btx-radius-pill) !important;
    padding: 6px 14px !important;
    font-weight: 800 !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    height: auto !important; /* Reset wysokości dla paddingu */
    width: 100% !important; /* Rozciągnięty na pełną szerokość kafelka */
    transition: all var(--btx-transition-fast) !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
}

body#category #search_filters .js-search-filters-clear-all:hover {
    background: var(--btx-color-danger) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

body#category #search_filters .js-search-filters-clear-all i {
    display: none !important;
}




/* --- 4. FILTRY BENTO (KROK 1: TYLKO ZAOKRĄGLENIE) --- */

/* 1. Zaokrąglenie standardowego checkboxa i szara ramka Bento */
body#category .custom-checkbox input[type="checkbox"] + span {
    border-radius: 50% !important;
    border: 2px solid var(--btx-text-muted) !important; 
    transition: all var(--btx-transition-fast) !important;
    width: 18px !important;
    height: 18px !important;
}

/* 2. Zaokrąglenie atrybutu koloru i zabicie cieni Classic Theme */
body#category .facet-label .color {
    border-radius: 50% !important;
    box-shadow: none !important; 
    width: 18px !important;
    height: 18px !important;
}

/* 2. Zwykły checkbox - po zaznaczeniu wypełnia się głównym kolorem */
body#category .facet-label.active .custom-checkbox input[type="checkbox"] + span {
    background-color: var(--btx-color-primary) !important;
    border-color: var(--btx-color-primary) !important;
}

/* Ukrywamy domyślnego ptaszka z Presty CAŁKOWICIE (eliminuje mignięcie AJAX) */
body#category .custom-checkbox .checkbox-checked {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* --- 5. SUWAK CENY (BENTO STYLED JQUERY UI) --- */

/* 1. Kontener suwaka */
body#category .faceted-slider {
    /* Padding lewy wyrównuje suwak z checkboxami (mają padding-left na etykiecie) */
    /* Padding równy 9px z każdej strony daje miejsce na połowę kółka (18px/2 = 9px) */
    padding: 0 9px !important; 
    margin: 24px 0 16px 0 !important;
}

/* 2. Pasek w tle (niezaznaczony obszar) - dodajemy bezpieczny szary */
body#category #search_filters .ui-widget-content {
    background: rgba(0, 0, 0, 0.08) !important; 
    border: none !important;
    height: 6px !important; 
    border-radius: var(--btx-radius-pill) !important;
    margin: 0 !important;
}

/* 3. Pasek aktywny (zaznaczony obszar) - Ciemniejszy szary */
body#category #search_filters .ui-slider .ui-slider-range {
    background: var(--btx-text-muted) !important; 
    border-radius: var(--btx-radius-pill) !important;
    transition: none !important; /* KLUCZ: Zabija animację szerokości, zapobiega skakaniu */
}

/* 4. Rączki (uchwyty) suwaka - Ciemniejsze obwódki */
body#category #search_filters .ui-slider .ui-slider-handle {
    background: var(--btx-bg-tile) !important;
    border: 2px solid var(--btx-text-muted) !important; 
    border-radius: 50% !important; 
    width: 18px !important;
    height: 18px !important;
    top: -6px !important; 
    margin-left: -9px !important; 
    cursor: grab !important;
    outline: none !important; 
    z-index: 2 !important; 
    transition: none !important; /* KLUCZ: Zabija opóźnienie JS i naprawia błąd 0/100% */
}
/* Rączka chwycona (w trakcie przesuwania) - Ciemne tło */
body#category #search_filters .ui-slider .ui-slider-handle:active {
    cursor: grabbing !important;
    background: var(--btx-text-muted) !important; 
}

/* 5. Tekst z zakresem cen pod suwakiem */
body#category #search_filters .faceted-slider p {
    text-align: start !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--btx-text-primary) !important;
    margin-top: 24px !important;
    letter-spacing: 0.02em !important;
}






/* ============================================================
   16. DRZEWO KATEGORII (BENTO UI - FINAL STABLE)
   ============================================================ */

/* --- 1. RESET I STRUKTURA BAZOWA --- */
body#category .btx-category-tree-tile,
body#index .btx-category-tree-tile,
body#category .btx-category-tree-tile * {
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
    box-shadow: none !important;
    list-style: none !important;
}

body#category .btx-category-tree-tile ul {
    padding: 0 !important;
    margin: 0 !important;
}

/* Zdejmujemy obramowanie z li, by uniknąć problemów z dziedziczeniem i długością w zagnieżdżeniach */
body#category .btx-category-tree-tile li {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: relative !important;
    width: 100% !important;
    border-bottom: none !important; 
}

/* --- 2. NAGŁÓWEK KAFELKA --- */
body#category .btx-category-tree-tile .category-top-menu > li > a.h6 {
    display: block !important;
    margin: 0 0 16px 0 !important;
    padding: 0 0 16px 0 !important; 
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    color: var(--btx-text-primary) !important;
    border-bottom: var(--btx-border-dashed) !important; /* Wyrównana linia */
    letter-spacing: 0.05em !important;
}

/* --- 3. HIERARCHIA LINKÓW --- */

body#category .btx-category-tree-tile .btx-cat-link {
    display: block !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
    transition: all var(--btx-transition-fast) !important;
    padding-right: 44px !important; /* Miejsce zarezerwowane na ikonę (Holding Place) */
    border-bottom: none !important; /* Domyślnie brak linii (dla podkategorii) */
}

body#category .btx-category-tree-tile .btx-level-0 {
    color: var(--btx-text-primary) !important;
    font-weight: 800 !important;
    border-bottom: var(--btx-border-dashed) !important; /* Linia TYLKO dla kategorii nadrzędnych */
}

/* Ukrycie ostatniej linii, by nie dotykała dolnego paddingu kafelka (jeśli ostatni element to poziom 0) */
body#category .btx-category-tree-tile li:last-child > .btx-level-0 {
    border-bottom: none !important;
}

body#category .btx-category-tree-tile .btx-level-sub {
    color: var(--btx-text-secondary) !important;
    font-weight: 600 !important;
    padding-left: 24px !important;
}

/* Kolor tekstu filtrów (nieaktywny) */
body#category .facet-label a {
    color: var(--btx-text-muted) !important;
    transition: color var(--btx-transition-fast) !important;
}

/* Hover na filtry — Spójny z kategoriami oraz rozszerzona strefa dla checkboxów */
body#category .facet-label:hover a {
    color: var(--btx-color-primary) !important;
}

body#category .facet-label:hover .custom-checkbox input[type="checkbox"] + span {
    border-color: var(--btx-color-primary) !important;
}

/* Kolor tekstu filtrów (aktywny) */
body#category .facet-label.active a {
    color: var(--btx-text-primary) !important;
    font-weight: 700 !important;
}

/* Aktywna kategoria — Brak wyróżnienia (zwykły tekst) + Natywne klasy PrestaShop */
body#category .btx-category-tree-tile .btx-active,
body#index .btx-category-tree-tile .btx-active,
body#category .btx-category-tree-tile .current,
body#index .btx-category-tree-tile .current,
body#category .btx-category-tree-tile .active {
    color: var(--btx-text-primary) !important;
    background: transparent !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    font-weight: normal !important;
}

/* Hover w kategoriach — Tylko kolor niebieski */
body#category .btx-category-tree-tile .btx-cat-link:hover {
    color: var(--btx-color-primary) !important;
    background: transparent !important;
}

/* --- 4. PRZYCISK ROZWIJANIA (FIX POZYCJI I KOLORU) --- */
body#category .btx-category-tree-tile .btx-collapse-btn {
    position: absolute !important;
    right: 0 !important; 
    top: 0 !important; /* Blokujemy na górze li, tam gdzie jest link */
    width: 44px !important;
    height: 44px !important; /* Wysokość dopasowana do obszaru linku */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 10 !important;
}

body#category .btx-category-tree-tile .btx-chevron {
    transition: transform 0.3s ease, color 0.3s ease !important;
    font-size: 32px !important; /* Solidny rozmiar Bento */
    color: var(--btx-text-muted) !important; /* WYMUSZONY szary na starcie */
    transform: rotate(0deg) !important;
}

/* Logika: Klasa .collapsed jest DODAWANA przez JS, gdy menu jest zamknięte */
/* Gdy jej NIE MA (:not), strzałka rotuje i błękitnieje */
body#category .btx-category-tree-tile .btx-collapse-btn:not(.collapsed) .btx-chevron {
    transform: rotate(180deg) !important;
    color: var(--btx-color-primary) !important;
}

/* Zabezpieczenie przed niebieskim kolorem linku rodzica */
body#category .btx-category-tree-tile .btx-collapse-btn.collapsed .btx-chevron {
    color: var(--btx-text-muted) !important;
    transform: rotate(0deg) !important;
}

/* Hover - podświetlenie ikony */
body#category .btx-category-tree-tile .btx-collapse-btn:hover .btx-chevron {
    color: var(--btx-color-primary) !important;
}

/* UJEDNOLICENIE LINII - Usuwamy linię pod pigułką i zmniejszamy oddech */
body#category .btx-category-tree-tile .category-top-menu > li > a.h6 {
    border-bottom: none !important;
    padding-bottom: 0px !important; /* Zmniejszony odstęp */
}

/* Wygląd Pigułki (Pill) dla napisu STRONA GŁÓWNA (zgodnie z GEMINI BENTO PILL) */
body#category .btx-category-tree-tile .btx-pill-home {
    background: var(--btx-bg-input) !important;
    color: var(--btx-text-secondary) !important;
    padding: 6px 14px !important;
    border-radius: var(--btx-radius-pill) !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    display: inline-block !important;
    transition: all var(--btx-transition-fast) !important;
}

/* Efekt najechania myszką na pigułkę */
body#category .btx-category-tree-tile .category-top-menu > li > a.h6:hover .btx-pill-home {
    background: var(--btx-color-primary) !important; /* Niebieskie tło na hover */
    color: #ffffff !important; /* Biały tekst na hover */
}


/* ============================================================ */

/* ============================================================
   Wymuszenie usunięcia starych cieni PrestaShop z obrazków
   ============================================================ */
.btx-thumbnail-wrapper.thumbnail-container {
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

/* ============================================================
   BENTO WISHLIST BUTTON (ICON-ONLY & KONCENTRYCZNIE W ŁUK)
   ============================================================ */
/* Zerowanie niewidzialnego kontenera modułu, który psuł marginesy! */
body .wishlist-button {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wishlist-button-add {
    position: absolute !important;
    top: 16px !important; /* Spasowane idealnie z promieniem rogu (koncentrycznie) */
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    background: var(--btx-bg-tile) !important;
    border-radius: 50% !important; /* Pełne koło jak w UI Kit */
    margin: 0 !important;
    box-shadow: none !important; /* ZERO CIENIA - Zgodnie z prośbą! */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all var(--btx-transition-fast) !important;
    z-index: 10 !important;
    border: 1px solid var(--btx-border-color) !important; /* Ramka jak w btx-btn-secondary */
    flex-shrink: 0 !important; /* Blokada przed spłaszczaniem we flexboxie! */
    box-sizing: border-box !important;
}

@media (hover: hover) {
    .wishlist-button-add:hover {
        background: var(--btx-bg-input) !important;
        border-color: var(--btx-text-muted) !important;
        transform: scale(1.05) !important;
    }
}

.wishlist-button-add:active {
    transform: scale(0.9) !important;
    transition-duration: 0.05s !important;
}

.wishlist-button-add i {
    font-size: 14px !important; /* Dopasowanie wielkości do ikon z UI Kitu */
    color: #374151 !important; /* Ciemniejszy odcień szarości, jak w strzałkach */
    text-shadow: 0 0 0.5px #374151 !important; /* Sztuczne pogrubienie linii (material-icons 'favorite_border' jest domyślnie bardzo cienkie) */
    transition: all var(--btx-transition-fast) !important;
}

@media (hover: hover) {
    .wishlist-button-add:hover i {
        color: #111827 !important; /* Prawie czarny na hover */
        text-shadow: 0 0 0.5px #111827 !important;
    }
}

/* Jeśli produkt jest w wishlist, ma mieć solidny kolor */
.wishlist-button-add.checked i {
    color: var(--btx-color-danger) !important;
}
@media (hover: hover) {
    .wishlist-button-add.checked:hover i {
        color: var(--btx-color-danger) !important; /* Zostaje czerwone przy najeżdżaniu jeśli zaznaczone */
    }
}



nav.pagination {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 32px !important;
    padding-bottom: 8px !important;
    background: transparent !important;
}

nav.pagination .col-md-4 {
    text-align: center !important;
    font-size: 12px !important;
    color: var(--btx-text-muted) !important;
    order: 2 !important;
    background: transparent !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

nav.pagination .col-md-6,
nav.pagination .offset-md-2 {
    order: 1 !important;
    padding: 0 !important;
    background: transparent !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: 0 !important;
}

nav.pagination .page-list {
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

nav.pagination .page-list li a,
nav.pagination .page-list li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: var(--btx-radius-pill) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--btx-text-secondary) !important;
    background: var(--btx-bg-tile) !important;
    border: 1px solid var(--btx-border-color) !important;
    text-decoration: none !important;
    transition: all var(--btx-transition-fast) !important;
}

nav.pagination .page-list li.current a,
nav.pagination .page-list li.current span {
    background: var(--btx-text-primary) !important;
    color: #fff !important;
    border-color: var(--btx-text-primary) !important;
}

@media (hover: hover) {
    nav.pagination .page-list li a:hover {
        background: var(--btx-border-color) !important;
        color: var(--btx-text-primary) !important;
    }
}

nav.pagination .page-list .spacer {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    color: var(--btx-text-muted) !important;
    font-size: 13px !important;
    border: none !important;
    background: none !important;
}

nav.pagination .page-list li a.previous,
nav.pagination .page-list li a.next {
    gap: 4px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

nav.pagination .page-list li a .material-icons {
    font-size: 16px !important;
}