/* The order page and "Your orders" (S9). Not frozen: there is no prototype, so it is built in the port from the brief and the checkout's own
   language (tokens only). The hold banner, the pieces, the address and the summary are the checkout's classes (checkout.css, linked beside). */
.or-head { display: grid; gap: var(--ui-space-2); }
.or-head__meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-3); font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.or-cause { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
.or-card { display: grid; gap: var(--ui-space-5); padding: var(--ui-space-6); background: var(--ui-surface-2); border: 1px solid var(--ui-border); }
.or-card__text { margin: 0; font-size: var(--ui-text-md); color: var(--ui-text); }

/* The progress: one row per state reached, the latest emphasised. */
.or-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-4); }
.or-timeline__row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ui-space-4); align-items: baseline; }
.or-timeline__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ui-border-strong); align-self: center; }
.or-timeline__row[aria-current="step"] .or-timeline__dot { background: var(--ui-accent); box-shadow: 0 0 0 4px var(--ui-surface-3); }
.or-timeline__label { color: var(--ui-text-muted); font-size: var(--ui-text-md); }
.or-timeline__row[aria-current="step"] .or-timeline__label { color: var(--ui-text); font-weight: var(--ui-weight-strong); }
.or-timeline__at { grid-column: 2; font-size: var(--ui-text-xs); color: var(--ui-text-subtle); }

.or-after { gap: var(--ui-space-2); }
.or-after p { margin: 0; font-size: var(--ui-text-sm); color: var(--ui-text-muted); }
/* I-05 (batch C, 5 Nov 2026): the actions are equal in width: a full-width column on a phone, one row of equal columns from 560.
   At most two share the row (View receipt needs a confirmed order, Cancel one awaiting payment), each at least 251 px there, so
   "Enquire on WhatsApp" fits; with large text a label wraps inside its button rather than overflow it. */
.or-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-space-3); }
@media (min-width: 560px) { .or-actions { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.or-actions > .ui-btn, .or-actions > .or-enquire > .ui-btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.or-actions .ui-btn, .or-enquire .ui-btn { min-height: 48px; }
.or-enquire { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
.or-sheet .ck-form { gap: var(--ui-space-4); }

/* "Your orders": a row is a link to its order; a photograph of the first piece when there is one. */
.or-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-space-4); }
.or-row { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--ui-space-4); align-items: center; padding: var(--ui-space-4); background: var(--ui-surface); border: 1px solid var(--ui-border); color: inherit; text-decoration: none; min-height: 44px; }
.or-row:hover { border-color: var(--ui-accent); }
.or-row__media { width: 72px; }
.or-row__body { display: grid; gap: var(--ui-space-2); min-width: 0; }
.or-row__title { color: var(--ui-text); font-size: var(--ui-text-md); font-weight: var(--ui-weight-strong); overflow-wrap: anywhere; }
.or-row__more { color: var(--ui-text-muted); font-weight: normal; white-space: nowrap; }
.or-row__meta { font-size: var(--ui-text-xs); color: var(--ui-text-muted); }
.or-row__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }

/* On a narrow phone the card goes edge to edge (the page's own gutter is 16px there), so the six code boxes keep 44px taps. */
@media (max-width: 399px) { .or-card { margin-inline: -16px; border-inline: 0; padding-inline: 16px; } }

/* I-17 (batch B; Member 1 under the owner's delegation, 5 Nov 2026): a cancelled or lapsed order's way back. Two equal buttons
   side by side; on a phone, one under the other at full width. */
.or-again { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); }
.or-again > .ui-btn { min-height: 48px; justify-content: center; flex: 1 1 200px; }
/* I-14 (batch B): an unpaid order's row carries, under it and joined to it, when the payment closes and Pay now. */
.or-row__pay { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ui-space-3); padding: var(--ui-space-3) var(--ui-space-4); background: var(--ui-surface-2); border: 1px solid var(--ui-border); border-top: 0; }
.or-row__payby { font-size: var(--ui-text-sm); color: var(--ui-text); }
.or-row__pay > .ui-btn { min-height: 44px; }