<!

--[if mso]>

<center><table border="0" cellpadding="0" cellspacing="0"><tr><td width="640">

<![endif]-->

<table cellpadding="0" cellspacing="0" border="0" width="100%" align="center" style="max-

width: 640px; margin: auto;" class="emailContainer">

<tr>

<td align="left" valign="top" style="padding-top: 20px">

<!-- Header : start -->

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td align="left" valign="top">

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr class="emailTitle">

<!-- Title -->

<td>

<h1 style="font-family: ${fontFamily}; font-size: 30px; font-weight: normal;

line-height: 40px; color: ${colorText}; margin: 0; padding: 0; padding-right: 10px;">

<@rosetta.message key="OrderConfirmation.title" />

</h1>

</td>

<!-- Store logo -->

<td align="right" valign="top" rowspan="2">

<@storeLogo/>

</td>

</tr>

</table>
 </td>

</tr>

</table>

<!-- Header : end -->

</td>

</tr>

<tr>

<td align="left" valign="top" style="padding-top: 30px;">

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<!-- Customer greeting : start -->

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px; line-

height: 24px; color: ${colorText};">

<@rosetta.message key="OrderConfirmation.customer_greeting"
params={ "customerName": customer.name } />

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px; line-

height: 24px; color: ${colorText}; padding-top: 10px">

<#if (order.paymentMethod.isOnline || order.isPaid)>

<@rosetta.message key="OrderConfirmation.Confirmation.paid_order"
params={ "storeName": store.name?html, "dateCreated": order.dateCreated } />

<#else>

<@rosetta.message key="OrderConfirmation.Confirmation.unpaid_order"
params={ "storeName": store.name?html, "dateCreated": order.dateCreated} />

</#if>

</td>
 </tr>

<!-- Customer greeting : end -->

<!-- Invoice payment info : start -->

<#if order.invoicePayment?has_content>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px;

line-height: 24px; color: ${colorText}; padding-top: 20px">

<strong>

<@rosetta.message key="OrderConfirmation.Invoice.title" params={"date":

order.invoicePayment.paymentDueDate?html } />

</strong>

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px;

line-height: 24px; color: ${colorText}">

<@rosetta.message key="OrderConfirmation.Invoice.accountHolderName"/> $
{order.invoicePayment.accountHolderName}

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px;

line-height: 24px; color: ${colorText}">

<@rosetta.message key="OrderConfirmation.Invoice.bankName"/> $
{order.invoicePayment.bankName}

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px;

line-height: 24px; color: ${colorText}">

<@rosetta.message key="OrderConfirmation.Invoice.iban"/> $
{order.invoicePayment.iban}
 </td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px;

line-height: 24px; color: ${colorText}">

<@rosetta.message key="OrderConfirmation.Invoice.bic"/> $
{order.invoicePayment.bic}

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px;

line-height: 24px; color: ${colorText}">

<@rosetta.message key="OrderConfirmation.Invoice.amountDue"/> $
{order.invoicePayment.amountDue}

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 16px;

line-height: 24px; color: ${colorText}">

<@rosetta.message key="OrderConfirmation.Invoice.referenceNumber"/> $
{order.invoicePayment.referenceNumber}

</td>

</tr>

</#if>

<!-- Invoice payment info : end -->

<tr>

<td align="center" valign="top" style="padding-top: 20px;">

<div style="padding-top: 10px; text-align: left;">

<#if !customer.isAnonymous>

<a href="${order.customerUrl}" style="text-decoration: none;">

<h2 style="color: ${colorLink}; font-family: ${fontFamily}; font-size: 24px;

font-weight: normal; line-height: 36px; margin: 0; padding: 0;">
 <@rosetta.message key="OrderConfirmation.order_number"
params={ "number": order.number } />

</h2>

</a>

<#else>

<h2 style="color: ${colorText}; font-family: ${fontFamily}; font-size: 24px;

font-weight: normal; line-height: 36px; margin: 0; padding: 0;">

<@rosetta.message key="OrderConfirmation.order_number"
params={ "number": order.number } />

</h2>

</#if>

</div>

<!-- Order status : start -->

<#if templateConfig.dynamicAmpEmailsEnabled>

<#include "partials/amp/order-confirmation.ftl" />

<#else>

<div style="padding-top: 15px; text-align: left;">

<div style="display: inline-block; padding: 0 50px 20px 0;">

<div style="font-family: ${fontFamily}; font-size: 14px; line-height: 24px;

color: ${colorText};">

<@rosetta.message key="OrderConfirmation.payment_status" />

</div>

<div style="font-family: ${fontFamily}; font-size: 24px; line-height: 30px;

color: <@paymentStatusColor />;">

${order.paymentStatus}

</div>

</div>

<div style="display: inline-block; padding: 0 50px 20px 0;">

<div style="font-family: ${fontFamily}; font-size: 14px; line-height: 24px;

color: ${colorText};">

<@rosetta.message key="OrderConfirmation.fulfillment_status" />

</div>
 <div style="font-family: ${fontFamily}; font-size: 24px; line-height: 30px;
color: <@fulfillmentStatusColor />;">

${order.fulfillmentStatus}

</div>

</div>

</div>

<table border="0" width="100%" cellpadding="0" cellspacing="0" >

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size:

14px; line-height: 24px; color: ${colorTextLight}; padding-top:10px; border-top: 1px solid $
{colorBorder}"></td>

</tr>

</table>

</#if>

<!-- Order status : end -->

</td>

</tr>

<!-- Shipping address : start -->

<!-- The shipping address is shown here if the order is paid -->

<#if (order.paymentMethod.isOnline || order.isPaid)>

<#if order.isPickup>

<tr>

<td align="left" valign="top" style="padding-top: 30px;">

<h2 style="font-family: ${fontFamily}; font-size: 24px; font-weight: normal;

line-height: 36px; color: ${colorText}; margin: 0; padding: 0;">${order.shippingMethod}</h2>

<br />

<#noescape>${order.shippingInstruction}</#noescape>

</td>
 </tr>

<#if order.pickupTime?has_content>

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:

14px; line-height: 24px; color:${colorText}; padding-top: 10px;">

<strong><@rosetta.message
key="OrderConfirmation.Shipping.pickup_date" /></strong>

<br />

${order.pickupTime}

</td>

</tr>

</#if>

<!-- Extrafields -->

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:14px;

line-height:24px; color:${colorText};">

<@extrafieldsBySection order "shipping_info"/>

</td>

</tr>

<#else>

<#if order.isShippingRequired && order.shippingAddress?has_content>

<tr>

<td align="left" valign="top" style="padding-top: 30px;">

<h2 style="font-family: ${fontFamily}; font-size: 24px; font-weight: normal;

line-height: 36px; color: ${colorText}; margin: 0; padding: 0;">

<@rosetta.message
key="OrderConfirmation.Shipping.address_prefix" />

</h2>

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size:

14px; line-height: 24px; color: ${colorText}; padding-top: 10px;">
 <strong>${order.shippingAddress.name}</strong>

</td>

</tr>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size:

14px; line-height: 18px; color: ${colorText}; padding-top: 5px;">

${order.shippingAddress}

</td>

</tr>

<#if order.shippingAddress.phone?has_content>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size:

14px; line-height: 18px; color: ${colorText}; padding-top: 5px;">

<@rosetta.message key="OrderConfirmation.Shipping.phone"
params={ "phone": order.shippingAddress.phone } />

</td>

</tr>

</#if>

</#if>

<!-- Extrafields -->

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:14px;

line-height:24px; color:${colorText};">

<@extrafieldsBySection order "shipping_info"/>

</td>

</tr>

<#if order.shippingMethod?has_content && order.shippingMethod.name?

has_content>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size:

14px; line-height: 24px; color: ${colorText}; padding-top: 10px;">
 <#if order.shippingMethod.fulfillmentType == "DELIVERY">

<#assign shippingMethodTitle>

<@rosetta.message key="OrderConfirmation.Delivery.method" />

</#assign>

<#else>

<#assign shippingMethodTitle>

<@rosetta.message key="OrderConfirmation.Shipping.method" />

</#assign>

</#if>

<strong>${shippingMethodTitle}</strong><br />

${order.shippingMethod}<br />

${order.shippingMethod.estimatedTransitTime}

</td>

</tr>

</#if>

<#if order.deliveryDate?has_content>

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:

14px; line-height: 24px; color:${colorText}; padding-top: 10px;">

<strong><@rosetta.message
key="OrderConfirmation.Delivery.DateTime.title" /></strong>

<br />

<#if order.deliveryTimeFrom?has_content && order.deliveryTimeTo?

has_content>

<@rosetta.message key="OrderConfirmation.Delivery.DateTimeInterval"

params={ "date": order.deliveryDate, "timeFrom":

order.deliveryTimeFrom, "timeTo": order.deliveryTimeTo } />

<#else>

<@rosetta.message key="OrderConfirmation.Delivery.OnlyDate"
params={ "date": order.deliveryDate } />

</#if>

</td>
 </tr>

</#if>

</#if>

<!-- Shipping address : end -->

<!-- Payment instructions : start -->

<!-- The payment instructions are shown here instead of the shipping address if the
order is not paid yet -->

<#else>

<#if order.paymentMethod.instructions?has_content>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 14px;

line-height: 20px; padding-top: 30px; color: ${colorText};">

<h2 style="font-family: ${fontFamily}; font-size: 24px; font-weight: normal;

line-height: 36px; color: ${colorText}; margin: 0; padding: 0;">

${order.paymentMethod.instructionsTitle}

</h2>

<#noescape>${order.paymentMethod.instructions}</#noescape>

</td>

</tr>

</#if>

</#if>

<!-- Payment instructions: end -->

<!-- Item list: start -->

<tr>

<td align="left" valign="top" style="padding-top: 30px;">

 <h2 style="font-family: ${fontFamily}; font-size: 24px; font-weight: normal; line-
height: 36px; color: ${colorText}; margin: 0; padding: 0;">

<@rosetta.message key="OrderConfirmation.your_order" />

</h2>

</td>

</tr>

<tr>

<td align="left" valign="top" style="padding-top: 10px;">

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="border:

1px solid ${colorBorder};">

<tr>

<td style="padding-top: 20px; padding-right: 20px; padding-bottom: 0;

padding-left: 20px;">

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td>

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<#list order.items as orderItem>

<tr>

<td valign="top" width="600" style="padding-bottom:

20px;">

<!-- Item: start -->

<table cellpadding="0" cellspacing="0" border="0"

style="table-layout: fixed;">

<tr>

<td align="center" valign="top" width="140">

<#if orderItem.imageUrl?has_content>

<a href="${orderItem.customerUrl}"
style="display: block;">

<${imgTag} <@fitImage orderItem.imageWidth

orderItem.imageHeight 140 300 /> src="${orderItem.imageUrl}" alt="${orderItem.name}" />
 </a>

</#if>

</td>

<td width="20">&nbsp; </td>

<td align="left" valign="middle" width="420">

<table cellpadding="0" cellspacing="0" border="0"

width="100%">

<tr>

<td style="font-family: ${fontFamily}; font-size:

14px; line-height: 20px; padding-top: 5px">

<a href="${orderItem.customerUrl}"
style="display: block; text-decoration: none; color: ${colorLink};">

${orderItem.name}

</a>

</td>

</tr>

<tr>

<td style="font-family: ${fontFamily}; font-size:

12px; line-height: 20px; color: ${colorTextLight}; padding-top: 10px;">

<@rosetta.message
key="OrderConfirmation.sku" params={ "sku": orderItem.sku } /><br />

<#list orderItem.options as option>

<p>${option.name}: ${option.value}</p>

</#list>

</td>

</tr>

<#if orderItem.recurringIntervalName?
has_content>

<tr>

<td style="font-family: ${fontFamily}; font-

size: 14px; line-height: 20px; padding-top: 10px;">

<div style="display: block; text-decoration:

none; background-color: #aab9c6; border-radius: 5px; color: white; width: fit-content">
 <#if orderItem.recurringIntervalName ==
"DAILY">

<@rosetta.message
key="OrderConfirmation.Subscription.badge.daily" />

<#elseif
orderItem.recurringIntervalName == "WEEKLY">

<@rosetta.message
key="OrderConfirmation.Subscription.badge.weekly" />

<#elseif
orderItem.recurringIntervalName == "BIWEEKLY">

<@rosetta.message
key="OrderConfirmation.Subscription.badge.biweekly" />

<#elseif
orderItem.recurringIntervalName == "MONTHLY">

<@rosetta.message
key="OrderConfirmation.Subscription.badge.monthly" />

<#elseif
orderItem.recurringIntervalName == "QUARTERLY">

<@rosetta.message
key="OrderConfirmation.Subscription.badge.quarterly" />

<#elseif
orderItem.recurringIntervalName == "ANNUALLY">

<@rosetta.message
key="OrderConfirmation.Subscription.badge.annually" />

</#if>

</div>

</td>

</tr>

</#if>

<tr>

<td style="font-family: ${fontFamily}; font-size:

14px; line-height: 20px; color: ${colorText}; padding-top: 10px;">

${orderItem.quantity} × ${orderItem.price}

</td>

</tr>

</table>
 </td>

</tr>

</table>

<!-- Item: end -->

</td>

</tr>

</#list>

</table>

</td>

</tr>

<!-- Order summary : start -->

<tr>

<td align="left" valign="top">

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td style="padding-top: 15px; padding-bottom: 20px; padding-

left: 20px; border-top: 1px solid ${colorBorder};">

<table cellpadding="0" cellspacing="0" border="0"

width="50%" align="right">

<tr>

<td align="left" valign="top" width="100%" style="font-

family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; padding-left: 30px;
padding-right: 20px; white-space: nowrap;">

<@rosetta.message
key="OrderNotification.Summary.items" />

</td>
 <!-- Subtotal -->

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;">

${order.subtotal}

</td>

</tr>

<!-- Shipping rate -->

<#if order.shippingMethod?has_content &&

order.shipping?has_content>

<tr>

<td align="left" valign="top" width="100%"

style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText};
padding-left: 30px; padding-right: 20px; white-space: nowrap;">

<#if order.shippingMethod.fulfillmentType ==
"DELIVERY">

<@rosetta.message
key="OrderNotification.Summary.delivery" />

<#else>

<@rosetta.message
key="OrderNotification.Summary.shipping" />

</#if>

</td>

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;">

<#if order.pricesIncludeTax>

${order.shipping.cost}

<#else>

${order.shipping.costWithoutTax}

</#if>

</td>

</tr>

<#if order.handlingFee?has_content>

<tr>
 <td align="left" valign="top" width="100%"
style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText};
padding-left: 30px; padding-right: 20px; white-space: nowrap;">

${order.handlingFee.name}

</td>

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;">

${order.handlingFee.value}

</td>

</tr>

</#if>

</#if>

<!-- Taxes -->

<#if !order.pricesIncludeTax>

<#list order.taxes as tax>

<tr>

<td align="left" valign="top" width="100%"

style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText};
padding-left: 30px; padding-right: 20px; white-space: nowrap;">

${tax.name}

</td>

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;">

${tax.value}

</td>

</tr>

</#list>

</#if>

<!-- Surcharges -->

<#list order.surcharges as surcharge>

<#if surcharge.visible>
 <tr>

<td align="left" valign="top" width="100%"

style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText};
padding-left: 30px; padding-right: 20px; white-space: nowrap;">

${surcharge.titleTranslated}

</td>

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;">

${surcharge.totalValue}

</td>

</tr>

</#if>

</#list>

<!-- Discounts -->

<#list order.discounts as discount>

<tr>

<td align="left" valign="top" width="100%"

style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText};
padding-left: 30px; padding-right: 20px; white-space: nowrap;">

${discount.name}

</td>

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;">

-${discount.value}

</td>

</tr>

</#list>

<!-- Gift сard -->

<#if order.giftCardRedemption?has_content>

<tr>
 <td align="left" valign="top" width="100%"
style="font-family: Arial,sans-serif; font-size: 12px;line-height: 20px; color: #333333;padding-
left: 32px;padding-right: 20px;white-space: nowrap;">

${order.giftCardRedemption.name}

</td>

<td align="right" valign="top" style="font-family:

Arial,Helvetica,sans-serif;font-size: 12px;line-height: 20px; color: #333333;white-space:
nowrap;">

-${order.giftCardRedemption.value}

</td>

</tr>

</#if>

<!-- Taxes -->

<#if order.pricesIncludeTax && order.taxes?has_content>

<tr>

<td align="left" valign="top" width="100%"

style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText};
padding-top: 6px; padding-left: 30px; padding-right: 20px; white-space: nowrap;">

<@rosetta.message
key="OrderNotification.Summary.total_without_tax" />

</td>

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;
padding-top: 6px;">

${order.totalWithoutTax}

</td>

</tr>

<#list order.taxes as tax>

<tr>

<td align="left" valign="top" width="100%"

style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText};
padding-left: 30px; padding-right: 20px; white-space: nowrap;">

${tax.name}

</td>
 <td align="right" valign="top" style="font-family: $
{fontFamily}; font-size: 12px; line-height: 20px; color: ${colorText}; white-space: nowrap;">

${tax.value}

</td>

</tr>

</#list>

</#if>

<!-- Total -->

<tr>

<td align="left" valign="top" width="100%" style="font-

family: ${fontFamily}; font-size: 18px; line-height: 24px; color: ${colorText}; padding-top: 10px;
padding-left: 30px; padding-right: 20px; white-space: nowrap;">

<strong><@rosetta.message
key="OrderNotification.Summary.total" /></strong>

</td>

<td align="right" valign="top" style="font-family: $

{fontFamily}; font-size: 18px; line-height: 24px; color: ${colorText}; padding-top: 10px; white-
space: nowrap;">

<strong style="white-space:
nowrap">${order.total}</strong>

</td>

</tr>

<!-- Including tax -->

<#if order.pricesIncludeTax && order.totalTax?

has_content>

<tr>

<td align="left" valign="top" width="100%"

colspan="2" style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: $
{colorTextLight}; padding-left: 30px; padding-right: 20px; white-space: nowrap;">

<#if order.taxes?size gt 1>

<@rosetta.message
key="OrderNotification.Summary.including_tax" params={ "tax": order.totalTax} />

<#elseif order.taxes?size == 1>

 <@rosetta.message
key="OrderNotification.Summary.including_named_tax" params={ "taxName":
order.taxes[0].nameWithoutPercents, "tax": order.totalTax} />

</#if>

</td>

<td></td>

</tr>

</#if>

<!-- Tax exempt -->

<#if order.pricesIncludeTax && (order.reversedTaxApplied

|| order.customerTaxExempt)>

<tr>

<td align="left" valign="top" width="100%"

colspan="2" style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: $
{colorTextLight}; padding-left: 30px; padding-right: 20px; white-space: nowrap;">

<#if order.reversedTaxApplied>

<@rosetta.message
key="OrderNotification.Summary.reversed_tax"/>

<#elseif order.customerTaxExempt>

<@rosetta.message
key="OrderNotification.Summary.tax_exempted"/>

</#if>

</td>

</tr>

</#if>

<#if store.taxFreeBusiness>

<tr>

<td colspan="2" align="left" valign="top"

width="100%" style="font-family: ${fontFamily}; font-size: 12px; line-height: 20px; color: $
{colorTextLight}; padding-left: 30px; padding-right: 20px;">

<@rosetta.message
key="OrderNotification.Summary.tax_free" />

</td>
 </tr>

</#if>

</table>

</td>

</tr>

</table>

</td>

</tr>

<!-- Order summary : end -->

</table>

</td>

</tr>

</table>

</td>

</tr>

<!-- Item list: end -->

<!-- Order comments : start -->

<#if order.orderComments?has_content || isExtrafieldsForSection(order,

"order_comments")>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 14px;

line-height: 20px; color: ${colorText}; padding-top: 15px;">

<strong><@rosetta.message key="OrderConfirmation.order_comments"
/></strong>

</td>

</tr>
 </#if>

<#if order.orderComments?has_content>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 14px;

line-height: 20px; color: ${colorText}; padding-top: 5px;">

<#noescape>${order.orderComments}</#noescape>

</td>

</tr>

</#if>

<!-- Extrafields -->

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 14px; line-

height: 20px; color: ${colorText}; padding-top: 5px;">

<@extrafieldsBySection order "order_comments"/>

</td>

</tr>

<!-- Order comments : end -->

<!-- Subscription details : start -->

<#if order.subscriptionItems?has_content>

<#list order.subscriptionItems as subscriptionItem>

<tr>

<td align="left" valign="top" style="padding-top: 40px; padding-bottom: 0;">

<h2 style="font-family: ${fontFamily}; font-size: 24px; font-weight: normal;

line-height: 36px; color: ${colorText}; margin: 0; padding: 0;">

<#if subscriptionItem.recurringIntervalName == "DAILY">

<@rosetta.message
key="OrderConfirmation.Subscription.subscription_details.daily" />

<#elseif subscriptionItem.recurringIntervalName == "WEEKLY">

 <@rosetta.message
key="OrderConfirmation.Subscription.subscription_details.weekly" />

<#elseif subscriptionItem.recurringIntervalName == "BIWEEKLY">

<@rosetta.message
key="OrderConfirmation.Subscription.subscription_details.biweekly" />

<#elseif subscriptionItem.recurringIntervalName == "MONTHLY">

<@rosetta.message
key="OrderConfirmation.Subscription.subscription_details.monthly" />

<#elseif subscriptionItem.recurringIntervalName == "QUARTERLY">

<@rosetta.message
key="OrderConfirmation.Subscription.subscription_details.quarterly" />

<#elseif subscriptionItem.recurringIntervalName == "ANNUALLY">

<@rosetta.message
key="OrderConfirmation.Subscription.subscription_details.yearly" />

</#if>

</h2>

</td>

</tr>

<tr>

<td align="left" valign="top">

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<tr>

<td style="padding-top: 15px; padding-bottom: 0;">

<p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px;

color: ${colorText}; margin: 0; padding: 0;">

<#if order.shippingMethod?has_content && order.taxes?

has_content>

<#assign shippingAndTaxIncludedText>

<@rosetta.message
key="OrderConfirmation.Subscription.charge.tax_shipping_included" />

</#assign>

<#elseif order.shippingMethod?has_content>

<#assign shippingAndTaxIncludedText>
 <@rosetta.message
key="OrderConfirmation.Subscription.charge.shipping_included" />

</#assign>

<#elseif order.taxes?has_content>

<#assign shippingAndTaxIncludedText>

<@rosetta.message
key="OrderConfirmation.Subscription.charge.tax_included" />

</#assign>

<#else>

<#assign shippingAndTaxIncludedText></#assign>

</#if>

<#if subscriptionItem.recurringIntervalName == "DAILY">

<@rosetta.message
key="OrderConfirmation.Subscription.charge.daily" params={ "amount":
subscriptionItem.total } /> ${shippingAndTaxIncludedText}

<#elseif subscriptionItem.recurringIntervalName == "WEEKLY">

<@rosetta.message
key="OrderConfirmation.Subscription.charge.weekly" params={ "amount":
subscriptionItem.total } /> ${shippingAndTaxIncludedText}

<#elseif subscriptionItem.recurringIntervalName == "BIWEEKLY">

<@rosetta.message
key="OrderConfirmation.Subscription.charge.biweekly" params={ "amount":
subscriptionItem.total } /> ${shippingAndTaxIncludedText}

<#elseif subscriptionItem.recurringIntervalName == "MONTHLY">

<@rosetta.message
key="OrderConfirmation.Subscription.charge.monthly" params={ "amount":
subscriptionItem.total } /> ${shippingAndTaxIncludedText}

<#elseif subscriptionItem.recurringIntervalName == "QUARTERLY">

<@rosetta.message
key="OrderConfirmation.Subscription.charge.quarterly" params={ "amount":
subscriptionItem.total } /> ${shippingAndTaxIncludedText}

<#elseif subscriptionItem.recurringIntervalName == "ANNUALLY">

<@rosetta.message
key="OrderConfirmation.Subscription.charge.yearly" params={ "amount":
subscriptionItem.total } /> ${shippingAndTaxIncludedText}

</#if>
 </p>

</td>

</tr>

<tr>

<td style="padding-top: 8px; padding-bottom: 0;">

<p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px;

color: ${colorText}; margin: 0; padding: 0;">

<@rosetta.message
key="OrderConfirmation.Subscription.next_charge" params={ "date":
subscriptionItem.nextSubscriptionChargeDate } />

</p>

</td>

</tr>

<tr>

<td style="padding-top: 8px; padding-bottom: 0;">

<p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px;

color: ${colorText}; margin: 0; padding: 0;">

<a href="${subscriptionItem.subscriptionDetailsUrl}" style="text-

decoration: underline; color: ${colorLink};"><@rosetta.message
key="OrderConfirmation.Subscription.manage_subscription_link" /></a>

</p>

</td>

</tr>

</table>

</td>

</tr>

</#list>

</#if>

<!-- Subscription details : end -->

<!-- Shipping address: start -->

 <!-- The shipping address is shown here if the order is not paid yet -->

<#if (!order.paymentMethod.isOnline && !order.isPaid)>

<#if order.isPickup>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 14px;

line-height: 24px; color: ${colorText}; padding-top: 15px;">

<p>${order.shippingMethod}</p>

<br />

<#noescape>${order.shippingInstruction}</#noescape>

</td>

</tr>

<#if order.pickupTime?has_content>

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:14px;

line-height:24px; color:${colorText}; padding-top: 10px">

<b><@rosetta.message key="OrderConfirmation.Shipping.pickup_date"
/></b><br>

${order.pickupTime}

</td>

</tr>

</#if>

<!-- Extrafields -->

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:14px;

line-height:24px; color:${colorText};">

<@extrafieldsBySection order "shipping_info"/>

</td>

</tr>

<#else>

<#if order.isShippingRequired && order.shippingAddress?has_content>

 <tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size:

14px; line-height: 24px; color: ${colorText}; padding-top: 15px;">

<#if order.shippingMethod.fulfillmentType == "DELIVERY">

<#assign shippingAddressTitle>

<@rosetta.message key="OrderConfirmation.Delivery.address" />

</#assign>

<#else>

<#assign shippingAddressTitle>

<@rosetta.message key="OrderConfirmation.Shipping.address" />

</#assign>

</#if>

<b>${shippingAddressTitle}</b><br />

${order.shippingAddress.name}<br />

${order.shippingAddress}<br />

<#if order.shippingAddress.phone?has_content>

<@rosetta.message key="OrderConfirmation.Shipping.phone"
params={ "phone": order.shippingAddress.phone } />

</#if>

</td>

</tr>

</#if>

<!-- Extrafields -->

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:14px;

line-height:24px; color:${colorText};">

<@extrafieldsBySection order "shipping_info"/>

</td>

</tr>
 <#if order.shippingMethod?has_content && order.shippingMethod.name?
has_content>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size:

14px; line-height: 24px; color: ${colorText}; padding-top: 10px;">

<#if order.shippingMethod.fulfillmentType == "DELIVERY">

<#assign shippingMethodTitle>

<@rosetta.message key="OrderConfirmation.Delivery.method" />

</#assign>

<#else>

<#assign shippingMethodTitle>

<@rosetta.message key="OrderConfirmation.Shipping.method" />

</#assign>

</#if>

<b>${shippingMethodTitle}</b><br />

${order.shippingMethod}<br />

${order.shippingMethod.estimatedTransitTime}

</td>

</tr>

</#if>

<#if order.deliveryDate?has_content>

<tr>

<td align="left" valign="top" style="font-family:${fontFamily}; font-size:

14px; line-height: 24px; color:${colorText}; padding-top: 10px;">

<strong><@rosetta.message
key="OrderConfirmation.Delivery.DateTime.title" /></strong>

<br />

<#if order.deliveryTimeFrom?has_content && order.deliveryTimeTo?

has_content>

<@rosetta.message key="OrderConfirmation.Delivery.DateTimeInterval"

params={ "date": order.deliveryDate, "timeFrom":

order.deliveryTimeFrom, "timeTo": order.deliveryTimeTo } />
 <#else>

<@rosetta.message key="OrderConfirmation.Delivery.OnlyDate"
params={ "date": order.deliveryDate } />

</#if>

</td>

</tr>

</#if>

</#if>

</#if>

<!-- Shipping address : end -->

<!-- Payment method : end -->

<#if order.paymentMethod?has_content>

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 14px; line-

height: 24px; color: ${colorText}; padding-top: 10px;">

<b><@rosetta.message key="OrderConfirmation.payment_method"
/></b><br />

${order.paymentMethod}

</td>

</tr>

<!-- Extrafields -->

<tr>

<td align="left" valign="top" style="font-family: ${fontFamily}; font-size: 14px; line-

height: 24px; color: ${colorText};">

<@extrafieldsBySection order "billing_info"/>

</td>

</tr>

</#if>

<!-- Payment method : end -->

 <!-- block-related-products: start -->

<#if relatedProducts??>

<#assign products=relatedProducts/>

<tr>

<td align="left" valign="top" style="padding-top: 40px;">

<hr style="border-top: 0;border-right: 0;border-bottom: 1px solid $

{colorDivider};border-left: 0;margin: 0;height: 0;clear: both;"/>

</td>

</tr>

<tr>

<td align="left" valign="top" style="padding-top: 40px; <@styleSubtitle />">

<@rosetta.message key="OrderConfirmation.RelatedProducts.title" />

</td>

</tr>

<tr>

<td align="left" valign="top" style="padding-top: 10px;">

<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; min-

width: 100%;" class="table-col-2">

<#assign i = 0 />

<tr>

<#list 1..3 as cell>

<#if products[i]??>

<#assign product=products[i] />

<td align="center" valign="top" width="186" class="table-col-

2__cell">

<a href="${product.customerUrl}" style="display: block;">

 <${imgTag} <@fitImage product.imageWidth
product.imageHeight 186 186 /> src="${product.imageUrl}" alt="${product.name}" />

</a>

<span style="<@styleText/><@wordBreakAll/> display:block;

padding-top:10px;">${product.name}</span>

<span style="<@styleText />

display:block;">${product.price}</span>

</td>

<#else>

<td align="center" valign="top" width="186" height="0"

style="padding:0px; height:0px" class="table-col-2__cell"></td>

</#if>

<#assign i++ />

<#sep><td width="40" class="mobile-hidden"></td></#sep>

</#list>

</tr>

</table>

</td>

</tr>

</#if>

<!-- block-related-products: end -->

<!-- block-discount: start -->

<#if coupon??>

<tr>

<td align="left" valign="top" style="padding-top: 40px;">

<table cellpadding="0" cellspacing="0" border="0" style="width: 100%; min-

width: 100%;">

<tr>

<td align="left" valign="top" style="<@styleSubtitle />">

 ${coupon.description}

</td>

</tr>

<tr>

<td align="left" valign="top" style="padding-top: 10px; <@styleText />">

<@rosetta.message key="Common.BlockDiscount.text"
params={ "secretCode": coupon.code } />

</td>

</tr>

<tr>

<td align="left" valign="top" style="padding-top: 20px;">

<#assign goToStoreButtonText><@rosetta.message
key="Common.go_to_store.button" /></#assign>

<@primaryButton store.storeUrlWithUtmParams goToStoreButtonText

290 colorText "full-width-mobile" />

</td>

</tr>

</table>

</td>

</tr>

</#if>

<!-- block-discount: end -->

<!-- Store contact info and help note : start -->

<tr>

<td align="left" valign="top" style="padding-top: 40px; padding-bottom: 0;">

<h2 style="font-family: ${fontFamily}; font-size: 24px; font-weight: normal; line-

height: 36px; color: ${colorText}; margin: 0; padding: 0;">

<@rosetta.message key="OrderConfirmation.thanks" />

</h2>

</td>

</tr>
 <tr>

<td align="left" valign="top">

<table cellpadding="0" cellspacing="0" border="0" width="100%">

<#if !customer.isAnonymous>

<#if store.customerSignInEnabled>

<tr>

<td style="padding-top: 15px; padding-bottom: 0;">

<p style="font-family: ${fontFamily}; font-size: 16px; line-height: 24px;

color: ${colorText}; margin: 0; padding: 0;">

<#assign historyLink>

<a href="${store.customerOrdersPageUrl}" style="text-

decoration: underline; color: ${colorLink};"><@rosetta.message
key="OrderConfirmation.OrdersHistory.link_text" /></a>

</#assign>

<@rosetta.message
key="OrderConfirmation.OrdersHistory.content" params={ "history_link": historyLink?
replace("\r?\n", "", "r") } />

</p>

</td>

</tr>

</#if>

</#if>

<tr>

<td style="padding-top: 15px; padding-bottom: 0;">

<p style="font-family: ${fontFamily}; font-size: 15px; line-height: 24px;

color: ${colorText}; margin: 0; padding: 0;">

<#assign companyEmailLink>

<a href="mailto:${store.companyEmail}" style="text-decoration:

underline; color: ${colorLink};">${store.companyEmail}</a>

</#assign>

<#if (store.officeAddress.phone)?has_content>

<#assign phoneNumber>

<b>${store.officeAddress.phone}</b>
 </#assign>

<#assign contactInfoText>

<@rosetta.message key="OrderConfirmation.Help.email_or_phone"
params={ "email": companyEmailLink, "phone": phoneNumber} />

</#assign>

<#else>

<#assign contactInfoText>

<@rosetta.message key="OrderConfirmation.Help.email"
params={ "email": companyEmailLink } />

</#assign>

</#if>

<@rosetta.message key="OrderConfirmation.Help.content"
params={ "contact_info_text": contactInfoText } />

</p>

</td>

</tr>

</table>

</td>

</tr>

<!-- Store contact info and help note : end -->

<!-- Signature : start -->

<tr>

<td align="left" valign="top" style="padding-top: 10px;">

<p style="<@styleText /> padding:0; margin:0;">

<@rosetta.message key="OrderConfirmation.signature" /><br/>

 <a href="${store.storeUrl}" style="text-decoration: none; color: $
{colorLink};">${store.name}</a>

</p>

</td>

</tr>

<!-- Signature : end -->

<!-- block-social-icons: start -->

<#if socialLinks??>

<tr>

<td align="left" valign="top" style="padding-top: 20px;">

<#assign facebookUrl = socialLinks.facebookUrl!>

<#assign twitterUrl = socialLinks.twitterUrl!>

<#assign instagramUrl = socialLinks.instagramUrl!>

<#assign vkUrl = socialLinks.vkUrl!>

<#assign pinterestUrl = socialLinks.pinterestUrl!>

<#assign youtubeUrl = socialLinks.youtubeUrl!>

<#if facebookUrl?has_content

|| twitterUrl?has_content

|| instagramUrl?has_content

|| vkUrl?has_content

|| pinterestUrl?has_content

|| youtubeUrl?has_content>

<table cellpadding="0" cellspacing="0" border="0">

<tr>

<#if facebookUrl?has_content>

<td align="left" valign="top" width="60">

<a href="${facebookUrl}" target="_blank" style="text-decoration:

none;vertical-align: top; display: inline-block; width: 40px; height: 40px;">
 <${imgTag} width="40" height="40"
src="https://d1howb1wwyap5o.cloudfront.net/mail_notifications/social_circled_facebook.png
" alt="Facebook" />

</a>

</td>

</#if>

<#if twitterUrl?has_content>

<td align="left" valign="top" width="60">

<a href="${twitterUrl}" target="_blank" style="text-decoration:

none;vertical-align: top; display: inline-block; width: 40px; height: 40px;">

<${imgTag} width="40" height="40"

src="https://d1howb1wwyap5o.cloudfront.net/mail_notifications/social_circled_twitter.png"
alt="Twitter" />

</a>

</td>

</#if>

<#if instagramUrl?has_content>

<td align="left" valign="top" width="60">

<a href="${instagramUrl}" target="_blank" style="text-decoration:

none;vertical-align: top; display: inline-block; width: 40px; height: 40px;">

<${imgTag} width="40" height="40"

src="https://d1howb1wwyap5o.cloudfront.net/mail_notifications/social_circled_instagram.pn
g" alt="Instagram" />

</a>

</td>

</#if>

<#if vkUrl?has_content>

<td align="left" valign="top" width="60">

<a href="${vkUrl}" target="_blank" style="text-decoration:

none;vertical-align: top; display: inline-block; width: 40px; height: 40px;">
 <${imgTag} width="40" height="40"
src="https://d1howb1wwyap5o.cloudfront.net/mail_notifications/social_circled_vk.png"
alt="Vk" />

</a>

</td>

</#if>

<#if pinterestUrl?has_content>

<td align="left" valign="top" width="60">

<a href="${pinterestUrl}" target="_blank" style="text-decoration:

none;vertical-align: top; display: inline-block; width: 40px; height: 40px;">

<${imgTag} width="40" height="40"

src="https://d1howb1wwyap5o.cloudfront.net/mail_notifications/social_circled_pinterest.png
" alt="Pinterest" />

</a>

</td>

</#if>

<#if youtubeUrl?has_content>

<td align="left" valign="top" width="60">

<a href="${youtubeUrl}" target="_blank" style="text-decoration:

none;vertical-align: top; display: inline-block; width: 40px; height: 40px;">

<${imgTag} width="40" height="40"

src="https://d1howb1wwyap5o.cloudfront.net/mail_notifications/social_circled_youtube.png"
alt="Youtube" />

</a>

</td>

</#if>

</tr>

</table>

</#if>

</td>

</tr>

</#if>
 <!-- block-social-icons: end -->

<!-- Footer : start -->

<tr>

<td align="left" style="<@styleTextLight /> padding-top: 40px;">

&copy; ${store.name}

<#if store.officeAddress?has_content>

<br />${store.officeAddress}

</#if>

<#if store.businessRegistrationID.value?has_content>

<br />${store.businessRegistrationID.name}: $
{store.businessRegistrationID.value}

</#if>

</td>

</tr>

<tr>

<td align="left" valign="top" style="padding-top: 10px">

<@legalPages />

</td>

</tr>

<!-- Footer : end -->

</table>

</td>

</tr>

</table>

<!--[if mso]>

</td></tr></table></center>

<![endif]-->