* { /* Uniformiza o cálculo das caixas para evitar larguras maiores que a tela. */
    box-sizing: border-box; /* Inclui borda e preenchimento na largura definida. */
} /* Encerra o dimensionamento global. */
body { /* Define a aparência compartilhada entre celular e desktop. */
    margin: 0; /* Remove margens do navegador mesmo quando o reset não estiver disponível. */
    font-family: Arial, sans-serif; /* Mantém uma fonte local legível sem dependências externas. */
    color: #26344b; /* Garante contraste do texto sobre fundos claros. */
    background: #f5f7fb; /* Separa o conteúdo das superfícies brancas. */
    line-height: 1.5; /* Dá respiro ao texto em todas as larguras. */
} /* Encerra os estilos gerais da página. */
.store-header { /* Define a superfície principal do cabeçalho atual. */
    background: #fff; /* Mantém contraste da marca e dos controles. */
    border-bottom: 1px solid #e4e9f2; /* Separa o cabeçalho do conteúdo sem criar espaço vazio. */
} /* Encerra a superfície do cabeçalho. */
.header-main { /* Centraliza o conjunto de marca e controles dentro da janela. */
    align-items: center; /* Mantém logo e ícones alinhados verticalmente na grade. */
    max-width: 1280px; /* Evita expansão excessiva antes das regras específicas de desktop. */
    margin: 0 auto; /* Centraliza o conteúdo sem deslocar a grade. */
} /* Encerra a base da grade do cabeçalho. */
.brand { /* Organiza a imagem dentro da coluna central do celular. */
    display: flex; /* Permite centralizar a logo na coluna disponível. */
    align-items: center; /* Evita desalinhamento vertical com os botões. */
} /* Encerra o contêiner da marca. */
.brand img { /* Preserva a proporção e o encaixe da logo. */
    display: block; /* Remove o espaço de linha abaixo da imagem. */
    height: auto; /* Impede distorção ao variar a largura. */
} /* Encerra a base da imagem. */
.menu-toggle { /* Mantém o controle de navegação reconhecível no celular. */
    cursor: pointer; /* Identifica a ação ao usar mouse. */
} /* Encerra a base do botão do menu. */
.menu-toggle::before { /* Desenha o ícone sem depender de imagens ou fontes externas. */
    content: '\2630'; /* Exibe as três linhas que identificam a navegação. */
} /* Encerra o símbolo do menu. */
.search-form { /* Mantém o formulário dentro da largura da área de descoberta. */
    width: 100%; /* Faz a busca acompanhar as margens do cabeçalho. */
    min-width: 0; /* Permite encolher em telas pequenas sem rolagem da página. */
} /* Encerra a base do formulário. */
.search-form input { /* Permite que o texto ceda espaço à lupa sem ultrapassar a borda. */
    flex: 1; /* Usa somente o espaço restante na caixa de busca. */
    width: 100%; /* Aproveita o espaço disponibilizado pelo contêiner flexível. */
    min-width: 0; /* Remove a largura mínima nativa que pode estourar o celular. */
    border: 0; /* Mantém uma única borda no contorno externo da busca. */
    outline: 0; /* O contorno de foco é mostrado pelo conjunto search-field. */
    background: transparent; /* Usa o fundo branco da caixa externa. */
    color: #26344b; /* Mantém o texto digitado legível. */
    font: inherit; /* Preserva a tipografia da página no controle nativo. */
} /* Encerra a base do campo. */
.search-form button { /* Centraliza a lupa sem introduzir bordas nativas. */
    display: grid; /* Permite centralização em dois eixos. */
    place-items: center; /* Mantém a lupa no centro do botão. */
    padding: 0; /* Evita que o preenchimento nativo aumente o controle. */
    border: 0; /* Deixa a borda somente na caixa da busca. */
    cursor: pointer; /* Indica envio da pesquisa ao usar mouse. */
} /* Encerra a base do botão de busca. */
.search-form svg { /* Impede que o SVG da lupa use seu tamanho nativo de 300px. */
    width: 21px; /* Limita a largura ao tamanho planejado para o ícone. */
    height: 21px; /* Mantém a proporção do desenho. */
    fill: none; /* Preserva o interior vazado da lente. */
    stroke: currentColor; /* Herda o azul do botão de busca. */
    stroke-width: 2; /* Mantém os traços visíveis em telas pequenas. */
    stroke-linecap: round; /* Suaviza o acabamento dos traços. */
} /* Encerra o ícone da busca. */
button:focus-visible, a:focus-visible { /* Identifica os controles durante navegação por teclado. */
    outline: 2px solid #004cff; /* Dá contraste ao elemento que recebe foco. */
    outline-offset: 3px; /* Afasta a marca de foco da borda do controle. */
} /* Encerra os indicadores de foco. */
main { /* Alinha a explicação do atendimento abaixo das categorias. */
    max-width: 1280px; /* Mantém o conteúdo dentro da mesma largura do cabeçalho. */
    margin: 0 auto; /* Centraliza a área principal em telas amplas. */
    padding: 16px 20px 88px; /* Dá respiro e espaço inferior para o botão de WhatsApp. */
} /* Encerra a base do conteúdo principal. */
.side-menu:not([open]) { /* Garante que o painel não ocupe espaço antes de ser aberto. */
    display: none; /* Preserva o estado fechado mesmo diante de regras genéricas de display. */
} /* Encerra a proteção do diálogo recolhido. */
/* Cabeçalho inspirado na referência enviada: faixa, marca central, busca e categorias circulares. */
.store-header { border-top: 0; } /* Organiza .store-header para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.announcement { padding: 12px 20px; background: #0041d9; color: #fff; text-align: center; font-size: 14px; line-height: 1.6; } /* Organiza .announcement para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.announcement strong { font-weight: 700; } /* Organiza .announcement strong para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.header-main { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 18px; padding: 24px 20px; } /* Organiza .header-main para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.brand { width: auto; min-width: 0; justify-content: center; } /* Organiza .brand para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.brand img { width: clamp(140px, 38vw, 250px); max-width: 100%; } /* Organiza .brand img para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.menu-toggle, .header-cart { display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 1px solid #dce3ed; border-radius: 50%; background: #fff; color: #0041d9; box-shadow: 0 2px 5px #182e5310; } /* Organiza .menu-toggle, .header-cart para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.menu-toggle::before { font-size: 24px; line-height: 1; } /* Organiza .menu-toggle::before para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.header-cart:disabled { opacity: 1; cursor: default; } /* Organiza .header-cart:disabled para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.header-cart svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Organiza .header-cart svg para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.catalog-discovery { border-top: 1px solid #e0e6ef; background: #f3f7fb; } /* Organiza .catalog-discovery para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.discovery-inner { max-width: 1280px; margin: auto; padding: 20px 20px 24px; } /* Organiza .discovery-inner para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-form { display: block; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; } /* Organiza .search-form para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-form:focus-within { outline: none; } /* Organiza .search-form:focus-within para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-form label { display: block; margin-bottom: 10px; font-size: 15px; font-weight: 600; } /* Organiza .search-form label para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-field { display: flex; align-items: center; min-height: 50px; overflow: hidden; border: 2px solid #0041d9; border-radius: 14px; background: #fff; } /* Organiza .search-field para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-field:focus-within { outline: 3px solid #b6ccff; outline-offset: 3px; } /* Organiza .search-field:focus-within para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-form button { flex: 0 0 48px; height: 46px; border-radius: 0; background: transparent; color: #0041d9; } /* Organiza .search-form button para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-form input { height: 46px; padding: 0 10px 0 0; font-size: 16px; } /* Organiza .search-form input para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.search-form input::placeholder { color: #6c7889; opacity: 1; } /* Organiza .search-form input::placeholder para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.category-shortcuts { display: flex; gap: 20px; overflow-x: auto; padding: 24px 0 4px; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #c5d2e7 transparent; } /* Organiza .category-shortcuts para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.category-shortcut { display: flex; flex: 0 0 80px; flex-direction: column; align-items: center; gap: 9px; color: #36445b; text-decoration: none; text-align: center; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; } /* Organiza .category-shortcut para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.category-icon { display: grid; place-items: center; width: 66px; height: 66px; border: 2px solid #dce4ef; border-radius: 50%; background: #fff; color: #0041d9; font-size: 30px; box-shadow: inset 0 0 0 4px #f3f7fb; } /* Organiza .category-icon para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.category-shortcut[aria-current="page"] { color: #0041d9; font-weight: 700; } /* Organiza .category-shortcut[aria-current="page"] para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.category-shortcut[aria-current="page"] .category-icon { background: #0041d9; color: #fff; } /* Organiza .category-shortcut[aria-current="page"] .category-icon para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
.category-shortcut:hover .category-icon { border-color: #0041d9; } /* Organiza .category-shortcut:hover .category-icon para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
@media (min-width: 768px) { /* Organiza @media (min-width: 768px) para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
    .header-main { grid-template-columns: 56px minmax(0, 1fr) 56px; padding: 28px 24px; } /* Organiza .header-main para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
    .menu-toggle, .header-cart { width: 56px; height: 56px; } /* Organiza .menu-toggle, .header-cart para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
    .discovery-inner { padding: 24px; } /* Organiza .discovery-inner para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
    .category-shortcuts { justify-content: space-between; gap: 16px; } /* Organiza .category-shortcuts para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
    .category-shortcut { flex-basis: 96px; font-size: 14px; } /* Organiza .category-shortcut para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
    .category-icon { width: 78px; height: 78px; } /* Organiza .category-icon para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */
} /* Organiza } para reproduzir a referência com as cores, espaçamento e recursos da Infinityshop. */

body.menu-is-open { /* Evita mover o conteúdo atrás do painel aberto. */
    overflow: hidden; /* Bloqueia a rolagem enquanto o diálogo modal está ativo. */
} /* Encerra o bloqueio da página. */
.side-menu { /* Cria o painel branco ancorado à esquerda como na referência. */
    position: fixed; /* Mantém o menu preso à janela durante a navegação. */
    inset: 0 auto 0 0; /* Alinha a caixa ao topo e à borda esquerda. */
    width: min(78vw, 420px); /* Reserva uma faixa visível do site no celular e limita o desktop. */
    max-width: none; /* Remove o limite nativo do diálogo para respeitar a largura definida. */
    height: 100%; /* Preenche a altura da janela em navegadores antigos. */
    height: 100dvh; /* Acompanha a altura útil quando as barras do celular mudam. */
    max-height: none; /* Remove a margem vertical imposta pelo navegador. */
    margin: 0; /* Encosta o painel na borda sem centralização nativa. */
    padding: 20px 0; /* Dá respiro ao conteúdo sem recuar os separadores. */
    border: 0; /* Remove o contorno padrão do diálogo. */
    background: #fff; /* Mantém a superfície limpa da referência. */
    color: #26344b; /* Preserva contraste com o fundo branco. */
    overflow-y: auto; /* Permite acessar todos os links em telas baixas ou com zoom. */
    box-shadow: 12px 0 40px #10204320; /* Separa visualmente a lateral do site escurecido. */
} /* Encerra a caixa lateral. */
.side-menu::backdrop { /* Escurece somente o conteúdo atrás do menu. */
    background: rgb(16 40 67 / 45%); /* Reproduz a sobreposição translúcida da referência. */
} /* Encerra a sobreposição do diálogo. */
.side-menu-top { /* Posiciona o fechamento no canto direito do painel. */
    display: flex; /* Permite alinhar o botão no fim da linha. */
    justify-content: flex-end; /* Aproxima o fechamento da borda lateral direita. */
    padding: 0 20px 16px; /* Separa o controle do primeiro link. */
} /* Encerra a linha superior do menu. */
.menu-close { /* Oferece fechamento circular e fácil de tocar. */
    width: 44px; /* Mantém área de toque confortável. */
    height: 44px; /* Mantém o formato circular. */
    border: 0; /* Remove a borda padrão do botão. */
    border-radius: 50%; /* Reproduz o controle circular da referência. */
    background: #004cff; /* Aplica a identidade azul da Infinityshop. */
    color: #fff; /* Dá contraste ao símbolo de fechamento. */
    font-size: 30px; /* Torna o símbolo reconhecível no celular. */
    cursor: pointer; /* Indica interação com mouse. */
} /* Encerra o controle de fechamento. */
.side-menu-links a { /* Organiza os destinos em linhas amplas como na imagem. */
    display: block; /* Faz toda a linha funcionar como link. */
    padding: 22px 20px; /* Cria alvos espaçosos e separação entre os destinos. */
    border-bottom: 1px solid #e2e7ef; /* Delimita as linhas secundárias do menu. */
    color: #26344b; /* Mantém contraste dos títulos. */
    text-decoration: none; /* Evita sublinhado nos itens de navegação. */
    font-size: 18px; /* Mantém os destinos legíveis em telas pequenas. */
    font-weight: 600; /* Destaca a hierarquia dos links. */
} /* Encerra os links do painel. */
.side-menu-links .side-menu-primary { /* Destaca a entrada principal da loja. */
    margin: 0 16px 8px; /* Afasta o destaque das bordas externas. */
    border-radius: 14px; /* Suaviza o bloco como na referência. */
    background: #0041d9; /* Usa a cor principal no acesso ao catálogo. */
    color: #fff; /* Contrasta o rótulo com a superfície azul. */
    text-align: center; /* Centraliza o nome da loja online. */
} /* Encerra o destino principal. */
.whatsapp-float { /* Mantém o atendimento no canto inferior direito. */
    position: fixed; /* Acompanha a janela enquanto o visitante rola a página. */
    right: max(18px, env(safe-area-inset-right)); /* Respeita o espaço seguro de celulares com recortes. */
    bottom: max(18px, env(safe-area-inset-bottom)); /* Evita encostar na área de gestos do aparelho. */
    z-index: 20; /* Sobrepõe o conteúdo normal sem ultrapassar o diálogo modal. */
    display: grid; /* Centraliza o ícone dentro do balão. */
    place-items: center; /* Alinha o desenho nos dois eixos. */
    width: 58px; /* Oferece alvo confortável para o polegar. */
    height: 58px; /* Preserva o formato circular do balão. */
    border-radius: 50%; /* Identifica visualmente o botão flutuante. */
    background: #128c4e; /* Usa verde com contraste para o símbolo branco. */
    color: #fff; /* Destaca o símbolo do atendimento. */
    box-shadow: 0 5px 20px #12352230; /* Separa o botão do conteúdo da página. */
} /* Encerra o balão flutuante. */
.whatsapp-float svg { /* Dimensiona o ícone de conversa. */
    width: 34px; /* Mantém o símbolo legível dentro do círculo. */
    height: 34px; /* Preserva a proporção do desenho. */
} /* Encerra o desenho do balão. */
.how-it-works { /* Apresenta o processo de compra sem deixar o link do menu sem destino. */
    margin-top: 24px; /* Separa a explicação dos demais conteúdos da página. */
    padding: 24px; /* Dá respiro ao conteúdo textual. */
    border-radius: 14px; /* Mantém coerência com os demais blocos. */
    background: #fff; /* Destaca a explicação no fundo claro. */
} /* Encerra a área explicativa. */
.how-it-works h2 { /* Destaca o título da explicação. */
    font-size: 22px; /* Estabelece hierarquia em relação ao texto. */
    font-weight: 700; /* Reforça a identificação da seção. */
} /* Encerra o título informativo. */
.how-it-works p { /* Separa a explicação da ação de contato. */
    margin: 12px 0; /* Melhora a leitura entre título, texto e link. */
} /* Encerra o parágrafo explicativo. */