/* Collection  */
#collection {
  --sidebar_width: 300px;
  --sidebar_margin: 40px;
  --sidebar_padding: var(--item_spacing);
  --price_filter_width: calc(var(--sidebar_width)- var(--sidebar_padding));
  --filterwrap_margin: 30px;
  --filtertitle_margin: 10px;
  --btn_toggle_icon: 1.2em;
  --btn_toggle_icon_margin: 5px;
}

#collection {
	margin-top: calc(var(--block_spacing) / 2);
}

#collection .page-wrap {
  display: flex;
}

.collection-content.top .sort .toggle-filters i {
  font-size: var(--btn_toggle_icon);
  margin-right:var(--btn_toggle_icon_margin);
}

.collection-content {
  margin-top: var(--block_spacing);
  background: #fff;
  padding: calc(var(--block_spacing) / 2);
  border-radius: var(--border_radius);
  box-shadow: var(--shadow_small);
}

.sidebar {
  margin: 0;
  top: 0;
  left: 0;
  height: 100%;
  z-index: 99999;
  transform: translateX(-100%);
  transition: all .2s ease-in-out;
  overflow: scroll;
  width: 100%;
  max-width: 300px;
  position:fixed;
  background:#fff;
  padding: var(--sidebar_padding);
}

.sidebar__block:not(:last-child) {
	padding-bottom: var(--item_spacing);
  margin-bottom: var(--item_spacing);
  border-bottom: 1px solid var(--grey_border);
}

.sidebar__title {
	font-size:1.2em;
  font-weight:bold;
  margin-bottom: calc(var(--item_spacing) / 2);
}

.sidebar__links li a {
	display:block;
  padding:3px 0px;
}

.sidebar__links li.active a {
	color: var(--orange);
  font-weight:bold;
}

.sidebar__links li:hover a {
	color: var(--orange);
}

.sidebar .inner {
  opacity: 0;
  transform: translateX(-10%);
  transition: all .2s ease-in-out;
  transition-delay: .2s;
}

.sidebar.active {
  box-shadow: 5px 0 10px 0 rgba(0,0,0,0.05);
  transform: translateX(0);
}

.sidebar.active .inner {
  opacity: 1;
  transform: translateX(0);
}

.sidebar .top-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--item_spacing);
}

.sidebar .top-wrap .title {
  font-size: var(--font_h3);
  font-weight: bold;
}

.sidebar .top-wrap .close-sidebar {
  font-size: 1.5em;
  color: var(--grey);
}

#collection .main-col {
  min-width: 100%;
  max-width: 100%;
}

.sidebar-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, .6);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  opacity: 0;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: 99999;
}

.sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

#collection .sort-block.pagination {
  display: flex;
  align-items: center;
}

#collection .sort-block.pagination .per-page {
  margin-right: 10px;
}

#collection .custom-pager,
#collection .custom-pager .right {
  display: flex;
  align-items: center;
}

#collection .custom-pager .left {
  margin-right: 20px;
}

#collection .custom-pager ul li a {
  padding: 0 5px;
  color: var(--body);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-right: 5px;
  text-align: center;
}

#collection .custom-pager ul li.disabled a {
  color: var(--disable);
}

#collection .custom-pager ul li.active a {
  color: var(--accent);
}
  
@media (min-width: 1200px){
  #collection .main-col {
    min-width: calc((100% - var(--sidebar_width)) - var(--sidebar_margin));
    max-width: calc((100% - var(--sidebar_width)) - var(--sidebar_margin));
  }

  #collection .sidebar {
    min-width: var(--sidebar_width);
    max-width: var(--sidebar_width);
    margin-right: var(--sidebar_margin);
    position: unset;
    top: unset;
    left:unset;
    width: auto;
    transform: translateX(0);
    overflow: unset;
    padding: var(--sidebar_padding);
    border-radius: var(--border_radius);
    box-shadow: var(--shadow_small);
    z-index:unset;
  }

  .sidebar .inner {
    opacity: 1;
    transform: translateX(-0);
    transition: all .2s ease-in-out;
    transition-delay: .2s;
    background:#fff;
    padding:0;
    border-radius:unset;
    box-shadow:unset;
  } 
}

/* End collection */

/* Collection filters */
.price-filter {
  max-width: var(--price_filter_width);
}

.price-filter a {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

.collection-filter-price {
  height: 5px;
  border: none;
  margin: 0px;
  padding: 0;
  position: relative;
  width: 100%;
}

.collection-filter-price .ui-slider-range {
  background-color: #fff;
  border: none;
  margin: 0;
  position: absolute;
  height: 5px;
  top: 0;
  z-index: 1;
}

.collection-filter-price .ui-slider-handle {
  display: block;
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  border: 0;
  top: -5px;
  cursor: col-resize;
  border: none;
  background-color: #fff;
  border: 2px solid var(--accent);
  outline: none;
  z-index:9;
}

.collection-filter-price .ui-slider-handle:last-child {
	margin-left:-10px;
}

.collection-filter-price:after {
	display:block;
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:var(--grey_border);
}

.price-filter-range {
  margin-top: 10px;
  font-size: .9em;
  display: flex;
  justify-content: space-between;
}

.price-filter-range .min,
.price-filter-range .max {
  display: inline-block;
}

.price-filter-range .min span,
.price-filter-range .max span {
  font-weight: 600;
}

.price-filter-range .max {
  margin-left: 15px;
}

.filter-wrap {
	margin-bottom: var(--filterwrap_margin);
}

.filter-wrap:last-child {
	margin-bottom: 0;
}

.filter-wrap .filter-title {
	margin-bottom: var(--filtertitle_margin);
  color: var(--black);
}

.filter-wrap .filter-items {
	display: flex;
  flex-direction: column;
}
/* End collection filters */