E-Commerce Overlays
Description goes here.
<!-- Cart Offcanvas -->
<div id="hs-pro-shco" class="hs-overlay hs-overlay-open:translate-x-0 hidden kbeg6 fixed ofq05 fug6q g0ipl jahre lrm8y lpgt1 kisq3 kdmqb flex flex-col oo8ro hidden dark:bg-neutral-800" role="dialog" tabindex="-1" aria-labelledby="hs-pro-shco-label">
<!-- Header -->
<div class="mctd2 xxpuq flex uip67 items-center ic6aj d77gl dark:border-neutral-700">
<h3 id="hs-pro-shco-label" class="vo20k bp13m dark:text-neutral-200">
Cart (3 items)
</h3>
<button type="button" class="jlmh5 kzzmm inline-flex r00n9 items-center pgjbi oq0dt wfm4e d77gl cm336 bp13m ksr3h focus:outline-hidden kf4z7 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:hover:bg-neutral-700 dark:text-neutral-200 dark:focus:bg-neutral-700" aria-label="Close" data-hs-overlay="#hs-pro-shco">
<span class="hidden lg:block">Esc</span>
<span class="block lg:hidden">Close</span>
<svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
</div>
<!-- End Header -->
<!-- Body -->
<div class="qpmwn overflow-y-auto overflow-hidden n4ec4 xlk9f rzoxf xcbgk dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500">
<!-- Alert -->
<div class="gxlt6 xxpuq relative overflow-hidden o3vbm t28w6 dv53g s9go1 kthkg dark:from-orange-800 dark:via-purple-800 dark:to-indigo-800" role="alert" tabindex="-1" aria-labelledby="hs-pro-shfshal-label">
<h4 id="hs-pro-shfshal-label" class="vo20k bp13m dark:text-neutral-200">
Free shipping on orders over $50
</h4>
<p class="xe8oj cm336 t6rrs dark:text-white/50">
<a class="vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" href="../../pro/shop/login.html">Log In</a> or <a class="vo20k cm336 bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" href="../../pro/shop/create-account.html">Register</a>
</p>
</div>
<!-- End Alert -->
<div class="iqzha space-y-7">
<!-- Item -->
<div id="hs-pro-shcopci1" class="hs-removing:opacity-0 jahre flex ocl6c">
<div class="relative">
<img class="hq6gx vl7eg kfyrd exlm9 agawe ps5iq dark:bg-neutral-700" src="https://images.unsplash.com/photo-1699595749116-33a4a869503c?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
<div class="absolute ofq05 fug6q bo1ta r9ot5 jjspw">
<button type="button" class="ca09w flex r00n9 items-center pgjbi oq0dt cm336 oo8ro wfm4e qb17b bp13m ai5kb disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden j9afk">
<svg class="hq6gx a49ku" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
<span class="ecbnn">Add to favorites</span>
</button>
</div>
</div>
<div class="e3fpz flex flex-col">
<h4 class="t5ziw bp13m dark:text-neutral-200">
Nike Air Force 1
</h4>
<ul class="nsx3p space-y-1">
<li class="cm336 t6rrs dark:text-neutral-500">
Color: White
</li>
<li class="cm336 t6rrs dark:text-neutral-500">
Size: M
</li>
</ul>
<p class="nsx3p cm336 t6rrs dark:text-neutral-500">
<span>Qty:</span>
<span>1</span>
</p>
<span class="nsx3p t5ziw bp13m dark:text-neutral-200">
$149
</span>
<div class="">
<button type="button" class="inline-flex items-center vrcxw e9qjd bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shcopci1">
Remove
</button>
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div id="hs-pro-shcopci2" class="hs-removing:opacity-0 jahre flex ocl6c">
<div class="relative">
<img class="hq6gx vl7eg kfyrd exlm9 agawe ps5iq dark:bg-neutral-700" src="https://images.unsplash.com/photo-1708443683334-1e41c52f33ac?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
<div class="absolute ofq05 fug6q bo1ta r9ot5 jjspw">
<button type="button" class="ca09w flex r00n9 items-center pgjbi oq0dt cm336 oo8ro wfm4e qb17b bp13m ai5kb disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden j9afk">
<svg class="hq6gx a49ku" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
<span class="ecbnn">Add to favorites</span>
</button>
</div>
</div>
<div class="e3fpz flex flex-col">
<h4 class="t5ziw bp13m dark:text-neutral-200">
Camo Blend Jacket
</h4>
<ul class="nsx3p space-y-1">
<li class="cm336 t6rrs dark:text-neutral-500">
Color: Camo
</li>
<li class="cm336 t6rrs dark:text-neutral-500">
Size: M
</li>
</ul>
<p class="nsx3p cm336 t6rrs dark:text-neutral-500">
<span>Qty:</span>
<span>1</span>
</p>
<span class="nsx3p">
<span class="t5ziw t6rrs dark:text-neutral-500">
<s>$60</s>
</span>
<span class="t5ziw bs6yk">
$40
</span>
</span>
<div class="">
<button type="button" class="inline-flex items-center vrcxw e9qjd bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shcopci2">
Remove
</button>
</div>
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div id="hs-pro-shcopci3" class="hs-removing:opacity-0 jahre flex ocl6c">
<div class="relative">
<img class="hq6gx vl7eg kfyrd exlm9 agawe ps5iq dark:bg-neutral-700" src="https://images.unsplash.com/photo-1603218183500-7e1d62c3c679?q=80&w=180&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Product Image">
<div class="absolute ofq05 fug6q bo1ta r9ot5 jjspw">
<button type="button" class="ca09w flex r00n9 items-center pgjbi oq0dt cm336 oo8ro wfm4e qb17b bp13m ai5kb disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden j9afk">
<svg class="hq6gx a49ku" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path></svg>
<span class="ecbnn">Add to favorites</span>
</button>
</div>
</div>
<div class="e3fpz flex flex-col">
<h4 class="t5ziw bp13m dark:text-neutral-200">
Mahabis Classic
</h4>
<ul class="nsx3p space-y-1">
<li class="cm336 t6rrs dark:text-neutral-500">
Color: White
</li>
<li class="cm336 t6rrs dark:text-neutral-500">
Size: M
</li>
</ul>
<p class="nsx3p cm336 t6rrs dark:text-neutral-500">
<span>Qty:</span>
<span>1</span>
</p>
<span class="nsx3p t5ziw bp13m dark:text-neutral-200">
$40
</span>
<div class="">
<button type="button" class="inline-flex items-center vrcxw e9qjd bp13m u17ef bneqp nkcue focus:outline-hidden dvj8n dark:text-neutral-200 dark:hover:text-indigo-400 dark:focus:text-indigo-400" data-hs-remove-element="#hs-pro-shcopci3">
Remove
</button>
</div>
</div>
</div>
<!-- End Item -->
</div>
</div>
<!-- End Body -->
<!-- Footer -->
<div class="gxlt6 fofgk xxpuq pyimf d77gl dark:border-neutral-700">
<!-- List -->
<div class="hypkf dmfqa hdv6z h1dxu">
<div>
<p class="y2wul bp13m dark:text-neutral-200">
Subtotal
</p>
</div>
<div class="cuqi8">
<span class="y2wul bp13m dark:text-neutral-200">$229</span>
</div>
</div>
<!-- End List -->
<p class="qhmnk eegzu e9qjd t6rrs dark:text-neutral-500">
Shipping, taxes and discounts are calculated at checkout.
</p>
<div class="flex items-center lialp">
<a class="mctd2 dkhxo relative i65bn inline-flex r00n9 items-center vrcxw t5ziw vo20k ps5iq wfm4e d77gl oo8ro bp13m hx4gm tdhmi disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden tme8y dark:bg-neutral-800 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:border-neutral-700 dark:text-neutral-300" href="../../pro/shop/cart.html">
View cart (3)
</a>
<a class="mctd2 dkhxo i65bn inline-flex r00n9 items-center lialp t5ziw vo20k ps5iq wfm4e qb17b h1a67 zr4l6 z3bp0 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden n6v3e" href="../../pro/shop/checkout.html">
Checkout
</a>
</div>
</div>
<!-- End Footer -->
</div>
<!-- End Cart Offcanvas -->