/* Wah Hong: menu page */
.mhead{background:var(--yellow);padding-block:clamp(12px,2vw,28px) clamp(22px,2.6vw,40px)}
.mhead .wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px clamp(24px,4vw,72px);align-items:end}
.mhead h1{font:400 clamp(3rem,2rem + 5vw,7rem)/.9 var(--display);color:var(--red);text-transform:uppercase}
.tools{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;justify-content:flex-end}
.tools input[type=search]{flex:1 1 260px;max-width:520px;min-height:52px;padding:0 14px;border:2px solid var(--ink);border-radius:0;background:#fff;font-weight:600;font-size:1.0625rem;-webkit-appearance:none;appearance:none}
.tools input[type=search]::placeholder{color:var(--soft);font-weight:400}
.tog{position:relative;display:inline-flex}
.tog input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.tog span{display:inline-flex;align-items:center;min-height:52px;padding:0 16px;border:2px solid var(--ink);font-weight:700;font-size:var(--t-small);background:transparent;transition:background .15s ease,color .15s ease}
.tog input:checked + span{background:var(--ink);color:var(--yellow)}
.tog input:focus-visible + span{outline:3px solid var(--ink);outline-offset:3px}
@media (max-width:900px){.mhead .wrap{grid-template-columns:1fr}.tools{justify-content:flex-start}.tools input[type=search]{flex-basis:100%;max-width:none}.tog{flex:1}.tog span{width:100%;justify-content:center;padding:0 8px}}

.strip{position:sticky;top:0;z-index:5;background:var(--ink);color:#fff}
.strip .wrap{display:flex;align-items:stretch;gap:0;padding-inline:0;max-width:none}
.strip .tolist{flex:none;display:inline-flex;align-items:center;min-height:52px;padding:0 16px 0 var(--pad);background:var(--red);color:#fff;font-weight:700;font-size:var(--t-small);text-decoration:none;white-space:nowrap}
.strip ul{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-right:var(--pad)}
.strip ul::-webkit-scrollbar{display:none}
.strip li a{display:inline-flex;align-items:center;min-height:52px;padding:0 14px;white-space:nowrap;text-decoration:none;font-weight:600;font-size:var(--t-small);color:#fff}
.strip li a:hover,.strip li a.on{color:var(--yellow)}
.strip li a.on{box-shadow:inset 0 -4px 0 var(--yellow)}

.mbody{padding-block:clamp(24px,3vw,48px) var(--sec)}
.mbody .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,4vw,72px);align-items:start}
.msec{scroll-margin-top:68px;padding-bottom:clamp(32px,4vw,64px)}
.msec h2{font-size:clamp(1.75rem,1.2rem + 2.2vw,3rem)}
.msec .snote{margin-top:6px;color:var(--soft)}
.rows{margin-top:clamp(12px,1.4vw,20px)}
.row{display:grid;grid-template-columns:6.4ch minmax(0,1fr) 108px auto 76px;gap:6px 16px;align-items:center;padding:10px 12px;min-height:72px}
.row[hidden]{display:none}
.row:nth-child(odd){background:var(--white)}
.row .code{font:400 clamp(1.125rem,1rem + .5vw,1.4375rem)/1 var(--display);color:var(--red)}
.row .nm{font-weight:600;line-height:1.3}
.row .nt{display:block;font-weight:400;color:var(--soft);font-size:var(--t-small)}
.row .fl{font-weight:700;font-size:var(--t-small);white-space:nowrap}
.row .fl.s{color:var(--red)}
.row .fl.v{color:var(--green)}
.row .th{grid-column:3;display:block;width:108px;height:72px;padding:0;border:0;background:var(--pale);cursor:pointer}
.row .th img{width:108px;height:72px;object-fit:cover}
.row .pr{grid-column:4;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.row .add{grid-column:5;min-height:44px;min-width:76px;padding:0 10px;background:var(--red);color:#fff;border:0;font-weight:700;font-size:var(--t-small);cursor:pointer;transition:background .15s ease,transform .15s ease}
.row .add:hover{background:var(--red-deep)}
.row .add:active{transform:translateY(1px)}
.row .opts{grid-column:3/6;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.row .opts .add{min-width:0;padding:0 12px}
.nomatch{padding:24px 0;font-weight:600;font-size:var(--t-h3)}
@media (max-width:700px){
  .row{grid-template-columns:4.4ch minmax(0,1fr) 84px;gap:6px 10px;align-items:start;padding:12px 10px}
  .row .code{padding-top:2px}
  .row .th{grid-column:3;grid-row:1;width:84px;height:56px}
  .row .th img{width:84px;height:56px}
  .row .nm.wide{grid-column:2/4}
  .row .pr{grid-column:2;grid-row:2;text-align:left;align-self:center}
  .row .add{grid-column:3;grid-row:2;min-width:84px}
  .row .opts{grid-column:1/4;grid-row:2;justify-content:flex-start}
  .row .opts .add{flex:1 1 auto;min-width:0}
}

.order{position:sticky;top:76px;background:var(--yellow);padding:clamp(16px,1.8vw,26px);scroll-margin-top:68px;max-height:calc(100vh - 92px);overflow:auto}
.order h2{font-size:clamp(1.75rem,1.4rem + 1.4vw,2.5rem)}
.order .empty{margin-top:10px}
.order ol{margin-top:14px}
.order li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 0;align-items:center}
.order li + li{box-shadow:inset 0 2px 0 rgba(38,16,14,.14)}
.order li .what{font-weight:600;line-height:1.3}
.order li .what b{font:400 1.05em/1 var(--display);color:var(--red);margin-right:.35em}
.order li .lp{font-weight:700;font-variant-numeric:tabular-nums}
.order .qty{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-weight:700}
.order .qty button{width:44px;height:44px;border:2px solid var(--ink);background:transparent;font-weight:700;font-size:1.25rem;line-height:1;cursor:pointer}
.order .qty button:hover{background:var(--ink);color:var(--yellow)}
.order .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px;padding-top:14px;box-shadow:inset 0 3px 0 var(--ink);font:400 var(--t-h3)/1 var(--display)}
.order .say{margin-top:14px;font-weight:600}
.order .say b{font:400 1.1em/1.3 var(--display);color:var(--red)}
.order .btn{width:100%;margin-top:14px}
.order .clear{margin-top:6px;min-height:44px;width:100%;background:transparent;border:0;font-weight:700;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.order .nodel{margin-top:14px;font-size:var(--t-small)}
@media (max-width:1100px){.mbody .wrap{grid-template-columns:1fr}.order{position:static;max-height:none}}
@media (min-width:1101px){.strip .tolist{display:none}.strip ul{padding-left:calc(var(--pad) - 14px)}}

dialog.photo{border:0;padding:0;background:var(--white);color:var(--ink);width:min(600px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
dialog.photo::backdrop{background:rgba(38,16,14,.72)}
dialog.photo img{width:100%;aspect-ratio:3/2;object-fit:cover}
dialog.photo .cap{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:baseline;padding:14px 16px 6px}
dialog.photo .cap .code{font:400 var(--t-h3)/1 var(--display);color:var(--red)}
dialog.photo .cap .nm{font-weight:700}
dialog.photo .cap .pr{font-weight:700;white-space:nowrap}
dialog.photo .acts{display:flex;gap:10px;padding:10px 16px 16px}
dialog.photo .acts .btn{flex:1}
dialog.photo[open]{animation:dlg .25s ease both}
@keyframes dlg{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){dialog.photo[open]{animation:none}}

/* section headings fold and unfold */
.msec h2 .acc{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:16px;min-height:52px;padding:0;background:none;border:0;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;text-align:left;cursor:pointer}
.msec h2 .cnt{font:700 var(--t-small)/1 var(--text);color:var(--ink);letter-spacing:0;white-space:nowrap}
.msec h2 .cnt::after{content:" \2212";font-size:1.3em}
.msec.shut h2 .cnt::after{content:" +"}
.msec.shut .rows,.msec.shut .snote{display:none}
.msec.shut{padding-bottom:0}
.msec h2 .acc{padding:8px 0;line-height:1.02}
.tog span{white-space:nowrap}
@media (max-width:700px){.row .code{font-size:1.0625rem}.msec{padding-bottom:20px}}