Shop components

<!-- Product card with image slider and color options -->
<div style="max-width: 306px;">
  <div class="card-hover position-relative bg-secondary rounded-1 p-3 mb-4">
    <span class="badge bg-danger bg-opacity-10 text-danger position-absolute top-0 start-0 mt-3 ms-3">Sale</span>
    <button type="button" class="btn btn-icon btn-sm btn-light bg-light border-0 rounded-circle position-absolute top-0 end-0 mt-3 me-3 z-5 opacity-0" aria-label="Add to Favorites">
      <i class="ai-heart fs-xl text-nav"></i>
    </button>
    <div class="swiper swiper-nav-onhover" data-swiper-options='{"loop": true, "navigation": {"prevEl": ".btn-prev", "nextEl": ".btn-next"}}'>
      <a href="#" class="swiper-wrapper">
        <div class="swiper-slide p-2 p-xl-4">
          <img class="d-block mx-auto" src="assets/img/shop/products/08.png" width="226" alt="Product">
        </div>
        <div class="swiper-slide p-2 p-xl-4">
          <img class="d-block mx-auto" src="assets/img/shop/products/08.png" width="226" alt="Product">
        </div>
      </a>
      <button type="button" class="btn btn-prev btn-icon btn-sm btn-light bg-light border-0 rounded-circle start-0" aria-label="Prev">
        <i class="ai-chevron-left fs-xl text-nav"></i>
      </button>
      <button type="button" class="btn btn-next btn-icon btn-sm btn-light bg-light border-0 rounded-circle end-0" aria-label="Next">
        <i class="ai-chevron-right fs-xl text-nav"></i>
      </button>
    </div>
  </div>
  <div class="d-flex mb-1">
    <h3 class="h6 mb-0"><a href="#">Analogue wall clock</a></h3>
    <div class="d-flex ps-2 mt-n1 ms-auto">
      <div class="ms-1">
        <input type="radio" class="btn-check" id="color1" name="color" value="Turquoise" checked>
        <label for="color1" class="btn btn-icon btn-xs btn-outline-secondary rounded-circle">
          <span class="d-block rounded-circle" style="width: .625rem; height: .625rem; background-color: #a8c2c0;"></span>
        </label>
      </div>
      <div class="ms-1">
        <input type="radio" class="btn-check" id="color2" name="color" value="Lilac">
        <label for="color2" class="btn btn-icon btn-xs btn-outline-secondary rounded-circle">
          <span class="d-block rounded-circle" style="width: .625rem; height: .625rem; background-color: #b4a9c3;"></span>
        </label>
      </div>
      <div class="ms-1">
        <input type="radio" class="btn-check" id="color3" name="color" value="Blue">
        <label for="color3" class="btn btn-icon btn-xs btn-outline-secondary rounded-circle">
          <span class="d-block rounded-circle" style="width: .625rem; height: .625rem; background-color: #a1b7d9;"></span>
        </label>
      </div>
    </div>
  </div>
  <div class="d-flex align-items-center">
    <span class="me-2">$25.00</span>
    <del class="fs-sm text-body-secondary">$37.00</del>
    <div class="nav ms-auto" data-bs-toggle="tooltip" data-bs-template='<div class="tooltip fs-xs" role="tooltip"><div class="tooltip-inner bg-light text-body-secondary p-0"></div></div>' data-bs-placement="left" title="Add to cart">
      <a href="#" class="nav-link fs-lg py-2 px-1" aria-label="Add to Cart">
        <i class="ai-cart"></i>
      </a>
    </div>
  </div>
</div>

<!-- Tiny horizontal product card -->
<a href="#" class="card h-100 rounded-1 text-decoration-none px-xxl-1" style="max-width: 306px;">
  <div class="card-body p-4 px-sm-3 px-md-4">
    <div class="d-flex align-items-center">
      <img src="assets/img/landing/shop/hero/01.png" width="97" alt="Product">
      <div class="ps-3 ps-md-4">
        <h3 class="fs-sm mb-2">Exquisite glass vase</h3>
        <p class="fs-sm mb-0">
          $15.00
          <del class="text-body-secondary fs-xs ms-1">$19.00</del>
        </p>
      </div>
    </div>
  </div>
</a>

<!-- Category card -->
<div class="card zoom-effect border-0 rounded-1 overflow-hidden" style="max-width: 416px;">
  <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-10 z-2"></span>
  <div class="zoom-effect-wrapper rounded-1">
    <img src="assets/img/shop/categories/04.jpg" class="zoom-effect-img" alt="Category image">
  </div>
  <a href="#" class="card-body d-flex flex-column justify-content-end align-items-start position-absolute top-0 start-0 w-100 h-100 text-decoration-none z-3">
    <span class="bg-light text-dark rounded-pill fs-sm fw-semibold lh-1 py-3 px-4">
      For the bedroom
    </span>
  </a>
</div>

<!-- Shopping cart item -->
<div class="d-sm-flex align-items-center" style="max-width: 540px;">
  <a href="#" class="d-inline-block flex-shrink-0 bg-secondary rounded-1 p-sm-2 p-md-3 mb-2 mb-sm-0">
    <img src="assets/img/shop/cart/01.png" width="110" alt="Product">
  </a>
  <div class="w-100 pt-1 ps-sm-4">
    <div class="d-flex">
      <div class="me-3">
        <h3 class="h5 mb-2">
          <a href="#">Candle in concrete bowl</a>
        </h3>
        <div class="d-flex flex-wrap">
          <div class="text-body-secondary fs-sm me-3">
            Color:
            <span class="text-dark fw-medium ms-1">Gray night</span>
          </div>
          <div class="text-body-secondary fs-sm me-3">
            Weight:
            <span class="text-dark fw-medium ms-1">140g</span>
          </div>
        </div>
      </div>
      <div class="text-end ms-auto">
        <div class="fs-5 mb-2">$11.00</div>
        <del class="text-body-secondary ms-auto">$15.00</del>
      </div>
    </div>
    <div class="count-input ms-n3">
      <button type="button" class="btn btn-icon fs-xl" data-decrement>-</button>
      <input type="number" class="form-control" value="1" readonly>
      <button type="button" class="btn btn-icon fs-xl" data-increment>+</button>
    </div>
    <div class="nav justify-content-end mt-n5 mt-sm-n3">
      <a href="#" class="nav-link fs-xl p-2" data-bs-toggle="tooltip" title="Remove" aria-label="Remove">
        <i class="ai-trash"></i>
      </a>
    </div>
  </div>
</div>

<!-- Categories filter (accordion width checkboxes) -->
<h3 class="h5">Categories</h3>
<div class="accordion accordion-alt" id="shopCategories">

  <!-- Category collapse -->
  <div class="accordion-item mb-0">
    <h4 class="accordion-header">
      <button type="button" class="accordion-button fs-xl fw-medium py-2" data-bs-toggle="collapse" data-bs-target="#livingRoom" aria-expanded="true" aria-controls="livingRoom">
        <span class="fs-base">Living room</span>
      </button>
    </h4>
    <div class="accordion-collapse collapse show" id="livingRoom" data-bs-parent="#shopCategories">
      <div class="accordion-body py-1 mb-1">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="lr-all">
          <label for="lr-all" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">View all</span>
            <span class="fs-xs text-body-secondary ms-auto">573</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="lr-vases" checked>
          <label for="lr-vases" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Vases</span>
            <span class="fs-xs text-body-secondary ms-auto">234</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="lr-mirrors">
          <label for="lr-mirrors" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Mirrors</span><span class="fs-xs text-body-secondary ms-auto">182</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="lr-paintings">
          <label for="lr-paintings" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Paintings</span>
            <span class="fs-xs text-body-secondary ms-auto">133</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="lr-furniture">
          <label for="lr-furniture" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Furniture</span>
            <span class="fs-xs text-body-secondary ms-auto">24</span>
          </label>
        </div>
      </div>
    </div>
  </div>

  <!-- Category collapse -->
  <div class="accordion-item mb-0">
    <h4 class="accordion-header">
      <button type="button" class="accordion-button collapsed fs-xl fw-medium py-2" data-bs-toggle="collapse" data-bs-target="#kitchen" aria-expanded="false" aria-controls="kitchen">
        <span class="fs-base">Kitchen</span>
      </button>
    </h4>
    <div class="accordion-collapse collapse" id="kitchen" data-bs-parent="#shopCategories">
      <div class="accordion-body py-1 mb-1">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="kitchen-all">
          <label for="kitchen-all" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">View all</span>
            <span class="fs-xs text-body-secondary ms-auto">586</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="kitchen-cutlery">
          <label for="kitchen-cutlery" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Cutlery</span>
            <span class="fs-xs text-body-secondary ms-auto">387</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="kitchen-storage">
          <label for="kitchen-storage" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Storage</span>
            <span class="fs-xs text-body-secondary ms-auto">124</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="kitchen-bins">
          <label for="kitchen-bins" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Waste bins</span>
            <span class="fs-xs text-body-secondary ms-auto">59</span>
          </label>
        </div>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="kitchen-sinks">
          <label for="kitchen-sinks" class="form-check-label d-flex align-items-center">
            <span class="text-nav fw-medium">Sinks</span>
            <span class="fs-xs text-body-secondary ms-auto">16</span>
          </label>
        </div>
      </div>
    </div>
  </div>

  <!-- Add as many categories as you need -->
</div>

<!-- Price range slider (based on noUISlider) -->
<h3 class="h5">Price</h3>
<div class="range-slider" data-start-min="280" data-start-max="720" data-min="0" data-max="1000" data-step="1" data-tooltip-prefix="$">
  <div class="range-slider-ui"></div>
  <div class="d-flex">
    <div class="d-flex align-items-center w-50">
      <label for="price-min" class="form-label fs-xs me-2 mb-0">From</label>
      <input type="number" id="price-min" class="form-control form-control-sm range-slider-value-min" style="max-width: 6rem;">
    </div>
    <div class="d-flex align-items-center w-50">
      <label for="price-max" class="form-label fs-xs me-2 mb-0">To</label>
      <input type="number" id="price-max" class="form-control form-control-sm range-slider-value-max" style="max-width: 6rem;">
    </div>
  </div>
</div>

<!-- Color filter (custom checkboxes) -->
<h3 class="h5">Color</h3>
<div class="d-flex">

  <!-- Solid color (checked) -->
  <div class="me-2 mb-2">
    <input type="checkbox" class="btn-check" id="blue" value="Bluish sky">
    <label for="blue" class="btn btn-icon btn-sm btn-outline-secondary rounded-circle">
      <span class="d-block rounded-circle" style="width: 1.5rem; height: 1.5rem; background-color: #a1b7d9;"></span>
    </label>
  </div>

  <!-- Image pattern -->
  <div class="me-2 mb-2">
    <input type="checkbox" class="btn-check" id="wood" value="Woody brown">
    <label for="wood" class="btn btn-icon btn-sm btn-outline-secondary rounded-circle">
      <span class="d-block bg-size-cover bg-position-center rounded-circle" style="width: 1.5rem; height: 1.5rem; background-color: #af8352; background-image: url(assets/img/shop/pattern/wood.jpg);"></span>
    </label>
  </div>

  <!-- Add as many color checkboxes as you need -->
</div>