Receipt

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Receipt</title>
<style>
  @page {
    margin: 12mm;
  }

  body {
    font-family: Helvetica;
    font-size: 9pt;
    color: #111827;
  }

  .receipt {
    width: 80mm;
    margin-left: auto;
    margin-right: auto;
  }

  .center {
    text-align: center;
  }

  .shop {
    font-size: 14pt;
    font-weight: bold;
  }

  .rule {
    border-top: 1px dashed #6b7280;
    margin-top: 3mm;
    margin-bottom: 3mm;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    padding-top: 1mm;
    padding-bottom: 1mm;
  }

  .num {
    text-align: right;
  }

  .total td {
    font-size: 11pt;
    font-weight: bold;
  }
</style>
</head>
<body>
  <div class="receipt">
    <div class="center shop">Acme Corp Cafe</div>
    <div class="center">1 Main Street, Anytown</div>
    <div class="rule"></div>
    <div>Receipt R-000318</div>
    <div>October 28, 2026 08:42</div>
    <div class="rule"></div>
    <table>
      <tr><td>2 x Coffee</td><td class="num">$7.00</td></tr>
      <tr><td>1 x Croissant</td><td class="num">$3.20</td></tr>
      <tr><td>1 x Orange juice</td><td class="num">$4.50</td></tr>
      <tr><td>1 x Granola bowl</td><td class="num">$6.80</td></tr>
    </table>
    <div class="rule"></div>
    <table>
      <tr><td>Subtotal</td><td class="num">$21.50</td></tr>
      <tr><td>Tax 8%</td><td class="num">$1.72</td></tr>
      <tr class="total"><td>Total</td><td class="num">$23.22</td></tr>
      <tr><td>Paid by card</td><td class="num">$23.22</td></tr>
    </table>
    <div class="rule"></div>
    <div class="center">Thank you for your visit.</div>
  </div>
</body>
</html>