<div class="container py-5">
  <div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="bscard-title">Desk Essentials</h1>
    <div class="bscard-cart">
      <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
      Cart · <span id="bscardCartCount">0</span> · $<span id="bscardCartTotal">0.00</span>
    </div>
  </div>

  <div class="row g-4" id="bscardGrid">
    <div class="col-sm-6 col-lg-4">
      <div class="card bscard-card h-100">
        <div class="bscard-media" style="--h1:245;--h2:280"><span class="badge bg-dark bscard-badge">New</span></div>
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-1">Walnut Desk Organizer</h5>
          <p class="bscard-price mb-3">$38.00</p>
          <button class="btn btn-outline-dark mt-auto bscard-add" data-name="Walnut Desk Organizer" data-price="38.00">Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card bscard-card h-100">
        <div class="bscard-media" style="--h1:20;--h2:60"></div>
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-1">Ceramic Pen Cup</h5>
          <p class="bscard-price mb-3">$14.00</p>
          <button class="btn btn-outline-dark mt-auto bscard-add" data-name="Ceramic Pen Cup" data-price="14.00">Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card bscard-card h-100">
        <div class="bscard-media" style="--h1:150;--h2:190"><span class="badge bg-danger bscard-badge">-20%</span></div>
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-1">Brass Task Lamp</h5>
          <p class="bscard-price mb-3"><span class="text-decoration-line-through text-muted small me-1">$95.00</span>$76.00</p>
          <button class="btn btn-outline-dark mt-auto bscard-add" data-name="Brass Task Lamp" data-price="76.00">Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card bscard-card h-100">
        <div class="bscard-media" style="--h1:310;--h2:100"></div>
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-1">Linen Desk Mat</h5>
          <p class="bscard-price mb-3">$29.00</p>
          <button class="btn btn-outline-dark mt-auto bscard-add" data-name="Linen Desk Mat" data-price="29.00">Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card bscard-card h-100">
        <div class="bscard-media" style="--h1:200;--h2:230"></div>
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-1">Oak Monitor Stand</h5>
          <p class="bscard-price mb-3">$52.00</p>
          <button class="btn btn-outline-dark mt-auto bscard-add" data-name="Oak Monitor Stand" data-price="52.00">Add to cart</button>
        </div>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <div class="card bscard-card h-100">
        <div class="bscard-media" style="--h1:80;--h2:260"><span class="badge bg-dark bscard-badge">New</span></div>
        <div class="card-body d-flex flex-column">
          <h5 class="card-title mb-1">Felt Cable Organizer</h5>
          <p class="bscard-price mb-3">$18.00</p>
          <button class="btn btn-outline-dark mt-auto bscard-add" data-name="Felt Cable Organizer" data-price="18.00">Add to cart</button>
        </div>
      </div>
    </div>
  </div>
</div>

body { background: #fafafa; }

.bscard-title { font-weight: 800; letter-spacing: -0.01em; margin: 0; }

.bscard-cart {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2937;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 7px 14px;
}

.bscard-card {
  border: 1px solid #eceef1;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.bscard-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.08); }

.bscard-media {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, hsl(calc(var(--h1)) 55% 88%), hsl(calc(var(--h2)) 55% 80%));
}
.bscard-badge { position: absolute; top: 10px; left: 10px; font-size: 10.5px; }

.bscard-price { font-weight: 700; color: #111827; }

.bscard-add { transition: background .15s, color .15s, transform .1s; }
.bscard-add.bscard-added {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.bscard-add.bscard-pulse { transform: scale(0.96); }

const grid = document.getElementById('bscardGrid');
const cartCountEl = document.getElementById('bscardCartCount');
const cartTotalEl = document.getElementById('bscardCartTotal');

let count = 0;
let total = 0;

grid.addEventListener('click', e => {
  const btn = e.target.closest('.bscard-add');
  if (!btn) return;

  const price = parseFloat(btn.dataset.price);
  count += 1;
  total += price;

  cartCountEl.textContent = count;
  cartTotalEl.textContent = total.toFixed(2);

  // Brief "Added" confirmation on the button itself, then back to normal —
  // real feedback that the click registered, without a toast or alert.
  const original = btn.textContent;
  btn.textContent = 'Added ✓';
  btn.classList.add('bscard-added', 'bscard-pulse');
  btn.disabled = true;

  setTimeout(() => btn.classList.remove('bscard-pulse'), 150);
  setTimeout(() => {
    btn.textContent = original;
    btn.classList.remove('bscard-added');
    btn.disabled = false;
  }, 1100);
});