/* Ramen Ryoma menu page (Leo, 18 Oct 2026: one simple list going down, cleaner, the shop's own).
   From their posters: a charcoal bar of Bebas words, big Bebas section names with a hairline running off like a counter
   ledge, prices in poster red, and a charcoal ADD stamp like their logo block. Loaded last, over kit.css and order.css. */
.jump-bar{background:var(--ink);padding-block:0;border-bottom:3px solid var(--red)}
.jump{gap:24px;min-height:52px;align-items:stretch}
.jump a,.jump a.jg{display:flex;align-items:center;padding:3px 0 0;border:0;border-bottom:3px solid transparent;margin-bottom:-3px;border-radius:0;background:none;font:400 20px/1 var(--display);letter-spacing:.04em;color:#FBF4E8}
.jump a:hover,.jump a[aria-current]{color:var(--gold);border-bottom-color:var(--gold)}
.menu .wrap{gap:12px}
.msearch{position:relative;display:block}
.msearch input{border:0;border-bottom:2px solid var(--ink);border-radius:0;background:transparent;padding:12px 4px 12px 30px;box-shadow:none}
.msearch input:focus{border-bottom-color:var(--red);box-shadow:none}
.msearch::before{content:"";position:absolute;left:2px;top:50%;width:17px;height:17px;transform:translateY(-50%);background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='7' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M16 16l6 6' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='7' fill='none' stroke='black' stroke-width='2.5'/%3E%3Cpath d='M16 16l6 6' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
#mcount{margin-top:0}
#menu{gap:52px;margin-top:16px}
.mcat h2,.mcat h3{display:flex;align-items:center;gap:16px;border:0;padding:0;font-size:clamp(42px,7vw,60px);line-height:.95}
.mcat h2::after,.mcat h3::after{content:"";flex:1;height:2px;background:var(--ink);margin-top:-6px}
.mfig{margin:16px 0 0}
.mph{display:block;margin:0;aspect-ratio:4/3}
.mnote{margin-top:12px}
.mlist{margin-top:6px}
.mlist li{align-items:center;gap:14px;padding:15px 0}
.mlist li:last-child{border-bottom:0}
.mlist li>div{flex:1;max-width:none}
.dots{display:none}
.iopts{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.mlist .p{font:400 26px/1 var(--display);color:var(--red)}
@media (max-width:520px){.mlist li>div{max-width:none}}
/* ADD: a charcoal stamp, then − 1 + once it's in the order */
.o-ctl{margin-left:0}
.o-add{min-height:44px!important;padding:0 16px!important;border:0!important;border-radius:6px!important;background:var(--ink)!important;color:#FBF4E8!important;font:400 20px/1 var(--display)!important;letter-spacing:.06em;padding-top:2px!important}
.o-add:hover{background:var(--red)!important}
.o-q{width:40px;height:40px;border-radius:6px!important;border-color:var(--ink)!important;color:var(--ink)!important}
.o-n{font:400 24px/1 var(--display)}
@media (min-width:900px){
  /* each category photo sits beside its list in its own wide shape, so nothing is zoomed (Katsu's menu, taste.md) */
  .mcat:has(>.mfig){display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:40px;align-content:start}
  .mcat:has(>.mfig)>h2,.mcat:has(>.mfig)>h3{grid-column:1/-1}
  .mcat>.mfig{grid-column:2;grid-row:2/span 2;align-self:start;margin-top:24px;position:sticky;top:130px}
  .mcat>.mfig .mph{aspect-ratio:4/3}
  .mcat:has(>.mfig)>.mnote,.mcat:has(>.mfig)>.mlist{grid-column:1}
}

/* Add is a small + (Leo, 18 Oct 2026: "the add button is too big ... just do a nice + design"). 34px to see, 44px to tap. */
.o-add{width:34px!important;height:34px!important;min-height:34px!important;min-width:0!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:8px!important;background:var(--ink)!important;color:#FBF4E8!important;font-size:0!important;position:relative;flex:none;transition:background-color .15s,transform .1s ease-out}
.o-add::before{content:"";position:absolute;inset:0;margin:auto;width:13px;height:13px;background:linear-gradient(#FBF4E8,#FBF4E8) center/100% 2px no-repeat,linear-gradient(#FBF4E8,#FBF4E8) center/2px 100% no-repeat}
.o-add::after{content:"";position:absolute;inset:-5px}
.o-add:hover{background:var(--red)!important}
.o-add:active{transform:scale(.92)}
.o-q{width:34px!important;height:34px!important;border-radius:8px!important;border:1.5px solid var(--ink)!important;position:relative}
.o-q::after{content:"";position:absolute;inset:-5px}