.wbf-wrapper{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

/* =========================
   Sidebar
========================= */

.wbf-sidebar{
    width:260px;
    background:#000;
    color:#fff;
    border:1px solid #333;
    padding:20px;
    border-radius:8px;
}

.wbf-sidebar h3{
    margin:0 0 20px;
    font-size:20px;
    color:#fff;
    border-bottom:1px solid #333;
    padding-bottom:10px;
}

.wbf-item{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
    cursor:pointer;
    color:#fff;
    font-size:15px;
}

.wbf-item input{
    margin:0;
}

.wbf-item span{
    color:#aaa;
    font-size:13px;
}

/* =========================
   Products
========================= */

.wbf-products{
    flex:1;
    transition:.3s;
}

/* دو ستونه کردن محصولات */

.wbf-products ul.products{
    display:grid !important;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    margin:0 !important;
    padding:0 !important;
}

.wbf-products ul.products li.product{
    width:100% !important;
    float:none !important;
    margin:0 !important;
}

.wbf-products ul.products::before,
.wbf-products ul.products::after{
    display:none !important;
}

/* متن نبود محصول */

.wbf-empty{
    text-align:center;
    padding:40px;
    font-size:18px;
    color:#666;
}

/* =========================
   Responsive
========================= */

@media(max-width:768px){

    .wbf-wrapper{
        flex-direction:column;
    }

    .wbf-sidebar{
        width:100%;
    }

    .wbf-products ul.products{
        grid-template-columns:1fr;
    }

}
کد رو کامل بنویس