/* ----------------------------------------------
   BARRA SUPERIOR
---------------------------------------------- */
#topbar {
    padding:15px 0;
    overflow:auto;
    background-color: var(--color-subheader-bg);
    /* border-bottom: 1px solid var(--color-border); */
    border-bottom: 1px solid color-mix(
        in srgb,
        var(--color-border) 80%,
        transparent
    );
}
#topbar .box_barra_left, 
#topbar .box_barra_right {
    a {
        color: var(--color-subheader-link);
    }
    i {
        font-size:14px;
    }
}

#topbar .box_barra_left {
    float:left;
    a {
        margin-right:10px;
    }
}
#topbar .box_barra_right {
    float:right;
    a {
        margin-left:10px;
    }
}

/* ----------------------------------------------
   LOGO + CARRINHO + HAMBURGUER
---------------------------------------------- */
.header-main {
    background: #fff;
    padding: 20px 30px;
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.header-main img {
    height: 95px;
}

.cart {
    position: relative;
    font-size: 32px;
    cursor: pointer;
    color:var(--color-primary);
}

.cart-count {
    display: block;
    background: var(--color-primary);
    color: #FFFFFF;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    position: absolute;
    top: -5px;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.hamburger {
    display: none;
    font-size: 36px;
    cursor: pointer;
    color: #FFF;
    background-color:var(--color-primary);
    text-align: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255,.2);
}

/* ----------------------------------------------
   MENU DESKTOP
---------------------------------------------- */
.navbar {
    background:var(--color-primary);
    display: flex;
    justify-content: center;
}

.navbar ul {
    list-style: none;
    display: flex;
}

.navbar li {
    position: relative;
}

.navbar a,
.more-btn {
    color:#fff; padding:15px; display:inline-table; font-size:16px; transition:0.7s; text-transform:uppercase;
}

.navbar a:hover,
.more-btn:hover {
    color:var(--color-primary); background-color:#f7f7f7;
}

.menu_fixo  { position:fixed; top: 0; z-index:9999; width: 100%; }

/* ----------------------------------------------
   DROPDOWN "MAIS"
---------------------------------------------- */
.dropdown {
    display: none !important;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background:var(--color-primary);
    min-width: 180px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
    transition: opacity .2s ease-in-out;
    z-index: 9999;
}

.more:hover .dropdown {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.dropdown li a {
    display: block;
    padding: 14px;
    white-space: nowrap;
}

/* ----------------------------------------------
   MENU MOBILE
---------------------------------------------- */
.mobile-menu {
    display: none;
    flex-direction: column;
    background:var(--color-primary);
}

.mobile-menu.active {
    display: flex;
}

.mobile-menu a {
    padding: 16px;
    border-bottom: 1px solid rgba(255,255,255,.2);
    color: #FFF;
    text-decoration: none;
    text-transform:uppercase;
    text-align: center;
}

/* RESPONSIVO */
@media (max-width: 900px) {

    #topbar .box_barra_left, 
    #topbar .box_barra_right {
        float:none; width:100%; display:block; padding:10px 0; text-align:center;
        a {
            display: block;
        }
    }

    .navbar {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .dropdown {
        position: static;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        box-shadow: none;
    }

    .more-btn {
        cursor: pointer;
    }

    .menu_fixo  { position:relative; top:0; z-index:999; }
}