offers

<style>
  .product-info__block-item:is([data-block-type=variant-picker], [data-block-type=product-variations], [data-block-type=separator], [data-block-type=description], [data-block-type=text], [data-block-type=liquid], [data-block-type=share-buttons]) {
    --product-info-gap: 24px;
  }

  .bfs-offers-wrapper {
    border: 2px dashed #97d4e1;
    padding: 18px;
    border-radius: 14px;
    background: #fff;
    margin: 25px 0;
  }

  .bfs-tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
  }

  .bfs-tab.active {
    color: #e85c4a;
  }

  .bfs-tab {
    font-size: 17px;
    cursor: pointer;
    position: relative;
    padding-bottom: 4px;
  }

  .bfs-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 70%;
    height: 2px;
    background: #e85c4a;
    border-radius: 3px;
  }

  .bfs-tab {
    font-size: 17px;
    cursor: pointer;
    color: #7a7a7a;
    position: relative;
    padding-bottom: 4px;
  }

  .bfs-offer-row {
    display: flex;
    gap: 22px;
    padding: 20px 0;
    border-bottom: 1px solid #f1f1f1;
    position: relative;
  }

  .bfs-left-block {
    width: 80px;
    min-width: 80px;
    text-align: center;
    color: #3CA3C3;
  }

  .bfs-left-amt {
    font-size: 28px;
    font-weight: 600;
  }

  .bfs-left-text {
    font-size: 12px;
  }

  .bfs-right {
    flex: 1;
    font-size: 14px;
  }

  .bfs-highlight {
    background: #fff1ee;
    color: #e85c4a;
    padding: 6px 10px;
    border-radius: 8px;
    display: inline-block;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .bfs-code {
    font-weight: 700;
    letter-spacing: 1px;
  }

  .bfs-read {
    color: #e85c4a;
    cursor: pointer;
    font-size: 14px;
  }

  .bfs-more {
    margin-top: 10px;
    color: #444;
  }

  .bfs-more ul {
    padding-left: 18px;
  }

  ul {
    margin-inline-start: 14px;
  }

  .bfs-more li {
    margin-bottom: 6px;
  }

  :where(ol, ul):not(.unstyled-list) li {
    padding-inline-start: 4px;
    margin-block-start: 0 !important;
  }

  b {
    font-weight: bolder;
  }

  .bfs-eligible-tag {
    position: absolute;
    right: 0;
    top: 0;
    background: #77dd77;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    display: none;
  }

  .bfs-upi-row {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #f1f1f1;
  }

  .bfs-upi-logo {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bfs-upi-logo img {
    width: 70%;
  }

  img {
    color: #0000;
    max-width: 100%;
    height: auto;
  }

  .bfs-upi-title {
    font-size: 15px;
  }

  .bfs-upi-small {
    font-size: 13px;
    color: #777;
    font-style: italic;
  }

  @media only screen and (min-width: 699px) {
    #shopify-section-template--18350312652970__main img {
      border-radius: 6px;
    }
  }

  @media (max-width: 600px) {
    .bfs-tab {
      font-size: 15px;
    }

    .bfs-left-block {
      width: 60px;
      min-width: 60px;
    }

    .bfs-left-amt {
      font-size: 22px;
    }
  }
</style>

<div class="product-info__block-item" data-block-id="liquid_dxQmm8" data-block-type="liquid">
  <div class="liquid">
    <div class="bfs-offers-wrapper">

      <div class="bfs-tabs">
        <div class="bfs-tab active" data-tab="brand">Brand Offers</div>
        <div class="bfs-tab" data-tab="upi">UPI Offers</div>
      </div>

      <!-- BRAND OFFER -->
      <div id="bfs-brand-box" style="display: block;">
        <div class="bfs-offer-row" id="offer5" data-min="9">
          <div class="bfs-left-block">
            <div class="bfs-left-amt">10%</div>
            <div class="bfs-left-text">OFF</div>
          </div>

          <div class="bfs-right">
            <div class="bfs-highlight">
              Enjoy 10% OFF your first order – Code: <span class="bfs-code">WELCOME10</span>
            </div>
            <span class="bfs-read" data-target="offer5">Read more</span>
            <div class="bfs-more" style="display: none;">
              <ul>
                <li>Use coupon code <b>WELCOME10</b> at checkout.</li>
                <li>Applicable on your first order.</li>
                <li>Cannot be combined with other offers.</li>
              </ul>
            </div>
          </div>

          <span class="bfs-eligible-tag">Unlocked 🎉</span>
        </div>
      </div>

      <!-- UPI OFFERS (UNCHANGED FROM SOURCE) -->
      <div id="bfs-upi-box" style="display: none;">

        <div class="bfs-upi-row">
          <div class="bfs-upi-logo">
            <img
              src="https://cdn.shopify.com/s/files/1/0607/1209/1818/files/6_48871a61-2270-4b46-9efa-cdb68504d96e.png">
          </div>
          <div>
            <div class="bfs-upi-title">Upto ₹100 cashback on using POP UPI</div>
            <div class="bfs-upi-small">Other T&Cs may apply</div>
          </div>
        </div>

        <div class="bfs-upi-row">
          <div class="bfs-upi-logo">
            <img
              src="https://cdn.shopify.com/s/files/1/0607/1209/1818/files/5_a25fbf2a-1691-40e0-98ce-e69b82e440d3.png">
          </div>
          <div>
            <div class="bfs-upi-title">Upto ₹100 cashback on Airtel Payments Bank UPI</div>
            <div class="bfs-upi-small">Other T&Cs may apply</div>
          </div>
        </div>

        <div class="bfs-upi-row">
          <div class="bfs-upi-logo">
            <img
              src="https://cdn.shopify.com/s/files/1/0607/1209/1818/files/4_817a98aa-6542-48f1-a3a8-b587f8c0a78e.png">
          </div>
          <div>
            <div class="bfs-upi-title">Upto ₹200 instant cashback on using CRED UPI</div>
            <div class="bfs-upi-small">Other T&Cs may apply</div>
          </div>
        </div>

        <div class="bfs-upi-row">
          <div class="bfs-upi-logo">
            <img src="https://cdn.shopify.com/s/files/1/0607/1209/1818/files/7.png">
          </div>
          <div>
            <div class="bfs-upi-title">Upto ₹50 cashback via SuperMoney UPI</div>
            <div class="bfs-upi-small">Other T&Cs may apply</div>
          </div>
        </div>

        <div class="bfs-upi-row">
          <div class="bfs-upi-logo">
            <img
              src="https://cdn.shopify.com/s/files/1/0607/1209/1818/files/3_ac8f0f2f-2308-4398-a719-e06c4ed68d76.png">
          </div>
          <div>
            <div class="bfs-upi-title">Flat 1% Gold coins + Upto ₹300 cashback on Paytm UPI</div>
            <div class="bfs-upi-small">Other T&Cs may apply</div>
          </div>
        </div>

        <div class="bfs-upi-row">
          <div class="bfs-upi-logo">
            <img
              src="https://cdn.shopify.com/s/files/1/0607/1209/1818/files/2_8cfc0574-430b-488b-9987-7b794484638d.png">
          </div>
          <div>
            <div class="bfs-upi-title">Upto ₹200 cashback on MobiKwik UPI</div>
            <div class="bfs-upi-small">Other T&Cs may apply</div>
          </div>
        </div>

        <div class="bfs-upi-row">
          <div class="bfs-upi-logo">
            <img
              src="https://cdn.shopify.com/s/files/1/0607/1209/1818/files/1_2e4d105d-2bf8-4801-8826-631db6c69e26.png">
          </div>
          <div>
            <div class="bfs-upi-title">Upto ₹350 cashback on min ₹150 with Amazon Pay</div>
            <div class="bfs-upi-small">Other T&Cs may apply</div>
          </div>
        </div>

      </div>
    </div>

    <script>
      document.querySelectorAll(".bfs-tab").forEach(tab => {
        tab.addEventListener("click", function () {
          document.querySelectorAll(".bfs-tab").forEach(t => t.classList.remove("active"));
          this.classList.add("active");

          document.getElementById("bfs-brand-box").style.display =
            this.dataset.tab === "brand" ? "block" : "none";

          document.getElementById("bfs-upi-box").style.display =
            this.dataset.tab === "upi" ? "block" : "none";
        });
      });

      document.querySelectorAll(".bfs-read").forEach(btn => {
        btn.addEventListener("click", function () {
          const more = document.getElementById(this.dataset.target).querySelector(".bfs-more");
          more.style.display = more.style.display === "block" ? "none" : "block";
          this.textContent = more.style.display === "block" ? "Read less" : "Read more";
        });
      });

      async function BFS_checkEligibility() {
        const res = await fetch("/cart.js");
        const cart = await res.json();
        const total = cart.total_price / 100;

        document.querySelectorAll(".bfs-offer-row").forEach(row => {
          row.classList.toggle("bfs-eligible", total >= row.dataset.min);
        });
      }

      BFS_checkEligibility();
      setInterval(BFS_checkEligibility, 2000);
    </script>
  </div>
</div>