.catalog-title {
    margin-top: 1.5625rem;
    font-size: 1.9791666667rem;
    line-height: 1.3;
    font-weight: 500
}

.catalog-wrapper {
    display: flex;
    /* flex-wrap: wrap; */
    align-items: flex-start;
    column-gap: 1.5625rem;
    margin-top: 1.5625rem;
    padding-bottom: .6.770833333333333;
}

.catalog-wrapper .catalog-sidebar {
    max-width: 15.4166666667rem;
    min-width: 15.4166666667rem;
    background: #f7f7f7;
    border-radius: .5208333333rem;
    padding: 1.0416666667rem
}

.catalog-content {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding-bottom: 6.770833333333333rem;
}

.catalog-content-controls {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between
}

.catalog-content-sort-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 1.25rem
}

.catalog-content-sort-control-value {
    font-weight: 400;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #999
}

.catalog-content-sort-control-value.active {
    font-weight: 500;
    color: #333
}


@media screen and (max-width: 1200px) {
    .catalog-content-sort-control-value{
        font-weight: 400;
        font-size: 15px;
        line-height: 1.3;
        color: #999
    }
}

.catalog-content-view-control {
    background-color: #f4f4f4;
    padding: .1041666667rem;
    display: flex;
    border-radius: .3125rem;
    -webkit-border-radius: .3125rem;
    -moz-border-radius: .3125rem;
    -ms-border-radius: .3125rem;
    -o-border-radius: .3125rem
}

.catalog-content-view-control-value {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.8229166667rem;
    height: 1.8229166667rem;
    border-radius: .3125rem;
    -webkit-border-radius: .3125rem;
    -moz-border-radius: .3125rem;
    -ms-border-radius: .3125rem;
    -o-border-radius: .3125rem
}

.catalog-content-view-control-value.active {
    background-color: #fff;
}

.catalog-content-section {
    width: 100%;
    margin-top: 1.5625rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.0416666667rem;
    row-gap: 1.0416666667rem
}

.catalog-content-description {
    margin-top: 6.770833333333333rem;
    font-weight: 400;
    font-size: .8333333333333333rem;
    line-height: 1.5;
}

.catalog-content-description h2 {
    font-weight: 400;
    font-size: 1.5625rem;
    line-height: 1.3;
}

.catalog-content-description ul {
    padding-left: 1.041666666666667rem;
}

.catalog-content-filter-control,
.catalog-content-sort-control-mobile,
.catalog-sidebar-close {
    display: none;
}

.catalog-pagination {
    margin-top: 1.041666666666667rem;
    width: 100%;
}

@media screen and (max-width: 1200px) {

    .catalog-title {
        font-size: 38px;
        margin-top: 0;
    }

    .catalog-wrapper {
        flex-wrap: wrap;
    }

    .catalog-wrapper .catalog-sidebar {
        display: none;
        z-index: 3;
        padding: 20px;
        border-radius: 10px;
        position: fixed;
        left: 0;
        top: 0;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        height: 100%;
        max-height: 100vh;
        overflow-y: auto;
    }

    .catalog-wrapper .catalog-sidebar.opened {
        display: block;
    }

    .catalog-content {
        padding-bottom: 100px;
        max-width: 100%;
    }

    .catalog-content-controls {
        margin-top: 30px;
        justify-content: flex-start;
        align-items: unset;
        column-gap: 38px;
    }

    .catalog-content-sort-control {
        display: none;
    }

    .catalog-content-filter-control-image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .catalog-content-filter-control {
        display: flex;
        align-items: center;
        column-gap: 10px;
        outline: none;
        border: none;
        background: unset;
    }

    .catalog-content-filter-control-text {
        font-weight: 400;
        font-size: 16px;
        line-height: 1.3;
    }

    .catalog-content-sort-control-mobile {
        display: flex;
        align-items: center;
        flex-grow: 1;
    }

    .catalog-content-sort-control-mobile-selector {
        position: relative;
        display: inline-block;
        z-index: 2;
        padding: 5px 13px;
        background: #ffffff;
        border: 1px solid #e4e4e4;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.3;
    }

    .catalog-content-sort-control-mobile-active {
        display: flex;
        align-items: center;
        column-gap: 10px;
    }

    .catalog-content-sort-control-mobile-options {
        display: none;
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        width: 100%;
        background: #fff;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.06), 0px 0px 14px rgba(0, 0, 0, 0.04);
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
    }

    .opened > .catalog-content-sort-control-mobile-options {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    .catalog-content-sort-control-mobile-option {
        padding: 5px 10px;
    }

    .catalog-content-view-control {
        padding: 2px;
    }

    .catalog-content-view-control-value {
        width: 35px;
        height: 35px;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
    }

    .catalog-content-section {
        margin-top: 20px;
        column-gap: 20px;
        row-gap: 20px;
    }

    .smart-filter-form {
        margin-top: 20px;
    }

    .catalog-sidebar-close {
        display: flex;
        justify-content: flex-end;
    }

    .catalog-content-description {
        margin-top: 100px;
        font-size: 16px;
    }

    .catalog-content-description h2 {
        font-size: 30px;
    }

    .catalog-content-description ul {
        padding-left: 20px;
    }

    .catalog-pagination {
        margin-top: 20px;
    }
    
}

@media screen and (max-width: 767px) {
    .catalog-title {
        font-size: 24px;
        text-align: center;
    }

    .catalog-content-view-control {
        display: none;
    }
    .catalog-content-sort-control-mobile {
        order: -1;
    }

    .catalog-content-filter-control-text {
        display: none;
    }

    .catalog-content-section {
        column-gap: 14px;
        row-gap: 10px;
    }
}