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-faded-danger 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 zindex-5 opacity-0">
      <i class="ai-heart fs-xl d-dark-mode-none"></i>
      <i class="ai-heart text-nav fs-xl d-none d-dark-mode-block"></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">
        <i class="ai-chevron-left fs-xl d-dark-mode-none"></i>
        <i class="ai-chevron-left text-nav fs-xl d-none d-dark-mode-block"></i>
      </button>
      <button type="button" class="btn btn-next btn-icon btn-sm btn-light bg-light border-0 rounded-circle end-0">
        <i class="ai-chevron-right fs-xl d-dark-mode-none"></i>
        <i class="ai-chevron-right text-nav fs-xl d-none d-dark-mode-block"></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-muted">$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-muted p-0"></div></div>' data-bs-placement="left" title="Add to cart">
      <a href="#" class="nav-link fs-lg py-2 px-1">
        <i class="ai-cart"></i>
      </a>
    </div>
  </div>
</div>

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

<!-- 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-muted fs-xs ms-1">$19.00</del>
        </p>
      </div>
    </div>
  </div>
</a>

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

<!-- 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 zindex-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 zindex-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>

// Category card
.card.zoom-effect.border-0.rounded-1.overflow-hidden(style="max-width: 416px;")
  span.position-absolute.top-0.start-0.w-100.h-100.bg-dark.opacity-10.zindex-2
  .zoom-effect-wrapper.rounded-1
    img(src="assets/img/shop/categories/04.jpg", alt="Category image").zoom-effect-img
  a(href="#").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.zindex-3
    span.bg-light.text-dark.rounded-pill.fs-sm.fw-semibold.lh-1.py-3.px-4
      | For the bedroom

<!-- 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-muted fs-sm me-3">
            Color:
            <span class="text-dark fw-medium ms-1">Gray night</span>
          </div>
          <div class="text-muted 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-muted 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">
        <i class="ai-trash"></i>
      </a>
    </div>
  </div>
</div>

// Shopping cart item
.d-sm-flex.align-items-center(style="max-width: 540px;")
  a(href="#").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")
  .w-100.pt-1.ps-sm-4
    .d-flex
      .me-3
        h3.h5.mb-2
          a(href="#") Candle in concrete bowl
        .d-flex.flex-wrap
          .text-muted.fs-sm.me-3
            | Color: 
            span.text-dark.fw-medium.ms-1 Gray night
          .text-muted.fs-sm.me-3
            | Weight:
            span.text-dark.fw-medium.ms-1 140g
      .text-end.ms-auto
        .fs-5.mb-2 $11.00
        del.text-muted.ms-auto $15.00
    .count-input.ms-n3
      button(type="button", data-decrement).btn.btn-icon.fs-xl -
      input(type="number", value="1", readonly).form-control
      button(type="button", data-increment).btn.btn-icon.fs-xl +
    .nav.justify-content-end.mt-n5.mt-sm-n3
      a(href="#", data-bs-toggle="tooltip", title="Remove").nav-link.fs-xl.p-2
        i.ai-trash

<!-- 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-muted 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-muted 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-muted 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-muted 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-muted 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-muted 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-muted 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-muted 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-muted 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-muted ms-auto">16</span>
          </label>
        </div>
      </div>
    </div>
  </div>

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

// Categories filter (accordion width checkboxes)
h3.h5 Categories
#shopCategories.accordion.accordion-alt

  // Category collapse
  .accordion-item.mb-0
    h4.accordion-header
      button(type="button" data-bs-toggle="collapse" data-bs-target="#livingRoom" aria-expanded="true" aria-controls="livingRoom").accordion-button.fs-xl.fw-medium.py-2
        span.fs-base Living room
    #livingRoom.accordion-collapse.collapse.show(data-bs-parent="#shopCategories")
      .accordion-body.py-1.mb-1
        .form-check
          input(type="checkbox")#lr-all.form-check-input
          label(for="lr-all").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium View all
            span.fs-xs.text-muted.ms-auto 573
        .form-check
          input(type="checkbox" checked)#lr-vases.form-check-input
          label(for="lr-vases").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Vases
            span.fs-xs.text-muted.ms-auto 234
        .form-check
          input(type="checkbox")#lr-mirrors.form-check-input
          label(for="lr-mirrors").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Mirrors
            span.fs-xs.text-muted.ms-auto 182
        .form-check
          input(type="checkbox")#lr-paintings.form-check-input
          label(for="lr-paintings").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Paintings
            span.fs-xs.text-muted.ms-auto 133
        .form-check
          input(type="checkbox")#lr-furniture.form-check-input
          label(for="lr-furniture").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Furniture
            span.fs-xs.text-muted.ms-auto 24
  
  // Category collapse
  .accordion-item.mb-0
    h4.accordion-header
      button(type="button" data-bs-toggle="collapse" data-bs-target="#kitchen" aria-expanded="false" aria-controls="kitchen").accordion-button.collapsed.fs-xl.fw-medium.py-2
        span.fs-base Kitchen
    #kitchen.accordion-collapse.collapse(data-bs-parent="#shopCategories")
      .accordion-body.py-1.mb-1
        .form-check
          input(type="checkbox")#kitchen-all.form-check-input
          label(for="kitchen-all").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium View all
            span.fs-xs.text-muted.ms-auto 586
        .form-check
          input(type="checkbox")#kitchen-cutlery.form-check-input
          label(for="kitchen-cutlery").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Cutlery
            span.fs-xs.text-muted.ms-auto 387
        .form-check
          input(type="checkbox")#kitchen-storage.form-check-input
          label(for="kitchen-storage").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Storage
            span.fs-xs.text-muted.ms-auto 124
        .form-check
          input(type="checkbox")#kitchen-bins.form-check-input
          label(for="kitchen-bins").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Waste bins
            span.fs-xs.text-muted.ms-auto 59
        .form-check
          input(type="checkbox")#kitchen-sinks.form-check-input
          label(for="kitchen-sinks").form-check-label.d-flex.align-items-center
            span.text-nav.fw-medium Sinks
            span.fs-xs.text-muted.ms-auto 16

  // Add as many categories as you need 

<!-- 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">
  <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>

// Price range slider (based on noUISlider)
h3.h5 Price
.range-slider(data-start-min="280", data-start-max="720", data-min="0", data-max="1000", data-step="1")
  .range-slider-ui
  .d-flex
    .d-flex.align-items-center.w-50
      label(for="price-min").form-label.fs-xs.me-2.mb-0
        | From
      input(type="number", style="max-width: 6rem;")#price-min.form-control.form-control-sm.range-slider-value-min
    .d-flex.align-items-center.justify-content-end.w-50
      label(for="price-max").form-label.fs-xs.me-2.mb-0
        | To
      input(type="number", style="max-width: 6rem;")#price-max.form-control.form-control-sm.range-slider-value-max

<!-- 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>

// Color filter (custom checkboxes)
h3.h5 Color
.d-flex

  // Solid color (checked)
  .me-2.mb-2
    input(type="checkbox" value="Bluish sky" checked)#blue.btn-check
    label(for="blue").btn.btn-icon.btn-sm.btn-outline-secondary.rounded-circle
      span(style="width: 1.5rem; height: 1.5rem; background-color: #a1b7d9;").d-block.rounded-circle
  
  // Image pattern
  .me-2.mb-2
    input(type="checkbox" value="Woody brown")#wood.btn-check
    label(for="wood").btn.btn-icon.btn-sm.btn-outline-secondary.rounded-circle
      span(style="width: 1.5rem; height: 1.5rem; background-color: #af8352; background-image: url(assets/img/shop/pattern/wood.jpg);").d-block.bg-size-cover.bg-position-center.rounded-circle
  
  // Add as many color checkboxes as you need