/* collection*/ 
.collection{
  margin:20px 0px;  
}
.collection_title_name{
    padding:10px;
    text-transform: uppercase;
    cursor:pointer;
    transition: all 0.3s ease-in
}

.collection_title_brand_name{
    font-weight:600;
    display:inline-block;
    font-size: 16px;
    margin: 0;
}

.collection_title{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.collection.active .collection_title{
    background:#000000;
}

.collection_line{
    height:3px;
    background:#E3E3E3;
} 

.collection_title_det{
    display:flex;
    align-items:center;
    cursor:pointer;
}

.collection.active .collection_title_det{
    color:#000;
}

.collection_title_name{
    font-weight:600;
    display:inline-block;
    font-size: 16px;
    margin: 0;
}

.collection_title_det:after{
  content: "\002B";
  display: block;
  float: right;
  font-size: 40px;
  font-weight: 300;
  height: 24px;
  line-height: 16px;
  margin: 0px 5px;
  text-align: center;
  width: 24px;
}

.collection.active .collection_title_det:after{
    color:#fff;
    content: "\2212";
}
.collection_title.disable{
    pointer-events:none;
}
.collection_title.disable .collection_title_det,
.collection_title.disable .collection_title_det:after{
    display:none;
}

.collection_content{
    display:block;
}

.collection_det{
    position:relative;
    height:auto;
    max-height: 0px;
    transition: all 0.3s;
    overflow:hidden;
    padding-left: 58px;
    background: #000;
    margin-bottom:20px;
}

.collection_det_content{
    display:flex;
}

.collection_det_info{
    flex:3;
    display:flex;
    align-items:center;
    background:#E3E3E3;
    padding:20px 60px 40px;
}

.collection.active .collection_det{
    max-height:1000px;
}

.collection_det_info_title{
    font-size:32px;
    font-weight:600;
    margin-bottom:30px;
}

.collection_det_img{
    flex:4;
    overflow: hidden;
    position:relative;
}
.collection_det_img img{
    object-fit: cover;
    object-position: top;
    height: 100%;
    width: 100%;
    z-index:0;
}

.collection_det_title{
    transform: rotate(-90deg);
    transform-origin: 100% 0;
    top: 0;
    right: 100%;
    background-color: #000;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    padding: 10px 15px;
    text-transform: uppercase;
    white-space: nowrap;
    position:absolute;
    margin-top:-1px;
    z-index:0;
}

/* group*/
.collection_group{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
    grid-gap:30px;
}

.collection_group_item{
    border:10px solid #E3E3E3;
    display:block;
    position:relative;
    padding-bottom:10px;
    text-align:center;
}

.item_sale{    
    font-weight: 900;
    font-size: 20px;
    color: #d14a43;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}

.item_status{
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    text-align: right;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    border-radius:10px;
    background:#ddd;
    margin:10px;
    padding: 5px 10px;
}

.item_limited{
    color:#555;
}

.item_new{
    color:#d14a43;
}

.collection_group_item .group_img{
    width: 100%;
    height: 270px;
    overflow: hidden;
    position: relative;
}

.collection_group_item .group_img img{
    object-fit: contain;
    width: 100%;
    height:100%;
    transition: transform 300ms ease-in-out;
    transform: scale(0.8);
}

.collection_group_item:hover .group_img img{
    transform: scale(0.9);
}

.collection_group_item .group_name{
    bottom:0;
    width: 100%;
    padding:10px;
    background:#fff;
    font-weight: 600;
    text-align:center;
    text-transform:uppercase;
    white-space: nowrap;
}

.collection_group_item .group_name_info{
    white-space: nowrap;    
    text-overflow: ellipsis;
    overflow: hidden;
}

.collection_group_item .group_price{
    color: #d14a43;
    padding-top: 5px;
    font-size: 16px;
}

.collection_group_item .group_buy{
    background-color: #333;
    background-image: url(../img/basket.png);
    background-position:6px 5px;
    background-repeat:no-repeat;
    background-size: auto 20px;
    display:inline-flex;
    align-items:center;
    top:100%;
    height:32px;
    max-width:32px;
    width:auto;
    border-radius:100%;
    overflow:hidden;
    transition:max-width 0.5s;
    margin-top:10px;
    margin-bottom:-60px;
    position:relative;
}

.collection_group_item .group_buy span{
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    font-size:14px;
    line-height: 1;
    margin-left:20px;
    color:#fff;
    transition:opacity 0.2s;
    opacity:0;
    padding:0px 10px;
}

.collection_group_item .group_buy:hover span{
    opacity:1;
}

.collection_group_item .group_buy:hover{
    max-width:unset;
    border-radius:15px;
    background-color: #d14a43;
}

/**/

.katalog{
    opacity:1;
}

.katalog-title{
    margin-top:0px;
}

.katalog-stop{
    display:none;
}

.katalog-stop.active{
    display:block;
}

.katalog.loader{
    opacity:0.5;
    pointer-events: none !important;
    cursor: text;
}
.katalog_size{
	max-width: 1200px;
    min-height:100vh;
	margin: 0px auto;
    padding:0px 20px;
    position:relative;
}

.katalog_content.fixed{
    padding-top:64px;
}

/* filters*/

.filters{
    border:1px solid #000;
    padding:10px 20px;
    position:relative;
    max-width: 1160px;
    margin: 0px auto 20px;
    z-index: 1;
    background:#fff;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
}

.filters_block{
    flex: 1;
    overflow: auto;
    margin-right:10px;
    margin-top:10px;
}

.filters_contaiter{
    position: sticky;
    width: 100%;
    height:100%;
    left: 0;
    top:85px;
    z-index:9;
}

/**/

.filters{
    user-select:none;
}

.filters.title{
    position:fixed;
}

.filters_title{
    text-transform:uppercase;
    cursor:pointer;
    position:relative;
    display:flex;
    align-items:center;
    flex:0 0 34px;
}

.filters-name{
    flex:1
}

/* price*/

.filters-price-line{
    padding: 0 5px 0px 12px;
}

.filters-price-char{
    flex: 0 0 20px;
    text-align: center;
}

.filters-price-value{
    display:flex;
    align-items:center;
    margin-top: 16px;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
}

/* filter toggle*/
.filter_toggle{
    width: 22px;
    height: 18px;
    position: relative;
    z-index: 200;
    cursor: pointer;
    margin-left: 30px;    
}

.filter_toggle span{
    position: relative;
    display: block;
}

.filter_toggle span, 
.filter_toggle span:after, 
.filter_toggle span:before {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #000;
}

.filter_toggle span{
    top:0;
}

.filter_toggle span:before{
    top:8px;
}

.filter_toggle span:after {
    top: 16px;
}
/*on*/
/*.filter_toggle.on span {
    background-color: transparent;
}

.filter_toggle.on span:before {
    width: 22px;
    transform: rotate(45deg) translate(2px, 2px);
    top: 6px;
}

.filter_toggle.on span:after {
    width: 22px;
    top: 16px;
    transform: rotate(-45deg) translate(5px, -5px);
}*/

/**/
.filters_block{
    display:none;
}

.filters.active .filters_block{
    display:block;    
}

.filters_content{
    margin:30px 0px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    grid-gap: 25px 15px;
    justify-content: flex-start;
}

.filters_ok{
    margin-left: 10px;
    display:none;    
    position:relative;
    /*padding-right:35px;*/
}

/*.filters_ok:after{
    content:'';
    background:url(../img/ok.png) no-repeat;
    background-size:contain;
    position:absolute;
    height:20px;
    width:20px;
    top:7px;
    right:7px;
    display:block;
}*/

.filters_ok.active{
    display:inline-block;
}

.filters_del{
    margin-left: 10px;
    position:relative;
    display:none;
}

/*
.filters_del:after{
    content:'';
    background:url(../img/del.png) no-repeat;
    background-size:contain;
    position:absolute;
    height:10px;
    width:10px;
    top:11px;
    right:7px;
    display:block;
}*/

.filters_del.active{
    display:inline-block;
}

.filters_one_title{
    font-weight:bold;
    text-transform:uppercase;
    margin-bottom: 20px;
}

/* filter item*/
.filter{
    cursor:pointer;
}

/* color filter*/
.filter.color{
    display:inline-block;
    position:relative;
    margin-right:7px;
    margin-bottom:7px;
    box-shadow:2px 2px 2px rgba(0,0,0,.2);
    overflow: hidden;
    transition:0.3s;
}
.filter.color.selected,
.filter.color:hover{
    transform:scale(0.8);
}

.filter .colors{
    display:flex;
    border-radius:2px;
    height:20px;
    width:30px;
}

.filter .colors>div{
    flex:1;
}

/* text filter*/
.filter.text{
    display:grid;
    grid-template-columns:20px 1fr;
    align-items: center;
    grid-gap:10px;
    color:#000;
    font-weight: bold;
    font-size:14px;
    text-transform:uppercase;
    margin-bottom:7px;
}

.filter.text div:first-child{
    height:20px;
    width:20px;
    border:1px solid #ccc;
    position:relative;
}

.filter.text:hover div:first-child,
.filter.text.selected div:first-child{
    border:1px solid #D14A43;
}

.filter.text.selected div:first-child:after{
    left:2px;
    right:2px;
    bottom:2px;
    top:2px;
    background:#D14A43;
    position:absolute;
    content: '';
}

.filter.disabled{
    opacity:0.5;
    pointer-events:none;
}

.filter.text:hover,
.filter.text.selected{
    color:#D14A43;
}