discount offers

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Biji design · discount offers</title>
  <!-- Fonts (Poppins & Twentieth Century fallback) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    /* main card – biji inspired: soft, rounded, with gentle shadow */
    .biji-card {
      max-width: 820px;
      width: 100%;
      background: #ffffff;
      border-radius: 32px;
      padding: 2rem 2rem 2.2rem;
      box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.08), 0 8px 24px -6px rgba(72, 49, 133, 0.06);
      transition: padding 0.2s;
    }

    /* selector-wrapper–qty acts as main container */
    .selector-wrapper--qty {
      grid-column-start: 1;
      width: 100%;
    }

    .product__block {
      padding-bottom: 0px;
    }

    .product__subheading h3 {
      font-size: 28px;
      display: block;
      color: #0b0b0b;
      font-family: 'Poppins', sans-serif;
      font-weight: 400;
      font-style: normal;
      margin: 0 0 14px;
      line-height: 1.25;
      letter-spacing: -0.3px;
    }

    .product__subheading h3 strong {
      font-weight: 600;
      background: linear-gradient(135deg, #3f2a6b 0%, #6b4a9e 80%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .product-page_discount-section {
      margin: 15px 0 0;
    }

    .product-page_discount-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ===== DISCOUNT ITEM – "biji" style ===== */
    .product-page_discount-item {
      display: flex;
      align-items: center;
      gap: 20px;
      justify-content: space-between;
      border: 1px solid #e7e1f0;
      padding: 12px 28px;
      background-image: linear-gradient(90deg, #f7f0fa, #f2f3fd);
      border-radius: 60px;           /* pill shape – biji touch */
      box-shadow: 0 2px 6px rgba(72, 49, 133, 0.02);
      transition: all 0.2s ease;
      backdrop-filter: blur(2px);
      flex-wrap: wrap;              /* for small screens */
    }

    .product-page_discount-item:hover {
      border-color: #b7a4d4;
      background-image: linear-gradient(90deg, #f3e7f1, #eeeffb);
      box-shadow: 0 6px 14px rgba(72, 49, 133, 0.06);
      transform: scale(1.01);
    }

    .product-page_discount-item h2 {
      font-size: 14px;
      font-weight: 600;
      color: #3f3a4b;
      margin: 0;
      font-family: 'Twentieth Century', 'Poppins', sans-serif;
      letter-spacing: 0.2px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .product-page_discount-item h2 strong {
      font-size: 16px;
      font-weight: 700;
      color: #1e142f;
    }

    .discount-code-details-content {
      width: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #483185;
    }

    .discount-code-details-content h4 {
      font-size: 16px;
      margin: 0;
      font-family: 'Twentieth Century', 'Poppins', sans-serif;
      font-weight: 400;
      line-height: 1.25;
      background: rgba(72, 49, 133, 0.04);
      padding: 4px 16px 4px 14px;
      border-radius: 40px;
      border: 1px solid rgba(72, 49, 133, 0.08);
      letter-spacing: 0.3px;
      color: #3f2670;
    }

    /* optional SVG icon – hidden by default (commented in html) but we keep style if needed */
    .discount-code-details-content svg {
      width: 20px;
      height: 20px;
      fill: currentColor;
      opacity: 0.7;
      transition: 0.2s;
      cursor: pointer;
    }
    .discount-code-details-content svg:hover {
      opacity: 1;
    }

    /* ===== FULLY RESPONSIVE ===== */

    /* medium screens */
    @media screen and (max-width: 700px) {
      .biji-card {
        padding: 1.5rem 1.2rem;
      }
      .product__subheading h3 {
        font-size: 24px;
        margin-bottom: 10px;
      }
      .product-page_discount-item {
        padding: 12px 20px;
        border-radius: 40px;
        gap: 12px;
      }
    }

    /* small screens (tablets & large phones) */
    @media screen and (max-width: 600px) {
      .product-page_discount-item {
        padding: 14px 16px;
        border-radius: 40px;
        gap: 8px;
        flex-wrap: wrap;
      }

      .product-page_discount-item h2 {
        font-size: 13px;
        flex: 1 1 auto;
      }
      .product-page_discount-item h2 strong {
        font-size: 14px;
      }

      .discount-code-details-content h4 {
        font-size: 13px;
        padding: 3px 14px 3px 12px;
      }

      .product-page_discount-item {
        background-image: linear-gradient(90deg, #f5ecf4, #f0f1fc);
      }
    }

    /* mobile first – extra small */
    @media only screen and (max-width: 480px) {
      .biji-card {
        padding: 1rem 0.8rem;
        border-radius: 28px;
      }

      .product__subheading h3 {
        font-size: 20px;
        margin-bottom: 8px;
      }

      .product-page_discount-item {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 16px 14px;
        border-radius: 28px;
        background-image: linear-gradient(135deg, #f7f0fa, #f2f3fd);
      }

      .product-page_discount-item h2 {
        font-size: 14px;
        justify-content: center;
        text-align: center;
      }
      .product-page_discount-item h2 strong {
        font-size: 15px;
      }

      .discount-code-details-content {
        justify-content: center;
        width: 100%;
      }
      .discount-code-details-content h4 {
        font-size: 13px;
        padding: 5px 18px;
        width: fit-content;
        background: rgba(72, 49, 133, 0.02);
        border-color: rgba(72, 49, 133, 0.1);
      }

      /* product__block padding override from original */
      .product__block {
        padding-bottom: 0px;
      }
      .product-page_discount-section {
        margin: 8px 0 0;
      }
    }

    /* for screens up to 767px (original media) */
    @media only screen and (max-width: 767px) {
      .product__block {
        padding-bottom: 8px;
      }
      .product__subheading h3 {
        font-size: 20px;
      }
    }

    /* restore padding for very tiny screens */
    @media screen and (max-width: 380px) {
      .biji-card {
        padding: 0.8rem 0.5rem;
      }
      .product-page_discount-item {
        padding: 14px 8px;
      }
      .product-page_discount-item h2 {
        font-size: 12px;
      }
      .product-page_discount-item h2 strong {
        font-size: 13px;
      }
      .discount-code-details-content h4 {
        font-size: 12px;
        padding: 4px 12px;
      }
    }

    /* extra polish: biji charm */
    .product-page_discount-item:first-child {
      background-image: linear-gradient(90deg, #f5eaf9, #edeefc);
      border-color: #d7c8e6;
    }

    .product-page_discount-item:last-child {
      background-image: linear-gradient(90deg, #f0ebf8, #eaeafd);
    }
  </style>
</head>
<body>
  <div class="biji-card">
    <!-- exact same structure as given, wrapped inside biji-card for responsiveness -->
    <div class="selector-wrapper selector-wrapper--qty">
      <div class="product__block" style="--PBB:0px;">
        <div class="product__subheading">
          <h3><strong>Exclusive Site Offer</strong></h3>
        </div>
      </div>
      <div class="product-page_discount-section">
        <div class="product-page_discount-list">

          <div class="product-page_discount-item">
            <h2><strong>Buy 1 Get 10% Off</strong></h2>
            <div class="discount-code-details">
              <div class="discount-code-details-content">
                <h4>Auto Apply</h4>
                <!-- SVG copy icon (commented in original, kept as is) -->
              </div>
            </div>
          </div>

          <div class="product-page_discount-item">
            <h2><strong>Buy 2 Get 15% Off</strong></h2>
            <div class="discount-code-details">
              <div class="discount-code-details-content">
                <h4>Auto Apply</h4>
                <!-- <svg id="copyCode2" onclick="copyCode2()" ... > -->
              </div>
            </div>
          </div>

          <div class="product-page_discount-item">
            <h2><strong>Buy 3 Get 20% Off</strong></h2>
            <div class="discount-code-details">
              <div class="discount-code-details-content">
                <h4>Auto Apply</h4>
                <!-- <svg id="copyCode3" onclick="copyCode3()" ... > -->
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>
</html>