<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Product Confirmation Emailer | Email template</title>
    <meta
      name="description"
      content="Ideal for e-commerce orders, electronic product purchases, and
      online retail."
    />
    <style>
      /* Reset styles for email clients */
      body,
      p,
      div,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      ul,
      li {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f4f4f4;
      }
    </style>
  </head>
  <body style="margin: 0; padding: 0; background-color: #f4f4f4">
	<center>
    <table
      role="presentation"
      cellspacing="0"
      cellpadding="0"
      border="0"
      width="100%"
      style="background-color: #f4f4f4"
    >
      <tr>
        <td style="padding: 20px 0">
          <table
            role="presentation"
            cellspacing="0"
            cellpadding="0"
            border="0"
            width="510"
            style="
              margin: 0 auto;
              background-color: #ffffff;
              border-radius: 8px;
              padding: 40px;
            "
          >
            <!-- Logo -->
            <tr>
              <td style="padding-bottom: 30px">
                <img
                  src="acme.png"
                  alt="Company Logo"
                  style="width: 80px; height: 30px"
                />
              </td>
            </tr>

            <!-- Header -->
            <tr>
              <td style="padding-bottom: 20px">
                <h1
                  style="
                    font-size: 42px;
                    font-weight: bold;
                    color: #000000;
                    font-family: Arial, sans-serif;
                    margin: 0;
                  "
                >
                  Order confirmation <span style="font-size: 36px">🛍️</span>
                </h1>
              </td>
            </tr>

            <!-- Customer greeting -->
            <tr>
              <td style="padding-bottom: 20px">
                <p style="color: #333333; font-size: 16px">Hi [Customer],</p>
              </td>
            </tr>

            <!-- Order message -->
            <tr>
              <td style="padding-bottom: 30px">
                <p style="color: #333333; font-size: 16px">
                  Thank you for shopping with us! We've received your order<br />No:
                  52777. We will notify you when we send it.
                </p>
              </td>
            </tr>

            <!-- Order summary -->
            <tr>
              <td
                style="
                  background-color: #f9f9f9;
                  padding: 30px;
                  border-radius: 8px;
                "
              >
                <h2
                  style="font-size: 24px; color: #000000; margin-bottom: 20px"
                >
                  Order summary
                </h2>

                <!-- Product -->
                <table
                  role="presentation"
                  cellspacing="0"
                  cellpadding="0"
                  border="0"
                  width="100%"
                  style="margin-bottom: 20px"
                >
                  <tr>
                    <td width="80">
                      <img
                        src="apple-watch-ai-gen.webp"
                        alt="Apple Watch Ultra 2"
                        style="width: 80px; height: 80px; border-radius: 8px"
                      />
                    </td>
                    <td style="padding-left: 20px; vertical-align: top">
                      <h3
                        style="
                          font-size: 18px;
                          color: #000000;
                          margin-bottom: 5px;
                        "
                      >
                        Apple Watch Ultra 2
                      </h3>
                      <p style="color: #666666; font-size: 16px">From $450</p>
                    </td>
                  </tr>
                </table>

                <!-- Order totals -->
                <table
                  role="presentation"
                  cellspacing="0"
                  cellpadding="0"
                  border="0"
                  width="100%"
                >
                  <tr>
                    <td style="padding: 10px 0; border-top: 1px solid #e5e5e5">
                      <table
                        role="presentation"
                        cellspacing="0"
                        cellpadding="0"
                        border="0"
                        width="100%"
                      >
                        <tr>
                          <td style="font-size: 16px; color: #333333">
                            Subtotal
                          </td>
                          <td
                            style="
                              font-size: 16px;
                              color: #333333;
                              text-align: right;
                            "
                          >
                            $400.00
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 10px 0; border-top: 1px solid #e5e5e5">
                      <table
                        role="presentation"
                        cellspacing="0"
                        cellpadding="0"
                        border="0"
                        width="100%"
                      >
                        <tr>
                          <td style="font-size: 16px; color: #333333">
                            VAT (20.0%)
                          </td>
                          <td
                            style="
                              font-size: 16px;
                              color: #333333;
                              text-align: right;
                            "
                          >
                            $80.00
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                  <tr>
                    <td style="padding: 10px 0; border-top: 1px solid #e5e5e5">
                      <table
                        role="presentation"
                        cellspacing="0"
                        cellpadding="0"
                        border="0"
                        width="100%"
                      >
                        <tr>
                          <td
                            style="
                              font-size: 18px;
                              font-weight: bold;
                              color: #000000;
                            "
                          >
                            Total
                          </td>
                          <td
                            style="
                              font-size: 18px;
                              font-weight: bold;
                              color: #000000;
                              text-align: right;
                            "
                          >
                            $480.00
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </center>
</body>
</html>
