/* =========================================================
   Order / menu page styles
   ========================================================= */

.order-hero {
  padding: calc(var(--header-h) + 3.5rem) 0 3rem;
  background: var(--cream-deep);
  text-align: center;
}
.order-hero .lead { max-width: 46ch; margin-inline: auto; }
.order-note {
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top: 1.4rem; padding:.5rem 1.1rem;
  background: var(--cream-light); border:1px solid var(--line); border-radius: 999px;
  font-size:.8rem; letter-spacing:.04em; color: var(--ink-soft);
}

.order-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(2.5rem,5vw,4rem) 0 5rem;
}
@media (max-width: 940px){ .order-layout{ grid-template-columns:1fr; } }

/* ---------- menu ---------- */
.menu-cat { margin-bottom: 3rem; }
.menu-cat__head {
  display:flex; align-items:baseline; gap:1rem;
  padding-bottom:.8rem; margin-bottom:1.2rem;
  border-bottom:1px solid var(--line);
}
.menu-cat__head h2 { font-family: var(--f-display); font-weight:600; font-size:1.7rem; letter-spacing:.06em; }
.menu-cat__head .script { font-size:1.5rem; line-height:1; }
.menu-cat__note { margin:-.4rem 0 1.2rem; font-size:.8rem; letter-spacing:.04em; color: var(--sage-deep); font-style:italic; }

.menu-item {
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem 1.4rem;
  align-items:center;
  padding: 1rem 0;
  border-bottom:1px dashed var(--line);
}
.menu-item:last-child { border-bottom:0; }
.menu-item__info h3 { font-family: var(--f-serif); font-size:1.3rem; font-weight:600; color: var(--ink); }
.menu-item__info p { margin:.15rem 0 0; font-size:.92rem; color: var(--ink-soft); line-height:1.5; }
.menu-item__price { font-family: var(--f-serif); font-size:1.2rem; color: var(--sage-deep); white-space:nowrap; font-weight:600; }
.menu-item__unit { font-size:.72rem; color: var(--ink-soft); display:block; text-align:right; letter-spacing:.04em; }

/* party-size selector */
.party-bar {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.5rem;
  background: linear-gradient(120deg, var(--sage-light), var(--cream-deep));
  border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.4rem; margin-bottom: 2.2rem;
}
.party-bar__text b { font-family: var(--f-serif); font-size:1.2rem; font-weight:600; color: var(--olive-ink); display:block; }
.party-bar__text span { font-size:.86rem; color: var(--ink-soft); }
.party-bar__control { display:flex; align-items:center; gap:.55rem; }
.party-bar__control input {
  width: 92px; padding:.55rem .7rem; font-size:1.15rem; text-align:center;
  border:1px solid var(--sage); border-radius: var(--radius); background: var(--cream-light);
  font-family: var(--f-sans); color: var(--ink);
}
.party-bar__control input:focus { outline:2px solid var(--sage); outline-offset:1px; }
.party-bar__unit { font-size:.92rem; color: var(--ink-soft); }

/* qty column: suggested badge + dropdown */
.menu-item__qty { display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; }
.menu-item__suggested {
  font-size:.72rem; letter-spacing:.02em; color: var(--sage-deep); font-weight:600; white-space:nowrap;
  background: rgba(138,142,117,.16); padding:.12rem .55rem; border-radius:999px;
}
.qty-select {
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  border:1px solid var(--line); border-radius:999px; background-color: var(--cream-light);
  padding:.5rem 2rem .5rem .95rem; min-width:66px;
  font-family: var(--f-sans); font-size:.98rem; color: var(--ink); cursor:pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2333352a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .7rem center; background-size:11px;
}
.qty-select:focus { outline:2px solid var(--sage); outline-offset:1px; }

/* qty stepper */
.stepper { display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; background: var(--cream-light); overflow:hidden; }
.stepper button {
  width:38px; height:38px; border:0; background:transparent; font-size:1.2rem; line-height:1;
  color: var(--olive-ink); display:grid; place-items:center; transition: background .2s var(--ease);
}
.stepper button:hover { background: var(--cream-deep); }
.stepper button:disabled { opacity:.3; cursor:not-allowed; }
.stepper input {
  width:42px; text-align:center; border:0; background:transparent;
  font-family: var(--f-sans); font-size:1rem; color: var(--ink);
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.menu-item.is-selected { background: linear-gradient(90deg, rgba(207,159,59,.07), transparent 60%); }

@media (max-width: 560px){
  .menu-item { grid-template-columns: 1fr auto; grid-template-areas: "info price" "info qty"; }
  .menu-item__info { grid-area: info; }
  .menu-item__price { grid-area: price; }
  .menu-item__qty { grid-area: qty; justify-self:end; }
}

/* ---------- summary / form panel ---------- */
.order-panel {
  position: sticky; top: calc(var(--header-h) + 1.2rem);
  background: var(--cream-light);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.4rem,3vw,2rem);
}
.order-panel h2 { font-family: var(--f-display); font-size:1.05rem; letter-spacing:.14em; margin-bottom:1.2rem; }

.cart-lines { margin-bottom:1rem; }
.cart-empty { color: var(--ink-soft); font-size:.92rem; font-style:italic; padding:.5rem 0 1rem; }
.cart-line { display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; padding:.4rem 0; border-bottom:1px dashed var(--line); }
.cart-line span:first-child { color: var(--ink); }
.cart-line .q { color: var(--ink-soft); }
.cart-line b { font-family: var(--f-serif); color: var(--sage-deep); font-weight:600; white-space:nowrap; }
.cart-total { display:flex; justify-content:space-between; align-items:baseline; margin:1rem 0 1.4rem; padding-top:1rem; border-top:1.5px solid var(--olive-ink); }
.cart-total span { font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-soft); }
.cart-total b { font-family: var(--f-serif); font-size:1.8rem; color: var(--olive-ink); font-weight:600; }

/* form fields */
.field { margin-bottom:1.1rem; }
.field label { display:block; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--ink-soft); margin-bottom:.4rem; }
.field .req { color: var(--mustard-deep); }
.field input, .field textarea, .field select {
  width:100%; padding:.75rem .85rem;
  font-family: var(--f-sans); font-size:.95rem; color: var(--ink);
  background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline:0; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(138,139,108,.18);
}
.field textarea { resize:vertical; min-height:70px; }
.field .hint { font-size:.76rem; color: var(--ink-soft); margin-top:.35rem; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:400px){ .grid-2{ grid-template-columns:1fr; } }

.order-panel .btn { width:100%; justify-content:center; margin-top:.4rem; }
.form-msg { margin-top:1rem; font-size:.9rem; padding:.8rem 1rem; border-radius: var(--radius); display:none; }
.form-msg.is-show { display:block; }
.form-msg.ok { background: rgba(138,139,108,.16); color: var(--sage-deep); border:1px solid rgba(138,139,108,.4); }
.form-msg.err { background: rgba(182,137,43,.14); color: var(--mustard-deep); border:1px solid rgba(182,137,43,.4); }
.form-fallback { text-align:center; margin-top:.9rem; font-size:.82rem; }
.form-fallback a { color: var(--sage-deep); text-decoration:underline; }

.spinner { width:16px; height:16px; border:2px solid rgba(246,241,230,.4); border-top-color: var(--cream-light); border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg);} }

/* success takeover */
.order-success { display:none; text-align:center; padding:1rem 0; }
.order-success.is-show { display:block; }
.order-success .check { width:64px;height:64px;margin:0 auto 1.2rem; border-radius:50%; background: var(--sage); display:grid; place-items:center; color: var(--cream-light); }
.order-success h2 { font-family: var(--f-serif); font-size:1.8rem; margin-bottom:.6rem; }
.order-success p { color: var(--ink-soft); }