/*
 * Boutique da Preta - menu mobile
 * Camada final para impedir que estilos herdados do RWD deixem o drawer sem acabamento.
 */

@media (max-width: 770px) {
    .bp-nav-wrap {
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
    }

    #header-nav.bp-nav {
        background: var(--bp-card, #fff);
        border: 0;
        border-right: 1px solid var(--bp-border, #e6dde0);
        border-radius: 0;
        bottom: 0;
        box-shadow: 18px 0 44px rgba(31, 22, 25, .22);
        box-sizing: border-box;
        color: var(--bp-text, #241a1d);
        display: none;
        height: 100vh;
        left: 0;
        max-width: 380px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 16px 14px 24px;
        position: fixed;
        right: auto;
        top: 0;
        width: min(88vw, 380px);
        z-index: 1002;
        -webkit-overflow-scrolling: touch;
    }

    #header-nav.bp-nav.skip-active {
        display: block;
    }

    #header-nav .bp-nav-close {
        align-items: center;
        background: var(--bp-soft, #fff1f5);
        border: 1px solid var(--bp-border, #e6dde0);
        border-radius: 8px;
        color: var(--bp-text, #241a1d);
        display: inline-flex;
        font-size: 1.45rem;
        font-weight: 500;
        height: 44px;
        justify-content: center;
        line-height: 1;
        margin: 0 0 14px auto;
        min-height: 44px;
        padding: 0;
        width: 44px;
    }

    #header-nav #nav,
    #header-nav .nav-primary,
    #header-nav .nav-primary ul {
        background: transparent;
        border: 0;
        box-shadow: none;
        display: block;
        float: none;
        list-style: none;
        margin: 0;
        padding: 0;
        position: static;
        text-align: left;
        width: 100%;
    }

    #header-nav .nav-primary li,
    #header-nav .nav-primary li.level0,
    #header-nav .nav-primary li.level1 {
        background: transparent;
        border: 0;
        display: block;
        float: none;
        margin: 0;
        padding: 0;
        position: relative;
        width: 100%;
    }

    #header-nav .nav-primary > li.level0 {
        border-bottom: 1px solid var(--bp-border, #e6dde0);
    }

    #header-nav .nav-primary a,
    #header-nav .nav-primary a.level0,
    #header-nav .nav-primary li.level0 > a,
    #header-nav .nav-primary li.level1 > a {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 8px;
        box-sizing: border-box;
        color: var(--bp-text, #241a1d);
        display: flex;
        font-size: .86rem;
        font-weight: 800;
        justify-content: space-between;
        letter-spacing: 0;
        line-height: 1.25;
        min-height: 46px;
        padding: 13px 12px;
        text-decoration: none;
        text-transform: uppercase;
        width: 100%;
    }

    #header-nav .nav-primary li.level1 > a {
        color: var(--bp-muted, #6f6267);
        font-size: .78rem;
        font-weight: 700;
        min-height: 40px;
        padding: 10px 12px 10px 22px;
        text-transform: none;
    }

    #header-nav .nav-primary a:hover,
    #header-nav .nav-primary a:focus,
    #header-nav .nav-primary li.active > a,
    #header-nav .nav-primary li.menu-active > a,
    #header-nav .nav-primary li.sub-menu-active > a {
        background: var(--bp-soft, #fff1f5);
        color: var(--bp-primary, #d94f70);
        outline: 0;
    }

    #header-nav .nav-primary li.parent > a::after {
        color: currentColor;
        content: "+";
        display: inline-block;
        font-size: 1rem;
        font-weight: 700;
        margin-left: 12px;
        position: static;
    }

    #header-nav .nav-primary li.parent.menu-active > a::after,
    #header-nav .nav-primary li.parent.sub-menu-active > a::after {
        content: "-";
    }

    #header-nav .nav-primary li.level0 ul,
    #header-nav .nav-primary li.level0 ul.level0,
    #header-nav .nav-primary li.level1 ul {
        background: var(--bp-soft, #fff1f5);
        border: 0;
        border-radius: 8px;
        box-shadow: none;
        margin: 0 0 10px;
        padding: 6px;
        position: static;
        width: 100%;
    }

    .bp-nav-overlay {
        background: rgba(31, 22, 25, .58);
        border: 0;
        border-radius: 0;
        display: block;
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: fixed;
        width: 100%;
        z-index: 1001;
    }

    .bp-nav-overlay.is-active {
        opacity: 1;
        pointer-events: auto;
    }

    /* O menu é descendente do header sticky (z-index 1000), que cria um stacking
       context. Quando o menu abre, subimos o header acima do overlay (1001) para
       que os itens do menu fiquem clicáveis e não encobertos pelo overlay. */
    body.bp-nav-open #header.bp-header {
        z-index: 1003;
    }
}

@media (max-width: 380px) {
    #header-nav.bp-nav {
        max-width: none;
        width: min(92vw, 340px);
    }

    #header-nav .nav-primary a,
    #header-nav .nav-primary a.level0,
    #header-nav .nav-primary li.level0 > a {
        font-size: .8rem;
    }
}

body.bp-theme-dark #header-nav.bp-nav {
    background: var(--bp-dark-surface, #171114);
    border-color: rgba(255, 255, 255, .12);
    color: var(--bp-dark-text, #fff7f8);
}

body.bp-theme-dark #header-nav .nav-primary a,
body.bp-theme-dark #header-nav .nav-primary a.level0,
body.bp-theme-dark #header-nav .nav-primary li.level0 > a,
body.bp-theme-dark #header-nav .nav-primary li.level1 > a,
body.bp-theme-dark #header-nav .bp-nav-close {
    color: var(--bp-dark-text, #fff7f8);
}

body.bp-theme-dark #header-nav .nav-primary a:hover,
body.bp-theme-dark #header-nav .nav-primary a:focus,
body.bp-theme-dark #header-nav .nav-primary li.active > a,
body.bp-theme-dark #header-nav .nav-primary li.menu-active > a,
body.bp-theme-dark #header-nav .nav-primary li.sub-menu-active > a,
body.bp-theme-dark #header-nav .bp-nav-close {
    background: rgba(255, 255, 255, .08);
}