/* ==========================================
   1. IMPORTAÇÃO DE FONTES E RESET GLOBAL
   ========================================== */

/* Importa as fontes do Google Fonts: Inter (textos/inputs) e Jersey 25 (títulos/base) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Jersey+25&display=swap');

/* Selector universal (*): remove margens e espaçamentos padrão do navegador */
* {
    margin: 0; /* Zera a margem externa de todos os elementos */
    padding: 0; /* Zera o espaçamento interno de todos os elementos */
    box-sizing: border-box; /* Inclui bordas e paddings na largura/altura total */
}

/* Estilização do corpo da página (<body>) */
body {
    background-color: #706F6F; /* Cor de fundo cinza intermediária */
    font-family: 'Jersey 25', sans-serif; /* Define a tipografia padrão do site */
    color: #FFFFFF; /* Cor padrão do texto (branco) */
    display: flex; /* Ativa o modelo de layout Flexbox */
    flex-direction: column; /* Empilha o cabeçalho, conteúdo e rodapé verticalmente */
    min-height: 100vh; /* Garante altura mínima cobrindo 100% da viewport */
    margin: 0; /* Garante ausência de margens externas no body */
    font-size: 25px; /* Tamanho base de fonte para o texto geral */
}

/* Elemento principal (<main>): ocupa o espaço vertical disponível */
main {
    flex: 1; /* Expande flexivelmente para empurrar o rodapé para a base da tela */
}


/* ==========================================
   2. CABEÇALHO PRINCIPAL E BARRA DE BUSCA
   ========================================== */

/* Container do cabeçalho superior */
.header-principal {
    display: flex; /* Alinha a logo, busca e ícones em linha horizontal */
    align-items: center; /* Centraliza os elementos verticalmente */
    justify-content: space-between; /* Distribui os elementos uniformemente nas extremidades */
    background-color: #FFCC00; /* Cor de fundo amarela representativa */
    height: 75px; /* Altura fixa da barra superior */
    padding: 0 20px; /* Preenchimento interno lateral de 20px */
}

/* Título principal do site na área da logo */
.logo-area h1 {
    font-size: 20px; /* Tamanho da fonte do título principal */
    color: #000000; /* Texto em cor preta para contraste com o fundo amarelo */
}

/* Subtítulo da marca */
.logo-area p {
    font-family: 'Iosevka Charon', monospace; /* Fonte estilo código/monoespaçada */
    font-size: 13px; /* Tamanho menor para a legenda do subtítulo */
    color: #000000; /* Texto em cor preta */
}

/* Caixa arredondada da barra de pesquisa */
.search-bar {
    display: flex; /* Layout flexível para input e ícone */
    align-items: center; /* Alinha o ícone e o campo de texto ao centro */
    justify-content: flex-end; /* Alinha os itens para a extremidade direita */
    background-color: #D9D9D9; /* Cor de fundo cinza claro */
    border-radius: 31px; /* Bordas arredondadas em formato pílula */
    padding: 5px 15px; /* Espaçamento interno (vertical e horizontal) */
    width: 315px; /* Largura total da barra de pesquisa */
    height: 39px; /* Altura fixa da barra de pesquisa */
}

/* Campo de entrada de texto para a pesquisa */
.search-bar input {
    border: none; /* Remove a borda padrão do navegador */
    background: transparent; /* Torna o fundo transparente acompanhando a caixa pai */
    outline: none; /* Remove o contorno de foco padrão */
    width: 100%; /* Preenche todo o espaço livre da barra */
    font-family: 'Inter', sans-serif; /* Fonte Inter para legibilidade durante a digitação */
    font-size: 16px; /* Tamanho legível para a digitação */
}

/* Botão sem estilo associado ao ícone de busca */
.btn-search {
    background: none; /* Sem fundo */
    border: none; /* Sem borda */
    cursor: pointer; /* Aponta ponteiro do mouse como clicável */
}

/* Dimensões da imagem da lupa */
.search-icon {
    width: 20px; /* Largura da imagem do ícone */
    height: 20px; /* Altura da imagem do ícone */
}

/* Container dos ícones de usuário e carrinho */
.user-cart-icons {
    display: flex; /* Disposição horizontal */
    gap: 15px; /* Espaçamento de 15px entre os dois ícones */
}

/* Ajustes na imagem do ícone de usuário */
.icon-user img {
    width: 30px; /* Largura fixa */
    height: 30px; /* Altura fixa */
}

/* Ajustes na imagem do ícone do carrinho */
.icon-cart img {
    width: 30px; /* Largura fixa */
    height: 30px; /* Altura fixa */
}


/* ==========================================
   3. MENU DE NAVEGAÇÃO E BANNERS DE CATEGORIA
   ========================================== */

/* Container da barra de navegação principal */
.nav-menu {
    background-color: #000000; /* Fundo preto elegante */
    width: 100%; /* Ocupa a largura total da página */
    min-height: 48px; /* Altura mínima da barra de navegação */
    display: flex; /* Flexbox para centralização */
    align-items: center; /* Centralização vertical da lista de links */
}

/* Lista não ordenada de links do menu */
.nav-menu ul {
    display: flex; /* Exibe os itens lado a lado */
    justify-content: space-around; /* Distribui espaços iguais entre os itens da lista */
    align-items: center; /* Centralização vertical dos itens */
    width: 100%; /* Preenche toda a extensão do elemento <nav> */
    list-style: none; /* Remove os marcadores de lista padrão */
    padding: 0 12px; /* Espaçamento lateral interno */
}

/* Links do menu de navegação */
.nav-menu a {
    color: #FFFFFF; /* Texto na cor branca */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
    font-size: 16px; /* Tamanho da fonte dos links */
}

/* Selo/Etiqueta identificadora de categoria */
.badge {
    background-color: #FFCC00; /* Cor de fundo amarela */
    color: #000000; /* Texto em preto para fácil leitura */
    padding: 5px 15px; /* Espaçamento interno */
    border-radius: 15px; /* Bordas arredondadas */
    font-size: 20px; /* Tamanho da fonte */
    display: inline-block; /* Permite formatação em bloco sem quebrar linha */
    margin: 20px 0 0 20px; /* Margens para posicionamento superior e esquerdo */
}


/* ==========================================
   4. GRADE DE PRODUTOS E CARTÕES (CARDS)
   ========================================== */

/* Seção contendo a grade de produtos */
.product-grid {
    display: flex; /* Ativa o layout flexível */
    flex-wrap: wrap; /* Permite a quebra de linha quando os cartões ultrapassarem a largura */
    gap: 20px; /* Espaçamento de 20px entre cartões adjacentes */
    padding: 20px; /* Preenchimento interno das bordas da grade */
    justify-content: center; /* Centraliza a grade de produtos na tela */
}

/* Cartão individual de produto */
.product-card {
    background-color: #706F6F; /* Fundo cinza */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borda branca suave semi-transparente */
    border-radius: 8px; /* Cantos levemente arredondados */
    width: 260px; /* Largura fixa do cartão */
    padding: 20px; /* Espaçamento interno */
    text-align: center; /* Centraliza textos e imagens no cartão */
}

/* Imagem dentro do cartão do produto */
.product-card img {
    width: 100%; /* Ocupa toda a largura do cartão */
    height: 200px; /* Altura fixa uniforme para os produtos da grade */
    object-fit: cover; /* Recorta a imagem sem causar distorção de proporção */
    border-radius: 6px; /* Arredondamento nos cantos da imagem */
    display: block; /* Remove espaçamentos vazios padrão de imagem inline */
}

/* Nome do produto no cartão */
.product-card h3 {
    font-size: 22px; /* Tamanho do título do produto */
}

/* Preço do produto no cartão */
.product-card .price {
    font-size: 24px; /* Tamanho do valor do produto em destaque */
    margin: 10px 0; /* Margem vertical separando o preço dos outros elementos */
}

/* Botão de compra / inclusão ao carrinho */
.btn-adicionar {
    background-color: #FFCC00; /* Fundo amarelo */
    color: #000000; /* Texto em cor preta */
    border: none; /* Remove a borda padrão do botão */
    padding: 8px 16px; /* Espaçamento interno para área de clique confortável */
    border-radius: 20px; /* Arredondamento em pílula */
    font-family: inherit; /* Herda a fonte padrão ('Jersey 25') */
    font-size: 16px; /* Tamanho da fonte */
    cursor: pointer; /* Altera o ponteiro para indicar interação */
}


/* ==========================================
   5. BANNER PRINCIPAL E ÁREA DE DESTAQUE
   ========================================== */

/* Container do banner da página inicial */
.banner-container {
    display: flex; /* Disposição lado a lado para imagem e texto */
    align-items: center; /* Centralização vertical */
    justify-content: center; /* Centralização horizontal */
    gap: 50px; /* Espaçamento entre a foto do banner e o bloco de texto */
    padding: 50px 20px; /* Preenchimento interno */
    max-width: 1400px; /* Largura máxima delimitada */
    margin: 0 auto; /* Centraliza o bloco na tela */
}

/* Imagem do banner */
.banner-image img {
    width: 600px; /* Largura fixa para a imagem promocional */
    height: auto; /* Mantém a proporção da altura */
    display: block; /* Comportamento em bloco */
    border-radius: 8px; /* Cantos arredondados */
}

/* Bloco textual do banner */
.banner-text {
    flex: 1; /* Preenche o restante do espaço horizontal livre */
    color: #FFFFFF; /* Cor do texto em branco */
}

/* Título promocional e títulos de boas-vindas */
.banner-text h2,
.welcome-title {
    font-size: 48px; /* Fonte em grande escala para destaque */
    color: #FFCC00; /* Texto na cor amarela */
    margin-bottom: 20px; /* Margem inferior de afastamento do texto */
}

/* Texto descritivo do banner */
.banner-text p {
    font-size: 28px; /* Tamanho de fonte ampliado */
    line-height: 1.6; /* Altura da linha otimizada para leitura */
    margin-bottom: 20px; /* Espaçamento inferior */
}

/* Botão em formato de link "Saiba mais" */
.btn-saiba-mais {
    display: inline-block; /* Permite aplicar margens sem quebrar o fluxo */
    color: #FFCC00; /* Cor amarela para o link */
    font-size: 24px; /* Tamanho em destaque */
    font-weight: bold; /* Texto em negrito */
    text-decoration: underline; /* Linha sublinhada visível */
    margin-top: 10px; /* Margem superior */
}

/* Efeito ao passar o mouse sobre o botão "Saiba mais" */
.btn-saiba-mais:hover {
    opacity: 0.8; /* Transparência suave no hover */
}


/* ==========================================
   6. PÁGINA DE DETALHES DO PRODUTO
   ========================================== */

/* Cartão do detalhe individual do produto */
.product-detail-card {
    display: flex; /* Disposição lado a lado para imagem e bloco descritivo */
    align-items: center; /* Alinha o conteúdo verticalmente ao centro */
    justify-content: center; /* Centraliza horizontalmente */
    gap: 40px; /* Espaço entre imagem e texto de detalhes */
    padding: 40px 20px; /* Preenchimento interno */
    max-width: 1000px; /* Largura máxima da caixa de apresentação */
    margin: 0 auto; /* Centralização horizontal na página */
}

/* Container da imagem do produto no detalhe */
.product-image-box {
    width: 400px; /* Largura fixa do container */
    text-align: center; /* Centraliza a imagem e os títulos internos */
    flex-shrink: 0; /* Impede a compressão do container no layout flex */
}

/* Imagem ampliada no detalhe do produto */
.product-image-box img {
    width: 100%; /* Preenche 100% do container */
    height: 350px; /* Altura fixa */
    object-fit: cover; /* Ajusta e corta a imagem mantendo a proporção */
    border-radius: 8px; /* Cantos arredondados */
    display: block; /* Comportamento em bloco */
    margin: 10px 0; /* Margem vertical */
}

/* Títulos do detalhe do produto */
.product-info-box h2,
.product-image-box h2 {
    font-size: 38px; /* Fonte em destaque */
    color: #FFCC00; /* Cor amarela */
    margin-bottom: 20px; /* Margem inferior de separação */
}

/* Caixa de texto informativo do produto */
.product-info-box {
    flex: 1; /* Ocupa todo o espaço horizontal livre */
    color: #FFFFFF; /* Texto na cor branca */
}

/* Texto descritivo detalhado */
.product-info-box .description,
.product-info-box p {
    font-size: 24px; /* Tamanho da fonte */
    line-height: 1.8; /* Altura das linhas estendida para facilidade de leitura */
    margin-bottom: 20px; /* Margem inferior separando os parágrafos */
}

/* Valor em destaque no detalhe do produto */
.product-image-box .price-tag {
    font-size: 24px; /* Tamanho da fonte do preço */
}


/* ==========================================
   7. SEÇÃO INSTITUCIONAL E HISTÓRIA
   ========================================== */

/* Container de exibição da história institucional */
.historia-container {
    max-width: 1000px; /* Largura máxima restrita */
    margin: 0 auto; /* Centralizado horizontalmente */
    padding: 40px 20px; /* Preenchimento interno */
}

/* Estilização do texto do bloco institucional */
.historia-content {
    color: #FFFFFF; /* Texto branco */
    font-size: 24px; /* Tamanho legível da fonte */
    line-height: 1.8; /* Espaçamento entre linhas agradável */
}

/* Títulos da seção de história */
.historia-content h1,
.historia-content h2 {
    font-size: 38px; /* Tamanho dos títulos em destaque */
    color: #FFCC00; /* Cor amarela principal */
    margin-bottom: 20px; /* Espaço inferior para o texto seguinte */
}

/* Parágrafos do texto histórico */
.historia-content p {
    margin-bottom: 24px; /* Separação de 24px após cada parágrafo */
}


/* ==========================================
   8. CARRINHO DE COMPRAS E MODAL DE CHECKOUT
   ========================================== */

/* Cartão do resumo da compra no carrinho */
.cart-summary {
    background-color: #000000; /* Fundo preto elegante */
    padding: 30px; /* Espaçamento interno amplo */
    border-radius: 12px; /* Cantos arredondados */
    width: 100%; /* Largura completa relativa ao container */
    max-width: 450px; /* Limite de largura máxima */
    margin: 30px auto 0 auto; /* Centralização horizontal e margem superior */
    display: flex; /* Ativa flexbox */
    flex-direction: column; /* Empilha o título, total e botões verticalmente */
    align-items: center; /* Centralização horizontal interna */
    text-align: center; /* Alinhamento central do texto */
    gap: 18px; /* Espaço uniforme entre elementos filhos */
}

/* Título do resumo */
.cart-summary h3 {
    font-size: 30px; /* Tamanho em destaque do título */
    color: #FFCC00; /* Cor amarela */
}

/* Parágrafos dentro do resumo (Ex: valor total) */
.cart-summary p {
    font-size: 24px; /* Tamanho legível do texto do valor */
}

/* Botão principal de finalizar compra */
.btn-checkout {
    background-color: #FFCC00; /* Fundo amarelo */
    color: #000000; /* Texto em cor preta */
    border: none; /* Sem bordas */
    padding: 14px 28px; /* Preenchimento confortável para clique */
    border-radius: 25px; /* Formato pílula/arredondado */
    font-family: inherit; /* Herda a tipografia padrão */
    font-size: 20px; /* Tamanho do texto */
    font-weight: bold; /* Texto em negrito */
    cursor: pointer; /* Ícone de mãozinha ao passar o mouse */
    width: 100%; /* Largura total da caixa */
    max-width: 300px; /* Largura máxima estipulada */
    display: block; /* Comportamento em bloco */
    margin: 0 auto; /* Centralizado */
}

/* Hover do botão de finalizar compra */
.btn-checkout:hover {
    opacity: 0.85; /* Efeito de opacidade suave no mouseover */
}

/* Link para retornar às compras */
.btn-continue {
    color: #FFFFFF; /* Texto na cor branca */
    text-decoration: underline; /* Linha sublinhada indicando link */
    font-size: 18px; /* Tamanho da fonte */
    display: block; /* Comportamento em bloco */
    margin: 0 auto; /* Centralização horizontal */
}

/* Hover do link de continuar comprando */
.btn-continue:hover {
    color: #FFCC00; /* Transição para a cor amarela no hover */
}

/* Checkbox invisível que controla a abertura do modal sem JavaScript */
.modal-state {
    display: none; /* Oculta o elemento da tela */
}

/* Camada escura de fundo do modal de checkout */
.modal-overlay {
    display: none; /* Oculto por padrão */
    position: fixed; /* Posição fixa sobrepondo toda a tela */
    top: 0;
    left: 0;
    width: 100%; /* Ocupa 100% da largura da janela */
    height: 100%; /* Ocupa 100% da altura da janela */
    background: rgba(0, 0, 0, 0.85); /* Fundo preto semi-transparente (85%) */
    z-index: 1000; /* Mantém a camada acima dos outros elementos */
    align-items: center; /* Centraliza o modal na vertical */
    justify-content: center; /* Centraliza o modal na horizontal */
}

/* Seletor CSS que aciona a exibição do modal quando o checkbox estiver marcado */
.modal-state:checked ~ .modal-overlay {
    display: flex; /* Torna o modal visível com layout flex */
}

/* Caixa contendo o formulário do modal */
.modal-box {
    background: #000000; /* Fundo preto sólido */
    border: 2px solid #FFCC00; /* Borda amarela de destaque */
    padding: 20px; /* Espaçamento interno */
    border-radius: 10px; /* Cantos arredondados */
    width: 90%; /* Responsivo para telas menores */
    max-width: 400px; /* Largura máxima da caixa de formulário */
    position: relative; /* Permite posicionamento absoluto do botão de fechar */
    color: #FFFFFF; /* Texto branco */
}

/* Botão '✕' para fechar o modal */
.btn-fechar {
    position: absolute; /* Posição absoluta dentro do .modal-box */
    top: 10px; /* Distância do topo */
    right: 15px; /* Distância da direita */
    color: #FFCC00; /* Cor amarela do ícone */
    cursor: pointer; /* Ponteiro de clique */
    font-size: 20px; /* Tamanho da letra '✕' */
    font-weight: bold; /* Peso em negrito */
}

/* Entradas de texto e campos de seleção do formulário de checkout */
.checkout-form input,
.checkout-form select {
    width: 100%; /* Preenche 100% da largura do formulário */
    padding: 8px; /* Espaçamento interno para digitação */
    margin: 6px 0 12px 0; /* Margem vertical separando os campos */
    background: #1a1a1a; /* Fundo cinza bem escuro para os inputs */
    color: #FFFFFF; /* Texto digitado em branco */
    border: 1px solid #FFCC00; /* Borda fina na cor amarela */
    border-radius: 4px; /* Leve arredondamento dos cantos dos campos */
    box-sizing: border-box; /* Inclui o padding na largura total do campo */
}

/* Botão de confirmação do pedido dentro do formulário */
.btn-confirmar {
    background: #FFCC00; /* Fundo amarelo */
    color: #000000; /* Texto em cor preta */
    border: none; /* Sem bordas */
    width: 100%; /* Preenche 100% da largura do modal */
    padding: 10px; /* Espaçamento interno de clique */
    font-weight: bold; /* Texto em negrito */
    border-radius: 20px; /* Formato pílula/arredondado */
    cursor: pointer; /* Ponteiro de clique */
}


/* ==========================================
   9. RODAPÉ INSTITUCIONAL
   ========================================== */

/* Rodapé na base do site */
.rodape {
    background-color: #000000; /* Fundo preto */
    color: #FFFFFF; /* Texto na cor branca */
    text-align: center; /* Centraliza as informações de copyright */
    padding: 15px 0; /* Espaçamento interno vertical */
    font-size: 14px; /* Tamanho reduzido para nota de direitos autorais */
}