.receipt-meta {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-2);
}

.receipt-actions {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.delivery-details {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: var(--space-6);
  padding: var(--space-4);
}

.delivery-details h2 {
  font-size: var(--text-lg);
  margin-top: 0;
}

/* Responsive: same collapse technique as .orders-table/.admin-table. */
@media (width <= 600px) {
  .receipt-table thead {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  /* :not([hidden]) — receipt.js toggles `hidden` on #receipt-promo-row
     depending on the plan; without this, the unconditional
     `display: block` below (author CSS, always wins over the UA
     stylesheet's `[hidden] { display: none }`) would defeat that hide at
     this breakpoint. Same fix as admin.css's .admin-table tr. */
  .receipt-table tr:not([hidden]) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: block;
    margin-bottom: var(--space-4);
    padding: var(--space-4);
  }

  .receipt-table td,
  .receipt-table th[scope='row'] {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    font-size: var(--text-sm);
    justify-content: space-between;
    padding: var(--space-2) 0;
  }

  .receipt-table td:last-child,
  .receipt-table th[scope='row']:last-child {
    border-bottom: none;
  }

  .receipt-table td::before {
    color: var(--color-muted);
    content: attr(data-label);
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-right: var(--space-4);
    text-transform: uppercase;
  }
}

/* Print stylesheet — the "my human will not understand the invoice" joke
   seeded in checkout.html's success copy gets its payoff here: strip
   everything but the receipt itself. */
@media print {
  .site-header,
  .site-footer,
  .skip-link,
  .receipt-actions,
  #receipt-status {
    display: none;
  }

  .receipt-table {
    width: 100%;
  }
}