body{

background:#f5f5f5;

font-family:Arial;

}

.checkout-title{

text-align:center;

margin:40px 0;

font-size:40px;

}

.checkout-container{

width:90%;

margin:auto;

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:start;

}

.shipping{

background:white;

padding:40px;

border-radius:15px;

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

}

.shipping h2{

margin-bottom:25px;

}

.shipping form{

display:flex;

flex-direction:column;

gap:18px;

}

.shipping input,

.shipping textarea{

padding:15px;

border:1px solid #ddd;

border-radius:10px;

font-size:16px;

}

.shipping textarea{

height:120px;

resize:none;

}

.shipping button{

padding:18px;

background:#111;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

font-size:17px;

transition:.3s;

}

.shipping button:hover{

background:#b88a44;

}

.summary{

background:white;

padding:35px;

border-radius:15px;

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

position:sticky;

top:30px;

}

.checkout-item{

display:flex;

justify-content:space-between;

margin:18px 0;

}

.price-row{

display:flex;

justify-content:space-between;

margin:20px 0;

font-size:18px;

}

.total{

font-size:24px;

font-weight:bold;

}

@media(max-width:900px){

.checkout-container{

grid-template-columns:1fr;

}

.summary{

position:static;

}

}
.checkout-product{

display:flex;

align-items:center;

gap:15px;

padding:18px 0;

border-bottom:1px solid #eee;

}

.checkout-product img{

width:85px;

height:100px;

object-fit:cover;

border-radius:10px;

}

.checkout-info{

flex:1;

}

.checkout-info h3{

font-size:18px;

margin-bottom:8px;

}

.checkout-info p{

color:#777;

}

.checkout-price{

font-size:18px;

font-weight:bold;

}
.coupon-box{

display:flex;

gap:10px;

margin-top:10px;

}

.coupon-box input{

flex:1;

}

.coupon-box button{

padding:15px 20px;

background:#111;

color:white;

border:none;

border-radius:10px;

cursor:pointer;

transition:.3s;

}

.coupon-box button:hover{

background:#b88a44;

}