/* =========================================================
   MENU PRINCIPAL — VERSÃO MAIS LIMPA E UNIFORME
   ========================================================= */

.site-header-v2{
  width:min(1240px,calc(100% - 28px));
  margin:14px auto 0;
  padding:10px 12px 10px 16px;

  display:flex;
  align-items:center;
  gap:18px;

  position:sticky;
  top:10px;
  z-index:100;

  border-radius:24px;

  background:rgba(255,248,238,.92);
  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,.78);

  box-shadow:
    0 12px 35px rgba(58,45,30,.09);
}

/* Marca */
.site-header-v2 .brand{
  flex:0 0 auto;
  min-width:190px;

  display:flex;
  align-items:center;
  gap:10px;

  text-decoration:none;
}

.site-header-v2 .brand-copy{
  min-width:0;
}

.site-header-v2 .brand-copy strong,
.site-header-v2 .brand-copy small{
  display:block;
}

.site-header-v2 .brand-copy strong{
  white-space:nowrap;
}

.site-header-v2 .brand-copy small{
  color:var(--muted,#6c746f);
  font-size:.72rem;
}

/* Navegação */
.main-nav-v2{
  flex:1 1 auto;
  min-width:0;

  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.nav-group{
  display:flex;
  align-items:center;
  gap:6px;

  min-width:0;
}

/* TODOS os itens ficam com a mesma altura */
.main-nav-v2 .nav-item,
.cart-button-v2{
  min-height:42px;
  height:42px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:0 12px;

  border-radius:13px;

  font-size:.82rem;
  font-weight:700;

  line-height:1;
  white-space:nowrap;

  text-decoration:none;

  border:1px solid transparent;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .2s ease;
}

.main-nav-v2 .nav-item{
  color:#405047;
}

.main-nav-v2 .nav-item:hover{
  background:rgba(111,157,114,.11);
  border-color:rgba(111,157,114,.13);
}

.nav-divider{
  width:1px;
  height:28px;
  flex:0 0 1px;

  background:rgba(38,51,42,.11);

  margin:0 2px;
}

/* Itens de experiência */
.nav-item-feature{
  gap:6px;

  background:rgba(255,255,255,.5);
  border-color:rgba(38,51,42,.08)!important;
}

.nav-icon{
  font-size:.93rem;
  line-height:1;
}

/* Sacola */
.cart-button-v2{
  flex:0 0 auto;

  gap:8px;

  border:0;

  background:var(--ink,#26332a);
  color:#fff;

  cursor:pointer;

  padding-left:15px;
  padding-right:8px;
}

.cart-button-v2:hover{
  transform:translateY(-1px);
}

.cart-count-badge{
  min-width:27px;
  height:27px;

  padding:0 7px;

  display:grid;
  place-items:center;

  border-radius:999px;

  background:#fff;
  color:var(--ink,#26332a);

  font-size:.73rem;
  font-weight:800;
}

/* Botão mobile */
.site-header-v2 .menu-toggle{
  display:none;

  min-height:42px;

  align-items:center;
  justify-content:center;
  gap:7px;

  border:0;
  border-radius:13px;

  padding:0 14px;

  background:var(--ink,#26332a);
  color:#fff;

  font-weight:800;
}

.menu-toggle-icon{
  font-size:1rem;
}

/* =========================================================
   TABLET — reorganiza em duas linhas sem deformar os botões
   ========================================================= */
@media (max-width:1180px){

  .site-header-v2{
    flex-wrap:wrap;
  }

  .site-header-v2 .brand{
    margin-right:auto;
  }

  .main-nav-v2{
    flex-basis:100%;
    justify-content:space-between;

    padding-top:8px;

    border-top:1px solid rgba(38,51,42,.08);
  }

  .nav-group-primary{
    flex:1 1 auto;
  }

  .nav-group-experiences{
    flex:0 0 auto;
  }

}

/* =========================================================
   MOBILE — um painel vertical, todos os botões iguais
   ========================================================= */
@media (max-width:820px){

  .site-header-v2{
    flex-wrap:nowrap;
    justify-content:space-between;
  }

  .site-header-v2 .brand{
    min-width:0;
    flex:1 1 auto;
  }

  .site-header-v2 .brand-copy strong{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .site-header-v2 .menu-toggle{
    display:inline-flex;
    flex:0 0 auto;
  }

  .main-nav-v2{
    display:none;

    position:absolute;

    left:0;
    right:0;
    top:calc(100% + 8px);

    padding:12px;

    flex-direction:column;
    align-items:stretch;
    gap:10px;

    border:1px solid rgba(255,255,255,.78);
    border-radius:20px;

    background:rgba(255,248,238,.98);

    box-shadow:
      0 20px 55px rgba(55,42,27,.15);
  }

  .main-nav-v2.open{
    display:flex;
  }

  .nav-group{
    width:100%;

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;
  }

  .nav-divider{
    width:100%;
    height:1px;

    margin:0;

    background:rgba(38,51,42,.09);
  }

  .main-nav-v2 .nav-item,
  .cart-button-v2{
    width:100%;
    min-height:46px;
    height:46px;

    justify-content:flex-start;

    padding:0 14px;

    border-radius:13px;

    background:#fff;

    border:1px solid rgba(38,51,42,.09);

    color:var(--ink,#26332a);

    box-shadow:none;
  }

  .main-nav-v2 .nav-item{
    white-space:normal;
    line-height:1.15;
  }

  .nav-item-feature{
    gap:9px;
  }

  .cart-button-v2{
    justify-content:space-between;

    background:var(--ink,#26332a);
    color:#fff;

    border-color:transparent;
  }

  .cart-count-badge{
    background:#fff;
    color:var(--ink,#26332a);
  }

}

/* =========================================================
   MOBILE PEQUENO — um botão por linha
   ========================================================= */
@media (max-width:470px){

  .site-header-v2{
    width:min(100% - 16px,1240px);

    padding:9px 10px 9px 12px;
  }

  .site-header-v2 .brand-mark{
    width:38px;
    height:38px;
  }

  .site-header-v2 .brand-copy strong{
    font-size:.91rem;
  }

  .site-header-v2 .brand-copy small{
    display:none;
  }

  .nav-group{
    grid-template-columns:1fr;
  }

  .main-nav-v2 .nav-item,
  .cart-button-v2{
    min-height:48px;
    height:48px;

    font-size:.88rem;
  }
}