<style>.main-product__block+.main-product__block {
    margin-top: 30px;
  }

  .offer-cards12 {
    max-width: 520px;
    /* margin: 18px auto 0; */
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .offer-cards12__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
  }

  .offer-card12 {
    position: relative;
    padding: 12px;
    border-radius: 12px;
    box-shadow: 0 4px 10px #0000000f;
    transition: all .25s ease;
    overflow: hidden;
    min-height: 120px;
    cursor: pointer;
  }

  .offer-card12.active {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px #0000001f;
  }

  .offer-card12--prepaid12 {
    background: linear-gradient(135deg, #e8fff1, #dffbeb);
    border: 2px solid #00a651;
  }

  .offer-card12--cod {
    background: #ffffff;
    border: 1px solid #e5e7eb;
  }

  .offer-flag12 {
    position: absolute;
    left: 95px;
    top: 10px;
    background: #00a651;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 5px;
    border-radius: 6px;
  }

  .offer-badge12 {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
  }

  .offer-card12--prepaid12 .offer-badge12 {
    background: #00a651;
  }

  .offer-card12--cod .offer-badge12 {
    background: #111827;
  }

  .offer-card12__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #374151;
    text-transform: uppercase;
  }

  .offer-card12__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 6px;
  }

  .offer-card12__price .now {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
  }

  .offer-card12__price .was {
    font-size: 14px;
    color: #6b7280;
    text-decoration: line-through;
  }

  .offer-card12__sub {
    font-size: 12px;
    color: #374151;
  }

  @media (max-width: 540px) {
    .offer-cards12 {
      max-width: 100%;
      /* padding: 0 8px; */
    }

    .offer-cards12__grid {
      grid-template-columns: 1fr;
    }

    .offer-card12 {
      min-height: auto;
    }
  }

  @media screen and (max-width: 767px) {
    .main-product__block+.main-product__block {
      margin-top: 20px;
    }
  }</style><div class="main-product__block main-product__block-custom_liquid">
  <div class="offer-cards12">
    <div class="offer-cards12__grid">

      
      <div class="offer-card12 offer-card12--prepaid12 active" data-offer="prepaid">
        <div class="offer-flag12">Best value</div>
        <div class="offer-badge12">10% OFF</div>
        <div class="offer-card12__head">
          💳 <span>Prepaid</span>
        </div>
        <div class="offer-card12__price">
          <span class="now" id="prepaid-price"></span>
          <span class="was" id="prepaid-compare"></span>
        </div>
        <div class="offer-card12__sub">10% sitewide on dresses</div>
      </div>

      
      <div class="offer-card12 offer-card12--cod" data-offer="cod">
        <div class="offer-badge12"></div>
        <div class="offer-card12__head">
          📦 <span>Cash on Delivery</span>
        </div>
        <div class="offer-card12__price">
          <span class="now" id="cod-price"></span>
        </div>
      </div>

    </div>
  </div>
</div> <script type="litespeed/javascript">document.addEventListener("DOMContentLiteSpeedLoaded",function(){const prepaidCard=document.querySelector('[data-offer="prepaid"]');const codCard=document.querySelector('[data-offer="cod"]');const prepaidPriceEl=document.getElementById("prepaid-price");const prepaidCompareEl=document.getElementById("prepaid-compare");const codPriceEl=document.getElementById("cod-price");function formatINR(cents){return new Intl.NumberFormat('en-IN',{style:'currency',currency:'INR',maximumFractionDigits:0}).format(cents/100)}
function updatePrices(priceCents){const prepaidPrice=Math.round(priceCents*0.9);prepaidPriceEl.textContent=formatINR(prepaidPrice);prepaidCompareEl.textContent=formatINR(priceCents);codPriceEl.textContent=formatINR(priceCents)}
const basePrice={{product.selected_or_first_available_variant.price}};updatePrices(basePrice);prepaidCard.addEventListener("click",function(){prepaidCard.classList.add("active");codCard.classList.remove("active")});codCard.addEventListener("click",function(){codCard.classList.add("active");prepaidCard.classList.remove("active")});document.addEventListener("variant:change",function(event){if(event.detail.variant){updatePrices(event.detail.variant.price)}})})</script>