/* ============================================================
   KOZHI takeout ordering - public page
   Cream paper body, two-column menu + sticky cart. Mirrors the
   guest-site aesthetic (see gift-cards.css).
   ============================================================ */

:root {
  --cream: #f5ecdf;
  --cream-2: #f6f3ec;
  --cream-3: #ebe4d2;
  --ink: #1a1612;
  --ink-2: #2c241d;
  --wine: #7a1f2b;
  --green: #3f6f52;
  --taupe: #b8a584;
  --rule: rgba(26, 22, 18, 0.18);
  --rule-soft: rgba(26, 22, 18, 0.08);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream-2);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
input { font: inherit; color: inherit; background: transparent; }

.ord-wrap { min-height: 100vh; display: flex; flex-direction: column; }

/* Header */
.ord-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--rule-soft);
  position: sticky; top: 0; background: var(--cream-2); z-index: 5;
}
.ord-home { font-family: var(--serif); font-size: 20px; letter-spacing: 0.18em; text-decoration: none; }
.ord-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--wine); }

/* Notice cards */
.ord-note-card, .ord-done {
  max-width: 560px; margin: 60px auto; padding: 40px 32px;
  background: #fff; border: 1px solid var(--cream-3); text-align: center;
}
.ord-back { margin-top: 22px; }

/* Layout */
.ord-grid {
  display: grid; grid-template-columns: 1fr 380px; gap: 40px;
  max-width: 1080px; width: 100%; margin: 0 auto; padding: 32px clamp(20px, 4vw, 56px) 80px;
}

/* Menu */
.ord-section { margin-bottom: 34px; }
.ord-section-title {
  font-family: var(--serif); font-weight: 500; font-size: 26px; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.ord-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--rule-soft); flex-wrap: wrap;
}
.ord-item-main { flex: 1; min-width: 0; }
.ord-item-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.ord-item-name { font-family: var(--serif); font-size: 19px; }
.ord-item-price { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ord-item-desc { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); }
.ord-item-allerg { margin: 4px 0 0; font-size: 11px; font-family: var(--mono); letter-spacing: 0.04em; color: var(--taupe); text-transform: lowercase; }

.ord-add {
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  padding: 8px 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  align-self: center; white-space: nowrap;
}
.ord-add:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
.ord-add:disabled { opacity: 0.4; cursor: not-allowed; }
.ord-add.wide { flex: 1; }

/* Item config (modifiers) */
.ord-config { flex-basis: 100%; margin-top: 10px; padding: 14px; background: var(--cream); border: 1px solid var(--cream-3); }
.ord-mgroup { margin-bottom: 12px; }
.ord-mgroup-name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }
.ord-req { color: var(--wine); }
.ord-mod { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.ord-mod input { accent-color: var(--wine); }
.ord-mod-name { flex: 1; }
.ord-mod-delta { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ord-notes { width: 100%; border: 1px solid var(--rule); padding: 9px 10px; margin-top: 4px; }
.ord-config-foot { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.ord-cancel { display: block; margin: 10px auto 0; background: none; border: none; text-decoration: underline; font-size: 12px; color: var(--ink-2); }

/* Qty stepper */
.ord-qty { display: flex; align-items: center; border: 1px solid var(--rule); }
.ord-qty button { width: 34px; height: 34px; background: transparent; border: none; font-size: 18px; line-height: 1; }
.ord-qty span { min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.ord-qty.sm button { width: 28px; height: 28px; font-size: 15px; }

/* Cart */
.ord-cart {
  position: sticky; top: 92px; align-self: start;
  background: #fff; border: 1px solid var(--cream-3); padding: 22px;
}
.ord-cart-title { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 14px; }
.ord-cart-empty { color: var(--ink-2); font-size: 14px; }
.ord-line { padding: 10px 0; border-bottom: 1px solid var(--rule-soft); }
.ord-line-top { display: flex; justify-content: space-between; gap: 10px; }
.ord-line-name { font-family: var(--serif); font-size: 16px; }
.ord-line-price { font-variant-numeric: tabular-nums; }
.ord-line-mods, .ord-line-notes { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.ord-line-notes { font-style: italic; }
.ord-line-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.ord-remove { background: none; border: none; text-decoration: underline; font-size: 12px; color: var(--wine); }

/* Tip selector */
.ord-tip { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ord-tip-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px; }
.ord-tip-opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ord-tip-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border: 1px solid var(--rule); background: transparent; padding: 8px 4px;
  font-size: 13px; line-height: 1.2;
}
.ord-tip-btn .ord-tip-amt { font-size: 10px; color: var(--taupe); font-variant-numeric: tabular-nums; }
.ord-tip-btn.on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.ord-tip-btn.on .ord-tip-amt { color: rgba(245,236,223,0.7); }

.ord-totals { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--rule); }
.ord-trow { display: flex; justify-content: space-between; padding: 3px 0; font-variant-numeric: tabular-nums; }
.ord-trow.big { font-size: 18px; font-weight: 600; margin-top: 6px; }

/* Checkout */
.ord-checkout { margin-top: 16px; }
.ord-ch-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin: 18px 0 8px; }
.ord-fields.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ord-inp, .ord-fields input { width: 100%; border: 1px solid var(--rule); padding: 11px 12px; margin-bottom: 8px; }
.ord-fields input { margin-bottom: 0; }
.ord-hint { font-size: 12px; color: var(--ink-2); margin: 8px 0 0; }
.ord-issue { font-size: 13px; color: var(--wine); margin: 8px 0 0; }
.ord-card { border: 1px solid var(--rule); padding: 13px 12px; background: #fff; margin-bottom: 8px; }

.ord-pay {
  width: 100%; margin-top: 14px; padding: 15px; border: 1px solid var(--wine);
  background: var(--wine); color: var(--cream);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.ord-pay:hover:not(:disabled) { background: #5f1621; }
.ord-pay:disabled { opacity: 0.4; cursor: not-allowed; }
.ord-fine { font-size: 11px; color: var(--taupe); margin: 10px 0 0; text-align: center; }

/* Done screen */
.ord-done-badge { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wine); }
.ord-done-lead { font-family: var(--serif); font-size: 22px; margin: 16px 0 24px; }
.ord-done-code-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.ord-done-code { font-family: var(--mono); font-size: 30px; letter-spacing: 0.14em; margin: 6px 0 22px; }
.ord-done-when { font-size: 15px; }
.ord-done-paid { font-size: 13px; color: var(--ink-2); }

@media (max-width: 820px) {
  .ord-grid { grid-template-columns: 1fr; gap: 24px; }
  .ord-cart { position: static; }
}