<!-- 1) Add Material Icons (once per page, ideally in <head>) -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@300;400;600&display=swap" rel="stylesheet">

<!-- 2) Tiny CSS for the icon badge -->
<style>
  .cat-card { position: relative; }
  .cat-card .icon-badge{
    position: absolute; top: 12px; right: 12px;
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,.95);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    z-index: 2;
  }
  .cat-card .material-symbols-outlined{
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 48;
    font-size: 32px; color: #A11A1F; line-height: 1;
  }
</style>

<!-- 3) Your cards with images unchanged + Material Icons badges -->
<div class="container">
  <div class="row mt-5" style="padding-bottom:63px; justify-content:center;">

    <!-- Boys -->
    <div class="col-lg-3 col-md-6 mb-4 mt-4">
      <a href="{{@SITE}}/shop/boys">
        <div class="card cat-card" style="width: 30rem; height: 38rem;">
          <div class="icon-badge" aria-hidden="true">
            <span class="material-symbols-outlined">boy</span>
          </div>
          <img src="https://bake2bash.nl/ui/images/boys.jpg" class="card-img-top" height="100%" alt="Boys">
          <div class="card-body">
            <h3 class="categorie-name mb-1" style="color:#A11A1F; font-weight:bold; font-size:20px; text-align:center; padding:18px;">
              BOYS
            </h3>
          </div>
        </div>
      </a>
    </div>

    <!-- Girls -->
    <div class="col-lg-3 col-md-6 mb-4 mt-4">
      <a href="{{@SITE}}/shop/girls">
        <div class="card cat-card" style="width: 30rem; height: 38rem;">
          <div class="icon-badge" aria-hidden="true">
            <span class="material-symbols-outlined">girl</span>
          </div>
          <img src="https://bake2bash.nl/ui/images/girls.jpg" class="card-img-top" height="100%" alt="Girls">
          <div class="card-body">
            <h3 class="categorie-name mb-1" style="color:#A11A1F; font-weight:bold; font-size:20px; text-align:center; padding:18px;">
              GIRLS
            </h3>
          </div>
        </div>
      </a>
    </div>

    <!-- Babies -->
    <div class="col-lg-3 col-md-6 mb-4 mt-4">
      <a href="{{@SITE}}/shop/babies">
        <div class="card cat-card" style="width: 30rem; height: 38rem;">
          <div class="icon-badge" aria-hidden="true">
            <span class="material-symbols-outlined">child_care</span>
          </div>
          <img src="https://bake2bash.nl/ui/images/babies.jpg" class="card-img-top" height="100%" alt="Babies">
          <div class="card-body">
            <h3 class="categorie-name mb-1" style="color:#A11A1F; font-weight:bold; font-size:20px; text-align:center; padding:18px;">
              BABIES
            </h3>
          </div>
        </div>
      </a>
    </div>

    <!-- For Him -->
    <div class="col-lg-3 col-md-6 mb-4 mt-4">
      <a href="{{@SITE}}/shop/for-him">
        <div class="card cat-card" style="width: 30rem; height: 38rem;">
          <div class="icon-badge" aria-hidden="true">
            <span class="material-symbols-outlined">man</span>
          </div>
          <img src="https://bake2bash.nl/ui/images/forhim.jpg" class="card-img-top" height="100%" alt="For Him">
          <div class="card-body">
            <h3 class="categorie-name mb-1" style="color:#A11A1F; font-weight:bold; font-size:20px; text-align:center; padding:18px;">
              FOR HIM
            </h3>
          </div>
        </div>
      </a>
    </div>

    <!-- For Her -->
    <div class="col-lg-3 col-md-6 mb-4 mt-4">
      <a href="{{@SITE}}/shop/for-her">
        <div class="card cat-card" style="width: 30rem; height: 38rem;">
          <div class="icon-badge" aria-hidden="true">
            <span class="material-symbols-outlined">woman</span>
          </div>
          <img src="https://bake2bash.nl/ui/images/forher.jpg" class="card-img-top" height="100%" alt="For Her">
          <div class="card-body">
            <h3 class="categorie-name mb-1" style="color:#A11A1F; font-weight:bold; font-size:20px; text-align:center; padding:18px;">
              FOR HER
            </h3>
          </div>
        </div>
      </a>
    </div>

  </div>
</div>
