/* g3-app · order.css · your order, checkout, payment sheets, confirmation, tracking (step 2)
   F1b 10-16, F2b 10/10b, F3b 08. */

/* ---------- Your order ---------- */
.ord-screen.has-bar, .co-screen.has-bar { padding-bottom: 170px; }
.ord-lines { display: flex; flex-direction: column; padding: 14px var(--gutter) 0; }
.ord-line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.ord-ph {
  width: 76px; height: 76px; flex-shrink: 0; border-radius: 18px; background: var(--beige);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ord-ph img { width: 66px; height: 58px; object-fit: contain; }
.ord-lmain { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.ord-ltop { display: flex; align-items: baseline; gap: 12px; }
.ord-lname { flex: 1 1 0; min-width: 0; font-family: var(--f-sans); font-size: 19px; line-height: 23px; }
.ord-lprice { font-family: var(--f-sans); font-size: 19px; line-height: 23px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord-ldesc { margin-top: 4px; font-size: 13px; line-height: 17px; color: var(--muted); }
.ord-lact { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.ord-edit {
  position: relative; font-size: 13px; line-height: 16px; font-weight: 600;
  text-decoration: underline 1px; text-underline-offset: 3px;
}
.ord-edit::before { content: ""; position: absolute; inset: -12px -10px; }

/* line stepper: trash / minus, qty, red plus */
.ord-step {
  display: inline-flex; align-items: center; gap: 12px; height: 36px; padding: 0 3px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 999px;
}
.ord-step-b {
  position: relative; width: 28px; height: 28px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; background: var(--beige); color: var(--ink);
  transition: transform var(--dur-fast) var(--ease);
}
.ord-step-b::before { content: ""; position: absolute; inset: -6px; }
.ord-step-b:active { transform: scale(0.9); }
.ord-step-b.is-plus { background: var(--red); color: var(--white); }
.ord-step-n { min-width: 12px; text-align: center; font-family: var(--f-sans); font-size: 17px; line-height: 20px; font-variant-numeric: tabular-nums; }

/* goes well with */
.ord-goes { padding: 22px 0 0; }
.ord-sec-l { padding: 0 var(--gutter); font-size: 13px; line-height: 16px; font-weight: 600; color: var(--muted); }
.ord-goes-row {
  display: flex; gap: 10px; overflow-x: auto; padding: 10px var(--gutter) 2px;
  scrollbar-width: none; scroll-padding: 0 var(--gutter); scroll-snap-type: x proximity;
}
.ord-goes-row::-webkit-scrollbar { display: none; }
.ord-goes-c {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 64px; padding: 0 10px 0 12px;
  border-radius: 18px; background: var(--beige); text-align: left; scroll-snap-align: start;
  transition: transform var(--dur-fast) var(--ease);
}
.ord-goes-c:active { transform: scale(0.97); }
.ord-goes-c img { width: 42px; height: 38px; object-fit: contain; }
.ord-goes-t { display: flex; flex-direction: column; gap: 1px; padding-right: 4px; }
.ord-goes-n { font-family: var(--f-sans); font-size: 16px; line-height: 19px; white-space: nowrap; }
.ord-goes-p { font-size: 12px; line-height: 15px; color: var(--muted); }
.ord-goes-add {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; background: var(--red); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}

/* discount code + totals */
.ord-tot { padding: 22px var(--gutter) 0; }
.ord-code {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 18px;
  border-radius: 999px; background: var(--beige); color: var(--muted);
}
.ord-code-ico { display: inline-flex; flex-shrink: 0; }
.ord-code-in {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; outline: none;
  font-size: 16px; line-height: 20px; color: var(--ink); text-transform: uppercase;
}
.ord-code-in::placeholder { color: var(--muted); text-transform: none; }
.ord-code-btn {
  height: 44px; padding: 0 18px; border-radius: 999px; background: var(--white); color: var(--ink);
  font-family: var(--f-sans); font-size: 16px; line-height: 20px; flex-shrink: 0;
}
.ord-code.is-on { color: var(--ink); padding-right: 18px; }
.ord-code.is-on .ord-code-ico { color: var(--green); }
.ord-code-t { flex: 1 1 0; min-width: 0; font-size: 15px; line-height: 20px; font-weight: 500; }
.ord-code-x { font-size: 14px; }
.ord-code-err { margin: 8px 18px 0; font-size: 13px; line-height: 16px; color: var(--red); }
.ord-trow {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 14px;
  font-size: 14px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.ord-trow.is-disc span:last-child { color: var(--green); font-weight: 600; }
.ord-trow.is-total { color: var(--ink); font-family: var(--f-sans); font-size: 18px; line-height: 22px; }

/* bottom bar */
.ord-bar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 2px 0 12px; }
.ord-bar-l { font-size: 14px; line-height: 18px; color: var(--muted); user-select: none; -webkit-user-select: none; }
.ord-bar-sum { font-family: var(--f-sans); font-size: 26px; line-height: 30px; font-variant-numeric: tabular-nums; }

/* empty */
.ord-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 34px var(--gutter) 32px; }
.ord-empty-img { width: 150px; height: 104px; object-fit: contain; }
.ord-empty-t { margin-top: 22px; font-family: var(--f-sans); font-size: 24px; line-height: 28px; }
.ord-empty-s { margin-top: 8px; max-width: 300px; font-size: 15px; line-height: 22px; color: var(--muted); }
.ord-empty-btn { width: auto; margin-top: 22px; padding: 0 24px; }
.ord-pop { padding: 24px var(--gutter); border-top: 1px solid var(--line); }
.ord-pop-t { font-family: var(--f-sans); font-size: 19px; line-height: 23px; }
.ord-pop-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.ord-pop-c {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 120px;
  padding: 0 6px 14px; border-radius: 18px; background: var(--beige); text-align: center;
  transition: transform var(--dur-fast) var(--ease);
}
.ord-pop-c:active { transform: scale(0.97); }
.ord-pop-c img { width: 56px; height: 46px; object-fit: contain; margin-bottom: 8px; }
.ord-pop-n { font-family: var(--f-sans); font-size: 15px; line-height: 18px; hyphens: auto; }
.ord-pop-p { font-size: 12px; line-height: 15px; color: var(--muted); }

/* ---------- Checkout ---------- */
.co .hdr-ctx svg { display: none; }
.co-sec { padding: 22px var(--gutter); border-bottom: 1px solid var(--line); }
.co-sec.is-last { border-bottom: 0; }
.co-sec.is-flash { animation: co-flash 900ms var(--ease); }
@keyframes co-flash { 0%, 40% { opacity: 0.4; } 100% { opacity: 1; } }
.co-l { margin-bottom: 12px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--muted); }
.co-l-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.co-l-row .co-l { margin: 0; }
.co-l-r { font-size: 13px; line-height: 16px; color: var(--muted); text-align: right; }
.co-place { display: flex; align-items: center; gap: 14px; }
.co-pin {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; background: var(--beige); color: var(--red);
  display: inline-flex; align-items: center; justify-content: center;
}
.co-place-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-place-n { font-family: var(--f-sans); font-size: 19px; line-height: 23px; }
.co-place-s { font-size: 13px; line-height: 16px; color: var(--muted); }
.co-change { position: relative; font-size: 15px; line-height: 20px; flex-shrink: 0; }
.co-change::before { content: ""; position: absolute; inset: -12px -8px; }
.co-seg { display: flex; gap: 4px; height: 50px; margin-top: 14px; padding: 4px; border-radius: 999px; background: var(--beige); }
.co-seg-i {
  flex: 1 1 0; border-radius: 999px; text-align: center; font-size: 15px; line-height: 18px; font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.co-seg-i.is-on { background: var(--ink); color: var(--white); }
.co-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-when-i {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 68px; padding: 12px;
  border-radius: 18px; background: var(--beige); text-align: left;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.co-when-n { font-family: var(--f-sans); font-size: 16px; line-height: 20px; text-wrap: balance; }
.co-when-s { font-size: 12px; line-height: 15px; color: var(--muted); }
.co-when-i.is-on { background: var(--ink); color: var(--white); }
.co-when-i.is-on .co-when-s { color: var(--on-ink-muted); }
.co-note { margin-top: 10px; font-size: 13px; line-height: 17px; color: var(--muted); }
.co-note.is-pad { margin: 0; padding: 0 var(--gutter) 24px; }

/* fields */
.co-fields { display: flex; flex-direction: column; gap: 10px; }
.co-field {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 16px 10px; border-radius: 16px; background: var(--beige);
  cursor: text; transition: box-shadow var(--dur-fast) var(--ease);
}
.co-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--ink); }
.co-field-l { font-size: 12px; line-height: 15px; color: var(--muted); }
.co-field-in {
  width: 100%; border: 0; padding: 0; background: transparent; outline: none;
  font-size: 17px; line-height: 22px; color: var(--ink);
}
.co-field-in::placeholder { color: var(--dot-off); }
.co-field.is-err { box-shadow: inset 0 0 0 1.5px var(--red); }
.co-field.is-err .co-field-l { color: var(--red); }

/* payment methods */
.co-pays { display: flex; flex-direction: column; gap: 10px; }
.co-pay {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px;
  border-radius: 18px; background: var(--beige); border: 2px solid transparent; text-align: left;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.co-pay.is-on { background: var(--white); border-color: var(--ink); }
.co-radio {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: var(--white);
  border: 1.5px solid var(--handle); transition: border-width var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.co-pay.is-on .co-radio { border: 7px solid var(--ink); }
.co-badge {
  width: 46px; height: 30px; flex-shrink: 0; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 14px; font-weight: 600;
}
.co-badge.is-apple { background: var(--ink); color: var(--white); }
.co-badge.is-visa { background: var(--white); border: 1px solid var(--line); color: var(--ink); font-style: italic; font-weight: 700; letter-spacing: 0.02em; }
.co-badge.is-navy { background: var(--ink); border-color: var(--ink); color: var(--white); }
.co-badge.is-line { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.co-pay-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-pay-n { font-family: var(--f-sans); font-size: 17px; line-height: 20px; }
.co-pay-s { font-size: 12px; line-height: 15px; color: var(--muted); }

.cta.is-busy { opacity: 0.85; }
.co-spin {
  display: inline-block; width: 16px; height: 16px; margin-right: 10px; vertical-align: -2px;
  border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent;
  animation: co-spin 700ms linear infinite;
}
.co-spin.is-ink { color: var(--ink); }
@keyframes co-spin { to { transform: rotate(360deg); } }

/* restaurant + time + bank sheets */
.co-rlist, .co-banks { display: flex; flex-direction: column; padding: 0 var(--gutter) 12px; }
.co-rrow, .co-bank {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 0;
  border-bottom: 1px solid var(--line); text-align: left;
}
.co-rrow:last-child, .co-bank:last-child { border-bottom: 0; }
.co-rrow-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.co-rrow-n, .co-bank-n { font-family: var(--f-sans); font-size: 18px; line-height: 22px; }
.co-bank-n { flex: 1 1 0; }
.co-bank-p { font-size: 14px; color: var(--muted); }
.co-bank.is-busy { opacity: 0.7; pointer-events: none; }
.co-rrow-s { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 16px; color: var(--muted); }
.co-rrow-ok {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; background: var(--ink); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.co-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 var(--gutter) 24px; }
.co-slot { justify-content: center; padding: 0; font-variant-numeric: tabular-nums; }
.co-card { display: flex; flex-direction: column; gap: 10px; padding: 0 var(--gutter) 16px; }
.co-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.co-card .cta { margin-top: 8px; }

/* Apple Pay sheet */
.ap-sheet .sheet-body { padding-bottom: 0; }
.ap { padding: 18px var(--gutter) calc(var(--safe-bottom) + 8px); }
.ap-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; }
.ap-badge { width: 46px; height: 30px; font-size: 14px; }
.ap-x { width: 30px; height: 30px; }
.ap-row { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--line); }
.ap-card-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ap-card-n { font-size: 16px; line-height: 20px; font-weight: 500; }
.ap-card-s { font-size: 13px; line-height: 16px; color: var(--muted); }
.ap-chev { color: var(--muted); flex-shrink: 0; }
.ap-k { flex: 1 1 0; font-size: 15px; line-height: 20px; color: var(--muted); }
.ap-v { font-size: 15px; line-height: 20px; }
.ap-sum { font-family: var(--f-sans); font-size: 28px; line-height: 32px; font-variant-numeric: tabular-nums; }
.ap-face {
  display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 22px 0 18px;
  border-top: 1px solid var(--line); color: var(--ink);
}
.ap-face-t { font-size: 15px; line-height: 20px; font-weight: 500; }
.ap-face.is-scan .ap-face-ico { animation: ap-scan 550ms var(--ease) infinite alternate; }
.ap-face.is-ok { color: var(--green); }
.ap-face.is-ok .ap-face-ico { animation: bld-pop var(--dur) var(--ease) both; }
@keyframes ap-scan { from { transform: scale(1); opacity: 1; } to { transform: scale(1.08); opacity: 0.55; } }

/* payment declined */
.co-fail { display: flex; flex-direction: column; padding: 8px var(--gutter) 16px; }
.co-fail-ico {
  width: 52px; height: 52px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--red) 10%, var(--white)); color: var(--red);
}
.co-fail-t { margin-top: 18px; font-family: var(--f-sans); font-size: 26px; line-height: 30px; }
.co-fail-s { margin-top: 8px; font-size: 15px; line-height: 21px; color: var(--muted); }
.co-fail-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.co-fail-other {
  height: var(--cta-h); border-radius: 999px; background: var(--beige); text-align: center;
  font-family: var(--f-sans); font-size: 18px; line-height: 22px;
}

/* ---------- Confirmation + tracking ---------- */
.screen[data-screen="confirmation"], .screen[data-screen="tracking"] {
  background: var(--beige); transition: background-color var(--dur-slow) var(--ease);
}
.screen[data-screen="confirmation"]:has(.trk.is-ready), .screen[data-screen="tracking"]:has(.trk.is-ready) { background: var(--red); }
.trk { position: relative; display: flex; flex-direction: column; padding: calc(var(--safe-top) + 34px) var(--gutter) 0; text-align: center; }
.trk-x { position: absolute; top: calc(var(--safe-top) + 14px); right: var(--gutter); }
.trk-logo { display: flex; justify-content: center; }
.trk-logo img { height: 62px; width: auto; }
.trk.is-ready .trk-logo img { width: 76px; height: 76px; padding: 14px; object-fit: contain; border-radius: 999px; background: var(--white); }
.trk-title {
  margin-top: 18px; font-family: var(--f-stripes); font-weight: 900; text-transform: uppercase;
  font-size: 38px; line-height: 42px; letter-spacing: -0.01em; color: var(--ink);
}
.trk.is-ready .trk-title { color: var(--white); }
.trk.is-none .trk-title { margin-top: 60px; font-size: 30px; }

/* receipt with zigzag bottom edge */
.trk-rcpt { position: relative; margin-top: 20px; padding: 24px 20px 34px; }
.trk-rcpt::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: var(--white); border-radius: 20px 20px 0 0;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
}
.trk-rcpt > * { position: relative; z-index: 1; }
.trk-lbl { font-size: 13px; line-height: 16px; color: var(--muted); }
.trk-no { margin-top: 6px; font-family: var(--f-sans); font-size: 68px; line-height: 70px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.trk-hint { margin-top: 8px; font-size: 13px; line-height: 16px; color: var(--muted); }

/* PAID stamp (bucket shape) */
.trk-stamp {
  position: absolute; z-index: 2; top: -22px; right: -8px; width: 92px; height: 86px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding-bottom: 6px;
  background: url("../images/bucket-indicator.svg") center / contain no-repeat; color: var(--white);
  transform: rotate(8deg);
}
.trk-stamp-t { font-family: var(--f-stripes); font-weight: 900; text-transform: uppercase; font-size: 22px; line-height: 22px; }
.trk-stamp-p { font-family: var(--f-sans); font-size: 12px; line-height: 14px; }
.trk-stamp.is-in { animation: trk-stamp 320ms var(--ease) 260ms both; }
@keyframes trk-stamp { from { opacity: 0; transform: rotate(-6deg) scale(1.6); } to { opacity: 1; transform: rotate(8deg) scale(1); } }

/* progress */
.trk-steps { list-style: none; margin: 18px 0 0; padding-left: 0; padding-right: 0; padding-top: 16px; border-top: 1px dashed var(--handle); text-align: left; }
.trk-step { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 42px; }
.trk-step:last-child { min-height: 22px; }
.trk-step:not(:last-child)::before {
  content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line);
}
.trk-step.is-done:not(:last-child)::before { background: var(--green); }
.trk-dot {
  position: relative; z-index: 1; width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); border: 1.5px solid var(--handle); color: var(--white);
}
.trk-step.is-done .trk-dot { background: var(--green); border-color: var(--green); }
.trk-step.is-now .trk-dot { border: 6px solid var(--ink); }
.trk-step.is-now.is-ready .trk-dot { border-color: var(--red); }
.trk-step-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 1px; }
.trk-step-n { font-size: 16px; line-height: 20px; font-weight: 500; }
.trk-step.is-todo .trk-step-n { color: var(--muted); font-weight: 400; }
.trk-step-s { font-size: 13px; line-height: 16px; color: var(--muted); padding-bottom: 10px; }
.trk-step-r { flex-shrink: 0; padding-top: 2px; font-size: 13px; line-height: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trk-step-r b { color: var(--ink); font-weight: 600; }
.trk-step-r b.is-red { color: var(--red); }

/* info card */
.trk-card { margin-top: 14px; border-radius: 20px; background: var(--white); text-align: left; }
.trk-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.trk-row:last-child { border-bottom: 0; }
.trk-row-ico { display: inline-flex; flex-shrink: 0; color: var(--ink); }
.trk-row-ico.is-red { color: var(--red); }
.trk-row-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.trk-row-n { font-family: var(--f-sans); font-size: 17px; line-height: 21px; }
.trk-row-s { font-size: 12px; line-height: 15px; color: var(--muted); }
.trk-row-r { flex-shrink: 0; font-size: 13px; line-height: 16px; color: var(--muted); }
.trk-row-a { flex-shrink: 0; font-size: 13px; line-height: 16px; }
.trk-switch {
  position: relative; width: 50px; height: 30px; flex-shrink: 0; border-radius: 999px; background: var(--handle);
  transition: background-color var(--dur-fast) var(--ease);
}
.trk-switch i {
  position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 999px; background: var(--white);
  box-shadow: 0 1px 3px rgba(16, 16, 16, 0.18); transition: transform var(--dur-fast) var(--ease);
}
.trk-switch.is-on { background: var(--green); }
.trk-switch.is-on i { transform: translateX(20px); }

.trk-cta { margin-top: 20px; }
.btn-white {
  display: flex; align-items: center; justify-content: center; width: 100%; height: var(--cta-h); padding: 0 22px;
  border-radius: var(--r-pill); background: var(--white); color: var(--ink);
  font-family: var(--f-sans); font-size: 18px; line-height: 22px;
  transition: transform var(--dur-fast) var(--ease);
}
.btn-white:active { transform: scale(0.98); }
.trk-home { align-self: center; margin-top: 8px; padding: 14px 20px; font-family: var(--f-sans); font-size: 17px; line-height: 20px; }
.trk.is-ready .trk-home { color: var(--white); }

/* receipt sheet */
.rc { padding: 0 var(--gutter) 16px; }
.rc-line { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rc-q { width: 18px; flex-shrink: 0; font-family: var(--f-sans); font-size: 16px; line-height: 20px; color: var(--muted); }
.rc-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-n { font-family: var(--f-sans); font-size: 16px; line-height: 20px; }
.rc-d { font-size: 12px; line-height: 16px; color: var(--muted); }
.rc-p { font-family: var(--f-sans); font-size: 16px; line-height: 20px; font-variant-numeric: tabular-nums; }
.rc-sum { padding-top: 4px; }

/* deals: tag, was price, coupon */
.ord-tag {
  align-self: flex-start; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-bottom: 4px;
  border-radius: 999px; background: var(--red); color: var(--white);
  font-family: var(--f-sans); font-size: 11px; line-height: 12px; text-transform: uppercase;
}
.ord-was { margin-right: 6px; font-size: 14px; color: var(--muted); }
.ord-coupon {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 4px 0;
  font-size: 14px; line-height: 18px; font-weight: 600; color: var(--ink);
}
.ord-coupon span { text-decoration: underline 1px; text-underline-offset: 3px; }
.ord-coupon-x { margin-left: 6px; font-size: 13px; color: var(--ink); }
.ord-goes-n { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ord-pop-c { justify-content: center; height: auto; min-height: 132px; padding: 12px 6px; }
.ord-pop-n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* take away pickup method row (ahead.js) */
.co-method {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 16px;
  border-radius: 18px; background: var(--beige); text-align: left;
}
.co-method-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-method-n { font-family: var(--f-sans); font-size: 17px; line-height: 20px; }
.co-method-s { font-size: 12px; line-height: 15px; color: var(--muted); }

/* checkout: log in row (guest) / earning line (member) */
.co-acct { padding-top: 16px; padding-bottom: 16px; }
.co-acct-row { display: flex; align-items: center; gap: 12px; }
.co-acct-ico, .co-acct-av {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px;
}
.co-acct-ico { background: var(--red-soft); color: var(--red); }
.co-acct-av { background: var(--ink); color: var(--white); font-family: var(--f-sans); font-size: 17px; line-height: 1; }
.co-acct-t { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.co-acct-n { font-size: 15px; line-height: 19px; font-weight: 600; color: var(--ink); }
.co-acct-s { font-size: 13px; line-height: 17px; color: var(--muted); }
.co-acct-join { display: inline-block; margin: 10px 0 0 52px; font-size: 13px; line-height: 17px; color: var(--ink); }
/* the column ground under the confirmation / tracking screens follows them (the page-change
   fade samples it); Safari's edges + html/body come from core.js App.edges */
html:has(.screen[data-screen="confirmation"]) #app, html:has(.screen[data-screen="tracking"]) #app { background: var(--beige); }
html:has(.screen[data-screen="confirmation"] .trk.is-ready) #app, html:has(.screen[data-screen="tracking"] .trk.is-ready) #app { background: var(--red); }