<!-- 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-4 d-flex mb-4 productItem">
                <img src="assets/images/Products/air_filter.png" class="object-fit-contain me-3 pe-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-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">
                        <button class="text-white border-light-gray border border-1 bg-dark-opacity-60 me-2 px-0 text-center counterCardDown" style="width: 26px; height: 26px;">
                            <i class="bi bi-chevron-left"></i>
                        </button>
                        <p class="text-md text-700 mb-0 productNumber text-center" style="width: 30px;">10</p>
                        <button class="text-white border-light-gray border border-1 bg-dark-opacity-60 ms-2 px-0 text-center counterCardUp" style="width: 26px; height: 26px;">
                            <i class="bi bi-chevron-right"></i>
                        </button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center">
                        <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-4 d-flex mb-4 productItem">
                <img src="assets/images/Products/belt_engine.png" class="object-fit-contain me-3 pe-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-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">
                        <button class="text-white border-light-gray border border-1 bg-dark-opacity-60 me-2 px-0 text-center counterCardDown" style="width: 26px; height: 26px;">
                            <i class="bi bi-chevron-left"></i>
                        </button>
                        <p class="text-md text-700 mb-0 productNumber text-center" style="width: 30px;">1</p>
                        <button class="text-white border-light-gray border border-1 bg-dark-opacity-60 ms-2 px-0 text-center counterCardUp" style="width: 26px; height: 26px;">
                            <i class="bi bi-chevron-right"></i>
                        </button>
                        </div>
                    </div>
                    <div class="d-flex align-items-center">
                        <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="#" class="btn btn-primary btn-center btn-xl w-100 pt-3">
                <span class="btn-text">see all items</span> 
            </a>
        </div>
    </div>
</div>