<!--  Shopping Cart -->
<div class="offcanvas offcanvas-end shopping-cart" tabindex="-1" id="offcanvasRight"
  aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header justify-content-between py-4">
    <h5 class="offcanvas-title fs-5 fw-semibold" id="offcanvasRightLabel">
      Shopping Cart
    </h5>
    <span class="badge bg-primary rounded-4 px-3 py-1 lh-sm">5 new</span>
  </div>
  <div class="offcanvas-body h-100 px-4 pt-0" data-simplebar>
    <ul class="mb-0">
      <li class="pb-7">
        <div class="d-flex align-items-center">
          <img src="<?= base_url('assets/images/products/product-1.jpg'); ?>" width="95" height="75"
            class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
          <div>
            <h6 class="mb-1">Supreme toys cooker</h6>
            <p class="mb-0 text-muted fs-2">Kitchenware Item</p>
            <div class="d-flex align-items-center justify-content-between mt-2">
              <h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
              <div class="input-group input-group-sm w-50">
                <button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add1">
                  -
                </button>
                <input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty"
                  placeholder="" aria-label="Example text with button addon" aria-describedby="add1" value="1" />
                <button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addo2">
                  +
                </button>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="pb-7">
        <div class="d-flex align-items-center">
          <img src="<?= base_url('assets/images/products/product-2.jpg'); ?>" width="95" height="75"
            class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
          <div>
            <h6 class="mb-1">Supreme toys cooker</h6>
            <p class="mb-0 text-muted fs-2">Kitchenware Item</p>
            <div class="d-flex align-items-center justify-content-between mt-2">
              <h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
              <div class="input-group input-group-sm w-50">
                <button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add2">
                  -
                </button>
                <input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty"
                  placeholder="" aria-label="Example text with button addon" aria-describedby="add2" value="1" />
                <button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon34">
                  +
                </button>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="pb-7">
        <div class="d-flex align-items-center">
          <img src="<?= base_url('assets/images/products/product-3.jpg'); ?>" width="95" height="75"
            class="rounded-1 me-9 flex-shrink-0" alt="modernize-img" />
          <div>
            <h6 class="mb-1">Supreme toys cooker</h6>
            <p class="mb-0 text-muted fs-2">Kitchenware Item</p>
            <div class="d-flex align-items-center justify-content-between mt-2">
              <h6 class="fs-2 fw-semibold mb-0 text-muted">$250</h6>
              <div class="input-group input-group-sm w-50">
                <button class="btn border-0 round-20 minus p-0 bg-success-subtle text-success" type="button" id="add3">
                  -
                </button>
                <input type="text" class="form-control round-20 bg-transparent text-muted fs-2 border-0 text-center qty"
                  placeholder="" aria-label="Example text with button addon" aria-describedby="add3" value="1" />
                <button class="btn text-success bg-success-subtle p-0 round-20 border-0 add" type="button" id="addon3">
                  +
                </button>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <div class="align-bottom">
      <div class="d-flex align-items-center pb-7">
        <span class="text-dark fs-3">Sub Total</span>
        <div class="ms-auto">
          <span class="text-dark fw-semibold fs-3">$2530</span>
        </div>
      </div>
      <div class="d-flex align-items-center pb-7">
        <span class="text-dark fs-3">Total</span>
        <div class="ms-auto">
          <span class="text-dark fw-semibold fs-3">$6830</span>
        </div>
      </div>
      <a href="/main/eco-checkout" class="btn btn-outline-primary w-100">Go to shopping cart</a>
    </div>
  </div>
</div>