/* ============================================================
   Cart + order sheet. Thumb-first: the sheet is full height on a
   phone, the primary control sits at the bottom, and every tap
   target clears 44px.
   ============================================================ */

/* ---------- add buttons on menu rows and packs ---------- */
.add {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.2rem; padding: .3rem .9rem;
  font-family: var(--display); font-weight: 700; font-size: var(--step--1);
  letter-spacing: .02em;
  color: var(--accent-ink); background: transparent;
  border: 1px solid currentColor; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  transition: background .14s ease, color .14s ease;
}
.add:hover { background: var(--accent); color: #23150A; border-color: transparent; }
.add[data-just-added] { background: var(--open); color: #fff; border-color: transparent; }
.act .add { color: var(--accent); }

.menu-item { grid-template-columns: 1fr auto auto; align-items: start; }
.menu-item__price { align-self: center; }
.menu-item .add { align-self: center; }
.pack .add { align-self: flex-start; margin-top: auto; }

/* ---------- badge on the order bar ---------- */
.orderbar .btn { position: relative; }
#cart-badge {
  position: absolute; top: -.45rem; right: -.45rem;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .28rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--ink); color: var(--ground);
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
#cart-bar-total { font-variant-numeric: tabular-nums; }

/* ---------- the sheet ---------- */
/* [hidden] is only `display:none` from the UA sheet, so ANY author display
   rule beats it. Without this the order sheet is open on first paint. */
.sheet-backdrop[hidden] { display: none; }
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: grid; align-items: end; justify-items: center;
  background: rgb(11 9 8 / 62%);
  backdrop-filter: blur(3px);
}
@media (min-width: 46rem) { .sheet-backdrop { align-items: center; } }

.cart {
  width: min(100%, 34rem);
  max-height: 92svh;
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
@media (min-width: 46rem) { .cart { border-radius: var(--radius-lg); } }
@media (prefers-reduced-motion: no-preference) {
  [data-open] .cart { animation: sheetUp .32s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes sheetUp { from { transform: translate3d(0,14px,0); opacity: 0 } to { transform: none; opacity: 1 } }
}

.cart__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4); border-bottom: 1px solid var(--rule);
}
.cart__head h2 { font-size: var(--step-1); flex: 1 1 auto; }
.cart__x {
  width: 2.6rem; height: 2.6rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: transparent; color: inherit; cursor: pointer; font-size: 1.1rem;
}
/* Re-assert [hidden] over every author display rule in this file. Without it
   the order form stays on screen underneath its own confirmation. */
.cart__body[hidden], .cart__totals[hidden], .cart__done[hidden],
.cart__error[hidden], .cart__demo[hidden], #cart-badge[hidden] { display: none !important; }

.cart__body { overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }
.cart__empty { color: var(--ink-2); }

.cart__row {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: var(--s-2) var(--s-3); align-items: center;
  padding-block: var(--s-3); border-bottom: 1px solid var(--rule);
}
.cart__name { font-weight: 600; }
.cart__price { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 4.5rem; text-align: right; }

.qty { display: inline-flex; align-items: center; gap: .15rem; }
.qty__b {
  width: 2.4rem; height: 2.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface); color: inherit; font-size: 1.05rem; cursor: pointer;
}
.qty__n { min-width: 2.4rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }

.cart__totals { display: flex; flex-direction: column; gap: .3rem; }
.cart__totals .row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.cart__totals .row span:last-child { font-variant-numeric: tabular-nums; }
.cart__totals small { color: var(--ink-2); font-weight: 400; }

.field { display: flex; flex-direction: column; gap: .3rem; }
.field > span { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; color: inherit; background: var(--surface-2);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: .7rem .8rem; min-height: 2.9rem; width: 100%;
}
.field textarea { min-height: 4.5rem; resize: vertical; }

.cart__foot {
  padding: var(--s-4); border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--surface);
}
.cart__foot .btn { width: 100%; }
.cart__note { font-size: var(--step--1); color: var(--ink-2); }
.cart__error {
  padding: .6rem .8rem; border-radius: var(--radius);
  background: var(--shut-wash); color: var(--shut); font-weight: 600; font-size: var(--step--1);
}
.cart__demo {
  padding: .6rem .8rem; border-radius: var(--radius);
  background: var(--accent-wash); color: var(--accent-ink);
  font-weight: 600; font-size: var(--step--1);
}
.cart__done { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) var(--s-4); }
.cart__done h3 { font-size: var(--step-2); }
.cart__done p { color: var(--ink-2); }

/* ---------- catering ---------- */
.catering {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  max-width: 44rem;
}
.catering .field--wide { grid-column: 1 / -1; }
.act .field input, .act .field select, .act .field textarea {
  background: rgb(255 255 255 / 6%); border-color: rgb(255 255 255 / 16%); color: var(--act-ink);
}
.act .field > span { color: var(--act-dim); }