/* =====================================================
   ULTRAFARMA HEADER
===================================================== */
.uf-actions{

    width:340px;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:24px;

    flex-shrink:0;

}
.uf-action{

    display:flex;

    align-items:center;

    gap:10px;

    color:#FFFFFF;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    transition:all .2s ease;

}

.uf-action:hover{

    color:#FFFFFF;

    opacity:.85;

}

.uf-action i{

    font-size:28px;

    color:#FFFFFF;

    width:28px;

    text-align:center;

    flex-shrink:0;

}

.uf-action span{

    color:#FFFFFF;

    font-size:16px;

    font-weight:600;

    line-height:1.2;

}

.uf-cart-count{

    color:#FFFFFF;

    font-weight:700;

}

.uf-header *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.uf-header{
    width:100%;
    font-family:Arial,Helvetica,sans-serif;
    position:relative;
    z-index:999;
}

.uf-container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 15px;
}

/* =====================================================
   TOPBAR
===================================================== */


.uf-topbar{

    width:100%;

    height:40px;

background:linear-gradient(90deg,#003865 0%,#3DB9B8 100%);
}

.uf-topbar .uf-container{

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

}
.uf-topbar-left{

    font-size:14px;

    color:#333;

    font-weight:500;

}

.uf-topbar-right{

    display:flex;

    align-items:center;

    gap:32px;

}

.uf-topbar-right a{

    color:#444;

    text-decoration:none;

    font-size:14px;

}

.uf-topbar-right a:hover{

    color:#003865;

}
.uf-topbar-text{

    color:#FFFFFF;

    font-size:15px;

    font-weight:700;

    letter-spacing:.2px;

}

/* =====================================================
   HEADER
===================================================== */
.uf-main{
    background:#003865;
}
.uf-main .uf-container{

    max-width:1280px;

    margin:0 auto;

    height:118px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}
.uf-logo{

    width:260px;

    flex-shrink:0;

}

.uf-logo img{

    width:245px;

    height:auto;

    display:block;

}
.uf-search-area{

    flex:1;

    display:flex;

    justify-content:center;

}

.uf-search-form{

    width:100%;

    max-width:640px;

    display:flex;

    align-items:center;

}

.uf-search-form input{

    flex:1;

    height:44px;

    border:none;

    border-radius:22px 0 0 22px;

    padding:0 22px;

    font-size:16px;

}

.uf-search-form button{

    width:54px;

    height:44px;

    border:none;

    background:#A8D400;

    border-radius:0 22px 22px 0;

    color:#003865;

    cursor:pointer;

    font-size:22px;

}

/*====================================================
BARRA DE NAVEGAÇÃO
====================================================*/

.uf-nav{

    width:100%;

    height:58px;

background:linear-gradient(90deg,#95D600 0%,#32B8B7 100%);
    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.uf-nav .uf-container{

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*====================================================
BOTÃO CATEGORIAS
====================================================*/

.uf-categories{

    flex-shrink:0;

}

.uf-categories-btn{

    width:270px;

    height:58px;

    border:none;

    background:#FFFFFF;

    color:#003865;

    border-radius:10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 22px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    text-transform:uppercase;

    transition:.2s;

}

.uf-categories-btn:hover{

    background:#F4F7FA;

}
.uf-categories-btn i:first-child{

    font-size:24px;

}

.uf-categories-btn i:last-child{

    font-size:13px;

    opacity:.7;

}

/*====================================================
MENU
====================================================*/

.uf-menu{

    display:flex;

    align-items:center;

    gap:34px;

    list-style:none;

    margin:0;

    padding:0;

}

.uf-menu li{

    margin:0;

}

.uf-menu a{

    color:#FFF;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.2s;

}

.uf-menu a:hover{

    opacity:.80;

}
/*====================================================
MOBILE
====================================================*/

.uf-mobile-header{

    display:none;

}

/*==============================
TABLET / CELULAR
==============================*/

@media (max-width:991px){

    .uf-desktop-header{

        display:none;

    }

    .uf-mobile-header{

        display:block;

        background:#003865;

    }

    .uf-mobile-top{

        height:72px;

        padding:0 16px;

        display:flex;

        align-items:center;

        justify-content:space-between;

    }

    .uf-mobile-menu{

        width:42px;

        height:42px;

        border:none;

        background:none;

        color:#FFFFFF;

        font-size:28px;

        cursor:pointer;

    }

    .uf-mobile-logo img{

        width:170px;

        height:auto;

        display:block;

    }

    .uf-mobile-cart{

        display:flex;

        align-items:center;

        gap:6px;

        color:#FFFFFF;

        text-decoration:none;

        font-size:18px;

        font-weight:700;

    }

    .uf-mobile-cart i{

        font-size:28px;

    }

    .uf-mobile-search{

        display:flex;

        padding:0 16px 18px;

    }

    .uf-mobile-search input{

        flex:1;

        height:46px;

        border:none;

        outline:none;

        border-radius:24px 0 0 24px;

        padding:0 18px;

        font-size:15px;

    }
.uf-mobile-search button{

    width:74px;

    height:46px;

    border:none;

    background:#A8D400;

    border-radius:0 23px 23px 0;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

}

.uf-mobile-search button i{

    font-size:26px;

    color:#003865;

    line-height:1;

}

}

/*====================================================
DRAWER MOBILE
====================================================*/

.uf-mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.30s;

    z-index:9998;

}

.uf-mobile-drawer{

    position:fixed;

    top:0;

    left:-100%;

    width:85%;

    max-width:340px;

    height:100vh;

    background:#FFFFFF;

    box-shadow:6px 0 18px rgba(0,0,0,.18);

    transition:left .30s ease;

    z-index:9999;

    display:flex;

    flex-direction:column;

}

.uf-mobile-drawer.active{

    left:0;

}

.uf-mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

/*==============================
HEADER
==============================*/

.uf-mobile-drawer-header{

    height:70px;

    background:#003865;

    color:#FFFFFF;

    padding:0 20px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    font-size:18px;

    font-weight:700;

}

.uf-mobile-close{

    width:42px;

    height:42px;

    border:none;

    background:none;

    color:#FFFFFF;

    cursor:pointer;

    font-size:24px;

}

/*==============================
MENU
==============================*/

.uf-mobile-nav{

    flex:1;

    overflow:auto;

}

.uf-mobile-nav ul{

    list-style:none;

    margin:0;

    padding:0;

}

.uf-mobile-nav li{

    border-bottom:1px solid #EEEEEE;

}

.uf-mobile-nav a{

    display:block;

    padding:18px 22px;

    color:#333333;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

}

.uf-mobile-nav a:hover{

    background:#F5F5F5;

}

/*==============================
RODAPÉ
==============================*/

.uf-mobile-account{

    border-top:1px solid #EAEAEA;

    padding:18px;

    display:flex;

    flex-direction:column;

    gap:16px;

}

.uf-mobile-account a{

    color:#003865;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

}

.uf-nav{

    display:flex;

    justify-content:center;

}

.uf-menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:35px;

    margin:0;

    padding:0;

    list-style:none;

}

.uf-menu li{

    margin:0;

    padding:0;

}

.uf-menu a{

    display:block;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    padding:16px 0;

}