/* Scent-tastic menu page (Leo, 18 Oct 2026: one simple list going down, cleaner, the shop's own).
   The shop carries it: a gold head like their tea board, a black bar of tracked-caps words like the fascia,
   drink names plain, the large price small beside it, and one square black + to add. No pills, dots or boxes. */
.menu-head{background:var(--gold);padding-block:32px 30px}
.menu-head h1{font-size:13px;font-weight:500;letter-spacing:.34em;text-transform:uppercase}
.menu-head p{font-size:clamp(22px,5vw,32px);line-height:1.2;margin-top:12px;max-width:22em}
.menu-head .act{margin-top:16px}
.menu-head .alt{font-size:15px}

.jump-bar{position:sticky;top:var(--head-h,64px);z-index:15;background:var(--ink)}
.jump{display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;min-height:50px;align-items:stretch}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;display:flex;align-items:center;text-decoration:none;font-size:12.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--warm);opacity:.75;border-bottom:2px solid transparent}
.jump a:hover,.jump a[aria-current],.jump a.jg{opacity:1}
.jump a[aria-current]{border-bottom-color:var(--neon)}

.menu{padding-top:28px}
.menu .wrap{max-width:820px;display:grid;gap:12px}
.msearch{display:block}
.msearch input{width:100%;min-height:50px;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:12px 0;font:400 18px var(--body);background:transparent;color:var(--ink)}
.msearch input:focus{outline:none;border-bottom-width:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#mcount{font-size:14px;color:var(--muted);min-height:1.5em}
#menu{display:grid;gap:52px;margin-top:16px}
#menu:empty{min-height:150vh}
.mgroup{scroll-margin-top:130px;padding-top:8px}
.mgroup h2{font-size:clamp(40px,9vw,64px);font-weight:500;line-height:1}
.mgroup p{color:var(--muted);font-size:15px;margin-top:6px}
.mcat{scroll-margin-top:130px}
.mcat h2,.mcat h3{font-size:13px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;margin:0}
.mfig{margin:14px 0 0}
.mph{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.mcredit{font-size:12px;color:var(--muted);margin-top:6px}
.mnote{color:var(--muted);font-size:15.5px;margin:10px 0 0;max-width:36em}
.mlist{list-style:none;margin:6px 0 0;padding:0}
.mlist li{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.mlist li:last-child{border-bottom:0}
.mlist li>div{min-width:0;flex:1}
.mlist b{font-weight:500;font-size:18px}
.idesc{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:2px}
.iopts{display:none}
.sz{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.diet{margin-left:6px;font-size:11px;color:var(--muted);text-decoration:none}
.dots{display:none}
.mlist .p{font:500 18px/1 var(--body);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mlist .p.ask{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mnone{padding:24px;background:var(--timber);text-align:center}
.menu-hours{display:none}
@media (min-width:900px){.menu-head{padding-block:56px 48px}.menu{padding-top:44px}.jump{gap:32px}}

/* Desktop: each category is a row, its photo on the left and the drinks on the right */
@media (min-width:1100px){
  .menu .wrap{max-width:1120px}
  .msearch,#mcount{max-width:600px;width:100%;margin-left:calc(5 / 12 * 100% + 24px)}
  #menu{gap:72px}
  .mcat{display:grid;grid-template-columns:5fr 7fr;column-gap:48px;align-items:start}
  .mcat h2,.mcat h3{grid-column:1;grid-row:1}
  .mfig{grid-column:1;grid-row:2 / span 20}
  .mnote{grid-column:2;grid-row:1;margin:0}
  .mlist{grid-column:2;grid-row:2 / span 20;margin-top:0}
  .mcat:not(:has(.mnote)) .mlist{grid-row:1 / span 20}
}

/* Add is a small square + in ink (Leo, 18 Oct 2026: "just do a nice + design"). 34px to see, 44px to tap. */
.o-ctl{margin-left:0;gap:8px}
.o-add{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;border:0!important;border-radius:0!important;background:var(--ink)!important;color:var(--warm)!important;font-size:0!important;position:relative;flex:none}
.o-add::before{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;background:linear-gradient(var(--warm),var(--warm)) center/100% 2px no-repeat,linear-gradient(var(--warm),var(--warm)) center/2px 100% no-repeat}
.o-add::after{content:"";position:absolute;inset:-5px}
.o-q{width:34px!important;height:34px!important;border-radius:0!important;border:1px solid var(--ink)!important;color:var(--ink)!important;position:relative}
.o-q::after{content:"";position:absolute;inset:-5px}
.o-bar>button,.o-bar-b,.o-pay,.o-x,.o-back,.o-opt,.o-f select,.o-f textarea,.o-f input,.o-toast{border-radius:0!important}
.o-x,.o-back{width:44px!important;height:44px!important}
.o-sheet{border-radius:0!important}
.o-link{min-height:44px;display:inline-flex;align-items:center}
body:has(.o-sheet) .o-toast{bottom:auto!important;top:calc(12px + env(safe-area-inset-top,0px))}