Cart Full Page

<div class="container py-4">
  <!-- i. Breadcrumb Section -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb bg-light p-3 rounded-4 shadow-sm">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li>
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Shop</a></li>
      <li class="breadcrumb-item active" aria-current="page">Shopping Cart</li>
    </ol>
  </nav>

  <div class="row g-4">
    <!-- ii. Cart Items Table -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="table-responsive">
          <table class="table table-hover align-middle mb-0">
            <thead class="bg-light">
              <tr>
                <th class="py-3 px-4 border-0">Product</th>
                <th class="py-3 border-0">Price</th>
                <th class="py-3 border-0">Quantity</th>
                <th class="py-3 border-0 text-end px-4">Total</th>
                <th class="py-3 border-0"></th>
              </tr>
            </thead>
            <tbody>
              <!-- Item 1 -->
              <tr>
                <td class="px-4 py-3">
                  <div class="d-flex align-items-center">
                    <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=100" class="rounded-3 me-3 border" width="70" alt="Product">
                    <div>
                      <h6 class="mb-0 fw-bold">Red Sport Shoes</h6>
                      <small class="text-muted">Size: 42, Color: Red</small>
                    </div>
                  </div>
                </td>
                <td>$85.00</td>
                <td>
                  <div class="input-group input-group-sm" style="width: 100px;">
                    <button class="btn btn-outline-secondary">-</button>
                    <input type="text" class="form-control text-center shadow-none border-secondary" value="1">
                    <button class="btn btn-outline-secondary">+</button>
                  </div>
                </td>
                <td class="text-end px-4 fw-bold">$85.00</td>
                <td class="text-center"><button class="btn btn-link link-danger p-0"><i class="bi bi-trash"></i></button></td>
              </tr>
              <!-- Item 2 -->
              <tr>
                <td class="px-4 py-3">
                  <div class="d-flex align-items-center">
                    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100" class="rounded-3 me-3 border" width="70" alt="Product">
                    <div>
                      <h6 class="mb-0 fw-bold">Studio Headphones</h6>
                      <small class="text-muted">Color: Matte Black</small>
                    </div>
                  </div>
                </td>
                <td>$299.00</td>
                <td>
                  <div class="input-group input-group-sm" style="width: 100px;">
                    <button class="btn btn-outline-secondary">-</button>
                    <input type="text" class="form-control text-center shadow-none border-secondary" value="1">
                    <button class="btn btn-outline-secondary">+</button>
                  </div>
                </td>
                <td class="text-end px-4 fw-bold">$299.00</td>
                <td class="text-center"><button class="btn btn-link link-danger p-0"><i class="bi bi-trash"></i></button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- iii. Apply Coupon Code Section -->
      <div class="mt-4 card border-0 shadow-sm rounded-4 p-3">
        <div class="d-md-flex align-items-center justify-content-between gap-3">
          <div class="input-group" style="max-width: 400px;">
            <input type="text" class="form-control rounded-start-pill border-secondary border-end-0 px-3" placeholder="Enter Coupon Code">
            <button class="btn btn-dark rounded-end-pill px-4 fw-bold">Apply</button>
          </div>
          <button class="btn btn-outline-dark rounded-pill px-4 mt-3 mt-md-0 fw-bold">Update Cart</button>
        </div>
      </div>
    </div>

    <!-- iv. Cart Total & Proceed Button -->
    <div class="col-lg-4">
      <div class="card border-0 shadow-sm rounded-4 p-4">
        <h5 class="fw-bold mb-4">Cart Summary</h5>
        <div class="d-flex justify-content-between mb-2">
          <span class="text-muted">Subtotal</span>
          <span class="fw-bold">$384.00</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span class="text-muted">Shipping</span>
          <span class="fw-bold text-success">Free</span>
        </div>
        <div class="d-flex justify-content-between mb-4">
          <span class="text-muted">Tax</span>
          <span class="fw-bold">$12.00</span>
        </div>
        <hr>
        <div class="d-flex justify-content-between mb-4">
          <h5 class="fw-bolder">Total</h5>
          <h5 class="fw-bolder text-primary">$396.00</h5>
        </div>
        <button class="btn btn-primary w-100 btn-lg rounded-pill py-3 fw-bold mb-3">Proceed to Checkout</button>
        <a href="#" class="btn btn-link link-dark text-decoration-none w-100 text-center small"><i class="bi bi-arrow-left me-2"></i>Continue Shopping</a>
      </div>
    </div>
  </div>

  <!-- v. You May Also Like Section (Bootstrap Carousel) -->
  <div class="mt-5 pt-5">
    <h4 class="fw-bold text-center mb-4">You May Also Like</h4>
    <div id="likedItemsCarousel" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div class="row g-4 px-5">
            <div class="col-6 col-md-3">
              <div class="card border-0 shadow-sm rounded-4 p-2 text-center h-100">
                <img src="https://images.unsplash.com/photo-1546868801-89930f46dcc2?w=200" class="card-img-top rounded-4" alt="Item">
                <div class="card-body py-2">
                  <h6 class="small fw-bold mb-1">Smart Watch</h6>
                  <p class="text-primary small fw-bold mb-0">$120.00</p>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <div class="card border-0 shadow-sm rounded-4 p-2 text-center h-100">
                <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200" class="card-img-top rounded-4" alt="Item">
                <div class="card-body py-2">
                  <h6 class="small fw-bold mb-1">Luxury Watch</h6>
                  <p class="text-primary small fw-bold mb-0">$250.00</p>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3 d-none d-md-block">
              <div class="card border-0 shadow-sm rounded-4 p-2 text-center h-100">
                <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=200" class="card-img-top rounded-4" alt="Item">
                <div class="card-body py-2">
                  <h6 class="small fw-bold mb-1">Aviator Shades</h6>
                  <p class="text-primary small fw-bold mb-0">$89.00</p>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3 d-none d-md-block">
              <div class="card border-0 shadow-sm rounded-4 p-2 text-center h-100">
                <img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=200" class="card-img-top rounded-4" alt="Item">
                <div class="card-body py-2">
                  <h6 class="small fw-bold mb-1">White Sneakers</h6>
                  <p class="text-primary small fw-bold mb-0">$65.00</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#likedItemsCarousel" data-bs-slide="prev" style="width: 5%;">
        <i class="bi bi-chevron-left text-dark fs-3"></i>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#likedItemsCarousel" data-bs-slide="next" style="width: 5%;">
        <i class="bi bi-chevron-right text-dark fs-3"></i>
      </button>
    </div>
  </div>
</div>

<style>
  .breadcrumb-item+.breadcrumb-item::before {
    content: ">";
  }

  .table th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6c757d;
  }

  .card:hover {
    transform: none;
  }

  .btn-link:hover {
    color: #dc3545;
  }

</style>