/* ============================================================
   order.css — ordering layer (menu browse, cart, checkout)
   Sits on top of the approved design system (tokens/base/site).
   ============================================================ */

/* ---- cart button + badge (in nav bars) ---- */
.cartbtn { position: relative; display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-sm);
  background: none; border: none; cursor: pointer; color: inherit; padding: 0.4em 0.5em; }
.cartbtn__ico { width: 22px; height: 22px; }
.cartbtn__count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; background: var(--coral); color: var(--paper);
  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1; }
.cartbtn__count[data-empty] { display: none; }

/* ---- live menu ---- */
.livemenu { padding: var(--space-section) var(--gutter); max-width: var(--maxw); margin: 0 auto; scroll-margin-top: 80px; }
.livemenu__head { text-align: center; margin-bottom: var(--space-lg); }
.livemenu__head h2 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-md); line-height: 0.9; }
.livemenu__nav { position: sticky; top: 64px; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  padding: 0.7rem; margin-bottom: var(--space-lg); background: oklch(96% 0.013 92 / 0.86); backdrop-filter: blur(10px);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.livemenu__nav a { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: var(--text-xs);
  color: var(--ink-soft); padding: 0.4em 0.8em; border-radius: var(--radius-pill); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast); }
.livemenu__nav a:hover { background: var(--k-accent, var(--coral)); color: var(--paper); }
/* mobile: don't pin the category bar to the top, and drop the rounded floating-card look */
@media (max-width: 768px) {
  .livemenu__nav { position: static; border-radius: 0; box-shadow: none;
    backdrop-filter: none; background: none; padding: 0 0 0.4rem;
    justify-content: flex-start; }
}
.livemenu__cat { margin-bottom: var(--space-lg); scroll-margin-top: 130px; }
.livemenu__catname { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-xl);
  color: var(--ink); margin-bottom: var(--space-md); padding-bottom: 0.4rem; border-bottom: 2px solid var(--k-accent, var(--coral)); }
.livemenu__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md); }
.livemenu__err { text-align: center; color: var(--ink-soft); }

.mi { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid oklch(21% 0.02 205 / 0.08); transition: transform var(--dur) var(--ease-out-expo), box-shadow var(--dur); }
.mi:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mi__img { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--paper-deep); }
.mi__img--ph { display: grid; place-items: center; font-family: var(--font-display); font-size: 3rem; color: var(--k-accent, var(--teal)); opacity: 0.5; }
/* packaged products (cans, bottles, tubs, sauces): show the FULL product, never clipped */
.mi__img--product { object-fit: contain; background:
  radial-gradient(120% 100% at 50% 0%, oklch(97% 0.012 92), oklch(93% 0.02 90)); padding: 0.6rem; }
.mi__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.mi__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); line-height: 1.05; }
.mi__desc { font-size: var(--text-sm); color: var(--ink-soft); line-height: 1.4; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mi__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 0.4rem; }
.mi__price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.mi__add { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--k-accent, var(--coral)); color: var(--k-btnfg, var(--paper)); border: none; border-radius: var(--radius-pill);
  padding: 0.5em 1em; cursor: pointer; display: inline-flex; gap: 0.4em; transition: transform var(--dur-fast), filter var(--dur-fast); }
.mi__add:hover { transform: translateY(-2px); filter: brightness(1.05); }
.mi__out { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-sm); color: var(--ink-soft); }
.mi.is-soldout { opacity: 0.6; }
/* stacked rise-in (only when store.js enables it; degrades to visible) */
.livemenu-anim .mi { opacity: 0; transform: translateY(26px) scale(0.985); will-change: transform, opacity;
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo); }
.livemenu-anim .mi.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .livemenu-anim .mi { opacity: 1; transform: none; } }

/* ---- cart drawer ---- */
.drawer { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.drawer::before { content: ""; position: absolute; inset: 0; background: oklch(15% 0.02 205 / 0); transition: background var(--dur); }
.drawer[data-open] { visibility: visible; }
.drawer[data-open]::before { background: oklch(12% 0.02 205 / 0.55); }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(440px, 100%); background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out-expo); box-shadow: var(--shadow-lg); }
.drawer[data-open] .drawer__panel { transform: translateX(0); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid oklch(21% 0.02 205 / 0.1); }
.drawer__top h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-xl); }
.drawer__close { background: none; border: none; font-size: 1.6rem; cursor: pointer; line-height: 1; color: var(--ink); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--space-md) var(--space-lg); }
.drawer__empty { color: var(--ink-soft); text-align: center; margin-top: 2rem; }
.drawer__lines { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-md); }
.cl { display: grid; grid-template-columns: 64px 1fr auto; gap: 0.8rem; align-items: start; }
.cl__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); }
.cl__img--ph { display: grid; place-items: center; background: var(--paper-deep); font-family: var(--font-display); font-size: 1.6rem; color: var(--teal); }
.cl__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); line-height: 1.1; }
.cl__kitchen { font-size: var(--text-xs); color: var(--ink-soft); margin-bottom: 0.3rem; }
.cl__qty { display: inline-flex; align-items: center; gap: 0.6rem; }
.cl__qty button { width: 26px; height: 26px; border-radius: 50%; border: 1px solid oklch(21% 0.02 205 / 0.2); background: var(--paper); cursor: pointer; font-size: 1rem; line-height: 1; }
.cl__right { text-align: right; display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-end; }
.cl__price { font-family: var(--font-display); font-weight: 700; }
.cl__rm { background: none; border: none; color: var(--ink-soft); font-size: var(--text-xs); cursor: pointer; text-decoration: underline; }
.drawer__foot { padding: var(--space-md) var(--space-lg) calc(var(--space-md) + env(safe-area-inset-bottom)); border-top: 1px solid oklch(21% 0.02 205 / 0.1); }
.drawer__sub { display: flex; justify-content: space-between; font-size: var(--text-lg); margin-bottom: var(--space-md); }
.drawer__checkout { width: 100%; justify-content: center; }
.drawer__viewcart { display: block; text-align: center; margin-top: 0.8rem; font-size: var(--text-sm); color: var(--ink-soft); text-decoration: underline; }

/* ---- toast ---- */
.carttoast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%); z-index: 400;
  background: var(--ink); color: var(--paper); padding: 0.8em 1.4em; border-radius: var(--radius-pill);
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-sm);
  box-shadow: var(--shadow-lg); transition: transform var(--dur) var(--ease-out-expo); }
.carttoast[data-show] { transform: translate(-50%, 0); }
@media (max-width: 720px) { .carttoast { bottom: 86px; } }

/* ---- cart / checkout / confirmation pages ---- */
.shell { max-width: 1000px; margin: 0 auto; padding: clamp(6rem, 12vh, 8rem) var(--gutter) var(--space-section); }
.shell__head { margin-bottom: var(--space-lg); }
.shell__head h1 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--display-md); line-height: 0.9; }
.shell__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg); align-items: start; }
@media (max-width: 820px) { .shell__grid { grid-template-columns: 1fr; } }

.ordersummary { background: var(--paper-deep); border-radius: var(--radius); padding: var(--space-lg); position: sticky; top: 90px; }
.ordersummary h2 { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-xl); margin-bottom: var(--space-md); }
.ordersummary__lines { list-style: none; padding: 0; margin: 0 0 var(--space-md); display: flex; flex-direction: column; gap: 0.7rem; }
.ordersummary__line { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--text-sm); }
.ordersummary__tot { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: var(--text-xl); border-top: 2px solid oklch(21% 0.02 205 / 0.15); padding-top: var(--space-md); }

.form { display: flex; flex-direction: column; gap: var(--space-md); }
.form__row { display: grid; gap: 0.4rem; }
.form__row label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--text-sm); }
.form__row input, .form__row textarea, .form__row select {
  font-family: var(--font-body); font-size: var(--text-base); padding: 0.7em 0.9em; border-radius: var(--radius-sm);
  border: 1.5px solid oklch(21% 0.02 205 / 0.18); background: var(--paper); color: var(--ink); }
.form__row input:focus, .form__row textarea:focus, .form__row select:focus { outline: 3px solid var(--coral); outline-offset: 1px; }
.form__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 520px) { .form__two { grid-template-columns: 1fr; } }
.seg { display: inline-flex; border-radius: var(--radius-pill); border: 1.5px solid oklch(21% 0.02 205 / 0.18); overflow: hidden; }
.seg label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; padding: 0.6em 1.2em; cursor: pointer; }
.seg input { position: absolute; opacity: 0; }
.seg label:has(input:checked) { background: var(--coral); color: var(--paper); }
.testbar { background: var(--sun); color: var(--ink); border-radius: var(--radius-sm); padding: 0.8em 1em; font-size: var(--text-sm); font-weight: 600; }
.paybox { border: 1.5px dashed oklch(21% 0.02 205 / 0.3); border-radius: var(--radius); padding: var(--space-md); color: var(--ink-soft); font-size: var(--text-sm); }

.confirm { text-align: center; max-width: 640px; margin: 0 auto; }
.confirm__id { font-family: var(--font-display); font-size: var(--text-xl); color: var(--teal); }
.empty-cta { text-align: center; padding: var(--space-section) var(--gutter); }