<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Abandoned Cart | HTML Email Template</title>
    <meta
      name="description"
      content="Recapture lost sales with this abandoned cart html email template featuring dynamic product displays, irresistible discount incentives, and cross-client compatible design."
    />
    <!--[if mso]>
      <style type="text/css">
        body,
        table,
        td {
          font-family: "Segoe UI", Arial, sans-serif !important;
        }
      </style>
    <![endif]-->
  </head>
  <body style="margin: 0; padding: 0; background-color: #0ea5e9">
<center>
    <!-- Preheader (hidden) -->
    <div
      style="
        display: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        mso-hide: all;
      "
    >
      Still thinking it over? Your items are waiting. Complete your order while
      they're in stock.
    </div>

    <!-- Outer Wrapper -->
    <table
      role="presentation"
      cellpadding="0"
      cellspacing="0"
      border="0"
      width="100%"
      style="background-color: #ffffff; min-height: 100vh"
    >
      <tr>
        <td align="center" style="padding: 40px 16px">
          <!-- Container -->
          <table
            role="presentation"
            cellpadding="0"
            cellspacing="0"
            border="0"
            width="600"
            style="
              width: 100%;
              max-width: 600px;
              background: #ffffff;
              border-radius: 20px;
              overflow: hidden;
              box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
            "
          >
            <!-- Header -->
            <tr>
              <td
                bgcolor="#0ea5e9"
                style="
                  background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
                  padding: 36px 36px 56px 36px;
                  text-align: center;
                "
              >
                <img
                  src="https://nirajrajgor.github.io/email-templates/acme_white.png"
                  alt="Company Logo"
                  width="120"
                  height="45"
                  style="
                    display: block;
                    height: auto;
                    border: 0;
                    outline: none;
                    text-decoration: none;
                    margin: 0 auto 20px auto;
                  "
                />
                <h1
                  style="
                    margin: 0 0 8px 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 32px;
                    line-height: 1.2;
                    color: #ffffff;
                    font-weight: 800;
                    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
                  "
                >
                  You left something behind
                </h1>
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 16px;
                    color: rgba(255, 255, 255, 0.9);
                  "
                >
                  Finish your checkout in just a few clicks
                </p>
              </td>
            </tr>

            <!-- Main Copy -->
            <tr>
              <td style="padding: 28px 36px 12px 36px; text-align: left">
                <p
                  style="
                    margin: 0 0 12px 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 18px;
                    color: #111827;
                    font-weight: 600;
                  "
                >
                  Hi [First name],
                </p>
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 15px;
                    line-height: 1.6;
                    color: #374151;
                  "
                >
                  Looks like you didn't get a chance to complete your order.
                  We've saved your cart with the items below.
                </p>
              </td>
            </tr>

            <!-- Cart Items List -->
            <tr>
              <td style="padding: 12px 24px 0 24px">
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  style="
                    border: 1px solid #e5e7eb;
                    border-radius: 12px;
                    overflow: hidden;
                    min-width: 100%;
                  "
                >
                  <!-- Item 1 -->
                  <tr>
                    <td style="padding: 16px">
                      <table
                        role="presentation"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        width="100%"
                        style="min-width: 100%"
                      >
                        <tr>
                          <td
                            width="96"
                            valign="top"
                            style="padding-right: 16px"
                          >
                            <img
                              src="https://nirajrajgor.github.io/email-templates/shoe-ai-gen.png"
                              alt="Running Shoes"
                              width="96"
                              height="96"
                              style="
                                display: block;
                                width: 96px;
                                height: 96px;
                                border-radius: 8px;
                                border: 1px solid #f3f4f6;
                              "
                            />
                          </td>
                          <td
                            valign="top"
                            style="
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                            "
                          >
                            <p
                              style="
                                margin: 0 0 4px 0;
                                font-size: 16px;
                                color: #111827;
                                font-weight: 600;
                              "
                            >
                              AeroRun Mesh Sneakers
                            </p>
                            <p
                              style="
                                margin: 0 0 8px 0;
                                font-size: 13px;
                                color: #6b7280;
                              "
                            >
                              Color: Graphite • Size: 9
                            </p>
                            <p
                              style="margin: 0; font-size: 14px; color: #111827"
                            >
                              Qty: 1
                            </p>
                          </td>
                          <td
                            align="right"
                            valign="top"
                            style="
                              white-space: nowrap;
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                              font-size: 15px;
                              color: #111827;
                              font-weight: 600;
                            "
                          >
                            $96.00
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td
                      style="
                        height: 1px;
                        background: #f3f4f6;
                        line-height: 1px;
                        font-size: 1px;
                      "
                    >
                      &nbsp;
                    </td>
                  </tr>
                  <!-- Item 2 -->
                  <tr>
                    <td style="padding: 16px">
                      <table
                        role="presentation"
                        cellpadding="0"
                        cellspacing="0"
                        border="0"
                        width="100%"
                        style="min-width: 100%"
                      >
                        <tr>
                          <td
                            width="96"
                            valign="top"
                            style="padding-right: 16px"
                          >
                            <img
                              src="https://nirajrajgor.github.io/email-templates/magic-hat-ai.png"
                              alt="Breathable Cap"
                              width="96"
                              height="96"
                              style="
                                display: block;
                                width: 96px;
                                height: 96px;
                                border-radius: 8px;
                                border: 1px solid #f3f4f6;
                              "
                            />
                          </td>
                          <td
                            valign="top"
                            style="
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                            "
                          >
                            <p
                              style="
                                margin: 0 0 4px 0;
                                font-size: 16px;
                                color: #111827;
                                font-weight: 600;
                              "
                            >
                              AirFlow Performance Cap
                            </p>
                            <p
                              style="
                                margin: 0 0 8px 0;
                                font-size: 13px;
                                color: #6b7280;
                              "
                            >
                              Color: Navy • Size: One size
                            </p>
                            <p
                              style="margin: 0; font-size: 14px; color: #111827"
                            >
                              Qty: 1
                            </p>
                          </td>
                          <td
                            align="right"
                            valign="top"
                            style="
                              white-space: nowrap;
                              font-family: -apple-system, BlinkMacSystemFont,
                                'Segoe UI', Roboto, Arial, sans-serif;
                              font-size: 15px;
                              color: #111827;
                              font-weight: 600;
                            "
                          >
                            $24.00
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Summary -->
            <tr>
              <td style="padding: 16px 36px 0 36px">
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  style="min-width: 100%"
                >
                  <tr>
                    <td
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 14px;
                        color: #6b7280;
                        padding: 4px 0;
                      "
                    >
                      Subtotal
                    </td>
                    <td
                      align="right"
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 14px;
                        color: #111827;
                        padding: 4px 0;
                      "
                    >
                      $120.00
                    </td>
                  </tr>
                  <tr>
                    <td
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 14px;
                        color: #6b7280;
                        padding: 4px 0;
                      "
                    >
                      Shipping
                    </td>
                    <td
                      align="right"
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 14px;
                        color: #111827;
                        padding: 4px 0;
                      "
                    >
                      Free
                    </td>
                  </tr>
                  <tr>
                    <td
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 14px;
                        color: #6b7280;
                        padding: 4px 0;
                      "
                    >
                      Tax
                    </td>
                    <td
                      align="right"
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 14px;
                        color: #111827;
                        padding: 4px 0;
                      "
                    >
                      $0.00
                    </td>
                  </tr>
                  <tr>
                    <td style="height: 8px; line-height: 8px; font-size: 8px">
                      &nbsp;
                    </td>
                  </tr>
                  <tr>
                    <td
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 16px;
                        color: #111827;
                        font-weight: 700;
                      "
                    >
                      Total
                    </td>
                    <td
                      align="right"
                      style="
                        font-family: -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, Arial, sans-serif;
                        font-size: 16px;
                        color: #111827;
                        font-weight: 700;
                      "
                    >
                      $120.00
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- Incentive -->
            <tr>
              <td style="padding: 20px 36px 0 36px">
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  bgcolor="#eff6ff"
                  style="
                    background: #eff6ff;
                    border: 1px dashed #93c5fd;
                    border-radius: 12px;
                    min-width: 100%;
                  "
                >
                  <tr>
                    <td align="center" style="padding: 16px">
                      <p
                        style="
                          margin: 0 0 6px 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 14px;
                          color: #1d4ed8;
                          letter-spacing: 0.3px;
                          font-weight: 700;
                        "
                      >
                        Limited-time treat
                      </p>
                      <p
                        style="
                          margin: 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 14px;
                          color: #1f2937;
                        "
                      >
                        Use code <strong>SAVE10</strong> at checkout for
                        <strong>10% off</strong>
                      </p>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>

            <!-- CTA Button -->
            <tr>
              <td style="padding: 24px 36px 0 36px; text-align: center">
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  style="margin: 0 auto"
                >
                  <tr>
                    <td
                      align="center"
                      bgcolor="#0ea5e9"
                      style="
                        background: linear-gradient(
                          135deg,
                          #0ea5e9 0%,
                          #6366f1 100%
                        );
                        border-radius: 999px;
                      "
                    >
                      <!--[if mso]>
                        <v:roundrect
                          xmlns:v="urn:schemas-microsoft-com:vml"
                          href="#"
                          style="
                            height: 56px;
                            v-text-anchor: middle;
                            width: 280px;
                          "
                          arcsize="50%"
                          strokecolor="#0ea5e9"
                          fillcolor="#0ea5e9"
                        >
                          <w:anchorlock />
                          <center
                            style="
                              color: #ffffff;
                              font-family: Arial, sans-serif;
                              font-size: 16px;
                              font-weight: bold;
                            "
                          >
                            Return to your cart
                          </center>
                        </v:roundrect>
                      <![endif]-->
                      <a
                        href="#"
                        target="_blank"
                        style="
                          display: inline-block;
                          padding: 16px 28px;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 16px;
                          font-weight: 700;
                          color: #ffffff;
                          text-decoration: none;
                          border-radius: 999px;
                          box-shadow: 0 8px 24px rgba(14, 165, 233, 0.35);
                          mso-hide: all;
                        "
                      >
                        Return to your cart
                      </a>
                    </td>
                  </tr>
                </table>
                <p
                  style="
                    margin: 16px 0 0 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 12px;
                    color: #6b7280;
                  "
                >
                  We'll reserve your items for the next 24 hours.
                </p>
              </td>
            </tr>

            <!-- Fallback Link -->
            <tr>
              <td style="padding: 20px 36px 0 36px; text-align: center">
                <p
                  style="
                    margin: 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 12px;
                    color: #6b7280;
                  "
                >
                  Trouble with the button? Paste this link into your browser:
                </p>
                <p
                  style="
                    margin: 6px 0 0 0;
                    font-family: monospace, 'Courier New', Courier;
                    font-size: 12px;
                    color: #2563eb;
                    word-break: break-all;
                  "
                >
                  https://example.com/cart/restore?token=abc123
                </p>
              </td>
            </tr>

            <!-- Help + Footer -->
            <tr>
              <td style="padding: 28px 36px 36px 36px">
                <table
                  role="presentation"
                  cellpadding="0"
                  cellspacing="0"
                  border="0"
                  width="100%"
                  style="
                    background: #f9fafb;
                    border: 1px solid #f3f4f6;
                    border-radius: 12px;
                  "
                >
                  <tr>
                    <td style="padding: 16px; text-align: center">
                      <p
                        style="
                          margin: 0 0 6px 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 14px;
                          color: #111827;
                          font-weight: 600;
                        "
                      >
                        Need help?
                      </p>
                      <p
                        style="
                          margin: 0;
                          font-family: -apple-system, BlinkMacSystemFont,
                            'Segoe UI', Roboto, Arial, sans-serif;
                          font-size: 13px;
                          color: #6b7280;
                        "
                      >
                        Our team is here for you at
                        <a
                          href="mailto:support@example.com"
                          style="color: #2563eb; text-decoration: none"
                          >support@example.com</a
                        >
                      </p>
                    </td>
                  </tr>
                </table>
                <p
                  style="
                    margin: 16px 0 0 0;
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
                      Roboto, Arial, sans-serif;
                    font-size: 12px;
                    color: #9ca3af;
                    text-align: center;
                  "
                >
                  You are receiving this because you visited our store but did
                  not complete a purchase.
                  <br />
                  <a href="#" style="color: #6b7280; text-decoration: underline"
                    >Unsubscribe</a
                  >
                  • 123 Market St, San Francisco, CA
                </p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
</center>
  </body>
</html>
