---
layout: default
---

<section>
  <h1>{{ page.title }}</h1>
  <div class="content">
    {{ content | replace: '<img ', '<img loading="lazy" ' | replace: '<iframe ', '<iframe loading="lazy" ' }}
  </div>

  <div
    data-controller="order"
    data-order-item-template="assets/templates/cart.html">

    <div class="row no-gutters align-items-center font-weight-bold justify-content-center">
      <div class="d-none d-lg-block col-lg-4 p-3">
        <h4 class="m-0">{{ page.product }}</h4>
      </div>

      <div class="d-none d-lg-block col-lg-8">
        <div class="row no-gutters align-items-center">
          <div class="col-lg p-3">
            <h4 class="m-0">{{ page.price }}</h4>
          </div>

          <div class="col-lg p-3">
            <h4 class="m-0">{{ page.quantity }}</h4>
          </div>

          <div class="col-lg p-3">
            <h4 class="m-0">{{ page.subtotal }}</h4>
          </div>

          <div class="col-lg-2 p-3">
            <h4 class="m-0 sr-only">{{ page.remove }}</h4>
          </div>
        </div>
      </div>

      <div class="col-12" data-target="order.cart">
      </div>
    </div>

    <div class="row no-gutters align-items-end">
      <div class="order-last order-md-first col-12 col-md-6 col-lg-4 mt-3 mt-md-0">
        <a href="?" class="btn btn-transparent black border text-uppercase">
          {{ page.back }}
        </a>
      </div>

      <div class="col-12 col-md-6 col-lg-8">
        <div class="row no-gutters align-items-center">
          <div class="col-lg"></div>

          <div class="col-6 col-lg text-right">
            <p class="font-weight-bold">{{ page.subtotal }}</p>
          </div>

          <div class="col-6 col-lg text-center">
            <p class="font-weight-bold" data-target="order.subtotal">0</p>
          </div>

          <div class="col-lg-2"></div>

          <div class="col-12">
            <a href="{{ site.shipment.url }}" class="btn btn-block btn-primary text-uppercase">{{ site.shipment.title }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>