/*==================================================
SHOP SIDEBAR
==================================================*/

.shop-sidebar{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/*==================================================
WIDGET
==================================================*/

.shop-widget{

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:10px;

    overflow:hidden;

}

/*==================================================
TITLE
==================================================*/

.shop-widget__title{

    margin:0;

    padding:18px 22px;

    font-size:20px;

    font-weight:700;

    color:#082C6C;

    border-bottom:1px solid #ECECEC;

}

/*==================================================
CATEGORY LIST
==================================================*/

.shop-categories{

    list-style:none;

    margin:0;

    padding:0;

}

.shop-categories li{

    border-bottom:1px solid #F2F2F2;

}

.shop-categories li:last-child{

    border-bottom:none;

}

.shop-categories a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 22px;

    text-decoration:none;

    color:#444;

    transition:.25s;

}

.shop-categories a:hover{

    background:#F8FAFD;

    color:#082C6C;

    padding-left:28px;

}

.shop-categories a.active{

    background:#082C6C;

    color:#fff;

}

.shop-categories a span:last-child{

    min-width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#F4F4F4;

    font-size:13px;

    font-weight:700;

}

.shop-categories a.active span:last-child{

    background:#F5B51D;

    color:#082C6C;

}

/*==================================================
PRICE FILTER
==================================================*/

.price-filter{

    display:flex;

    flex-direction:column;

    gap:14px;

    padding:20px;

}

.price-filter input{

    width:100%;

    height:46px;

    border:1px solid #DDD;

    border-radius:6px;

    padding:0 14px;

    font-size:15px;

}

.price-filter input:focus{

    outline:none;

    border-color:#082C6C;

}

.price-filter button{

    height:48px;

    border:none;

    border-radius:6px;

    background:#082C6C;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.price-filter button:hover{

    background:#F5B51D;

    color:#082C6C;

}

/*==================================================
    SHOP SIDEBAR — TABLET
==================================================*/

@media (max-width: 992px){

    .shop__layout{

        grid-template-columns:1fr;

        gap:30px;

    }

    .shop-sidebar{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:20px;

    }

}


/*==================================================
    SHOP SIDEBAR — SMALL TABLET
==================================================*/

@media (max-width: 768px){

    .shop-sidebar{

        grid-template-columns:1fr;

        gap:20px;

    }

    .shop-widget__title{

        padding:16px 20px;

        font-size:18px;

    }

    .shop-categories a{

        padding:14px 20px;

    }

    .shop-categories a:hover{

        padding-left:25px;

    }

    .price-filter{

        padding:18px;

    }

}


/*==================================================
    SHOP SIDEBAR — MOBILE
==================================================*/

@media (max-width:576px){

    .shop-sidebar{

        gap:16px;

    }

    .shop-widget{

        border-radius:8px;

    }

    .shop-widget__title{

        padding:15px 18px;

        font-size:17px;

    }

    .shop-categories a{

        padding:13px 18px;

        font-size:14px;

    }

    .shop-categories a:hover{

        padding-left:23px;

    }

    .shop-categories a span:last-child{

        min-width:26px;

        height:26px;

        font-size:12px;

    }

    .price-filter{

        padding:16px;

        gap:12px;

    }

    .price-filter input{

        height:44px;

        font-size:14px;

    }

    .price-filter button{

        height:46px;

        font-size:14px;

    }

}


/*==================================================
    SHOP SIDEBAR — SMALL MOBILE
==================================================*/

@media (max-width:400px){

    .shop-widget__title{

        padding:14px 16px;

        font-size:16px;

    }

    .shop-categories a{

        padding:12px 16px;

        font-size:13px;

    }

    .price-filter{

        padding:14px;

    }

}