/*
 * Ported VERBATIM from the design prototype — shared component styles (.c*)
 *
 * Do not restructure or reformat: this is kept byte-identical to the design
 * so it can be diffed against it. Overrides belong in a separate file.
 */

.cnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 248, 241, 0.85);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.cnav-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 14px 28px;
  display: flex; align-items: center; gap: 18px;
}
.cnav-logo { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.cnav-logo img { height: 26px; }
.cnav-loc {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: white;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.cnav-loc:hover { border-color: var(--nb); }
.cnav-search { flex: 1; max-width: 540px; position: relative; }
.cnav-search input {
  width: 100%; padding: 11px 16px 11px 42px;
  background: white; border: 1px solid var(--line);
  border-radius: 999px; outline: none; font-size: 14px;
}
.cnav-search input:focus { border-color: var(--nb); box-shadow: 0 0 0 4px var(--nb-soft); }
.cnav-search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--mute); }
.cnav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.cnav-link { padding: 8px 14px; font-size: 14px; font-weight: 500; cursor: pointer; border-radius: 999px; }
.cnav-link:hover { background: var(--line-2); }
.cnav-cart {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; background: var(--ink); color: white;
  border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 13.5px; border: none;
}
.cnav-cart:hover { background: #000; }
.cnav-cart .count {
  background: var(--nb); color: white; font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 999px; min-width: 18px; text-align: center;
}

.cbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; background: white; color: var(--ink);
  border: 1px solid var(--line); border-radius: 999px;
  font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.cbtn:hover { background: var(--line-2); }
.cbtn:active { transform: scale(0.97); }
.cbtn.primary { background: var(--nb); color: white; border-color: var(--nb); box-shadow: var(--shadow-pill); }
.cbtn.primary:hover { background: var(--nb-2); }
.cbtn.dark { background: var(--ink); color: white; border-color: var(--ink); }
.cbtn.dark:hover { background: #000; }
.cbtn.lg { padding: 14px 26px; font-size: 15.5px; }
.cbtn.sm { padding: 8px 14px; font-size: 13px; }
.cbtn.ghost { background: transparent; border-color: transparent; }
.cbtn.ghost:hover { background: var(--line-2); }
.cbtn.outline { background: transparent; }
.cbtn.outline:hover { background: var(--line-2); }

.hero { position: relative; max-width: 1320px; margin: 18px auto 50px; padding: 0 28px; }
.hero-inner {
  position: relative;
  background: linear-gradient(135deg, #0F1410 0%, #1A2A20 65%, #0E2616 100%);
  border-radius: var(--r-xl); overflow: hidden;
  padding: 80px 60px 70px; color: white; min-height: 480px;
}
.hero-mesh {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 85% 20%, rgba(255,179,71,0.35), transparent 35%),
    radial-gradient(circle at 15% 80%, rgba(0,167,93,0.4), transparent 40%),
    radial-gradient(circle at 70% 90%, rgba(244,118,58,0.25), transparent 30%);
}
.hero-content { position: relative; max-width: 640px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 22px;
}
.hero-eyebrow .led { width: 6px; height: 6px; border-radius: 999px; background: #6BD27A; box-shadow: 0 0 0 3px rgba(107,210,122,0.25); }
.hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 18px;
}
.hero h1 em { font-style: italic; color: #FFB347; font-weight: 500; }
.hero p.lead { font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.75); max-width: 480px; margin: 0 0 30px; }
.hero-search {
  background: white; border-radius: 18px; padding: 8px;
  display: flex; gap: 8px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); max-width: 600px;
}
.hero-search .seg { flex: 1; display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; cursor: pointer; }
.hero-search .seg:hover { background: var(--cream); }
.hero-search .seg .lab { font-size: 11px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; }
.hero-search .seg input { border: none; outline: none; padding: 2px 0; font-size: 14px; font-weight: 500; color: var(--ink); background: transparent; }
.hero-search .seg input::placeholder { color: var(--mute); font-weight: 400; }
.hero-search .seg + .seg { border-left: 1px solid var(--line); }
.hero-search button {
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--nb); color: white; border: none;
  display: grid; place-items: center; cursor: pointer; align-self: center;
}
.hero-search button:hover { background: var(--nb-2); }

.hero-stats { display: flex; gap: 30px; margin-top: 36px; }
.hero-stats div .n { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.hero-stats div .l { color: rgba(255,255,255,0.55); font-size: 12.5px; margin-top: 2px; }

.hero-floats { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 360px; height: 360px; }
.float-card {
  position: absolute; background: white; border-radius: 18px;
  padding: 12px; box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  width: 200px; color: var(--ink); animation: floaty 6s ease-in-out infinite;
}
.float-card .ph { height: 120px; margin: -12px -12px 10px; border-radius: 18px 18px 6px 6px; }
.float-card .t { font-weight: 700; font-size: 14px; }
.float-card .s { font-size: 12px; color: var(--mute); margin-top: 2px; }
.float-card .p { font-family: var(--font-mono); font-weight: 700; margin-top: 8px; font-size: 14px; color: var(--nb-3); }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); } }

.section { max-width: 1320px; margin: 0 auto; padding: 0 28px 60px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 24px; gap: 20px; flex-wrap: wrap;
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.02em;
  margin: 0 0 4px; line-height: 1.1;
}
.section-head .sub { color: var(--mute); font-size: 15px; max-width: 540px; }
.section-head .see-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 14px; color: var(--nb-3); cursor: pointer;
}
.section-head .see-all:hover { color: var(--nb); }

.cats { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 132px; height: 152px; background: white; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 18px 8px; cursor: pointer; text-align: center;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.cat:hover { transform: translateY(-4px); border-color: var(--nb); box-shadow: var(--shadow); }
.cat.active { border-color: var(--nb); background: var(--nb-soft); }
.cat .ph { width: 76px; height: 76px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; margin-bottom: 12px; font-size: 36px; }
.cat .n { font-size: 13.5px; font-weight: 600; }
.cat .c { font-size: 11px; color: var(--mute); margin-top: 2px; }

.rest-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 1100px) { .rest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .rest-grid { grid-template-columns: 1fr; } }

.rest { background: white; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; border: 1px solid var(--line); transition: transform 0.2s, box-shadow 0.2s; }
.rest:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.rest-img { position: relative; aspect-ratio: 16 / 10; background: var(--cream); overflow: hidden; }
.rest-img .badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; gap: 6px; }
.rest-img .heart {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  background: rgba(255,255,255,0.92); border-radius: 999px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink); border: none;
}
.rest-img .heart.on { color: #E54848; background: white; }
.rest-img .promo {
  position: absolute; bottom: 14px; left: 14px;
  background: var(--ink); color: white;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.rest-img .promo .x { color: var(--warm-2); }
.rest-body { padding: 16px 18px 18px; }
.rest-body .row1 { display: flex; align-items: center; gap: 10px; }
.rest-body h3 { margin: 0; font-size: 16.5px; font-weight: 700; flex: 1; }
.rest-body .rating {
  display: flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600;
  background: var(--nb-soft); color: var(--nb-3);
  padding: 2px 8px; border-radius: 6px;
}
.rest-body .desc { color: var(--mute); font-size: 13.5px; margin-top: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.rest-body .meta { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.rest-body .meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--mute-2); }

.food-ph { width: 100%; height: 100%; background: var(--cream); display: grid; place-items: center; position: relative; overflow: hidden; font-size: 64px; }
.food-ph::before { content: ''; position: absolute; inset: 0; background: var(--bg-grad, linear-gradient(135deg, #FFE2C1, #FFCB91)); z-index: 0; }
.food-ph > * { position: relative; z-index: 1; }
.food-ph .grain { position: absolute; inset: 0; opacity: 0.4; z-index: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 0 2px, transparent 2px 6px), radial-gradient(circle at 70% 60%, rgba(0,0,0,0.05) 0 3px, transparent 3px 8px); }

.banners { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; }
@media (max-width: 900px) { .banners { grid-template-columns: 1fr; } }
.banner {
  border-radius: var(--r-lg); padding: 36px 38px; color: white;
  position: relative; overflow: hidden; min-height: 220px;
  display: flex; flex-direction: column; justify-content: space-between; cursor: pointer;
}
.banner.one { background: linear-gradient(135deg, #003C1F 0%, #00592D 60%, #007C42 100%); }
.banner.two { background: linear-gradient(135deg, #4F1E0E 0%, #B04E1C 70%, #D87236 100%); }
.banner .label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.banner h3 { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; margin: 8px 0 4px; line-height: 1.1; }
.banner p { opacity: 0.8; font-size: 14px; margin: 0 0 20px; max-width: 280px; }
.banner .cbtn { background: white; color: var(--ink); border: none; align-self: flex-start; }
.banner .ill { position: absolute; right: -20px; bottom: -40px; width: 220px; height: 220px; border-radius: 50%; opacity: 0.18; background: radial-gradient(circle, white 0%, transparent 70%); }

.cuisines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .cuisines { grid-template-columns: repeat(2, 1fr); } }
.cuisine-card { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; border: 1px solid var(--line); transition: 0.2s; }
.cuisine-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cuisine-card .label { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 16px; background: linear-gradient(to top, rgba(0,0,0,0.75), transparent); color: white; }
.cuisine-card h3 { margin: 0; font-size: 17px; font-weight: 700; }
.cuisine-card .c { font-size: 12.5px; opacity: 0.85; margin-top: 2px; }

.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; } }
.why-card { padding: 30px; background: white; border: 1px solid var(--line); border-radius: var(--r-md); text-align: left; }
.why-card .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--nb-soft); color: var(--nb-3); display: grid; place-items: center; margin-bottom: 18px; }
.why-card h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; font-family: var(--font-display); letter-spacing: -0.01em; }
.why-card p { margin: 0; color: var(--mute); font-size: 14px; line-height: 1.55; }

.app-cta {
  margin-top: 60px; padding: 60px; border-radius: var(--r-xl);
  background: #FEF1DC;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center; overflow: hidden; position: relative;
  /* Tall enough for the photograph, and no taller.
     A flat 500px was wrong at both ends: below ~1200px the picture is shorter than
     that and left a band of empty panel above it, and a fixed value cannot follow a
     picture whose height changes with the viewport.
     So the height is derived from the picture. .visual is 52% of this panel, the
     panel is min(1264px, 100vw - 56px) wide (.section is max-width 1320 with 28px
     of side padding), and the image is 1030x806 — so 0.52 / (1030/806) = 0.407 of
     the panel width — less the 18px it deliberately overhangs the bottom by.
     All three factors are in the .visual rule below; change one and change this. */
  min-height: calc(min(1264px, 100vw - 56px) * 0.407 - 18px);
}
@media (max-width: 900px) { .app-cta { grid-template-columns: 1fr; padding: 40px; min-height: 0; } }
.app-cta h2 { font-family: var(--font-display); font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 14px; }
.app-cta p { color: var(--ink-2); font-size: 16px; line-height: 1.55; max-width: 440px; margin: 0 0 26px; }
.app-stores { display: flex; gap: 12px; }
.app-store { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--ink); color: white; border-radius: 14px; cursor: pointer; }
.app-store .sub { font-size: 11px; opacity: 0.7; line-height: 1; }
.app-store .name { font-size: 15px; font-weight: 600; line-height: 1.1; margin-top: 3px; }
/* The photograph scales with the panel instead of being cropped to fit it.
   It used to fill the right half with object-fit: cover, which meant a fixed 500px
   height against a column that narrows with the viewport: by 957px it was slicing
   206px off the sides, and the cut landed at source x=153 — straight through the
   tomatoes — as a hard vertical line. Sizing by width and letting the height follow
   removes every crop, so the picture simply gets smaller as the screen does.

   Which edges may show is measured, not guessed. Against the panel's #FEF1DC the
   photo's own edges differ by: left 2 (invisible), top 23 (faint), right 90 and
   bottom 199 (both obvious — the burger and the chip bag run off those edges). So it
   is anchored bottom-right and overhangs both, where the panel's own boundary and
   overflow: hidden cut them off; the invisible left edge is the only one left inside,
   and the faint top edge is faded out below. The text keeps the first grid column,
   the only child still in flow. */
.app-cta .visual {
  position: absolute; right: -1.5%; bottom: -18px; width: 52%;
  /* Fades the top edge into the panel colour. Needed only at the narrower desktop
     widths, where the picture is shorter than the panel and that edge falls inside
     it; past ~1260px the top overhangs the panel and the fade is clipped away. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
          mask-image: linear-gradient(to bottom, transparent 0, #000 30px);
}
.app-shot { display: block; width: 100%; height: auto; }
/* One column, so the picture goes back into the flow underneath the copy.
   It has to be released at the same width the grid collapses, not at the narrower
   mobile breakpoint, or it overlays the heading in between — and this block has to
   sit AFTER the absolute rule above, which it ties on specificity and would
   otherwise lose to on source order. */
@media (max-width: 900px) {
  /* Stacked under the copy, still uncropped, still scaling with the screen. The
     negative margins carry the visible right and bottom edges past the panel, which
     clips them; the top edge keeps the same fade as the desktop layout. */
  .app-cta .visual { position: static; width: auto; margin: 10px -40px -40px; }
}

.cfoot { background: var(--ink); color: white; margin-top: 80px; padding: 70px 28px 30px; }
.cfoot-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 50px; }
@media (max-width: 900px) { .cfoot-inner { grid-template-columns: 1fr 1fr; } }
.cfoot h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.cfoot a { display: block; color: rgba(255,255,255,0.75); font-size: 14px; padding: 4px 0; cursor: pointer; }
.cfoot a:hover { color: white; }
.cfoot .brand img { height: 26px; filter: brightness(0) invert(1); }
.cfoot .brand p { color: rgba(255,255,255,0.6); font-size: 14px; line-height: 1.55; margin: 14px 0; max-width: 320px; }
.cfoot-bottom { max-width: 1320px; margin: 60px auto 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; gap: 16px; color: rgba(255,255,255,0.5); font-size: 13px; flex-wrap: wrap; }
.cfoot-bottom .socials { display: flex; gap: 8px; margin-left: auto; }
.cfoot-bottom .socials a { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,0.75); padding: 0; }
.cfoot-bottom .socials a:hover { background: var(--nb); color: white; }

/* Restaurant detail */
.r-cover { position: relative; height: 380px; overflow: hidden; }
.r-cover .img { width: 100%; height: 100%; }
.r-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(20,25,22,0.85) 100%); }
.r-cover .back { position: absolute; top: 22px; left: 28px; width: 40px; height: 40px; background: white; border-radius: 999px; display: grid; place-items: center; cursor: pointer; z-index: 2; border: none; }
.r-cover .actions { position: absolute; top: 22px; right: 28px; display: flex; gap: 8px; z-index: 2; }
.r-cover .actions .cbtn { background: rgba(255,255,255,0.95); border: none; }
.r-head { max-width: 1320px; margin: -120px auto 0; padding: 0 28px; position: relative; z-index: 2; color: white; }
.r-head h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 4vw, 54px); letter-spacing: -0.02em; margin: 0 0 6px; }
.r-head .r-cuisines { display: inline-flex; gap: 6px; font-size: 14.5px; opacity: 0.85; }
.r-head .meta { display: flex; align-items: center; gap: 20px; background: white; color: var(--ink); padding: 16px 24px; border-radius: var(--r-md); margin-top: 24px; box-shadow: var(--shadow); flex-wrap: wrap; }
.r-head .meta .pill { display: flex; align-items: center; gap: 8px; }
.r-head .meta .pill strong { font-weight: 700; font-size: 14.5px; }
.r-head .meta .pill .s { font-size: 12.5px; color: var(--mute); }
.r-head .meta .vert { width: 1px; height: 30px; background: var(--line); }
.r-head .meta .open { color: var(--nb-3); font-weight: 700; font-size: 13.5px; }

.r-tabs { max-width: 1320px; margin: 28px auto 0; padding: 0 28px; display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.r-tab { padding: 14px 18px; font-size: 14.5px; font-weight: 500; color: var(--mute); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.r-tab:hover { color: var(--ink); }
.r-tab.active { color: var(--ink); border-bottom-color: var(--nb); font-weight: 700; }

.r-body { max-width: 1320px; margin: 30px auto 60px; padding: 0 28px; display: grid; grid-template-columns: 240px 1fr 360px; gap: 32px; align-items: flex-start; }
@media (max-width: 1100px) { .r-body { grid-template-columns: 200px 1fr; } .r-body .cart-side { display: none; } }
@media (max-width: 700px) { .r-body { grid-template-columns: 1fr; } .r-body .cat-side { display: none; } }
.cat-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 2px; }
.cat-side .cs { padding: 10px 14px; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.cat-side .cs:hover { background: var(--line-2); }
.cat-side .cs.active { background: var(--ink); color: white; font-weight: 600; }
.cat-side .cs .n { margin-left: auto; font-size: 12px; color: var(--mute); font-family: var(--font-mono); }
.cat-side .cs.active .n { color: rgba(255,255,255,0.6); }

.menu-cat { margin-bottom: 36px; }
.menu-cat h2 { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; margin: 0 0 6px; }
.menu-cat .csub { color: var(--mute); font-size: 14px; margin-bottom: 18px; }
.menu-items { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .menu-items { grid-template-columns: 1fr; } }

.item-card { display: flex; gap: 14px; background: white; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; position: relative; }
.item-card:hover { border-color: var(--nb); box-shadow: var(--shadow); }
.item-card .meta { flex: 1; min-width: 0; }
.item-card .row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.item-card .veg-dot { width: 14px; height: 14px; border: 1.5px solid; display: grid; place-items: center; border-radius: 2px; flex-shrink: 0; }
.item-card .veg-dot.veg { border-color: #1F8A2D; }
.item-card .veg-dot.veg::after { content: ''; width: 7px; height: 7px; border-radius: 999px; background: #1F8A2D; display: block; }
.item-card .veg-dot.nonveg { border-color: #B43030; }
.item-card .veg-dot.nonveg::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #B43030; display: block; }
.item-card h3 { font-size: 16px; font-weight: 700; margin: 0; }
.item-card .popular { background: var(--warn-bg); color: var(--warn); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.item-card .price { font-family: var(--font-mono); font-weight: 700; font-size: 15px; margin-top: 4px; }
.item-card .desc { color: var(--mute); font-size: 13.5px; margin-top: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.5; }
.item-card .photo { width: 130px; height: 130px; border-radius: 12px; overflow: hidden; flex-shrink: 0; position: relative; }
.item-card .add { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: white; border: 1px solid var(--nb); color: var(--nb-3); font-weight: 700; padding: 7px 18px; border-radius: 999px; cursor: pointer; font-size: 13px; box-shadow: 0 4px 14px rgba(0,167,93,0.18); }
.item-card .add:hover { background: var(--nb); color: white; }
.item-card .qty { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); background: var(--nb); color: white; border-radius: 999px; display: flex; align-items: center; font-weight: 700; font-size: 13px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,167,93,0.32); }
.item-card .qty button { background: transparent; border: none; color: white; width: 32px; height: 32px; cursor: pointer; font-size: 16px; }
.item-card .qty span { padding: 0 4px; min-width: 22px; text-align: center; }

.cart-side { position: sticky; top: 100px; background: white; border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; }
.cart-empty { padding: 40px 20px; text-align: center; color: var(--mute); }
.cart-empty .ico { font-size: 56px; margin-bottom: 10px; }
.cart-head { padding: 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.cart-head strong { font-size: 16px; }
.cart-items { padding: 8px; max-height: 360px; overflow-y: auto; }
.cart-item { padding: 12px; display: flex; gap: 10px; align-items: center; }
.cart-item .qty { background: var(--nb-soft); border: 1px solid var(--nb); color: var(--nb-3); border-radius: 8px; display: flex; align-items: center; font-weight: 700; font-size: 12px; height: 28px; }
.cart-item .qty button { background: transparent; border: none; color: var(--nb-3); width: 22px; cursor: pointer; }
.cart-item .qty span { padding: 0 4px; min-width: 16px; text-align: center; }
.cart-item .name { flex: 1; font-size: 13.5px; font-weight: 600; }
.cart-item .price { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; }
.cart-summary { padding: 14px 18px; background: var(--line-2); }
.cart-summary .row { display: flex; align-items: center; font-size: 13.5px; padding: 4px 0; }
.cart-summary .row .v { margin-left: auto; font-family: var(--font-mono); font-weight: 600; }
.cart-summary .total { font-weight: 700; font-size: 16px; padding-top: 8px; border-top: 1px dashed var(--line); margin-top: 6px; }

.checkout-page { max-width: 1100px; margin: 30px auto; padding: 0 28px; display: grid; grid-template-columns: 1fr 380px; gap: 28px; }
@media (max-width: 900px) { .checkout-page { grid-template-columns: 1fr; } }
.checkout-card { background: white; border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; margin-bottom: 14px; }
.checkout-card h3 { margin: 0 0 14px; font-size: 17px; font-family: var(--font-display); font-weight: 600; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.input, .textarea, .select { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: white; outline: none; font-size: 14px; }
.input:focus { border-color: var(--nb); box-shadow: 0 0 0 4px var(--nb-soft); }

.choice-row { display: grid; gap: 10px; }
.choice-row.cols { grid-template-columns: 1fr 1fr; }
.choice { padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; display: flex; align-items: center; gap: 12px; }
.choice.on { border-color: var(--nb); background: var(--nb-soft); }
.choice .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--line-2); display: grid; place-items: center; flex-shrink: 0; }
.choice.on .ic { background: white; color: var(--nb-3); }
.choice .t { font-weight: 600; font-size: 14px; }
.choice .s { font-size: 12.5px; color: var(--mute); margin-top: 2px; }

.track-page { max-width: 1100px; margin: 30px auto; padding: 0 28px; display: grid; grid-template-columns: 1fr 380px; gap: 28px; }
@media (max-width: 900px) { .track-page { grid-template-columns: 1fr; } }
.track-map { height: 480px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg, #DCE5D0 0%, #C4D2B4 100%); position: relative; border: 1px solid var(--line); }
.track-map::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, rgba(255,255,255,0.4) 0 1px, transparent 1px 32px); }
.track-map .road { position: absolute; top: 30%; left: 8%; right: 12%; height: 6px; background: rgba(255,255,255,0.55); border-radius: 999px; transform: rotate(8deg); }
.track-map .road.alt { top: auto; bottom: 30%; transform: rotate(-3deg); left: 12%; right: 8%; }

.track-status { background: linear-gradient(135deg, var(--ink) 0%, #1A2A20 100%); color: white; padding: 28px; border-radius: var(--r-md); margin-top: 14px; }
.track-status .label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; }
.track-status h2 { font-family: var(--font-display); font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 4px 0 14px; }
.track-status .eta { display: flex; align-items: center; gap: 10px; }
.track-status .eta .big { font-family: var(--font-mono); font-weight: 700; font-size: 36px; line-height: 1; }
.track-status .eta .small { opacity: 0.7; font-size: 13px; }
.track-bar { height: 6px; background: rgba(255,255,255,0.15); border-radius: 999px; margin-top: 18px; overflow: hidden; }
.track-bar .fill { height: 100%; background: linear-gradient(90deg, #6BD27A 0%, var(--warm-2) 100%); border-radius: 999px; width: 65%; }

.timeline { padding: 22px; background: white; border: 1px solid var(--line); border-radius: var(--r-md); }
.timeline h3 { margin: 0 0 16px; font-size: 16px; font-weight: 700; }
.tl-step { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.tl-step::before { content: ''; position: absolute; left: 11px; top: 24px; width: 2px; height: calc(100% - 18px); background: var(--line); }
.tl-step:last-child::before { display: none; }
.tl-step .dot { width: 22px; height: 22px; border-radius: 999px; background: white; border: 2px solid var(--line); display: grid; place-items: center; color: var(--mute); flex-shrink: 0; }
.tl-step.done .dot { background: var(--nb); border-color: var(--nb); color: white; }
.tl-step.active .dot { background: white; border-color: var(--nb); color: var(--nb); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,167,93,0.4); } 50% { box-shadow: 0 0 0 8px rgba(0,167,93,0); } }
.tl-step .label { font-weight: 600; font-size: 14px; color: var(--ink-2); }
.tl-step.done .label, .tl-step.active .label { color: var(--ink); }
.tl-step.active .label { color: var(--nb-3); font-weight: 700; }
.tl-step .time { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.tl-step .sub { font-size: 12.5px; color: var(--mute); margin-top: 4px; }

.rider-card { background: white; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.rider-card .row { display: flex; align-items: center; gap: 14px; }
.rider-card .avatar { width: 54px; height: 54px; border-radius: 999px; background: linear-gradient(135deg, var(--warm-1), var(--warm-2)); display: grid; place-items: center; color: white; font-weight: 700; font-size: 18px; }
.rider-card .name { font-weight: 700; font-size: 15px; }
.rider-card .vehicle { font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.rider-card .actions { display: flex; gap: 8px; margin-left: auto; }
.rider-card .actions button { width: 40px; height: 40px; background: var(--nb-soft); color: var(--nb-3); border: none; border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.rider-card .actions button:hover { background: var(--nb); color: white; }

.page-jump { position: fixed; bottom: 20px; left: 20px; z-index: 80; background: var(--ink); color: white; padding: 6px; border-radius: 999px; display: flex; gap: 4px; box-shadow: var(--shadow-lg); }
.page-jump button { background: transparent; border: none; color: rgba(255,255,255,0.7); padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 12.5px; font-weight: 600; }
.page-jump button.on { background: var(--nb); color: white; }
.page-jump button:hover:not(.on) { color: white; }

.modal-back { position: fixed; inset: 0; background: rgba(20,25,22,0.5); display: grid; place-items: center; z-index: 70; padding: 20px; }
.modal { background: white; border-radius: var(--r-lg); width: 500px; max-width: 100%; overflow: hidden; box-shadow: var(--shadow-lg); }

.fade-up { animation: fadeUp 0.5s ease-out both; }@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }