/* Mai Wok-inspired menu architecture, expressed in HANA's charcoal and champagne palette. */
.menu-section {
 padding-block:80px 96px;
 background:
  radial-gradient(circle at 88% 10%,oklch(27% .018 76 / .36),transparent 34%),
  var(--bg);
 border-block:1px solid var(--line);
}
.menu-shell { display:grid; grid-template-columns:minmax(230px,300px) minmax(0,1fr); gap:64px; align-items:start; }
.menu-aside { position:sticky; top:124px; padding-top:10px; }
.menu-aside .section-note { margin-bottom:24px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:none; }
.menu-aside h2 { max-width:270px; color:var(--ink); font:600 clamp(52px,5vw,72px)/.9 var(--font-heading); letter-spacing:-.035em; overflow-wrap:normal; }
.menu-aside-copy { max-width:31ch; margin-top:28px; color:var(--muted); font-size:14px; line-height:1.75; }
.menu-aside>.text-link { display:block; width:100%; max-width:270px; margin-top:22px; padding:0 0 10px; border-bottom:1px solid var(--accent); color:var(--accent); font-size:13px; font-weight:700; }
.menu-service { margin-top:34px; padding-top:20px; border-top:1px solid var(--line); }
.menu-service span { color:var(--accent); font-size:11px; font-weight:700; }
.menu-service p { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.65; }
.menu-catalog { min-width:0; scroll-margin-top:124px; }
.menu-catalog-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; min-height:58px; padding:0 2px 13px; border-bottom:1px solid var(--line); }
.menu-catalog-heading h3 { color:var(--ink); font:600 clamp(29px,3vw,42px)/1.08 var(--font-heading); letter-spacing:-.025em; }
.menu-catalog-heading>span { flex:none; padding-bottom:5px; color:var(--muted); font-size:11px; font-weight:600; }
.menu-tools { display:grid; grid-template-columns:minmax(190px,280px) minmax(0,1fr); align-items:center; gap:16px; margin-top:16px; padding:6px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.menu-tools .search { position:relative; display:flex; max-width:none; }
.menu-tools .search svg { position:absolute; z-index:1; left:13px; top:50%; width:17px; height:17px; transform:translateY(-50%); fill:none; stroke:var(--muted); stroke-width:1.7; pointer-events:none; }
.menu-tools .search input { width:100%; min-height:42px; padding:9px 13px 9px 39px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--ink); font-size:12px; }
.menu-tools .search input:focus { border-color:var(--accent); outline:2px solid transparent; }
.menu-tools .filters { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
.menu-tools .filters button { min-height:36px; padding:7px 14px; border:0; border-radius:5px; background:transparent; color:var(--ink); font-size:11px; font-weight:700; }
.menu-tools .filters button:hover { color:var(--accent); background:var(--panel); }
.menu-tools .filters button[aria-pressed=true] { background:var(--accent); color:var(--on-accent); }
.menu-category-strip { margin-top:14px; padding:7px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.menu-category-strip .categories { position:static; display:flex; flex-wrap:wrap; gap:3px; max-height:none; padding:0; overflow:visible; border:0; background:transparent; }
.menu-category-strip .categories a { display:flex; align-items:center; gap:5px; min-height:36px; padding:7px 9px; border:0; border-radius:5px; color:var(--ink); font-size:10px; font-weight:700; line-height:1.3; white-space:nowrap; }
.menu-category-strip .categories a small { color:var(--muted); font-size:9px; font-weight:500; }
.menu-category-strip .categories a:hover { color:var(--accent); background:var(--panel); }
.menu-category-strip .categories a[aria-current] { background:var(--accent); color:var(--on-accent); }
.menu-category-strip .categories a[aria-current] small { color:inherit; opacity:.74; }
.menu-results-bar { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:45px; padding:6px 2px 4px; }
.menu-results-bar #search-status { margin:0; color:var(--muted); font-size:10px; }
.menu-results-bar .text-link { min-height:36px; color:var(--accent); font-size:10px; }
#menu-content { column-count:2; column-gap:12px; }
.menu-category { display:inline; padding:0; }
.menu-category>h3 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.menu-category--with-note>h3 { position:static; width:auto; height:auto; margin:5px 0 3px; overflow:visible; clip-path:none; color:var(--accent); font:600 24px/1.15 var(--font-heading); white-space:normal; }
.menu-category--with-note>h3 small { color:var(--muted); font:700 9px/1 Inter,Arial,sans-serif; }
.menu-category-note { width:100%; margin:0 0 12px; padding:0 0 11px; break-inside:avoid; border-bottom:1px solid var(--line); color:var(--muted); font-size:10px; line-height:1.55; }
.dish-grid { display:contents; }
.menu-catalog .dish {
 display:inline-flex;
 flex-direction:column;
 width:100%;
 margin:0 0 12px;
 padding:18px 16px 14px;
 break-inside:avoid;
 border:1px solid var(--line);
 border-radius:7px;
 background:linear-gradient(145deg,var(--surface),oklch(21% .006 67));
 transition:border-color .2s,transform .2s;
}
.menu-catalog .dish:hover { border-color:var(--control-line); transform:translateY(-1px); }
.menu-catalog .dish-copy { min-width:0; }
.dish-topline { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 10px; color:var(--accent); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.dish-topline strong { color:var(--accent); font-size:14px; font-weight:700; white-space:nowrap; }
.dish-media { display:grid; place-items:center; width:100%; min-height:78px; margin:0 0 13px; overflow:hidden; border-radius:4px; background:oklch(13% .006 67); }
.dish-media img { display:block; width:auto; max-width:100%; height:auto; max-height:68px; object-fit:contain; }
.dish-media--photo { display:block; min-height:0; aspect-ratio:16 / 9; }
.dish-media--photo img { width:100%; max-width:none; height:100%; max-height:none; object-fit:cover; }
.menu-catalog .dish h4 { color:var(--ink); font:600 14px/1.4 Inter,Arial,sans-serif; }
.menu-catalog .dish p { margin-top:7px; color:var(--muted); font-size:11px; line-height:1.65; }
.dish-tags { display:table; margin-top:9px; padding:5px 8px; border-radius:999px; background:var(--panel); color:var(--accent); font-size:9px; font-weight:700; }
.dish-tags:empty { display:none; }
.menu-catalog .variant-label { display:block; max-width:none; margin-top:12px; color:var(--muted); font-size:9px; }
.menu-catalog .variant-label select { width:100%; min-height:40px; margin-top:6px; padding:8px 30px 8px 10px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--ink); font-size:11px; }
.dish-details { margin-top:4px; }
.dish-details summary { width:max-content; max-width:100%; min-height:36px; padding-block:10px 6px; color:var(--muted); cursor:pointer; font-size:9px; }
.dish-details summary:hover { color:var(--accent); }
.menu-catalog .dish .dish-meta { max-width:46ch; margin:3px 0 5px; font-size:9px; line-height:1.55; }
.menu-catalog .dish-action { width:100%; min-width:0; margin-top:auto; padding-top:12px; }
.menu-catalog .dish-action .button { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:38px; padding:8px 12px; border:0; border-radius:5px; background:linear-gradient(90deg,var(--accent),var(--accent-hover)); color:var(--on-accent); font-size:11px; font-weight:700; }
.menu-catalog .dish-action .button:hover { filter:brightness(1.06); }
.menu-catalog .dish-action [data-dish-count]:empty { display:none; }
.menu-catalog .dish.is-in-cart { border-color:var(--accent); }
.menu-catalog .dish.is-in-cart .dish-action .button { box-shadow:inset 0 0 0 1px oklch(40% .08 75 / .45); }
.menu-catalog #no-results { padding:42px 20px; border:1px solid var(--line); border-radius:7px; background:var(--surface); text-align:center; }
.menu-catalog #no-results h3 { color:var(--accent); font:500 30px var(--font-heading); }
.menu-catalog #no-results p { max-width:50ch; margin:10px auto 0; color:var(--muted); font-size:12px; }
.menu-pagination { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:8px; margin-top:4px; padding:7px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }
.menu-pagination button { width:40px; min-height:40px; border:1px solid var(--line); border-radius:4px; background:var(--bg); color:var(--accent); font-size:16px; }
.menu-pagination button:not(:disabled):hover { border-color:var(--accent); background:var(--panel); }
.menu-pagination button:disabled { opacity:.35; cursor:not-allowed; }
.menu-pagination p { margin:0; color:var(--muted); text-align:center; font-size:10px; }
.menu-total { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:49px; margin-top:12px; padding:8px 12px; border:1px solid var(--line); border-radius:6px; background:var(--surface); color:var(--ink); font-size:11px; font-weight:700; }
.menu-total .text-link { min-height:36px; color:var(--accent); font-size:10px; }
.menu-total [data-cart-count] { display:inline; }
.menu-information { padding-top:24px; }
.menu-information .menu-source-note { margin-top:0; color:var(--muted); font-size:10px; }
.menu-information .legend { padding-block:9px; border-bottom:1px solid var(--line); }
.menu-information .legend summary { color:var(--accent); font-size:10px; }
.menu-information .legend p { color:var(--muted); font-size:9px; line-height:1.6; }
@media(max-width:1100px) {
 .menu-shell { grid-template-columns:220px minmax(0,1fr); gap:38px; }
 .menu-aside h2 { font-size:54px; }
 .menu-tools { grid-template-columns:1fr; }
 .menu-tools .filters { justify-content:flex-start; }
}
@media(max-width:820px) {
 .menu-section { padding-block:58px 72px; }
 .menu-shell { display:block; }
 .menu-aside { position:static; display:grid; grid-template-columns:1fr 1fr; column-gap:36px; padding:0 0 36px; }
 .menu-aside .section-note,.menu-aside h2 { grid-column:1; }
 .menu-aside-copy,.menu-aside>.text-link,.menu-service { grid-column:2; }
 .menu-aside-copy { grid-row:1 / span 2; align-self:end; margin-top:0; }
 .menu-aside>.text-link { margin-top:18px; }
 .menu-service { margin-top:20px; }
 .menu-catalog { scroll-margin-top:92px; }
}
@media(max-width:620px) {
 .menu-section { padding-block:42px 60px; }
 .menu-aside { display:block; padding-bottom:30px; }
 .menu-aside .section-note { margin-bottom:16px; }
 .menu-aside h2 { max-width:none; font-size:50px; line-height:.95; }
 .menu-aside-copy { margin-top:20px; font-size:12px; }
 .menu-aside>.text-link { max-width:none; font-size:11px; }
 .menu-service { display:flex; align-items:start; justify-content:space-between; gap:20px; }
 .menu-service p { margin-top:0; text-align:right; }
 .menu-catalog-heading { align-items:start; }
 .menu-catalog-heading h3 { max-width:260px; font-size:30px; }
 .menu-catalog-heading>span { padding-top:5px; font-size:9px; }
 .menu-tools { display:block; padding:6px; }
 .menu-tools .search input { min-height:44px; font-size:16px; }
 .menu-tools .filters { flex-wrap:nowrap; justify-content:flex-start; margin-top:5px; padding-bottom:2px; overflow-x:auto; scrollbar-width:thin; }
 .menu-tools .filters button { flex:none; }
 .menu-category-strip { position:sticky; z-index:3; top:77px; margin-inline:-16px; padding:7px 16px; border-inline:0; border-radius:0; }
 .menu-category-strip .categories { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
 .menu-category-strip .categories a { flex:none; }
 #menu-content { column-count:1; }
 .menu-catalog .dish { padding:17px 14px 13px; }
 .dish-media { min-height:74px; }
 .dish-media img { max-height:64px; }
 .menu-catalog .dish h4 { font-size:14px; }
 .menu-catalog .dish p { font-size:11px; }
 .menu-catalog .variant-label select { min-height:44px; font-size:16px; }
 .menu-total { align-items:flex-start; }
 .menu-total .text-link { text-align:right; }
}
@media(prefers-reduced-motion:reduce) { .menu-catalog .dish { transition:none; } }