/* Restaurant nav templates. #menuNav carries one template per device:
   data-nav-tpl-desktop / data-nav-tpl-tablet / data-nav-tpl-mobile
   Values: studio | terrace
*/

#menuNav[data-nav-tpl-desktop] .nav-search-brand,
#menuNav[data-nav-tpl-tablet] .nav-search-brand,
#menuNav[data-nav-tpl-mobile] .nav-search-brand,
#menuNav[data-nav-tpl-desktop] .nav-search-actions,
#menuNav[data-nav-tpl-tablet] .nav-search-actions,
#menuNav[data-nav-tpl-mobile] .nav-search-actions,
#menuNav[data-nav-tpl-desktop] .nav-search-toolbar,
#menuNav[data-nav-tpl-tablet] .nav-search-toolbar,
#menuNav[data-nav-tpl-mobile] .nav-search-toolbar {
    grid-area: unset;
}

/* ══════════════ Desktop ══════════════ */
@media (min-width: 1025px) {
    #menuNav[data-nav-tpl-desktop] .nav-search-brand { grid-area: brand !important; }
    #menuNav[data-nav-tpl-desktop] .nav-search-actions { grid-area: actions !important; }
    #menuNav[data-nav-tpl-desktop] .nav-search-toolbar { grid-area: search !important; }
    #menuNav[data-nav-tpl-desktop] .nav-search-brand__name { display: block !important; }

    #menuNav[data-nav-tpl-desktop="studio"] .nav-search-row {
        display: grid !important;
        grid-template-columns: auto minmax(18rem, 42rem) auto !important;
        grid-template-areas: "brand search actions" !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    #menuNav[data-nav-tpl-desktop="terrace"] .nav-search-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand actions"
            "search search" !important;
        justify-content: stretch !important;
        gap: .55rem .75rem !important;
    }
    #menuNav[data-nav-tpl-desktop="terrace"] .nav-search-toolbar {
        max-width: none !important;
        width: 100% !important;
    }

    #menuNav[data-nav-tpl-desktop="studio"] {
        background: rgba(255,255,255,.96) !important;
        border-bottom: 1px solid #e8edf5 !important;
        box-shadow: 0 8px 28px rgba(15, 23, 42, .05) !important;
    }
    #menuNav[data-nav-tpl-desktop="studio"] .nav-search-actions {
        background: #f8fafc !important;
        border: 1px solid #eef2f7 !important;
        border-radius: .85rem !important;
        padding: .18rem !important;
    }
    #menuNav[data-nav-tpl-desktop="studio"] #menuSearch {
        background: #f8fafc !important;
        border-radius: .9rem !important;
    }

    #menuNav[data-nav-tpl-desktop="terrace"] .nav-search-brand .nav-brand__logo,
    #menuNav[data-nav-tpl-desktop="terrace"] .nav-search-brand .nav-brand__mark {
        border-radius: 50% !important;
    }
}

#menuNav[data-nav-tpl-desktop="terrace"],
#menuNav[data-nav-tpl-tablet="terrace"],
#menuNav[data-nav-tpl-mobile="terrace"] {
    background: #fff !important;
    border-bottom: 1px solid #ece7e2 !important;
    border-top: none !important;
    box-shadow: 0 1px 0 rgba(63, 42, 29, .04) !important;
}
#menuNav[data-nav-tpl-desktop="terrace"] .nav-search-brand,
#menuNav[data-nav-tpl-desktop="terrace"] .nav-search-brand__name,
#menuNav[data-nav-tpl-tablet="terrace"] .nav-search-brand,
#menuNav[data-nav-tpl-tablet="terrace"] .nav-search-brand__name,
#menuNav[data-nav-tpl-mobile="terrace"] .nav-search-brand,
#menuNav[data-nav-tpl-mobile="terrace"] .nav-search-brand__name {
    color: #2b241f !important;
}
#menuNav[data-nav-tpl-desktop="terrace"] .nav-search-actions,
#menuNav[data-nav-tpl-tablet="terrace"] .nav-search-actions,
#menuNav[data-nav-tpl-mobile="terrace"] .nav-search-actions {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    gap: .4rem !important;
}
#menuNav[data-nav-tpl-desktop="terrace"] .nav-page-btn,
#menuNav[data-nav-tpl-desktop="terrace"] .nav-filter-btn--toolbar,
#menuNav[data-nav-tpl-tablet="terrace"] .nav-page-btn,
#menuNav[data-nav-tpl-tablet="terrace"] .nav-filter-btn--toolbar,
#menuNav[data-nav-tpl-mobile="terrace"] .nav-page-btn,
#menuNav[data-nav-tpl-mobile="terrace"] .nav-filter-btn--toolbar {
    border: 1px solid #e8e2dc !important;
    background: #fff !important;
    border-radius: .7rem !important;
    color: #5c4a3d !important;
}
#menuNav[data-nav-tpl-desktop="terrace"] .nav-lang a,
#menuNav[data-nav-tpl-tablet="terrace"] .nav-lang a,
#menuNav[data-nav-tpl-mobile="terrace"] .nav-lang a {
    border: 1px solid #e8e2dc !important;
    background: #fff !important;
    border-radius: .7rem !important;
    color: #2b241f !important;
}
#menuNav[data-nav-tpl-desktop="terrace"] .nav-page-btn--primary,
#menuNav[data-nav-tpl-tablet="terrace"] .nav-page-btn--primary,
#menuNav[data-nav-tpl-mobile="terrace"] .nav-page-btn--primary {
    background: color-mix(in srgb, var(--brand) 18%, #f3e6d8) !important;
    border-color: transparent !important;
    color: var(--brand) !important;
}
#menuNav[data-nav-tpl-desktop="terrace"] #menuSearch,
#menuNav[data-nav-tpl-tablet="terrace"] #menuSearch,
#menuNav[data-nav-tpl-mobile="terrace"] #menuSearch {
    background: #faf7f4 !important;
    border-color: #e8e2dc !important;
    border-radius: 999px !important;
}

/* ══════════════ iPad / tablet ══════════════ */
@media (min-width: 641px) and (max-width: 1024px) {
    #menuNav[data-nav-tpl-tablet] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    #menuNav[data-nav-tpl-tablet] .nav-search-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand actions"
            "search search" !important;
        align-items: center !important;
        gap: .55rem !important;
    }
    #menuNav[data-nav-tpl-tablet] .nav-search-brand { grid-area: brand !important; }
    #menuNav[data-nav-tpl-tablet] .nav-search-actions { grid-area: actions !important; }
    #menuNav[data-nav-tpl-tablet] .nav-search-toolbar {
        grid-area: search !important;
        width: 100% !important;
        max-width: none !important;
    }
    #menuNav[data-nav-tpl-tablet] .nav-search-brand__name { display: block !important; }

    #menuNav[data-nav-tpl-tablet="studio"] {
        background: #fff !important;
        border-bottom: 1px solid #e8edf5 !important;
        box-shadow: 0 2px 16px rgba(15, 23, 42, .07) !important;
    }
    #menuNav[data-nav-tpl-tablet="studio"] .nav-search-actions {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #menuNav[data-nav-tpl-tablet="terrace"] .nav-search-brand .nav-brand__logo,
    #menuNav[data-nav-tpl-tablet="terrace"] .nav-search-brand .nav-brand__mark {
        border-radius: 50% !important;
    }
}

/* ══════════════ Mobile ══════════════ */
@media (max-width: 640px) {
    #menuNav[data-nav-tpl-mobile] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    #menuNav[data-nav-tpl-mobile] .nav-search-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "brand actions"
            "search search" !important;
        align-items: center !important;
        gap: .45rem !important;
    }
    #menuNav[data-nav-tpl-mobile] .nav-search-brand { grid-area: brand !important; }
    #menuNav[data-nav-tpl-mobile] .nav-search-actions { grid-area: actions !important; }
    #menuNav[data-nav-tpl-mobile] .nav-search-toolbar {
        grid-area: search !important;
        width: 100% !important;
        max-width: none !important;
    }
    #menuNav[data-nav-tpl-mobile] .nav-search-brand__name { display: block !important; }

    #menuNav[data-nav-tpl-mobile="studio"] {
        background: #fff !important;
        border-bottom: 1px solid #e8edf5 !important;
        box-shadow: 0 2px 16px rgba(15, 23, 42, .07) !important;
    }
    #menuNav[data-nav-tpl-mobile="studio"] .nav-search-actions {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    #menuNav[data-nav-tpl-mobile="terrace"] .nav-search-brand .nav-brand__logo,
    #menuNav[data-nav-tpl-mobile="terrace"] .nav-search-brand .nav-brand__mark {
        border-radius: 50% !important;
    }
}