/* =========================================================
   Ghorer Inspired — Navigation (desktop menus, dropdowns,
   mobile drawer, bottom bar)
   ========================================================= */

/* ---------- Nav row ---------- */
.gb-header__nav {
        background: var(--gb-bg);
        border-bottom: 1px solid var(--gb-border);
}

.gb-header__nav-inner {
        display: flex;
        align-items: center;
        gap: 18px;
        min-height: 50px;
}

/* "All Categories" dropdown */
.gb-cat-toggle {
        position: relative;
        flex-shrink: 0;
}

.gb-cat-toggle__btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        height: 40px;
        padding: 0 16px;
        border: none;
        border-radius: 9px;
        background: var(--gb-primary);
        color: #fff;
        font-size: 13.5px;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--gb-transition);
}

.gb-cat-toggle__btn:hover {
        background: var(--gb-primary-dark);
}

.gb-cat-dropdown {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 240px;
        background: #fff;
        border: 1px solid var(--gb-border);
        border-radius: var(--gb-radius);
        box-shadow: var(--gb-shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity var(--gb-transition), transform var(--gb-transition), visibility var(--gb-transition);
        z-index: 110;
        padding: 8px;
        max-height: 70vh;
        overflow: auto;
}

.gb-cat-toggle.is-open .gb-cat-dropdown,
.gb-cat-toggle:hover .gb-cat-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
}

/* Horizontal menu */
.gb-primary-nav {
        flex: 1 1 auto;
        min-width: 0;
}

.gb-nav-menu {
        display: flex;
        align-items: center;
        gap: 2px;
        flex-wrap: wrap;
}

.gb-nav-menu > li > a,
.gb-cat-dropdown ul > li > a {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gb-ink);
        border-radius: 8px;
        white-space: nowrap;
}

.gb-nav-menu > li > a:hover {
        color: var(--gb-primary-dark);
        background: var(--gb-primary-soft);
}

.gb-nav-menu .gb-icon {
        color: var(--gb-muted);
}

/* Dropdown submenus (primary menu) */
.gb-nav-menu li {
        position: relative;
}

.gb-submenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background: #fff;
        border: 1px solid var(--gb-border);
        border-radius: 10px;
        box-shadow: var(--gb-shadow-lg);
        padding: 6px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity var(--gb-transition), transform var(--gb-transition), visibility var(--gb-transition);
        z-index: 110;
}

.gb-nav-menu li:hover > .gb-submenu,
.gb-nav-menu li:focus-within > .gb-submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
}

.gb-submenu li {
        position: relative;
}

.gb-submenu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
        font-size: 13.5px;
        font-weight: 500;
        color: var(--gb-ink);
        border-radius: 7px;
}

.gb-submenu a:hover {
        background: var(--gb-primary-soft);
        color: var(--gb-primary-dark);
}

.gb-submenu .gb-submenu {
        top: 0;
        left: 100%;
}

/* Category dropdown list inside "All Categories" */
.gb-cat-dropdown ul > li > a {
        display: flex;
        justify-content: space-between;
        width: 100%;
}

/* ---------- Mobile drawer ---------- */
.gb-drawer,
.gb-search-overlay {
        color: var(--gb-ink);
        pointer-events: none;
}

.gb-drawer {
        position: fixed;
        inset: 0;
        z-index: 200;
}

.gb-drawer__panel {
        position: absolute;
        top: 0;
        bottom: 0;
        background: #fff;
        color: var(--gb-ink);
        display: flex;
        flex-direction: column;
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: var(--gb-shadow-lg);
}

.gb-drawer__overlay {
        position: absolute;
        inset: 0;
        background: rgba(15, 25, 19, 0.55);
        opacity: 0;
        transition: opacity var(--gb-transition);
}

.gb-drawer--left .gb-drawer__panel {
        left: 0;
        width: min(340px, 88vw);
        transform: translateX(-105%);
}

.gb-drawer--right .gb-drawer__panel {
        right: 0;
        width: min(420px, 94vw);
        transform: translateX(105%);
}

.gb-drawer.is-open {
        pointer-events: auto;
}

.gb-drawer.is-open .gb-drawer__overlay {
        opacity: 1;
}

.gb-drawer.is-open .gb-drawer__panel {
        transform: translateX(0);
}

.gb-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 18px;
        border-bottom: 1px solid var(--gb-border);
        flex-shrink: 0;
}

.gb-drawer__title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 15.5px;
        font-weight: 700;
}

.gb-drawer__title .gb-icon {
        color: var(--gb-primary);
}

.gb-drawer__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 9px;
        border: 1px solid var(--gb-border);
        background: var(--gb-bg-soft);
        color: var(--gb-ink);
        cursor: pointer;
}

.gb-drawer__close:hover {
        border-color: var(--gb-primary);
        color: var(--gb-primary-dark);
}

.gb-drawer__search {
        padding: 14px 16px 6px;
        flex-shrink: 0;
}

.gb-drawer__nav {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 10px 10px 16px;
        -webkit-overflow-scrolling: touch;
}

.gb-drawer__links {
        padding: 12px 16px 18px;
        border-top: 1px solid var(--gb-border);
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex-shrink: 0;
}

.gb-drawer__links a {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 9px 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--gb-ink);
        border-radius: 8px;
}

.gb-drawer__links a:hover {
        color: var(--gb-primary-dark);
}

.gb-drawer__links .gb-icon {
        color: var(--gb-primary);
}

/* Drawer menu accordions */
#gb-mobile-drawer .gb-nav-menu,
.gb-drawer-menu > li { display: block; }

.gb-drawer-menu > li {
        border-bottom: 1px solid var(--gb-border);
}

.gb-drawer-menu a,
#gb-mobile-drawer .gb-nav-menu a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 8px;
        font-size: 14.5px;
        font-weight: 600;
        color: var(--gb-ink);
}

#gb-mobile-drawer .gb-nav-menu a .gb-icon {
        display: none;
}

.gb-drawer-menu a:hover {
        color: var(--gb-primary-dark);
}

#gb-mobile-drawer .gb-nav-menu .gb-submenu,
.gb-drawer-menu .gb-submenu,
.gb-drawer-menu .sub-menu {
        display: none;
        padding: 0 0 6px 14px;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        min-width: 0;
}

#gb-mobile-drawer .gb-nav-menu .is-open > .gb-submenu,
.gb-drawer-menu .is-open > .gb-submenu,
.gb-drawer-menu .is-open > .sub-menu {
        display: block;
}

#gb-mobile-drawer .gb-nav-menu .gb-submenu a,
.gb-drawer-menu .gb-submenu a {
        font-size: 13.5px;
        font-weight: 500;
        padding: 8px 6px;
        color: var(--gb-ink-soft);
}

#gb-mobile-drawer .gb-nav-menu .gb-has-submenu > a::after,
.gb-drawer-menu .menu-item-has-children > a::after,
.gb-drawer-menu .gb-has-submenu > a::after {
        content: "";
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--gb-muted);
        border-bottom: 2px solid var(--gb-muted);
        transform: rotate(45deg);
        transition: transform var(--gb-transition);
        flex-shrink: 0;
        margin-right: 4px;
}

#gb-mobile-drawer .gb-nav-menu .is-open > a::after,
.gb-drawer-menu .is-open > a::after {
        transform: rotate(-135deg);
}

/* ---------- Mobile bottom bar ---------- */

/* Full-width search overlay (mobile + touch) */
.gb-search-overlay {
        position: fixed;
        inset: 0;
        z-index: 210;
        pointer-events: none;
}

.gb-search-overlay__panel {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: var(--gb-shadow-lg);
        transform: translateY(-105%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        padding-bottom: 22px;
}

.gb-search-overlay.is-open {
        pointer-events: auto;
}

.gb-search-overlay.is-open .gb-search-overlay__panel {
        transform: translateY(0);
}

.gb-search-overlay__inner {
        padding-top: 18px;
}

.gb-search-overlay__row {
        display: flex;
        align-items: center;
        gap: 12px;
}

.gb-search-overlay__row .gb-search-form {
        flex: 1;
}

.gb-search-overlay__hint {
        margin-top: 12px;
        font-size: 13px;
        color: var(--gb-muted);
}

.gb-bottombar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 180;
        display: none;
        grid-template-columns: repeat(5, 1fr);
        background: #fff;
        border-top: 1px solid var(--gb-border);
        box-shadow: 0 -8px 24px -18px rgba(23, 35, 28, 0.4);
        padding-bottom: env(safe-area-inset-bottom, 0);
}

.gb-bottombar__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        height: 58px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--gb-ink-soft);
        background: none;
        border: none;
        cursor: pointer;
        transition: color var(--gb-transition);
}

.gb-bottombar__item:hover,
.gb-bottombar__item.is-active {
        color: var(--gb-primary-dark);
}

.gb-bottombar__item .gb-icon {
        line-height: 0;
}

.gb-bottombar__cart {
        position: relative;
        display: inline-flex;
}

.gb-bottombar__cart .gb-cart-count {
        top: -6px;
        right: -10px;
}