/* =========================================
   ZÁKLADNÍ STYLY / MOBILNÍ ZAŘÍZENÍ (< 768px)
   ========================================= */

.custom-sorting-wrapper {
    position: relative;
    margin-bottom: 20px;
}


/* Reset případného defaultního Shoptet marginu */

.custom-sorting-wrapper .listSorting.js-listSorting {
    margin: 0;
    padding: 0;
}


/* Tlačítko rozbalení */

.custom-sorting-trigger {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #ffffff;
    cursor: pointer;
    user-select: none;
}

.trigger-left {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
}

.trigger-right {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #111827;
}

.filter-icon-mobile {
    display: flex;
}

.icon-desktop {
    display: none;
    transition: transform 0.2s ease;
}


/* Otevřený stav - rotace PC šipky */

.custom-sorting-wrapper.is-open .icon-desktop {
    transform: rotate(180deg);
}


/* Z původního seznamu děláme dropdown */

.custom-sorting-wrapper .listSorting__controls {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-top: none;
    border-radius: 0 0 6px 6px;
    margin-top: -2px !important;
    /* Důležité: override Shoptet stylů */
    padding: 8px 0 !important;
    display: none;
    /* Skryto v základu JS */
    position: relative;
    /* Na mobilu odsouvá věci pod sebou */
}

.custom-sorting-wrapper .listSorting__controls li {
    display: block;
    margin: 0;
}


/* Originální tlačítka Shoptetu uvnitř dropdownu */

.custom-sorting-wrapper .listSorting__control {
    width: 100%;
    text-align: left;
    padding: 10px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #374151;
}

.custom-sorting-wrapper .listSorting__control:hover {
    background-color: #f3f4f6;
}


/* Zvýraznění aktuálně vybrané položky */

.custom-sorting-wrapper .listSorting__control--current {
    font-weight: 700;
    color: #000000;
    background-color: #f9fafb;
}


/* =========================================
   DESKTOP STYLY (>= 768px)
   ========================================= */

@media (min-width: 768px) {
    .custom-sorting-wrapper {
        display: inline-block;
    }
    .custom-sorting-trigger {
        border: none;
        /* Zrušení velkého rámečku */
        background: transparent;
        padding: 8px 0;
        justify-content: flex-start;
    }
    .trigger-left {
        margin-right: 6px;
    }
    .trigger-right {
        font-weight: 400;
    }
    .trigger-right .selected-text {
        font-weight: 700;
        margin-right: 6px;
    }
    .filter-icon-mobile {
        display: none;
    }
    .icon-desktop {
        display: flex;
    }
    /* Absolutní pozice na PC - dropdown visí a odkrývá produkty pod ním */
    .custom-sorting-wrapper .listSorting__controls {
        position: absolute !important;
        top: 100%;
        left: 0;
        min-width: 220px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        z-index: 50;
    }
}

.category-header {
    flex-direction: column;
    align-items: end;
    justify-content: end;
}

.category-header .custom-sorting-wrapper {
    margin-bottom: 0;
}

.category-header .listItemsTotal {
    padding: 0;
}

.custom-sorting-wrapper .selected-text {
    text-decoration: underline;
}

#category-filter-hover .filter-section:first-child,
.filter-section+.filter-section {
border-top-color: #46835C;
}


.slider-wrapper h4>span,
.slider-wrapper h4 {
font-family: 'SourceSans3', serif !important;
color: #1A1A1A;
text-align: left;
}



.filter-section:has(form[action="/action/ProductsListing/setStockFilter/"]),
.filter-section:not(.filter-section-parametric-id-21) {
    display: none !important;
}

@media (max-width: 767px) {

    .custom-sorting-wrapper {
        width: 100%;
    }

    .custom-sorting-wrapper .label {
        font-size: 16px;
        font-weight: 600;
    }
    .custom-sorting-wrapper .selected-text {
        font-size: 16px;
        font-weight: 500;
    }

    .custom-sorting-wrapper .custom-sorting-trigger,
    .slider-wrapper h4, 
    .filter-section h4 {
        border: 2px solid #1D7139;
        border-radius: 4px;
    }

    .custom-sorting-wrapper .listSorting__controls {
        border: 0px;
        margin-top: 0px !important;
    }

    .slider-wrapper h4, 
    .filter-section h4 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    background-color: #ffffff;
    cursor: pointer;
    user-select: none;
    margin: 0;
    }

    .slider-wrapper h4 span, 
    .filter-section h4 span {
    text-decoration: underline;
    font-weight: 500;
    font-size: 16px;
    }

    .custom-sorting-wrapper .filter-icon-mobile {
        color: #1D7139;
    }

    .filter-sections {
        padding: 0;

    }

    .custom-sorting-wrapper .trigger-right::after,
    .slider-wrapper h4::after, 
    .filter-section h4::after {
        display: inline-block;
        speak: none;
        font-family: shoptet;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
        line-height: 0;
        text-decoration: none;
        text-transform: none;
        vertical-align: middle;
        content: "\e90e";
        transition: transform .3s ease-out;
        color: var(--color-primary) !important;
        margin-left: 8px;
        font-size: 14px;
    }



    /* Vizuální indikace aktivního (rozbaleného) filtru */
    .slider-wrapper h4.active, 
    .filter-section h4.active {
        border-color: #000;
        background-color: #f9f9f9;
    }

    /* Skrytí obsahu filtrů ve výchozím stavu */
    .slider-wrapper .slider-header,
    .slider-wrapper .slider-content,
    .filter-section form {
        display: none;
        padding: 10px 5px;
    }

    #category-filter-hover .filter-section:first-child,
.filter-section+.filter-section {
    border-top: none;
}
.slider-content, .ui-slider {
    background-color: transparent;
}

.slider-wrapper,
.filter-section {
    padding: 0;
}

#filters > div,
#category-filter-hover > div {
    margin-bottom: 19px !important;
}
}


@media (min-width: 768px) {
    .slider-wrapper h4>span,
.slider-wrapper h4 {
    font-size: 20px !important;
font-weight: 700;
}
}


.read-more-filter {
    border: 0;
    margin-top: 10px;
    width: 100%;
    background: transparent;
    color: #000;
    text-decoration: underline;
    text-align: left;
    padding: 0;
    cursor: pointer;
}

.read-more-filter:hover {
    text-decoration: none;
    opacity: 0.8;
}