/* VietTruck menu: one simple list, styled from the Hero kit (kit.css).
   Every colour and font comes from the variables in kit.css. */
.page-head{background:var(--ink);color:var(--paper);padding:28px 0 24px}
.page-head h1{font-size:64px;line-height:.9}
.page-head p{max-width:560px;margin-top:12px;color:rgba(246,245,236,.8)}
.page-head .price-note{font-size:13px;color:rgba(246,245,236,.7)}
.page-head .open-now{margin-top:14px;color:var(--lime)}
.jump-bar{position:sticky;top:64px;z-index:15;background:var(--paper);border-bottom:1px solid var(--line)}
.jump{display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;padding:14px 0}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;text-decoration:none;font-weight:600;font-size:14px;color:var(--muted);padding:12px 0;border-bottom:2px solid transparent}
.jump a.jg{color:var(--gold-deep);text-transform:uppercase;letter-spacing:.14em;font-size:12px;font-weight:700}
.jump a[aria-current]{color:var(--ink);border-bottom-color:var(--gold)}
.menu{padding:28px 0 64px}
.menu .wrap{max-width:760px}
.msearch input{width:100%;min-height:48px;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:10px 2px;font:500 16px var(--body);background:transparent;color:var(--ink)}
.msearch input:focus{outline:none;border-bottom-color:var(--gold)}
#mcount{margin:8px 0 0;font-size:13px;color:var(--muted)}
#menu{display:grid;gap:52px;margin-top:28px}
.mgroup{scroll-margin-top:130px}
.mgroup h2{font-size:56px;line-height:.9}
.mgroup p{display:none;color:var(--gold-deep);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-top:8px}
.mcat{scroll-margin-top:130px}
.mcat h3{font-size:30px;padding-bottom:10px;border-bottom:1px solid var(--gold)}
.mfig{margin:16px 0 0}
.mph{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.mnote{color:var(--muted);font-size:15px;margin:12px 0 0}
.mlist{list-style:none;margin:4px 0 0;padding:0}
.mlist li{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.mlist li>div{flex:1;min-width:0}
.mlist b{font-weight:600;font-size:17px}
.idesc{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:3px}
.iopts{display:block;font-size:12.5px;color:var(--gold-deep);margin-top:3px;font-weight:600}
.sz{font-size:13px;color:var(--muted);font-weight:600}
.dots{display:none}
.mlist .p{font:500 18px/1 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.mlist .p.ask{font:600 13px var(--body);color:var(--muted)}
.mnone{padding:24px 0;color:var(--muted)}
/* The add control: a small round + in ink, like a counter bell, not a word box */
.o-ctl{margin-left:4px}
.o-add{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:1.5px solid var(--ink);font-size:0;position:relative}
.o-add::before{content:"+";font:500 22px/1 var(--body);position:absolute;inset:0;display:grid;place-items:center;padding-bottom:2px}
.o-add:hover{background:var(--ink);color:var(--cream)}
.allergy{margin-top:28px}
.elsewhere{background:var(--lime);padding:48px 0}
.elsewhere h2{font-size:40px;margin-bottom:10px}
@media (min-width:900px){
  .page-head{padding:44px 0 36px}
  .page-head h1{font-size:96px}
  .jump-bar{top:76px}
  .menu .wrap,.page-head .wrap,.jump-bar .wrap{max-width:1120px}
  .msearch,#mcount{max-width:620px}
  /* Desktop: each category's photo stays beside its list; categories without a photo run the list in two columns */
  .mcat{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;align-items:start}
  .mcat>*{grid-column:2}
  .mcat .mfig{grid-column:1;grid-row:1 / span 3;position:sticky;top:150px;margin:0}
  .mcat:not(:has(.mfig))>*{grid-column:1 / -1}
  .mcat:not(:has(.mfig)) .mlist{columns:2;column-gap:56px}
  .mcat:not(:has(.mfig)) .mlist li{break-inside:avoid}
}
/* Bigger tap area on the cart's − and + */
.o-q{position:relative}
.o-q::after{content:"";position:absolute;inset:-5px}