/* ============================================================
   header.css — Top bar, main header, navegação
   ============================================================ */

/* ── TOP BAR ── */

.top-bar {
    background-color: var(--ecom-color-secondary-800);
    color: var(--ecom-text-on-dark);
    font-size: var(--ecom-text-xs);
    padding-block: var(--ecom-space-2);
    border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.top-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ecom-space-4);
}

.top-bar__contacts {
    display: flex;
    align-items: center;
    gap: var(--ecom-space-6);
    flex-wrap: wrap;
}

.top-bar__contact-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ecom-space-2);
    color: var(--ecom-color-neutral-300);
    transition: color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .top-bar__contact-item:hover {
        color: var(--ecom-color-neutral-0);
    }

.top-bar__contact-icon {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.top-bar__social {
    display: flex;
    align-items: center;
    gap: var(--ecom-space-3);
}

.top-bar__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--ecom-color-neutral-400);
    transition: color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .top-bar__social-link:hover {
        color: var(--ecom-color-primary-500);
    }

    .top-bar__social-link svg {
        width: 1rem;
        height: 1rem;
    }

/* ── MAIN HEADER ── */

.main-header {
    background-color: var(--ecom-bg-dark);
    padding-block: var(--ecom-space-4);
}

.main-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ecom-space-6);
}

.main-header__logo {
    flex-shrink: 0;
}

    .main-header__logo img {
        height: 60px;
        width: auto;
    }

/* Search */
.main-header__search {
    flex: 1;
    max-width: 36rem;
    display: none;
}

@media (min-width: 768px) {
    .main-header__search {
        display: block;
    }
}

.search-form {
    display: flex;
    align-items: center;
    background-color: var(--ecom-color-secondary-700);
    border: 1px solid var(--ecom-color-secondary-600);
    border-radius: var(--ecom-radius-lg);
    overflow: hidden;
    transition: border-color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .search-form:focus-within {
        border-color: var(--ecom-color-primary-500);
    }

.search-form__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: var(--ecom-space-4);
    color: var(--ecom-color-neutral-400);
}

    .search-form__icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

.search-form__input {
    flex: 1;
    padding: var(--ecom-space-3) var(--ecom-space-4);
    background: transparent;
    border: none;
    color: var(--ecom-color-neutral-0);
    font-size: var(--ecom-text-sm);
}

    .search-form__input::placeholder {
        color: var(--ecom-color-neutral-400);
    }

/* Actions */
.main-header__actions {
    display: flex;
    align-items: center;
    gap: var(--ecom-space-3);
    flex-shrink: 0;
}

.header-cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--ecom-color-secondary-700);
    border-radius: var(--ecom-radius-lg);
    color: var(--ecom-color-neutral-0);
    transition: background-color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .header-cart:hover {
        background-color: var(--ecom-color-secondary-600);
    }

    .header-cart svg {
        width: 1.5rem;
        height: 1.5rem;
    }

.header-cart__count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: var(--ecom-color-primary-500);
    color: var(--ecom-color-neutral-0);
    font-size: 0.625rem;
    font-weight: var(--ecom-font-bold);
    min-width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ecom-radius-full);
    padding-inline: 0.25rem;
}

/* ── WISHLIST BUTTON ── */

.header-wishlist {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    background-color: var(--ecom-color-secondary-700);
    border-radius: var(--ecom-radius-lg);
    color: var(--ecom-color-neutral-0);
    text-decoration: none;
    transition: background-color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .header-wishlist:hover {
        background-color: var(--ecom-color-secondary-600);
    }

.header-wishlist--active,
.header-wishlist--active:hover {
    background-color: var(--ecom-color-primary-600);
}

.header-wishlist svg {
    width: 1.5rem;
    height: 1.5rem;
}

.header-wishlist__count {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: var(--ecom-color-error);
    color: var(--ecom-color-neutral-0);
    font-size: 0.625rem;
    font-weight: var(--ecom-font-bold);
    min-width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ecom-radius-full);
    padding-inline: 0.25rem;
    line-height: 1;
}

/* ── NAVBAR ── */

.site-nav {
    background-color: var(--ecom-bg-dark);
    border-top: 1px solid rgb(255 255 255 / 0.08);
}

.site-nav__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ecom-space-1);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block: var(--ecom-space-1);
}

    .site-nav__list::-webkit-scrollbar {
        display: none;
    }

.site-nav__link {
    display: block;
    padding: var(--ecom-space-3) var(--ecom-space-4);
    font-size: var(--ecom-text-sm);
    font-weight: var(--ecom-font-medium);
    color: var(--ecom-color-neutral-300);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color var(--ecom-duration-fast) var(--ecom-ease-default), border-color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .site-nav__link:hover {
        color: var(--ecom-color-neutral-0);
    }

.site-nav__link--active {
    color: var(--ecom-color-primary-500);
    border-bottom-color: var(--ecom-color-primary-500);
}

/* ── HEADER ACTION BUTTON (user icon) ── */

.header__action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--ecom-color-neutral-0);
    background-color: var(--ecom-color-secondary-700);
    border-radius: var(--ecom-radius-lg);
    transition: background-color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .header__action-btn:hover {
        background-color: var(--ecom-color-secondary-600);
    }

    .header__action-btn svg {
        width: 1.375rem;
        height: 1.375rem;
    }

/* ── MOBILE MENU TOGGLE ── */

.mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--ecom-color-neutral-0);
}

@media (min-width: 1024px) {
    .mobile-menu-toggle {
        display: none;
    }
}

.mobile-menu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* ── MOBILE SEARCH TOGGLE ── */

.header__search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--ecom-color-neutral-0);
    background-color: var(--ecom-color-secondary-700);
    border-radius: var(--ecom-radius-lg);
    transition: background-color var(--ecom-duration-fast) var(--ecom-ease-default);
}

    .header__search-toggle:hover {
        background-color: var(--ecom-color-secondary-600);
    }

    .header__search-toggle svg {
        width: 1.25rem;
        height: 1.25rem;
    }

@media (min-width: 768px) {
    .header__search-toggle {
        display: none;
    }
}

/* Mobile search expanded state */
.main-header__search--mobile-open {
    display: block;
}

@media (max-width: 767px) {
    .main-header__search--mobile-open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: var(--ecom-space-3) var(--ecom-space-4);
        background-color: var(--ecom-bg-dark);
        border-top: 1px solid rgb(255 255 255 / 0.08);
        z-index: var(--ecom-z-dropdown);
    }
}

/* ── MOBILE NAV OPEN STATE ── */

@media (max-width: 1023px) {
    .site-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height var(--ecom-duration-normal) var(--ecom-ease-default);
    }

    .site-nav--open {
        max-height: 20rem;
    }

    .site-nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding-block: var(--ecom-space-2);
    }

    .site-nav__link {
        width: 100%;
        border-bottom: none;
        border-left: 2px solid transparent;
        padding: var(--ecom-space-3) var(--ecom-space-4);
    }

    .site-nav__link--active {
        border-left-color: var(--ecom-color-primary-500);
        border-bottom-color: transparent;
    }
}

/* ── DESKTOP: base para transição suave ── */

@media (min-width: 1024px) {
    /* Fundo no site-header evita qualquer flash de branco */
    .site-header {
        background-color: var(--ecom-bg-dark);
        /* Pre-set flex — sem troca de display no scroll */
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        transition: box-shadow 300ms var(--ecom-ease-default);
    }

    /* Seções empilhadas normalmente (flex-wrap) */
    .top-bar {
        flex: 0 0 100%;
    }

    .main-header {
        flex: 0 0 100%;
    }

    .site-nav {
        flex: 0 0 100%;
    }

    /* Top-bar: colapsa suavemente com max-height */
    .top-bar {
        overflow: hidden;
        max-height: 3rem;
        opacity: 1;
        transition: max-height 280ms var(--ecom-ease-default), opacity 200ms var(--ecom-ease-default), padding-block 280ms var(--ecom-ease-default);
    }

    /* Main-header: anima padding e logo */
    .main-header {
        transition: padding-block 260ms var(--ecom-ease-default);
    }

    .main-header__logo img {
        transition: height 260ms var(--ecom-ease-default);
    }

    /* Search: colapsa largura (max-width: 36rem já definido na base) */
    .main-header__search {
        transition: max-width 260ms var(--ecom-ease-default), opacity 200ms var(--ecom-ease-default);
    }

    /* ════════════════════════════════════════════════
     ESTADO SCROLLED — header compacto
     Layout: [Logo] ←→ [Nav links] ←→ [Ações]
     Tudo dentro do container da página
     ════════════════════════════════════════════════ */

    .site-header--scrolled {
        box-shadow: 0 2px 16px 0 rgb(0 0 0 / 0.5);
    }

        /* Top-bar colapsa suavemente */
        .site-header--scrolled .top-bar {
            max-height: 0;
            opacity: 0;
            padding-block: 0;
        }

        /* Main-header: 100% de largura */
        .site-header--scrolled .main-header {
            flex: 0 0 100%;
            padding-block: var(--ecom-space-2);
            background: transparent; /* fundo vem do .site-header */
            position: relative;
            z-index: 1; /* logo e ações acima do overlay da nav */
        }

        /* Inner container: logo esquerda, ações direita */
        .site-header--scrolled .main-header__inner {
            justify-content: space-between;
            padding-inline: var(--ecom-container-pad-md);
            position: relative;
            z-index: 1;
        }

        .site-header--scrolled .main-header__logo img {
            height: 1.875rem; /* ~30px, prop 160×40 → 120px largura */
        }

        /* Search: colapsa (já tem max-width: 36rem) */
        .site-header--scrolled .main-header__search {
            max-width: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            flex: none;
        }

        /* Ações: mostra WhatsApp + cart + wishlist + login */
        .site-header--scrolled .main-header__actions {
            display: flex;
            gap: var(--ecom-space-2);
            align-items: center;
        }

        /* Oculta o toggle de busca mobile (não faz sentido no sticky desktop) */
        .site-header--scrolled .header__search-toggle {
            display: none;
        }

        /* WhatsApp: só ícone no compact (mesmo tamanho dos outros botões) */
        .site-header--scrolled .btn--whatsapp {
            width: 2.75rem;
            height: 2.75rem;
            padding: 0;
            font-size: 0; /* esconde o texto */
            justify-content: center;
            border-radius: var(--ecom-radius-lg);
            gap: 0;
        }

            .site-header--scrolled .btn--whatsapp svg {
                width: 1.375rem;
                height: 1.375rem;
                flex-shrink: 0;
            }

        /* Site-nav: overlay sobre o espaço central do main-header.
     clamp() garante alinhamento ao container em qualquer viewport:
       min  = padding-left(32px) + logo(120px) + gap(24px) = 176px = 11rem
       calc = container-offset + 11rem  (viewport-aware)
     Direita:
       min  = padding-right(32px) + 4 ícones×2.75rem + 3 gaps×0.5rem = 15rem
       calc = container-offset + 15rem                                         */
        .site-header--scrolled .site-nav {
            position: absolute; /* relativo a .site-header (sticky = positioned) */
            inset: 0;
            display: flex;
            align-items: center;
            border-top: none;
            background: transparent; /* não encobre logo nem ações */
            /*    pointer-events: none;
*/ z-index: 3;
        }

            .site-header--scrolled .site-nav .container {
                padding-inline-start: clamp( 9rem, calc((100vw - var(--ecom-container-max)) / 2 + 9rem), 99rem );
                padding-inline-end: clamp( 5.5rem, calc((100vw - var(--ecom-container-max)) / 2 + 5.5rem), 99rem );
            }
        /*  .site-header--scrolled .site-nav .container {
  padding-inline-start: clamp(
    9rem,
    calc((100vw - var(--ecom-container-max)) / 2 + 9rem),
    99rem
  );

  padding-inline-end: clamp(
    5.5rem,
    calc((100vw - var(--ecom-container-max)) / 2 + 5.5rem),
    99rem
  );
}*/
        /*.site-header--scrolled .site-nav .container {
        pointer-events: auto;
        max-width: none;
        margin: 0;
        width: 100%;
        padding-inline-start: clamp( 9rem, calc((100vw - var(--ecom-container-max)) / 2 + 9rem), 99rem );
        padding-inline-end: clamp( 5.5rem, calc((100vw - var(--ecom-container-max)) / 2 + 5.5rem), 99rem );
    }*/
        .site-header--scrolled .site-nav__list {
            justify-content: center;
            gap: 0;
            overflow: hidden;
        }

        .site-header--scrolled .site-nav__link {
            padding-inline: 0.55rem;
            font-size: 0.8125rem;
        }

        .site-header--scrolled .site-nav__list {
            justify-content: flex-start;
            padding-block: 0;
            height: 100%;
            align-items: center;
        }

        .site-header--scrolled .site-nav__link {
            height: 100%;
            display: flex;
            align-items: center;
        }
}

/* ── RESPONSIVE (mobile override na seção abaixo) ── */

/* ══════════════════════════════════════════════════════════
   MOBILE HEADER EXCLUSIVO — < 768px
   Layout: [logo] ←→ [search-icon][cart][menu]
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
    /* Top bar e nav escondidos */
    .top-bar {
        display: none;
    }

    .site-nav {
        display: none;
    }

    /* Header compacto */
    .main-header {
        padding-block: var(--ecom-space-3);
        position: relative;
    }

    .main-header__inner {
        gap: var(--ecom-space-2);
        justify-content: space-between;
        /* Desfazer qualquer position/order herdado */
        position: static;
    }

    /* Logo: esquerda, normal no flow */
    .main-header__logo {
        position: static;
        transform: none;
        order: unset;
        flex-shrink: 0;
    }

        .main-header__logo img {
            height: 60px;
            width: auto;
        }

    /* Search form (input): completamente oculto no mobile */
    .main-header__search {
        display: none;
    }

    /* Actions: direita — mostra só search-icon, cart, hamburger */
    .main-header__actions {
        order: unset;
        margin-left: auto;
        gap: var(--ecom-space-2);
        flex-shrink: 0;
    }

    /* Ocultar WhatsApp e ícone de usuário */
    .btn--whatsapp {
        display: none;
    }

    .header__action-btn {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════
   TABLET HEADER — 768px a 1023px
   ══════════════════════════════════════════════════════════ */

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex;
    }

    .btn--whatsapp {
        display: none;
    }
}

@media (min-width: 1024px) {

    /*
   * No sticky, a main-header precisa ficar ACIMA da navegação.
   *
   * Antes:
   *   main-header = z-index 10
   *   site-nav    = z-index 20
   *
   * Mesmo o WhatsApp tendo z-index 30, ele continuava preso
   * dentro do stacking context da main-header (z-index 10).
   * Resultado: o botão aparecia, mas a camada da navegação
   * ficava por cima e capturava o clique.
   */
    .site-header--scrolled .main-header {
        position: relative;
        z-index: 30;
        pointer-events: none;
    }

    .site-header--scrolled .main-header__inner {
        position: relative;
        z-index: 31;
        pointer-events: none;
    }

    /*
   * Somente os elementos realmente clicáveis da main-header
   * voltam a receber eventos.
   */
    .site-header--scrolled .main-header__logo,
    .site-header--scrolled .main-header__actions,
    .site-header--scrolled .main-header__actions a,
    .site-header--scrolled .btn--whatsapp {
        position: relative;
        z-index: 32;
        pointer-events: auto;
    }

    /*
   * A navegação fica atrás da main-header.
   *
   * Como a main-header está com pointer-events:none nas áreas
   * vazias, os links centrais do menu continuam clicáveis.
   */
    .site-header--scrolled .site-nav {
        z-index: 20;
        pointer-events: auto;
    }

        .site-header--scrolled .site-nav .container,
        .site-header--scrolled .site-nav__list,
        .site-header--scrolled .site-nav__link {
            pointer-events: auto;
        }
}