/* ===== HEADER — wrapper geral ===== */
.ekit-template-content-header {
    background-color: var(--color-bg) !important;
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-sm) 0;
}

.ekit-template-content-header .elementor-container {
    align-items: center;
    max-width: var(--max-width);
    margin: 0 auto;
}

/* ===== LOGO ===== */
.ekit-template-content-header .elementor-widget-image img {
    max-width: 140px;
    height: auto;
    filter: brightness(0); /* força o logo pra preto, caso o arquivo original seja branco */
}

/* ===== MENU (nav) ===== */
.ekit-template-content-header nav.ekit-wid-con {
    display: flex;
    justify-content: flex-end;
}

.ekit-template-content-header .elementskit-navbar-nav {
    display: flex;
    flex-wrap: nowrap !important;
    gap: var(--space-sm); /* 16px — reduzido de --space-lg pra caber na coluna de ~321px */
    list-style: none;
    margin: 0;
    padding: 0;
}

.ekit-template-content-header .ekit-menu-nav-link {
    white-space: nowrap; /* garante que "Minha Conta" não quebre em duas linhas */
}

/* Sublinhado animado no hover — detalhe de "elegância" que essas marcas usam bastante */
.ekit-template-content-header .ekit-menu-nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 1px;
    background-color: var(--color-fg);
    transition: width var(--duration-base) var(--ease-default);
}

.ekit-template-content-header .ekit-menu-nav-link:hover::after {
    width: 100%;
}

/* ===== BOTÃO HAMBURGER (mobile) ===== */
.ekit-template-content-header .elementskit-menu-hamburger {
    display: none;
}

.ekit-template-content-header .elementskit-menu-hamburger-icon {
    background-color: var(--color-fg);
}

@media (max-width: 1024px) {
    .ekit-template-content-header .elementskit-navbar-nav {
        flex-direction: column;
        gap: var(--space-sm);
    }
    .ekit-template-content-header .elementskit-menu-hamburger {
        display: block;
    }
}


.ekit-template-content-header .elementor-section {
    background-color: var(--color-bg) !important;
    background-image: none !important;
}

/* Os links do menu também têm fundo preto vindo do Elementor — ainda não corrigido */
.ekit-template-content-header .elementskit-navbar-nav > li > a {
    background-color: transparent !important;
    color: var(--color-fg) !important;
}

.ekit-template-content-header .elementskit-menu-hamburger-icon {
    background-color: var(--color-fg) !important;
}