<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Gallery (No Modal) with Uniform CTA</title>

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <style>
    :root{
      /* brand tints (same as your screenshot) */
      --btn-left:  #B2E6E3;  /* teal tint */
      --btn-right: #FFBCBA;  /* pink tint  */
      --btn-text:  #0f172a;  /* near-black */
      --btn-border1:#FFBCBA;
      --btn-border2:#B2E6E3;
      --btn-shadow: 0 10px 24px rgba(0,0,0,.08);
      --btn-shadow-hover: 0 12px 28px rgba(0,0,0,.14);
    }

    /* keep your images untouched; only subtle hover */
    .gallery-item { display:block; }
    .gallery-item img{
      border-radius:12px;
      box-shadow:0 1rem 1rem rgba(0,0,0,.10);
      transition:box-shadow .2s ease;
      width:100%;
      height:auto;
    }
    .gallery-item:hover img{ box-shadow:0 1rem 1rem rgba(0,0,0,.25); }

    /* rounded card feel like your screenshot */
    .gallery-grid .col{
      border:1px solid rgba(0,0,0,.06);
      border-radius:18px;
      padding:14px;
      box-shadow:0 6px 18px rgba(0,0,0,.06);
      background:#fff;
    }

    /* unified CTA style (use class on any button to match) */
    .cta-btn{
      --radius:16px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:100%;
      padding:.9rem 1rem;
      font-weight:800;
      font-size:1rem;
      line-height:1;
      letter-spacing:.2px;
      color:var(--btn-text);
      text-decoration:none;
      border-radius:var(--radius);

      /* soft two-tone interior + gradient border */
      background:
        linear-gradient(90deg,
          color-mix(in srgb, var(--btn-left) 30%, #fff 70%) 0 65%,
          color-mix(in srgb, var(--btn-right) 30%, #fff 70%) 65% 100%) padding-box,
        linear-gradient(135deg, var(--btn-border1), var(--btn-border2)) border-box;
      border:2px solid transparent;

      box-shadow:var(--btn-shadow);
      transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
    }
    .cta-btn:hover{ transform:translateY(-1px); box-shadow:var(--btn-shadow-hover); }
    .cta-btn:active{ transform:translateY(0); }
  </style>
</head>
<body>

<section class="photo-gallery">
  <div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-5 gallery-grid p-5 mb-5 mt-3">

      <!-- keep your image code EXACTLY as-is -->
      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/w1.jpg">
          <img src="/bake2bash/uploads/category/w1.jpg" class="img-fluid" alt="ANNIVERSARY CAKE1">
        </a>
      </div>

      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/w2.jpg">
          <img src="/bake2bash/uploads/category/w2.jpg" class="img-fluid" alt="ANNIVERSARY CAKE2">
        </a>
      </div>

      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/w3.jpg">
          <img src="/bake2bash/uploads/category/w3.jpg" class="img-fluid" alt="ANNIVERSARY CAKE3">
        </a>
      </div>

      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/w4.jpg">
          <img src="/bake2bash/uploads/category/w4.jpg" class="img-fluid" alt="ANNIVERSARY CAKE4">
        </a>
      </div>

      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/w5.jpg">
          <img src="/bake2bash/uploads/category/w5.jpg" class="img-fluid" alt="ANNIVERSARY CAKE5">
        </a>
      </div>

      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/w6.jpg">
          <img src="/bake2bash/uploads/category/w6.jpg" class="img-fluid" alt="ANNIVERSARY CAKE6">
        </a>
      </div>

      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/wed7.jpg">
          <img src="/bake2bash/uploads/category/wed7.jpg" class="img-fluid" alt="ANNIVERSARY CAKE7">
        </a>
      </div>

      <div class="col">
        <a class="gallery-item" href="/bake2bash/uploads/category/w8.jpg">
          <img src="/bake2bash/uploads/category/w8.jpg" class="img-fluid" alt="ANNIVERSARY CAKE8">
        </a>
      </div>

    </div>
  </div>
</section>

<!-- Bootstrap Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
  // ONE place to switch the label or destination
  const BTN_LABEL  = 'Order On WhatsApp <strong>Chat</strong>'; // or 'Add to Bag'
  const WA_NUMBER  = '3163423959'; // change to your number
  const makeHref   = (alt, src) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(
    `Hi, I'm interested in this cake: ${alt} (${location.origin}${src})`
  )}`;

  document.addEventListener('DOMContentLoaded', () => {
    const grid  = document.querySelector('.gallery-grid');
    const items = grid.querySelectorAll('a.gallery-item');

    items.forEach(link => {
      const img   = link.querySelector('img');
      const alt   = img?.getAttribute('alt') || 'Cake';
      const src   = link.getAttribute('href');

      // inject CTA under each image (images untouched)
      const btn   = document.createElement('a');
      btn.className = 'btn cta-btn mt-3';
      btn.innerHTML = BTN_LABEL;
      btn.href      = makeHref(alt, src);
      btn.target    = '_blank';
      btn.rel       = 'noopener';

      link.insertAdjacentElement('afterend', btn);
    });
  });
</script>

</body>
</html>
