{% raw %}
  <div>
    <dl>
      <dt>{{ site.confirmation.number }}</dt>
      <dd>{{ order.number }}</dd>

      <dt>{{ site.confirmation.delivery }}<dt>
      <dd><address>{{ shipping_address.address1 }}, {{ shipping_address.city }} ({{ shipping_address.zipcode }})</address></dd>

      <dt>{{ site.confirmation.email }}</dt>
      <dd>{{ order.email }}</dd>
    </dl>
  </div>

  <div class="">
    <h1>{{ site.confirmation.your_order }}</h1>
    <div class="row no-gutters align-items-center">
      <div class="d-none d-md-block col-md-4">
        <h2 class="f-3 font-weight-bold text-uppercase">{{ site.cart.product }}</h2>
      </div>

      <div class="d-none d-md-block col-md-4 pl-3">
        <h2 class="f-3 font-weight-bold text-uppercase">{{ site.cart.price }}</h2>
      </div>

      <div class="d-none d-md-block col-md-4 pl-3">
        <h2 class="f-3 font-weight-bold text-uppercase">{{ site.cart.subtotal }}</h2>
      </div>

      {% for product in products %}
        <div class="col-12 col-md-4">
          <h2 class="f-3 font-weight-bold text-uppercase d-md-none">{{ site.cart.product }}</h2>
          <h2 class="f-3 font-weight-bold">{{ product.title }}</h2>
          <p>{{ product.extra | join: ',' }}</p>
        </div>

        <div class="col-12 col-md-4 pl-md-3">
          <h2 class="f-3 font-weight-bold text-uppercase d-md-none">{{ site.cart.price }}</h2>
          <p>
            {{ product.line_item.attributes.price }}
            {{ product.line_item.attributes.currency }}
          </p>
        </div>

        <div class="col-12 col-md-4 pl-md-3">
          <h2 class="f-3 font-weight-bold text-uppercase d-md-none">{{ site.cart.subtotal }}</h2>
          <p>
            {{ product.line_item.attributes.discounted_amount }}
            {{ product.line_item.attributes.currency }}
          </p>
        </div>
      {% endfor %}

      <div class="col-6 col-md-8 text-right border-top border-red pt-3">
        <p>
          {{ site.cart.subtotal }}
        </p>
      </div>

      <div class="col-6 col-md-4 border-top border-red pt-3 pl-3">
        <p>
          {{ order.total }}
        </p>
      </div>
    </div>
  </div>
{% endraw %}