/*
 * Cabeçalho da loja — tema bwebstore.
 *
 * CSS próprio em vez de classes utilitárias: o bundle do storefront é gerado
 * com purge do Tailwind sobre as views do pacote Webkul, então classes usadas
 * apenas no tema não existiriam no CSS compilado.
 *
 * Todas as cores saem das custom properties publicadas por BrandServiceProvider,
 * portanto trocar a identidade de um cliente continua sendo editar o .env.
 */

/* O <header> do Bagisto que envolve este bloco já é sticky; não aninhar outro. */
.bw-header {
    background: #fff;
    font-family: var(--brand-font-sans);
}

/*
 * Mesma grade do conteúdo da loja: o container do tema tem 1440px com 90px de
 * recuo. Usar medidas próprias fazia o logo e o menu começarem 46px à esquerda
 * dos produtos em telas largas — desalinho que se lê como "o cabeçalho não
 * combina com o resto", ainda que fonte e cor estejam corretas.
 *
 * Os recuos menores acompanham os mesmos pontos de quebra do tema.
 */
.bw-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 90px;
}

/*
 * O recuo de 90px vale por todo o desktop, para não voltar a divergir do
 * conteúdo em larguras intermediárias. Abaixo de 1024px o tema já troca para o
 * cabeçalho mobile, então os recuos menores servem ao rodapé, que é exibido em
 * todas as larguras.
 */
@media (max-width: 1023px) {
    .bw-container {
        padding: 0 32px;
    }
}

@media (max-width: 640px) {
    .bw-container {
        padding: 0 16px;
    }
}

/* ---------------------------------------------------------------- topbar */

.bw-topbar {
    border-bottom: 1px solid var(--brand-border);
    background: #fff;
}

.bw-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 38px;
    font-size: var(--brand-fs-xs);
    color: var(--brand-text-muted);
}

.bw-topbar__grupo {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0;
}

.bw-aviso,
.bw-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.bw-aviso svg,
.bw-topbar__link svg {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--brand-primary);
}

.bw-topbar__link {
    color: var(--brand-text-muted);
    text-decoration: none;
    transition: color .15s ease;
}

.bw-topbar__link:hover {
    color: var(--brand-primary);
}

.bw-topbar__link--forte {
    font-weight: 600;
    color: var(--brand-text);
}

/* ------------------------------------------------------------ barra principal */

.bw-main__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    height: 92px;
}

.bw-logo {
    flex: none;
    display: inline-flex;
    align-items: center;
}

.bw-logo img {
    max-height: 46px;
    width: auto;
    display: block;
}

/* busca ------------------------------------------------------------------ */

/*
 * As margens automáticas dos dois lados dividem em partes iguais o espaço que
 * sobra depois do logo e das ações, deixando a busca centralizada entre eles.
 * Sem elas, a busca para de crescer no max-width e todo o excedente se acumula
 * de um lado só, colando o campo no logo.
 */
.bw-busca {
    flex: 1 1 auto;
    max-width: 620px;
    margin-inline: auto;
}

.bw-busca__form {
    position: relative;
    display: block;
}

.bw-busca__input {
    width: 100%;
    height: 46px;
    padding: 0 116px 0 46px;
    font-size: var(--brand-fs-sm);
    color: var(--brand-text);
    background: var(--brand-surface-muted);
    border: 1px solid var(--brand-border);
    border-radius: 999px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.bw-busca__input::placeholder {
    color: var(--brand-text-muted);
}

.bw-busca__input:focus {
    background: #fff;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

.bw-busca__lupa {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--brand-text-muted);
    pointer-events: none;
}

.bw-busca__botao {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    padding: 0 22px;
    font-size: var(--brand-fs-sm);
    font-weight: 600;
    color: var(--brand-on-primary);
    background: var(--brand-primary);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease;
}

.bw-busca__botao:hover {
    background: var(--brand-primary-hover);
}

/* ações (conta, favoritos, carrinho) ------------------------------------- */

.bw-acoes {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bw-acao {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: var(--brand-radius);
    color: var(--brand-text);
    text-decoration: none;
    line-height: 1.15;
    transition: background .15s ease, color .15s ease;
}

.bw-acao:hover {
    background: var(--brand-surface-muted);
    color: var(--brand-primary);
}

.bw-acao svg {
    width: 22px;
    height: 22px;
    flex: none;
}

.bw-acao__texto {
    display: grid;
    gap: 1px;
    white-space: nowrap;
}

.bw-acao__rotulo {
    font-size: var(--brand-fs-xs);
    color: var(--brand-text-muted);
}

.bw-acao__valor {
    font-size: var(--brand-fs-sm);
    font-weight: 600;
}

.bw-acao__badge {
    position: absolute;
    top: 2px;
    left: 26px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: var(--brand-fs-xs);
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    color: #fff;
    background: var(--brand-accent);
    border-radius: 999px;
}

/*
 * O carrinho usa o mini-cart do pacote, que traz o próprio ícone da fonte de
 * ícones e um selo de quantidade posicionado para o header original. Aqui só
 * ajustamos tamanho e posição para acompanhar os demais itens; a cor do selo já
 * segue a marca via brand-theme.css.
 */
.bw-acao--carrinho {
    cursor: pointer;
}

.bw-acao--carrinho .icon-cart {
    font-size: 22px;
    line-height: 1;
    color: var(--brand-text);
}

.bw-acao--carrinho:hover .icon-cart {
    color: var(--brand-primary);
}

/* selo de quantidade do componente, realinhado a este cabeçalho */
.bw-acao--carrinho .absolute {
    top: -10px !important;
    left: 12px !important;
    padding: 2px 6px !important;
    font-size: var(--brand-fs-xs) !important;
    line-height: 13px !important;
}

/* ------------------------------------------------------------------ menu */

.bw-menu {
    border-top: 1px solid var(--brand-border);
    border-bottom: 1px solid var(--brand-border);
    background: #fff;
}

.bw-menu__inner {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 50px;
}

.bw-menu__todas {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    margin-right: 12px;
    font-size: var(--brand-fs-sm);
    font-weight: 600;
    color: var(--brand-on-primary);
    background: var(--brand-primary);
    text-decoration: none;
    border-radius: var(--brand-radius) var(--brand-radius) 0 0;
}

.bw-menu__todas svg {
    width: 17px;
    height: 17px;
}

.bw-menu__item {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: var(--brand-fs-sm);
    font-weight: 500;
    color: var(--brand-text);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}

.bw-menu__item:hover {
    color: var(--brand-primary);
    border-bottom-color: var(--brand-primary);
}

.bw-menu__item--destaque {
    color: var(--brand-accent);
    font-weight: 700;
}

/* ---------------------------------------------------- cabeçalho mobile
 *
 * O header mobile é o do pacote Webkul (567 linhas) e ali o botão do menu vem
 * antes do logo. Em celular a mão segura o aparelho pela direita, então o menu
 * fica mais fácil de alcançar junto dos demais ícones.
 *
 * Reordenado por CSS em vez de sobrescrever a view: `display: contents` no
 * grupo da esquerda promove o botão e o logo a itens do mesmo flex dos ícones,
 * o que permite usar `order`. Se um dia o Bagisto mudar esse markup, o layout
 * apenas volta ao original — nada quebra.
 */

header .lg\:hidden > .justify-between {
    gap: 12px;
}

/* deixa de ser caixa: botão e logo viram irmãos do grupo de ícones */
header .lg\:hidden > .justify-between > div:first-child {
    display: contents;
}

/* logo primeiro, empurrando todo o resto para a direita */
header .lg\:hidden > .justify-between > div:first-child > a {
    order: 1;
    margin-right: auto;
}

/* ícones de comparar, favoritos, carrinho e conta */
header .lg\:hidden > .justify-between > div:not(:first-child) {
    order: 2;
}

/* botão do menu por último, no canto de mais fácil alcance */
header .lg\:hidden > .justify-between > div:first-child > div {
    order: 3;
}

/* telas menores ---------------------------------------------------------- */

@media (max-width: 1280px) {
    .bw-main__inner { gap: 24px; }
    .bw-acao__texto { display: none; }
    .bw-acao { padding: 8px; }
    .bw-acao__badge { left: 22px; }
}

@media (max-width: 1120px) {
    .bw-topbar__grupo--avisos .bw-aviso:nth-child(n+3) { display: none; }
    .bw-menu__item { padding: 0 10px; font-size: var(--brand-fs-sm); }
}