<section class="py-20 bg-light overflow-hidden">
<div class="container">
<div class="p-8 p-lg-20 bg-white">
<h2 class="mb-8 mb-md-20" >Your cart</h2>
<div class="row align-items-center">
<div class="col-12 col-xl-8 mb-8 mb-xl-0">
<div class="d-none d-lg-flex row">
<div class="col-12 col-lg-6">
<h4 class="mb-6 text-secondary" style="font-size: 16px;" >Description</h4>
</div>
<div class="col-12 col-lg-2">
<h4 class="mb-6 text-secondary" style="font-size: 16px;" >Price</h4>
</div>
<div class="col-12 col-lg-2 text-center">
<h4 class="mb-6 text-secondary" style="font-size: 16px;" >Quantity</h4>
</div>
<div class="col-12 col-lg-2 text-end">
<h4 class="mb-6 text-secondary" style="font-size: 16px;" >Subtotal</h4>
</div>
</div>
<div class="mb-12 py-6 border-top border-bottom">
<div class="row align-items-center mb-6 mb-md-3">
<div class="col-12 col-md-8 col-lg-6 mb-6 mb-md-0">
<div class="row align-items-center">
<div class="col-12 col-md-4 mb-3">
<div class="d-flex align-items-center justify-content-center bg-light" style="width: 96px; height: 128px;"><img class="img-fluid" style="object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt=""/></div>
</div>
<div class="col-8">
<h3 class="mb-2 lead fw-bold" >BRILE water filter carafe</h3>
<p class="mb-0 text-secondary" >Maecenas 0.7 commodo sit</p>
</div>
</div>
</div>
<div class="d-none d-lg-block col-lg-2">
<p class="mb-0 lead fw-bold text-info" >$29.89</p><span class="small text-secondary text-decoration-line-through" >$33.69</span>
</div>
<div class="col-auto col-md-2">
<div class="d-inline-flex align-items-center px-4 fw-bold text-secondary border rounded-2">
<button class="btn px-0 py-2">
<svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.35">
<rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect>
</g>
</svg>
</button>
<input class="form-control px-2 py-4 text-center text-md-end border-0" style="width: 48px;" type="number" placeholder="1"/>
<button class="btn px-0 py-2">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.35">
<rect x="5" width="2" height="12" fill="currentColor"></rect>
<rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect>
</g>
</svg>
</button>
</div>
</div>
<div class="col-auto col-md-2 text-end">
<p class="lead fw-bold text-info" >$29.89</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-12 col-md-8 col-lg-6 mb-6 mb-md-0">
<div class="row align-items-center">
<div class="col-12 col-md-4 mb-3">
<div class="d-flex align-items-center justify-content-center bg-light" style="width: 96px; height: 128px;"><img class="img-fluid" style="object-fit: contain;" src="yofte-assets/images/basketball.png" alt=""/></div>
</div>
<div class="col-8">
<h3 class="mb-2 lead fw-bold" >Nike basketball ball</h3>
<p class="mb-0 text-secondary" >Maecenas 0.7 commodo sit</p>
</div>
</div>
</div>
<div class="d-none d-lg-block col-lg-2">
<p class="mb-0 lead fw-bold text-info" >$29.89</p><span class="small text-secondary text-decoration-line-through" >$33.69</span>
</div>
<div class="col-auto col-md-2">
<div class="d-inline-flex align-items-center px-4 fw-bold text-secondary border rounded-2">
<button class="btn px-0 py-2">
<svg width="12" height="2" viewbox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.35">
<rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect>
</g>
</svg>
</button>
<input class="form-control px-2 py-4 text-center text-md-end border-0" style="width: 48px;" type="number" placeholder="1"/>
<button class="btn px-0 py-2">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.35">
<rect x="5" width="2" height="12" fill="currentColor"></rect>
<rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect>
</g>
</svg>
</button>
</div>
</div>
<div class="col-auto col-md-2 text-end">
<p class="lead fw-bold text-info" >$29.89</p>
</div>
</div>
</div>
<div class="d-flex flex-wrap flex-md-nowrap align-items-center mb-lg-n4"><span class="flex-shrink-0 me-12 mb-4 mb-lg-0 fw-bold" >Apply discount code:</span>
<input class="form-control me-6 mb-4 mb-lg-0 px-8 py-4 fw-bold border" type="text" placeholder="SUMMER30X"/><a class="flex-shrink-0 btn btn-sm btn-dark" href="#" >Apply</a>
</div>
</div>
<div class="col-12 col-xl-4">
<div class="p-6 p-md-12 bg-info">
<h3 class="mb-6 text-white" >Cart totals</h3>
<div class="d-flex mb-8 align-items-center justify-content-between pb-5 border-bottom border-info-light"><span class="text-light" >Subtotal</span><span class="lead fw-bold text-white" >$89.67</span></div>
<h4 class="mb-2 lead fw-bold text-white" >Shipping</h4>
<div class="d-flex mb-2 justify-content-between align-items-center"><span class="text-light" >Next day</span><span class="lead fw-bold text-white" >$11.00</span></div>
<div class="d-flex mb-10 justify-content-between align-items-center"><span class="text-light" >Shipping to United States</span><span class="lead fw-bold text-white" >-</span></div>
<div class="d-flex mb-10 justify-content-between align-items-center"><span class="lead fw-bold text-white" >Order total</span><span class="lead fw-bold text-white" >$100.67</span></div><a class="btn btn-primary w-100 text-uppercase" href="#" >Go to Checkout</a>
</div>
</div>
</div>
</div>
</div>
</section>