/* ══════════════════════════════════════════════════════════
   CSS VARIABLES (keep in sync with your theme)
══════════════════════════════════════════════════════════ */
:root {
    --navy: #0f1923;
    --nav: #1a2532;
    --white: #FFFFFF;
    --orange: #e47911;
    --cta: #e47911;
    --cta-h: #e47911;
    --rad: 8px;
    --tr: 0.2s ease;
    --tx-dark: #1a1a1a;
    --drawer-w: 300px;
}

/* ══════════════════════════════════════════════════════════
   TOP BAR  (desktop unchanged — hide on mobile)
══════════════════════════════════════════════════════════ */
#topbar {
    width: 100%;
    background: #0f1923;
    border-bottom: 1px solid #1e2d3d;
    padding: 5px 0;
    font-size: 12px;
    position: relative;
    z-index: 999999;
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.topbar-email {
    color: #8fa3b1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

.topbar-email i {
    color: var(--orange);
}

.topbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
}

.topbar-link-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ccc;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: 11px;
    white-space: nowrap;
    transition: color .2s, border-color .2s;
    text-decoration: none;
}

.topbar-link-item:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
}

.topbar-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #ccc;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: color .2s, border-color .2s, background .2s;
}

.topbar-pill:hover,
.topbar-pill:focus {
    color: #fff;
    border-color: rgba(255, 255, 255, .15);
    background: rgba(255, 255, 255, .05);
    outline: none;
}

.topbar-pill:hover .topbar-drop,
.topbar-pill:focus-within .topbar-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.pill-arrow {
    font-size: 9px;
    opacity: .6;
    transition: transform .2s;
}

.topbar-pill:hover .pill-arrow {
    transform: rotate(180deg);
}

.flag-img {
    width: 16px;
    height: 11px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.topbar-drop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 150px;
    background: #1a2532;
    border: 1px solid #2a3c4e;
    border-radius: 10px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 2000;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

.drop-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    width: 100%;
    background: transparent;
    border: none;
    text-align: start;
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    text-decoration: none;
}

.drop-item:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.drop-item.drop-active {
    color: var(--cta);
    font-weight: 600;
}

.drop-item.drop-danger:hover {
    background: rgba(220, 53, 69, .15);
    color: #ff6b7a;
}

.drop-check {
    margin-inline-start: auto;
    color: var(--cta);
    font-size: 11px;
}

.drop-divider {
    border-color: #2a3c4e;
    margin: 4px 0;
}


/* ══════════════════════════════════════════════════════════
   MAIN HEADER
══════════════════════════════════════════════════════════ */
#main-header {
    background: var(--navy);
    padding: 8px 0;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    width: 100%;
    transition: all .3s ease;
}

#main-header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.hdr-inner {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hdr-logo {
    height: 65px;
    flex-shrink: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--rad);
    display: flex;
    align-items: center;
    transition: border-color var(--tr);
    text-decoration: none;
}

.hdr-logo:hover {
    border-color: var(--orange);
}

.hdr-logo img {
    width: auto;
    height: auto;
}

.hdr-deliver {
    flex-shrink: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--rad);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: border-color var(--tr);
}

.hdr-deliver:hover {
    border-color: var(--orange);
}

.hdr-deliver .lbl {
    color: var(--orange);
    font-size: 11px;
    font-weight: 600;
    display: block;
}

.hdr-deliver strong {
    color: #fff;
    font-size: 13px;
}

/* ── Search Bar ── */
.hdr-search {
    flex: 1;
    display: flex;
    height: 40px;
    border: 1px solid var(--orange);
    border-radius: var(--rad);
    overflow: hidden;
    min-width: 0;
    transition: all .3s ease;
}

.hdr-search select {
    flex-shrink: 0;
    background: #f3f3f3;
    border: none;
    padding: 0 8px;
    font-size: 12px;
    color: var(--tx-dark);
    border-inline-end: 1px solid #ccc;
    cursor: pointer;
    max-width: 125px;
}

.hdr-search input {
    flex: 1;
    border: none;
    padding: 0 12px;

    font-size: 14px;
    color: var(--tx-dark);
    outline: none;
    min-width: 0;
}

.hdr-search button {
    flex-shrink: 0;
    background: var(--cta);
    padding: 0 14px;
    color: var(--white);
    font-size: 1rem;
    transition: background var(--tr);
    border: none;
    cursor: pointer;
}

.hdr-search button:hover {
    background: var(--cta-h);
}

/* ── Actions ── */
.hdr-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.hdr-btn {
    color: #fff;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--rad);
    font-size: 12px;
    transition: border-color var(--tr);
    white-space: nowrap;
    display: block;
    text-decoration: none;
}

.hdr-btn:hover {
    border-color: var(--orange);
    color: #fff;
}

.hdr-btn .lbl {
    color: #aaa;
    font-size: 10px;
    display: block;
    line-height: 1.2;
}

.hdr-btn strong {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hdr-user-wrap {
    position: relative;
}

.hdr-user-wrap:hover .hdr-user-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hdr-user-drop {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    min-width: 160px;
    background: #1a2532;
    border: 1px solid #2a3c4e;
    border-radius: 10px;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 1100;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
}

.hdu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ccc;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    transition: background .15s, color .15s;
    white-space: nowrap;
    text-decoration: none;
}

.hdu-item:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.hdu-item.hdu-danger:hover {
    background: rgba(220, 53, 69, .15);
    color: #ff6b7a;
}

.hdr-icon-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #fff;
    padding: 5px 10px;
    border: 1px solid transparent;
    border-radius: var(--rad);
    font-size: 18px;
    transition: border-color var(--tr), color var(--tr);
    min-width: 46px;
    text-align: center;
    text-decoration: none;
}

.hdr-icon-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.hdr-icon-lbl {
    font-size: 10px;
    font-weight: 600;
    color: #aaa;
    line-height: 1;
    white-space: nowrap;
}

.hdr-icon-btn:hover .hdr-icon-lbl {
    color: var(--orange);
}

.hdr-badge {
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    background: var(--cta);
    color: var(--white);
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hdr-cart {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 22px;
    padding: 5px 12px;
    border: 1px solid var(--orange);
    border-radius: var(--rad);
    transition: border-color var(--tr), color var(--tr);
    position: relative;
    white-space: nowrap;
    text-decoration: none;
}

.hdr-cart:hover {
    border-color: var(--orange);
}

.hdr-cart .cart-count {
    position: absolute;
    top: 2px;
    inset-inline-start: 8px;
    background: var(--cta);
    color: var(--white);
    font-size: 9px;
    font-weight: 800;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hdr-cart .cart-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.hdr-cart .cart-sub {
    font-size: 10px;
    color: #aaa;
}

.hdr-cart .cart-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.hdr-cart:hover .cart-name,
.hdr-cart:hover .cart-sub {
    color: var(--orange);
}

.hdr-toggle {
    display: none;
    color: #fff;
    font-size: 1.3rem;
    padding: 6px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--tr);
    flex-shrink: 0;
}

.hdr-toggle:hover {
    color: var(--orange);
}

/* Search toggle button (mobile) */
.hdr-search-toggle {
    display: none;
    color: #fff;
    font-size: 1.2rem;
    padding: 7px 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--tr);
    flex-shrink: 0;
    position: relative;
}

.hdr-search-toggle:hover {
    color: var(--orange);
}


/* ══════════════════════════════════════════════════════════
   SECONDARY NAV
══════════════════════════════════════════════════════════ */
#sec-nav {
    background: var(--nav);
    top: 58px;
    z-index: 999;
    border-bottom: 1px solid #3a4553;
}

.sec-nav-inner {
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 4px 0;
}

.sec-nav-inner::-webkit-scrollbar {
    display: none;
}

.nav-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--rad);
    white-space: nowrap;
    transition: border-color var(--tr);
    flex-shrink: 0;
    text-decoration: none;
}

.nav-all-btn:hover {
    border-color: var(--orange);
}

.nav-link {
    color: #fff;
    font-size: 13px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: var(--rad);
    white-space: nowrap;
    transition: border-color var(--tr);
    text-decoration: none;
}

.nav-link:hover {
    border-color: var(--orange);
}

.nav-link.hot {
    color: var(--orange);
    font-weight: 700;
}


/* ══════════════════════════════════════════════════════════
   MOBILE DRAWER OVERLAY
══════════════════════════════════════════════════════════ */

/* Overlay */
.drawer-overlay {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-overlay.open {
    display: block;
    opacity: 1;
}

/* Mobile Search Bar */
.mobile-search-bar {
    display: none;
}

.mobile-search-bar.open {
    display: flex;
}

/* ── Drawer Panel ── */
.mobile-drawer {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    width: var(--drawer-w);
    max-width: 88vw;
    height: 100dvh;
    background: var(--nav);
    z-index: 9100;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 4px 0 30px rgba(0, 0, 0, .6);
}

[dir="rtl"] .mobile-drawer {
    transform: translateX(100%);
}

.mobile-drawer.open {
    transform: translateX(0) !important;
}

/* Drawer Header */
.drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #0a1219;
    border-bottom: 1px solid #1e2d3d;
    flex-shrink: 0;
}

.drawer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: 800;
    font-size: 17px;

}

.drawer-logo img {
    height: 28px;
    width: auto;
}

.drawer-close {
    background: rgba(255, 255, 255, .07);
    border: 1px solid #2a3c4e;
    color: #aaa;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: background var(--tr), color var(--tr);
    flex-shrink: 0;
}

.drawer-close:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

/* Drawer User Card */
.drawer-user {
    padding: 14px 16px;
    border-bottom: 1px solid #1e2d3d;
    flex-shrink: 0;
}

.drawer-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid #2a3c4e;
    border-radius: 10px;
    text-decoration: none;
    transition: background var(--tr);
}

.drawer-user-card:hover {
    background: rgba(255, 255, 255, .08);
}

.drawer-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), #e05a00);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.drawer-user-info {
    min-width: 0;
}

.drawer-user-name {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.drawer-user-sub {
    font-size: 11px;
    color: #8fa3b1;
}

.drawer-auth-btns {
    display: flex;
    gap: 8px;
}

.drawer-btn-login,
.drawer-btn-register {
    flex: 1;
    padding: 9px 10px;
    border-radius: var(--rad);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
}

.drawer-btn-login {
    background: transparent;
    border: 1px solid #3a4f63;
    color: #ccc;
}

.drawer-btn-login:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.drawer-btn-register {
    background: var(--cta);
    color: var(--navy);
}

.drawer-btn-register:hover {
    background: var(--cta-h);
}

/* Drawer Body */
.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #2a3c4e transparent;
}

.drawer-body::-webkit-scrollbar {
    width: 4px;
}

.drawer-body::-webkit-scrollbar-thumb {
    background: #2a3c4e;
    border-radius: 4px;
}

/* Drawer Section */
.drawer-section {
    padding: 6px 8px;
    border-bottom: 1px solid #1e2d3d;
    margin-bottom: 4px;
}

.drawer-section-label {
    font-size: 9px;
    font-weight: 700;
    color: #8fa3b1;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 8px 8px;
    display: block;
}

/* Drawer Nav Items */
.drawer-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 10px;
    color: #d0d8e0;
    font-size: 13px;
    border-radius: 8px;
    text-decoration: none;
    transition: background var(--tr), color var(--tr);
    position: relative;

    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: start;
}

.drawer-nav-item:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
}

.drawer-nav-item.active {
    color: var(--orange);
    background: rgba(240, 165, 0, .08);
}

.drawer-nav-item.hot-item {
    color: var(--orange);
}

.drawer-nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: rgba(255, 255, 255, .06);
    flex-shrink: 0;
    transition: background var(--tr);
}

.drawer-nav-item:hover .drawer-nav-icon {
    background: rgba(240, 165, 0, .15);
    color: var(--orange);
}

.drawer-nav-item.active .drawer-nav-icon {
    background: rgba(240, 165, 0, .15);
    color: var(--orange);
}

.drawer-nav-badge {
    margin-inline-start: auto;
    background: var(--cta);
    color: var(--navy);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.4;
}

/* Sub-items (categories) — keep for fallback */
.drawer-cat-list {
    padding: 0 8px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-cat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    color: #b0bec5;
    font-size: 13px;
    border-radius: 6px;
    text-decoration: none;
    transition: background var(--tr), color var(--tr);
}

.drawer-cat-item:hover {
    background: rgba(255, 255, 255, .05);
    color: #fff;
}

.drawer-cat-item::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #3a4f63;
    flex-shrink: 0;
}

.drawer-cat-item:hover::before {
    background: var(--orange);
}

/* ── Category Image Grid ── */
.drawer-cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px 8px 8px;
}

.drawer-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 10px 6px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid #1e2d3d;
    text-decoration: none;
    transition: background var(--tr), border-color var(--tr), transform .2s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

.drawer-cat-card:hover {
    background: rgba(240, 165, 0, .08);
    border-color: rgba(240, 165, 0, .3);
    transform: translateY(-2px);
}

.drawer-cat-card:active {
    transform: scale(.96);
}

.drawer-cat-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid #2a3c4e;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color var(--tr);
}

.drawer-cat-card:hover .drawer-cat-img {
    border-color: rgba(240, 165, 0, .4);
}

.drawer-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 9px;
}

.drawer-cat-img i {
    font-size: 20px;
    color: #4a6070;
}

.drawer-cat-name {
    font-size: 10.5px;
    font-weight: 600;
    color: #b0bec5;
    text-align: center;
    line-height: 1.3;
    word-break: break-word;
    transition: color var(--tr);
    max-width: 100%;
}

.drawer-cat-card:hover .drawer-cat-name {
    color: var(--orange);
}

/* Language / Currency in Drawer */
.drawer-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px 8px;
}

.drawer-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid #2a3c4e;
    border-radius: 20px;
    color: #ccc;
    font-size: 11px;
    cursor: pointer;
    transition: all var(--tr);
    text-decoration: none;
}

.drawer-pill:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.drawer-pill.active {
    border-color: var(--cta);
    color: var(--cta);
    background: rgba(240, 165, 0, .08);
}

/* Drawer Footer */
.drawer-footer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid #1e2d3d;
    background: #0a1219;
}

.drawer-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: rgba(220, 53, 69, .08);
    border: 1px solid rgba(220, 53, 69, .2);
    color: #ff6b7a;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background var(--tr);
    text-decoration: none;

}

.drawer-logout:hover {
    background: rgba(220, 53, 69, .15);
}


/* ══════════════════════════════════════════════════════════
   MOBILE SEARCH BAR  (slides down below header)
══════════════════════════════════════════════════════════ */
.mobile-search-bar {
    display: none;
    background: #0a1219;
    border-bottom: 1px solid #1e2d3d;
    padding: 8px 12px;
    transition: all .25s ease;
}

.mobile-search-bar.open {
    display: flex;
}

.mobile-search-form {
    display: flex;
    width: 100%;
    height: 42px;
    border-radius: var(--rad);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}

.mobile-search-form input {
    flex: 1;
    border: none;
    padding: 0 14px;
    font-size: 14px;

    color: var(--tx-dark);
    outline: none;
    background: #fff;
}

.mobile-search-form button {
    flex-shrink: 0;
    background: var(--cta);
    color: var(--navy);
    border: none;
    padding: 0 16px;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--tr);
}

.mobile-search-form button:hover {
    background: var(--cta-h);
}


/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM NAV BAR  (6 items)
══════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: var(--navy);
    border-top: 1px solid #1e2d3d;
    z-index: 990;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .5);
    padding: 0 2px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: stretch;
    justify-content: space-around;
}

.mob-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #8fa3b1;
    font-size: 19px;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 2px;
    transition: color var(--tr), background var(--tr);
    position: relative;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
    border-radius: 10px;
    margin: 4px 1px;
}

.mob-nav-btn:hover,
.mob-nav-btn.active {
    color: var(--orange);
    background: rgba(240, 165, 0, .07);
}

.mob-nav-lbl {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    white-space: nowrap;
}

/* Cart button — accent pill */
.mob-nav-btn--cart {
    color: var(--navy);
    background: var(--cta);
    border-radius: 14px;
    margin: 6px 2px;
    padding: 0 6px;
    flex: 1.2;
    box-shadow: 0 2px 10px rgba(240, 165, 0, .35);
}

.mob-nav-btn--cart .mob-nav-lbl {
    color: var(--navy);
    font-weight: 800;
}

.mob-nav-btn--cart:hover {
    background: var(--cta-h);
    color: var(--navy);
}

.mob-nav-btn--cart .mob-nav-badge {
    background: var(--navy);
    color: var(--cta);
}

/* Badges */
.mob-nav-badge {
    position: absolute;
    top: 5px;
    right: calc(50% - 17px);
    background: var(--cta);
    color: var(--navy);
    font-size: 8px;
    font-weight: 800;
    min-width: 14px;
    height: 14px;
    border-radius: 7px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Wishlist badge — red */
.mob-nav-badge--wish {
    background: #e05252;
    color: #fff;
}

/* Compare badge — blue */
.mob-nav-badge--compare {
    background: #3a8fd6;
    color: #fff;
}

/* Add body padding to prevent content behind bottom nav */
@media (max-width: 768px) {
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE  992px
══════════════════════════════════════════════════════════ */
@media (max-width: 992px) {

    /* Hide desktop elements */
    .hdr-deliver,
    .hdr-icon-lbl,
    .hdr-btn .lbl,
    .topbar-email {
        display: none;
    }

    /* Show toggles */
    .hdr-toggle {
        display: block;
    }

    .hdr-search-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Shrink search select */
    .hdr-search select {
        display: none;
    }

    /* Compact icon buttons */
    .hdr-icon-btn {
        padding: 5px 8px;
        min-width: 38px;
    }

    .hdr-icon-btn {
        font-size: 17px;
    }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE  768px  — Full mobile layout
══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Topbar: collapsed to just language/currency */
    #topbar {
        padding: 3px 0;
    }

    .topbar-links {
        gap: 2px;
        margin-inline-start: auto;
    }

    .topbar-link-item {
        display: none;
    }

    /* hide wishlist/auth from topbar on mobile */

    /* Hide desktop search in header, replace with toggle */
    .hdr-search {
        display: none;
    }

    .hdr-search-toggle {
        display: flex;
    }

    /* Header compact */
    .hdr-inner {
        gap: 6px;
    }

    #main-header {
        padding: 6px 0;
    }

    /* Hide compare icon on mobile (in bottom nav instead) */
    .hdr-icon-btn[title] {
        display: none;
    }

    /* Cart compact */
    .hdr-cart .cart-text {
        display: none;
    }

    .hdr-cart {
        padding: 6px 10px;
        font-size: 20px;
    }

    /* Auth compact */
    .hdr-btn {
        padding: 4px 6px;
    }

    .hdr-btn strong {
        font-size: 11px;
    }

    /* Show bottom nav */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Sec-nav: smaller text, no hover borders, just scroll */
    .nav-link,
    .nav-all-btn {
        font-size: 12px;
        padding: 5px 10px;
    }

    /* Hide wishlist from hdr on mobile */
    .hdr-cart-wrap {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE  480px  — Smallest screens
══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .hdr-actions {
        gap: 1px;
    }

    .hdr-cart {
        padding: 5px 8px;
    }

    #main-header .container-fluid {
        padding: 0 10px;
    }
}


/* ══════════════════════════════════════════════════════════
   ANIMATION  — drawer stagger items
══════════════════════════════════════════════════════════ */
.mobile-drawer.open .drawer-nav-item {
    animation: drawerItemIn .3s ease both;
}

.mobile-drawer.open .drawer-nav-item:nth-child(1) {
    animation-delay: .05s;
}

.mobile-drawer.open .drawer-nav-item:nth-child(2) {
    animation-delay: .08s;
}

.mobile-drawer.open .drawer-nav-item:nth-child(3) {
    animation-delay: .11s;
}

.mobile-drawer.open .drawer-nav-item:nth-child(4) {
    animation-delay: .14s;
}

.mobile-drawer.open .drawer-nav-item:nth-child(5) {
    animation-delay: .17s;
}

.mobile-drawer.open .drawer-nav-item:nth-child(6) {
    animation-delay: .20s;
}

.mobile-drawer.open .drawer-nav-item:nth-child(7) {
    animation-delay: .23s;
}

@keyframes drawerItemIn {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}