<h2 style="font-size:2.2rem; text-align:center; margin-top:32px; margin-bottom:24px; color:#fff; letter-spacing:2px;">Our Products</h2>
<div class="store-grid" style="border-radius: 8px; padding: 16px;"> 
  <?php foreach ($items as $p): ?>
    <?php if (stripos($p['name'], 'bottle') !== false): ?>
      <div class="store-card" >
        <img src="<?= !empty($p['image']) ? htmlspecialchars($p['image']) : \Tshen\asset('redbottle.png') ?>"
          alt="<?= htmlspecialchars($p['name']) ?>" class="store-image">
        <div class="store-name"><?= htmlspecialchars($p['name']) ?></div>
        <div class="store-price">£<?= number_format((float)$p['price'], 2) ?></div>
        <div class="store-buy-row">
          <form method="post" action="<?= \Tshen\url('/store/checkout') ?>" class="store-buy-form" style="display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:8px;">
            <?= \Tshen\csrf_field() ?>
            <input type="hidden" name="product_id" value="<?= (int)$p['id'] ?>" />
            <input type="number" name="qty" min="1" value="1" class="store-qty-inline" style="width:48px; text-align:center;" />
            <input type="text" name="code" placeholder="Discount code" class="store-code-inline" style="width:110px;" />
            <button type="submit" class="store-buy-btn-inline">Buy</button>
          </form>
        </div>
      </div>
    <?php endif; ?>
  <?php endforeach; ?>

  <!-- Add more sample products to fill the grid and make it look closer -->
  <?php for ($i = 0; $i < 1; $i++): ?>
    <div class="store-card">
      <img src="<?= \Tshen\asset('blackbottle.png') ?>" alt="bottle" class="store-image">
      <div class="store-name">TSHEN Bottle</div>
      <div class="store-price">£<?= 12 + $i * 5 ?>.00</div>
      <div class="store-buy-row">
        <form method="post" action="<?= \Tshen\url('/store/checkout') ?>" class="store-buy-form" style="display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:8px;">
          <?= \Tshen\csrf_field() ?>
          <input type="hidden" name="product_id" value="999<?= $i ?>" />
          <input type="number" name="qty" min="1" value="1" class="store-qty-inline" style="width:48px; text-align:center;" />
          <input type="text" name="code" placeholder="Discount code" class="store-code-inline" style="width:110px;" />
          <button type="submit" class="store-buy-btn-inline">Buy</button>
        </form>
      </div>
    </div>
  <?php endfor; ?>
  <?php for ($i = 0; $i < 1; $i++): ?>
    <div class="store-card">
      <img src="<?= \Tshen\asset('whitebottle.png') ?>" alt="bottle" class="store-image">
      <div class="store-name">TSHEN Bottle</div>
      <div class="store-price">£<?= 12 + $i * 5 ?>.00</div>
      <div class="store-buy-row">
        <form method="post" action="<?= \Tshen\url('/store/checkout') ?>" class="store-buy-form" style="display:flex; gap:8px; justify-content:center; align-items:center; margin-bottom:8px;">
          <?= \Tshen\csrf_field() ?>
          <input type="hidden" name="product_id" value="999<?= $i ?>" />
          <input type="number" name="qty" min="1" value="1" class="store-qty-inline" style="width:48px; text-align:center;" />
          <input type="text" name="code" placeholder="Discount code" class="store-code-inline" style="width:110px;" />
          <button type="submit" class="store-buy-btn-inline">Buy</button>
        </form>
      </div>
    </div>
  <?php endfor; ?>
   </div>