/* ===== NAVBAR ===== */
.k-announce {
    background: var(--k-black);
    color: var(--k-white);
    font-size: 12px;
    letter-spacing: 0.04em;
    padding: 10px 16px;
    text-align: center;
}
.k-announce a { color: var(--k-beige-300); margin-inline-start: 8px; }
.k-announce a:hover { color: var(--k-white); }

.k-navbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--k-white);
    border-bottom: var(--k-border);
}
.k-navbar-inner {
    max-width: var(--k-container);
    margin: 0 auto;
    padding: 0 24px;
    height: 72px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}
.k-brand {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--k-black);
}
.k-brand:hover { color: var(--k-black); }

.k-nav-links {
    display: flex;
    gap: 28px;
    align-items: center;
    list-style: none;
    padding: 0; margin: 0;
    justify-self: center;
}
.k-nav-links a {
    font-size: 13px;
    font-weight: 500;
    color: var(--k-gray-700);
    position: relative;
    padding: 8px 0;
}
.k-nav-links a:hover { color: var(--k-black); }
.k-nav-links a.active { color: var(--k-black); }
.k-nav-links a.active::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--k-black);
}

.k-nav-icons {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-self: end;
}

/* ===== HAMBURGER — مخفي على الديسكتوب ===== */
.k-hamburger { display: none; }

/* ===== MOBILE ===== */
@media (max-width: 991px) {
    .k-navbar-inner { height: 64px; }

    /* إخفاء اللينكات والأيقونات */
    .k-nav-links { display: none; }
    .k-nav-icons .k-icon-btn:not(.k-hamburger) { display: none; }

    /* إظهار الهامبرغر */
    .k-hamburger { display: inline-flex; }
}

/* ===== DRAWER ===== */
.k-mobile-drawer {
    position: fixed;
    top: 0; bottom: 0;
    inset-inline-start: 0;
    width: 320px;
    max-width: 85vw;
    background: var(--k-white);
    z-index: 100;
    display: flex;
    flex-direction: column;
    border-inline-end: var(--k-border);
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
html[dir="rtl"] .k-mobile-drawer {
    transform: translateX(100%);
}
.k-mobile-drawer.open,
html[dir="rtl"] .k-mobile-drawer.open {
    transform: translateX(0);
}

.k-drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: var(--k-border);
}
.k-drawer-body {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}
.k-drawer-body a {
    display: block;
    padding: 14px 0;
    font-size: 16px;
    color: var(--k-black);
    border-bottom: var(--k-border);
}

/* ===== DRAWER ICONS ===== */
.k-drawer-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 16px 0 0;
    border-top: var(--k-border);
    margin-top: 12px;
}
.k-drawer-icons .k-icon-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 11px;
    padding: 10px 4px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--k-black);
    position: relative;
}
.k-drawer-icons .k-icon-btn i { font-size: 20px; }
.k-drawer-icons .k-cart-badge {
    position: absolute;
    top: 4px;
    inset-inline-end: 16px;
}

/* ===== OVERLAY ===== */
.k-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.4);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.k-overlay.open { opacity: 1; pointer-events: auto; }