:root {
  color-scheme: light;
  --ink: #263531;
  --muted: #727c77;
  --paper: #f6f7f3;
  --white: #fff;
  --line: #e1e6df;
  --green: #377a55;
  --green-dark: #285c40;
  --orange: #dc8b45;
  --pale-green: #e7f0e7;
  --red: #bd4d42;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar { align-items: center; background: var(--white); border-bottom: 1px solid var(--line); display: flex; gap: 2rem; justify-content: space-between; min-height: 68px; padding: 0 max(24px, calc((100vw - 1160px) / 2)); }
.brand { align-items: center; color: var(--ink); display: inline-flex; font-size: 1.08rem; font-weight: 750; gap: .55rem; text-decoration: none; }
.brand-icon { align-items: center; background: var(--green); border-radius: 6px; color: #fff; display: inline-flex; font-size: .68rem; height: 30px; justify-content: center; width: 30px; }
.main-nav { align-self: stretch; display: flex; gap: 1.45rem; }
.nav-button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #59645f; font-size: .92rem; padding: .2rem 0 0; }
.nav-button.active { border-bottom-color: var(--green); color: var(--green-dark); font-weight: 700; }
.order-count { background: #edf1ed; border-radius: 10px; font-size: .72rem; margin-left: .15rem; padding: .12rem .4rem; }
.cart-button { background: #fff; border: 1px solid #cbd6cc; border-radius: 5px; color: var(--ink); font-size: .88rem; padding: .48rem .72rem; }
.cart-count { color: var(--green); font-weight: 700; margin-left: .2rem; }

.page-wrap { margin: 0 auto; max-width: 1160px; padding: 0 24px; }
.intro { align-items: center; background: #e9efe7; border-radius: 8px; display: flex; justify-content: space-between; margin: 26px 0 34px; min-height: 190px; overflow: hidden; padding: 26px 36px; }
.intro h1 { font-size: clamp(1.7rem, 3.1vw, 2.45rem); font-weight: 700; letter-spacing: 0; line-height: 1.12; margin: .4rem 0 .55rem; }
.intro-copy { color: #66726b; margin: 0; }
.intro img { border-radius: 7px; height: 138px; object-fit: cover; width: 235px; }
.small-label { color: var(--green); font-size: .73rem; font-weight: 700; letter-spacing: .04em; margin: 0 0 .32rem; text-transform: uppercase; }
h2, h3, p { margin-top: 0; }
h2 { font-size: 1.35rem; letter-spacing: 0; margin-bottom: 0; }
h3 { font-size: 1.28rem; margin: .15rem 0 .3rem; }

.browse-layout { align-items: start; display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) 310px; }
.section-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 16px; }
.restaurant-tools { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 160px; margin-bottom: 14px; }
.search-field { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 5px; color: #7f8983; display: flex; gap: 8px; padding: 0 10px; }
.search-field span { font-size: 1.35rem; line-height: 1; }
.search-field input { background: transparent; border: 0; min-width: 0; outline: 0; padding: 10px 0; width: 100%; }
.restaurant-tools select, .checkout-form input, .checkout-form textarea { background: #fff; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); padding: 9px 10px; width: 100%; }
.restaurant-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.restaurant-card { background: #fff; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.restaurant-photo { background: #dde8df; display: block; height: 132px; object-fit: cover; width: 100%; }
.restaurant-card-body { padding: 12px 13px 13px; }
.restaurant-card-top { align-items: start; display: flex; justify-content: space-between; gap: 8px; }
.restaurant-card h3 { font-size: 1rem; margin: 0; }
.rating { color: #95601f; font-size: .8rem; white-space: nowrap; }
.cuisine { color: var(--muted); font-size: .82rem; margin: .35rem 0 .65rem; }
.restaurant-meta { align-items: center; color: #68736d; display: flex; font-size: .76rem; justify-content: space-between; }
.restaurant-meta span + span::before { color: #bcc5bd; content: "·"; margin: 0 6px; }
.view-menu { background: transparent; border: 0; color: var(--green); font-size: .82rem; font-weight: 700; margin-top: .8rem; padding: 0; }
.view-menu:hover { color: var(--green-dark); }

.menu-section { border-top: 1px solid var(--line); margin-top: 22px; padding-top: 20px; }
.menu-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.menu-heading > div:first-child > p:last-child { color: var(--muted); font-size: .86rem; margin-bottom: 0; }
.delivery-note { background: var(--pale-green); border-radius: 5px; color: var(--green-dark); font-size: .8rem; padding: .5rem .65rem; white-space: nowrap; }
.menu-list { display: grid; gap: 9px; }
.menu-item { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 6px; display: flex; gap: 12px; justify-content: space-between; padding: 12px; }
.menu-item h4 { font-size: .94rem; margin: 0 0 .28rem; }
.menu-item p { color: var(--muted); font-size: .8rem; line-height: 1.4; margin: 0 0 .35rem; }
.menu-category { color: var(--green); font-size: .71rem; font-weight: 700; }
.menu-price { color: var(--ink); font-size: .9rem; font-weight: 700; margin-right: 10px; white-space: nowrap; }
.add-button { background: #f0f5ef; border: 1px solid #c9dacb; border-radius: 4px; color: var(--green-dark); font-size: .8rem; font-weight: 700; padding: .42rem .65rem; white-space: nowrap; }
.add-button:hover { background: #e1eddf; }

.cart-panel { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 17px; position: sticky; top: 14px; }
.cart-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding-bottom: 13px; }
.cart-heading h2 { font-size: 1.2rem; }.cart-bag { font-size: 1.5rem; }
.cart-items { max-height: 255px; overflow-y: auto; padding: 4px 0; }
.muted-note { color: var(--muted); font-size: .84rem; line-height: 1.5; margin: 12px 0; }
.cart-line { align-items: center; border-bottom: 1px solid #eef0ec; display: grid; gap: 6px; grid-template-columns: 1fr auto; padding: 10px 0; }
.cart-line-name { font-size: .84rem; font-weight: 700; }.cart-line-price { color: var(--muted); font-size: .78rem; margin-top: 3px; }
.quantity-controls { align-items: center; display: flex; gap: 8px; }.quantity-controls button { background: #f4f6f2; border: 1px solid var(--line); border-radius: 4px; height: 25px; width: 25px; }.quantity-controls span { font-size: .8rem; min-width: 12px; text-align: center; }
.cart-total { align-items: center; border-top: 1px solid var(--line); display: flex; font-size: .9rem; justify-content: space-between; padding: 12px 0; }.cart-total strong { font-size: 1.05rem; }
.checkout-form { border-top: 1px solid var(--line); display: grid; gap: 10px; padding-top: 13px; }
.checkout-form label { color: #57645d; display: grid; font-size: .77rem; font-weight: 700; gap: 5px; }.checkout-form input, .checkout-form textarea { font-size: .82rem; font-weight: 400; resize: vertical; }
.primary-button { align-items: center; background: var(--green); border: 0; border-radius: 5px; color: #fff; display: flex; font-size: .88rem; font-weight: 700; justify-content: space-between; margin-top: 2px; padding: 11px 13px; }.primary-button:hover:not(:disabled) { background: var(--green-dark); }.primary-button:disabled { cursor: not-allowed; opacity: .55; }

.orders-view { min-height: 360px; }.orders-list { display: grid; gap: 10px; }.order-card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; }.order-card-heading { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; }.order-number { font-size: .93rem; font-weight: 700; }.order-restaurant { color: var(--muted); font-size: .82rem; margin-top: .25rem; }.order-status { background: #edf2e9; border-radius: 20px; color: var(--green-dark); font-size: .75rem; padding: .28rem .6rem; }.order-status.cancelled { background: #f8e9e7; color: var(--red); }.order-summary { align-items: center; border-top: 1px solid #edf0eb; display: flex; flex-wrap: wrap; gap: 9px 16px; justify-content: space-between; margin-top: 12px; padding-top: 11px; }.order-summary small { color: var(--muted); }.order-actions { display: flex; gap: 8px; }.text-button { background: none; border: 0; color: var(--green); font-size: .8rem; font-weight: 700; padding: 4px; }.text-button.cancel { color: var(--red); }.order-details { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 9px; }.order-detail-line { color: #58645e; display: flex; font-size: .82rem; justify-content: space-between; padding: 3px 0; }
.empty-box { background: #fff; border: 1px dashed #ccd6cd; border-radius: 6px; color: var(--muted); padding: 30px 18px; text-align: center; }
.notice { background: #e6f1e6; border: 1px solid #c9dec9; border-radius: 5px; color: #2b653e; margin: -16px 0 20px; padding: 10px 13px; }.notice.error { background: #fae9e6; border-color: #eac7c1; color: #963e35; }
.back-button { background: transparent; border: 0; color: var(--green); font-size: .83rem; font-weight: 700; padding: 4px 0; }
.page-footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: .76rem; justify-content: space-between; margin-top: 38px; padding: 16px 0 22px; }
.hidden { display: none !important; }

@media (max-width: 850px) { .browse-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }.restaurant-grid { grid-template-columns: 1fr; }.intro { margin-top: 18px; } }
@media (max-width: 680px) { .topbar { flex-wrap: wrap; gap: .6rem; min-height: unset; padding: 11px 16px; }.brand { font-size: .98rem; }.main-nav { gap: 1rem; order: 3; width: 100%; }.nav-button { padding: 9px 0 4px; }.cart-button { margin-left: auto; }.page-wrap { padding: 0 16px; }.intro { margin: 16px 0 24px; min-height: 150px; padding: 20px; }.intro img { height: 95px; width: 105px; }.intro h1 { font-size: 1.65rem; max-width: 270px; }.intro-copy { font-size: .88rem; max-width: 260px; }.browse-layout { grid-template-columns: 1fr; }.cart-panel { position: static; }.restaurant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.restaurant-photo { height: 105px; }.restaurant-tools { grid-template-columns: minmax(0, 1fr) 130px; }.menu-heading { align-items: start; gap: 10px; }.delivery-note { font-size: .72rem; }.menu-item { align-items: start; }.menu-item-actions { align-items: end; display: flex; flex-direction: column; gap: 7px; }.page-footer { margin-top: 26px; } }
@media (max-width: 430px) { .restaurant-grid { grid-template-columns: 1fr; }.restaurant-photo { height: 140px; }.intro img { display: none; }.restaurant-tools { grid-template-columns: 1fr; }.section-heading { align-items: start; } }