<section class="section has-background-light is-clipped">
<div class="container">
<div class="has-background-white p-8 p-20-desktop">
<h2 class="title mb-8 mb-20-tablet">Your cart</h2>
<div class="columns is-multiline is-vcentered">
<div class="column is-12 is-8-widescreen mb-8 mb-0-widescreen">
<div class="is-hidden-touch columns is-multiline" style="border-bottom: 1px solid grey;">
<div class="column is-6">
<h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Description</h4>
</div>
<div class="column is-2">
<h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Price</h4>
</div>
<div class="column is-2 has-text-centered">
<h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Quantity</h4>
</div>
<div class="column is-2">
<h4 class="has-text-grey has-text-weight-bold mb-6" style="font-size: 16px;">Subtotal</h4>
</div>
</div>
<div class="mb-12 py-6">
<div class="mb-6 mb-3-tablet columns is-vcentered is-multiline">
<div class="column is-6-desktop is-7-tablet mb-6 mb-0-tablet">
<div class="columns is-vcentered is-multiline">
<div class="column is-4 mb-3">
<div class="is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 96px; height: 128px;">
<img class="image is-fullwidth" style="object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
</div>
</div>
<div class="column is-8">
<h3 class="subtitle mb-2 has-text-weight-bold">BRILE water filter carafe</h3>
<p class="mb-0 has-text-grey">Maecenas 0.7 commodo sit</p>
</div>
</div>
</div>
<div class="column is-2 is-hidden-touch">
<p class="subtitle has-text-info mb-0 has-text-weight-bold">$29.89</p>
<span class="has-text-grey" style="text-decoration: line-through;">$33.69</span>
</div>
<div class="column is-2-desktop is-3-tablet">
<div class="px-4 is-inline-flex is-align-items-center has-text-weight-bold" style="border: 1px solid #DBDDE1; border-radius: 8px;">
<button class="button is-ghost has-text-grey p-0">
<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="input px-2 py-4 has-text-centered" style="width: 48px; border: none; box-shadow: none;" type="number" placeholder="1">
<button class="button is-ghost has-text-grey p-0">
<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="column is-2">
<p class="subtitle has-text-info has-text-weight-bold">$29.89</p>
</div>
</div>
<div class="columns is-vcentered is-multiline">
<div class="column is-6-desktop is-7-tablet mb-6 mb-0-tablet">
<div class="columns is-vcentered is-multiline">
<div class="column is-4-tablet mb-3">
<div class="is-flex has-background-light is-justify-content-center is-align-items-center" style="width: 96px; height: 128px;">
<img class="image is-fullwidth" style="object-fit: contain;" src="yofte-assets/images/basketball.png" alt="">
</div>
</div>
<div class="column is-8">
<h3 class="subtitle mb-2 has-text-weight-bold">Nike basketball ball</h3>
<p class="mb-0 has-text-grey">Maecenas 0.7 commodo sit</p>
</div>
</div>
</div>
<div class="column is-2 is-hidden-touch">
<p class="subtitle has-text-info mb-0 has-text-weight-bold">$29.89</p>
<span class="has-text-grey" style="text-decoration: line-through;">$33.69</span>
</div>
<div class="column is-2-desktop is-3-tablet">
<div class="px-4 is-inline-flex is-align-items-center has-text-weight-bold" style="border: 1px solid #DBDDE1; border-radius: 8px;">
<button class="button is-ghost has-text-grey p-0">
<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="input px-2 py-4 has-text-centered" style="width: 48px; border: none; box-shadow: none;" type="number" placeholder="1">
<button class="button is-ghost has-text-grey p-0">
<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="column is-2">
<p class="subtitle has-text-info has-text-weight-bold">$29.89</p>
</div>
</div>
</div>
<div class="columns is-vcentered">
<div class="column is-4">
<span class="is-flex-shrink-0 has-text-weight-bold">Apply discount code:</span>
</div>
<div class="column is-5">
<input class="ms-12 input has-text-weight-bold" type="text" placeholder="SUMMER30X">
</div>
<div class="column is-3"><a class="ms-6 button is-dark is-flex-shrink-0" href="#">Apply</a></div>
</div>
</div>
<div class="column is-12 is-4-widescreen">
<div class="has-background-info p-6 p-16-desktop">
<h3 class="title is-size-3 has-text-white mb-6">Cart totals</h3>
<div class="mb-8 pb-5 is-flex is-justify-content-space-between is-align-items-center" style="border-bottom: 1px solid rgba(255, 255, 255, 0.3);">
<span class="has-text-light">Subtotal</span>
<span class="subtitle has-text-white has-text-weight-bold">$89.67</span>
</div>
<h4 class="title is-size-5 has-text-white mb-2">Shipping</h4>
<div class="mb-2 is-flex is-justify-content-space-between is-align-items-center">
<span class="has-text-light">Next day</span>
<span class="subtitle has-text-white has-text-weight-bold">$11.00</span>
</div>
<div class="mb-10 is-flex is-justify-content-space-between is-align-items-center">
<span class="has-text-light">Shipping to United States</span>
<span class="subtitle has-text-white has-text-weight-bold">-</span>
</div>
<div class="mb-10 is-flex is-justify-content-space-between is-align-items-center">
<span class="title is-size-5 mb-0 has-text-white has-text-weight-bold">Order total</span>
<span class="title is-size-5 mb-0 has-text-white has-text-weight-bold">$100.67</span>
</div>
<a class="button is-primary is-fullwidth" href="#">Go to Checkout</a>
</div>
</div>
</div>
</div>
</div>
</section>