/**
 * Category Listing Styles
 * Nowy wygląd strony kategorii według projektu Figma
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    --category-border-color: #e5e5e5;
    --category-bg-light: #f5f5f5;
    --category-text-primary: #000;
    --category-text-secondary: #595959;
    --category-text-tertiary: #888;
    --category-brand-primary: #E4FD71;
    --category-brand-dark: #183030;
    --category-radius-small: 4px;
    --category-radius-medium: 8px;
    --category-warning-bg: #f7c344;
    --category-discount-bg: #fee0e0;
    --category-discount-text: #c41408;
}

/* ========================================
   LEFT SIDEBAR - Podkategorie i Filtry
   ======================================== */
#left-column {
    padding-right: 24px;
}

.left-column-sz {
    background: var(--background-color-light, #fff);
    border: 1px solid var(--category-border-color);
    border-radius: var(--category-radius-small);
    padding: 32px 12px;
}

/* Hide default category tree module on category pages */
.category-listing-page~#left-column #_desktop_category_tree_menu,
#left-column #_desktop_category_tree_menu,
#left-column .category-tree {
    display: none !important;
}

/* Show block-categories on category pages */
/* #left-column .block-categories {
    display: none !important;
}

#left-column .block-categories.has-subcategory-nav {
    display: block !important;
} */

/* Desktop Category Tree Styling (similar to mobile-subcategories-list) */
#left-column .block-categories {
    margin-bottom: 32px;
}

#left-column .block-categories .category-top-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#left-column .block-categories .category-top-menu>li {
    margin: 0;
    padding: 0;
}

#left-column .block-categories .category-top-menu>li>a.text-uppercase {
    display: block;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    color: var(--category-text-primary, #000);
    text-decoration: none;
    margin-bottom: 16px;
    padding: 0;
}

#left-column .block-categories .category-sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

#left-column .block-categories .category-sub-menu>li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--category-border-color, #e5e5e5);
}

#left-column .block-categories .category-sub-menu>li>a,
#left-column .block-categories .category-sub-menu>li>a.category-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary, #000);
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

/* Add arrow icon for categories with children (similar to mobile) */

#left-column .block-categories .category-sub-menu>li>a:hover,
#left-column .block-categories .category-sub-menu>li>a.category-sub-link:hover {
    color: var(--category-text-primary, #000);
}

#left-column .block-categories .category-sub-menu>li.active>a,
#left-column .block-categories .category-sub-menu>li.active>a.category-sub-link {
    font-weight: 600;
}

#left-column .block-categories .category-sub-menu>li>a svg,
#left-column .block-categories .category-sub-menu>li>a.category-sub-link svg {
    color: var(--category-text-tertiary, #888);
    flex-shrink: 0;
    margin-left: 8px;
}

/* Collapse icons styling - hide Material Icons, use CSS arrow instead */
#left-column .block-categories .navbar-toggler.collapse-icons {
    display: none;
    /* Hide Material Icons toggler, we use CSS arrow */
}

#left-column .block-categories .navbar-toggler.collapse-icons .material-icons {
    display: none;
}

/* Show/hide arrow based on expanded state */
#left-column .block-categories .category-sub-menu>li:has(.navbar-toggler[aria-expanded="true"])>a::after {
    transform: rotate(90deg);
}

/* Nested subcategories */
#left-column .block-categories .category-sub-menu .category-sub-menu {
    padding-left: 16px;
    margin-top: 0;
}

#left-column .block-categories .category-sub-menu .category-sub-menu>li {
    border-bottom: 1px solid var(--category-border-color, #e5e5e5);
}

#left-column .block-categories .category-sub-menu .category-sub-menu>li>a.category-sub-link {
    padding: 10px 0;
    font-size: 13px;
}

/* Arrows for nested categories - hide Material Icons, use CSS arrow */
#left-column .block-categories .arrows {
    display: none;
    /* Hide Material Icons arrows, we use CSS arrow */
}

#left-column .block-categories .arrows .material-icons {
    display: none;
}

/* Rotate arrow when expanded */
#left-column .block-categories .category-sub-menu>li:has(.arrows[aria-expanded="true"])>a.category-sub-link::after {
    transform: rotate(90deg);
}

/* Subcategories Section */
.category-sidebar-section {
    margin-bottom: 32px;
}

.category-sidebar-title {
    color: var(--text-color-base-primary, #000);
    /* Heading/Head-S */
    font-family: var(--font-family-family-primary, Sora);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    /* 128.571% */
    margin: 0 0 16px 0;
    padding: 0 16px;
}

/* Subcategory Navigation */
.subcategory-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subcategory-nav-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 24px 16px;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.subcategory-nav-back:hover {
    opacity: 0.7;
    text-decoration: none;
    color: var(--category-text-primary);
}

.subcategory-nav-back svg {
    flex-shrink: 0;
}

.subcategory-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    white-space: normal;
    /* Pozwala na łamanie tekstu */
}

.subcategory-nav-item-clickable {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    padding: 12px 16px;
    white-space: normal;
    /* Pozwala na łamanie tekstu */
}

.subcategory-nav-item.active {
    font-weight: 600;
    cursor: default;
}

.subcategory-nav-item.active .subcategory-name {
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 142.857% */
}

.subcategory-nav-item.active .subcategory-name .count,
.subcategory-nav-item.active .count {
    color: var(--text-color-base-tetriary, #888);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    /* 142.857% */
    margin-left: 4px;
}

.subcategory-nav-item.level-2 {
    padding-left: 32px;
}

.subcategory-nav-item .subcategory-name {
    flex: 1;
    min-width: 0;
    /* Pozwala na kurczenie się i łamanie */
    white-space: normal;
    /* Pozwala na łamanie tekstu */
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.subcategory-nav-item .subcategory-name .count {
    color: var(--category-text-tertiary);
    margin-left: 4px;
}

.subcategory-nav-item .arrow {
    margin-left: auto;
    color: var(--text-color-base-tetriary, #888);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
}

.subcategory-divider {
    height: 1px;
    background-color: var(--category-border-color);
    margin: 0 16px;
}

.subcategory-divider-indent {
    margin-left: 32px;
}

/* Sidebar Section Divider */
.sidebar-section-divider {
    height: 1px;
    background-color: var(--category-border-color);
    margin: 32px 0;
}

/* ========================================
   FILTERS SECTION
   ======================================== */
.filters-section {
    margin-bottom: 32px;
}

.filters-section-title {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
    color: var(--category-text-primary);
    margin: 0 0 24px 0;
    padding: 0 16px;
}

/* Facet/Filter Group */
.facet {
    margin-bottom: 32px;
}

.facet:last-child {
    margin-bottom: 0;
}

.facet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 12px;
}

.facet-title {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--category-text-primary);
    margin: 0;
}

.facet-clear {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-secondary);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.facet-clear:hover {
    text-decoration: underline;
}

/* ========================================
   FILTER CHECKBOX LIST - Figma Design
   ======================================== */
.facet-list {
    list-style: none;
    padding: 0 12px;
    margin: 0;
}

.facet-list li {
    margin-bottom: 8px;
}

.facet-list li:last-child {
    margin-bottom: 0;
}

.facet-list li.facet-hidden {
    display: none;
}

.facet-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 4px;
    cursor: pointer;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

/* Custom Checkbox Styling */
.facet-label .custom-checkbox {
    width: 20px;
    height: 20px;
    background: var(--color-neutral-11, #f5f5f5);
    border-radius: var(--radius-x-small, 4px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: background-color 0.15s ease;
}

.facet-label .custom-checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.facet-label .custom-checkbox .checkbox-icon {
    display: none;
    align-items: center;
    justify-content: center;
}

.facet-label .custom-checkbox input:checked~.checkbox-icon {
    display: flex;
}

.facet-label .custom-checkbox input:checked+.checkbox-icon,
.facet-label.active .custom-checkbox .checkbox-icon {
    display: flex;
}

.facet-label .custom-checkbox .checkbox-icon svg {
    width: 10px;
    height: 8px;
}

/* Custom Radio Styling */
.facet-label .custom-radio {
    width: 20px;
    height: 20px;
    background: var(--color-neutral-11, #f5f5f5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.facet-label .custom-radio input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.facet-label .custom-radio .radio-icon {
    width: 10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

.facet-label .custom-radio input:checked~.radio-icon {
    background: var(--category-brand-dark, #183030);
}

/* Filter Name & Magnitude */
.facet-label .filter-name {
    color: var(--text-color-base-primary, #000);
    text-decoration: none;
    flex: 1;
}

.facet-label .filter-name:hover {
    text-decoration: none;
    color: var(--text-color-base-primary, #000);
}

.facet-label .magnitude {
    color: var(--text-color-base-tetriary, #888);
    margin-left: 4px;
}

/* ========================================
   SHOW MORE BUTTON - Figma Design
   ======================================== */
.facet-show-more-wrapper {
    margin-top: 2px;
}

.facet-show-more {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color-base-primary, #000);
    background: none;
    border: none;
    cursor: pointer;
}

.facet-show-more:hover {
    opacity: 0.7;
}

.facet-show-more svg {
    width: 20px;
    height: 20px;
    color: var(--border-primary, #e5e5e5);
}

/* ========================================
   PRICE SLIDER - Figma Design
   ======================================== */
.faceted-slider {
    padding: 0 16px;
}

.facet-slider-container {
    position: relative;
    padding-top: 8px;
}

/* Price Histogram */
.price-histogram {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 64px;
    padding: 4px;
    margin-bottom: 4px;
    background: transparent;
}

.histogram-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 2px;
}

.histogram-bar {
    flex: 1;
    background: var(--color-neutral-10, #e5e5e5);
    border-radius: 4px 4px 0 0;
    min-width: 3px;
    max-width: 6px;
    transition: background-color 0.2s ease;
}

.histogram-bar.in-range {
    background: var(--color-brand-one-7, #C7E068);
}

/* Slider Wrapper */
.slider-wrapper {
    position: relative;
    padding: 0 6px;
    margin: 0 6px;
}

/* jQuery UI Slider Override */
.ui-slider {
    height: 2px !important;
    background: var(--category-border-color, #e5e5e5) !important;
    border: none !important;
    border-radius: 1px !important;
    position: relative !important;
    margin-top: 0 !important;
}

.ui-slider-range-custom.ui-slider {
    height: 2px !important;
    background: var(--category-border-color, #e5e5e5) !important;
    border: none !important;
    border-radius: 1px !important;
}

.ui-slider .ui-slider-range,
.ui-slider-range-custom .ui-slider-range {
    background: var(--color-brand-one-7, #C7E068) !important;
    border: none !important;
    height: 2px !important;
    top: 0 !important;
}

.ui-slider .ui-slider-handle,
.ui-slider-range-custom .ui-slider-handle {
    width: 12px !important;
    height: 12px !important;
    background: var(--background-color-brand-1-normal, #E4FD71) !important;
    border: 1px solid var(--color-brand-one-7, #C7E068) !important;
    border-radius: 50% !important;
    top: -5px !important;
    margin-left: -6px !important;
    cursor: pointer !important;
    z-index: 2 !important;
    box-shadow: none !important;
}

.ui-slider .ui-slider-handle:focus,
.ui-slider-range-custom .ui-slider-handle:focus {
    outline: none !important;
}

.ui-slider .ui-slider-handle:hover,
.ui-slider-range-custom .ui-slider-handle:hover {
    background: var(--color-brand-one-7, #C7E068) !important;
}

/* Slider Tooltip */
.slider-tooltip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-neutral-12-base, #fafafa);
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    padding: 4px 8px;
    box-shadow: 0px 0px 0px 1px white;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
    display: none;
}

.ui-slider-handle:hover .slider-tooltip,
.ui-slider-handle.ui-state-focus .slider-tooltip {
    display: block;
}

.slider-tooltip-value {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
}

.slider-tooltip-unit {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    color: var(--text-color-base-tetriary, #888);
    margin-left: 2px;
}

/* Price Range Inputs */
.price-range-inputs {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 22px;
}

.price-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    background: #fff;
}

.price-input-wrapper input {
    flex: 1;
    border: none;
    outline: none;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color-base-primary, #000);
    min-width: 0;
    background: transparent;
}

.price-input-wrapper input::placeholder {
    color: var(--text-color-base-tetriary, #888);
}

.price-input-wrapper .currency {
    color: var(--text-color-base-tetriary, #888);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    flex-shrink: 0;
}

.price-range-separator {
    width: 32px;
    height: 1px;
    background-color: var(--border-primary, #e5e5e5);
    flex-shrink: 0;
}

/* Facet Divider */
.facet-divider {
    height: 1px;
    background-color: var(--category-border-color);
    margin: 32px 16px;
}

/* Brand Logos in Sidebar */
.sidebar-brands {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-brand-item {
    height: 38px;
    background: var(--category-bg-light);
    border-radius: var(--category-radius-small);
}

/* ========================================
   BRANDS SECTION (Top of content)
   ======================================== */
.category-brands-section {
    margin-bottom: 32px;
}

/* Mobile: margin-bottom dla sekcji marek */
@media (max-width: 991px) {
    .category-brands-section.d-lg-none {
        margin-bottom: 24px;
    }
}

.category-brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

/* Mobile: Horizontal scroll dla kart producentów */
@media (max-width: 991px) {
    .category-brands-section.d-lg-none {
        margin-bottom: 24px;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 8px;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #888 #f1f1f1;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll::-webkit-scrollbar {
        height: 4px;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 2px;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll .brand-card {
        flex: 0 0 auto;
        min-width: 140px;
        max-width: 140px;
        width: 140px;
        flex-direction: column;
        align-items: center;
        padding: 12px;
        text-align: center;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll .brand-card img {
        width: 100%;
        height: auto;
        max-height: 80px;
        object-fit: contain;
        margin-bottom: 8px;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll .brand-card-name {
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        margin-top: 4px;
    }

    .category-brands-section.d-lg-none .category-brands-grid.category-brands-scroll .brand-card-arrow {
        display: none;
    }

    /* Ukryj przycisk "Pokaż więcej" na mobile */
    .category-brands-section.d-lg-none .brands-show-more {
        display: none !important;
    }

    /* Pokaż wszystkie karty na mobile (usunięcie brand-card-hidden) */
    .category-brands-section.d-lg-none .brand-card-hidden {
        display: flex !important;
    }

    /* Mobile category header styles */
    .mobile-category-header h1,
    .mobile-category-header .mobile-category-title {
        color: var(--text-color-base-primary, #000);
        font-family: var(--font-family-family-primary, Sora);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        /* 150% */
        margin-bottom: 16px;
    }

    .mobile-category-header .product-count {
        color: var(--text-color-base-tetriary, #888);
        font-family: var(--font-family-family-primary, Sora);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        /* 150% */
    }
}

.brand-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--background-color-light, #fff);
    border: 1px solid var(--category-border-color);
    border-radius: var(--category-radius-small);
    text-decoration: none;
    transition: border-color 0.2s ease;
    position: relative;
}

.brand-card:hover {
    border-color: var(--category-brand-dark);
}

.brand-card img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.brand-card-name {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    flex: 1;
}

.brand-card-arrow {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.brand-card-arrow svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Ukryj karty poza pierwszymi 6 */
.brand-card-hidden {
    display: none;
}

/* Pokaż wszystkie karty gdy siatka ma klasę show-all */
.category-brands-grid.show-all .brand-card-hidden {
    display: flex;
}

.brands-show-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 32px 0;
    width: 100%;
    margin-top: 16px;
    border-bottom: 1px solid #E5E5E5;
}

.brands-show-more-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    /* 142.857% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 7%;
    /* 0.98px */
    text-underline-offset: 70%;
    /* 9.8px */
    text-underline-position: from-font;
    background: none;
    border: none;
    cursor: pointer;
}

/* ========================================
   CATEGORY TITLE + SORTING
   ======================================== */
.category-listing-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 0;
    margin-bottom: 16px;
}

.category-listing-header>.d-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.category-listing-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.category-listing-title h1 {
    color: var(--text-color-base-primary, #000);
    /* Text/Body */
    font-family: var(--font-family-family-primary, Sora);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
    margin: 0;
}

.category-listing-title .product-count {
    color: var(--text-color-base-tetriary, #888);
    /* Text/Body */
    font-family: var(--font-family-family-primary, Sora);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

/* Sort Dropdown */
.products-sort-select {
    min-width: 256px;
}

.products-sort-select .form-control,
.products-sort-select select {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    padding: 12px 40px 12px 16px;
    border: 1px solid var(--category-border-color);
    border-radius: var(--category-radius-small);
    background: white url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center no-repeat;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* Custom Sort Dropdown - Based on Figma Design */
.custom-sort-dropdown {
    position: relative;
    min-width: 200px;
}

.sort-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.sort-dropdown-trigger:hover {
    border-color: var(--color-brand-one-7, #C7E068);
}

.sort-dropdown-trigger[aria-expanded="true"] {
    border-color: var(--color-brand-one-7, #C7E068);
}

.sort-dropdown-trigger[aria-expanded="true"] .sort-dropdown-arrow {
    transform: rotate(180deg);
}

.sort-dropdown-text {
    flex: 1;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sort-dropdown-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--text-color-base-primary, #000);
    transition: transform 0.2s ease;
}

.sort-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    display: none !important;
    flex-direction: column;
    padding: 4px;
    margin: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    box-shadow: 0px 2px 12px 0px rgba(178, 178, 178, 0.5);
}

.sort-dropdown-menu.show {
    display: flex !important;
}

.sort-dropdown-menu li {
    margin: 0;
}

.sort-dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.sort-dropdown-item:hover {
    background: var(--color-brand-two-10, #F3EFEA);
    text-decoration: none;
}

.sort-dropdown-item.active {
    background: transparent;
}

.sort-dropdown-item.active:hover {
    background: var(--color-brand-two-10, #F3EFEA);
}

.sort-item-text {
    flex: 1;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
}

.sort-item-radio {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border-primary, #e5e5e5);
    transition: all 0.15s ease;
}

.sort-item-radio.checked {
    background: var(--background-color-brand-1-normal, #E4FD71);
    border: 1px solid var(--color-brand-one-7, #C7E068);
}

.sort-item-radio svg {
    width: 8px;
    height: 8px;
    display: none;
}

.sort-item-radio.checked svg {
    display: block;
}

/* Pagination Controls */
.listing-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-input-box {
    display: flex;
    align-items: center;
    gap: 0;
}

.page-number-input {
    width: 72px;
    height: 44px;
    padding: 12px 16px;
    border: 1px solid var(--category-border-color);
    border-radius: var(--category-radius-small) 0 0 var(--category-radius-small);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    text-align: center;
    -moz-appearance: textfield;
}

.page-number-input::-webkit-outer-spin-button,
.page-number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-total-box {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    background: transparent;
    border: none;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-secondary, #595959);
}

.pagination-prev-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    margin-right: 8px;
    background: var(--category-brand-primary, #E4FD71);
    border: none;
    border-radius: var(--category-radius-small, 4px);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.pagination-prev-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pagination-next-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 24px;
    background: var(--category-brand-primary, #E4FD71);
    border: none;
    border-radius: var(--category-radius-small, 4px);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s;
}

.pagination-next-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.pagination-next-btn:hover {
    opacity: 0.9;
}

.pagination-next-btn svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   PRODUCT GRID
   ======================================== */
#js-product-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

#js-product-list .product {
    width: 100% !important;
    padding: 0;
    margin: 0;
}

/* Row Separator */
.product-row-separator {
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 8px 0;
}

.product-row-separator svg {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: 1px;
    display: block;
    margin-inline-start: 0;
}

/* Product Card New Style */
.product-miniature {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 8px;
    border-radius: var(--category-radius-medium);
}

.product-miniature .thumbnail-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-miniature .thumbnail-top {
    position: relative;
}

.product-miniature .product-thumbnail {
    display: block;
    padding: 8px;
}

.product-miniature .thumbnail-container .product-thumbnail {
    height: auto;
    padding: 0;
}

.product-miniature .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Product Flags */
.product-miniature .product-flags-top {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 8px;
    z-index: 1;
}

.product-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    border-radius: var(--category-radius-small);
}

.product-flag.flag-low-quantity {
    background: var(--category-warning-bg);
    color: var(--category-text-primary);
}

.product-flag.flag-popular {
    background: var(--category-brand-dark);
    color: white;
}

/* Product Description */
.product-miniature .product-description {
    margin-top: auto;
    padding: 0;
}

.product-miniature .title-product {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0 0 4px 0;
}

.product-miniature .title-product a {
    color: var(--category-text-primary);
    text-decoration: none;
}

/* Product Price */
.product-miniature .product-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-miniature .price {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--category-text-tertiary);
}

.product-miniature .discount-percentage {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: var(--category-discount-bg);
    border-radius: var(--category-radius-small);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: var(--category-discount-text);
}

/* Product Hover Link */
.product-miniature .product-hover-link {
    display: none;
}

/* ========================================
   PAGINATION BOTTOM
   ======================================== */
.products-bottom-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0 16px 0;
    border-top: 1px solid var(--category-border-color);
    margin-top: 16px;
}

.products-count-info {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
}


/* Mobile Filters Toggle Button - używa stylów sort-dropdown-trigger */
.mobile-filters-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    cursor: pointer;
    transition: border-color 0.2s ease;
    font-family: inherit;
    text-align: left;
    margin-bottom: 8px;
}

.mobile-filters-toggle:hover {
    border-color: var(--color-brand-one-7, #C7E068);
}

/* Mobile category compact toggle button - same style as mobile-filters-toggle */
.mobile-filters-toggle-compact.btn-primary.compact-toggle,
a.mobile-filters-toggle-compact.btn-primary.compact-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    cursor: pointer;
    transition: border-color 0.2s ease;
    font-family: inherit;
    text-align: left;
    margin-bottom: 8px;
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.mobile-filters-toggle-compact.btn-primary.compact-toggle:hover,
a.mobile-filters-toggle-compact.btn-primary.compact-toggle:hover {
    border-color: var(--color-brand-one-7, #C7E068);
}

/* Hide other compact-toggle buttons (not our mobile one) */
.btn-primary.compact-toggle:not(.mobile-filters-toggle-compact),
a.btn-primary.compact-toggle:not(.mobile-filters-toggle-compact),
.compact-toggle:not(.mobile-filters-toggle-compact) {
    display: none !important;
}

.mobile-filters-toggle[aria-expanded="true"] {
    border-color: var(--color-brand-one-7, #C7E068);
}

.mobile-filters-toggle[aria-expanded="true"] .sort-dropdown-arrow {
    transform: rotate(180deg);
}

.mobile-filters-toggle-text {
    flex: 1;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop only */
@media (min-width: 992px) {
    .mobile-filters-toggle {
        display: none;
    }

    .mobile-category-header {
        display: none;
    }
}

/* ========================================
   BREADCRUMB - SCROLL ON MOBILE
   ======================================== */
@media (max-width: 991px) {
    .breadcrumb-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
        max-width: 100% !important;
    }

    .breadcrumb-wrapper::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .breadcrumb-wrapper .breadcrumb,
    .breadcrumb-wrapper .bc,
    .breadcrumb-wrapper .bc ol,
    .breadcrumb-wrapper .bc .breadcrumb {
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
    }

    .breadcrumb-wrapper .breadcrumb-item,
    .breadcrumb-wrapper .bc .breadcrumb-item,
    #wrapper .bc .breadcrumb .breadcrumb-item {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        min-width: auto !important;
    }

    /* OVERRIDE styles from custom2.css that add ellipsis */
    .breadcrumb-wrapper .breadcrumb-item span,
    .breadcrumb-wrapper .breadcrumb-item a,
    .breadcrumb-wrapper .bc .breadcrumb-item span,
    .breadcrumb-wrapper .bc .breadcrumb-item a,
    #wrapper .bc .breadcrumb .breadcrumb-item span,
    #wrapper .bc .breadcrumb .breadcrumb-item a,
    #wrapper .bc .breadcrumb .breadcrumb-item.active span,
    #wrapper .bc .breadcrumb .breadcrumb-item:last-child span {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        max-width: none !important;
        display: inline !important;
    }
}

/* ========================================
   MOBILE FILTERS MODAL
   ======================================== */
.mobile-filters-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 10000;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.mobile-filters-modal.active {
    display: flex;
}

.mobile-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--category-border-color);
}

.mobile-filters-title {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--category-text-primary);
    margin: 0;
}

.mobile-filters-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}

.mobile-filters-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px 20px;
}

.mobile-filters-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--category-border-color);
}

.mobile-filters-submit {
    width: 100%;
    padding: 16px;
    background: var(--category-brand-primary);
    border: none;
    border-radius: var(--category-radius-small);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--category-text-primary);
    cursor: pointer;
}

/* Mobile Subcategories in Modal */
.mobile-subcategories-section {
    margin-bottom: 32px;
}

.mobile-subcategories-title {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: var(--category-text-primary);
    margin: 0 0 16px 0;
}

.mobile-subcategories-breadcrumb {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--category-border-color);
}

.mobile-subcategory-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    background: none;
    border: none;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.mobile-subcategory-back-btn:hover {
    opacity: 0.7;
}

.mobile-subcategory-back-text {
    flex: 1;
}

.mobile-subcategories-list {
    /* Container for subcategory items */
}

.mobile-subcategories-empty {
    padding: 12px 0;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-tertiary);
    text-align: center;
}

.mobile-subcategory-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--category-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--category-border-color);
}

.mobile-subcategory-item.active {
    font-weight: 600;
    background-color: var(--background-color-light, #f5f5f5);
    border-left: 3px solid var(--category-brand-primary, #000);
    padding-left: 9px;
    /* 12px - 3px border */
}

.mobile-subcategory-item .count {
    color: var(--category-text-tertiary);
}

.mobile-subcategory-item svg {
    color: var(--category-text-tertiary);
}

/* Mobile Filters Section */
.mobile-filters-section-title {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    color: var(--category-text-primary);
    margin: 0 0 16px 0;
}

/* Apply desktop filter styles to mobile modal filters */
/* IMPORTANT: Override any mobile hiding rules for filters in modal */
/* Override .has-compact-filter styles for mobile modal */
.mobile-filters-modal #mobile-filters-placeholder #amazzing_filter,
.mobile-filters-modal.has-compact-filter #mobile-filters-placeholder #amazzing_filter,
.has-compact-filter .mobile-filters-modal #mobile-filters-placeholder #amazzing_filter,
#mobile-filters-placeholder #amazzing_filter,
#mobile-filters-placeholder>#amazzing_filter {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    /* Override compact filter styles */
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    height: auto !important;
    overflow: visible !important;
    max-width: none !important;
    box-shadow: none !important;
}

#mobile-filters-placeholder #amazzing_filter .block_content,
#mobile-filters-placeholder>#amazzing_filter .block_content,
.mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .block_content,
.has-compact-filter .mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .block_content {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    padding: 0 !important;
    max-height: none !important;
    overflow-y: visible !important;
}

#mobile-filters-placeholder #amazzing_filter .amazzing-filter-title,
#mobile-filters-placeholder>#amazzing_filter .amazzing-filter-title {
    display: none;
    /* Hide title in mobile modal as we have section title */
}

#mobile-filters-placeholder #amazzing_filter .af_filter,
#mobile-filters-placeholder>#amazzing_filter .af_filter,
.mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .af_filter,
.has-compact-filter .mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .af_filter {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 0 !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    padding-bottom: 32px !important;
    margin-bottom: 32px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* Override .has-compact-filter styles specifically for mobile modal */
.mobile-filters-modal #mobile-filters-placeholder #amazzing_filter,
.has-compact-filter .mobile-filters-modal #mobile-filters-placeholder #amazzing_filter {
    position: relative !important;
    z-index: auto !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#mobile-filters-placeholder #amazzing_filter .af_subtitle,
#mobile-filters-placeholder>#amazzing_filter .af_subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 0;
    cursor: default;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--category-text-primary, #000);
    border-bottom: 0;
    pointer-events: auto;
    user-select: none;
}

#mobile-filters-placeholder #amazzing_filter .af_subtitle::after,
#mobile-filters-placeholder #amazzing_filter .af_subtitle::before,
#mobile-filters-placeholder>#amazzing_filter .af_subtitle::after,
#mobile-filters-placeholder>#amazzing_filter .af_subtitle::before {
    display: none !important;
}

#mobile-filters-placeholder #amazzing_filter .af_subtitle-text,
#mobile-filters-placeholder>#amazzing_filter .af_subtitle-text {
    flex: 1;
}

#mobile-filters-placeholder #amazzing_filter .af-clear-section-btn,
#mobile-filters-placeholder>#amazzing_filter .af-clear-section-btn {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-secondary, #595959);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    transition: color 0.2s ease;
}

#mobile-filters-placeholder #amazzing_filter .af-clear-section-btn:hover,
#mobile-filters-placeholder>#amazzing_filter .af-clear-section-btn:hover {
    color: var(--text-color-base-primary, #000);
}

#mobile-filters-placeholder #amazzing_filter .af_filter_content,
#mobile-filters-placeholder>#amazzing_filter .af_filter_content,
.mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .af_filter_content {
    padding: 0 16px;
    padding-bottom: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#mobile-filters-placeholder #amazzing_filter .af_filter.closed .af_filter_content,
#mobile-filters-placeholder>#amazzing_filter .af_filter.closed .af_filter_content {
    display: block !important;
}

#mobile-filters-placeholder #amazzing_filter .af_filter_content ul li label,
#mobile-filters-placeholder>#amazzing_filter .af_filter_content ul li label {
    padding: 0;
    padding-left: 26px;
}

#mobile-filters-placeholder #amazzing_filter .af_filter_content ul li,
#mobile-filters-placeholder>#amazzing_filter .af_filter_content ul li {
    padding: 0;
}

#mobile-filters-placeholder #amazzing_filter .af_filter_content ul li label span.name,
#mobile-filters-placeholder>#amazzing_filter .af_filter_content ul li label span.name {
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

#mobile-filters-placeholder #amazzing_filter .af_filter_content ul li label span.name .count,
#mobile-filters-placeholder>#amazzing_filter .af_filter_content ul li label span.name .count {
    color: var(--text-color-base-tetriary, #888);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-left: 4px;
    display: inline;
}

#mobile-filters-placeholder #amazzing_filter form,
#mobile-filters-placeholder>#amazzing_filter form {
    padding-top: 0;
}

#mobile-filters-placeholder #amazzing_filter .af_filter.cut-off .af_filter_content ul li.cut,
#mobile-filters-placeholder>#amazzing_filter .af_filter.cut-off .af_filter_content ul li.cut {
    display: none !important;
}

#mobile-filters-placeholder #amazzing_filter .af_filter:not(.cut-off) .af_filter_content ul li.cut,
#mobile-filters-placeholder>#amazzing_filter .af_filter:not(.cut-off) .af_filter_content ul li.cut {
    display: list-item !important;
}

#mobile-filters-placeholder #amazzing_filter .af_filter.expandable .toggle-cut-off,
#mobile-filters-placeholder>#amazzing_filter .af_filter.expandable .toggle-cut-off {
    display: flex !important;
    cursor: pointer;
    margin-top: 0;
}

#mobile-filters-placeholder #amazzing_filter .p_slider,
#mobile-filters-placeholder #amazzing_filter .af-slider,
#mobile-filters-placeholder>#amazzing_filter .p_slider,
#mobile-filters-placeholder>#amazzing_filter .af-slider {
    margin-bottom: 0;
}

/* Hide "View products" button from amazzingfilter module in mobile modal */
#mobile-filters-placeholder #amazzing_filter .btn-holder,
#mobile-filters-placeholder>#amazzing_filter .btn-holder,
.mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .btn-holder,
.has-compact-filter .mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .btn-holder {
    display: none !important;
    visibility: hidden !important;
}

/* Show footer button */
.mobile-filters-footer {
    display: block !important;
}

/* Style for product count in mobile filters submit button */
.mobile-filters-submit .mobile-filters-count {
    margin-left: 4px;
    font-weight: 400;
}

.mobile-facet {
    margin-bottom: 24px;
}

.mobile-facet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--category-border-color);
    cursor: pointer;
}

.mobile-facet-title {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--category-text-primary);
    margin: 0;
}

.mobile-facet-toggle {
    color: var(--category-text-tertiary);
    transition: transform 0.2s;
}

.mobile-facet.expanded .mobile-facet-toggle {
    transform: rotate(180deg);
}

.mobile-facet-body {
    display: none;
    padding-top: 12px;
}

.mobile-facet.expanded .mobile-facet-body {
    display: block;
}

/* Mobile Filters Overlay */
.mobile-filters-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: none;
}

.mobile-filters-overlay.active {
    display: block;
}

/* Ensure modal is above overlay */
.mobile-filters-modal {
    z-index: 10000;
}


/* ========================================
   AMAZZING FILTER MODULE STYLING
   Match Figma Design
   ======================================== */
#amazzing_filter {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 32px;
}

#amazzing_filter .block_content {
    background: transparent;
    padding: 0;
}

/* Filter Section Title */
/* Filter Section Title */
#amazzing_filter .amazzing-filter-title {
    display: block;
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    /* 128.571% */
    margin: 0 0 24px 0;
    padding: 0 16px;
}

/* Filter Group Container */
#amazzing_filter .af_filter {
    margin-bottom: 0;
    border: none;
    background: transparent;
    padding: 0;
}

/* Ostatni element .af_filter bez margin-bottom */
#amazzing_filter .af_filter:last-child {
    margin-bottom: 0;
}

/* Filter Group Header/Title */
#amazzing_filter .af_subtitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px;
    margin-bottom: 0;
    cursor: pointer;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--category-text-primary, #000);
    border-bottom: 1px solid var(--category-border-color, #e5e5e5);
    pointer-events: auto;
    user-select: none;
}

/* Remove toggle functionality - filters always open */
#amazzing_filter .af_subtitle {
    pointer-events: auto !important;
    cursor: default !important;
}

/* Hide toggle icons */
#amazzing_filter .af_subtitle::after,
#amazzing_filter .af_subtitle::before {
    display: none !important;
}

/* Filter subtitle text */
#amazzing_filter .af_subtitle-text {
    flex: 1;
}


/* Filter Content */
#amazzing_filter .af_filter_content {
    padding: 16px;
}

/* All filters always open - remove closed state */
/* All filters always open - remove closed state */
#amazzing_filter .af_filter .af_filter_content {
    display: block !important;
}

#amazzing_filter .af_filter.closed .af_filter_content {
    display: block !important;
}

/* Remove closed class on page load */
#amazzing_filter .af_filter {
    display: block !important;
}

#amazzing_filter .af_filter.closed {
    display: block !important;
}

/* Hide no-available-items when hide-zero-matches is active */
#amazzing_filter.hide-zero-matches .af_filter.no-available-items {
    display: none !important;
}

/* Filter checkbox list */
#amazzing_filter .af_filter_content ul {
    list-style: none;
    padding: 0;
    padding-right: 4px;
    margin: 0;
}

#amazzing_filter .af_filter_content ul li {
    margin-bottom: 8px;
}

#amazzing_filter .af_filter_content ul li label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
}

#amazzing_filter .af_filter_content ul li label:hover {
    color: var(--category-brand-dark, #183030);
}

/* Custom Checkbox for amazzing filter */
#amazzing_filter .af_filter_content input[type="checkbox"] {
    display: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    background: var(--color-neutral-11, #f5f5f5);
    border-radius: var(--radius-x-small, 4px);
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

#amazzing_filter .af_filter_content input[type="checkbox"]:checked {
    background: var(--color-neutral-11, #f5f5f5);
}

#amazzing_filter .af_filter_content input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5L3.5 6L9 1' stroke='%23183030' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Fix: Override hidden spans in labels with checkboxes (from custom2.css) */
#amazzing_filter .af_filter_content ul li label span,
#amazzing_filter .af_filter_content ul li label span.name,
#amazzing_filter .af_filter_content ul li label span.count {
    display: inline !important;
}

/* Filter item name */
#amazzing_filter .af_filter_content ul li label span.name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color-base-primary, #000);
    white-space: normal;
    word-wrap: break-word;
}

/* Filter item count - inside name span */
#amazzing_filter .af_filter_content ul li label span.name .count {
    color: var(--text-color-base-tetriary, #888);
    font-size: 14px;
    font-weight: 400;
    margin-left: 0;
    white-space: normal;
}

/* Toggle Cut Off Button - "Więcej" / "Mniej" */
#amazzing_filter .af_filter .toggle-cut-off {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin-top: 10px;
    margin-bottom: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

#amazzing_filter .af_filter.expandable .toggle-cut-off {
    display: flex;
}

/* Icon container with minus icon (when showing "more" - can collapse) */
#amazzing_filter .af_filter .toggle-cut-off::before {
    content: '';
    display: flex;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 4px;
    border: 1px solid var(--border-primary, #E5E5E5);
    padding: 4px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    aspect-ratio: 1/1;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 4.70996H9.5V5.29004H0.5V4.70996Z' fill='%23B2B2B2' stroke='%23595959'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

/* Icon container with plus icon when collapsed (cut-off - showing "less", can expand) */
#amazzing_filter .af_filter.cut-off .toggle-cut-off::before {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.29004 0.5V4.70996H9.5V5.29004H5.29004V9.5H4.70996V5.29004H0.5V4.70996H4.70996V0.5H5.29004Z' fill='%23B2B2B2' stroke='%23595959'/%3E%3C/svg%3E");
}

/* Text styles */
#amazzing_filter .af_filter .toggle-cut-off span {
    padding: 0;
    background: transparent;
    color: var(--text-color-base-primary, #000);
    font-family: var(--font-family-family-primary, Sora);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    /* 150% */
}

/* Show/hide logic for more/less text */
#amazzing_filter .af_filter .toggle-cut-off .more,
#amazzing_filter .af_filter.cut-off .toggle-cut-off .less,
#amazzing_filter .af_filter.cut-off .toggle-cut-off .cut {
    display: none;
}

#amazzing_filter .af_filter.cut-off .toggle-cut-off .more,
#amazzing_filter .af_filter .toggle-cut-off .less {
    display: inline-block;
}

/* Child categories indent */
#amazzing_filter .af_filter_content ul.child-categories {
    margin-left: 28px;
    margin-top: 8px;
}

/* Hide toggle child link */
#amazzing_filter .af-toggle-child {
    display: none;
}

/* Legacy selectors for compatibility */
#amazzing_filter .af-parent-criteria,
#amazzing_filter .criteria-group,
#amazzing_filter .af-criteria {
    margin-bottom: 0;
    border: none;
    background: transparent;
}

#amazzing_filter .criteria-title,
#amazzing_filter .af-parent-title,
#amazzing_filter .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 12px;
    cursor: pointer;
}

#amazzing_filter .criteria-title span,
#amazzing_filter .af-parent-title span,
#amazzing_filter .title span {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--category-text-primary, #000);
}

/* Hide default icons */
#amazzing_filter .criteria-title .toggle-icon,
#amazzing_filter .criteria-title i,
#amazzing_filter .af-parent-title i,
#amazzing_filter .af_subtitle i {
    display: none;
}

/* Filter Content */
#amazzing_filter .criteria-list,
#amazzing_filter .criteria-values,
#amazzing_filter .af-criteria-content {
    padding: 0 12px;
}

/* Checkbox List Items */
#amazzing_filter .criteria-list li,
#amazzing_filter ul.af-criteria li {
    margin-bottom: 8px;
    list-style: none;
}

#amazzing_filter .criteria-list label,
#amazzing_filter ul.af-criteria label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 4px;
    cursor: pointer;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color-base-primary, #000);
}

/* Custom Checkbox */
#amazzing_filter .criteria-list input[type="checkbox"],
#amazzing_filter ul.af-criteria input[type="checkbox"] {
    width: 20px;
    height: 20px;
    background: var(--color-neutral-11, #f5f5f5);
    border-radius: var(--radius-x-small, 4px);
    border: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

#amazzing_filter .criteria-list input[type="checkbox"]:checked,
#amazzing_filter ul.af-criteria input[type="checkbox"]:checked {
    background: var(--color-neutral-11, #f5f5f5);
}

#amazzing_filter .criteria-list input[type="checkbox"]:checked::after,
#amazzing_filter ul.af-criteria input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 3.5L3.5 6L9 1' stroke='%23183030' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Count Badge */
#amazzing_filter .criteria-list .nb,
#amazzing_filter ul.af-criteria .count {
    color: var(--text-color-base-tetriary, #888);
    margin-left: 4px;
}

/* Price Slider - Amazzing Filter Custom Slider */
#amazzing_filter .p_slider,
#amazzing_filter .af-slider {
    padding: 0;
}

#amazzing_filter .slider-bar {
    height: 4px !important;
    background: var(--category-border-color, #e5e5e5) !important;
    border-radius: 2px !important;
    position: relative;
    margin-bottom: 16px;
}

#amazzing_filter .slider-bar .back-bar {
    height: 4px;
    position: relative;
    border-radius: 2px;
}

#amazzing_filter .slider-bar .selected-bar {
    height: 1px !important;
    background: var(--color-brand-one-7, #C7E068) !important;
    position: absolute;
    top: 0;
    border-radius: 2px;
}

#amazzing_filter .slider-bar .pointer {
    border-radius: 18px;
    border: 1px solid var(--color-brand-one-7, #C7E068);
    background: var(--background-color-brand-1-normal, #E4FD71);
    display: flex;
    width: 12px;
    height: 12px;
    padding: 7px 6px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    position: absolute;
    top: 50% !important;
    transform: translateY(-50%);
    cursor: pointer !important;
    box-shadow: none !important;
    margin-left: -8px;
    z-index: 1;
}

#amazzing_filter .slider-bar .pointer:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Price Values Display */
#amazzing_filter .slider-values {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    color: var(--text-color-base-secondary, #595959);
}

#amazzing_filter .slider_value {
    display: flex;
    align-items: center;
    gap: 2px;
}

#amazzing_filter .slider_value .value {
    font-weight: 500;
    color: var(--category-text-primary, #000);
}

#amazzing_filter .slider_value input.input-text {
    display: none;
}

/* Legacy jQuery UI Slider support */
#amazzing_filter .af-price-slider,
#amazzing_filter .slider-container,
#amazzing_filter .ui-slider {
    height: 4px !important;
    background: var(--category-border-color, #e5e5e5) !important;
    border: none !important;
    border-radius: 2px !important;
    margin: 16px 0 8px 0 !important;
}

#amazzing_filter .ui-slider .ui-slider-range {
    background: var(--color-brand-one-7, #C7E068) !important;
    height: 4px !important;
}

#amazzing_filter .ui-slider .ui-slider-handle {
    width: 16px !important;
    height: 16px !important;
    background: var(--background-color-brand-1-normal, #E4FD71) !important;
    border: 2px solid var(--color-brand-one-7, #C7E068) !important;
    border-radius: 50% !important;
    top: -6px !important;
    margin-left: -8px !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

/* Price Input Fields */
#amazzing_filter .price-inputs,
#amazzing_filter .af-price-inputs {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 0;
    margin-top: 16px;
}

#amazzing_filter .price-inputs input,
#amazzing_filter .af-price-inputs input,
#amazzing_filter input[name*="price"] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    background: #fff;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color-base-primary, #000);
}

/* Price Values Display - Legacy */
#amazzing_filter .af-price-values,
#amazzing_filter .price-values {
    display: flex;
    justify-content: space-between;
    padding: 0;
    margin-top: 8px;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    color: var(--text-color-base-secondary, #595959);
}

/* Select Dropdowns */
#amazzing_filter select,
#amazzing_filter .af-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-primary, #e5e5e5);
    border-radius: var(--radius-x-small, 4px);
    background: #fff url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23595959' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px center no-repeat;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color-base-primary, #000);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    margin: 0 16px;
    width: calc(100% - 32px);
}

/* Divider between filters */
#amazzing_filter .af-criteria::after,
#amazzing_filter .criteria-group::after {
    content: '';
    display: block;
    height: 1px;
    background-color: var(--category-border-color, #e5e5e5);
    margin: 32px 16px;
}

#amazzing_filter .af-criteria:last-child::after,
#amazzing_filter .criteria-group:last-child::after {
    display: none;
}

/* Show More Button */
#amazzing_filter .show-more,
#amazzing_filter .af-show-more {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px;
    margin-top: 8px;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: var(--text-color-base-primary, #000);
    background: none;
    border: none;
    cursor: pointer;
}

#amazzing_filter .show-more:hover,
#amazzing_filter .af-show-more:hover {
    opacity: 0.7;
}

/* Clear All Button */
#amazzing_filter .clear-all,
#amazzing_filter .af-clear-all,
#amazzing_filter .af-clear-filters {
    display: block;
    text-align: center;
    padding: 16px;
    margin-top: 24px;
}

#amazzing_filter .af-clear-all-btn {
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-secondary, #595959);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 16px;
}

/* Hide unnecessary elements */
#amazzing_filter .block_title,
#amazzing_filter .af-submit-button,
#amazzing_filter .selected-filters {
    display: none;
}

/* ========================================
   BUTTON SYSTEM - Based on Figma Design
   https://www.figma.com/design/KH6jpehJ3NHDZQQyn84Cw6
   ======================================== */

/* CSS Variables for Buttons */
:root {
    /* Brand Yellow */
    --btn-yellow-base: #E4FD71;
    --btn-yellow-hover: #EBFE97;
    --btn-yellow-border: #F2FEBD;
    --btn-yellow-border-hover: #C7E068;

    /* Dark Green */
    --btn-dark-green-base: #183030;
    --btn-dark-green-hover: #354D39;

    /* Light Brown */
    --btn-light-brown-base: #E3D9CF;
    --btn-light-brown-hover: #D3C4B4;

    /* Black */
    --btn-black-base: #000000;
    --btn-black-hover: #2D2D2D;

    /* Grey */
    --btn-grey-base: #B2B2B2;
    --btn-grey-hover: #D0D0D0;

    /* White */
    --btn-white-base: #FFFFFF;
    --btn-white-hover: #E5E5E5;

    /* Text Colors */
    --btn-text-dark: #000000;
    --btn-text-light: #FFFFFF;
    --btn-text-underline: #888888;
}

/* ========================================
   BASE BUTTON STYLES
   ======================================== */
.btn-traktor {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    border-radius: var(--radius-x-small, 4px);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.btn-traktor:focus {
    outline: none;
}

.btn-traktor svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ========================================
   PRIMARY BUTTONS (Filled)
   ======================================== */

/* Yellow Primary - Default brand button */
.btn-primary-yellow,
.btn-primary {
    background-color: var(--btn-yellow-base);
    border-color: var(--btn-yellow-border);
    color: var(--btn-text-dark);
    box-shadow: 0 0 44px 0 rgba(228, 253, 113, 0.30);
}

.btn-primary-yellow:hover,
.btn-primary:hover {
    background-color: var(--btn-yellow-hover);
    border-color: var(--btn-yellow-border-hover);
    color: var(--btn-text-dark);
    text-decoration: none;
    box-shadow: 0 0 44px 0 rgba(228, 253, 113, 0.50);
}

/* Dark Green Primary */
.btn-primary-dark-green {
    background-color: var(--btn-dark-green-base);
    border-color: var(--btn-dark-green-base);
    color: var(--btn-text-light);
}

.btn-primary-dark-green:hover {
    background-color: var(--btn-dark-green-hover);
    border-color: var(--btn-dark-green-base);
    color: var(--btn-text-light);
    text-decoration: none;
}

/* Light Brown Primary */
.btn-primary-light-brown {
    background-color: var(--btn-light-brown-base);
    border-color: var(--btn-light-brown-base);
    color: var(--btn-text-dark);
}

.btn-primary-light-brown:hover {
    background-color: var(--btn-light-brown-hover);
    border-color: var(--btn-light-brown-base);
    color: var(--btn-text-dark);
    text-decoration: none;
}

/* Black Primary */
.btn-primary-black {
    background-color: var(--btn-black-base);
    border-color: var(--btn-black-base);
    color: var(--btn-text-light);
}

.btn-primary-black:hover {
    background-color: var(--btn-black-hover);
    border-color: var(--btn-black-base);
    color: var(--btn-text-light);
    text-decoration: none;
}

/* Grey Primary */
.btn-primary-grey {
    background-color: var(--btn-grey-base);
    border-color: var(--btn-grey-base);
    color: var(--btn-text-dark);
}

.btn-primary-grey:hover {
    background-color: var(--btn-grey-hover);
    border-color: var(--btn-grey-base);
    color: var(--btn-text-dark);
    text-decoration: none;
}

/* White Primary */
.btn-primary-white {
    background-color: var(--btn-white-base);
    border-color: var(--btn-white-base);
    color: var(--btn-text-dark);
}

.btn-primary-white:hover {
    background-color: var(--btn-white-hover);
    border-color: var(--btn-white-base);
    color: var(--btn-text-dark);
    text-decoration: none;
}

/* ========================================
   SECONDARY BUTTONS (Outline)
   ======================================== */

/* Dark Green Secondary */
.btn-secondary-dark-green,
.btn-secondary {
    background-color: transparent;
    border-color: var(--btn-dark-green-base);
    color: var(--btn-text-dark);
}

.btn-secondary-dark-green:hover,
.btn-secondary:hover {
    background-color: rgba(24, 48, 48, 0.12);
    border-color: var(--btn-dark-green-base);
    color: var(--btn-text-dark);
    text-decoration: none;
}

/* Light Brown Secondary */
.btn-secondary-light-brown {
    background-color: transparent;
    border-color: var(--btn-light-brown-base);
    color: var(--btn-text-dark);
}

.btn-secondary-light-brown:hover {
    background-color: rgba(227, 217, 207, 0.12);
    border-color: var(--btn-light-brown-base);
    color: var(--btn-text-dark);
    text-decoration: none;
}

/* White Secondary (for dark backgrounds) */
.btn-secondary-white {
    background-color: transparent;
    border-color: var(--btn-white-base);
    color: var(--btn-text-light);
}

.btn-secondary-white:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--btn-white-base);
    color: var(--btn-text-light);
    text-decoration: none;
}

/* Black Secondary */
.btn-secondary-black {
    background-color: transparent;
    border-color: var(--btn-black-base);
    color: var(--btn-text-dark);
}

.btn-secondary-black:hover {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: var(--btn-black-base);
    color: var(--btn-text-dark);
    text-decoration: none;
}

/* Grey Secondary */
.btn-secondary-grey {
    background-color: transparent;
    border-color: var(--btn-grey-base);
    color: var(--btn-text-dark);
}

.btn-secondary-grey:hover {
    background-color: rgba(178, 178, 178, 0.2);
    border-color: var(--btn-grey-base);
    color: var(--btn-text-dark);
    text-decoration: none;
}

/* Yellow Secondary (for dark backgrounds) */
.btn-secondary-yellow {
    background-color: transparent;
    border-color: var(--btn-yellow-base);
    color: var(--btn-text-light);
}

.btn-secondary-yellow:hover {
    background-color: rgba(228, 253, 113, 0.2);
    border-color: var(--btn-yellow-base);
    color: var(--btn-text-light);
    text-decoration: none;
}

/* ========================================
   TERTIARY BUTTONS (Text/Link)
   ======================================== */
.btn-tertiary,
.btn-tertiary-black {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--btn-text-dark);
    text-decoration: underline;
    text-decoration-color: var(--btn-text-underline);
    text-underline-offset: 70%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tertiary:hover,
.btn-tertiary-black:hover {
    text-decoration-color: var(--btn-text-dark);
    text-underline-offset: 45%;
    color: var(--btn-text-dark);
}

/* White Tertiary (for dark backgrounds) */
.btn-tertiary-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: var(--btn-text-light);
    text-decoration: underline;
    text-decoration-color: var(--btn-text-underline);
    text-underline-offset: 70%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tertiary-white:hover {
    text-decoration-color: var(--btn-text-light);
    text-underline-offset: 45%;
    color: var(--btn-text-light);
}

/* ========================================
   BUTTON WITH ARROW
   ======================================== */
.btn-traktor.btn-with-arrow {
    position: relative;
    padding-right: 48px;
    gap: 16px;
}

.btn-traktor.btn-with-arrow .btn-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    transition: right 0.2s ease;
}

.btn-traktor.btn-with-arrow:hover .btn-arrow {
    right: 7px;
}

/* Arrow Icon SVG */
.btn-arrow-icon {
    width: 16px;
    height: 16px;
}

/* ========================================
   BUTTON SIZES
   ======================================== */
.btn-traktor.btn-sm {
    padding: 12px 24px;
    font-size: 14px;
    line-height: 20px;
}

.btn-traktor.btn-lg {
    padding: 20px 32px;
    font-size: 18px;
    line-height: 28px;
}

/* ========================================
   BUTTON ICON VARIANTS
   ======================================== */
.btn-traktor.btn-icon-only {
    padding: 16px;
    gap: 0;
}

.btn-traktor.btn-icon-left svg {
    order: -1;
}

.btn-traktor.btn-icon-right svg {
    order: 1;
}

/* ========================================
   BUTTON DISABLED STATE
   ======================================== */
.btn-traktor:disabled,
.btn-traktor.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   BUTTON FULL WIDTH
   ======================================== */
.btn-traktor.btn-block {
    display: flex;
    width: 100%;
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */

/* ========================================
   DROPDOWN SYSTEM - Based on Figma Design
   https://www.figma.com/design/KH6jpehJ3NHDZQQyn84Cw6
   ======================================== */

/* CSS Variables for Dropdowns */
:root {
    --dropdown-bg: #FFFFFF;
    --dropdown-border: #B2B2B2;
    --dropdown-border-active: var(--color-brand-one-8-base, #E4FD71);
    --dropdown-hover-bg: var(--color-brand-two-11, #F8F5F2);
    --dropdown-radius: var(--radius-x-small, 4px);
    --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    --dropdown-item-height: 44px;
    --dropdown-radio-bg: var(--color-brand-one-8-base, #E4FD71);
    --dropdown-radio-border: var(--color-brand-one-7, #C7E068);
    --dropdown-radio-dot: #183030;
}

/* ========================================
   DROPDOWN TRIGGER (Button that opens dropdown)
   ======================================== */
.dropdown-traktor {
    position: relative;
    display: inline-block;
}

.dropdown-traktor-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 200px;
    padding: 12px 16px;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropdown-traktor-trigger:hover {
    background-color: var(--dropdown-hover-bg);
}

.dropdown-traktor-trigger.active,
.dropdown-traktor.open .dropdown-traktor-trigger {
    border-color: var(--dropdown-border-active);
    background-color: var(--dropdown-bg);
}

.dropdown-traktor-trigger .dropdown-text {
    flex: 1;
    text-align: left;
}

.dropdown-traktor-trigger .dropdown-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dropdown-traktor-trigger .dropdown-icon svg {
    width: 100%;
    height: 100%;
}

.dropdown-traktor.open .dropdown-traktor-trigger .dropdown-icon,
.dropdown-traktor-trigger.active .dropdown-icon {
    transform: rotate(180deg);
}

/* Icon left variant */
.dropdown-traktor-trigger .dropdown-icon-left {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ========================================
   DROPDOWN MENU (List container)
   ======================================== */
.dropdown-traktor-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--dropdown-shadow);
    padding: 4px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.dropdown-traktor.open .dropdown-traktor-menu,
.dropdown-traktor-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ========================================
   DROPDOWN LIST ITEMS
   ======================================== */
.dropdown-traktor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--dropdown-item-height);
    padding: 12px;
    background-color: transparent;
    border: none;
    border-radius: var(--dropdown-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    cursor: pointer;
    transition: background-color 0.15s ease;
    width: 100%;
    text-align: left;
    text-decoration: none;
}

.dropdown-traktor-item:hover {
    background-color: var(--dropdown-hover-bg);
    text-decoration: none;
    color: var(--text-color-base-primary, #000);
}

.dropdown-traktor-item .item-text {
    flex: 1;
}

/* ========================================
   RADIO/CHECKBOX INDICATORS
   ======================================== */
.dropdown-radio {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid var(--dropdown-border);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.dropdown-radio.selected,
.dropdown-traktor-item.selected .dropdown-radio {
    background-color: var(--dropdown-radio-bg);
    border-color: var(--dropdown-radio-border);
}

.dropdown-radio .radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dropdown-radio-dot);
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.dropdown-radio.selected .radio-dot,
.dropdown-traktor-item.selected .dropdown-radio .radio-dot {
    opacity: 1;
    transform: scale(1);
}

/* Checkbox variant */
.dropdown-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid var(--dropdown-border);
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.dropdown-checkbox.selected,
.dropdown-traktor-item.selected .dropdown-checkbox {
    background-color: var(--dropdown-radio-bg);
    border-color: var(--dropdown-radio-border);
}

.dropdown-checkbox .checkbox-icon {
    width: 10px;
    height: 8px;
    opacity: 0;
    transform: scale(0);
    transition: all 0.15s ease;
}

.dropdown-checkbox.selected .checkbox-icon,
.dropdown-traktor-item.selected .dropdown-checkbox .checkbox-icon {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   SELECT DROPDOWN (Native-like)
   ======================================== */
.select-traktor {
    position: relative;
    display: inline-block;
}

.select-traktor-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 200px;
    padding: 12px 16px;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    cursor: pointer;
    transition: all 0.2s ease;
}

.select-traktor-trigger:hover {
    background-color: var(--dropdown-hover-bg);
}

.select-traktor.open .select-traktor-trigger,
.select-traktor-trigger:focus {
    border-color: var(--dropdown-border-active);
    outline: none;
}

.select-traktor-trigger .select-value {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select-traktor-trigger .select-placeholder {
    color: var(--text-color-base-secondary, #595959);
}

.select-traktor-trigger .select-arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.select-traktor.open .select-traktor-trigger .select-arrow {
    transform: rotate(180deg);
}

.select-traktor-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--dropdown-shadow);
    padding: 4px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
}

.select-traktor.open .select-traktor-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.select-traktor-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: var(--dropdown-item-height);
    padding: 12px;
    background-color: transparent;
    border: none;
    border-radius: var(--dropdown-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    cursor: pointer;
    transition: background-color 0.15s ease;
    width: 100%;
    text-align: left;
}

.select-traktor-option:hover {
    background-color: var(--dropdown-hover-bg);
}

.select-traktor-option.selected {
    background-color: var(--dropdown-hover-bg);
}

.select-traktor-option .option-text {
    flex: 1;
}

.select-traktor-option .option-indicator {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dropdown-radio-bg);
    border: 1px solid var(--dropdown-radio-border);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.select-traktor-option.selected .option-indicator {
    opacity: 1;
}

.select-traktor-option .option-indicator .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dropdown-radio-dot);
}

/* ========================================
   LIST STYLES (General lists)
   ======================================== */
.list-traktor {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-traktor-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background-color: transparent;
    border-radius: var(--dropdown-radius);
    font-family: var(--font-family-family-primary, Sora), sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--text-color-base-primary, #000);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.list-traktor-item:hover {
    background-color: var(--dropdown-hover-bg);
}

.list-traktor-item.active,
.list-traktor-item.selected {
    background-color: var(--dropdown-hover-bg);
}

.list-traktor-item .item-indicator {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.list-traktor-item .item-indicator .indicator-bullet {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--dropdown-radio-bg);
    border: 1px solid var(--dropdown-radio-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-traktor-item .item-indicator .indicator-bullet .bullet-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dropdown-radio-dot);
}

.list-traktor-item .item-text {
    flex: 1;
}

/* ========================================
   SCROLLBAR STYLES FOR DROPDOWNS
   ======================================== */
.select-traktor-options::-webkit-scrollbar,
.dropdown-traktor-menu::-webkit-scrollbar {
    width: 6px;
}

.select-traktor-options::-webkit-scrollbar-track,
.dropdown-traktor-menu::-webkit-scrollbar-track {
    background: transparent;
}

.select-traktor-options::-webkit-scrollbar-thumb,
.dropdown-traktor-menu::-webkit-scrollbar-thumb {
    background-color: var(--dropdown-border);
    border-radius: 3px;
}

.select-traktor-options::-webkit-scrollbar-thumb:hover,
.dropdown-traktor-menu::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-color-base-secondary, #595959);
}

/* ========================================
   DROPDOWN ARROW SVG
   ======================================== */
.dropdown-arrow-svg {
    width: 16px;
    height: 16px;
}

.dropdown-arrow-svg path {
    stroke: currentColor;
}

/* Ukryj filtr kategorii - szczegółowe selektory dla wszystkich kontekstów */
#amazzing_filter .af_filter[data-url="kategorie"],
#mobile-filters-placeholder #amazzing_filter .af_filter[data-url="kategorie"],
#mobile-filters-placeholder>#amazzing_filter .af_filter[data-url="kategorie"],
.mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .af_filter[data-url="kategorie"],
.has-compact-filter .mobile-filters-modal #mobile-filters-placeholder #amazzing_filter .af_filter[data-url="kategorie"],
.mobile-filters-modal.has-compact-filter #mobile-filters-placeholder #amazzing_filter .af_filter[data-url="kategorie"] {
    display: none !important;
    visibility: hidden !important;
}

.sort-dropdown-menu li {
    width: 100%;
}