/*==========================
    Overlay
==========================*/

.cart-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:99998;
}

.cart-overlay.active{
    opacity:1;
    visibility:visible;
}

/*==========================
    Drawer
==========================*/

.cart-sidebar{
    position:fixed;
    top:0;
    right:-450px;
    width:420px;
    max-width:100%;
    height:100vh;
    background:#fff;
    transition:.35s ease;
    z-index:99999;
    overflow-y:auto;
    box-shadow:-10px 0 35px rgba(0,0,0,.15);
}

.cart-sidebar.active{
    right:0;
}

.custom-cart-drawer{
    display:flex;
    flex-direction:column;
    min-height:100%;
}

/*==========================
 Header
==========================*/

.drawer-header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:22px;

    border-bottom:1px solid #ececec;

}

.drawer-header h2{

    margin:0;

    font-size:24px;

    font-weight:600;

}

.drawer-close{

    font-size:34px;

    cursor:pointer;

    line-height:1;

}

/*==========================
Body
==========================*/

.drawer-body{

    padding:0;

}

/*==========================
Product
==========================*/

.drawer-item{

    display:flex;

    gap:18px;

    position:relative;

    padding:20px;

    border-bottom:1px solid #f2f2f2;

}

/*==========================
Image
==========================*/

.drawer-image{

    width:90px;

    flex-shrink:0;

}

.drawer-image img{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:6px;

    display:block;

}

/*==========================
Details
==========================*/

.drawer-details{

    flex:1;

    padding-right:25px;

}

.drawer-details h3{

    margin:0 0 10px;

    font-size:17px;

    font-weight:600;

    line-height:1.4;

}

.drawer-details h3 a{

    color:#222;

    text-decoration:none;

}

.drawer-details h3 a:hover{

    color:#b8860b;

}

.drawer-price{

    margin-bottom:15px;

    color:#777;

    font-size:15px;

}

/*==========================
Quantity
==========================*/

.drawer-qty{

    display:flex;

    align-items:center;

    width:110px;

    height:40px;

    border:1px solid #ddd;

    border-radius:4px;

    overflow:hidden;

}

.drawer-qty button{

    width:36px;

    height:40px;

    border:none;

    background:#fff;

    cursor:pointer;

    font-size:20px;

}

.drawer-qty button:hover{

    background:#f7f7f7;

}

.drawer-qty input{

    width:38px;

    border:none;

    text-align:center;

    font-size:15px;

    outline:none;

}

/*==========================
Total
==========================*/

.drawer-total{

    position:absolute;

    right:20px;

    bottom:25px;

    font-weight:700;

    font-size:17px;

}

/*==========================
Remove
==========================*/

.drawer-remove{

    position:absolute;

    top:15px;

    right:15px;

    color:#999;

    text-decoration:none;

    font-size:24px;

    line-height:1;

}

.drawer-remove:hover{

    color:red;

}

/*==========================
Subtotal
==========================*/

.drawer-summary{

    padding:25px;

    border-top:1px solid #eee;

}

.drawer-subtotal{

    display:flex;

    justify-content:space-between;

    margin-bottom:20px;

    font-size:22px;

    font-weight:600;

}

/*==========================
Buttons
==========================*/

.drawer-buttons{

    display:flex;

    gap:10px;

}

.drawer-buttons a{

    flex:1;

    text-align:center;

    text-decoration:none;

    padding:15px;

    font-weight:600;

    transition:.3s;

}

.drawer-view-cart{

    border:1px solid #222;

    color:#222;

    background:#fff;

}

.drawer-view-cart:hover{

    background:#222;

    color:#fff;

}

.drawer-checkout{

    background:#d4af37;

    color:#fff;

}

.drawer-checkout:hover{

    background:#b9911d;

}

/*==========================
Empty Cart
==========================*/

.drawer-empty{

    text-align:center;

    padding:80px 20px;

    font-size:18px;

}

/*==========================
Scrollbar
==========================*/

.cart-sidebar::-webkit-scrollbar{

    width:6px;

}

.cart-sidebar::-webkit-scrollbar-thumb{

    background:#ccc;

    border-radius:20px;

}

@media(max-width:576px){

.cart-sidebar{

width:100%;

}

.drawer-item{

gap:12px;

padding:15px;

}

.drawer-image{

width:75px;

}

.drawer-image img{

width:75px;

height:75px;

}

.drawer-details h3{

font-size:15px;

}

.drawer-total{

position:static;

margin-top:10px;

}

.drawer-buttons{

flex-direction:column;

}

}