//= header.html

  <div class="container">
    <div class="row">
      <div class="col page-title">
          <div class="breadcrumbs">
            <span class="breadcrumbs__item"><a href="#">Главная</a></span>
            <span class="breadcrumbs__arrow">&gt;</span>
            <span class="breadcrumbs__item"><a href="#">Каталог</a></span>
            <span class="breadcrumbs__arrow">&gt;</span>
            <span class="breadcrumbs__item">Свет</span>
          </div>
          <h1 class="page-title__title">Свет</h1>
      </div>
    </div>
  </div>

  <section class="samus">
    <div class="container">
      <div class="row">
        <div class="col">
          <div class="swiper-container samus__container mx-10">
            <div class="swiper-wrapper samus__wrapper">
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
              <div class="swiper-slide samus__slide">
                //= fragments/samus__slide.html
              </div>
            </div>
          </div>
          <div class="samus__button samus__button_prev"></div>
          <div class="samus__button samus__button_next"></div>
        </div>
      </div>
    </div>
  </section>
  <div class="container">
    <div class="row">
      <div class="col-12 d-lg-none">
        <a href="#filter-collapse" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="filter-collapse">
          <h4 class="mobile-collapse">Фильтр <i class="icon-sort"></i></h4>
        </a>
      </div>
      <div class="col-xl-3 col-lg-4 col-12 collapse d-lg-block" id="filter-collapse">
        <!-- Фильтр по подкатегории -->
        <div class="catalog-filter inner-skin p-4 mb-4">
          <a class="catalog-filter__collapse" data-toggle="collapse" href="#filter-subcategory" role="button" aria-expanded="true" aria-controls="filter-subcategory">
            <span class="catalog-filter__title">Подкатегории</span>
          </a>
          <div class="catalog-filter__content collapse show" id="filter-subcategory">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1" name="example1">
                <label class="custom-control-label" for="customCheck1">Название подкатегории в&nbsp;несколько строк <span>25</span></label>
              </div>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck2" name="example1">
                <label class="custom-control-label" for="customCheck2">Check this custom checkbox <span>25</span></label>
              </div>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck3" name="example1">
                <label class="custom-control-label" for="customCheck3">Check this custom checkbox <span>25</span></label>
              </div>
          </div>
        </div>
        <!-- Фильтр по бренду -->
        <div class="catalog-filter inner-skin p-4 mb-4">
          <a class="catalog-filter__collapse" data-toggle="collapse" href="#filter-brand" role="button" aria-expanded="true" aria-controls="filter-brand">
            <span class="catalog-filter__title">Бренды</span>
          </a>
          <div class="catalog-filter__content collapse show" id="filter-brand">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck4" name="example1">
                <label class="custom-control-label" for="customCheck4">Название подкатегории в&nbsp;несколько строк <span>25</span></label>
              </div>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck5" name="example1">
                <label class="custom-control-label" for="customCheck5">Check this custom checkbox <span>25</span></label>
              </div>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck6" name="example1">
                <label class="custom-control-label" for="customCheck6">Check this custom checkbox <span>25</span></label>
              </div>
          </div>
        </div>
        <!-- Фильтр по цене -->
        <div class="catalog-filter inner-skin p-4 mb-4">
          <a class="catalog-filter__collapse" data-toggle="collapse" href="#filter-price" role="button" aria-expanded="true" aria-controls="filter-price">
            <span class="catalog-filter__title">Цена</span>
          </a>
          <div class="catalog-filter__content collapse show" id="filter-price">
            <form>
              <div class="form-group catalog-filter__price">
                <input type="text" class="form-control" id="price-from" value="6000 ₽">
                <span>—</span>
                <input type="text" class="form-control" id="price-to" value="150000 ₽">
              </div>
              <input type="range"  class="custom-range" name="price-min" id="price-min" value="6000" min="0" max="150000">
              <input type="range"  class="custom-range" name="price-max" id="price-max" value="6000" min="0" max="150000">
            </form>
          </div>
        </div>
        <!-- Фильтр по наличию -->
        <div class="catalog-filter inner-skin p-4 mb-4">
          <a class="catalog-filter__collapse" data-toggle="collapse" href="#filter-stock" role="button" aria-expanded="true" aria-controls="filter-stock">
            <span class="catalog-filter__title">Наличие</span>
          </a>
          <div class="catalog-filter__content collapse show" id="filter-stock">
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck7" name="example1">
                <label class="custom-control-label" for="customCheck7">В наличии<span>25</span></label>
              </div>
              <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck8" name="example1">
                <label class="custom-control-label" for="customCheck8">На складе<span>25</span></label>
              </div>
          </div>
        </div>
        <!-- Фильтр по камкордеру -->
        <div class="catalog-filter inner-skin p-4 mb-4">
          <a class="catalog-filter__collapse" data-toggle="collapse" href="#filter-camcorder" role="button" aria-expanded="true" aria-controls="filter-camcorder">
            <span class="catalog-filter__title">Подбор по камкордеру</span>
          </a>
          <div class="catalog-filter__content collapse show" id="filter-camcorder">
            <div class="catalog-filter__accordion accordion" id="accordion">
              <div class="accordion__group">
                <a class="accordion__parent" data-toggle="collapse" href="#accordion-canon" aria-expanded="false" aria-controls="accordion-canon">Canon</a>
                <div class="accordion__child collapse" data-parent="#accordion" id="accordion-canon">
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck9" name="example1">
                    <label class="custom-control-label" for="customCheck9">AG-AC130AEN</label>
                  </div>
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck10" name="example1">
                    <label class="custom-control-label" for="customCheck10">AG-AC160AEN</label>
                  </div>
                </div>
              </div>
              <div class="accordion__group">
                <a class="accordion__parent" data-toggle="collapse" href="#accordion-panasonic" aria-expanded="false" aria-controls="accordion-panasonic">Panasonic</a>
                <div class="accordion__child collapse" data-parent="#accordion" id="accordion-panasonic">
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck11" name="example1">
                    <label class="custom-control-label" for="customCheck11">AG-AC130AEN</label>
                  </div>
                  <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" id="customCheck12" name="example1">
                    <label class="custom-control-label" for="customCheck12">AG-AC160AEN</label>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="col-xl-9 col-lg-8 col-md-12 mb-10">
        <div class="catalog-wrapper catalog-wrapper_list">
          <div class="row">
            <div class="col-12 d-lg-none">
              <a href="#sort-collapse" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="sort-collapse">
                <h4 class="mobile-collapse">Сортировка <i class="icon-sort"></i></h4>
              </a>
            </div>
            <div class="col-xl-10 col-lg-9 col-12 collapse d-lg-block" id="sort-collapse">
              <div class="catalog-sort my-2">
                <a href="#" class="catalog-sort__button desc popular" rel="nofollow">
                  <span>По популярности</span><i class="icon-sort"></i>
                </a>
                <a href="#" class="catalog-sort__button asc price active" rel="nofollow">
                  <span>По цене</span><i class="icon-sort"></i>
                </a>
                <a href="#" class="catalog-sort__button desc name" rel="nofollow">
                  <span>По названию</span><i class="icon-sort"></i>
                </a>
              </div>
              <div class="applied-filters mb-3">
                <a href="#" class="applied-filters__item">Светодиодные светильники</a>
                <a href="#" class="applied-filters__item">Logocam</a>
                <a href="#" class="applied-filters__item">Opticast</a>
                <a href="#" class="applied-filters__item">6000–150000</a>
              </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-12 justify-content-end d-lg-flex align-items-end mb-4 d-none">
              <a href="#" title="Плитка" class="view-toggle view-toggle_grid">
                <i class="icon-grid"></i>
              </a>
              <a href="#" title="Список" class="view-toggle view-toggle_list active">
                <i class="icon-list"></i>
              </a>
            </div>
          </div>
          <div class="row">
              //= fragments/product-item.html
              //= fragments/product-item.html
              //= fragments/product-item.html
              
              <div class="col-xl-4 col-md-6 col-12">
                <div class="product-item product-item_line">
                  <div class="product-item__wrapper">
                    <div class="product-item__thumbnail">
                      <a href="#" class="product-item__image-link">
                        <img class="product-item__image" src="images/product-image-02.jpg" alt="Название товара">
                      </a>
                    </div>
                    <a href="#" class="product-item__category">Светодиодные светильники</a>
                    <a href="#" class="product-item__link"><h4 class="product-item__title">BB&S Area 48 2x2 yoke, with 28 mm spigot and locking handle and Flyer Remote cable</h4></a>
                    <p class="product-item__description">$lipsum(words:24)</p>
                  </div>
                  <div class="product-item__footer">
                    <div class="product-item__not-available">
                      <span>Товара нет в наличии</span>
                    </div>
                  </div>
                </div>
              </div>

              //= fragments/product-item.html
              //= fragments/product-item.html
              //= fragments/product-item.html
              //= fragments/product-item.html
              //= fragments/product-item.html
              //= fragments/product-item.html
              //= fragments/product-item.html
              //= fragments/product-item.html
          </div>
          <div class="row">
            <div class="col">
              <!-- Пагинация "Загрузить ещё" -->
              <div class="pagination pagination_loadmore">
                <div class="pagination__button pagination__button_load">Показать ещё <span class="pagination__load-number">12</span></div>
              </div>
              <!-- конец пагинации -->
            </div>
            <div class="w-100"></div>
            <div class="col">
              <!-- Пагинация классическая -->
              <div class="pagination pagination_classic">
                <span class="pagination__button pagination__button_disabled pagination__button_prev d-none d-md-block"><i class="icon icon-pagination-left"></i> Назад</span>
                <div class="pagination__pages">
                  <a href="#" class="pagination__button pagination__button_page pagination__button_active">1</a>
                  <a href="#" class="pagination__button pagination__button_page">2</a>
                  <span href="#" class="pagination__dots">...</span>
                  <a href="#" class="pagination__button pagination__button_page">5</a>
                </div>
                <span class="pagination__button pagination__button_next d-none d-md-block">Вперёд <i class="icon icon-pagination-right"></i></span>
              </div>
              <!-- конец пагинации -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- <section class="rob bg-white mt-10">
    <div class="container">
      <div class="row section_independent">
        <div class="col-xl-3 col-lg-4">
          <div class="headline-block headline-block_margin mb-4">
            <h5 class="headline-block__subtitle">Информация</h5>
            <h1 class="headline-block__title">Полезные статьи</h1>
            <p class="headline-block__description">Советы по&nbsp;использованию техники и&nbsp;другая информация о&nbsp;наших продуктах</p>
            <a href="#" class="button button_primary headline-block__button"><span>Все статьи</span></a>
          </div>
        </div>
        <div class="col-xl-9 col-lg-8">
          <div class="row">

            <div class="col-md-6 col-12">
              <div class="articles-item inner-skin mb-4">
                <div class="articles-item__image" style="background-image: url('http://lorempixel.com/580/400/business/');"></div>
                <div class="articles-item__wrapper d-flex flex-column justify-content-between">
                  <div class="articles-item__inner">
                    <a href="#" class="articles-item__link">
                      <h3 class="articles-item__title" data-clamp="3">Рельсовые системы подвеса: как организовать проект</h3>
                      <p class="articles-item__text" data-clamp="3">$lipsum(words:48)</p>
                    </a>
                  </div>
                  <div class="articles-item__footer d-flex justify-content-between">
                    <a href="#" class="articles-item__category">Ноухау</a>
                    <span class="articles-item__viewcount">266</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-6 col-12">
              <div class="articles-item inner-skin mb-4">
                <div class="articles-item__image" style="background-image: url('http://lorempixel.com/580/400/business/');"></div>
                <div class="articles-item__wrapper d-flex flex-column justify-content-between">
                  <div class="articles-item__inner">
                    <a href="#" class="articles-item__link">
                      <h3 class="articles-item__title" data-clamp="3">Рельсовые системы подвеса: как организовать проект</h3>
                      <p class="articles-item__text" data-clamp="3">$lipsum(words:48)</p>
                    </a>
                  </div>
                  <div class="articles-item__footer d-flex justify-content-between">
                    <a href="#" class="articles-item__category">Ноухау</a>
                    <span class="articles-item__viewcount">266</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section> -->

//= footer.html