#purchases { display: grid; grid-template-columns: var(--qr-pair-columns); gap: .75rem; margin-top: 1rem; }
#purchases > .empty { grid-column: 1 / -1; }
#purchases > .purchase-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  gap: .6rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--qr-text);
  background: var(--qr-surface);
}
#purchases .purchase-card > div { min-width: 0; }
#purchases .history-top { display: block; }
#purchases .history-top h3,
#purchases .purchase-card > div > strong { display: block; margin: 0; font-size: 1rem; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
#purchases .purchase-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .6rem; margin: .6rem 0 0; color: var(--qr-muted); font-size: .85rem; }
#purchases .purchase-summary strong { margin: 0; color: var(--qr-text); font-size: 1rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#purchases .event-meta { margin: .4rem 0 0; color: var(--qr-muted); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
.purchase-receipt-status { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: flex-start; min-width: 0; max-width: 100%; }
#purchases .purchase-card > .purchase-receipt-status { margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--line); }
#purchases .purchase-receipt-status > .purchase-receipt-action { width: 100%; }
#purchases :is(.status, .used-stamp, .fulfillment-revoked) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#purchases .used-stamp { margin: .2rem 0; transform: none; }
.purchase-receipt-status small { flex-basis: 100%; color: var(--qr-muted); font-size: .8rem; overflow-wrap: anywhere; }
.purchase-receipt-action,
.purchase-receipt-dialog button { min-height: 44px; width: auto; padding: .6rem .9rem; border: 1px solid var(--qr-line); border-radius: 12px; color: var(--qr-text); background: var(--qr-surface); font: inherit; font-weight: 700; cursor: pointer; }
.purchase-receipt-action:hover,
.purchase-receipt-dialog button:hover { color: var(--qr-text); background: var(--qr-hover); }
.purchase-receipt-action:active,
.purchase-receipt-dialog button:active { color: var(--qr-text); background: var(--qr-active); }
.purchase-receipt-action:focus-visible,
.purchase-receipt-dialog button:focus-visible { color: var(--qr-text); background: var(--qr-hover); outline: 3px solid var(--qr-focus); outline-offset: 3px; }
.purchase-receipt-action:disabled,
.purchase-receipt-dialog button:disabled { color: var(--qr-muted); background: var(--qr-disabled); opacity: 1; cursor: default; }
.purchase-receipt-dialog { box-sizing: border-box; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; overflow: auto; border: 1px solid var(--qr-line); border-radius: 20px; color: var(--qr-text); background: var(--qr-surface); box-shadow: 0 12px 48px #0005; word-break: keep-all; overflow-wrap: anywhere; }
.purchase-receipt-dialog::backdrop { background: #0008; }
.purchase-receipt-dialog h2 { margin: 0 0 1rem; font-size: 1.3rem; color: var(--qr-text); }
.purchase-receipt-dialog p { color: var(--qr-text); line-height: 1.6; }
.purchase-receipt-product { font-weight: 700; }
.purchase-receipt-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }