/*
 * GUILDA NERDS — CATEGORIAS DESKTOP V2
 * Barra permanente inspirada na referência, com identidade Guilda.
 * Mobile <= 680px permanece intocado.
 */

.gn-desktop-all-categories,
.gn-desktop-categories-overlay,
.gn-desktop-categories-drawer {
    display: none;
}

@media (min-width: 681px) {

    /* A sidebar do catálogo não acompanha a rolagem. */
    .catalog-sidebar {
        position: static !important;
        top: auto !important;
    }

    /*
     * A navegação original continua sendo a segunda faixa do header.
     * Não alteramos o grid da linha principal.
     */
    .site-category-nav {
        position: relative;
        z-index: 20;
        background: #fff;
        border-top: 1px solid var(--header-border, #e4e1eb);
        border-bottom: 1px solid var(--header-border, #e4e1eb);
        box-shadow: 0 5px 16px rgba(30, 20, 58, 0.055);
    }

    .site-category-nav .container {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 62px;
    }

    /* Novo primeiro item: ☰ Todas as categorias */
    .gn-desktop-all-categories {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex: 0 0 auto;
        padding: 0 18px;
        border: 0;
        border-radius: 11px;
        color: var(--header-purple-dark, #211456);
        background: var(--header-purple-soft, #f1eaff);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 850;
        white-space: nowrap;
        cursor: pointer;
    }

    .gn-desktop-all-categories svg {
        width: 23px;
        height: 23px;
        flex: 0 0 auto;
    }

    .gn-desktop-all-categories:hover,
    .gn-desktop-all-categories:focus-visible,
    .gn-desktop-all-categories[aria-expanded="true"] {
        color: #fff;
        background: var(--header-purple, #672bbf);
        outline: none;
    }

    /*
     * A lista horizontal existente continua sendo a fonte real
     * dos atalhos. Apenas compactamos o espaçamento.
     */
    .site-category-list-desktop {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .site-category-list-desktop::-webkit-scrollbar {
        display: none;
    }

    .site-category-list-desktop > li {
        flex: 0 0 auto;
    }

    .site-category-list-desktop > li > a {
        min-height: 46px;
        display: inline-flex;
        align-items: center;
        padding: 0 16px;
        border-radius: 11px;
        white-space: nowrap;
    }

    /*
     * Como agora existe "Todas as categorias" no início,
     * o link "Todos os produtos" continua válido e visível,
     * servindo como atalho para o catálogo completo.
     */

    body.gn-desktop-categories-open {
        overflow: hidden;
    }

    .gn-desktop-categories-overlay {
        position: fixed;
        z-index: 1180;
        inset: 0;
        background: rgba(20, 12, 44, 0.44);
        backdrop-filter: blur(1.5px);
    }

    .gn-desktop-categories-overlay.is-open {
        display: block;
    }

    .gn-desktop-categories-drawer {
        position: fixed;
        z-index: 1190;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(380px, 88vw);
        flex-direction: column;
        background: #fff;
        box-shadow: 18px 0 52px rgba(22, 12, 51, 0.26);
        transform: translateX(-105%);
        transition: transform 0.22s ease;
    }

    .gn-desktop-categories-drawer.is-ready {
        display: flex;
    }

    .gn-desktop-categories-drawer.is-open {
        transform: translateX(0);
    }

    .gn-desktop-categories-drawer-header {
        min-height: 72px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 15px 12px 20px;
        border-bottom: 1px solid var(--header-border, #e4e1eb);
    }

    .gn-desktop-categories-drawer-title {
        display: flex;
        align-items: center;
        gap: 11px;
        color: var(--header-purple-dark, #211456);
        font-size: 1.02rem;
        font-weight: 900;
    }

    .gn-desktop-categories-drawer-title svg,
    .gn-desktop-categories-close svg {
        width: 23px;
        height: 23px;
    }

    .gn-desktop-categories-close {
        width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 10px;
        color: var(--header-purple-dark, #211456);
        background: transparent;
        cursor: pointer;
    }

    .gn-desktop-categories-close:hover,
    .gn-desktop-categories-close:focus-visible {
        color: var(--header-purple, #672bbf);
        background: var(--header-purple-soft, #f1eaff);
        outline: none;
    }

    .gn-desktop-categories-scroll {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 8px 0 26px;
    }

    .gn-desktop-categories-label {
        display: block;
        padding: 14px 20px 8px;
        color: var(--header-muted, #69657a);
        font-size: 0.7rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .gn-desktop-categories-drawer ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .gn-desktop-categories-drawer a {
        min-height: 50px;
        display: flex;
        align-items: center;
        padding: 10px 20px;
        border-radius: 0;
        color: var(--header-text, #161526);
        font-size: 0.92rem;
        font-weight: 720;
        text-decoration: none;
        border-left: 3px solid transparent;
    }

    .gn-desktop-categories-drawer a:hover,
    .gn-desktop-categories-drawer a:focus-visible {
        color: var(--header-purple, #672bbf);
        background: var(--header-purple-soft, #f1eaff);
        outline: none;
    }

    .gn-desktop-categories-drawer a.is-active {
        color: var(--header-purple-dark, #211456);
        background: var(--header-purple-soft, #f1eaff);
        border-left-color: var(--header-purple, #672bbf);
    }

    .gn-desktop-categories-drawer .catalog-category-children {
        margin-left: 22px;
        border-left: 1px solid var(--header-border, #e4e1eb);
    }

    .gn-desktop-categories-drawer .catalog-category-children a {
        min-height: 44px;
        padding-left: 17px;
        font-size: 0.85rem;
        font-weight: 650;
    }
}

/* Mobile aprovado: nenhuma interferência. */
@media (max-width: 680px) {
    .gn-desktop-all-categories,
    .gn-desktop-categories-overlay,
    .gn-desktop-categories-drawer {
        display: none !important;
    }
}