.int-catalog-wrap{
    display: flex;
    gap: 30px;
    flex-direction: column;
    margin-bottom: 100px;
}
.int-catalog-top{
    display: flex;
    align-items: center;
}
.int-wishlist-top,
.int-special-wrap .int-catalog-top{
    margin-top: 50px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
}
.int-wishlist-top {
    margin-top: 30px;
}
.int-special-wrap .int-catalog-grid{ margin-bottom: 100px; }

.int-catalog{
    display: flex;
    width: 100%;
    gap: 45px;
}
.int-wishlist-top h1,
.int-catalog-top h1{
    font-size: 28px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    margin-right: auto;
    text-transform: uppercase;
    margin-top: 10px;
}
.int-manufacturer-grid-top .int-catalog-top-control,
.int-catalog-top .int-catalog-top-control,
.int-wishlist-top .int-catalog-top-control {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 30px;   
}
.int-btn.int-catalog-filter-btn{
    padding: 12px 22px;
    border-radius: 16px;
    border: 2px solid var(--cl-light);
    background-color: var(--cl-white);
    color: var(--cl-brown);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    justify-content: center;
    cursor: pointer;
}
.int-catalog-filter-btn{
    display: none;
}
.int-btngroup{
    display: flex;
    gap: 10px;
    align-items: center;
}

.int-toggleview-btn{
    transition: background-color 300ms ease-in-out,
                border-color 300ms ease-in-out;
    height: 44px;
    width: 44px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    background-color: transparent;
    border: 2px solid var(--cl-semi-light); 
}
.int-toggleview-btn:hover,
.int-toggleview-btn.active{
    background-color: var(--cl-semi-light);
    border-color: transparent;
}
.int-compare-btn{
    white-space: nowrap;
    display: flex;
    align-items: center;
    color: var(--cl-accent);
    font-size: 16px;
    font-weight: 500;
    gap: 10px;
}
.int-catalog-left-fade{ display: none; }
.int-catalog-left{
    display: flex;  
    flex-direction: column;
    width: 100%;
    max-width: 280px;
}
.int-catalog-left .int-catalog-close-button{
    position: absolute;
    top: 10px;
    right: 16px;
    display: none;
    z-index: 1000;
}
.int-catalog-right .int-loadmore-btn{
    margin-top: 0;
}
.int-catalog-right{
    width: 100%;
    display: flex; 
    flex-direction: column;
    gap: 30px;
    align-items: center;
}

.int-catalog-tags{
    display: flex;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}
.int-catalog-tag{
    border-radius: 8px;
    border: 2px solid var(--cl-light);
    color: var(--cl-brown);
    font-size: 16px;
    padding: 8px 11px;
    background-color: transparent;
    transition: background-color 300ms ease-in-out,
                border-color 300ms ease-in-out;
}
.int-catalog-tag:hover{
    background-color: var(--cl-semi-light);
    border-color: transparent;
    color: var(--cl-brown);
}

.int-catalog-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; 
    width: 100%;
}
.int-catalog-grid.four-row{
    grid-template-columns: repeat(4, 1fr);
}

/* --- filter --- */

.int-filter *{
    font-family: 'Roboto Flex', sans-serif;
    font-size: 16px;
    color: var(--cl-brown);
}
.int-filter .ocf-value-scale.ocf-noUi-target[disabled]{
    opacity: 0.5;
}
.int-filter .ocf-filter-name{
    color: var(--cl-brown-2);
    font-weight: 500;
    text-transform: none;
}
.int-filter .ocf-noUi-connect:before{
    background-color: var(--cl-light);
    height: 6px;
    border-radius: 2px;
}
.int-filter .ocf-noUi-base:before{
    height: 6px;
    background-color: #E8ECF0;
    border-radius: 2px;
}
.int-filter .ocf-noUi-connects::after,
.int-filter .ocf-noUi-connects::before{
    content: none;
}
.int-filter .ocf-noUi-handle{
    background-color: var(--cl-white);
    border: 2px solid var(--cl-light);
}
.int-filter .ocf-header{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
}
.int-filter .ocf-body{
    /* max-height: calc(100vh - 240px); */
    overflow-y: auto;
    overflow-x: visible;
    padding: 0 20px;
    margin: 0 -20px; 
}
.int-filter .ocf-body .ocf-dropdown .ocf-filter-header{
    padding: 11px 16px;
    border: 2px solid var(--cl-light);
    color: var(--cl-brown-light);
    border-radius: 10px;
    background-color: var(--cl-white);
}

.int-filter .ocf-body .ocf-dropdown.ocf-open{
    /* margin-bottom: 240px; */
}
.ocf-theme-light.int-filter .ocf-dropdown.ocf-open .ocf-filter-body>.ocf-value-list{
    position: static;
    margin-top: -24px;
}
.int-filter .ocf-body .ocf-dropdown.ocf-open .ocf-filter-header{
    border-bottom: none;
    border-radius: 10px 10px 0 0;
}


.int-filter .ocf-body .ocf-dropdown .ocf-filter-header .int-droplist-arrow-down{
    transition: rotate 300ms ease-in-out;
    user-select: none;
}
.int-filter .ocf-body .ocf-dropdown.ocf-open .ocf-filter-header .int-droplist-arrow-down{
    rotate: 180deg;
}
.ocf-theme-light.int-filter .ocf-dropdown .ocf-filter-body>.ocf-value-list{
    top: 50px;
    border-radius: 0 0 10px 10px;
    border: 2px solid var(--cl-light);
    border-top: none;
    background-color: var(--cl-white);
    padding: 14px 16px;
    right: 0;
    left: 0;
    /* box-shadow: 0px 10px 30px 0px #2F22120D; */
    box-shadow: none;
    z-index: 100;
    position: absolute;
}
.int-filter .ocf-popover{
    /* box-shadow: 0px 10px 30px 0px #2F22122D; */
}
.int-filter .ocf-popover.ocf-right{
    margin-left: 30px;
}
.int-filter .int-filter-btngroup{
    display: flex;
    gap: 10px;
    align-items: stretch;
    justify-content: stretch;
}
.int-filter .int-filter-btngroup .int-btn{
    border-radius: 16px;
    text-transform: uppercase;
    font-weight: 600;
    min-width: 105px;
    height: 50px;
    width: 100%;    
}
.int-filter.ocf-theme-light .ocf-search-btn-popover.int-btn-search-popover,
.int-filter .int-filter-btngroup .int-btn.int-btn-secondary{
    background-color: var(--cl-light);
    color: var(--cl-brown);
    gap: 4px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
}
.int-filter .ocf-scroll-y{
    background: none;
}
.int-filter.ocf-theme-light .ocf-selected-card{
    background: none;
    box-shadow: none;
    padding: 0;
    margin-bottom: 20px;
}
.int-filter.ocf-theme-light .ocf-selected-discard{
    border-radius: 8px;
    background-color: var(--cl-semi-light);
    color: var(--cl-brown);
    font-size: 14px;
    padding: 10px;
}
.int-filter.ocf-theme-light .ocf-selected-filter{
    background: none;
}
.int-filter .ocf-scroll-y::-webkit-scrollbar {
    height: 2px;
    width: 2px;
}
.int-filter .ocf-scroll-y::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: #F5F9FB;
}
.int-filter .ocf-scroll-y::-webkit-scrollbar-track:hover { background-color: #F5F9FB; }
.int-filter .ocf-scroll-y::-webkit-scrollbar-track:active { background-color: #F5F9FB; }
.int-filter .ocf-scroll-y::-webkit-scrollbar-thumb {
    border-radius: 2px;
    background-color: #BDCCD4;
}
.int-filter .ocf-scroll-y::-webkit-scrollbar-thumb:hover { background-color: #BDCCD4; }
.int-filter .ocf-scroll-y::-webkit-scrollbar-thumb:active { background-color: #BDCCD4; }
.int-filter .ocf-scroll-y:hover::-webkit-scrollbar{ width: 2px; }

.int-filter.ocf-theme-light .ocf-search-btn-popover.int-btn-search-popover:hover,
.int-filter .int-filter-btngroup .int-btn.int-btn-secondary:hover{
    background-color: var(--cl-semi-light);
}
.int-filter.ocf-theme-light .ocf-filter{
    margin-bottom: 20px;
    position: relative;
}
.int-filter .ocf-value-input-checkbox::before{
    border-radius: 4px;
}
.int-filter .ocf-value:focus:not(:active) .ocf-value-input::before{
    border-color: var(--cl-accent-dim);
}
.int-filter .ocf-value:not(.ocf-disabled):active .ocf-value-input::before{
    background-color: var(--cl-accent-dim);
}
.int-filter .ocf-selected .ocf-value-input::before{
    background-color: var(--cl-accent);
    border-color: var(--cl-accent);
}
.int-filter .ocf-popover{
    border-radius: 24px;
}
.int-filter.ocf-theme-light .ocf-active.ocf-dropdown .ocf-filter-header{
    background-color: var(--cl-white);
}
.int-filter .ocf-dropdown.ocf-active .ocf-filter-discard{
    position: absolute;
    right: 40px;
}
.int-filter .ocf-scroll-y:hover{
    padding-right: 10px !important;
}
/* .int-filter .ocf-noUi-value{
    top: -70px;
    font-size: 16px;
    font-weight: 400;
    color: var(--cl-brown);
} */
.int-filter .ocf-filter-name, .int-filter .ocf-active-label{
    font-size: 16px;
    color: var(--cl-brown-light);
    font-weight: 400;
}
.int-filter .ocf-value-list-body .ocf-value.ocf-checkbox{
    min-height: 24px;
    font-size: 16px;
    align-items: center;
}
.int-filter.ocf-theme-light .ocf-footer{
    background-color: var(--cl-surface);
    padding-left: 0;
    padding-right: 0;
    box-shadow: -10px -10px 10px 0 var(--cl-surface);
    position: static;
    padding-left: 10px;
    padding-right: 10px;
}
.int-filter.ocf-theme-light .ocf-filter-header, 
.int-filter.ocf-theme-light .ocf-module-page-header{
    text-transform: none;
}
.int-filter .int-slider-values-wrap{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.int-filter .ocf-noUi-pips{
    display: none;
}
.int-filter .int-slider-values-wrap .int-slider-value{
    font-size: 16px;
    font-weight: 400;
}
.int-catalog-bottom{ margin-top: 80px; }
.int-wishlist{
    margin-bottom: 100px;
}
.int-catalog-grid.int-type-list .int-product-card .int-product-card-image{
    margin: 15px 11px;
    height: 150px;
    width: 150px;
}
/* --- end filter --- */

@media (min-width: 767px) {
    .int-catalog-grid.int-type-list{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .int-catalog-grid.int-type-list .int-product-card .int-product-info{
        height: 100%;
        width: 100%;
        padding: 30px;
    }
    .int-catalog-grid.int-type-list .int-product-card{
        flex-direction: row;
        padding-bottom: 0;
        gap: 30px;
        gap: 10px;
        align-items: stretch;
        justify-content: stretch;
        height: 180px;
    }
    .int-catalog-grid.int-type-list .int-product-card .int-product-info{
        display: grid;
        grid-template-areas:'a a'
                            'b c';
        height: 100%;
    }
    .int-catalog-grid.int-type-list .int-product-card .int-product-card-title{
        grid-area: a;
        text-align: start;
    }
    
    .int-catalog-grid.int-type-list .int-product-card .int-product-card-optionsgroup{
        grid-area: b;
        width: 100%;
        justify-content: start;
        align-items: center;
    }
    .int-catalog-grid.int-type-list .int-product-card .int-price{
        margin-right: 20px;
        display: flex;
        align-items: center;
    }
    .int-catalog-grid.int-type-list .int-product-card .int-product-card-cart-btn{
        width: 56px;
    }
    .int-catalog-grid.int-type-list .int-product-card-pricegroup button,
    .int-catalog-grid.int-type-list .int-product-card-pricegroup .int-price{
        height: 52px;
    }
    .int-catalog-grid.int-type-list .int-product-card .int-product-card-pricegroup{
        grid-area: c;
        width: auto;
        justify-content: end;
        align-items: end;
    }
    .int-catalog-grid.int-type-list .int-product-card .int-product-card-image{
        height: 157px;
        width: 157px;
        margin: 11px 6px;
    }
}

@media (max-width: 1200px) {
    .int-catalog-grid.four-row{
        grid-template-columns: repeat(3, 1fr);
    }
    .int-special-wrap .int-catalog-top-control{
        justify-content: end;
    }
    .int-special-wrap .int-catalog-top{
        margin-top: 40px;
        margin-bottom: 40px;
    }
    .int-special-wrap .int-catalog-grid{ margin-bottom: 80px; }

    .int-filter .ocf-body{
        margin: 0;
    }
    .int-catalog-left-fade{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: var(--cl-fade);
        z-index: 9999;
    }
    .int-filter.ocf-theme-light .ocf-footer{
        display: block;
        position: static;
        margin: 0; 
        box-shadow: none;
    }
    .int-catalog-filter-btn{
        display: flex;
    }
    .int-catalog{
        flex-direction: column;
    }
    .int-catalog-right, .int-catalog-left{
        max-width: unset;
        width: 100%;
    }
    .int-catalog-left{
        position: fixed;
        left: -110%;
        height: 100%;
        background-color: var(--cl-white);
        padding: 0 15px;
        transition: left 300ms ease-in-out;
        z-index: 10000;
    }
    .int-catalog-left.opened{
        left: 0;
    }
    .int-filter .ocf-popover{
        display: none !important;
    }
    .int-filter .ocf-body{
        height: calc(100dvh - 220px);
        max-height: calc(100dvh - 220px);
    }
    .int-catalog-left .int-catalog-close-button{
        display: block;
        padding: 0;
        height: 24px;
        width: 24px;
        background: none;
        outline: none;
        border: none;
        top: 50px;
    }
    .int-catalog-left .int-filter .ocf-footer{
        padding: 15px 5px;
        background-color: var(--cl-white);
    }
    .int-catalog-grid{
        gap: 16px;
    }
    .int-catalog-top{
        flex-wrap: wrap;
    }
    .int-wishlist-top h1,
    .int-catalog-top h1{
        font-size: 26px;
        width: 100%;
        margin-top: 0;
        margin-bottom: 24px;
    }
    .int-toggleview-btngroup{ order: 10; }
    .int-compare-btn{ 
        order: 9; 
        margin-left: auto;
    }

    .int-catalog-top .int-btngroup .int-btn{
        font-size: 14px;
        padding: 10px 20px;
    }
    .int-catalog-top .int-catalog-top-control{
        /* justify-content: space-between; */
        width: 100%;
    }
    .int-catalog #column-left{
        position: static;
        top: unset;
    }
    .int-catalog-left{
        top: 0;
        border-radius: 0 10px 10px 0;
        padding-top: 60px;
        max-width: 375px;
    }
    .int-catalog-bottom{ margin-top: 60px; }
    .int-wishlist{
        margin-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .int-catalog-left-fade{ display: none !important; }
    .int-catalog-left .int-catalog-close-button{
        top: 10px;
    }
    .int-catalog-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    .int-filter .ocf-filter-description{
        display: none;
    }
    .int-catalog-top,
    .int-wishlist-top{
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: start;
        justify-content: start;
    }
    .int-manufacturer-grid-top .int-sort-btngroup .int-droplist-wrap{
        width: 100%;
    }
    .int-manufacturer-grid-top .int-sort-btngroup{
        display: flex;
        flex-direction: column;
    }
    .int-sort-btngroup{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }
    .int-catalog-top .int-catalog-top-control{
        flex-direction: column;
        width: 100%;
        align-items: stretch;
    }
    .int-wishlist-top .int-catalog-top-control{
        flex-direction: column;
        width: 100%;
    }
    .int-wishlist-top .int-sort-btngroup {
        grid-template-columns: 1fr;
    }
    .int-catalog-top .int-btngroup .int-btn,
    .int-catalog-top .int-btngroup .int-droplist-wrap{
        width: 100%;
    }
    .int-catalog-top .int-btngroup .int-droplist-wrap{
        order: -1;
    }
    .int-toggleview-btngroup{
        display: none;
    } 
    .int-catalog-tag{
        padding: 6px 8px;
        font-size: 14px;
    }
    .int-catalog-top h1,
    .int-wishlist-top h1{
        font-size: 20px;
        width: 100%;
        text-align: center;
    }
    .int-compare-btn{
        margin-left: 0;
    }
    .int-filter .ocf-body{
        margin-left: -15px;
        margin-right: -15px;
    }
    .int-catalog-left{
        border-radius: 0;
        top: var(--v-header);
        padding-top: 14px;
        max-width: unset;
        width: 100%;
    }
    .int-catalog-grid.four-row{
        grid-template-columns: repeat(2, 1fr);
    }
    .int-special-wrap .int-sort-btngroup{
        display: flex;
    }
    .int-special-wrap .int-catalog-top{
        margin-top: 30px;
        margin-bottom: 24px;
    }
    .int-special-wrap .int-catalog-grid{ margin-bottom: 60px; }
    .int-catalog-bottom{ margin-top: 40px; }
    .int-filter .ocf-body{
        height: calc(100dvh - 250px);
        max-height: calc(100dvh - 250px);
    }
    .int-wishlist{
        margin-bottom: 60px;
    }
    .int-special-wrap .int-catalog-top-control #compare-total{
        order: 10; 
    }
}

@media (max-width: 520px) {
    .int-catalog-grid.four-row,
    .int-catalog-grid{
        display: flex;
        flex-direction: column;
    }
}