<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="AcelleSystemLayouts">
    <title>Abandoned Cart Email #4</title>

    <link href="css/base.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">

    <style>
        @media (min-width: 768px) {
            .container {
                max-width: 650px;
            }
        }
        @media (min-width: 992px) {
            .container {
                max-width: 760px;
            }
        }
        @media (min-width: 769px) {
            [data-hide-on="desktop"] {
                display: none!important;
            }
        }
        @media (max-width: 600px) {
            [data-hide-on="mobile"] {
                display: none!important;
            }
        }
        @media (max-width: 600px) {
            [builder-element=CellContainerElement].cell-responsive {
                display: block!important;
            }
            [builder-element=CellContainerElement].cell-responsive [builder-element="CellElement"] {
                width: 100%!important;
                max-width: none!important;        
            }
            [builder-element=CellContainerElement].cell-responsive [builder-element="CellElement"],
            [builder-element=CellContainerElement].cell-responsive [builder-element="BlockElement"] {
                padding-left: 0px!important;
                padding-right: 0px!important;
            }
            /* EmailMode */
            [builder-element=CellContainerElement].cell-responsive tbody,
            [builder-element=CellContainerElement].cell-responsive tr,
            [builder-element=CellContainerElement].cell-responsive td {
                display: block!important;
                width: 100%;
            }
            [builder-element=CellContainerElement].cell-responsive [builder-element="CellElement"] td {
                padding-left: 0px!important;
                padding-right: 0px!important;
            }
        }
        @media (min-width: 600px) {
            [builder-element=PricingTableElement] .col-12 {
                flex-basis: 0;
                flex-grow: 1;
            }
        }
    </style>
  </head>
  <body class="builderjs-layout">
    <!--[if mso]>
        <center>
        <table><tr><td width="760">
    <![endif]-->    
    <div builder-element="PageElement" style="padding-top:50px;padding-bottom:50px;">
        <table width="100%" builder-element="BlockElement">
            <tr><td style="padding-top:15px;padding-bottom:15px">
                <div class="container">
                    <table builder-element="CellContainerElement" data-layout="5-5" border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td builder-element="CellElement" valign="top" width="50%" class="responsive-column">
                                <table width="100%" builder-element="BlockElement">
                                    <tr><td style="padding-top:15px;padding-bottom:15px">
                                        <div class="container">
                                            <img alt="Header Logo" builder-element src="image/logo.png" width="200" />
                                        </div>
                                    </td></tr>
                                </table>
                            </td>
                            <td builder-element="CellElement" valign="top" width="50%" class="responsive-column">
                                <table width="100%" builder-element="BlockElement">
                                    <tr><td style="padding-top:15px;padding-bottom:15px">
                                        <div class="container">
                                            <div builder-element="TextElement" builder-inline-edit>
                                                <p style="text-align: right;margin-bottom:0;">
                                                    <a builder-element href="{WEB_VIEW_URL}" style="color: #333;margin-bottom:0;">Open in your browser</a>
                                                </p>
                                            </div>
                                        </div>
                                    </td></tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </div>
            </td></tr>
        </table>

      <table width="100%" builder-element="BlockElement">
            <tr><td style="padding-top:15px;padding-bottom:15px">
                <div class="container">
                    <h3 builder-element builder-inline-edit class="display-4 text-center">Hey, you forgot something</h3>
                    <h5 builder-element builder-inline-edit class="text-center font-weight-normal mt-1 mb-3">
                        It seems you forgot some items great in your cart<br/>
                        Purchase now before they are sold out!<br/>
                        Click the items to go back to our store and review your cart
                    </h5>
                </div>
            </td></tr>
        </table>

        <table width="100%" builder-element="BlockElement">
            <tr><td style="padding-top:15px;padding-bottom:15px">
                <div class="container">
                    <div data-items-number="4" builder-element="AbandonedCartElement" data-max-items="4" data-display="4" data-sort-by="created_at-desc" class="product-list-widget">
                        <div class="container">
                        <span class="woo-button product-preview-but" style="display:none">Preview</span>
                        <span class="woo-button product-unpreview-but" style="display:none">Close preview</span>
                        <div class="row py-3 products">
                            <div class="woo-col-item mb-4 mt-4 col-12 col-sm-6 col-md-3">
                                <div class="">
                                    <div class="img-col mb-3">
                                        <a href="*|PRODUCT_URL|*" class="mr-4"><img src="image/cart_item.svg" width="100%"></a>
                                    </div>
                                    <div class="">
                                        <p class="font-weight-normal product-name mb-1">
                                            <a style="color: #333;" href="*|PRODUCT_URL|*" class="mr-4">*|PRODUCT_NAME|*</a>
                                        </p>
                                        <p class=" product-description">*|PRODUCT_DESCRIPTION|*</p>
                                        <p><strong>*|PRODUCT_PRICE|*</strong></p>
                                        <a href="*|PRODUCT_URL|*" style="background-color: #9b5c8f;
                border-color: #9b5c8f;" class="btn btn-primary text-white">
                                            Buy now
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="woo-col-item mb-4 mt-4 col-12 col-sm-6 col-md-3">
                                <div class="">
                                    <div class="img-col mb-3">
                                        <a href="*|PRODUCT_URL|*" class="mr-4"><img src="image/cart_item.svg" width="100%"></a>
                                    </div>
                                    <div class="">
                                        <p class="font-weight-normal product-name mb-1">
                                            <a style="color: #333;" href="*|PRODUCT_URL|*" class="mr-4">*|PRODUCT_NAME|*</a>
                                        </p>
                                        <p class=" product-description">*|PRODUCT_DESCRIPTION|*</p>
                                        <p><strong>*|PRODUCT_PRICE|*</strong></p>
                                        <a href="*|PRODUCT_URL|*" style="background-color: #9b5c8f;
                border-color: #9b5c8f;" class="btn btn-primary text-white">
                                            Buy now
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="woo-col-item mb-4 mt-4 col-12 col-sm-6 col-md-3">
                                <div class="">
                                    <div class="img-col mb-3">
                                        <a href="*|PRODUCT_URL|*" class="mr-4"><img src="image/cart_item.svg" width="100%"></a>
                                    </div>
                                    <div class="">
                                        <p class="font-weight-normal product-name mb-1">
                                            <a style="color: #333;" href="*|PRODUCT_URL|*" class="mr-4">*|PRODUCT_NAME|*</a>
                                        </p>
                                        <p class=" product-description">*|PRODUCT_DESCRIPTION|*</p>
                                        <p><strong>*|PRODUCT_PRICE|*</strong></p>
                                        <a href="*|PRODUCT_URL|*" style="background-color: #9b5c8f;
                border-color: #9b5c8f;" class="btn btn-primary text-white">
                                            Buy now
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="woo-col-item mb-4 mt-4 col-12 col-sm-6 col-md-3">
                                <div class="">
                                    <div class="img-col mb-3">
                                        <a href="*|PRODUCT_URL|*" class="mr-4"><img src="image/cart_item.svg" width="100%"></a>
                                    </div>
                                    <div class="">
                                        <p class="font-weight-normal product-name mb-1">
                                            <a style="color: #333;" href="*|PRODUCT_URL|*" class="mr-4">*|PRODUCT_NAME|*</a>
                                        </p>
                                        <p class=" product-description">*|PRODUCT_DESCRIPTION|*</p>
                                        <p><strong>*|PRODUCT_PRICE|*</strong></p>
                                        <a href="*|PRODUCT_URL|*" style="background-color: #9b5c8f;
                border-color: #9b5c8f;" class="btn btn-primary text-white">
                                            Buy now
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div></div>
                    </div>
                </div>
            </td></tr>
        </table>

      <table width="100%" builder-element="BlockElement">
            <tr><td style="padding-top:15px;padding-bottom:15px">
                <div class="container">
                    <div builder-element="IconsContainerElement" class="" style="text-align: center;">
                        <table border="0" cellpadding="0" cellspacing="0" style="display:inline;">
                            <tr>
                                <td style="padding-right: 15px">
                                    <a builder-element="IconLinkElement" data-value="facebook" href="" class="d-inline-block">
                                        <span class="social-icon">
                                            <img alt="Facebook Icon" src="image/icons/facebook.png" height="35" width="auto" />
                                        </span>
                                    </a>
                                </td>
                                <td style="padding-right: 15px">
                                    <a builder-element="IconLinkElement" data-value="linkedin" href="" class="d-inline-block">
                                        <span class="social-icon">
                                            <img alt="LinkedIn Icon" src="image/icons/linkedin.png" height="35" width="auto" />
                                        </span>
                                    </a>
                                </td>
                                <td style="padding-right: 15px">
                                    <a builder-element="IconLinkElement" data-value="youtube" href="" class="d-inline-block">
                                        <span class="social-icon">
                                            <img alt="YouTube Icon" src="image/icons/youtube.png" height="35" width="auto" />
                                        </span>
                                    </a>
                                </td>
                                <td style="padding-right: 15px">
                                    <a builder-element="IconLinkElement" data-value="twitter" href="" class="d-inline-block">
                                        <span class="social-icon">
                                            <img alt="Twitter Icon" src="image/icons/twitter.png" height="35" width="auto" />
                                        </span>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td></tr>
        </table>

        <table width="100%" builder-element="BlockElement">
            <tr><td style="padding-top:15px;padding-bottom:15px">
                <div class="container">
                    <div class="text-muted">

                        <div builder-element="TextElement">
                            <p class="m-0" style="text-align: center;padding-bottom:5px;">Copyright &copy; 2025. All rights reserved.</p>
                            <p class="m-0" style="text-align: center;padding-bottom:5px;">You can <a builder-element href="{UPDATE_PROFILE_URL}">update your preferences</a> or <a builder-element href="{UNSUBSCRIBE_URL}">unsubscribe from this list</a>.</p>
                        </div>
                        
                        <p builder-element builder-inline-edit style="text-align: center;margin-top: 15px;font-size: 13px;">
                            <a builder-element href="#" style="color:#555;">Back to top</a>
                        </p>
                    </div>
                </div>
            </td></tr>
        </table>
    </div>
    <!--[if mso]>
        </td></tr></table>
        </center>
    <![endif]--> 
  </body>
</html>
