<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Review Request | HTML Email Template</title>
    <meta
      name="description"
      content="General product review request with order context, single CTA, and transparent incentive disclosure. Built with email-safe HTML/CSS."
    />
    <style type="text/css">
      a[x-apple-data-detectors],
      #MessageViewBody a,
      a[href^="tel"],
      a[href^="sms"] {
        color: inherit !important;
        text-decoration: none !important;
        font-weight: inherit !important;
      }
    </style>
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td {
          font-family: Segoe UI, Arial, sans-serif !important;
        }
        a {
          text-decoration: none;
        }
      </style>
    <![endif]-->
  </head>
  <body
    style="
      margin: 0;
      padding: 0;
      background-color: #f3f4f6;
      mso-line-height-rule: exactly;
    "
    bgcolor="#f3f4f6"
  >
<center>
    <!-- Outer wrapper -->
    <table
      role="presentation"
      cellpadding="0"
      cellspacing="0"
      border="0"
      width="100%"
      bgcolor="#f3f4f6"
      style="background-color: #f3f4f6"
    >
      <tr>
        <td align="center" style="padding: 20px 16px">
          <!-- Deal strip above card -->
          <!--[if (gte mso 9)|(IE)]>
          <table role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" width="600"><tr><td>
          <![endif]-->
          <table
            role="presentation"
            align="center"
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="
              max-width: 600px;
              background-color: #ecfdf5;
              border: 1px solid #a7f3d0;
              border-radius: 16px 16px 0 0;
              border-bottom: 0;
            "
            bgcolor="#ecfdf5"
          >
            <tr>
              <td
                align="center"
                style="
                  padding: 8px 12px;
                  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, Arial, sans-serif;
                  font-size: 13px;
                  color: #065f46;
                "
              >
                10% OFF on review • Valid 30 days
              </td>
            </tr>
          </table>
          <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
          <!-- Container -->
          <!--[if (gte mso 9)|(IE)]>
          <table role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" width="600"><tr><td>
          <![endif]-->
          <table
            role="presentation"
            align="center"
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="100%"
            style="
              max-width: 600px;
              background-color: #ffffff;
              border-radius: 0 0 16px 16px;
              border: 1px solid #e5e7eb;
            "
            bgcolor="#ffffff"
          >
            <!-- Minimal header -->
            <tr>
              <td align="center" style="padding: 28px 20px 0 20px">
                <img
                  src="acme.png"
                  alt="Acme"
                  width="72"
                  height="24"
                  style="
                    display: block;
                    border: 0;
                    outline: none;
                    line-height: 100%;
                    margin: 0 auto 12px auto;
                  "
                />
                <h1
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 26px;
                    line-height: 1.3;
                    color: #111827;
                    font-weight: 800;
                    text-align: center;
                  "
                >
                  Hi John, how was your purchase?
                </h1>
                <p
                  style="
                    margin: 6px 0 0 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 14px;
                    line-height: 1.6;
                    color: #6b7280;
                    text-align: center;
                  "
                >
                  A quick rating helps us improve.
                </p>
              </td>
            </tr>

            <!-- Products summary (max 3) -->
            <tr>
              <td style="padding: 24px 20px 0 20px">
                <table
                  role="presentation"
                  width="100%"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  style="
                    border: 1px solid #e5e7eb;
                    border-radius: 12px;
                    background: #f9fafb;
                  "
                  bgcolor="#f9fafb"
                >
                  <tr>
                    <td style="padding: 16px">
                      <!-- Item 1 -->
                      <table
                        role="presentation"
                        width="100%"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        style="margin: 0 0 16px 0"
                      >
                        <tr>
                          <td
                            width="64"
                            valign="top"
                            style="padding-right: 12px"
                          >
                            <img
                              src="apple-watch-ai-gen.webp"
                              alt="Apple Watch Ultra 2"
                              width="64"
                              height="64"
                              style="
                                display: block;
                                border: 0;
                                outline: none;
                                line-height: 100%;
                                border-radius: 10px;
                              "
                            />
                          </td>
                          <td
                            valign="top"
                            style="
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                              color: #111827;
                            "
                          >
                            <p
                              style="
                                margin: 0;
                                font-size: 15px;
                                font-weight: 700;
                              "
                            >
                              Apple Watch Ultra 2
                            </p>
                            <p
                              style="
                                margin: 4px 0 0 0;
                                font-size: 12px;
                                color: #6b7280;
                              "
                            >
                              Order #123456 • Delivered Sep 08, 2025
                            </p>
                          </td>
                        </tr>
                      </table>
                      <!-- Item 2 -->
                      <table
                        role="presentation"
                        width="100%"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        style="margin: 0 0 16px 0"
                      >
                        <tr>
                          <td
                            width="64"
                            valign="top"
                            style="padding-right: 12px"
                          >
                            <img
                              src="shoe-graphic.png"
                              alt="Running Shoes"
                              width="64"
                              height="64"
                              style="
                                display: block;
                                border: 0;
                                outline: none;
                                line-height: 100%;
                                border-radius: 10px;
                              "
                            />
                          </td>
                          <td
                            valign="top"
                            style="
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                              color: #111827;
                            "
                          >
                            <p
                              style="
                                margin: 0;
                                font-size: 15px;
                                font-weight: 700;
                              "
                            >
                              Running Shoes
                            </p>
                            <p
                              style="
                                margin: 4px 0 0 0;
                                font-size: 12px;
                                color: #6b7280;
                              "
                            >
                              Order #123456 • Delivered Sep 08, 2025
                            </p>
                          </td>
                        </tr>
                      </table>
                      <!-- Item 3 -->
                      <table
                        role="presentation"
                        width="100%"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                      >
                        <tr>
                          <td
                            width="64"
                            valign="top"
                            style="padding-right: 12px"
                          >
                            <img
                              src="cupcake-ai-gen.webp"
                              alt="Cupcake Gift Box"
                              width="64"
                              height="64"
                              style="
                                display: block;
                                border: 0;
                                outline: none;
                                line-height: 100%;
                                border-radius: 10px;
                              "
                            />
                          </td>
                          <td
                            valign="top"
                            style="
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                              color: #111827;
                            "
                          >
                            <p
                              style="
                                margin: 0;
                                font-size: 15px;
                                font-weight: 700;
                              "
                            >
                              Cupcake Gift Box
                            </p>
                            <p
                              style="
                                margin: 4px 0 0 0;
                                font-size: 12px;
                                color: #6b7280;
                              "
                            >
                              Order #123456 • Delivered Sep 08, 2025
                            </p>
                          </td>
                        </tr>
                      </table>
                      <!-- More count (show only if items > 3) -->
                      <p
                        style="
                          margin: 10px 0 0 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 13px;
                          color: #6b7280;
                        "
                      >
                        +2 more items
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- CTA -->
            <tr>
              <td align="center" style="padding: 24px 20px 6px 20px">
                <!--[if mso]>
                  <v:roundrect
                    xmlns:v="urn:schemas-microsoft-com:vml"
                    xmlns:w="urn:schemas-microsoft-com:office:word"
                    href="#"
                    style="height: 48px; v-text-anchor: middle; width: 260px"
                    arcsize="8%"
                    strokecolor="#111827"
                    fillcolor="#111827"
                  >
                    <w:anchorlock />
                    <center
                      style="
                        color: #ffffff;
                        font-family: Segoe UI, Arial, sans-serif;
                        font-size: 16px;
                        font-weight: 700;
                        letter-spacing: 0.2px;
                      "
                    >
                      Write a review
                    </center>
                  </v:roundrect>
                <![endif]-->
                <!--[if !mso]> -->
                <a
                  href="#"
                  target="_blank"
                  style="
                    display: inline-block;
                    background-color: #111827;
                    border: 1px solid #111827;
                    color: #ffffff;
                    text-decoration: none;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 16px;
                    font-weight: 800;
                    letter-spacing: 0.2px;
                    padding: 14px 22px;
                    border-radius: 8px;
                    mso-padding-alt: 0;
                  "
                >
                  Write a review
                </a>
                <!--<![endif]-->
              </td>
            </tr>

            <!-- Fallback link -->
            <tr>
              <td align="center" style="padding: 16px 20px 0 20px">
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 12px;
                    color: #9ca3af;
                  "
                >
                  Can’t click the button? Paste this into your browser:
                  <span style="color: #6b7280; word-break: break-all"
                    >https://example.com/review</span
                  >
                </p>
              </td>
            </tr>

            <!-- Footer/legal (minimal) -->
            <tr>
              <td align="center" style="padding: 24px 20px 24px 20px">
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 12px;
                    color: #6b7280;
                  "
                >
                  © 2025 Acme Inc. •
                  <a
                    href="mailto:support@acme.com"
                    style="color: #6b7280; text-decoration: underline"
                    >support@acme.com</a
                  >
                </p>
                <p
                  style="
                    margin: 8px 0 0 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 12px;
                    color: #6b7280;
                  "
                >
                  <a href="#" style="color: #6b7280; text-decoration: underline"
                    >Unsubscribe</a
                  >
                </p>
              </td>
            </tr>
          </table>
          <!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]-->
        </td>
      </tr>
    </table>
</center>
  </body>
</html>
