/* =========================================================================
   HEADER 2027 — cabeçalho compartilhado (todas as páginas)

   Cores e medidas retiradas do Figma:
     - faixa superior ....... #12507d  (C_03)
     - bloco do cabeçalho ... #326ea0  (C_01) — logo, busca, WhatsApp e o menu
                                        ficam todos dentro do mesmo bloco azul
     - logo ................. versão branca
     - busca ................ pílula branca, 584x50
     - menu ................. mesmo azul do bloco, sem o gradiente antigo

   Arquivo separado de propósito: o style.css é compilado por SCSS e este tema
   não tem build disponível. Carregado depois dele, sobrescreve o necessário.
   ========================================================================= */

:root {
    --c2027-01: #326ea0;
    --c2027-02: #287ec1;
    --c2027-03: #12507d;
    --c2027-azul: #21527c;
    /* C_06 do Figma. Estava #13c33a, que não existe no design. */
    --c2027-verde: #2fad73;
}

/* -------------------------------------------------------------------------
   Faixa superior
   ------------------------------------------------------------------------- */

.header-topbar {
    background-color: var(--c2027-03);
    color: #fff;
    font-size: 13px;
}

.header-topbar__list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    min-height: 50px; /* altura da faixa no Figma */
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-topbar__item {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.header-topbar__item svg { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   Bloco azul: logo | busca | WhatsApp | Nossas lojas
   ------------------------------------------------------------------------- */

.header__desktop__center--2027 {
    background-color: var(--c2027-01);
    /* O tema aplicava 35px acima e abaixo para acomodar o logo centralizado. */
    padding: 0;
}

/* O conteúdo do design tem 1240px — o .container do tema é 1140px e deixava o
   cabeçalho desalinhado com as seções da página. */
.header__desktop__center--2027 .container,
.header__desktop .header__desktop__navigation .container {
    max-width: 1280px;
    padding-inline: 20px;
}

.header__desktop__center--2027 .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
    min-height: 115px;
}

.header__desktop__center--2027 .header__desktop__logo {
    flex-shrink: 0;
    width: 139px;
}

.header__desktop__center--2027 .header__desktop__logo img {
    width: 100%;
    height: auto;
}

/* O margin-top existia para acomodar o logo centralizado do layout antigo. */
.header__desktop__center--2027 .header__search {
    flex: 1 1 auto;
    width: auto;
    max-width: 584px;
    margin-top: 0;
}

/* Busca vira pílula branca, com o texto alinhado à esquerda. */
.header__desktop__center--2027 .header__search__box input {
    height: 50px;
    padding: 0 20px 0 52px;
    border: 0;
    border-radius: 25px;
    background: #fff;
    color: #333;
    text-align: left;
}

.header__desktop__center--2027 .header__search__box input::placeholder {
    color: #8a8a8a;
}

.header__desktop__center--2027 .header__search__box button {
    left: 20px;
}

.header__desktop__center--2027 .header__search__box button svg {
    fill: #8a8a8a;
}

.header__desktop__center--2027 .header__desktop__center__controller {
    flex-shrink: 0;
    margin-left: auto;
    gap: 28px;
}

/* O botão do WhatsApp era posicionado para o layout antigo (margem no topo). */
.header__desktop__center--2027 .header__whatsapp {
    width: auto;
    min-width: 260px;
    height: 50px;
    margin: 0;
    padding: 14px 26px;
    background: var(--c2027-verde);
    p{
        font-size: 22px;
        font-weight: 500;
        text-decoration: none;
        font-family: khand, sans-serif;
        color: #fff;
    }
}

.header__lojas {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: 'Khand', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.125px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.header__lojas:hover,
.header__lojas:focus {
    color: #fff;
    opacity: 0.8;
    text-decoration: none;
}

.header__lojas svg { flex-shrink: 0; }

/* -------------------------------------------------------------------------
   Menu — mesmo bloco azul, sem o gradiente antigo
   ------------------------------------------------------------------------- */

.header__desktop .header__desktop__navigation {
    background: var(--c2027-01);
}

.header__desktop .header__navigation > ul > li > a {
    padding: 25px 13px;
}

.header__desktop .header__navigation > ul > li > a:hover {
    background: transparent;
    border-radius: 0;
    box-shadow: inset 0 -3px 0 #fff;
}

/* -------------------------------------------------------------------------
   Rolagem — .header é sticky e o main-v2.js põe .active a partir de 80px.
   A faixa superior fica FORA do <header>, então ela já sai sozinha; o que
   gruda no topo é só este bloco azul (115 + 75 = 190px).
   ------------------------------------------------------------------------- */

/* O main-v2.js trava uma height inline no <header>, medida no carregamento, e
   só remede em resize e no load do logo — nunca ao rolar. Com o box congelado
   o bloco azul cresce por cima do conteúdo. Sem build disponível para mexer no
   JS, destravar aqui é o caminho; daí o !important, que é contra estilo inline. */
/* O tremor do cabeçalho ao rolar era o .active entrando e saindo em ciclo. A
   correção está no main.js (histerese de dois limiares) e não aqui: tentar
   resolver por CSS com overflow-anchor:none funcionava no Chrome mas o Safari
   não implementa essa propriedade. */
.header {
    height: auto !important;
}

/* O style.css encolhia o cabeçalho antigo (padding 35px -> 10px ao rolar).
   Este bloco já nasce com padding 0, então aquela regra passou a SOMAR 20px
   justamente ao rolar. Mesma especificidade e este arquivo carrega depois. */
.header.active .header__desktop__center--2027 {
    padding: 0;
}

/* Estado compacto: 190px come quase 1/3 de um notebook de 720px de altura. */
.header__desktop__center--2027 .container,
.header__desktop__center--2027 .header__desktop__logo,
.header__desktop .header__navigation > ul > li > a {
    transition: min-height 0.3s ease, width 0.3s ease, padding 0.3s ease;
}

.header.active .header__desktop__center--2027 .container {
    min-height: 80px;
}

/* O logo do Figma tem proporção ~1,98: a 139px fica com 70px de altura e a
   106px com 53px, cabendo na faixa de 80px do estado compacto. */
.header.active .header__desktop__center--2027 .header__desktop__logo {
    width: 106px;
}

.header.active .header__desktop .header__navigation > ul > li > a {
    padding: 12px 13px;
}

/* -------------------------------------------------------------------------
   Cabeçalho mobile — frame de 360px do Figma (338:417)

   Bloco azul de 142px: logo 83x42 à esquerda, WhatsApp e menu à direita, e a
   busca de 316x40 embaixo. Não precisa de media query: .header__mobile já é
   .d-xl-none, então estas regras só valem abaixo de 1200px.

   O menu aberto (.header__mobile__navigation) fica como está — não há versão
   nova dele no Figma.
   ------------------------------------------------------------------------- */

.header__mobile__center {
    padding: 0;
    background: var(--c2027-01);
    box-shadow: none;
}

.header__mobile__center .container,
.header__mobile__busca {
    max-width: 100%;
    padding-inline: 22px;
}

/* flex-start porque no desenho os botões alinham pelo TOPO do logo, não pelo
   centro da fileira. */
.header__mobile__center .container {
    align-items: flex-start;
    gap: 12px;
    padding-top: 20px;
}

/* Caixa do logo com a medida do desenho; a arte se ajusta dentro dela porque
   o arquivo cadastrado tem proporção diferente da do Figma. */
.header__mobile__logo {
    flex-shrink: 0;
    width: 83px;
    height: 42px;
}

.header__mobile__logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
}

.header__mobile__acoes {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header__mobile__whats,
.header__mobile__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: none;
}

.header__mobile__whats {
    border-radius: 50%;
    background-color: var(--c2027-verde);
}

.header__mobile__whats img { width: 16.67px; height: 16.67px; }
.header__mobile__menu img { width: 22.5px; height: 15px; }

.header__mobile__busca { padding-block: 20px; }

.header__mobile__busca .header__search {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.header__mobile__busca .header__search__box input {
    height: 40px;
    padding: 0 16px 0 42px;
    border: 1px solid #5d5d5d;
    border-radius: 30px;
    background: #f2f2f2;
    color: #373737;
    font-size: 14px;
    text-align: left;
}

.header__mobile__busca .header__search__box input::placeholder {
    color: #373737;
    opacity: 0.5;
}

.header__mobile__busca .header__search__box button { left: 17px; }
.header__mobile__busca .header__search__box button svg { fill: #373737; }

/* -------------------------------------------------------------------------
   Responsivo
   ------------------------------------------------------------------------- */

@media (max-width: 1399px) {
    .header__desktop__center--2027 .container { gap: 20px; }

    .header__desktop__center--2027 .header__desktop__center__controller { gap: 18px; }

    .header__desktop__center--2027 .header__whatsapp { min-width: 220px; }
}

/* Faixa superior no mobile: 36px de altura e 12px de texto, como no Figma. */
@media (max-width: 1199px) {
    .header-topbar { font-size: 12px; }

    .header-topbar__list { gap: 16px; min-height: 36px; }

    .header-topbar__item { gap: 6px; }

    .header-topbar__item svg { width: 14px; height: 14px; }
}