<aside class="catalog-page__filter">

    <div class="catalog-page__filter-wrap">
        <form action="#">
            <div class="filter">
                <div class="filter__top">
                    <h3 class="filter__title">Фильтры</h3>
                    <button class="filter__top-btn button button--green button--outline js-close-filter" type="button">
                        <svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6 6L14.4853 14.4853M6 14.4853L14.4853 6.00001" stroke="#3D3D3D" stroke-width="1.67" stroke-linecap="round"></path>
                        </svg>
                    </button>
                </div>
                <div class="filter__wrap filter__wrap--left">
                    <div class="filter__item filter__item--list">
                        <a class="filter__category is-active filter__category--base" href="category.html">
                            Все товары <span>48</span>
                        </a>
                        <a class="filter__category" href="category.html">
                            Септики<span>30</span>
                        </a>
                        <a class="filter__category" href="category.html">
                            Канализации<span>4</span>
                        </a>
                        <a class="filter__category" href="category.html">
                            Станции очистки<span>4</span>
                        </a>
                        <a class="filter__category" href="category.html">
                            ЛОС<span>10</span>
                        </a>
                    </div>

                    <div class="filter__item range js-range">
                        <div class="filter__item-name">Цена (руб.)</div>
                        <div class="range__control">
                            <div class="range__control-item">
                                от
                                <input class="range__control-input js-input-from" type="number" value="1299" min="1299" max="14590">
                            </div>
                            <div class="range__control-item">
                                &mdash; до
                                <input class="range__control-input js-input-to" type="number" value="14590" min="1299" max="14590">
                            </div>
                        </div>
                        <div class="range__sliders">
                            <input class="range__slider js-range-from" type="range" value="1299" min="1299" max="14590">
                            <input class="range__slider js-range-to" type="range" value="14590" min="1299" max="14590">
                        </div>
                        <div class="filter__item-list">
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="price" value="less_40000" id="less_40000">
                                <label class="checkbox" for="less_40000">до 40 0000<span>2</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="price" value="less_100000" id="less_100000">
                                <label class="checkbox" for="less_100000">до 100 0000<span>2</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="price" value="less_150000" id="less_150000">
                                <label class="checkbox" for="less_150000">до 150 0000<span>12</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="price" value="discount" id="discount">
                                <label class="checkbox" for="discount">со скидкой<span>125</span></label>
                            </div>
                        </div>
                    </div>

                    <div class="filter__item js-filter-group">
                        <div class="filter__item-name">Почва</div>
                        <div class="filter__item-list">
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="ground" value="sand" id="ground_sand">
                                <label class="checkbox" for="ground_sand">Песчаная<span>6</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="ground" value="silty" id="ground_silty">
                                <label class="checkbox" for="ground_silty">Илистая<span>11</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="ground" value="stone" id="ground_stone">
                                <label class="checkbox" for="ground_stone">Каменистая<span>14</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="ground" value="black" id="ground_black">
                                <label class="checkbox" for="ground_black">Чернозем<span>14</span></label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="filter__wrap filter__wrap--right">
                    <div class="filter__item js-filter-group">
                        <div class="filter__item-name">Производительность</div>
                        <div class="filter__item-list">
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="sand" id="capacity_sand">
                                <label class="checkbox" for="capacity_sand">Песчаная<span>6</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="silty" id="capacity_silty">
                                <label class="checkbox" for="capacity_silty">Илистая<span>11</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="stone" id="capacity_stone">
                                <label class="checkbox" for="capacity_stone">Каменистая<span>14</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="black" id="capacity_black">
                                <label class="checkbox" for="capacity_black">Чернозем<span>14</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="sand" id="capacity_sand-1">
                                <label class="checkbox" for="capacity_sand-1">Песчаная<span>6</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="silty" id="capacity_silty-1">
                                <label class="checkbox" for="capacity_silty-1">Илистая<span>11</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="stone" id="capacity_stone-1">
                                <label class="checkbox" for="capacity_stone-1">Каменистая<span>14</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="black" id="capacity_black-1">
                                <label class="checkbox" for="capacity_black-1">Чернозем<span>14</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="sand" id="capacity_sand-2">
                                <label class="checkbox" for="capacity_sand-2">Песчаная<span>6</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="silty" id="capacity_silty-2">
                                <label class="checkbox" for="capacity_silty-2">Илистая<span>11</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="stone" id="capacity_stone-2">
                                <label class="checkbox" for="capacity_stone-2">Каменистая<span>14</span></label>
                            </div>
                            <div class="filter__item-wrap">
                                <input class="visually-hidden" type="checkbox" name="capacity" value="black" id="capacity_black-2">
                                <label class="checkbox" for="capacity_black-2">Чернозем<span>14</span></label>
                            </div>
                            <button class="filter__more js-filter-more" type="button">Показать еще</button>
                            <button class="filter__less js-filter-less" type="button">Скрыть часть</button>
                        </div>
                    </div>

                    <div class="filter__item">
                        <input class="visually-hidden" type="checkbox" name="with_ground_water" id="ground_water">
                        <label class="switcher" for="ground_water">Высокие грунтовые воды</label>
                    </div>
                </div>

                <div class="filter__item filter__item--btns">
                    <button class="button button--orange" type="button">Применить</button>
                    <button class="button button--outline" type="button">Очистить</button>
                </div>
            </div>
        </form>
    </div>
</aside>