/* 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); }
.or-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-4); align-items: 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; } }