/* =====================================
   KAREEM STORE CART DESIGN
===================================== */


*{

box-sizing:border-box;
font-family:Tahoma,Arial,sans-serif;

}



body{

margin:0;

background:#f8f2ea;

color:#3b2415;

}





/* HEADER */

.cart-header{

height:90px;

background:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 6%;

box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.cart-header h1{

color:#8b5e34;

font-size:32px;

}



.cart-header a{

background:#8b5e34;

color:white;

padding:12px 25px;

border-radius:30px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.cart-header a:hover{

background:#d89b45;

}





/* CART AREA */


main{

width:90%;

max-width:1100px;

margin:40px auto;

}





#cart-container{

display:flex;

flex-direction:column;

gap:20px;

}





/* PRODUCT ITEM */


.cart-item{

background:white;

border-radius:25px;

padding:20px;

display:flex;

align-items:center;

gap:25px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.cart-item img{

width:120px;

height:120px;

object-fit:cover;

border-radius:20px;

}




.cart-info{

flex:1;

}



.cart-info h3{

color:#8b5e34;

font-size:22px;

margin-bottom:10px;

}



.cart-info p{

font-size:20px;

font-weight:bold;

color:#d88920;

}





/* QUANTITY */


.quantity-box{

display:flex;

align-items:center;

gap:15px;

margin-top:15px;

}



.quantity-box button{

width:35px;

height:35px;

border:none;

border-radius:50%;

background:#8b5e34;

color:white;

font-size:20px;

cursor:pointer;

}



.quantity-box span{

font-size:22px;

font-weight:bold;

}





/* DELETE BUTTON */


.delete-btn{

background:#e63946;

border:none;

color:white;

padding:12px 20px;

border-radius:25px;

cursor:pointer;

font-weight:bold;

}




.delete-btn:hover{

background:#b91c2b;

}





/* TOTAL */


.cart-total{

background:white;

margin-top:35px;

padding:30px;

border-radius:30px;

text-align:center;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.cart-total h2{

font-size:30px;

color:#8b5e34;

}



.cart-total button{

margin-top:20px;

width:80%;

height:55px;

border:none;

border-radius:35px;

background:#25D366;

color:white;

font-size:20px;

font-weight:bold;

cursor:pointer;

}



.cart-total button:hover{

transform:translateY(-3px);

}





/* EMPTY CART */


.empty-cart{

background:white;

padding:50px;

text-align:center;

border-radius:30px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.empty-cart a{

display:inline-block;

margin-top:20px;

background:#8b5e34;

color:white;

padding:15px 30px;

border-radius:30px;

text-decoration:none;

}





/* MOBILE */


@media(max-width:700px){


.cart-header{

flex-direction:column;

height:auto;

gap:15px;

padding:20px;

}



.cart-header h1{

font-size:25px;

}



.cart-item{

flex-direction:column;

text-align:center;

}



.cart-item img{

width:180px;

height:180px;

}



.cart-total button{

width:100%;

}



}