/* Wide branding and uneven paper edges, keeping the receipt inside the viewport. */
body main .card { --receipt-inset: 26px; }
body main .receipt-header img {
  width: calc(100% + 2 * var(--receipt-inset) - 16px);
  max-width: none;
  margin-left: calc(8px - var(--receipt-inset));
  margin-right: calc(8px - var(--receipt-inset));
}
body main .card::before,
body main .card::after {
  height: 17px;
  background: #fffef9;
  background-size: auto;
  clip-path: polygon(0 52%, 1% 29%, 2.3% 47%, 3.6% 12%, 5% 41%, 6.8% 22%, 8.2% 56%, 10% 18%, 11.4% 43%, 13% 10%, 14.6% 48%, 16% 26%, 18% 54%, 19.3% 17%, 21% 42%, 23% 11%, 24.6% 39%, 26% 22%, 28% 57%, 29.4% 30%, 31% 45%, 32.8% 12%, 34% 38%, 36% 19%, 37.5% 51%, 39% 27%, 41% 56%, 42.5% 16%, 44% 43%, 46% 8%, 47.4% 37%, 49% 20%, 51% 53%, 52.5% 25%, 54% 45%, 56% 12%, 57.4% 40%, 59% 22%, 61% 58%, 62.5% 31%, 64% 48%, 66% 13%, 67.5% 37%, 69% 20%, 71% 50%, 72.5% 28%, 74% 56%, 76% 15%, 77.4% 43%, 79% 10%, 81% 46%, 82.5% 24%, 84% 52%, 86% 18%, 87.5% 40%, 89% 12%, 91% 49%, 92.5% 27%, 94% 56%, 96% 17%, 97.5% 41%, 99% 23%, 100% 45%, 100% 100%, 0 100%);
}
body main .card::before { top: -16px; transform: none; }
body main .card::after { bottom: -16px; transform: rotate(180deg); }
@media (max-width: 360px) { body main .card { --receipt-inset: 19px; } }
@media print { body main .card { --receipt-inset: 12px; } }