/* =========================================================
   pages/orders.css (T-215) — track_order.html + purchase_history.html +
   order_success.html only. Linked from each template's
   {% block extra_head %}.

   SUPERSEDES the following style.css selectors (verified at commit 8d4a6bf,
   T-206b) — T-221 deletes each from style.css once this file ships. Lines
   marked "(dead)" have no replacement here because this task's redesign
   dropped the markup that used them (safe to delete outright, nothing left
   referencing them):
     - line   913  .card--slim                          -> re-tokened below
     - line  1536  .order-track-head { ... }             -> re-tokened below
     - line  1543  .order-track-head h2 { margin: 0; }   (dead — the card
                    head is a .kicker span now, not an <h2>)
     - lines 1544-1550  .order-number { ... }            -> re-tokened below
     - line  1551  .order-address { margin-top: 18px; }  -> re-tokened below
     - line  1552  .order-address p { ... }              -> re-tokened below
     - line  2202  .order-card { padding: 24px 26px; }   (dead — relies on
                    the base .card responsive padding now, no override)
     - lines 2203-2212  .order-card__head { ... }        -> re-tokened below
     - line  2213  .order-card__head h3 { ... }          (dead — replaced by
                    .order-card__head-info > .kicker + .order-card__date)
     - line  2214  .order-meta { ... }                    (dead — the price
                    column it decorated was dropped from the card head)
     - lines 2219-2229  .order-card__timeline (+ nested, + media query)
                    -> re-tokened below
     - lines 2231-2236  .order-item { ... }              -> re-tokened below
                    (48px thumb per T-215 dispatch, was 64px)
     - lines 2237-2244  .order-item img { ... }          -> re-tokened below
     - line  2245  .order-item strong { ... }            -> re-tokened below
   (line numbers as of 8d4a6bf; re-check before deleting in case an
   intervening commit shifted them.)

   NOT moved here — shared across other page groups, stays in style.css:
   .page-head/.lede, .field/.field__hint/.field__error, .empty-state,
   .pagination, .auth-wrap, .status-icon, .check-draw, .confetti,
   .reassurance, .steps/.steps__*, .order-timeline (all) / .order-cancelled-banner
   (the frozen _order_timeline.html partial's own contract).

   css_gaps (for T-221 — the same gap already flagged by cart.css/
   checkout.css; noted here too since track_order.html is a third,
   independent consumer):
     - base.html's {% block header_back %} / .header-back has no shared CSS
       anywhere in style.css (T-207 added the block; the class it documents
       was never styled). cart.css/checkout.css scope their workaround to
       body.has-action-bar (their back link only appears in the phone
       action-bar layout); track_order.html has no action-bar at all, so
       this file's .header-back is unconditionally visible below 900px
       instead (hidden at 900px+, where the desktop nav's own "Shop" link
       already covers the same destination). T-221 should promote ONE
       shared rule into style.css once every consumer (this file, cart.css,
       checkout.css, and T-220's product_detail) has landed.

   Only canonical tokens are used below (see style.css :root) — no
   @layer/nesting/IDs/!important, per the CSS contract for page files.
   Breakpoint used throughout: 700px (matches .card's own padding step).
   ========================================================= */


/* ----------  Track-my-order lookup form  ---------- */
.order-track-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 10px;
}
.order-track-form .field + .field { margin-top: 0; }

/* ----------  Track-my-order result card  ---------- */
.order-track-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.order-track-head__info { display: flex; flex-direction: column; gap: 2px; }
.order-track-meta { color: var(--muted); font-size: var(--fs-14); }

/* Items: a stacked list on phones, the original data table from 700px up. */
.order-track-items { display: flex; flex-direction: column; margin-top: 18px; }
.order-track-table { display: none; }
@media (min-width: 700px) {
    .order-track-items { display: none; }
    .order-track-table { display: block; margin-top: 18px; }
}
.order-track-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.order-track-item:last-child { border-bottom: none; }
.order-track-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 4px;
    flex-shrink: 0;
}
.order-track-item__info { flex: 1; min-width: 0; }
.order-track-item__price { white-space: nowrap; }

.order-track-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.order-address p { margin: 4px 0 0; white-space: pre-line; }

.card--slim { max-width: 540px; }

/* ----------  Order success: big order number  ---------- */
.order-number {
    font-family: var(--font-head);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--forest-800);
    margin: 4px 0 6px;
}

/* ----------  Purchase history cards  ---------- */
.order-card__head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.order-card__head-info { display: flex; flex-direction: column; gap: 2px; }
.order-card__date { color: var(--muted); font-size: var(--fs-14); }

/* Compact modifier: the shared _order_timeline.html partial re-used inside a
   purchase-history order card (narrower, denser than the standalone /track/
   page) — same markup/classes, just smaller so it doesn't dominate the card. */
.order-card__timeline { margin: 2px 0 18px; }
.order-card__timeline .order-timeline { margin: 0; gap: 10px; }
.order-card__timeline .order-timeline__dot { width: 24px; height: 24px; font-size: .7rem; }
.order-card__timeline .order-timeline__step::before { left: 11px; }
.order-card__timeline .order-cancelled-banner { margin: 0; padding: 11px 14px; font-size: .87rem; }
@media (min-width: 700px) {
    .order-card__timeline .order-timeline { gap: 4px; }
    .order-card__timeline .order-timeline__step { flex-basis: 72px; }
    .order-card__timeline .order-timeline__step::before { top: 13px; left: -50%; }
    .order-card__timeline .order-timeline__label { margin-top: 6px; font-size: .7rem; }
}

.order-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
}
.order-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 5px;
}
.order-item strong { font-weight: 650; }