/**
 * Extra guest nav layouts — mobile polish + new layout styles.
 * Original scroll / hamburger / accordion base styles remain in style.css.
 */

html {
    overflow-x: hidden;
}

/* --- Global mobile safety --- */
@media (max-width: 768px) {
    main.container {
        max-width: 100%;
        min-width: 0;
        overflow-x: visible;
    }

    body[class*="mobile-nav-layout-"] .menu-grid,
    body.mobile-nav-accordion .accordion-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* --- Sticky chrome: navbar + filters never scroll away (all layouts) --- */
.navbar:not(.guest-navbar) {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

main.container > .controls {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--guest-navbar-height, 110px) !important;
    z-index: 99 !important;
    /* Solid fill — transparent gradient fades leave a see-through gap on Tab E. */
    background: var(--bg-main, #F7F4EF) !important;
    background-image: none !important;
    overflow: visible !important;
}

main.container > .controls::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 20px;
    background: var(--bg-main, #F7F4EF);
    z-index: 0;
    pointer-events: none;
}

main.container > .controls > * {
    position: relative;
    z-index: 1;
}

.accordion-filters-wrap {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: var(--guest-navbar-height, 110px) !important;
    z-index: 98 !important;
    width: 100%;
    padding: 0.35rem 0 0.55rem;
    margin-bottom: 0.35rem;
    background: var(--bg-main, #F7F4EF) !important;
    background-image: none !important;
    overflow: visible !important;
}

.accordion-filters-wrap::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 20px;
    background: var(--bg-main, #F7F4EF);
    z-index: 0;
    pointer-events: none;
}

.category-tabs-bar {
    position: sticky !important;
    top: calc(var(--guest-navbar-height, 110px) + var(--guest-controls-height, 0px)) !important;
    z-index: 97 !important;
}

@media (min-width: 769px) {
    /* ROOT CAUSE (confirmed by auditing every rule touching these
       selectors across style.css, veg-premium.css and this file):
       veg-premium.css has an UNSCOPED rule —
         body.mobile-nav-accordion .filter-scroll-row-container {
             position: relative; overflow: hidden;
         }
       — that applies at every screen width, because `mobile-nav-accordion`
       is on <body> regardless of viewport (mobile layout is hardcoded
       server-side). Every previous attempt tried to make
       `.filter-scroll-row-container` itself sticky and out-fight that
       rule with `!important`, but veg-premium.css loads AFTER this file,
       so any tie on specificity/importance for that exact selector risks
       losing depending on which property is contested, and stacking two
       independently-sticky elements (`.controls` AND the inner container)
       also reserves double the offset space.

       The robust fix: stop trying to make the INNER element
       (`.filter-scroll-row-container`) sticky at all. Make the OUTER
       wrapper `.controls` the one and only sticky element on desktop, and
       force the inner container to stay in normal (`static`) flow. Since
       `.filter-scroll-row-container`'s own position no longer matters,
       the competing veg-premium.css rule becomes harmless. */
    main.container > .controls {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: var(--guest-navbar-height, 72px) !important;
        z-index: 99 !important;
        background: var(--bg-main, #F7F4EF) !important;
        background-image: none !important;
        padding: 0.5rem 0 !important;
        margin: 0 0 0.5rem !important;
        overflow: visible !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    /* `position: sticky` stops working the instant ANY ancestor between
       the sticky element and the viewport has an `overflow` other than
       `visible` — force every ancestor in the chain back to `visible`. */
    main.container,
    .filter-toolbar,
    .filter-toolbar-left {
        overflow: visible !important;
    }

    .accordion-filters-wrap {
        top: var(--guest-navbar-height, 72px) !important;
        padding-top: 0.85rem;
        background: var(--bg-main, #F7F4EF) !important;
        background-image: none !important;
        overflow: visible !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }

    .category-tabs-bar {
        top: calc(var(--guest-navbar-height, 72px) + var(--guest-controls-height, 0px)) !important;
    }

    /* Inner chip row: normal flow, no sticky/relative offset of its own —
       it just rides along inside the sticky `.controls` wrapper above. */
    .filter-scroll-row-container,
    body.mobile-nav-accordion .filter-scroll-row-container {
        position: static !important;
        overflow: visible !important;
        background: transparent !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }
}

/* --- Accordion family (all variants) --- */
@media (max-width: 768px) {
    body.mobile-nav-accordion .accordion-container--scope-mobile,
    body.mobile-nav-accordion .accordion-container--scope-both {
        display: block !important;
        margin-top: 0.5rem;
    }

    .accordion-container--scope-desktop {
        display: none !important;
    }

    body.mobile-nav-accordion .accordion-container--scope-desktop {
        display: none !important;
    }

    body:not(.mobile-nav-accordion) .accordion-container {
        display: none !important;
    }

    body.mobile-nav-accordion #menu-grid {
        display: none !important;
    }

    body.mobile-nav-accordion .controls {
        display: none !important;
    }
}

body.mobile-nav-accordion .accordion-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

body.mobile-nav-accordion .accordion-filter-btn {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    padding: 0.34rem 0.58rem;
    font-size: 0.74rem;
    white-space: nowrap;
}

body.mobile-nav-accordion .accordion-filter-btn .toggle-switch-track {
    width: 28px;
    height: 16px;
}

body.mobile-nav-accordion .accordion-filter-btn .toggle-switch-thumb {
    width: 12px;
    height: 12px;
}

body.mobile-nav-accordion .accordion-filter-btn[data-diet="veg"].active .toggle-switch-thumb,
body.mobile-nav-accordion .accordion-filter-btn[data-diet="non-veg"].active .toggle-switch-thumb {
    transform: translateX(12px);
}

/* Toggle switch (accordion filters) */
.accordion-filters .toggle-switch-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

.accordion-filters .toggle-switch-track {
    width: 28px;
    height: 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9px;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.accordion-filters .toggle-switch-thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.25s ease;
}

.accordion-filters .filter-diet[data-diet="veg"].active .toggle-switch-track {
    background: #4CAF50;
}

.accordion-filters .filter-diet[data-diet="non-veg"].active .toggle-switch-track {
    background: #F44336;
}

.accordion-filters .special-star {
    color: var(--primary-color, #d4af37);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
}

.accordion-body .menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.85rem;
    width: 100%;
}

/* Accordion list rows — mobile */
@media (max-width: 768px) {
    body.mobile-nav-accordion .navbar:not(.guest-navbar) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.6rem 0.8rem !important;
    }

    body.mobile-nav-accordion .navbar:not(.guest-navbar) .logo {
        max-width: 48% !important;
        flex-shrink: 1 !important;
        overflow: hidden !important;
    }

    body.mobile-nav-accordion .navbar:not(.guest-navbar) .header-search-bar {
        order: 3 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.35rem 0 0 !important;
    }

    body.mobile-nav-accordion .accordion-dish-row {
        align-items: flex-start !important;
        padding: 0.8rem 0 !important;
        gap: 0.65rem !important;
    }

    body.mobile-nav-accordion .dish-image-wrapper-swiggy {
        width: 96px !important;
        height: 88px !important;
        margin-bottom: 0 !important;
    }

    body.mobile-nav-accordion .accordion-dish-row .dish-name {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
    }

    body.mobile-nav-accordion .accordion-dish-row .dish-description {
        font-size: 0.78rem !important;
        -webkit-line-clamp: 2;
    }

    .accordion-body .menu-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .accordion-body .menu-grid .menu-card {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        min-height: 0;
    }

    .accordion-body .menu-grid .menu-card .card-image-wrapper {
        width: 96px;
        min-width: 96px;
        height: 96px;
        flex-shrink: 0;
    }

    .accordion-body .menu-grid .menu-card .card-content {
        flex: 1;
        min-width: 0;
        padding: 0.55rem 0.65rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .accordion-body .menu-grid .menu-card .dish-name {
        font-size: 0.92rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .accordion-body .menu-grid .menu-card .dish-desc-short,
    .accordion-body .menu-grid .menu-card .dish-description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-size: 0.78rem;
        color: var(--text-secondary);
        line-height: 1.4;
        margin: 0.2rem 0 0;
    }

    .accordion-body .menu-grid .menu-card .card-bottom {
        margin-top: 0.35rem;
    }

    .accordion-body .menu-grid .menu-card .btn-add-cart {
        padding: 0.35rem 0.55rem;
        font-size: 0.72rem;
    }
}

/* No-image + grouped list rows */
.mobile-nav-layout-accordion_no_image .dish-image-col,
.mobile-nav-layout-accordion_no_image .dish-action-col,
.mobile-nav-layout-grouped_list .dish-image-col,
.mobile-nav-layout-grouped_list .dish-action-col,
.guest-accordion-layout-accordion_no_image .dish-image-col,
.guest-accordion-layout-accordion_no_image .dish-action-col,
.guest-accordion-layout-grouped_list .dish-image-col,
.guest-accordion-layout-grouped_list .dish-action-col,
body.desktop-nav-layout-accordion_no_image .dish-image-col,
body.desktop-nav-layout-accordion_no_image .dish-action-col,
body.desktop-nav-layout-grouped_list .dish-image-col,
body.desktop-nav-layout-grouped_list .dish-action-col,
body.effective-desktop-nav-accordion_no_image .dish-image-col,
body.effective-desktop-nav-accordion_no_image .dish-action-col,
body.effective-desktop-nav-grouped_list .dish-image-col,
body.effective-desktop-nav-grouped_list .dish-action-col {
    width: auto !important;
    flex-shrink: 0 !important;
}

.mobile-nav-layout-accordion_no_image .dish-image-wrapper-swiggy,
.mobile-nav-layout-grouped_list .dish-image-wrapper-swiggy,
.guest-accordion-layout-accordion_no_image .dish-image-wrapper-swiggy,
.guest-accordion-layout-grouped_list .dish-image-wrapper-swiggy,
body.desktop-nav-layout-accordion_no_image .dish-image-wrapper-swiggy,
body.desktop-nav-layout-grouped_list .dish-image-wrapper-swiggy,
body.effective-desktop-nav-accordion_no_image .dish-image-wrapper-swiggy,
body.effective-desktop-nav-grouped_list .dish-image-wrapper-swiggy {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    border: none !important;
}

.mobile-nav-layout-accordion_no_image .dish-image-wrapper-swiggy .no-dish-image,
.mobile-nav-layout-grouped_list .dish-image-wrapper-swiggy .no-dish-image,
.guest-accordion-layout-accordion_no_image .dish-image-wrapper-swiggy .no-dish-image,
.guest-accordion-layout-grouped_list .dish-image-wrapper-swiggy .no-dish-image {
    display: none !important;
}

.mobile-nav-layout-accordion_no_image .accordion-action-special,
.mobile-nav-layout-grouped_list .accordion-action-special,
.guest-accordion-layout-accordion_no_image .accordion-action-special,
.guest-accordion-layout-grouped_list .accordion-action-special {
    font-size: 0.68rem;
    padding: 0.18rem 0.4rem;
    white-space: nowrap;
}

.mobile-nav-layout-accordion_no_image .accordion-action-special--spacer,
.mobile-nav-layout-grouped_list .accordion-action-special--spacer,
.guest-accordion-layout-accordion_no_image .accordion-action-special--spacer,
.guest-accordion-layout-grouped_list .accordion-action-special--spacer {
    visibility: hidden;
    pointer-events: none;
}

.mobile-nav-layout-accordion_no_image .btn-swiggy-add,
.mobile-nav-layout-grouped_list .btn-swiggy-add,
.guest-accordion-layout-accordion_no_image .btn-swiggy-add,
.guest-accordion-layout-grouped_list .btn-swiggy-add {
    min-width: 80px !important;
    width: 80px !important;
    height: 34px !important;
    font-size: 0.75rem !important;
}

.grouped-list-mode .accordion-header {
    pointer-events: none;
    cursor: default;
}

.grouped-list-mode .accordion-arrow {
    display: none;
}

.grouped-list-mode .accordion-item .accordion-body {
    display: block !important;
    height: auto !important;   /* Fix 3: was max-height:none (matched old CSS approach) */
    opacity: 1 !important;
}

/* --- Sidebar: mobile-only when mobile layout is sidebar --- */
@media (max-width: 768px) {
    body.has-guest-sidebar-nav:not(.mobile-nav-sidebar) .guest-sidebar-nav {
        display: none !important;
    }

    body.has-guest-sidebar-nav:not(.mobile-nav-sidebar) .sidebar-layout-container {
        display: block !important;
    }

    .mobile-nav-layout-sidebar .navbar:not(.guest-navbar) {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.65rem 0.85rem;
    }

    .mobile-nav-layout-sidebar .navbar:not(.guest-navbar) .logo {
        flex: 1 1 auto;
        min-width: 0;
        max-width: calc(100% - 52px);
    }

    .mobile-nav-layout-sidebar .navbar:not(.guest-navbar) .header-search-bar {
        order: 3;
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 !important;
    }

    .mobile-nav-layout-sidebar .controls {
        display: none !important;
    }

    .mobile-nav-layout-sidebar .sidebar-layout-container {
        display: flex;
        gap: 0.55rem;
        align-items: flex-start;
        width: 100%;
        min-width: 0;
    }

    .mobile-nav-layout-sidebar .guest-sidebar-nav {
        display: flex;
        flex-direction: column;
        width: 68px;
        flex-shrink: 0;
        gap: 0.4rem;
        position: sticky;
        top: var(--guest-navbar-height, 118px);
        align-self: flex-start;
        max-height: calc(100vh - var(--guest-navbar-height, 118px) - 8px);
        overflow-y: auto;
        scrollbar-width: none;
    }

    .mobile-nav-layout-sidebar .guest-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .mobile-nav-layout-sidebar .sidebar-cat-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        padding: 0.3rem 0.15rem;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.58rem;
        font-weight: 600;
        text-align: center;
    }

    .mobile-nav-layout-sidebar .sidebar-cat-thumb {
        width: 44px;
        height: 44px;
        border-radius: 11px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .mobile-nav-layout-sidebar .sidebar-cat-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .mobile-nav-layout-sidebar .sidebar-cat-name {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.15;
        max-width: 100%;
    }

    .mobile-nav-layout-sidebar .sidebar-cat-btn.active .sidebar-cat-thumb {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px var(--primary-color);
    }

    .mobile-nav-layout-sidebar .sidebar-cat-btn.active .sidebar-cat-name {
        color: var(--primary-color);
    }

    .mobile-nav-layout-sidebar #menu-grid {
        flex: 1;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.5rem !important;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card {
        flex-direction: column !important;
        min-height: 0 !important;
        border-radius: 12px !important;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .card-image-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        height: 96px !important;
        min-height: 96px !important;
        flex-shrink: 0;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .card-content {
        width: 100% !important;
        padding: 0.4rem 0.45rem 0.5rem !important;
        justify-content: flex-start !important;
        gap: 0.25rem;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .dish-desc-short {
        display: none !important;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .dish-name {
        font-size: 0.7rem !important;
        line-height: 1.2;
        margin-bottom: 0.15rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .card-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.3rem !important;
        margin-top: auto;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .price {
        font-size: 0.82rem !important;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .btn-add-cart {
        width: 100%;
        justify-content: center;
        padding: 0.32rem 0.4rem !important;
        font-size: 0.72rem !important;
    }

    .mobile-nav-layout-sidebar #menu-grid .menu-card .category-badge {
        font-size: 0.55rem;
        padding: 0.12rem 0.28rem;
    }

    .mobile-nav-layout-sidebar .guest-sidebar-nav {
        width: 72px;
    }

    .mobile-nav-layout-sidebar .sidebar-cat-thumb {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .mobile-nav-layout-sidebar .sidebar-cat-name {
        font-size: 0.54rem;
        -webkit-line-clamp: 2;
    }

    /* Compact chrome — more room for sidebar + grid */
    .mobile-nav-layout-sidebar .hero {
        display: none;
    }

    .mobile-nav-layout-sidebar .guest-offers-section {
        display: none;
    }
}

/* --- Wrapped pills --- */
body.mobile-nav-layout-pills .filter-scroll-row-container::after {
    display: none;
}

@media (max-width: 768px) {
    body.mobile-nav-layout-pills .filter-scroll-row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 0.38rem;
    }

    body.mobile-nav-layout-pills .filter-btn {
        font-size: 0.78rem;
        padding: 0.38rem 0.65rem;
    }
}

.category-tabs-bar {
    display: none !important;
    gap: 0.35rem;
    padding: 0.35rem 0 0.55rem;
    overflow-x: visible;
    flex-wrap: wrap;
    scrollbar-width: none;
    background: linear-gradient(to bottom, var(--bg-main, #0B101E) 90%, transparent);
}

.category-tabs-bar::-webkit-scrollbar {
    display: none;
}

/* Show tabs only on the viewport where tabs layout is active */
@media (max-width: 768px) {
    body.mobile-nav-layout-tabs .category-tabs-bar {
        display: flex !important;
    }

    body.mobile-nav-layout-tabs .controls {
        display: none !important;
    }

    body.mobile-nav-layout-tabs .category-chips-row,
    body.mobile-nav-layout-tabs .filter-scroll-row .filter-cat {
        display: none !important;
    }
}

@media (min-width: 769px) {
    body.desktop-nav-layout-tabs .category-tabs-bar,
    body.desktop-nav-layout-auto.mobile-nav-layout-tabs .category-tabs-bar {
        display: flex !important;
    }

    body.desktop-nav-layout-tabs .category-chips-row,
    body.desktop-nav-layout-auto.mobile-nav-layout-tabs .category-chips-row,
    body.desktop-nav-layout-tabs .filter-scroll-row .filter-cat {
        display: none !important;
    }

    /* Desktop grid/magazine/sidebar: never show mobile tabs bar */
    body.desktop-nav-layout-grid .category-tabs-bar,
    body.desktop-nav-layout-magazine .category-tabs-bar,
    body.desktop-nav-layout-sidebar .category-tabs-bar,
    body.desktop-nav-layout-scroll .category-tabs-bar,
    body.desktop-nav-layout-pills .category-tabs-bar {
        display: none !important;
    }
}

body.mobile-nav-layout-tabs .category-tabs-bar {
    flex-wrap: wrap;
    overflow-x: visible;
}

.category-tab-btn {
    flex: 0 0 auto;
    padding: 0.36rem 0.7rem;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.category-tab-btn.active {
    background: color-mix(in srgb, var(--primary-color) 14%, transparent);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

@media (max-width: 768px) {
    body.mobile-nav-layout-tabs .filter-scroll-row .filter-cat {
        display: none !important;
    }

    body.mobile-nav-layout-tabs .category-chips-row {
        display: none !important;
    }

    body.mobile-nav-layout-tabs .navbar:not(.guest-navbar) .header-search-bar {
        order: 3 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 0.35rem 0 0 !important;
    }
}

/* --- Two-column grid --- */
@media (max-width: 768px) {
    body.mobile-nav-layout-grid_2col .filter-scroll-row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 0.38rem;
    }

    body.mobile-nav-layout-grid_2col .filter-scroll-row-container::after {
        display: none;
    }

    body.mobile-nav-layout-grid_2col .filter-btn {
        font-size: 0.76rem;
        padding: 0.36rem 0.6rem;
    }

    body.mobile-nav-layout-grid_2col #menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }

    body.mobile-nav-layout-grid_2col #menu-grid .menu-card .card-image-wrapper {
        height: 100px;
    }

    body.mobile-nav-layout-grid_2col #menu-grid .menu-card .card-content {
        padding: 0.5rem 0.55rem 0.6rem;
    }

    body.mobile-nav-layout-grid_2col #menu-grid .menu-card .dish-name {
        font-size: 0.8rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.mobile-nav-layout-grid_2col #menu-grid .menu-card .dish-desc-short {
        display: none;
    }

    body.mobile-nav-layout-grid_2col #menu-grid .menu-card .price {
        font-size: 0.82rem;
    }

    body.mobile-nav-layout-grid_2col #menu-grid .menu-card .btn-add-cart {
        padding: 0.32rem 0.45rem;
        font-size: 0.68rem;
    }

    body.mobile-nav-layout-grid_2col #menu-grid .menu-card .card-bottom {
        gap: 0.25rem;
    }
}

/* --- Shared mobile navbar for grid_2col / pills / tabs (match scroll layout) --- */
@media (max-width: 768px) {
    body.mobile-nav-layout-grid_2col .navbar:not(.guest-navbar),
    body.mobile-nav-layout-pills .navbar:not(.guest-navbar),
    body.mobile-nav-layout-tabs .navbar:not(.guest-navbar) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 0.5rem !important;
        padding: 0.6rem 0.8rem !important;
    }

    body.mobile-nav-layout-grid_2col .navbar:not(.guest-navbar) .logo,
    body.mobile-nav-layout-pills .navbar:not(.guest-navbar) .logo,
    body.mobile-nav-layout-tabs .navbar:not(.guest-navbar) .logo {
        max-width: 100% !important;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.mobile-nav-layout-grid_2col .navbar:not(.guest-navbar) .header-search-bar,
    body.mobile-nav-layout-pills .navbar:not(.guest-navbar) .header-search-bar {
        order: 3 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.35rem 0 0 !important;
    }
}

/* --- Hamburger layout (mobile) — use style.css 3-line icon; only guard overrides here --- */
@media (max-width: 768px) {
    body.mobile-nav-layout-hamburger .mobile-cat-header-trigger-container {
        display: flex !important;
    }

    body.mobile-nav-layout-hamburger .controls {
        display: none !important;
    }

    body.mobile-nav-layout-hamburger .category-tabs-bar {
        display: none !important;
    }
}

/* --- Desktop overrides (769px+) — distinct grid / magazine / sidebar --- */
@media (min-width: 769px) {
    /* Elements marked mobile-only stay hidden on desktop unless a layout override shows them */
    .hide-on-mobile-nav {
        display: none !important;
    }

    /* Tabs / underline tabs: category tabs only — no horizontal controls bar */
    body.desktop-nav-layout-tabs .controls,
    body.desktop-nav-layout-underline_tabs .controls,
    body.desktop-nav-layout-bottom_nav .controls,
    body.desktop-nav-layout-accordion .controls,
    body.desktop-nav-layout-accordion_no_image .controls,
    body.desktop-nav-layout-accordion_grid .controls,
    body.desktop-nav-layout-grouped_list .controls,
    body.desktop-nav-layout-auto.mobile-nav-layout-tabs .controls,
    body.desktop-nav-layout-auto.mobile-nav-layout-underline_tabs .controls,
    body.desktop-nav-layout-auto.mobile-nav-layout-bottom_nav .controls,
    body.effective-desktop-nav-tabs .controls,
    body.effective-desktop-nav-underline_tabs .controls,
    body.effective-desktop-nav-bottom_nav .controls,
    body.effective-desktop-nav-accordion .controls,
    body.effective-desktop-nav-accordion_no_image .controls,
    body.effective-desktop-nav-accordion_grid .controls,
    body.effective-desktop-nav-grouped_list .controls {
        display: none !important;
    }

    /* Sidebar layout: vertical nav only — no horizontal controls bar */
    body.desktop-nav-layout-sidebar .controls,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar .controls,
    body.effective-desktop-nav-sidebar .controls {
        display: none !important;
    }

    /* --- Multi-column grid --- */
    body.desktop-nav-layout-grid #menu-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 1.25rem !important;
    }

    body.desktop-nav-layout-grid.mobile-nav-accordion .accordion-container,
    body.desktop-nav-layout-grid.mobile-nav-accordion .accordion-filters-wrap {
        display: none !important;
    }

    body.desktop-nav-layout-grid.mobile-nav-accordion .controls {
        display: block !important;
    }

    body.desktop-nav-layout-grid .hide-on-mobile-nav {
        display: block !important;
    }

    body.desktop-nav-layout-grid .category-chips-row.hide-on-mobile-nav,
    body.desktop-nav-layout-grid .filter-scroll-row-container.hide-on-mobile-nav {
        display: block !important;
    }

    body.desktop-nav-layout-grid #menu-grid .menu-card .card-image-wrapper {
        height: 200px;
    }

    /* --- Magazine: large 2-column editorial cards --- */
    body.desktop-nav-layout-magazine #menu-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1.75rem !important;
    }

    body.desktop-nav-layout-magazine.mobile-nav-accordion .accordion-container,
    body.desktop-nav-layout-magazine.mobile-nav-accordion .accordion-filters-wrap {
        display: none !important;
    }

    body.desktop-nav-layout-magazine.mobile-nav-accordion .controls {
        display: block !important;
    }

    body.desktop-nav-layout-magazine .hide-on-mobile-nav {
        display: block !important;
    }

    body.desktop-nav-layout-magazine .category-chips-row.hide-on-mobile-nav,
    body.desktop-nav-layout-magazine .filter-scroll-row-container.hide-on-mobile-nav {
        display: block !important;
    }

    body.desktop-nav-layout-magazine #menu-grid .menu-card {
        display: flex;
        flex-direction: column;
    }

    body.desktop-nav-layout-magazine #menu-grid .menu-card .card-image-wrapper {
        height: 260px;
    }

    body.desktop-nav-layout-magazine #menu-grid .menu-card .dish-name {
        font-size: 1.2rem;
    }

    body.desktop-nav-layout-magazine #menu-grid .menu-card .dish-desc-short {
        display: block;
        -webkit-line-clamp: 3;
    }

    body.desktop-nav-layout-magazine #menu-grid .menu-card .price {
        font-size: 1.1rem;
    }

    /* --- Vertical sidebar on desktop --- */
    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-layout-container,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-layout-container,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .sidebar-layout-container {
        display: flex !important;
        gap: 1.25rem;
        align-items: flex-start;
        width: 100%;
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .guest-sidebar-nav,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .guest-sidebar-nav,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .guest-sidebar-nav {
        display: flex !important;
        flex-direction: column;
        width: 130px;
        flex-shrink: 0;
        gap: 0.5rem;
        position: sticky;
        top: var(--guest-navbar-height, 84px);
        align-self: flex-start;
        max-height: calc(100vh - var(--guest-navbar-height, 84px) - 12px);
        overflow-y: auto;
        scrollbar-width: none;
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .guest-sidebar-nav::-webkit-scrollbar,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .guest-sidebar-nav::-webkit-scrollbar,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .guest-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-btn,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-btn,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .sidebar-cat-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        padding: 0.4rem 0.25rem;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 0.72rem;
        font-weight: 600;
        text-align: center;
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-thumb,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-thumb,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .sidebar-cat-thumb {
        width: 56px;
        height: 56px;
        border-radius: 14px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-thumb img,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-thumb img,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .sidebar-cat-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-btn.active .sidebar-cat-thumb,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-btn.active .sidebar-cat-thumb,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .sidebar-cat-btn.active .sidebar-cat-thumb {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 1px var(--primary-color);
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-btn.active .sidebar-cat-name,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav .sidebar-cat-btn.active .sidebar-cat-name,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav .sidebar-cat-btn.active .sidebar-cat-name {
        color: var(--primary-color);
    }

    body.desktop-nav-layout-sidebar.has-guest-sidebar-nav #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.has-guest-sidebar-nav #menu-grid,
    body.effective-desktop-nav-sidebar.has-guest-sidebar-nav #menu-grid {
        flex: 1;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 1rem !important;
    }

    body.desktop-nav-layout-sidebar .category-tabs-bar,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar .category-tabs-bar,
    body.effective-desktop-nav-sidebar .category-tabs-bar {
        display: none !important;
    }

    body.desktop-nav-layout-sidebar.mobile-nav-accordion .accordion-container,
    body.desktop-nav-layout-sidebar.mobile-nav-accordion .accordion-filters-wrap,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.mobile-nav-accordion .accordion-container,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.mobile-nav-accordion .accordion-filters-wrap {
        display: none !important;
    }

    body.desktop-nav-layout-sidebar.mobile-nav-accordion #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-sidebar.mobile-nav-accordion #menu-grid {
        display: grid !important;
    }

    /* Hide sidebar on desktop when only mobile uses sidebar (desktop override not sidebar) */
    body.has-guest-sidebar-nav:not(.desktop-nav-sidebar):not(.mobile-nav-sidebar) .guest-sidebar-nav {
        display: none !important;
    }

    body.has-guest-sidebar-nav:not(.desktop-nav-sidebar):not(.mobile-nav-sidebar) .sidebar-layout-container {
        display: block !important;
    }

    /* --- Desktop pills --- */
    body.desktop-nav-layout-pills .filter-scroll-row {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    body.desktop-nav-layout-pills .filter-scroll-row-container::after {
        display: none;
    }

    /* Three-column compact grid on desktop */
    body.desktop-nav-layout-cards_3col #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-cards_3col #menu-grid,
    body.effective-desktop-nav-cards_3col #menu-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.85rem !important;
    }

    body.desktop-nav-layout-cards_3col #menu-grid .menu-card .card-image-wrapper,
    body.desktop-nav-layout-auto.mobile-nav-layout-cards_3col #menu-grid .menu-card .card-image-wrapper {
        height: 150px;
    }

    body.desktop-nav-layout-cards_3col #menu-grid .menu-card .dish-name {
        font-size: 0.88rem;
    }
}

/* --- Underline category tabs --- */
.category-tabs-bar--underline .category-tab-btn {
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.42rem 0.55rem 0.5rem;
    border-bottom: 2px solid transparent !important;
}

.category-tabs-bar--underline .category-tab-btn.active {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    body.mobile-nav-layout-underline_tabs .category-tabs-bar,
    body.mobile-nav-layout-tabs .category-tabs-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 0.15rem;
        scrollbar-width: none;
    }

    body.mobile-nav-layout-underline_tabs .category-tabs-bar::-webkit-scrollbar,
    body.mobile-nav-layout-tabs .category-tabs-bar::-webkit-scrollbar {
        display: none;
    }

    body.mobile-nav-layout-underline_tabs .controls,
    body.mobile-nav-layout-bottom_nav .controls {
        display: none !important;
    }

    body.mobile-nav-layout-underline_tabs .category-chips-row,
    body.mobile-nav-layout-underline_tabs .filter-scroll-row .filter-cat,
    body.mobile-nav-layout-bottom_nav .category-chips-row,
    body.mobile-nav-layout-bottom_nav .filter-scroll-row .filter-cat {
        display: none !important;
    }
}

@media (min-width: 769px) {
    body.desktop-nav-layout-underline_tabs .category-tabs-bar,
    body.desktop-nav-layout-auto.mobile-nav-layout-underline_tabs .category-tabs-bar,
    body.effective-desktop-nav-underline_tabs .category-tabs-bar {
        display: flex !important;
    }

    body.desktop-nav-layout-underline_tabs .category-tabs-bar,
    body.desktop-nav-layout-auto.mobile-nav-layout-underline_tabs .category-tabs-bar {
        display: flex !important;
    }

    body.desktop-nav-layout-grid .category-tabs-bar,
    body.desktop-nav-layout-magazine .category-tabs-bar,
    body.desktop-nav-layout-sidebar .category-tabs-bar,
    body.desktop-nav-layout-scroll .category-tabs-bar,
    body.desktop-nav-layout-pills .category-tabs-bar,
    body.desktop-nav-layout-cards_3col .category-tabs-bar,
    body.desktop-nav-layout-bottom_nav .category-tabs-bar {
        display: none !important;
    }
}

/* --- Bottom category bar --- */
.guest-bottom-nav {
    display: none;
}

body.has-guest-bottom-nav {
    --guest-bottom-nav-height: 64px;
}

@media (max-width: 768px) {
    body.mobile-nav-bottom-nav .guest-bottom-nav,
    body.has-guest-bottom-nav.mobile-nav-layout-bottom_nav .guest-bottom-nav {
        display: flex !important;
    }

    body.has-guest-bottom-nav.mobile-nav-bottom-nav main.container {
        padding-bottom: calc(var(--guest-bottom-nav-height, 64px) + 0.75rem);
    }

    body.has-guest-bottom-nav:not(.mobile-nav-bottom-nav) .guest-bottom-nav {
        display: none !important;
    }
}

@media (min-width: 769px) {
    body.desktop-nav-bottom-nav .guest-bottom-nav,
    body.has-guest-bottom-nav.desktop-nav-layout-bottom_nav .guest-bottom-nav,
    body.has-guest-bottom-nav.desktop-nav-layout-auto.mobile-nav-layout-bottom_nav .guest-bottom-nav {
        display: flex !important;
        position: sticky;
        top: var(--guest-navbar-height, 72px);
        z-index: 98;
        margin: 0 0 0.5rem;
        padding: 0.35rem 0;
        overflow-x: auto;
        scrollbar-width: none;
        background: linear-gradient(to bottom, var(--bg-main, #0B101E) 90%, transparent);
    }

    body.has-guest-bottom-nav.desktop-nav-bottom-nav main.container,
    body.has-guest-bottom-nav.desktop-nav-layout-bottom_nav main.container {
        padding-bottom: 0;
    }

    body.has-guest-bottom-nav:not(.desktop-nav-bottom-nav):not(.desktop-nav-layout-bottom_nav) .guest-bottom-nav {
        display: none !important;
    }
}

.guest-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    display: flex;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    scrollbar-width: none;
    /* Fallback first for older browsers without color-mix() (e.g. old tablets). */
    background: var(--bg-nav, var(--bg-main, #0f1420));
    background: color-mix(in srgb, var(--bg-nav, var(--bg-main, #0f1420)) 92%, transparent);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.guest-bottom-nav::-webkit-scrollbar {
    display: none;
}

.guest-bottom-nav-btn {
    flex: 0 0 auto;
    min-width: 56px;
    max-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.2rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.58rem;
    font-weight: 600;
    text-align: center;
}

.guest-bottom-nav-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1rem;
}

.guest-bottom-nav-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guest-bottom-nav-label {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
    line-height: 1.1;
}

.guest-bottom-nav-btn.active .guest-bottom-nav-icon {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.guest-bottom-nav-btn.active {
    color: var(--primary-color);
}

body.has-guest-bottom-nav .cart-fab,
body.has-guest-bottom-nav .back-to-top-btn {
    bottom: calc(var(--guest-bottom-nav-height, 64px) + 0.75rem) !important;
}

/* --- Three-column compact grid (mobile) --- */
@media (max-width: 768px) {
    body.mobile-nav-layout-cards_3col .filter-scroll-row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 0.35rem;
    }

    body.mobile-nav-layout-cards_3col .filter-scroll-row-container::after {
        display: none;
    }

    body.mobile-nav-layout-cards_3col #menu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0.45rem !important;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card {
        flex-direction: column !important;
        min-height: 0 !important;
        border-radius: 10px !important;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card .card-image-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        height: 78px !important;
        min-height: 78px !important;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card .card-content {
        width: 100% !important;
        padding: 0.35rem 0.4rem 0.45rem !important;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card .dish-desc-short {
        display: none !important;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card .dish-name {
        font-size: 0.65rem !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card .price {
        font-size: 0.72rem !important;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card .btn-add-cart {
        padding: 0.28rem 0.35rem !important;
        font-size: 0.65rem !important;
        width: 100%;
        justify-content: center;
    }

    body.mobile-nav-layout-cards_3col #menu-grid .menu-card .card-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.25rem !important;
    }
}

/* --- Desktop polish when mobile-style layouts are mirrored on large screens --- */
@media (min-width: 769px) {
    .accordion-container--scope-mobile {
        display: none !important;
    }

    body.mobile-nav-accordion .accordion-container--scope-mobile {
        display: none !important;
    }

    body.desktop-nav-accordion #menu-grid {
        display: none !important;
    }

    body.desktop-nav-accordion .accordion-container--scope-desktop,
    body.desktop-nav-accordion .accordion-container--scope-both {
        display: block !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.desktop-nav-accordion .controls,
    body.desktop-nav-accordion .category-tabs-bar,
    body.effective-desktop-nav-accordion .controls,
    body.effective-desktop-nav-accordion_no_image .controls,
    body.effective-desktop-nav-accordion_grid .controls,
    body.effective-desktop-nav-grouped_list .controls {
        display: none !important;
    }

    body.mobile-nav-accordion:not(.desktop-nav-accordion) .accordion-container {
        display: none !important;
    }

    body.mobile-nav-accordion:not(.desktop-nav-accordion) #menu-grid {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 1.25rem !important;
    }

    body.desktop-nav-accordion .guest-accordion-layout-accordion_grid .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
        gap: 1rem !important;
    }

    body.effective-desktop-nav-tabs #menu-grid,
    body.effective-desktop-nav-underline_tabs #menu-grid,
    body.effective-desktop-nav-scroll #menu-grid,
    body.effective-desktop-nav-pills #menu-grid,
    body.effective-desktop-nav-hamburger #menu-grid,
    body.effective-desktop-nav-grid_2col #menu-grid,
    body.effective-desktop-nav-bottom_nav #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-tabs #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-underline_tabs #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-scroll #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-pills #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-hamburger #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-grid_2col #menu-grid,
    body.desktop-nav-layout-auto.mobile-nav-layout-bottom_nav #menu-grid,
    body.desktop-nav-layout-scroll #menu-grid,
    body.desktop-nav-layout-pills #menu-grid,
    body.desktop-nav-layout-hamburger #menu-grid {
        display: grid !important;
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 1.25rem !important;
    }

    body.effective-desktop-nav-tabs #menu-grid .menu-card,
    body.effective-desktop-nav-underline_tabs #menu-grid .menu-card,
    body.effective-desktop-nav-scroll #menu-grid .menu-card,
    body.effective-desktop-nav-pills #menu-grid .menu-card,
    body.effective-desktop-nav-hamburger #menu-grid .menu-card,
    body.effective-desktop-nav-grid_2col #menu-grid .menu-card,
    body.effective-desktop-nav-bottom_nav #menu-grid .menu-card,
    body.desktop-nav-layout-auto[class*="mobile-nav-layout-"] #menu-grid .menu-card,
    body.mobile-nav-accordion #menu-grid .menu-card {
        flex-direction: column !important;
        min-height: 0 !important;
        border-radius: var(--radius-lg, 14px) !important;
    }

    body.effective-desktop-nav-tabs #menu-grid .menu-card .card-image-wrapper,
    body.effective-desktop-nav-underline_tabs #menu-grid .menu-card .card-image-wrapper,
    body.effective-desktop-nav-scroll #menu-grid .menu-card .card-image-wrapper,
    body.effective-desktop-nav-pills #menu-grid .menu-card .card-image-wrapper,
    body.effective-desktop-nav-hamburger #menu-grid .menu-card .card-image-wrapper,
    body.effective-desktop-nav-grid_2col #menu-grid .menu-card .card-image-wrapper,
    body.effective-desktop-nav-bottom_nav #menu-grid .menu-card .card-image-wrapper,
    body.desktop-nav-layout-auto[class*="mobile-nav-layout-"] #menu-grid .menu-card .card-image-wrapper,
    body.mobile-nav-accordion #menu-grid .menu-card .card-image-wrapper {
        width: 100% !important;
        min-width: 0 !important;
        height: 200px !important;
        min-height: 180px !important;
    }

    body.effective-desktop-nav-tabs #menu-grid .menu-card .card-content,
    body.effective-desktop-nav-underline_tabs #menu-grid .menu-card .card-content,
    body.effective-desktop-nav-scroll #menu-grid .menu-card .card-content,
    body.effective-desktop-nav-pills #menu-grid .menu-card .card-content,
    body.effective-desktop-nav-hamburger #menu-grid .menu-card .card-content,
    body.effective-desktop-nav-grid_2col #menu-grid .menu-card .card-content,
    body.effective-desktop-nav-bottom_nav #menu-grid .menu-card .card-content,
    body.desktop-nav-layout-auto[class*="mobile-nav-layout-"] #menu-grid .menu-card .card-content,
    body.mobile-nav-accordion #menu-grid .menu-card .card-content {
        width: 100% !important;
        padding: 1rem !important;
        overflow: visible !important;
    }

    body.effective-desktop-nav-tabs #menu-grid .menu-card .dish-desc-short,
    body.effective-desktop-nav-underline_tabs #menu-grid .menu-card .dish-desc-short,
    body.effective-desktop-nav-scroll #menu-grid .menu-card .dish-desc-short,
    body.effective-desktop-nav-pills #menu-grid .menu-card .dish-desc-short,
    body.effective-desktop-nav-hamburger #menu-grid .menu-card .dish-desc-short,
    body.effective-desktop-nav-grid_2col #menu-grid .menu-card .dish-desc-short,
    body.effective-desktop-nav-bottom_nav #menu-grid .menu-card .dish-desc-short,
    body.desktop-nav-layout-auto[class*="mobile-nav-layout-"] #menu-grid .menu-card .dish-desc-short,
    body.mobile-nav-accordion #menu-grid .menu-card .dish-desc-short {
        display: block !important;
    }

    body.effective-desktop-nav-scroll .controls,
    body.effective-desktop-nav-pills .controls,
    body.effective-desktop-nav-hamburger .controls,
    body.desktop-nav-layout-scroll .controls,
    body.desktop-nav-layout-pills .controls,
    body.desktop-nav-layout-hamburger .controls {
        display: flex !important;
    }

    body.effective-desktop-nav-scroll .hide-on-mobile-nav,
    body.effective-desktop-nav-pills .hide-on-mobile-nav,
    body.effective-desktop-nav-hamburger .hide-on-mobile-nav,
    body.desktop-nav-layout-scroll .hide-on-mobile-nav,
    body.desktop-nav-layout-pills .hide-on-mobile-nav,
    body.desktop-nav-layout-hamburger .hide-on-mobile-nav {
        display: block !important;
    }

    body.effective-desktop-nav-scroll .filter-scroll-row-container.hide-on-mobile-nav,
    body.effective-desktop-nav-pills .filter-scroll-row-container.hide-on-mobile-nav,
    body.effective-desktop-nav-hamburger .filter-scroll-row-container.hide-on-mobile-nav,
    body.desktop-nav-layout-scroll .filter-scroll-row-container.hide-on-mobile-nav,
    body.desktop-nav-layout-pills .filter-scroll-row-container.hide-on-mobile-nav,
    body.desktop-nav-layout-hamburger .filter-scroll-row-container.hide-on-mobile-nav,
    body.effective-desktop-nav-scroll .category-chips-row.hide-on-mobile-nav,
    body.effective-desktop-nav-pills .category-chips-row.hide-on-mobile-nav,
    body.effective-desktop-nav-hamburger .category-chips-row.hide-on-mobile-nav,
    body.desktop-nav-layout-scroll .category-chips-row.hide-on-mobile-nav,
    body.desktop-nav-layout-pills .category-chips-row.hide-on-mobile-nav,
    body.desktop-nav-layout-hamburger .category-chips-row.hide-on-mobile-nav {
        display: block !important;
    }
}