<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="bsfilter-title mb-0">Products <span class="text-muted small" id="bsfilterCount">(6)</span></h1>
    <button class="btn btn-sm btn-dark" data-bs-toggle="offcanvas" data-bs-target="#bsfilterPanel">Filters</button>
  </div>
  <div class="row g-3" id="bsfilterGrid">
    <div class="col-6 col-md-4" data-cat="lighting" data-price="76"><div class="card p-3 text-center"><div class="bsfilter-thumb mb-2" style="--h:20"></div>Brass Lamp<br><span class="small text-muted">$76</span></div></div>
    <div class="col-6 col-md-4" data-cat="desk" data-price="18"><div class="card p-3 text-center"><div class="bsfilter-thumb mb-2" style="--h:150"></div>Cable Organizer<br><span class="small text-muted">$18</span></div></div>
    <div class="col-6 col-md-4" data-cat="lighting" data-price="42"><div class="card p-3 text-center"><div class="bsfilter-thumb mb-2" style="--h:230"></div>Desk Lamp Mini<br><span class="small text-muted">$42</span></div></div>
    <div class="col-6 col-md-4" data-cat="desk" data-price="29"><div class="card p-3 text-center"><div class="bsfilter-thumb mb-2" style="--h:300"></div>Desk Mat<br><span class="small text-muted">$29</span></div></div>
    <div class="col-6 col-md-4" data-cat="storage" data-price="52"><div class="card p-3 text-center"><div class="bsfilter-thumb mb-2" style="--h:60"></div>Monitor Stand<br><span class="small text-muted">$52</span></div></div>
    <div class="col-6 col-md-4" data-cat="storage" data-price="38"><div class="card p-3 text-center"><div class="bsfilter-thumb mb-2" style="--h:180"></div>Desk Organizer<br><span class="small text-muted">$38</span></div></div>
  </div>
</div>

<div class="offcanvas offcanvas-start" tabindex="-1" id="bsfilterPanel">
  <div class="offcanvas-header"><h5 class="offcanvas-title">Filters</h5><button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button></div>
  <div class="offcanvas-body">
    <h6 class="small fw-bold">Category</h6>
    <div class="form-check"><input class="form-check-input bsfilter-cat" type="checkbox" value="lighting" id="bsfCat1"><label class="form-check-label small" for="bsfCat1">Lighting</label></div>
    <div class="form-check"><input class="form-check-input bsfilter-cat" type="checkbox" value="desk" id="bsfCat2"><label class="form-check-label small" for="bsfCat2">Desk</label></div>
    <div class="form-check mb-3"><input class="form-check-input bsfilter-cat" type="checkbox" value="storage" id="bsfCat3"><label class="form-check-label small" for="bsfCat3">Storage</label></div>

    <h6 class="small fw-bold">Max price: $<span id="bsfilterMaxLabel">100</span></h6>
    <input type="range" class="form-range mb-3" id="bsfilterMax" min="15" max="100" value="100">

    <button class="btn btn-outline-secondary btn-sm w-100" id="bsfilterClear">Clear all</button>
  </div>
</div>

.bsfilter-title { font-weight: 800; letter-spacing: -0.01em; }
.bsfilter-thumb { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, hsl(calc(var(--h)) 60% 80%), hsl(calc(var(--h) + 40) 60% 60%)); }
.bsfilter-hidden { display: none !important; }

const grid = document.getElementById('bsfilterGrid');
const cats = document.querySelectorAll('.bsfilter-cat');
const maxRange = document.getElementById('bsfilterMax');
const maxLabel = document.getElementById('bsfilterMaxLabel');
const countEl = document.getElementById('bsfilterCount');
const clearBtn = document.getElementById('bsfilterClear');
const cards = document.querySelectorAll('#bsfilterGrid > div');

function apply() {
  const checked = Array.from(cats).filter(c => c.checked).map(c => c.value);
  const maxPrice = Number(maxRange.value);
  maxLabel.textContent = maxPrice;

  let visible = 0;
  cards.forEach(card => {
    const matchCat = checked.length === 0 || checked.includes(card.dataset.cat);
    const matchPrice = Number(card.dataset.price) <= maxPrice;
    const show = matchCat && matchPrice;
    card.classList.toggle('bsfilter-hidden', !show);
    if (show) visible++;
  });
  countEl.textContent = '(' + visible + ')';
}

cats.forEach(c => c.addEventListener('change', apply));
maxRange.addEventListener('input', apply);
clearBtn.addEventListener('click', () => {
  cats.forEach(c => c.checked = false);
  maxRange.value = 100;
  apply();
});

apply();