/* Customer order tracking page (10 Oct 2026).
   Only what find-order.html adds: the progress row, the facts list and the item list. Everything
   else (header, hero, card, form, button, status line) reuses site.css, responsive.css and
   widgets-contact-checkout.css, so the page cannot drift away from the rest of the shop.
   Colours come from the site's own variables, never a fixed hex. */

.fo-order .contact-card-header h2 { overflow-wrap: anywhere; }
#fo-code { font-family: var(--body); font-size: .62em; letter-spacing: .06em; }

/* A compact hero on this page only. The shared .page-hero.plain is 450px tall, which is right for a
   page someone browses to and wrong here: a customer arriving from the e-mail link landed on an empty
   green panel and had to scroll to find their own order. The order card now sits above the fold at
   1366x900, and the phone rules in responsive.css still apply underneath. */
.fo-hero.page-hero.plain, .fo-hero.page-hero.plain > div { min-height: 280px; }
.fo-hero.page-hero.plain > div { padding-block: clamp(34px, 4vw, 54px); }
#fo-order.section { padding-top: 44px; }

/* Placed -> Shipped -> Delivered. One row on a desktop, one column on a phone, because three
   stages side by side at 390px leaves no room for the words under them. */
.fo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.fo-steps li {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: 'dot label' '. note';
  column-gap: 10px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
}
.fo-steps strong { grid-area: label; color: var(--fg); font-weight: 700; font-size: .95rem; }
.fo-steps small { grid-area: note; font-size: .78rem; }
.fo-dot {
  grid-area: dot;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
}
.fo-steps li.is-done { border-color: var(--accent); }
.fo-steps li.is-done .fo-dot { background: var(--accent); border-color: var(--accent); }
.fo-steps li.is-now { background: color-mix(in oklch, var(--accent) 9%, var(--surface)); }
.fo-steps li.is-now strong { color: var(--deep); }

.fo-cancelled {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font-weight: 650;
}

.fo-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
.fo-facts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fo-facts dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.fo-facts dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }

/* .8rem, not .74rem: responsive.css raises the site's own .eyebrow to exactly .8rem (12.8px) so the
   micro-labels clear the 12px floor the responsive sweep enforces. .74rem renders at 11.84px and the
   sweep counts it as unreadable -- which it did, on all three widths, when this page was first built. */
.fo-subhead { font: 700 .8rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 12px; }

.fo-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fo-items li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.fo-items li:last-child { border-bottom: 0; padding-bottom: 0; }
.fo-items strong { font-weight: 650; overflow-wrap: anywhere; }
.fo-items span { color: var(--muted); white-space: nowrap; }

.fo-note { font-size: .86rem; color: var(--muted); margin: 0; }
.fo-tracking p { margin: 0 0 12px; color: var(--fg); }

@media (max-width: 780px) {
  .fo-steps { grid-template-columns: 1fr; gap: 10px; }
  .fo-facts { grid-template-columns: 1fr; gap: 14px; }
}