#filters{
  --brown:  #4b2c2c;
  --accent: #f27c00;
  --track:  transparent;

  display:flex;
  flex-direction:column;
  gap:18px;

  background:#fff;
  border-radius:14px;
  padding:14px 18px;
  color:var(--brown);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  font-size:14px;
  margin: 0 10px;
}

#filters .filters-row-1{ display:flex; align-items:center; gap:28px; flex-wrap:nowrap; }
#filters .filters-row-2{ display:flex; align-items:start; gap:28px; flex-wrap:wrap; }

#filters .slider-wrapper{ 
  flex:1; min-width:200px; max-width:350px;
  display:flex; flex-direction:column; gap:12px; 
}
#filters .slider-header{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; color:var(--brown); font-size:18px;
}

#filters .filter-section-boolean,
#filters .filter-section-button{ flex-shrink:0; white-space:nowrap; }
#filters .filter-sections{ display:contents !important; }
#filters #category-filter-hover{ display:block !important; position:static !important; }
#filters #manufacturer-filter,
#filters .filter-section-manufacturer,
#filters .filter-section-parametric{ flex-shrink:0; }
#filters #price-filter-form{ display:none !important; }

#filters .slider-wrapper,
#filters .filter-section,
#filters .filter-section-boolean,
#filters .filter-section-button,
#filters #manufacturer-filter{
  width:auto !important; max-width:none !important; clear:none !important;
  border-top:0 !important; padding-top:0 !important; margin-top:0 !important;
}

#filters .filter-section{ display:flex; align-items:center; gap:8px; }
#filters .filter-section-button .toggle-filters{ display:none !important; }

#filters h4{
  margin:0 6px 0 0;
  font-size:18px; font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:var(--brown); white-space:nowrap; font-family:"Roboto";
}

#filters .filter-section-boolean input[type="checkbox"],
#filters #manufacturer-filter input[type="checkbox"],
#filters .filter-section-manufacturer input[type="checkbox"]{
  position:absolute !important; opacity:0 !important; width:0 !important; height:0 !important;
}

#filters #manufacturer-filter label.filter-label,
#filters .filter-section-manufacturer label.filter-label{
  background:none !important; box-shadow:none !important; border:0 !important;
}

#filters .filter-section-boolean label.filter-label,
#filters #manufacturer-filter label.filter-label,
#filters .filter-section-manufacturer label.filter-label{
  position:relative !important;
  padding-left:28px !important;
  line-height:22px !important;
  font-weight:600 !important;
  color:var(--brown) !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  display:inline-block !important;
  margin-right:22px !important;
  font-size:18px !important;
  padding-top:0 !important; margin-top:0 !important;
}

#filters .filter-section-boolean input[type="checkbox"] + label.filter-label::before,
#filters #manufacturer-filter input[type="checkbox"] + label.filter-label::before,
#filters .filter-section-manufacturer input[type="checkbox"] + label.filter-label::before,
#filters #manufacturer-filter label.filter-label::before,
#filters .filter-section-manufacturer label.filter-label::before{
  content:"" !important;
  position:absolute !important; left:0; top:50%;
  width:22px; height:22px; transform:translateY(-50%);
  border:2px solid var(--brown) !important;
  border-radius:6px !important;
  background:#fff !important;
  background-image:none !important;
  box-shadow:none !important;
  box-sizing:border-box;
}

#filters .filter-section-boolean input[type="checkbox"] + label.filter-label::after,
#filters #manufacturer-filter input[type="checkbox"] + label.filter-label::after,
#filters .filter-section-manufacturer input[type="checkbox"] + label.filter-label::after,
#filters #manufacturer-filter label.filter-label::after,
#filters .filter-section-manufacturer label.filter-label::after{
  content:"" !important; position:absolute !important; width:0; height:0; border:0; background:none;
}

#filters .filter-section-boolean input[type="checkbox"]:checked + label.filter-label::before{
  background:var(--brown) !important; border-color:var(--brown) !important;
}
#filters .filter-section-boolean input[type="checkbox"]:checked + label.filter-label::after{
  content:"" !important; left:7px; top:50%;
  width:6px; height:12px; transform:translateY(-58%) rotate(45deg);
  border-right:3px solid #fff !important; border-bottom:3px solid #fff !important;
}

#filters #manufacturer-filter label.filter-label.active::before,
#filters .filter-section-manufacturer label.filter-label.active::before{
  background:var(--brown) !important; border-color:var(--brown) !important;
}
#filters #manufacturer-filter label.filter-label.active::after,
#filters .filter-section-manufacturer label.filter-label.active::after{
  content:"" !important; left:7px; top:50%;
  width:6px; height:12px; transform:translateY(-58%) rotate(45deg);
  border-right:3px solid #fff !important; border-bottom:3px solid #fff !important;
}

@supports selector(:has(*)){
  #filters #manufacturer-filter fieldset div:has(> input[type="checkbox"]:checked) > label.filter-label::before,
  #filters .filter-section-manufacturer fieldset div:has(> input[type="checkbox"]:checked) > label.filter-label::before{
    background:var(--brown) !important; border-color:var(--brown) !important;
  }
  #filters #manufacturer-filter fieldset div:has(> input[type="checkbox"]:checked) > label.filter-label::after,
  #filters .filter-section-manufacturer fieldset div:has(> input[type="checkbox"]:checked) > label.filter-label::after{
    content:"" !important; left:7px; top:50%;
    width:6px; height:12px; transform:translateY(-58%) rotate(45deg);
    border-right:3px solid #fff !important; border-bottom:3px solid #fff !important;
  }
}

#filters .filter-section-boolean input[type="checkbox"]:focus + label.filter-label::before,
#filters #manufacturer-filter input[type="checkbox"]:focus + label.filter-label::before,
#filters .filter-section-manufacturer input[type="checkbox"]:focus + label.filter-label::before{
  box-shadow:0 0 0 3px rgba(242,124,0,.25) !important;
}

#filters .filter-label .filter-count{ opacity:.6; font-weight:500; display:none; }

#filters #slider.ui-slider.ui-slider-horizontal{
  position:relative; width:100%;
  height:2px !important;
  background:var(--track) !important;
  border:0 !important; border-radius:999px !important;
  background-image:none !important; box-shadow:none !important;
}
#filters #slider.ui-slider.ui-slider-horizontal .ui-slider-range{
  background:var(--accent) !important;
  border:0 !important; border-radius:999px !important;
  height:100% !important; top:0 !important;
}

#filters #slider.ui-slider.ui-slider-horizontal .ui-slider-handle{
  top:-7px !important;
  width:14px !important; height:14px !important;
  background:var(--accent) !important;
  border:0 !important;
  border-radius:50% !important;
  box-shadow:0 0 0 1px var(--accent) !important;
  cursor:pointer; outline:0 !important;
}
#filters #slider.ui-slider.ui-slider-horizontal .ui-slider-handle:focus{
  box-shadow:0 0 0 3px rgba(242,124,0,.25), 0 0 0 1px var(--accent) !important;
}
#filters .slider-content {
	background-color: var(--brown);
	height: 2px;
}

#filters .advanced-filters-wrapper{ display:flex; flex-wrap:wrap; gap:12px 18px; }
#filters .advanced-parameter{ cursor:pointer; }
#filters .filter-total-count{ display:none; }

@media (max-width:1200px){
  #filters{ gap:14px; }
  #filters .filters-row-1,
  #filters .filters-row-2{ flex-wrap:wrap; gap:14px; }
  #filters .slider-wrapper{ min-width:200px; flex:1; }
}

@media (min-width:1200px){
  #content .filter-section fieldset div,
  #footer  .filter-section fieldset div{
    width:auto !important;
  }
}

@media (max-width:767px){
    #filters:not(.visible){
        display:none !important;
    }
}
