<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>