/* ======================================================
   SEAN B SHOP
   SHOPPING CART PAGE
   assets/css/pages/cart.css
====================================================== */


/* ======================================================
   PAGE WRAPPER
====================================================== */

.cart-page{

    background:#f5f7fa;

    min-height:100vh;

    padding:45px 0;

}



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


.cart-title{

    margin-bottom:30px;

}



.cart-title h1{

    margin:0;

    color:#0b1f3a;

    font-size:32px;

    font-weight:900;

}



.cart-title p{

    margin-top:8px;

    color:#64748b;

    font-size:14px;

}





/* ======================================================
   CART LAYOUT
====================================================== */


.cart-layout{

    display:grid;

    grid-template-columns:1fr 350px;

    gap:25px;

    align-items:start;

}





/* ======================================================
   CART PRODUCTS
====================================================== */


.cart-products{

    background:#fff;

    border-radius:18px;

    padding:20px;

    border:1px solid #e8edf3;

}





.cart-item{

    display:grid;

    grid-template-columns:100px 1fr auto;

    align-items:center;

    gap:20px;

    padding:20px 0;

    border-bottom:1px solid #edf1f5;

}



.cart-item:last-child{

    border-bottom:none;

}





/* ======================================================
   PRODUCT IMAGE
====================================================== */


.cart-image{

    width:100px;

    height:100px;

    background:#f5f7fa;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

}



.cart-image img{

    width:100%;

    height:100%;

    object-fit:contain;

    padding:10px;

}





/* ======================================================
   PRODUCT INFO
====================================================== */


.cart-info h3{

    margin:0 0 8px;

    color:#0b1f3a;

    font-size:16px;

    font-weight:800;

}



.cart-info p{

    color:#e60000;

    font-weight:800;

    margin:0 0 12px;

}






/* ======================================================
   QUANTITY
====================================================== */


.quantity-box input{

    width:75px;

    height:35px;

    border:1px solid #dbe3ec;

    border-radius:8px;

    text-align:center;

    outline:none;

    font-weight:700;

}



.quantity-box input:focus{

    border-color:#e60000;

}






/* ======================================================
   ITEM TOTAL
====================================================== */


.cart-total{

    text-align:right;

}



.cart-total strong{

    display:block;

    color:#0b1f3a;

    font-size:16px;

    margin-bottom:15px;

}



.remove-cart{

    width:35px;

    height:35px;

    border:none;

    border-radius:50%;

    background:#fff1f1;

    color:#e60000;

    cursor:pointer;

}





.remove-cart:hover{

    background:#e60000;

    color:white;

}





/* ======================================================
   UPDATE BUTTON
====================================================== */


.update-cart{

    margin-top:20px;

    height:42px;

    padding:0 25px;

    border:none;

    border-radius:25px;

    background:#0b1f3a;

    color:#fff;

    font-size:13px;

    font-weight:800;

    cursor:pointer;

}



.update-cart:hover{

    background:#e60000;

}





/* ======================================================
   CART SUMMARY
====================================================== */


.cart-summary{

    background:#fff;

    border-radius:18px;

    padding:25px;

    border:1px solid #e8edf3;

    position:sticky;

    top:130px;

}





.cart-summary h2{

    margin:0 0 20px;

    color:#0b1f3a;

    font-size:22px;

    font-weight:900;

}





.summary-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #edf1f5;

    font-size:14px;

}



.summary-row span{

    color:#64748b;

}



.summary-row strong{

    color:#0b1f3a;

}





.summary-total{

    display:flex;

    justify-content:space-between;

    margin:20px 0;

    font-size:18px;

    font-weight:900;

}



.summary-total strong{

    color:#e60000;

}





/* ======================================================
   BUTTONS
====================================================== */


.checkout-btn{

    width:100%;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#e60000;

    color:white;

    border-radius:25px;

    text-decoration:none;

    font-size:14px;

    font-weight:800;

    transition:.25s ease;

}



.checkout-btn:hover{

    background:#0b1f3a;

}





.continue-shopping{

    display:block;

    text-align:center;

    margin-top:15px;

    color:#0b1f3a;

    font-size:13px;

    font-weight:700;

    text-decoration:none;

}





/* ======================================================
   EMPTY CART
====================================================== */


.empty-cart{

    background:#fff;

    border-radius:18px;

    padding:70px 20px;

    text-align:center;

    border:1px solid #e8edf3;

}



.empty-cart i{

    font-size:60px;

    color:#cbd5e1;

}



.empty-cart h2{

    color:#0b1f3a;

    margin:20px 0 10px;

}



.empty-cart p{

    color:#64748b;

}



.empty-cart a{

    display:inline-flex;

    margin-top:20px;

    background:#e600red;

    background:#e60000;

    color:white;

    padding:12px 25px;

    border-radius:25px;

    font-weight:800;

    text-decoration:none;

}







/* ======================================================
   TABLET
====================================================== */


@media(max-width:1100px){


.cart-layout{

    grid-template-columns:1fr;

}



.cart-summary{

    position:relative;

    top:auto;

}


}






/* ======================================================
   MOBILE
====================================================== */


@media(max-width:768px){


.cart-page{

    padding:30px 0;

}



.cart-item{

    grid-template-columns:75px 1fr;

    gap:15px;

}



.cart-image{

    width:75px;

    height:75px;

}



.cart-total{

    grid-column:2;

    text-align:left;

}



.cart-products{

    padding:15px;

}



.cart-title h1{

    font-size:26px;

}



}