#menu-dialog.menu-browser { overflow: hidden; }
.menu-browser .menu-viewport { flex: 1; min-height: 0; overflow: hidden; }
.menu-browser .menu-screen {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
    padding: 10px 22px max(24px, env(safe-area-inset-bottom));
    scrollbar-width: thin;
}
.menu-browser [hidden] { display: none !important; }
.menu-browser .menu-back { grid-column: 1; grid-row: 1; width: 44px; height: 44px; }
.menu-back svg { transform: rotate(180deg); width: 23px; height: 23px; }
.menu-browser nav .menu-root-link {
    min-height: 68px; padding: 16px 0; gap: 16px; font-size: 17px;
    text-align: start; line-height: 1.5;
}
.menu-browser nav .menu-root-branch { min-height: 90px; font-size: 21px; font-weight: 650; }
.menu-link-arrow { display: grid; place-items: center; flex: none; width: 34px; height: 34px; }
.menu-root-branch .menu-link-arrow { border: 1px solid #e1e5e5; border-radius: 50%; }
.menu-link-arrow svg, .menu-favorites > svg { width: 21px; height: 21px; }
.menu-browser nav .menu-favorites { margin-top: 24px; border-bottom: 0; font-size: 15px; }
.menu-category-list { list-style: none; margin: 0; padding: 0; }
.menu-browser nav .menu-category {
    display: grid; grid-template-columns: var(--menu-image-size, 76px) minmax(0, 1fr) 20px;
    justify-content: initial; gap: 18px; padding: 12px 0; text-align: start;
    border-bottom: 1px solid #ecefef;
}
.menu-category-photo {
    width: var(--menu-image-size, 76px); height: var(--menu-image-size, 76px);
    border-radius: var(--menu-image-radius, 20px); background: var(--menu-image-bg, #f4f6f7);
    overflow: hidden; display: grid; place-items: center;
}
.menu-category-photo img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.menu-category-swatch { width: 44%; height: 44%; border-radius: 50%; border: 1px solid #0001; }
.menu-category-title { font-size: 18px; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
.menu-category-arrow { width: 19px; height: 19px; stroke-width: 1.4; }
.menu-group-title { margin: 16px 0 4px; color: #000; font-size: 13px; font-weight: 500; }
.menu-category-list + .menu-group-title { margin-top: 32px; }
.menu-browser :is(a, button):focus-visible { outline: 2px solid var(--green); outline-offset: -2px; border-radius: 4px; }
.menu-browser .menu-screen-enter { animation: menu-screen-in 200ms ease-out both; }
.menu-browser .menu-screen-return { animation: menu-screen-back 180ms ease-out both; }
@keyframes menu-screen-in { from { opacity: .2; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes menu-screen-back { from { opacity: .2; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 359px) {
    .menu-browser .menu-screen { padding-inline: 16px; }
    .menu-browser nav .menu-category { gap: 12px; }
    .menu-category-title { font-size: 16px; }
}
@media (min-width: 1200px) {
    .menu-browser > .dialog-header { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; padding: 12px; }
    .menu-browser > .dialog-header h2 { grid-column: 2; grid-row: 1; text-align: center; }
    .menu-browser > .dialog-header [data-close] { grid-column: 3; grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .menu-browser .menu-screen { animation: none; }
}