body {
    font-family: "Google Sans", "Battambang", sans-serif !important;
}

.receipt, .receipt * {
    /* Explicit on purpose — with no line-height set, the browser's native
       print engine and html2canvas's network-print capture (see
       network-print.js) each compute their own default from the
       Battambang/Google Sans font metrics independently, and html2canvas
       is known to not always match a browser's own text-layout metrics for
       custom web fonts. That's what shows up as visibly larger gaps
       between every line on a network-printed receipt vs. USB — pinning
       one explicit value here means both paths use the exact same number
       instead of two independent (and apparently different) guesses. */
    line-height: 1.35;
  }

  .receipt {
    width: 80mm; /* Standard receipt printer width */
    /* Without this, padding is added on top of the 80mm width (content-box
       is the CSS default) instead of eating into it, so the actual printed
       box is wider than the paper's @page size below and the right edge
       gets clipped by the printer. */
    box-sizing: border-box;
    margin: 0 auto;
    padding: 10px;
    font-size: 11pt;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  .receipt-header {
    text-align: center;
    margin-bottom: 20px;
  }

  .receipt-header h2 {
    font-weight: 500;
  }

  .receipt-details {
    margin-bottom: 20px;
  }

  .receipt-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 5px;
  }

  .receipt-items .heading {
    font-weight: 500;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }

  .receipt-items th {
    border-bottom: none;
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: 10pt;
  }

  .receipt-items td {
    vertical-align: top;
    border-bottom: none;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 10pt;
  }

  .receipt-items .start {
    text-align: start;
  }

  .receipt-items .center {
    text-align: center;
  }

  .receipt-items .end {
    text-align: end;
  }

  .receipt-items .total {
    text-align: right;
    border-top:1px dashed black;
    border-bottom:1px dashed black;
  }

  .receipt-items .total .bold {
    font-weight: 500;
  }

  .receipt-items th {
    font-weight: 500;
  }

  .receipt-footer {
    text-align: center;
    font-size: smaller;
  }

  @media print {
    @page {
      size: 80mm auto !important;
      margin: 0 !important;
    }
    body {
      margin: 0 !important;
      padding: 0 !important;
    }
    .receipt {
      font-size: 10pt;
      padding: 3px;
      box-shadow: none;
    }
  }