#mob-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.6);
    z-index: 9998;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
#mob-overlay.open { display: block; }

#mob-drawer {
    position: fixed;
    top: 0; left: 0;
    width: min(340px, 90vw);
    height: 100dvh;
    background: #fff;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 8px 0 32px rgba(0,0,0,.22);
}
#mob-drawer.open { transform: translateX(0); }

/* ── Header: white bg, black text ── */
.mob-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1rem .9rem 1.1rem;
    background: #ffffff;
    border-bottom: 2px solid #e2e8f0;
    flex-shrink: 0;
}
.mob-head-logo img {
    width: 36px; height: 36px;
    object-fit: contain;
    border-radius: 6px;
    background: #f1f5f9;
    padding: 3px;
}
.mob-head-title {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: .02em;
}
.mob-head-close {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    color: #1e293b;
    transition: background .15s, border-color .15s, color .15s;
    flex-shrink: 0;
}
.mob-head-close svg { width: 18px; height: 18px; }
.mob-head-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* ── Scrollable Body ── */
.mob-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}

.mob-list {
    list-style: none;
    margin: 0; padding: 0;
    flex: 1;
}
.mob-item {
    border-bottom: 1px solid #e2e8f0;
}

.mob-row {
    display: flex;
    align-items: stretch;
}
.mob-row-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .9rem 1.1rem;
    color: #1e293b;
    font-size: .93rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mob-row-link:hover, .mob-row-link:focus-visible {
    background: #f0f7ff;
    color: #1d4ed8;
}
.mob-row-icon { width: 17px; height: 17px; flex-shrink: 0; color: #64748b; }

.mob-row-link--brands { color: #1d4ed8; }
.mob-row-link--brands .mob-row-icon { color: #1d4ed8; }

.mob-row-link--deals { color: #dc2626; }
.mob-row-link--deals .mob-row-icon { color: #dc2626; }
.mob-deals-badge {
    margin-left: auto;
    font-size: .65rem;
    font-weight: 800;
    background: #dc2626;
    color: #fff;
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: .05em;
}

.mob-row-chevron {
    display: flex; align-items: center; justify-content: center;
    width: 48px; flex-shrink: 0;
    background: none;
    border: none;
    border-left: 1px solid #e2e8f0;
    cursor: pointer;
    color: #94a3b8;
    transition: background .15s, color .15s;
}
.mob-row-chevron:hover { background: #f1f5f9; color: #1d4ed8; }

.mob-chev { width: 18px; height: 18px; transition: transform .25s ease; }
.mob-chev--open { transform: rotate(180deg); }
.mob-chev--sm { width: 15px; height: 15px; }

/* ── Brand Cards Panel ── */
.mob-brands-panel {
    background: #111827;
    padding: .9rem 1rem 1rem;
    border-top: 2px solid #1d4ed8;
}
.mob-brands-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    margin-bottom: .75rem;
}
.mob-brand-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    background: #1f2937;
    border-radius: 10px;
    padding: .6rem .4rem .5rem;
    text-decoration: none;
    transition: background .18s, transform .18s;
    border: 1px solid #374151;
}
.mob-brand-card:hover { background: #374151; transform: translateY(-2px); }
.mob-brand-img-wrap {
    width: 100%;
    height: 38px;
    display: flex; align-items: center; justify-content: center;
}
.mob-brand-img-wrap img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: brightness(1.1);
}
.mob-brand-name {
    font-size: .65rem;
    font-weight: 600;
    color: #cbd5e1;
    text-align: center;
    letter-spacing: .02em;
}
.mob-brands-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 100%;
    padding: .65rem 1rem;
    background: #1d4ed8;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: background .15s;
    letter-spacing: .02em;
}
.mob-brands-all-btn svg { width: 16px; height: 16px; }
.mob-brands-all-btn:hover { background: #1e40af; }

/* ── Level 2 Sub-menu ── */
.mob-sub {
    list-style: none;
    margin: 0; padding: 0;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.mob-sub-item { border-bottom: 1px solid #eef2f7; }
.mob-sub-link {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem 1rem .65rem 1.4rem;
    color: #334155;
    font-size: .87rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mob-sub-link:hover { background: #eff6ff; color: #1d4ed8; }
.mob-sub-link svg { width: 13px; height: 13px; flex-shrink: 0; }

.mob-sub-item--all { background: #eff6ff; }
.mob-sub-link--all {
    color: #1d4ed8;
    font-weight: 700;
    font-size: .83rem;
    letter-spacing: .01em;
}
.mob-sub-link--all:hover { background: #dbeafe; }

.mob-deep-row { display: flex; align-items: stretch; }
.mob-sub-link--parent {
    flex: 1;
    font-weight: 700;
    color: #1e293b;
    padding-left: 1.4rem;
}
.mob-deep-chevron {
    display: flex; align-items: center; justify-content: center;
    width: 40px; flex-shrink: 0;
    background: none; border: none;
    border-left: 1px solid #e2e8f0;
    cursor: pointer; color: #94a3b8;
    transition: background .15s;
}
.mob-deep-chevron:hover { background: #f1f5f9; color: #1d4ed8; }

/* ── Level 3 Deep Sub ── */
.mob-deep {
    list-style: none;
    margin: 0; padding: 0;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
}
.mob-deep li { border-bottom: 1px solid #e8edf4; }
.mob-deep-link {
    display: block;
    padding: .55rem 1rem .55rem 2.2rem;
    color: #475569;
    font-size: .83rem;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.mob-deep-link:hover { background: #dbeafe; color: #1d4ed8; }