Product Details 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">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Home</a></li>
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none">Electronics</a></li>
      <li class="breadcrumb-item active" aria-current="page">Wireless Headphones</li>
    </ol>
  </nav>

  <div class="row g-5">
    <!-- ii. Product Image Slider (Bootstrap Carousel) -->
    <div class="col-lg-6">
      <div id="productCarousel" class="carousel slide border rounded-4 overflow-hidden shadow-sm" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800" class="d-block w-100" alt="Product 1">
          </div>
          <div class="carousel-item">
            <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?w=800" class="d-block w-100" alt="Product 2">
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon bg-dark rounded-circle p-3"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon bg-dark rounded-circle p-3"></span>
        </button>
      </div>
    </div>

    <!-- iii. Product Information -->
    <div class="col-lg-6">
      <div class="ps-lg-4">
        <span class="badge bg-success-subtle text-success mb-2 px-3 py-2 rounded-pill">In Stock</span>
        <h1 class="fw-bold mb-3">Premium Wireless Noise-Cancelling Headphones</h1>

        <div class="d-flex align-items-center mb-3">
          <div class="text-warning me-2">
            <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-fill"></i>
            <i class="bi bi-star-half"></i>
          </div>
          <span class="text-muted small">(4.8 / 5.0 - 124 reviews)</span>
        </div>

        <h2 class="text-primary fw-bolder mb-4">$299.00 <del class="text-muted fs-5 ms-2">$350.00</del></h2>

        <p class="text-muted mb-4 small">
          Experience studio-quality sound with our latest noise-cancelling technology.
          Up to 40 hours of battery life and quick charge capabilities.
        </p>

        <div class="mb-4">
          <label class="form-label fw-bold">Quantity</label>
          <div class="input-group" style="width: 140px;">
            <button class="btn btn-outline-secondary rounded-start-pill px-3" type="button">-</button>
            <input type="text" class="form-control text-center border-secondary shadow-none" value="1">
            <button class="btn btn-outline-secondary rounded-end-pill px-3" type="button">+</button>
          </div>
        </div>

        <!-- iv. Add to Cart & Wishlist Buttons -->
        <div class="d-flex gap-3 mb-5">
          <button class="btn btn-primary btn-lg flex-grow-1 rounded-pill py-3 fw-bold">
            <i class="bi bi-cart3 me-2"></i> Add to Cart
          </button>
          <button class="btn btn-outline-danger btn-lg rounded-circle p-3 shadow-sm">
            <i class="bi bi-heart"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- v. Description & Customer Reviews Tabs -->
  <div class="mt-5 pt-5 pb-5">
    <ul class="nav nav-pills mb-4 border-bottom pb-3" id="productTabs" role="tablist">
      <li class="nav-item">
        <button class="nav-link active rounded-pill px-4 fw-bold" data-bs-toggle="pill" data-bs-target="#desc">Description</button>
      </li>
      <li class="nav-item">
        <button class="nav-link rounded-pill px-4 fw-bold" data-bs-toggle="pill" data-bs-target="#reviews">Reviews (124)</button>
      </li>
    </ul>
    <div class="tab-content" id="productTabsContent">
      <div class="tab-pane fade show active" id="desc">
        <h5 class="fw-bold mb-3">Features:</h5>
        <ul class="text-muted small">
          <li>High-fidelity audio with active noise cancellation.</li>
          <li>Built-in microphone for crystal clear calls.</li>
          <li>Ergonomic design for long-lasting comfort.</li>
          <li>Bluetooth 5.2 connectivity.</li>
        </ul>
      </div>
      <div class="tab-pane fade" id="reviews">
        <div class="review-item mb-4 pb-3 border-bottom">
          <div class="d-flex justify-content-between">
            <h6 class="fw-bold">John Doe</h6>
            <small class="text-muted">Mar 12, 2024</small>
          </div>
          <div class="text-warning small mb-2"><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i></div>
          <p class="small text-muted mb-0">Best headphones I've ever owned. The noise cancellation is magical!</p>
        </div>
      </div>
    </div>
  </div>

  <!-- vi. Related Products (Row Grid as owl alternative) -->
  <section class="mt-5 border-top pt-5">
    <h4 class="fw-bold mb-4">Related Products</h4>
    <div class="row g-4 overflow-auto flex-nowrap pb-3" style="scrollbar-width: none;">
      <!-- Simple Related Items -->
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 text-center">
          <img src="https://images.unsplash.com/photo-1546868801-89930f46dcc2?w=300" class="card-img-top p-3 rounded-5" alt="Item">
          <div class="card-body small">
            <h6 class="fw-bold mb-1">Smart Watch</h6>
            <p class="text-primary fw-bold mb-0">$199.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 text-center">
          <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=300" class="card-img-top p-3 rounded-5" alt="Item">
          <div class="card-body small">
            <h6 class="fw-bold mb-1">Aviator Shades</h6>
            <p class="text-primary fw-bold mb-0">$89.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 text-center">
          <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=300" class="card-img-top p-3 rounded-5" alt="Item">
          <div class="card-body small">
            <h6 class="fw-bold mb-1">Modern Watch</h6>
            <p class="text-primary fw-bold mb-0">$140.00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-3">
        <div class="card border-0 shadow-sm rounded-4 text-center">
          <img src="https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?w=300" class="card-img-top p-3 rounded-5" alt="Item">
          <div class="card-body small">
            <h6 class="fw-bold mb-1">Classic Sneakers</h6>
            <p class="text-primary fw-bold mb-0">$75.00</p>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<style>
  .nav-pills .nav-link {
    color: #555;
  }

  .nav-pills .nav-link.active {
    background-color: #0d6efd;
  }

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

  .carousel-item img {
    height: 450px;
    object-fit: cover;
  }

  .card:hover {
    transform: translateY(-5px);
    transition: 0.3s;
  }

</style>