header{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(248,244,238,.92);
    backdrop-filter:blur(18px);
    border-bottom:1px solid var(--border);
}
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.brand-group{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:800;
    letter-spacing:0;
}
.brand img{
    width:36px;
    height:36px;
    border-radius:10px;
}
.mobile-menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    color:var(--ink);
    box-shadow:var(--shadow);
    place-items:center;
    cursor:pointer;
    flex-shrink:0;
}
.mobile-menu-toggle i{
    font-size:1.2rem;
}
.city-picker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:999px;
    background:white;
    box-shadow:var(--shadow);
    color:var(--muted);
    font-size:14px;
    white-space:nowrap;
}
.city-picker i{
    color:var(--teal-d);
}
.city-picker select{
    border:0;
    outline:0;
    background:transparent;
    color:var(--ink);
    font:inherit;
    min-width:120px;
    max-width:180px;
}
nav{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:14px;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:0 16px;
    border-radius:12px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--ink);
    font-weight:700;
}
.btn.primary{
    background:var(--teal);
    border-color:transparent;
    color:#fff;
}
.nav-dropdown{
    position:relative;
    display:inline-flex;
    align-items:center;
}
.nav-dropdown-trigger{
    border:0;
    background:transparent;
    color:inherit;
    font:inherit;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:0;
    font-weight:600;
}
.nav-dropdown-trigger i{
    font-size:.9rem;
    transition:.2s ease;
}
.nav-dropdown:hover .nav-dropdown-trigger i,
.nav-dropdown:focus-within .nav-dropdown-trigger i{
    transform:rotate(180deg);
}
.nav-dropdown-menu{
    position:absolute;
    top:calc(100% - 1px);
    left:50%;
    width:290px;
    transform:translateX(-50%) translateY(10px);
    padding:22px 10px 10px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 22px 55px rgba(0,0,0,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.2s ease;
    z-index:25;
}
.nav-dropdown-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-16px;
    height:16px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 13px;
    border-radius:12px;
    color:var(--ink);
    font-weight:700;
    font-size:.9rem;
}
.nav-dropdown-menu a:hover{
    background:rgba(0,184,156,.08);
    color:var(--teal-d);
}
.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    flex-shrink:0;
}
.mobile-drawer-backdrop,
.mobile-drawer{
    display:none;
}
.mobile-drawer{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(360px,88vw);
    z-index:80;
    background:#fff;
    border-right:1px solid var(--border);
    box-shadow:24px 0 70px rgba(17,19,24,.22);
    transform:translateX(-105%);
    transition:transform .22s ease;
    overflow-y:auto;
}
.mobile-drawer-backdrop{
    position:fixed;
    inset:0;
    z-index:70;
    background:rgba(17,19,24,.38);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
}
.mobile-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px;
    border-bottom:1px solid var(--border);
}
.mobile-drawer-close{
    width:40px;
    height:40px;
    border-radius:14px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--ink);
    display:grid;
    place-items:center;
    cursor:pointer;
}
.drawer-location{
    margin:14px 18px 8px;
    padding:14px;
    border-radius:18px;
    background:var(--teal-l);
    color:var(--teal-d);
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
}
.drawer-section{
    padding:10px 18px 4px;
}
.drawer-section-title{
    display:block;
    margin:12px 0 8px;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.drawer-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:48px;
    padding:0 14px;
    border-radius:14px;
    color:var(--ink);
    font-weight:800;
}
.drawer-link:hover{
    background:rgba(0,184,156,.08);
    color:var(--teal-d);
}
.drawer-actions{
    display:grid;
    gap:10px;
    padding:18px;
}
body.mobile-menu-open{
    overflow:hidden;
}
body.mobile-menu-open .mobile-drawer{
    transform:translateX(0);
}
body.mobile-menu-open .mobile-drawer-backdrop{
    opacity:1;
    pointer-events:auto;
}
@media (max-width: 980px){
    nav{
        display:none;
    }
    .mobile-menu-toggle{
        display:grid;
    }
    .mobile-drawer,
    .mobile-drawer-backdrop{
        display:block;
    }
}
@media (max-width: 620px){
    .wrap{
        padding:12px;
    }
    header{
        border-bottom:0;
        box-shadow:0 8px 28px rgba(17,19,24,.08);
    }
    .topbar{
        display:grid;
        grid-template-columns:42px minmax(0,1fr) auto;
        align-items:center;
        gap:10px;
        padding-top:10px;
        padding-bottom:10px;
    }
    .mobile-menu-toggle{
        grid-column:1;
        grid-row:1;
    }
    .brand-group{
        grid-column:2;
        grid-row:1;
        min-width:0;
    }
    .header-actions{
        grid-column:3;
        grid-row:1;
    }
    .brand{
        gap:9px;
        min-width:0;
    }
    .brand img{
        width:34px;
        height:34px;
        border-radius:11px;
    }
    .brand span{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        font-size:15px;
    }
    .header-actions .btn{
        min-height:38px;
        padding:0 12px;
        border-radius:13px;
        font-size:13px;
        white-space:nowrap;
    }
    .city-picker{
        grid-column:1 / -1;
        grid-row:2;
        width:100%;
        min-height:44px;
        padding:0 12px;
        border-radius:15px;
        box-shadow:none;
        background:rgba(255,255,255,.86);
    }
    .city-picker select{
        flex:1;
        min-width:0;
        max-width:none;
        font-weight:800;
        font-size:14px;
    }
}