/* =======================================================
HEADER SHOP – O MELHOR DA MADEIRA
======================================================= */

.header-shop{
background:#06461c;
position:sticky;
top:0;
z-index:999;
box-shadow:0 2px 12px rgba(0,0,0,.25);
}

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

.header-shop .header-top{
max-width:1280px;
margin:0 auto;
padding:14px 20px;
display:flex;
align-items:center;
gap:18px;
}

/* =======================================================
LOGO
======================================================= */

.header-logo{
display:flex;
align-items:center;
flex-shrink:0;
}

.header-logo img{
height:48px;
display:block;
}


/* =======================================================
BUSCA
======================================================= */

/* ================= BUSCA ================= */

.header-search{
display:flex;
align-items:center;
background:#fff;
border-radius:999px;
overflow:hidden;
border:1px solid rgba(0,0,0,.08);
height:44px;
}

.header-search input{
flex:1;
border:0;
outline:0;
padding:0 18px;
font-size:15px;
height:100%;
background:transparent;
}

.header-search button{
width:48px;
height:100%;
border:0;
background:#0d6d2e;
color:#fff;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
}
.header-search input::placeholder{
color:#7a7a7a;
opacity:1;
}

.header-search button:hover{
background:#0f7b33;
}


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

.header-nav{
flex:2;
min-width:0;
}

.header-nav .nav-list{
display:flex;
align-items:center;
gap:14px;
list-style:none;
margin:0;
padding:0;
}

.header-nav .nav-list > li{
flex:0 0 auto;
}

.header-nav .nav-list a,
.header-nav .nav-btn{
color:#fff;
background:none;
border:0;
cursor:pointer;
text-decoration:none;
font-size:14px;
padding:9px 10px;
border-radius:10px;
display:flex;
align-items:center;
gap:8px;
font-weight:500;
white-space:nowrap;
}

.header-nav .nav-list a:hover,
.header-nav .nav-btn:hover{
background:rgba(255,255,255,.08);
}

.chevron{
font-size:11px;
opacity:.85;
}


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

.nav-products-btn{
background:#0d6d2e;
border:1px solid rgba(255,255,255,.20);
border-radius:12px;
padding:9px 14px;
font-weight:600;
box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.nav-products-btn:hover{
background:#0f7b33;
}


/* =======================================================
SUBMENU DESKTOP
======================================================= */

.has-sub{
position:relative;
}

.sub-menu{
position:absolute;
top:100%;
left:0;
min-width:240px;
background:#0f6a2f;
border-radius:12px;
padding:10px 0;
display:none;
z-index:2000;
box-shadow:0 16px 40px rgba(0,0,0,.25);
border:1px solid rgba(255,255,255,.08);
}

.has-sub:hover > .sub-menu{
display:block;
}

.has-sub.open > .sub-menu{
display:block;
}

.sub-menu li{
list-style:none;
}

.sub-menu li a{
display:block;
padding:10px 16px;
font-size:14px;
color:#fff;
text-decoration:none;
}

.sub-menu li a:hover{
background:rgba(255,255,255,.12);
}


/* =======================================================
AÇÕES (CONTA)
======================================================= */

.header-actions{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}

.account-link,
.account-btn{
display:flex;
align-items:center;
gap:8px;
color:#fff;
text-decoration:none;
font-size:14px;
padding:9px 12px;
border-radius:12px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
transition:all .2s ease;
}

.account-link:hover,
.account-btn:hover{
background:rgba(255,255,255,.12);
}

.account-logged{
position:relative;
}

.account-dropdown{
position:absolute;
top:calc(100% + 8px);
right:0;
min-width:190px;
background:#0f6a2f;
border-radius:12px;
padding:10px 0;
display:none;
z-index:1100;
box-shadow:0 16px 40px rgba(0,0,0,.25);
}

.account-logged.open .account-dropdown{
display:block;
}

.account-dropdown a{
display:block;
padding:10px 14px;
color:#fff;
text-decoration:none;
font-size:14px;
}

.account-dropdown a:hover{
background:rgba(255,255,255,.10);
}


/* =======================================================
HAMBURGUER
======================================================= */

.header-toggle{
display:none;
background:none;
border:0;
cursor:pointer;
}

.header-toggle span{
display:block;
width:24px;
height:3px;
background:#fff;
margin:5px 0;
}


/* =======================================================
HELPERS
======================================================= */

.mobile-only{
display:none;
}

.desktop-only{
display:block;
}


/* =======================================================
BUSCA MOBILE
======================================================= */

.mobile-search{
display:none;
padding:14px 16px;
background:#06461c;
border-top:1px solid rgba(255,255,255,.08);
}

.mobile-search .header-search{
border-radius:999px;
}


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

.header-nav-mobile{
display:none;
background:#06461c;
padding:16px 15px 15px;
}

.nav-list-mobile{
list-style:none;
margin:0;
padding:0;
}

.nav-list-mobile li{
margin-bottom:10px;
}

.nav-list-mobile a{
display:block;
font-size:15px;
font-weight:500;
color:#fff;
text-decoration:none;
}


/* botão pai */

.nav-list-mobile .nav-btn{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
font-size:15px;
font-weight:500;
color:#fff;
border:0;
background:none;
cursor:pointer;
padding:0;
}

/* seta */

.nav-list-mobile .has-sub > .nav-btn::after{
content:"▾";
font-size:16px;
color:#9be49b;
margin-left:10px;
transition:transform .2s ease;
}

.nav-list-mobile .has-sub.open > .nav-btn::after{
transform:rotate(180deg);
}


/* submenu mobile */

.header-nav-mobile .sub-menu{
position:static !important;
display:none;
background:rgba(255,255,255,.08);
border-radius:10px;
padding:10px 10px;
margin-top:10px;
box-shadow:none;
}

.header-nav-mobile .has-sub.open > .sub-menu{
display:block;
}

.header-nav-mobile .sub-menu a{
font-size:15px;
padding:5px 0;
display:block;
opacity:.9;
}


/* =======================================================
BREAKPOINT
======================================================= */

@media (max-width:980px){

.desktop-only{
display:none !important;
}

.mobile-only{
display:block !important;
}

.header-shop .header-top{
padding:12px 16px;
gap:12px;
}

.header-logo img{
height:46px;
}

.account-text{
display:none;
}

.header-toggle{
display:block;
}

.mobile-search{
display:block;
}

.header-nav-mobile.open{
display:block;
animation:menuFade .25s ease;
}

}

/* animação menu */

@keyframes menuFade{
from{
opacity:0;
transform:translateY(-6px);
}
to{
opacity:1;
transform:translateY(0);
}
}


/* =======================================================
FIX DROPDOWN DESKTOP
======================================================= */

.header-nav,
.header-nav .nav-list,
.header-nav .nav-list > li,
.has-sub{
overflow:visible !important;
}

.header-nav .nav-list{
overflow:visible !important;
}

.has-sub > .sub-menu{
z-index:2000;
}