/* ===========================================================
   Backyard Barista — Cart layer 08 (cart WO, 2026-09-18)
   Cart & checkout for mobile / curbside. Same rules as
   Direction 05: hairlines, one accent, zero radius, zero
   shadow. Thumb-first: every tap target ≥ 40px on phones.
   Rollback = delete this stylesheet's link line in layout.php.
   =========================================================== */

/* ---------- menu: add-to-order rows ---------- */

.mi-list { border-top: 1px solid var(--rule); }
.mi { border-bottom: 1px solid var(--rule-soft); }
.mi > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 0; min-height: 44px;
}
.mi > summary::-webkit-details-marker { display: none; }
.mi-name { font-weight: 700; }
.mi-price { color: var(--mid); font-size: .85rem; margin-left: auto; white-space: nowrap; }
.mi-add {
  border: 1px solid var(--ink); padding: 6px 12px; font-size: .8rem;
  font-weight: 600; white-space: nowrap;
}
.mi[open] .mi-add { background: var(--ink); color: #fff; }
.mi-form { padding: 0 0 16px; }

.mi-group { margin: 8px 0; }
.mi-glabel {
  display: block; font-size: .65rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
}

/* option chips — tapped, not typed */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px;
  border: 1px solid var(--rule-soft); background: var(--paper);
  padding: 6px 14px; font-size: .85rem; cursor: pointer; user-select: none;
}
.chip:has(input:checked) span { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 1px; }

/* quantity stepper */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--ink); }
.stepper button {
  width: 44px; min-height: 44px; border: 0; background: var(--paper);
  font: inherit; font-size: 1.2rem; cursor: pointer; color: var(--ink);
}
.stepper button:active { background: var(--fill); }
.stepper input, .stepper .qty-n {
  width: 48px; border: 0; border-left: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft);
  text-align: center; font: inherit; -moz-appearance: textfield; appearance: textfield;
  display: inline-flex; align-items: center; justify-content: center;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mi-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.mi-actions .btn { min-height: 46px; }

/* ---------- sticky cart bar (the phone-in-the-driveway bar) ---------- */

.cartbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ink); font-weight: 600;
}
.cartbar-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  background: var(--accent); color: #fff; font-size: .85rem;
}
.cartbar-label { color: #fff; }
.cartbar-go { margin-left: auto; color: #fff; white-space: nowrap; }
body:has(.cartbar) main { padding-bottom: 140px; }

/* ---------- the review screen ---------- */

.cartpage h1 .muted a { font-weight: 400; }
.cart-lines td { vertical-align: top; }
.cart-qty { white-space: nowrap; text-align: right; }
.cart-qty .stepper { vertical-align: middle; }
.cart-qty .stepper button { min-height: 40px; width: 40px; }
.cart-rm { margin-left: 10px; font-size: .8rem; }
.cart-send { margin-top: 18px; max-width: 560px; }
.cart-send .btn-wide { min-height: 50px; font-size: 1rem; }
.cart-send label { display: block; margin: 12px 0; }
.cart-send input[type="text"] { width: 100%; min-height: 44px; }

/* ---------- order page: accept presets & backout ---------- */

.accept-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.accept-label { flex-basis: 100%; }
.accept-row .btn { min-height: 46px; }
.backout { margin-top: 14px; }
.backout summary { cursor: pointer; }
.backout-form { margin-top: 8px; max-width: 480px; }
.backout-form input[type="text"] { width: 100%; min-height: 42px; margin: 6px 0; }

/* expired: quiet, no drama, no strikethrough shame */
.pill-expired { color: var(--muted); border-color: var(--rule-soft); }
tr.st-expired td { color: var(--muted); }

/* ---------- phones ---------- */

@media (max-width: 640px) {
  .mi > summary { flex-wrap: wrap; }
  .mi-name { flex: 1 1 auto; }
  .mi-actions { flex-wrap: wrap; }
  .mi-actions .btn { flex: 1 1 auto; }
  .accept-row form { flex: 1 1 40%; }
  .accept-row .btn { width: 100%; }
  .cart-qty { text-align: left; }
}