/* ========================================================= CALCIO STORE - style.css ========================================================= COMO EDITAR AS CORES DO SITE: Todas as cores principais estão nas variáveis abaixo, dentro de ":root". Troque os valores em hexadecimal (#000, #fff...) para mudar o visual de todo o site de uma vez. ========================================================= */ :root { --cor-preto: #000000; --cor-preto-suave: #000000; --cor-cinza: #666666; --cor-cinza-claro: #e5e5e5; --cor-cinza-fundo: #f4f4f4; --cor-branco: #f6f1e6; --cor-whatsapp: #25d366; --fonte-principal: 'Oswald', 'Segoe UI', Arial, Helvetica, sans-serif; --fonte-titulo: 'Bebas Neue', var(--fonte-principal); --raio-borda: 10px; --transicao: 0.25s ease; /* Altura da faixa de aviso + cabeçalho + categorias, usada para calcular o espaço no topo da página (não precisa mexer aqui) */ --altura-faixa: 0px; --altura-header: 78px; --altura-categorias: 48px; } /* Páginas sem barra de categorias (como anuncio.html) usam essa classe */ /* no pra não sobrar um espaço em branco embaixo do cabeçalho. */ .sem-categorias { --altura-categorias: 0px; } /* ---------- RESET BÁSICO ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--fonte-principal); color: var(--cor-preto); background-color: var(--cor-branco); line-height: 1.5; } a { text-decoration: none; color: inherit; } /* Fonte "de destaque" (mais vintage/pôster esportivo) usada em títulos, preços, botões e nomes de time — deixa esses elementos com mais cara de camisa/escudo retrô. O texto corrido continua na --fonte-principal pra manter a leitura confortável. */ h1, h2, h3, .section-title, .categoria-titulo, .mega-menu-titulo, .produto-preco, .produto-preco-grande, .produto-detalhe-nome, .btn-finalizar, .btn-secundario, .btn-comprar, .categorias-dropdown-btn, .categoria-btn, .resumo-total, .medidas-titulo, .loja-titulo, .produto-time, .time-gigante span { font-family: var(--fonte-titulo); letter-spacing: 0.5px; } ul { list-style: none; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* ---------- FAIXA DE AVISO (topo, rolando) ---------- */ .faixa-aviso { position: fixed; top: 0; left: 0; width: 100%; height: var(--altura-faixa); background-color: var(--cor-preto); color: var(--cor-branco); overflow: hidden; z-index: 1001; display: flex; align-items: center; border-bottom: 1px solid var(--cor-preto-suave); /* Escondida por enquanto (só um teste visual). Pra trazer ela de volta, apague essa linha "display: none" e volte --altura-faixa pra 34px lá em cima no :root. */ display: none; } .faixa-aviso-conteudo { display: flex; gap: 48px; white-space: nowrap; padding-left: 100%; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.5px; animation: rolar-faixa 22s linear infinite; } @keyframes rolar-faixa { from { transform: translateX(0); } to { transform: translateX(-100%); } } /* ---------- CABEÇALHO FIXO ---------- */ .header { position: fixed; top: var(--altura-faixa); left: 0; width: 100%; background-color: var(--cor-preto); z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .header-content { height: var(--altura-header); display: flex; align-items: center; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .logo-imagem { height: 50px; width: auto; object-fit: contain; } .logo-letreiro { height: 26px; width: auto; object-fit: contain; } /* Campo de busca dentro do cabeçalho */ .busca-wrapper { position: relative; flex-grow: 1; max-width: 420px; } .campo-busca { width: 100%; padding: 11px 40px 11px 16px; border: none; border-radius: var(--raio-borda); font-size: 0.9rem; outline: none; background-color: var(--cor-branco); transition: box-shadow var(--transicao); } .busca-icone { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: none; color: var(--cor-cinza); cursor: pointer; transition: color var(--transicao), background-color var(--transicao); } .busca-icone:hover { color: var(--cor-preto); background-color: var(--cor-cinza-fundo); } .campo-busca:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } .nav { display: flex; gap: 28px; margin-left: auto; } .nav a { color: var(--cor-branco); font-size: 0.9rem; font-weight: 500; transition: color var(--transicao); position: relative; white-space: nowrap; } .nav a:hover { color: var(--cor-cinza-claro); } .nav a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background-color: var(--cor-branco); transition: width var(--transicao); } .nav a:hover::after { width: 100%; } /* Ícone do carrinho no cabeçalho */ .carrinho-link { position: relative; display: flex; align-items: center; color: var(--cor-branco); flex-shrink: 0; transition: color var(--transicao); } .carrinho-link:hover { color: var(--cor-cinza-claro); } .carrinho-contador { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background-color: var(--cor-whatsapp); color: var(--cor-branco); font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; } .carrinho-contador[hidden] { display: none; } /* Botão hambúrguer (aparece só no celular) */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 26px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--cor-branco); } /* ---------- BARRA DE CATEGORIAS ---------- */ .categorias-wrapper { background-color: var(--cor-preto-suave); border-top: 1px solid #2a2a2a; height: var(--altura-categorias); display: flex; align-items: center; } .lista-categorias { display: flex; flex: 1; gap: 10px; overflow-x: auto; padding: 0 20px; scrollbar-width: none; } .lista-categorias::-webkit-scrollbar { display: none; } /* Os links úteis (guia de medidas, como comprar...) entram como mais um "pill" no final dessa mesma faixa - só com uma bordinha tracejada pra dar uma diferenciada sutil de que não são filtro de categoria. */ .categoria-btn-link { border-style: dashed; } .categoria-btn { flex-shrink: 0; display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1px solid #3a3a3a; background-color: transparent; color: var(--cor-cinza-claro); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background-color var(--transicao), color var(--transicao); white-space: nowrap; } .categoria-btn:hover { border-color: var(--cor-branco); } .categoria-btn.ativa { background-color: var(--cor-branco); color: var(--cor-preto); border-color: var(--cor-branco); } /* ---------- MEGA-MENU "CATEGORIAS" (abre no hover, com os times por categoria) ---------- */ .categorias-dropdown { position: relative; flex-shrink: 0; } .categorias-dropdown-btn { display: flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 999px; border: 1px solid #3a3a3a; background-color: var(--cor-branco); color: var(--cor-preto); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .categorias-seta { font-size: 0.7rem; transition: transform var(--transicao); } .mega-menu { display: none; position: absolute; top: 100%; left: 0; /* Sem margem/gap entre o botão e o menu de propósito: um espaço vazio aqui faria o menu "sumir" no meio do caminho ao mover o mouse até ele. O respiro visual vem do padding-top aqui dentro, não de fora. */ margin-top: 0; padding-top: 8px; min-width: 680px; max-width: min(920px, calc(100vw - 40px)); z-index: 1100; } /* Camada branca de verdade (o padding-top acima é só a "ponte" clicável). Usa branco puro (não a variável --cor-branco, que agora é off-white) pra o menu se destacar por cima do fundo da página, em vez de se confundir com ele. max-height + overflow evita que o menu fique mais alto que a tela quando tiver muitas ligas/times. */ .mega-menu-conteudo { background-color: #ffffff; border: 1px solid var(--cor-cinza-claro); border-radius: var(--raio-borda); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25); padding: 24px; display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); max-height: calc(100vh - 160px); overflow-y: auto; } /* Abre ao passar o mouse (sem gap entre o botão e o menu, então o hover não se perde no caminho) e também por clique, pra continuar funcionando no toque (celular não tem hover). */ .categorias-dropdown:hover .mega-menu, .categorias-dropdown.aberto .mega-menu { display: block; } .categorias-dropdown:hover .categorias-seta, .categorias-dropdown.aberto .categorias-seta { transform: rotate(180deg); } .mega-menu-coluna a { display: block; padding: 4px 0; font-size: 0.85rem; color: var(--cor-preto); } .mega-menu-coluna a:hover { text-decoration: underline; } .mega-menu-titulo { display: block; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 2px solid var(--cor-preto); } /* ---------- HERO (banner de destaque) ---------- */ /* O banner é uma imagem única (já vem com texto e chamada pronta). */ /* Se quiser trocar por uma foto sem texto, dá pra voltar a escrever */ /* um título por cima usando a mesma ideia do resto do site. */ .hero { margin-top: calc(var(--altura-faixa) + var(--altura-header) + var(--altura-categorias)); line-height: 0; } .hero-link { display: block; } .hero-imagem { display: block; width: 100%; height: auto; transition: filter var(--transicao); } .hero-imagem[hidden] { display: none; } .hero-link:hover .hero-imagem { filter: brightness(0.92); } /* ---------- PÁGINA DE ANÚNCIO (anuncio.html) ---------- */ .anuncio-info { padding: 40px 0 10px; text-align: center; } .anuncio-info h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; } .anuncio-info p { color: var(--cor-cinza); font-size: 1rem; } /* ---------- SELOS DE CONFIANÇA ---------- */ .selos { padding: 40px 0; border-bottom: 1px solid var(--cor-cinza-claro); } .selos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } .selo { display: flex; align-items: flex-start; gap: 14px; } .selo-icone { font-size: 1.6rem; line-height: 1; } .selo h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; } .selo p { font-size: 0.82rem; color: var(--cor-cinza); } /* ---------- POLÍTICAS DA LOJA ---------- */ .politicas { padding: 50px 0; border-bottom: 1px solid var(--cor-cinza-claro); } .politicas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .politica { text-align: center; } .politica-icone { display: block; font-size: 1.8rem; margin-bottom: 10px; } .politica h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; } .politica p { font-size: 0.82rem; color: var(--cor-cinza); } /* ---------- GIGANTES DO FUTEBOL (atalho por time) ---------- */ .times-gigantes { padding: 50px 0; border-bottom: 1px solid var(--cor-cinza-claro); } .times-gigantes .section-title { margin-bottom: 32px; } .times-gigantes-lista { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 28px; } /* Força fileiras de 8 no time brasileiro, em telas maiores */ .times-brasil .times-gigantes-lista { display: grid; grid-template-columns: repeat(8, 88px); justify-content: center; } .time-gigante { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 88px; text-align: center; transition: transform var(--transicao); } .time-gigante:hover { transform: translateY(-4px); } .time-gigante span { font-size: 0.78rem; font-weight: 700; color: var(--cor-preto); } .time-escudo { width: 64px; height: 64px; object-fit: contain; } /* ---------- CARROSSEL DE LIGAS ---------- */ .ligas-carrossel { padding: 50px 0; border-bottom: 1px solid var(--cor-cinza-claro); } .ligas-carrossel .section-title { margin-bottom: 32px; } .ligas-lista { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; } .liga-card { flex: 0 0 auto; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 120px; text-align: center; transition: transform var(--transicao); } .liga-card:hover { transform: scale(1.05); } .liga-card img { width: 120px; height: 90px; object-fit: contain; padding: 10px; border-radius: var(--raio-borda); border: 1px solid var(--cor-cinza-claro); background-color: #ffffff; box-sizing: border-box; } .liga-card span { font-family: var(--fonte-titulo); letter-spacing: 0.5px; font-size: 0.85rem; color: var(--cor-preto); } /* ---------- SEÇÃO PRODUTOS ---------- */ .produtos { padding: 70px 0; scroll-margin-top: calc(var(--altura-faixa) + var(--altura-header) + var(--altura-categorias) + 16px); } .section-title { text-align: center; font-size: 2rem; font-weight: 800; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 1px; } /* Título de cada grupo de categoria dentro da grade de produtos */ .categoria-titulo { font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--cor-preto); } .categoria-secao { margin-bottom: 50px; /* Compensa o cabeçalho fixo: sem isso, ao clicar num botão da barra de categorias e rolar até a seção, o título fica escondido atrás do cabeçalho em vez de aparecer logo abaixo dele. */ scroll-margin-top: calc(var(--altura-faixa) + var(--altura-header) + var(--altura-categorias) + 16px); } .categoria-secao:last-child { margin-bottom: 0; } .grade-produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px; } /* Card de cada camisa (criado dinamicamente pelo script.js) */ .produto-card { position: relative; border: 1px solid var(--cor-cinza-claro); border-radius: var(--raio-borda); overflow: hidden; background-color: var(--cor-branco); display: flex; flex-direction: column; transition: transform var(--transicao), box-shadow var(--transicao); } .produto-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); } .produto-imagem-wrapper { display: block; position: relative; } .produto-link-nome { display: block; } .produto-imagem { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background-color: var(--cor-cinza-claro); } /* Selo de desconto no canto da imagem (só aparece se houver precoOriginal) */ .produto-desconto { position: absolute; top: 10px; left: 10px; background-color: var(--cor-preto); color: var(--cor-branco); font-size: 0.72rem; font-weight: 800; padding: 4px 9px; border-radius: 6px; } .produto-info { padding: 18px; display: flex; flex-direction: column; flex-grow: 1; } .produto-time { font-size: 0.75rem; color: var(--cor-cinza); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .produto-nome { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; } .produto-tamanhos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .produto-tamanhos span { border: 1px solid var(--cor-preto); border-radius: 6px; font-size: 0.75rem; padding: 3px 8px; } .produto-preco-area { margin-top: auto; margin-bottom: 16px; } .produto-preco-original { font-size: 0.85rem; color: var(--cor-cinza); text-decoration: line-through; } .produto-preco { font-size: 1.3rem; font-weight: 800; } .produto-parcelas { font-size: 0.78rem; color: var(--cor-cinza); } .btn-comprar { display: block; width: 100%; padding: 12px; background-color: var(--cor-preto); color: var(--cor-branco); border: none; border-radius: var(--raio-borda); font-size: 0.95rem; font-weight: 700; text-align: center; cursor: pointer; transition: background-color var(--transicao); } .btn-comprar:hover { background-color: var(--cor-preto-suave); } .nenhum-resultado { text-align: center; color: var(--cor-cinza); margin-top: 40px; font-size: 1rem; } /* ---------- DEPOIMENTOS ---------- */ .depoimentos { padding: 70px 0; background-color: var(--cor-cinza-fundo); } .depoimentos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; } .depoimento-card { background-color: var(--cor-branco); border-radius: var(--raio-borda); padding: 24px; border: 1px solid var(--cor-cinza-claro); } .depoimento-estrelas { color: var(--cor-preto); margin-bottom: 10px; letter-spacing: 2px; } .depoimento-texto { font-size: 0.9rem; margin-bottom: 14px; color: var(--cor-preto); } .depoimento-nome { font-size: 0.8rem; color: var(--cor-cinza); font-weight: 600; } /* ---------- RODAPÉ ---------- */ .footer { background-color: var(--cor-preto); color: var(--cor-branco); padding: 50px 0 20px; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin-bottom: 30px; } .footer-col h3 { font-size: 1rem; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.5px; } .footer-col p { color: var(--cor-cinza-claro); font-size: 0.9rem; margin-bottom: 8px; } .footer-links, .redes-sociais { display: flex; flex-direction: column; gap: 8px; } .footer-links a, .redes-sociais a { color: var(--cor-cinza-claro); font-size: 0.9rem; transition: color var(--transicao); } .footer-links a:hover, .redes-sociais a:hover { color: var(--cor-branco); } .footer-col p { margin-bottom: 8px; } .footer-newsletter { display: flex; gap: 8px; } .footer-newsletter input { flex-grow: 1; min-width: 0; padding: 10px 12px; border: 1px solid #333; border-radius: 6px; background-color: var(--cor-preto-suave); color: var(--cor-branco); font-size: 0.85rem; } .footer-newsletter input::placeholder { color: var(--cor-cinza); } .footer-newsletter input:focus { outline: none; border-color: var(--cor-branco); } .footer-newsletter button { padding: 10px 16px; border: none; border-radius: 6px; background-color: var(--cor-branco); color: var(--cor-preto); font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: opacity var(--transicao); flex-shrink: 0; } .footer-newsletter button:hover { opacity: 0.85; } .footer-metodos { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 20px 20px; border-top: 1px solid var(--cor-preto-suave); color: var(--cor-cinza-claro); font-size: 0.82rem; } .footer-copy { text-align: center; font-size: 0.8rem; color: var(--cor-cinza); border-top: 1px solid var(--cor-preto-suave); padding-top: 20px; } /* ---------- BOTÃO FLUTUANTE DO WHATSAPP ---------- */ .btn-whatsapp { position: fixed; bottom: 24px; right: 24px; width: 58px; height: 58px; background-color: var(--cor-whatsapp); color: var(--cor-branco); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); z-index: 1000; transition: transform var(--transicao); } .btn-whatsapp:hover { transform: scale(1.08); } /* ---------- PÁGINA DE PRODUTO (produto.html) ---------- */ .pagina-produto { margin-top: calc(var(--altura-faixa) + var(--altura-header)); padding: 30px 0 70px; } .voltar-link { display: inline-block; font-size: 0.9rem; font-weight: 600; color: var(--cor-cinza); margin-bottom: 24px; transition: color var(--transicao); } .voltar-link:hover { color: var(--cor-preto); } .produto-detalhe { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .produto-detalhe[hidden] { display: none; } .produto-detalhe-imagem-wrapper { position: relative; } .produto-detalhe-imagem { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--raio-borda); background-color: var(--cor-cinza-claro); } .lista-miniaturas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .miniatura-btn { width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: none; opacity: 0.6; transition: opacity var(--transicao), border-color var(--transicao); } .miniatura-btn img { width: 100%; height: 100%; object-fit: cover; } .miniatura-btn:hover { opacity: 0.9; } .miniatura-btn.ativa { opacity: 1; border-color: var(--cor-preto); } /* Dica "clique para ampliar" que aparece sobre a foto principal */ .produto-detalhe-imagem-wrapper { cursor: zoom-in; } .produto-ampliar-dica { position: absolute; bottom: 10px; right: 10px; padding: 5px 10px; border-radius: 999px; background-color: rgba(0, 0, 0, 0.65); color: var(--cor-branco); font-size: 0.72rem; font-weight: 600; pointer-events: none; } /* ---------- AMPLIAR FOTO (lightbox) ---------- */ .lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.85); padding: 60px 70px; } .lightbox[hidden] { display: none; } .lightbox-caixa { position: relative; max-width: 700px; width: 100%; max-height: 100%; background-color: var(--cor-branco); border-radius: var(--raio-borda); padding: 40px 20px 20px; display: flex; flex-direction: column; align-items: center; } .lightbox-contador { position: absolute; top: 12px; left: 16px; font-size: 0.8rem; font-weight: 700; color: var(--cor-cinza); } .lightbox-imagem-area { position: relative; width: 100%; max-height: 75vh; display: flex; align-items: center; justify-content: center; } .lightbox-imagem { max-width: 100%; max-height: 75vh; object-fit: contain; user-select: none; } /* No computador (mouse com hover), a foto vira uma "lupa" que segue o cursor. */ @media (hover: hover) and (pointer: fine) { .lightbox-imagem { cursor: zoom-in; } } /* No celular (sem hover), o toque na foto amplia com rolagem, já que não */ /* dá pra "passar o mouse por cima" — por isso um comportamento diferente. */ @media (hover: none) { .lightbox-imagem-area { overflow: auto; } .lightbox-imagem { cursor: zoom-in; } .lightbox-imagem.ampliada { max-width: none; max-height: none; width: 200%; cursor: zoom-out; } } /* A lupa: um quadrado que mostra a foto ampliada, seguindo o mouse */ .lightbox-lupa { /* left/top/width/height são definidos pelo produto.js, exatamente do tamanho da foto (evita sobrar espaço vazio mostrando o fundo). */ position: absolute; background-color: var(--cor-branco); background-repeat: no-repeat; opacity: 0; pointer-events: none; transition: opacity 0.1s ease; } .lightbox-lupa.ativa { opacity: 1; } .lightbox-fechar { position: fixed; top: 18px; right: 24px; width: 42px; height: 42px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 0.15); color: var(--cor-branco); font-size: 1.6rem; line-height: 1; cursor: pointer; transition: background-color var(--transicao); } .lightbox-fechar:hover { background-color: rgba(255, 255, 255, 0.3); } .lightbox-seta { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; border: none; background-color: rgba(255, 255, 255, 0.15); color: var(--cor-branco); font-size: 1.3rem; cursor: pointer; transition: background-color var(--transicao); } .lightbox-seta:hover { background-color: rgba(255, 255, 255, 0.3); } .produto-detalhe-nome { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 14px; } .produto-preco-grande { font-size: 2rem; } .campo-selecao { margin-top: 26px; } .campo-titulo { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; } .lista-tamanhos { display: flex; flex-wrap: wrap; gap: 10px; } .tamanho-btn { min-width: 48px; padding: 10px 14px; border: 2px solid var(--cor-preto); border-radius: var(--raio-borda); background-color: var(--cor-branco); color: var(--cor-preto); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background-color var(--transicao), color var(--transicao); } .tamanho-btn:hover { background-color: var(--cor-cinza-fundo); } .tamanho-btn.ativo { background-color: var(--cor-preto); color: var(--cor-branco); } .campo-personalizacao { width: 100%; padding: 12px 14px; border: 2px solid var(--cor-cinza-claro); border-radius: var(--raio-borda); font-family: inherit; font-size: 0.9rem; resize: vertical; transition: border-color var(--transicao); } .campo-personalizacao:focus { outline: none; border-color: var(--cor-preto); } .opcoes-sim-nao { display: flex; gap: 10px; } .opcao-btn { min-width: 70px; padding: 10px 18px; border: 2px solid var(--cor-preto); border-radius: var(--raio-borda); background-color: var(--cor-branco); color: var(--cor-preto); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background-color var(--transicao), color var(--transicao); } .opcao-btn:hover { background-color: var(--cor-cinza-fundo); } .opcao-btn.ativo { background-color: var(--cor-preto); color: var(--cor-branco); } .area-personalizacao { margin-top: 12px; } .btn-finalizar { width: 100%; margin-top: 30px; padding: 16px; background-color: var(--cor-preto); color: var(--cor-branco); border: none; border-radius: var(--raio-borda); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color var(--transicao); } .btn-finalizar:hover { background-color: var(--cor-preto-suave); } .btn-secundario { width: 100%; margin-top: 10px; padding: 14px; background-color: transparent; color: var(--cor-preto); border: 2px solid var(--cor-preto); border-radius: var(--raio-borda); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background-color var(--transicao), color var(--transicao); } .btn-secundario:hover { background-color: var(--cor-preto); color: var(--cor-branco); } /* Botão "Pagar agora" (abre o link do Mercado Pago) — usa o azul deles pra ficar claro que é um caminho diferente do WhatsApp. */ .btn-pagar-agora { width: 100%; margin-top: 24px; padding: 16px; background-color: #009ee3; color: #ffffff; border: none; border-radius: var(--raio-borda); font-size: 1rem; font-weight: 700; cursor: pointer; transition: background-color var(--transicao); } .btn-pagar-agora:hover { background-color: #0087c4; } .btn-pagar-agora[hidden], #pagarAgoraObs[hidden] { display: none; } /* ---------- CARRINHO (carrinho.html) ---------- */ .pagina-carrinho { margin: calc(var(--altura-faixa) + var(--altura-header)) auto 0; padding: 30px 0 70px; max-width: 720px; } .lista-carrinho { display: flex; flex-direction: column; gap: 16px; margin-bottom: 30px; } .item-carrinho { display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--cor-cinza-claro); border-radius: var(--raio-borda); } .item-carrinho-imagem { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; background-color: var(--cor-cinza-claro); flex-shrink: 0; } .item-carrinho-info { flex-grow: 1; } .item-carrinho-nome { font-weight: 700; margin-bottom: 4px; } .item-carrinho-detalhe { font-size: 0.82rem; color: var(--cor-cinza); } .item-carrinho-preco { font-weight: 700; margin-top: 6px; } .item-carrinho-remover { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; border: none; background-color: var(--cor-cinza-fundo); color: var(--cor-preto); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background-color var(--transicao); } .item-carrinho-remover:hover { background-color: var(--cor-cinza-claro); } .resumo-carrinho { border-top: 2px solid var(--cor-preto); padding-top: 20px; } .resumo-total { display: flex; justify-content: space-between; font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; } .resumo-desconto { font-size: 1rem; font-weight: 600; color: #1a8a3c; margin-top: -8px; } .resumo-cupom { display: flex; gap: 8px; margin-bottom: 16px; } .resumo-cupom input { flex: 1; padding: 10px 12px; border: 1px solid var(--cor-cinza-claro); border-radius: 6px; font-size: 0.95rem; } .resumo-cupom button { padding: 10px 16px; border: none; border-radius: 6px; background-color: var(--cor-preto); color: var(--cor-branco); font-weight: 700; cursor: pointer; white-space: nowrap; } .resumo-cupom button:hover { opacity: 0.85; } .resumo-cupom-mensagem { font-size: 0.85rem; margin: -10px 0 16px; } .resumo-cupom-mensagem.sucesso { color: #1a8a3c; } .resumo-cupom-mensagem.erro { color: #c0392b; } .limpar-carrinho { display: block; width: 100%; margin-top: 10px; padding: 10px; background: none; border: none; color: var(--cor-cinza); font-size: 0.85rem; text-decoration: underline; cursor: pointer; } .limpar-carrinho:hover { color: var(--cor-preto); } /* ---------- LOGIN / CADASTRO / MINHA CONTA ---------- */ .conta-link { color: var(--cor-branco); font-size: 0.9rem; font-weight: 600; white-space: nowrap; } .pagina-conta { margin-top: calc(var(--altura-faixa) + var(--altura-header)); padding: 50px 0 70px; } /* ---------- GUIA DE MEDIDAS ---------- */ .pagina-medidas { margin-top: calc(var(--altura-faixa) + var(--altura-header)); padding: 30px 0 70px; } .medidas-separador { color: var(--cor-cinza); margin: 0 4px; } .medidas-titulo { text-align: left; margin: 16px 0 28px; } .medidas-bloco { margin-bottom: 40px; } .medidas-bloco h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; } /* ---------- Política de Envio / Como Comprar (blocos de texto) ---------- */ .politica-envio-bloco, .como-comprar-bloco { max-width: 760px; margin-bottom: 36px; } .politica-envio-bloco h2, .como-comprar-bloco h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 12px; } .politica-envio-bloco p, .como-comprar-bloco p { font-size: 0.92rem; color: var(--cor-cinza); line-height: 1.7; margin-bottom: 10px; } .politica-envio-bloco strong, .como-comprar-bloco strong { color: var(--cor-preto); } .como-comprar-passos { max-width: 760px; margin-top: 20px; display: flex; flex-direction: column; gap: 20px; } .como-comprar-passo { display: flex; gap: 16px; align-items: flex-start; } .como-comprar-numero { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background-color: var(--cor-preto); color: var(--cor-branco); display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 1.1rem; } .como-comprar-passo h3 { font-size: 1rem; margin-bottom: 4px; } .como-comprar-passo p { font-size: 0.9rem; color: var(--cor-cinza); line-height: 1.6; } .medidas-tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; /* Sombra do lado direito avisando que dá pra arrastar pra ver mais colunas - some sozinha quando a tabela já cabe inteira na tela. */ background: linear-gradient(to right, var(--cor-branco) 30%, rgba(0, 0, 0, 0)), linear-gradient(to right, rgba(0, 0, 0, 0), var(--cor-branco) 70%) 100% 0, linear-gradient(to right, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .medidas-dica-mobile { display: none; font-size: 0.78rem; color: var(--cor-cinza); margin-bottom: 8px; } .medidas-tabela { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.85rem; } .medidas-tabela th, .medidas-tabela td { border: 1px solid var(--cor-cinza-claro); padding: 10px 14px; text-align: left; white-space: nowrap; } .medidas-tabela thead th { background-color: var(--cor-preto); color: var(--cor-branco); font-weight: 700; } .medidas-tabela tbody tr:nth-child(even) { background-color: var(--cor-cinza-fundo); } .medidas-obs { font-size: 0.78rem; color: var(--cor-cinza); margin-top: 6px; } .medidas-ajuda { font-size: 0.9rem; margin-top: 30px; } .medidas-ajuda a { color: var(--cor-preto); font-weight: 700; text-decoration: underline; } /* ---------- Página de FAQ ---------- */ .pagina-faq { margin-top: calc(var(--altura-faixa) + var(--altura-header)); padding: 30px 0 70px; } .faq-lista { max-width: 760px; margin-top: 20px; display: flex; flex-direction: column; gap: 12px; } .faq-item { border: 1px solid var(--cor-preto); border-radius: var(--raio-borda); padding: 16px 20px; background-color: var(--cor-preto); color: var(--cor-branco); } .faq-item summary { font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 26px; color: var(--cor-branco); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; position: absolute; right: 0; top: 0; font-size: 1.2rem; font-weight: 700; } .faq-item[open] summary::after { content: "−"; } .faq-item p { margin-top: 12px; color: #b8b8b8; font-size: 0.92rem; line-height: 1.6; } .faq-item p a { color: var(--cor-branco); font-weight: 700; text-decoration: underline; } .conta-caixa { max-width: 480px; margin: 0 auto; padding: 32px; background-color: var(--cor-preto); color: var(--cor-branco); border: 1px solid var(--cor-preto); border-radius: var(--raio-borda); } /* ---------- Meus Pedidos (minha-conta.html) ---------- */ .conta-titulo-pagina { text-align: left; margin: 16px 0 28px; } .conta-layout { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap; } .conta-layout .conta-caixa { flex: 0 0 340px; margin: 0; } .conta-layout .pedidos-secao { flex: 1 1 400px; max-width: none; margin: 0; } .pedidos-secao { max-width: 720px; margin: 40px auto 0; } .pedidos-titulo { font-family: var(--fonte-titulo); letter-spacing: 0.5px; text-align: left; font-size: 1.4rem; margin-bottom: 20px; } .lista-pedidos { display: flex; flex-direction: column; gap: 16px; } .pedido-card { border: 1px solid var(--cor-cinza-claro); border-radius: var(--raio-borda); padding: 20px; } .pedido-card-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .pedido-numero { font-family: var(--fonte-titulo); letter-spacing: 0.5px; font-size: 1.1rem; } .pedido-data { font-size: 0.8rem; color: var(--cor-cinza); } .pedido-status { flex-shrink: 0; padding: 5px 12px; border-radius: 999px; color: #ffffff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .pedido-item-linha { font-size: 0.9rem; color: var(--cor-cinza); margin-bottom: 4px; } .pedido-rastreio { font-size: 0.85rem; margin-top: 10px; } .pedido-total { font-family: var(--fonte-titulo); letter-spacing: 0.5px; margin-top: 12px; font-size: 1.1rem; } .conta-titulo { font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: 8px; color: var(--cor-branco); } .conta-subtitulo { text-align: center; font-size: 0.9rem; color: #b8b8b8; margin-bottom: 24px; } .conta-subtitulo a { color: var(--cor-branco); font-weight: 700; text-decoration: underline; } .conta-secao-titulo { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 20px 0 4px; color: #b8b8b8; } .form-conta { display: flex; flex-direction: column; gap: 14px; } .form-conta[hidden] { display: none; } .campo-form { display: flex; flex-direction: column; gap: 6px; flex: 1; } .campo-form label { font-size: 0.82rem; font-weight: 700; } .campo-form input { width: 100%; min-width: 0; padding: 11px 14px; border: 1px solid var(--cor-cinza-claro); border-radius: var(--raio-borda); font-size: 0.9rem; font-family: inherit; } .campo-form input:focus { outline: none; border-color: var(--cor-preto); } .campo-form-linha { display: flex; gap: 12px; } .campo-form-estado { max-width: 80px; flex: 0 0 auto; } .conta-erro { color: #ff6b6b; font-size: 0.85rem; text-align: center; } .conta-sucesso { color: #4caf50; font-size: 0.85rem; text-align: center; } .link-esqueci-senha { display: block; margin: -6px 0 4px; background: none; border: none; color: #b8b8b8; font-size: 0.8rem; text-decoration: underline; cursor: pointer; text-align: right; width: 100%; } .link-esqueci-senha:hover { color: var(--cor-branco); } /* O balão de login/cadastro agora é preto, então o botão de enviar (que normalmente é preto) precisa inverter pra continuar visível. */ .conta-caixa .btn-finalizar { background-color: var(--cor-branco); color: var(--cor-preto); } .conta-caixa .btn-finalizar:hover { background-color: #ffffff; } .conta-caixa .btn-secundario { color: var(--cor-branco); border-color: var(--cor-branco); } .conta-caixa .btn-secundario:hover { background-color: var(--cor-branco); color: var(--cor-preto); } .conta-caixa .campo-form input:focus { border-color: var(--cor-branco); } .campo-dica { font-size: 0.78rem; color: #b8b8b8; } .perfil-dados { margin-bottom: 24px; font-size: 0.92rem; line-height: 1.8; } .perfil-subtitulo { font-family: var(--fonte-titulo); letter-spacing: 0.5px; font-size: 1.1rem; margin-bottom: 16px; } #formPerfil .conta-erro { text-align: left; } .produto-observacao { margin-top: 12px; font-size: 0.78rem; color: var(--cor-cinza); text-align: center; } #erroPagamento { color: #c0392b; font-weight: 600; } /* ---------- CATÁLOGO COMPLETO (loja.html) ---------- */ .pagina-loja { margin-top: calc(var(--altura-faixa) + var(--altura-header) + var(--altura-categorias)); padding: 30px 0 70px; } .loja-titulo { text-align: left; margin-bottom: 24px; } .botao-filtros-mobile { display: none; width: 100%; padding: 12px; margin-bottom: 16px; background-color: var(--cor-preto); color: var(--cor-branco); border: none; border-radius: var(--raio-borda); font-size: 0.9rem; font-weight: 700; cursor: pointer; } .loja-layout { display: grid; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; } .filtros-sidebar { border: 1px solid var(--cor-cinza-claro); border-radius: var(--raio-borda); padding: 20px; position: sticky; top: calc(var(--altura-faixa) + var(--altura-header) + var(--altura-categorias) + 16px); /* Deixa a caixa de filtros com altura limitada à tela, com rolagem própria, */ /* pra dar pra ver e escolher tudo mesmo quando tem muita opção de filtro. */ max-height: calc(100vh - var(--altura-faixa) - var(--altura-header) - var(--altura-categorias) - 32px); overflow-y: auto; } .filtros-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .filtros-cabecalho h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.5px; } .limpar-filtros { background: none; border: none; color: var(--cor-cinza); font-size: 0.8rem; text-decoration: underline; cursor: pointer; } .limpar-filtros:hover { color: var(--cor-preto); } .filtro-grupo { padding: 16px 0; border-top: 1px solid var(--cor-cinza-claro); } .filtro-grupo:first-of-type { padding-top: 0; border-top: none; } .filtro-titulo { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 10px; } .filtro-checkboxes { display: flex; flex-direction: column; gap: 8px; } .filtro-checkboxes-linha { flex-direction: row; flex-wrap: wrap; } .filtro-checkboxes-rolavel { max-height: 160px; overflow-y: auto; padding-right: 4px; } .filtro-checkbox-linha { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; cursor: pointer; } .filtro-checkboxes-linha .filtro-checkbox-linha { border: 1px solid var(--cor-cinza-claro); border-radius: 6px; padding: 4px 8px; } .filtro-preco { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--cor-cinza); } .campo-preco { width: 0; flex: 1; padding: 8px 10px; border: 1px solid var(--cor-cinza-claro); border-radius: 6px; font-size: 0.85rem; } .campo-select { width: 100%; padding: 9px 10px; border: 1px solid var(--cor-cinza-claro); border-radius: 6px; font-size: 0.85rem; background-color: var(--cor-branco); } .loja-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .contador-resultados { font-size: 0.9rem; color: var(--cor-cinza); } .loja-topo .campo-select { width: auto; min-width: 180px; } /* ========================================================= RESPONSIVIDADE (celular e tablet) ========================================================= */ @media (max-width: 900px) { .busca-wrapper { order: 3; max-width: 100%; width: 100%; margin-top: 6px; } .header-content { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 12px; } .header { top: var(--altura-faixa); } /* Cabeçalho mais enxuto no celular: logo menor, "Olá, Fulano" curto (não deixa nome/e-mail grande empurrar o carrinho/menu pra baixo), e a barra de busca mais baixa. */ .logo-imagem { height: 32px; } .logo-letreiro { height: 15px; } .conta-link { display: inline-block; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; vertical-align: middle; } .campo-busca { padding: 8px 36px 8px 12px; font-size: 0.85rem; } .busca-icone { width: 26px; height: 26px; } :root { --altura-header: 92px; } /* As páginas sem busca no cabeçalho (anuncio.html, produto.html, loja.html) */ /* não quebram linha aqui, então usam uma altura menor. Precisa estar no */ /* porque o banner é "irmão" do cabeçalho. A loja.html usa */ /* .com-categorias-sem-busca porque, diferente das outras, ela mantém a */ /* barra de categorias (só não tem o campo de busca no cabeçalho). */ .sem-categorias, .com-categorias-sem-busca { --altura-header: 60px; } } @media (max-width: 768px) { .medidas-dica-mobile { display: block; } .times-brasil .times-gigantes-lista { grid-template-columns: repeat(3, 88px); } .mega-menu { min-width: 260px; max-width: calc(100vw - 40px); grid-template-columns: repeat(2, 1fr); } .politicas-grid { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; } .nav { position: absolute; top: 100%; left: 0; width: 100%; background-color: var(--cor-preto); flex-direction: column; gap: 0; max-height: 0; overflow: hidden; transition: max-height var(--transicao); margin-left: 0; } .nav.aberto { max-height: 300px; } .nav a { padding: 16px 20px; border-top: 1px solid var(--cor-preto-suave); } .menu-toggle { display: flex; } .grade-produtos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; } .produto-info { padding: 12px; } .produto-detalhe { grid-template-columns: 1fr; gap: 24px; } .lightbox { padding: 50px 10px; } .lightbox-seta { width: 38px; height: 38px; font-size: 1.1rem; } .lightbox-fechar { top: 6px; right: 10px; } .btn-whatsapp { width: 52px; height: 52px; bottom: 16px; right: 16px; } .botao-filtros-mobile { display: block; } .loja-layout { grid-template-columns: 1fr; } .filtros-sidebar { display: none; position: static; } .filtros-sidebar.aberta { display: block; margin-bottom: 20px; } .campo-form-linha { flex-direction: column; } .campo-form-estado { max-width: 100%; } .conta-caixa { padding: 24px 20px; } } /* ---------- TOTAL AO LADO DO ÍCONE DO CARRINHO ---------- */ .carrinho-link { gap: 8px; } .carrinho-total { order: -1; font-size: 0.85rem; font-weight: 700; white-space: nowrap; } .carrinho-total[hidden] { display: none; } /* ---------- ITEM GRÁTIS (Leve 3) ---------- */ .item-carrinho-preco s { color: var(--cor-cinza); font-weight: 500; margin-right: 6px; } .selo-gratis { display: inline-block; padding: 2px 8px; border-radius: 999px; background-color: #1a8a3c; color: #ffffff; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; } /* ---------- BOTÃO DO MODO NOTURNO ---------- */ .tema-toggle { flex-shrink: 0; width: 34px; height: 34px; border: none; border-radius: 50%; background: none; font-size: 1.15rem; line-height: 1; cursor: pointer; } .tema-toggle:hover { background-color: rgba(255, 255, 255, 0.15); } @media (max-width: 480px) { .carrinho-total { font-size: 0.75rem; } .tema-toggle { width: 30px; height: 30px; font-size: 1rem; } } /* ---------- MODO NOTURNO ---------- Inverte as cores principais (fundo escuro, texto claro). Cabeçalho, rodapé, barra de categorias e caixas pretas continuam pretos, como no modo claro - por isso voltam pros valores originais aqui. */ [data-tema="escuro"] { --cor-preto: #f6f1e6; --cor-branco: #141414; --cor-cinza: #a3a3a3; --cor-cinza-claro: #2e2e2e; --cor-cinza-fundo: #1f1f1f; color-scheme: dark; } [data-tema="escuro"] .header, [data-tema="escuro"] .footer, [data-tema="escuro"] .faixa-aviso, [data-tema="escuro"] .categorias-wrapper, [data-tema="escuro"] .faq-item, [data-tema="escuro"] .conta-caixa { --cor-preto: #000000; --cor-branco: #f6f1e6; --cor-cinza: #666666; --cor-cinza-claro: #e5e5e5; --cor-cinza-fundo: #f4f4f4; } [data-tema="escuro"] .mega-menu-conteudo { background-color: #1c1c1c; --cor-preto: #f6f1e6; --cor-cinza: #a3a3a3; --cor-cinza-claro: #2e2e2e; --cor-cinza-fundo: #1f1f1f; } [data-tema="escuro"] input:not(.campo-busca), [data-tema="escuro"] select, [data-tema="escuro"] textarea { background-color: #1f1f1f; color: #f6f1e6; border-color: #3a3a3a; } [data-tema="escuro"] .resumo-cupom-mensagem.sucesso, [data-tema="escuro"] .resumo-desconto { color: #4caf50; } /* ---------- SETAS PRA PASSAR AS FOTOS DO ANÚNCIO ---------- */ .foto-seta { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background-color: rgba(0, 0, 0, 0.35); color: #ffffff; cursor: pointer; z-index: 2; transition: background-color var(--transicao); } .foto-seta[hidden] { display: none; } .foto-seta:hover { background-color: rgba(0, 0, 0, 0.6); } .foto-seta-esquerda { left: 10px; } .foto-seta-direita { right: 10px; } @media (max-width: 480px) { .foto-seta { width: 34px; height: 34px; } } /* Linhas de resumo escondidas (o display:flex acima ignorava o atributo hidden) */ .resumo-total[hidden] { display: none; } /* ---------- QUANTIDADE NO CARRINHO ---------- */ .item-carrinho-quantidade { display: inline-flex; align-items: center; margin: 6px 0; border: 1px solid var(--cor-cinza-claro); border-radius: 999px; } .item-carrinho-quantidade button { width: 32px; height: 32px; border: none; background: none; color: var(--cor-preto); font-size: 1.2rem; line-height: 1; cursor: pointer; border-radius: 50%; } .item-carrinho-quantidade button:hover:not(:disabled) { background-color: var(--cor-cinza-claro); } .item-carrinho-quantidade button:disabled { opacity: 0.35; cursor: not-allowed; } .qtd-valor { min-width: 28px; text-align: center; font-weight: 700; } /* ---------- ESCUDOS PRETOS NO MODO NOTURNO ---------- Os escudos abaixo são desenhos pretos sobre fundo transparente e sumiam no fundo escuro. O do Galo vira "negativo" (branco); o do Santos ganha um contorno claro pra continuar com as cores originais. */ [data-tema="escuro"] img[src*="escudo-retro-atletico-mg"] { filter: invert(1); } [data-tema="escuro"] img[src*="escudo-retro-santos"] { filter: drop-shadow(0 0 1px #f6f1e6) drop-shadow(0 0 1px #f6f1e6) drop-shadow(0 0 2px #f6f1e6); } /* O logo do Eredivisie tem muita margem branca: preenche o card pra ficar legível */ .liga-card img[src*="liga-eredivisie"] { object-fit: cover; padding: 0; }