@media (max-width: 1099px) { /* Define explicitamente a composição móvel para impedir a quarta coluna vista na captura. */
    .header-main { /* Mantém os três controles nas posições previstas para o celular. */
        display: grid; /* Evita que alterações antigas de flex afetem o alinhamento. */
        grid-template-columns: 48px minmax(0, 1fr) 48px; /* Reserva o centro flexível para a logo e as laterais para os botões. */
        align-items: center; /* Centraliza os controles na mesma linha. */
        gap: 12px; /* Preserva espaço para a marca em celulares estreitos. */
        min-height: 0; /* Remove qualquer altura mínima herdada do desktop. */
        padding: 24px 16px; /* Mantém respiro sem aumentar a largura total do cabeçalho. */
    } /* Encerra a grade móvel. */
    .header-main .menu-toggle { /* Fixa a posição do botão lateral. */
        grid-column: 1; /* Usa a primeira coluna em vez de depender da ordem automática. */
        grid-row: 1; /* Mantém o menu na linha da marca. */
        width: 48px; /* Impede que o tamanho de tablet ultrapasse a coluna. */
        height: 48px; /* Mantém o alvo circular e confortável. */
    } /* Encerra a posição do menu. */
    .header-main .brand { /* Mantém a identidade centralizada entre os controles. */
        grid-column: 2; /* Usa a coluna flexível para a imagem. */
        grid-row: 1; /* Evita criar uma linha separada para a marca. */
        min-width: 0; /* Permite reduzir a caixa sem alargar a página. */
    } /* Encerra a posição da marca. */
    .header-main .header-cart { /* Corrige o carrinho que apareceu abaixo da marca na captura. */
        grid-column: 3; /* Reserva a última coluna exclusivamente ao carrinho. */
        grid-row: 1; /* Mantém o controle na mesma linha dos demais. */
        width: 48px; /* Ajusta o círculo à coluna disponível. */
        height: 48px; /* Preserva a proporção do botão. */
    } /* Encerra a posição do carrinho. */
} /* Encerra a proteção do layout móvel. */
.desktop-navigation { /* Mantém os links extras fora da composição móvel. */
    display: none; /* O celular continua usando o menu lateral existente. */
} /* Encerra a navegação desktop em telas pequenas. */
.announcement a { /* Identifica a chamada de contato dentro da faixa superior. */
    color: #fff; /* Mantém contraste sobre o fundo azul da marca. */
    font-weight: 700; /* Destaca a ação de iniciar atendimento. */
    text-underline-offset: 3px; /* Separa o sublinhado do texto para melhorar a leitura. */
} /* Encerra a chamada da faixa. */
@media (min-width: 1100px) { /* Aplica a composição da referência somente no desktop. */
    .announcement { /* Mantém a faixa superior discreta como no modelo. */
        padding: 8px 24px; /* Reduz a altura sem comprimir o texto. */
        font-size: 13px; /* Equilibra a faixa com a linha principal. */
    } /* Encerra a faixa do desktop. */
    .header-main { /* Coloca a marca à esquerda e as ações à direita. */
        grid-template-columns: minmax(180px, 1fr) auto 44px; /* Reserva espaço flexível para a marca e estável para links e carrinho. */
        gap: 24px; /* Separa a navegação do carrinho. */
        min-height: 124px; /* Reproduz o respiro vertical do cabeçalho de referência. */
        padding: 24px 40px; /* Alinha o conteúdo com a busca abaixo. */
        max-width: 1360px; /* Aproveita a largura de monitores sem esticar demais a página. */
    } /* Encerra a linha principal do desktop. */
    .header-main .menu-toggle { /* Substitui o menu móvel por links visíveis. */
        display: none; /* Dispensa o botão lateral nesta largura. */
    } /* Encerra o botão móvel no desktop. */
    .header-main .brand { /* Alinha a identidade ao início da linha. */
        justify-content: flex-start; /* Move a logo para a esquerda como na referência. */
    } /* Encerra o alinhamento da marca. */
    .header-main .brand img { /* Dimensiona a logo para a área mais ampla. */
        width: 250px; /* Dá destaque à marca sem competir com os links. */
    } /* Encerra a logo no desktop. */
    .desktop-navigation { /* Organiza os destinos horizontalmente. */
        display: flex; /* Coloca os links lado a lado. */
        align-items: center; /* Centraliza os links com o carrinho. */
        gap: 8px; /* Mantém separação entre as áreas clicáveis. */
    } /* Encerra a organização dos links desktop. */
    .desktop-navigation a { /* Define áreas confortáveis para navegação por mouse ou toque. */
        display: inline-flex; /* Permite centralizar o texto dentro dos links. */
        align-items: center; /* Centraliza verticalmente os rótulos. */
        min-height: 44px; /* Mantém alvo de interação acessível. */
        padding: 10px 16px; /* Dá espaço lateral aos nomes. */
        border-radius: 999px; /* Permite o destaque em cápsula da página atual. */
        color: #26344b; /* Preserva legibilidade no fundo branco. */
        text-decoration: none; /* Mantém aparência de navegação principal. */
        font-size: 15px; /* Equilibra legibilidade e espaço disponível. */
        font-weight: 600; /* Destaca as opções principais. */
        white-space: nowrap; /* Mantém cada destino em uma linha. */
    } /* Encerra os links desktop. */
    .desktop-navigation a:hover { /* Identifica a opção apontada pelo visitante. */
        background: #eaf0ff; /* Usa destaque suave na identidade da Infinityshop. */
    } /* Encerra o estado apontado. */
    .desktop-navigation .desktop-navigation-active { /* Destaca a loja online como no modelo enviado. */
        background: #0041d9; /* Usa azul no lugar do verde da loja de referência. */
        color: #fff; /* Dá contraste ao texto da página atual. */
    } /* Encerra o link ativo. */
    .header-main .header-cart { /* Ajusta o carrinho à proporção discreta do modelo desktop. */
        width: 44px; /* Alinha o controle à coluna reservada. */
        height: 44px; /* Preserva o formato circular. */
    } /* Encerra o carrinho desktop. */
    .discovery-inner { /* Alinha busca e categorias com as margens do cabeçalho. */
        max-width: 1360px; /* Usa a mesma largura máxima da linha principal. */
        padding: 64px 40px 20px; /* Reproduz o respiro acima da busca na referência. */
    } /* Encerra a área de descoberta desktop. */
    .search-form label { /* Mantém o rótulo proporcional à busca horizontal. */
        font-size: 14px; /* Usa a escala compacta mostrada no desktop. */
        margin-bottom: 8px; /* Aproxima o rótulo do campo correspondente. */
    } /* Encerra o rótulo desktop. */
    .search-field { /* Adapta a altura da busca à composição ampla. */
        min-height: 44px; /* Preserva conforto sem uma caixa excessivamente alta. */
        border-radius: 12px; /* Mantém os cantos suaves do modelo. */
    } /* Encerra a caixa de busca desktop. */
    .search-form input, .search-form button { /* Alinha o campo e a lupa à altura interna. */
        height: 40px; /* Evita aumentar a altura da borda externa. */
    } /* Encerra os componentes da busca. */
    .category-shortcuts { /* Distribui as categorias disponíveis ao longo da busca. */
        padding-top: 20px; /* Separa os círculos do campo de pesquisa. */
        justify-content: space-between; /* Distribui os oito atalhos reais sem inventar categorias. */
        gap: 16px; /* Mantém respiro caso a lista precise rolar. */
    } /* Encerra a faixa de categorias desktop. */
    .category-icon { /* Usa círculos menores na faixa horizontal ampla. */
        width: 66px; /* Aproxima os atalhos da proporção da referência desktop. */
        height: 66px; /* Preserva o formato circular. */
    } /* Encerra os círculos desktop. */
    main { /* Alinha os banners e a explicação com os elementos acima. */
        max-width: 1360px; /* Mantém a mesma grade visual do cabeçalho. */
        padding: 24px 40px 80px; /* Dá margem lateral e espaço inferior ao contato flutuante. */
    } /* Encerra a área principal desktop. */
} /* Encerra as regras do modelo desktop. */