@media (max-width: 768px){

    #search_filters_wrapper {
        min-height: 100vh;
        height: 100%;
        top: 0;
        background: #fff;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 100px;
    }
    #search_filter_controls{
        height: 70px;
        order: 3
    }
    #search_filters{
        order: 2;
        display: grid;
        gap: 7px;
        height: fit-content;
        /*max-height: calc(100vh - 100px);*/
        margin-top: 50px;
        padding-bottom: 135px !important;
        padding-left: 10px;
        padding-right: 10px;        
    }
    #fasetheader .text {
        font-family: 'Montserrat';
        font-weight: 800;
        font-size: 16px;
    }
    #fasetheader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        width: 100%;
        /* max-width: 100vw;*/
        max-width: 100%;
        padding: 5px 20px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        background: #fff;
        height: 50px;
    }
    #fasetheader .button-close{
        display: flex;
        align-items: center;
    }
    #search_filter_controls{
        position: fixed;
        z-index: 100;
        background: #fff;
        background: #393939;
        bottom: 0;
        width: 100%;        
        min-height: 70px;
        top: unset;
        margin-bottom: 0px !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        align-items: center;
        padding: 5px 20px
    }
    #category #left-column #search_filters .facet {
        /*width: calc( 100vw - 20px );*/
        width: calc( 100% - 20px );
        margin-left: 10px;
        background: #f3f3f3
    }
    #search_filter_controls button.ok {
        background: #ffc107;
        box-shadow: 0 10px 20px -15px yellow;
    }
   
    #search_filter_controls button {
        height: 40px;
        margin: 0px !important;
        padding: 5px 10px;
        width: 100% !important;
        font-family: 'Montserrat';
        font-weight: 700;
        font-size: 14px;
    }
    #_mobile_search_filters_clear_all button{
        background: #f1f1f1;
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 10px 20px -11px #111;
    }
    #category #left-column #search_filters .facet ul {
        padding-left: 15px
    }
    #category #left-column #search_filters .facet .h6{
        font-size: 15px;
        font-family: 'Montserrat';
        text-transform: none;
        font-weight: 700;
        padding: 12px;
    }
    #category #left-column #search_filters .facet ul li {
        padding: 5px;
        border: 0px;
    }
    .custom-checkbox input[type="checkbox"]+span {
        border: 1px #cacdcf solid;
        border-radius: 3px;
    }
    .custom-checkbox input[type="checkbox"]+span .checkbox-checked {
        color: #ffffff;
        background-color: #313131;
        border: 1px #313131 solid;
        border-radius: 3px;
    }

    .facet_ul {
        display: flex !important;        
        flex-wrap: wrap;
        gap: 5px;
        padding: 0 15px 15px 0
    } 
    
    ul[data-feature-id="4"] .facet_ul .facet-li{
        width: calc(20% - 5px) !important;
    }
    ul[data-feature-id="20"] .facet_ul .facet-li{
        width: calc(20% - 5px) !important;
    }
    ul[data-feature-id="82"] .facet_ul .facet-li{
        width: calc(25% - 5px) !important;
    }
    ul[data-feature-id="83"] .facet_ul .facet-li{
        width: calc(25% - 5px) !important;
    }
    #search_filters .facet .facet-label a{        
        font-weight: 700;
        font-size: 13px !important;
        font-family: 'Montserrat';
    }
    #search_filters .facet .facet-label{
        display: flex;
        align-items: center;

    }
    #search_filters .facet .facet-label .custom-checkbox, 
    #search_filters .facet .facet-label .custom-radio{
        top: -2px !important        
    }
    .facet_ul .facet-label .custom-checkbox,
    .facet_ul .facet-label input[type="checkbox"] {
        display: none;
    }
    
    /* Стили для всей кнопки */
    .facet_ul .facet-label {
        display: inline-flex;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        border: 2px solid gray; /* Серая обводка по умолчанию */
        border-radius: 5px;
        transition: border-color 0.3s ease;
    }
    
    /* Обводка становится красной, если input:checked */
    .facet_ul .facet-label.active {
        border: 1px solid #313131; /* Красная обводка при checked */
        background: #313131;
    }
    .facet_ul .facet-label.active a {
        color: #fff !important
    }
    
    .facet_ul li label{
        padding: 0 !important;
    }
    .facet_ul li .custom-checkbox{

    }
    .facet_ul li {
        padding: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .facet_ul .facet-label a{
        text-align: center;
        font-weight: 700;
        font-size: 13px !important;
        font-family: 'Montserrat';
        color: #8e969b !important
    }
    .facet_ul .facet-label {
        padding: 5px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    /* Добавляем обводку вокруг всей метки при checked */
    .facet_ul .facet-label,
    .facet_ul .facet-label:hover {
        border: 1px solid #ccc;
        border-color: #8e969b; /* Обводка при наведении */
    }

    #search_filters .facet .facet-label a {
        width: 100%;
        white-space: break-spaces;
    }
    
    .faceted-slider{
        margin-right: 15px;
    }
    .faceted-slider p {
        font-weight: 700;
        font-size: 13px !important;
        font-family: 'Montserrat';
    }
    #search_filters .ui-slider .ui-slider-handle {
        background: #292929;
        border: 1px solid #292929;
    }
    #search_filters .ui-widget-header {
        background: #FFC107;
    }
    #category #left-column #search_filters .ui-slider-horizontal {
        background: #ffffff;
        border: 0px;
    }

    .facet-li.noshow{
        display: none;
    }
    .facet-li.show,
    .facet-li.noshow.show{
        display: list-item;
    }

    .show-more-filters-btn,
    .hide-more-filters-btn{
        margin-right: 15px;
        border-top: 1px solid #ccc !important;
        text-align: center;
        font-family: 'Montserrat';
        font-weight: 600;
        font-size: 13px;
        padding: 7px !important;
        width: 100%
    }

    .show-more-filters-btn .hide-text{
        display: none;
        justify-content: center;
        align-items: center;
    }

} 

@media (min-width: 769px){

    #search_filters_wrapper {
        min-height: 100vh;
        height: 100%;
        top: 0;
        background: transparent !important ;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 50px 1fr 100px;
    }
    #search_filter_controls{
        height: 70px;
        order: 3
    }
    #search_filters{
        order: 2;
        display: grid;
        gap: 7px;
        height: fit-content; 
        margin-top: 0px;                       
        padding-left: 0px;
        padding-right: 0px;   
        background: transparent !important;
        padding-top: 0px !important; 
    }
    #search_filters > p {
        font-family: 'Montserrat';
        font-weight: 800 !important;
        font-size: 16px !important;
    }   
    #search_filter_controls{
        position: fixed;
        z-index: 100;
        background: #fff;
        background: #393939;
        bottom: 0;
        width: 100%;        
        min-height: 70px;
        top: unset;
        margin-bottom: 0px !important;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        align-items: center;
        padding: 5px 20px
    }
    #category #left-column #search_filters .facet {
        /*width: calc( 100vw - 20px );*/
        width: calc( 100%  );
        margin-left: 0px;
        background: #fff;
        padding-top: 0px !important;
        border-radius: 5px;        
    }
    #search_filter_controls button.ok {
        background: #ffc107;
        box-shadow: 0 10px 20px -15px yellow;
    }
   
    #search_filter_controls button {
        height: 40px;
        margin: 0px !important;
        padding: 5px 10px;
        width: 100% !important;
        font-family: 'Montserrat';
        font-weight: 700;
        font-size: 14px;
    }
    #_mobile_search_filters_clear_all button{
        background: #f1f1f1;
        font-weight: 600;
        font-size: 14px;
        box-shadow: 0 10px 20px -11px #111;
    }
    #category #left-column #search_filters .facet ul {
        padding-left: 15px;
        margin-bottom: 0px !important;
    }
    #category #left-column #search_filters .facet .h6{
        font-size: 15px;
        font-family: 'Montserrat';
        text-transform: none;
        font-weight: 700;
        padding: 12px;
    }
    #category #left-column #search_filters .facet ul li {
        padding: 5px;
        border: 0px;
    }
    .custom-checkbox input[type="checkbox"]+span {
        border: 1px #cacdcf solid;
        border-radius: 3px;
    }
    .custom-checkbox input[type="checkbox"]+span .checkbox-checked {
        color: #ffffff;
        background-color: #313131;
        border: 1px #313131 solid;
        border-radius: 3px;
    }

    .facet_ul {
        display: flex !important;        
        flex-wrap: wrap;
        gap: 5px;
        padding: 0 15px 15px 0
    } 
    ul[data-feature-id="4"] .facet_ul .facet-li{
        width: calc(25% - 5px) !important;
    }
    ul[data-feature-id="20"] .facet_ul .facet-li{
        width: calc(25% - 5px) !important;
    }
    ul[data-feature-id="82"] .facet_ul .facet-li{
        width: calc(33% - 5px) !important;
    }
    ul[data-feature-id="83"] .facet_ul .facet-li{
        width: calc(33% - 5px) !important;
    }
    #search_filters .facet .facet-label a{        
        font-weight: 700;
        font-size: 13px ;
        font-family: 'Montserrat';
        margin-top: 0px;
    }
    #search_filters .facet .facet-label{
        display: flex;
        align-items: center;

    }
    #search_filters .facet .facet-label .custom-checkbox, 
    #search_filters .facet .facet-label .custom-radio{
        top: -2px !important        
    }
    .facet_ul .facet-label .custom-checkbox,
    .facet_ul .facet-label input[type="checkbox"] {
        display: none;
    }
    
    /* Стили для всей кнопки */
    .facet_ul .facet-label {
        display: inline-flex;
        align-items: center;
        padding: 10px;
        cursor: pointer;
        border: 2px solid gray; /* Серая обводка по умолчанию */
        border-radius: 5px;
        transition: border-color 0.3s ease;
    }
    
    /* Обводка становится красной, если input:checked */
    .facet_ul .facet-label.active {
        border: 1px solid #313131; /* Красная обводка при checked */
        background: #313131;
    }
    .facet_ul .facet-label.active a {
        color: #fff !important
    }
    
    .facet_ul li label{
        padding: 0 !important;
    }
    .facet_ul li .custom-checkbox{

    }
    .facet_ul li {
        padding: 0px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .facet_ul .facet-label a{
        text-align: center;
        font-weight: 700;
        font-size: 13px !important;
        font-family: 'Montserrat';
        color: #8e969b !important
    }
    ul[data-feature-id="4"] .facet_ul .facet-li a{
        font-size: 12px !important;
    }
    .facet_ul .facet-label {
        padding: 5px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
    /* Добавляем обводку вокруг всей метки при checked */
    .facet_ul .facet-label,
    .facet_ul .facet-label:hover {
        border: 1px solid #ccc;
        border-color: #8e969b; /* Обводка при наведении */
    }

    #search_filters .facet .facet-label a {
        width: 100%;
        white-space: break-spaces;
    }
    
    .faceted-slider{
        margin-right: 15px;
    }
    .faceted-slider p {
        font-weight: 700;
        font-size: 13px !important;
        font-family: 'Montserrat';
    }
    #search_filters .ui-slider .ui-slider-handle {
        background: #292929;
        border: 1px solid #292929;
    }
    #search_filters .ui-widget-header {
        background: #FFC107;
    }
    #category #left-column #search_filters .ui-slider-horizontal {
        background: #ffffff;
        border: 0px;
    }

    .facet-li.noshow{
        display: none;
    }
    .facet-li.show,
    .facet-li.noshow.show{
        display: list-item;
    }

    .show-more-filters-btn{
        margin-right: 15px;
        border-top: 1px solid #ccc !important;
        text-align: center;
        font-family: 'Montserrat';
        font-weight: 600;
        font-size: 13px;
        padding: 7px !important;
        width: 100%
    }
    .show-more-filters-btn:hover{
        font-weight: 700;
        cursor: pointer;
    }
    .show-more-filters-btn .hide-text{
        display: none;
    }
    .show-more-filters-btn .show-text{
        
    }

    
    #search_filters .facet .title .collapse-icons .add{
        display: inline-block;
    }
    #search_filters .facet .title .collapse-icons .remove{
        display: none;
    }
    #search_filters .facet .title[aria-expanded="true"] .collapse-icons .add{
        display: none;
    }
    #search_filters .facet .title[aria-expanded="true"] .collapse-icons .remove{
        display: inline-block;
        cursor: pointer
    }
    #search_filters .facet .title {
        display: flex !important;
        cursor: pointer;
    }
    #search_filters .facet .facet-title {
        white-space: unset;
        margin-bottom: 0px !important;
    }
    #search_filters .facet .collapse, 
    #search_filters_brands .facet .collapse, 
    #search_filters_suppliers .facet .collapse{
        display: none;
    }
    #search_filters .facet .collapse.in, 
    #search_filters_brands .facet .collapse.in, 
    #search_filters_suppliers .facet .collapse.in{
        display: block;
    }
    #js-active-search-filters{
        border-radius: 5px;
        background: #fff;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        gap: 20px
    }
    #js-active-search-filters .h6.active-filter-title{
        font-family: 'Montserrat';
        font-weight: 700;
        color: #313131;
        font-size: 14px !important;
        margin-bottom: 0px;
    }
    #js-active-search-filters ul,
    #js-active-search-filters ul li{
        margin-bottom: 0px;
    }
    .active_filters .filter-block {
        background: #313131;
        border-radius: 3px;
        padding: 3px 10px;
        color: #fff;
        font-family: 'Montserrat';
        font-weight: 500;
    }
    .faceted-overlay {
        z-index: 10000000000000
    }
}