.orders-head { display: grid; gap: var(--s4); padding-block: var(--s8); }
.orders-head h1 { font-size: var(--d-2); }
.orders-head .lede { max-width: 48ch; }
.orders-actions { display: flex; flex-wrap: wrap; gap: var(--s4); }
.orders-list { display: grid; gap: var(--s6); list-style: none; padding: 0; margin: 0; }
.order-card { padding: var(--s6); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: var(--s4); }
.order-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.order-card h2 { font-size: var(--d-4); }
.order-card__state { font-size: var(--t-sm); font-weight: var(--w-emph); }
.order-card__lines { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.order-card__lines li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); font-size: var(--t-sm); }
.order-card__lines .num { white-space: nowrap; }
.order-card .note { margin: 0; }
.order-lookup { border-top: 1px solid var(--line); margin-top: var(--s8); padding-top: var(--s6); }
.order-lookup summary { min-height: 44px; cursor: pointer; font-size: var(--t-body); }
.order-lookup form { display: grid; gap: var(--s5); max-width: 560px; margin-top: var(--s5); }
.orders-empty { padding-block: var(--s7); max-width: 48ch; }
.orders-page { padding-bottom: var(--s10); }
@media (min-width: 900px) { .orders-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }