/* Page-local styles for /product/invoices/ */
/* invoices: status chips and the hosted-invoice panel */
.inv-panel { display: grid; gap: 28px; justify-items: center; }
/* the hosted invoice, framed on the card itself: the source screenshot
   carries a wide margin below the page, cropped away here */
.inv-panel .shot { width: min(880px, 100%); aspect-ratio: 2200 / 950; }
.inv-panel .shot img { margin-top: -1.8%; }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border-radius: 18px; padding: 8px 18px;
  font-size: 13.5px; line-height: 20px; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(20, 26, 18, 0.03), 0 1px 1px rgba(20, 26, 18, 0.04);
}
.chip i { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.d-sent { background: oklch(0.5947 0.1473 255.4); }
.d-view { background: oklch(0.6293 0.1129 68.7); }
.d-paid { background: var(--accent); }
.d-over { background: oklch(0.6026 0.1654 9); }
.pay-ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pay-way { display: flex; flex-direction: column; gap: 10px; }
.pay-way b { font-size: 15px; font-weight: var(--w-medium); color: var(--ink-strong); }
.pay-way p { font-size: 14px; line-height: 22px; color: var(--ink-soft); }
@media (max-width: 800px) { .pay-ways { grid-template-columns: 1fr; gap: 28px; } }