

.cart-page{
width:95%;
max-width:1100px;
margin:auto;
padding:40px 0;
}

.cart-title{
font-size:34px;
font-weight:800;
margin-bottom:25px;
color:#111827;
display:flex;
align-items:center;
gap:10px;
}
/* HEADER */

.header{
position:fixed;
top:0;
right:0;
left:0;
height:75px;
background:rgba(255,255,255,.95);
backdrop-filter:blur(12px);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 25px;
box-shadow:0 4px 20px rgba(0,0,0,.06);
z-index:999;
}

.logo{
font-size:28px;
font-weight:800;
color:#111827;
}

.home-btn{
width:46px;
height:46px;
border-radius:14px;
background:#ff7a00;
color:white;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-size:22px;
transition:.3s;
}

.home-btn:hover{
transform:translateY(-3px);
}

body{
padding-top:90px;
}

/* MOBILE */

@media(max-width:768px){

.header{
height:68px;
padding:0 15px;
}

.logo{
font-size:22px;
}

.home-btn{
width:40px;
height:40px;
font-size:18px;
border-radius:12px;
}

body{
padding-top:80px;
}

}
/* items */

.cart-items{
display:flex;
flex-direction:column;
gap:18px;
}

/* card */

.cart-card{
background:#fff;
border-radius:22px;
padding:20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
box-shadow:0 5px 20px rgba(0,0,0,0.06);
border:1px solid #eee;
}

/* left side */

.cart-left{
display:flex;
align-items:center;
gap:18px;
flex:1;
}

/* image */

.cart-left img{
width:110px;
height:110px;
object-fit:contain;
background:#f8fafc;
padding:10px;
border-radius:16px;
}

/* info */

.cart-info{
display:flex;
flex-direction:column;
gap:10px;
}

.cart-info h3{
font-size:22px;
color:#111827;
}

.cart-info p{
font-size:22px;
font-weight:800;
color:#ff7a00;
}

/* quantity */

.qty-box{
display:flex;
align-items:center;
gap:12px;
background:#f8fafc;
padding:10px 15px;
border-radius:14px;
}

.qty-btn{
width:38px;
height:38px;
border:none;
background:#fff;
border-radius:10px;
font-size:20px;
cursor:pointer;
font-weight:bold;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
transition:.2s;
}

.qty-btn:hover{
background:#ff7a00;
color:white;
}

.qty{
font-size:20px;
font-weight:800;
min-width:30px;
text-align:center;
}

/* remove */

.remove-btn{
background:#ef4444;
color:white;
border:none;
padding:13px 18px;
border-radius:12px;
cursor:pointer;
font-weight:700;
font-size:14px;
transition:.3s;
}

.remove-btn:hover{
background:#dc2626;
}

/* footer */

.cart-footer{
margin-top:25px;
background:#fff;
padding:25px;
border-radius:22px;
box-shadow:0 5px 20px rgba(0,0,0,0.06);
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:15px;
}

.total{
font-size:28px;
font-weight:800;
color:#111827;
}

/* buttons */

.footer-buttons{
display:flex;
gap:12px;
}

.checkout-btn,
.clear-btn{
padding:14px 24px;
border-radius:14px;
font-weight:700;
text-decoration:none;
border:none;
cursor:pointer;
font-size:14px;
transition:.3s;
}

.checkout-btn{
background:#10b981;
color:white;
}

.checkout-btn:hover{
background:#059669;
}

.clear-btn{
background:#111827;
color:white;
}

.clear-btn:hover{
background:#000;
}

/* empty */

.empty{
background:white;
padding:70px 20px;
border-radius:22px;
text-align:center;
font-size:24px;
font-weight:800;
color:#6b7280;
}

/* MOBILE */

@media(max-width:768px){

.cart-title{
font-size:26px;
}

.cart-card{
flex-direction:column;
align-items:flex-start;
padding:18px;
}

.cart-left{
width:100%;
}

.cart-left img{
width:90px;
height:90px;
}

.cart-info h3{
font-size:18px;
}

.cart-info p{
font-size:18px;
}

.qty-box{
width:100%;
justify-content:center;
}

.remove-btn{
width:100%;
}

.cart-footer{
flex-direction:column;
align-items:stretch;
}

.footer-buttons{
width:100%;
flex-direction:column;
}

.checkout-btn,
.clear-btn{
width:100%;
text-align:center;
}

.total{
text-align:center;
font-size:24px;
}

}

