/* Order confirmation, order detail and tracking. Source: .table / .badge in
   app/globals.css, plus the inline styles in app/order/[number]/page.tsx,
   components/OrderDetail.tsx and app/track/page.tsx. */

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding: 10px; border-bottom: 1.5px solid var(--ink); }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--tan); color: var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.badge.paid { background: #DDF0E6; color: var(--green); }
.badge.shipped, .badge.delivered { background: var(--ink); color: var(--card); }
.badge.payment_failed, .badge.cancelled { background: #FBE7E3; color: var(--red); }

/* Order page. */
.order-wrap { max-width: 720px; margin: 0 auto; padding: 64px 16px 96px; text-align: center; }
.order-h1 { font-size: calc(64px * var(--cc-h-scale, 1)); margin: 8px 0 0; font-weight: var(--cc-h-weight, 400); text-transform: var(--cc-h-transform, none); }
.order-lede { margin: 12px 0 24px; font-size: 16px; color: var(--ink2); }
.alert.order-test { margin-bottom: 16px; text-align: left; }
.panel.strong.order-summary { padding: 22px; text-align: left; display: flex; flex-direction: column; gap: 9px; }
.order-detail-wrap { text-align: left; margin-top: 20px; }
.btn.order-back { margin-top: 24px; height: 50px; }
.page.narrow.order-nf { text-align: center; max-width: 720px; padding: 64px 16px 96px; }
.order-nf-title { font-size: calc(48px * var(--cc-h-scale, 1)); text-transform: var(--cc-h-transform, none); }
.order-nf p { color: var(--ink2); }
.btn.order-nf-btn { margin-top: 12px; }

/* Order detail panel. */
.panel.od { padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.od-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.od-title { font-size: calc(26px * var(--cc-h-scale, 1)); text-transform: var(--cc-h-transform, none); }
.od-placed { font-size: 13px; color: var(--mute); }
.srow.od-line { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.price.od-total { font-size: 30px; }

/* Track page. */
.page.narrow.track-page { max-width: 760px; }
.track-intro { margin: 4px 0 24px; font-size: 14px; color: var(--ink2); }
.panel.track-form { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.btn.track-submit { align-self: flex-start; height: 48px; }
.track-result { margin-top: 20px; }