<!-- OFFCANVAS CART __________________________________________________________________________ -->		
<div class="offcanvas offcanvas-end bg-black-pearl cart-container" tabindex="-1" id="offcanvasCart" aria-labelledby="offcanvasCart">
    <div class="p-4">
        <div class="offcanvas-header p-0">
            <h5 class="offcanvas-title" id="offcanvasLabel">
                Cart 
                <span class="productsNumber" id="howManyProducts">z</span>
            </h5>
            <button type="button" class="btn-close btn-close-white opacity-100" data-bs-dismiss="offcanvas" aria-label="Close">						
            </button>					
        </div>
        <hr class="mt-2 mb-4">
        <div class="offcanvas-body p-0">
            <div class="background-card rounded-3 p-3 p-sm-4 d-flex align-items-center mb-4 productItem">
                <img src="assets/images/Products/air_filter.png" class="object-fit-contain me-3" height="116" width="111" alt="">
                <div class="d-flex flex-column w-100">
                    <h4 class="headline-4 text-700 mb-2">Air Engine Filter</h4>
                    <div class="d-sm-flex justify-content-between align-items-center mb-auto">
                        <p class="text-xs mb-0"><span class="opacity-50">UNIT PRICE</span> $<span class="unitPrice">500</span></p>
                        <div class="d-flex align-items-center mt-2 mt-sm-0">
                        <button class="text-white border-gray border border-1 bg-dark-opacity-60 me-3 px-0 d-flex justify-content-center align-items-center rounded-1 counterCardDown boxSize-xs">
                            <i class="icon-arrow-left-2 text-4xs"></i>
                        </button>
                        <p class="text-md text-700 mb-0 productNumber text-center">10</p>
                        <button class="text-white border-gray border border-1 bg-dark-opacity-60 ms-3 px-0 d-flex justify-content-center align-items-center rounded-1 counterCardUp boxSize-xs">
                            <i class="icon-arrow-right-3 text-4xs"></i>
                        </button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-4 mt-sm-0">
                        <p class="text-xs text-uppercase me-3 mb-0">FINAL PRICE</p>
                        <p class="text-md text-600 mb-0">$<span class="totalCost">0</span></p>
                    </div>
                </div>
            </div>
            <div class="background-card rounded-3 p-3 p-sm-4 d-flex align-items-center mb-4 productItem">
                <img src="assets/images/Products/belt_engine.png" class="object-fit-contain me-3" height="116" width="111" alt="">
                <div class="d-flex flex-column w-100">
                    <h4 class="headline-4 text-700 mb-2">Air Engine Filter</h4>
                    <div class="d-sm-flex justify-content-between align-items-center mb-auto">
                        <p class="text-xs mb-0"><span class="opacity-50">UNIT PRICE</span> $<span class="unitPrice">200</span></p>
                        <div class="d-flex align-items-center mt-2 mt-sm-0">
                        <button class="text-white border-gray border border-1 bg-dark-opacity-60 me-3 px-0 d-flex justify-content-center align-items-center rounded-1 counterCardDown boxSize-xs">
                            <i class="icon-arrow-left-2 text-4xs"></i>
                        </button>
                        <p class="text-md text-700 mb-0 productNumber text-center">1</p>
                        <button class="text-white border-gray border border-1 bg-dark-opacity-60 ms-3 px-0 d-flex justify-content-center align-items-center rounded-1 counterCardUp boxSize-xs">
                            <i class="icon-arrow-right-3 text-4xs"></i>
                        </button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center mt-4 mt-sm-0">
                        <p class="text-xs text-uppercase me-3 mb-0">FINAL PRICE</p>
                        <p class="text-md text-600 mb-0">$<span class="totalCost">0</span></p>
                    </div>
                </div>
            </div>
            <a href="cart-page.php" class="btn btn-primary btn-center btn-xl w-100">
                <span class="btn-text">see all items</span> 
            </a>
        </div>
    </div>
</div>