/* ══ Loja Nozama 3D ══════════════════════════════════════════════════════ A identidade é a mesma do painel: azul da marca, raio de 7px em tudo, Sora no display, Inter no texto e JetBrains Mono no dinheiro. A loja não inventa um segundo sistema visual porque é a mesma empresa. Tema claro e comercial, sem hero escuro: as peças resolvem problema de casa, não são gadget de vitrine. ═════════════════════════════════════════════════════════════════════════ */ /* O atributo `hidden` tem que VENCER, sempre. Ele é `display:none` só na folha do navegador, e qualquer regra nossa com `display:flex` ganha dele por especificidade. Aconteceu duas vezes em 24/08/2026: a lente do zoom nasceu aberta e a linha do desconto continuou na tela depois de o cupom deixar de valer, mostrando um valor que não estava sendo cobrado. É o tipo de erro que não aparece em teste de JS, porque o atributo ESTAVA certo. */ [hidden]{display:none !important} :root{ /* O azul da MARCA é o do logo de verdade (amostrado do arquivo: #0068C9). Antes era um tom aproximado, e ele aparecia lado a lado com o logo na mesma tela, dois azuis parecidos brigando é pior que um azul só. */ --primary:#0068C9; --primary-rgb:0 104 201; --deep:#004E96; --accent:#4B9BE8; /* AÇÃO é o azul do Mercado Livre, e existe SEPARADO da marca de propósito: o logo continua sendo o logo, e todo botão que FAZ alguma coisa usa o azul que o brasileiro já aprendeu a reconhecer como "clique aqui para comprar". O par claro é o do botão secundário do ML: mesma família, peso menor, para dizer "esta é a segunda opção" sem sumir da tela. */ --acao:#3483FA; --acao-rgb:52 131 250; --acao-forte:#2968C8; --acao-fraca:#E3EDFB; --ink:#16233B; --ink-soft:#5A6A85; --ink-fraco:#8A9AB4; --ground:#F4F7FC; --surface:#fff; --surface-2:#EEF3FB; --edge:#DDE5F0; --ok:#0E9F6E; --ok-rgb:14 159 110; --warn:#B4791A; --r:7px; /* Fundos com cor própria, para o escuro poder trocá-los pelo TOKEN em vez de cada componente carregar um hex solto. */ --alto:#F8FAFD; --linha-fraca:#F1F5FA; --off-fundo:#E7F8EE; --off-txt:#0B7A3E; --aviso-fundo:#FFF8EC; --aviso-borda:#F4D9A6; --aviso-txt:#6B4E14; --titulo:#2B2B2B; } /* ══ TEMA ESCURO ════════════════════════════════════════════════════════════ Segue o SISTEMA, sem botão de troca: loja não é lugar de configurar tema, e quem quer escuro já configurou no aparelho. Só os TOKENS mudam aqui. Nenhum componente ganha regra de cor própria dentro deste bloco, se ganhasse, a próxima cor escrita direto num componente apareceria errada num dos dois temas e ninguém saberia por quê. */ /* A guarda `:not([data-tema="claro"])` é o que permite CLAREAR quem está no escuro do sistema: sem ela, a media query venceria o clique e o botão não faria nada para metade dos visitantes. */ @media (prefers-color-scheme: dark){ :root:not([data-tema="claro"]){ /* O azul da marca clareia: #0068C9 sobre fundo escuro fica pesado e some. O logo continua com a cor dele, ele é uma imagem, e mexer nela seria mexer na marca. */ --primary:#4B9BE8; --primary-rgb:75 155 232; --deep:#0068C9; --accent:#8CC4F2; --acao:#4A93FB; --acao-rgb:74 147 251; --acao-forte:#3B7ADB; --acao-fraca:#16283F; --ink:#E8EDF5; --ink-soft:#A8B6CB; --ink-fraco:#7C8CA5; --ground:#0B1220; --surface:#111C2F; --surface-2:#18263C; --edge:#243450; --ok:#34C68B; --ok-rgb:52 198 139; --warn:#D9A648; --alto:#16233B; --linha-fraca:#1C2C46; --off-fundo:#123326; --off-txt:#5BD9A3; --aviso-fundo:#2A2214; --aviso-borda:#4A3C1E; --aviso-txt:#E5C27C; --titulo:#E8EDF5; } /* A foto do produto continua sobre o fundo claro que ela tem: escurecer o bloco faria a peça branca desaparecer. É por isso que `image_bg` existe. */ .palco-fig,.card-fig,.cat-fig{filter:none} } *{box-sizing:border-box} body{margin:0;background:var(--ground);color:var(--ink); font-family:Inter,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.55; -webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;letter-spacing:-.02em;text-wrap:balance;margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;height:auto;display:block} button{font:inherit;color:inherit;cursor:pointer;border:0;background:none} :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:var(--r)} /* O recuo da coluna numa variável, e não num 20 repetido: quem precisa alinhar com o `.wrap` por fora dele (o painel do menu, que é absoluto) passa a ler o mesmo número em vez de copiá-lo. */ :root{--recuo:20px} /* ⚠️ A COLUNA É 1400, E ELA VALE PARA TUDO (03/10/2026). Era 1200, e numa tela de 1387 isso deixava uns 100px de vazio de cada lado da grade: os cards paravam antes da borda e a página parecia uma coluna no meio do monitor. Mudar SÓ a grade seria pior que o problema: o logo, a busca, o menu, o banner e o rodapé continuariam em 1200 e a grade sairia desalinhada de tudo. Quem define a coluna é o `.wrap`, e mais ninguém: é a regra que este projeto já pagou seis vezes para aprender. 1400 e não mais: a leitura longa (descrição do produto, políticas) tem medida PRÓPRIA em `ch` e não estica junto, mas o topo e a grade esticam, e acima disso o card começa a ficar grande demais para a foto que ele tem. */ .wrap{max-width:1400px;margin:0 auto;padding:0 var(--recuo)} .linha{display:flex;align-items:center;gap:22px} .chapeu{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-fraco)} .preco,.card-preco b,.mini-preco,.banner-preco b{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums} /* topo */ .barra-topo{background:var(--deep);color:#BBD7F5;font-size:12.5px;padding:8px 0} /* As três repartidas na largura, não duas encostadas na esquerda e uma jogada na direita: com `margin-left:auto` na última sobrava um vão de uns 200px no meio da faixa, e as duas primeiras pareciam uma frase só que quebrou. `space-between` dá a mesma respiração para os dois vãos. */ .barra-topo .linha{justify-content:space-between;gap:14px} .topo{background:var(--surface);border-bottom:1px solid var(--edge);position:sticky;top:0;z-index:40} .topo .linha{height:66px} .marca{font-family:Sora,Inter,sans-serif;font-weight:800;font-size:18px;display:flex;align-items:center;gap:9px;white-space:nowrap} .marca span:not(.marca-i){color:var(--primary)} /* O botão vive DENTRO do campo, e por isso precisa de altura própria em vez de padding: com `padding:8px 16px` ele ficava 4px mais baixo que a caixa e sobrava uma fresta de fundo cinza em volta, que lê como se estivesse espremido. Altura calculada da caixa menos as bordas, e um respiro de 4px de cada lado. */ .busca{flex:1;display:flex;align-items:stretch;gap:9px;border:1.5px solid var(--edge); border-radius:var(--r);background:var(--alto);padding:4px 4px 4px 13px; min-height:46px;color:var(--ink-fraco)} .busca > svg{align-self:center;flex:0 0 auto} .busca input{flex:1;border:0;background:none;outline:none;font-size:14px;color:var(--ink);min-width:0} .busca button{flex:0 0 auto;margin-left:auto;background:var(--acao);color:#fff; font-size:13px;font-weight:600;padding:0 20px;border-radius:calc(var(--r) - 1px); display:flex;align-items:center;justify-content:center;white-space:nowrap} .busca button:hover{background:var(--acao-forte)} .sacola{position:relative;display:flex;padding:6px} /* O contador é absoluto com `right` NEGATIVO para abraçar o canto do ícone. Com o carrinho encostado na borda direita da página, esses 4px viravam 4px de rolagem lateral no celular, bastante para o navegador mostrar a barra e nada para a pessoa entender por quê. */ .sacola-n{position:absolute;top:-2px;right:-2px;background:var(--primary);color:#fff;font-size:9.5px;font-weight:700; min-width:17px;height:17px;border-radius:99px;display:grid;place-items:center;padding:0 4px; font-family:"JetBrains Mono",monospace} .menu{background:var(--surface);border-bottom:1px solid var(--edge)} .menu .linha{min-height:44px;gap:24px;font-size:13.5px;font-weight:600;flex-wrap:wrap;overflow:visible} .menu a{color:var(--ink-soft);white-space:nowrap;height:44px;display:flex;align-items:center;border-bottom:2px solid transparent} .menu a.on{color:var(--primary);border-color:var(--primary)} /* vitrine */ .vitrine-topo{display:grid;grid-template-columns:2fr 1fr;gap:16px;padding-top:20px} /* Com banner CADASTRADO a dobra é dele inteira: os dois cartões do lado existem para ocupar o terço que sobra do carrossel automático, e mantê-los devolveria o banner ao tamanho de antes, que é justamente o que o desenho de largura cheia veio resolver. */ .vitrine-topo.so-banner{grid-template-columns:1fr} /* ── banner: carrossel com fundo de camadas ───────────────────────────────── O fundo não é degradê: é o azul da marca com CAMADAS FINAS horizontais, que é literalmente como a peça sai da máquina. Conta o que a loja faz sem escrever nada, e sobrevive ao celular barato (as camadas somem para um azul chapado se a tela lavar, em vez de virar um borrão cinza como o degradê). Por cima, dois brilhos radiais bem fracos dão profundidade sem clarear o texto branco. */ .banner-caixa{position:relative;border-radius:var(--r);overflow:hidden; background:var(--surface);border:1px solid var(--edge)} /* ══ CAMADAS: a assinatura visual da casa ═══════════════════════════════════ Linhas horizontais finas com um brilho no canto. São literalmente como a peça sai da máquina, o tema conta o que a loja faz sem escrever nada. Duas receitas porque o fundo muda: sobre COR (banner) as linhas são brancas; sobre o cinza-claro dos cartões, branco não apareceria e elas viram escuras. A mesma opacidade nos dois casos daria um efeito forte num e invisível no outro. Vale para tudo que é bloco de FOTO. Fora deles, não: sobre texto as linhas viram ruído e atrapalham a leitura. */ .camadas{position:relative} .camadas::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background: radial-gradient(110% 80% at 82% 10%, rgba(255,255,255,.14), transparent 60%), repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 7px)} /* Sobre fundo claro o desenho inverte: a luz vem de branco mais forte e as linhas passam a ser sombra. */ .camadas-claro{position:relative} .camadas-claro::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background: radial-gradient(110% 80% at 80% 8%, rgba(255,255,255,.55), transparent 62%), repeating-linear-gradient(180deg, rgba(20,40,70,.035) 0px, rgba(20,40,70,.035) 1px, transparent 1px, transparent 7px)} .banner-fig{position:relative} .banner-fig::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background: radial-gradient(110% 80% at 82% 10%, rgba(255,255,255,.14), transparent 60%), repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 1px, transparent 7px)} /* Altura TRAVADA. Cada destaque tem um título de tamanho diferente, e com a altura livre o cartão pulava a cada troca, o conteúdo abaixo dava um solavanco de 40px sozinho, e quem estava lendo perdia a linha. O título é limitado a duas linhas pelo mesmo motivo: um nome comprido estourava o cartão e cortava o botão de comprar pela metade. */ .banner-trilho{position:relative;min-height:376px} /* Duas metades: o texto na esquerda sobre branco, a foto na direita sobre a cor dela. `grid` e não `flex` porque as duas metades precisam ser exatamente iguais, com flex, um título curto encolhia o lado do texto e a divisória dançava a cada troca de slide. */ /* A troca é um cruzamento, não um corte: o slide que sai desaparece em 0,55s enquanto o que entra aparece e sobe 8px. Com `opacity` sozinha os dois ficavam meio transparentes ao mesmo tempo no meio da animação, e isso lia como um piscar, o "soco" que o Paulo viu. O deslocamento dá direção ao movimento e o olho entende que uma coisa substituiu a outra. */ .banner{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:0; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1),visibility 0s .55s; z-index:1} .banner.on{opacity:1;visibility:visible;transform:none;z-index:2; transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1),visibility 0s} /* `place-items: center` (que era o valor daqui) encolhe o item ao conteúdo: o `width:100%` da foto não tinha efeito e ela media 145px numa caixa de 380. `stretch` deixa a img ocupar o bloco, e quem centraliza a peça dentro dela é o `object-fit: contain`. */ .banner-fig{position:relative;overflow:hidden;display:grid;place-items:stretch} /* Sem padding: a foto é quadrada e o bloco é mais alto que largo, então o `contain` já deixa faixas de cor em cima e embaixo, que é exatamente o desenho do Mercado Livre. Com padding por cima disso, a peça encolhia e sobrava cor demais em volta. */ .banner-fig img{width:100%;height:100%;object-fit:contain;display:block; position:relative;z-index:0} @media (prefers-reduced-motion:reduce){ .banner{transition:none} } /* Os pontos ficam SOBRE o banner para não empurrar a altura do cartão a cada slide, e no canto DIREITO: à esquerda eles caíam em cima do preço, que é a última coisa que pode ficar coberta num banner de venda. */ .banner-pontos{position:absolute;right:26px;bottom:20px;z-index:3;display:flex;gap:7px} /* Os pontos vivem sobre a FOTO, que pode ser clara ou escura: por isso eles ganham um véu escuro atrás em vez de contar com o fundo. */ .banner-pontos{background:rgba(15,25,45,.32);border-radius:99px;padding:7px 10px;backdrop-filter:blur(3px)} .banner-pontos button{width:8px;height:8px;border-radius:99px;background:rgba(255,255,255,.55); padding:0;transition:.2s} .banner-pontos button:hover{background:rgba(255,255,255,.85)} /** * O ponto ativo é uma BARRA QUE ENCHE, não um ponto mais largo. * * O Paulo relatou que o banner "não rotaciona". Ele rotaciona (medido: passa de * slide em nove segundos), só que nove segundos olhando uma tela parada são uma * eternidade, e nada na tela dizia que havia uma contagem correndo. E o * carrossel PARA com o mouse em cima, de propósito, o que num banner que ocupa * meia tela acontece o tempo todo sem a pessoa perceber: ela via um banner * imóvel e concluía que estava quebrado. * * A barra enchendo resolve as duas coisas de uma vez: mostra que o tempo está * correndo e mostra quando ele PARA, porque a animação congela junto. * * A duração vem do JS (`--nz-banner-ms`), não escrita aqui: o tempo é do painel, * e uma duração fixa no CSS descolaria da troca real no dia em que ele mudasse. */ .banner-pontos button.on{background:rgba(255,255,255,.35);width:30px;position:relative;overflow:hidden} .banner-pontos button.on::after{ content:"";position:absolute;inset:0;border-radius:99px; background:var(--surface);transform-origin:left; animation:nz-banner-barra var(--nz-banner-ms,9000ms) linear forwards } @keyframes nz-banner-barra{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* Parado, a barra para junto: é ela que conta que o relógio está de pé. */ .banner-caixa.parado .banner-pontos button.on::after{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ /* Sem animação, o ponto ativo volta a ser só um ponto mais claro: uma barra cheia parada diria que o slide está sempre acabando. */ .banner-pontos button.on{background:var(--surface)} .banner-pontos button.on::after{display:none} } .banner-txt{flex:1;min-width:0} /* Texto ESCURO sobre branco. No azul chapado tudo era branco, então chapéu, título, resumo e preço tinham o mesmo peso visual e o olho não sabia por onde começar. Aqui cada um tem a sua cor e a hierarquia volta sozinha. */ .banner-txt{padding:38px 34px} .banner .chapeu{color:var(--ink-fraco);font-size:11px;letter-spacing:.16em;font-weight:600} /* Três linhas em vez de duas, e corpo um pouco menor: os nomes reais têm seis palavras ("Suporte de papel higiênico com prateleira") e cortar com reticências deixava o cliente sem saber o que é a peça, que é a única coisa que o banner precisa dizer. */ .banner h1{font-size:clamp(21px,2.1vw,28px);font-weight:800;color:var(--titulo); margin:10px 0 10px;line-height:1.15;letter-spacing:-.015em} .banner p{color:var(--ink-soft);font-size:14.5px;margin:0 0 18px;line-height:1.5} .banner-preco{display:block;margin-bottom:20px;color:var(--ink-fraco);font-size:12px} .banner-preco b{color:var(--ink);margin-left:6px} /* Era branco sobre azul; sobre branco ele sumiria. Vira o mesmo botão de ação do resto da loja, que é o que a pessoa já aprendeu a clicar. */ /* `align-self: flex-start` é o que impede o botão de esticar: dentro de uma coluna flex, o padrão é `stretch` e ele tomava a largura toda do texto, um botão de 380px parece uma barra, não um botão. */ .btn-claro{display:inline-flex;align-items:center;align-self:flex-start; background:var(--acao);color:#fff;font-weight:600;font-size:14.5px; padding:0 26px;min-height:46px;border-radius:var(--r)} .btn-claro:hover{background:var(--acao-forte)} /* O lado é uma pilha: todos os grupos ocupam o mesmo lugar e só o corrente aparece, igual aos slides do banner. `grid` e não `position:absolute` porque a altura tem de ser a do maior grupo, senão o bloco pularia a cada troca. */ .banner-lado{display:grid} .banner-lado > .lado-grupo{grid-area:1/1} .lado-grupo{display:flex;flex-direction:column;gap:16px; opacity:0;visibility:hidden;transform:translateY(8px); transition:opacity .55s ease,transform .55s ease,visibility .55s} .lado-grupo.on{opacity:1;visibility:visible;transform:none} @media (prefers-reduced-motion:reduce){ .lado-grupo{transition:none} } /* "Sob consulta" no lugar do número, no banner e no cartão do lado. Menor e sem o peso do preço: ele não é um valor, é o aviso de que ainda não há um. */ .banner-consulta b{font-size:26px;font-weight:800} /* ⚠️ `.mini-preco.mini-consulta` e não `.mini-consulta` sozinho: as duas têm uma classe de especificidade, e `.mini-preco` é declarada DEPOIS, então ela ganhava por ordem no arquivo e o "Sob consulta" saía no azul de ação, do mesmo jeito que um preço. Quinta vez que ordem no arquivo morde aqui. */ .mini-preco.mini-consulta{font-size:15px;font-weight:800;color:var(--ink-fraco)} /* Fundo BRANCO como o card da grade: sobre o cinza-azulado ele parecia um aviso, não um produto, e o produto é o que ele é. */ .mini-banner{flex:1;border-radius:var(--r);background:var(--surface);padding:18px; display:flex;align-items:center;gap:16px;border:1px solid var(--edge);transition:.16s} .mini-banner:hover{border-color:var(--acao);box-shadow:0 8px 20px rgba(15,35,70,.1)} .mini-banner h3{font-size:17px;font-weight:700;margin:5px 0 7px;line-height:1.2} /* O preço herdava o tamanho do texto ao redor e sumia: num cartão que existe para vender, o número tem que ser a segunda coisa que o olho encontra, logo depois do nome. Aqui ele sobe ao patamar do card da grade. */ .mini-preco{font-size:22px;font-weight:800;color:var(--ink);display:block;line-height:1.1} /* De 86 para 116: a foto é o que faz reconhecer a peça, e num cartão de 180px de altura ela sobrava espaço em volta sem usar. */ .mini-fig{width:116px;height:116px;flex:0 0 auto;border-radius:var(--r);overflow:hidden; background:var(--surface-2)} .mini-fig img{width:100%;height:100%;object-fit:cover;display:block} /* ── bloco branco com título, como as seções do Mercado Livre ── */ .bloco-cats{margin-top:16px;background:var(--surface);border:1px solid var(--edge); border-radius:var(--r);padding:20px} .bloco-topo{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;flex-wrap:wrap} .bloco-topo h2{font-family:Sora,system-ui,sans-serif;font-size:19px;font-weight:700;letter-spacing:-.01em} .bloco-topo a{font-size:13px;color:var(--acao);font-weight:500} /* Cartão de categoria: foto à esquerda em fundo cinza, nome à direita. O círculo de antes era linguagem de stories e cortava as bordas da peça, que é justamente o que distingue um suporte de outro. */ /* A largura de cada cartão vem do `.trilho-itens > *` (um quarto da faixa); aqui sobra só o espaçamento. A regra de grade PRECISOU sair: ela vinha depois do `display:flex` do trilho e ganhava dele por ordem no arquivo. */ .cats-grade{gap:12px} .cat-card{display:flex;align-items:stretch;gap:0;border:1px solid var(--edge); border-radius:var(--r);overflow:hidden;background:var(--surface);transition:.16s} .cat-card:hover{border-color:var(--acao);box-shadow:0 6px 16px rgba(15,35,70,.09)} /* A foto fica INTEIRA dentro do quadro, sobre a cor real dela. Com `cover` ela era cortada para preencher, e como a arte da capa costuma ter o nome em cima e a peça embaixo, o corte central pegava o texto e metade da peça: foi o que o Paulo viu no celular. `contain` mostra a peça toda, e o `image_bg` faz a sobra parecer parte da foto em vez de uma faixa cinza. */ .cat-fig{width:82px;flex:0 0 82px;background:var(--cbg,var(--surface-2));display:grid;place-items:center; color:var(--primary);font-family:Sora,Inter,sans-serif;font-weight:800;font-size:24px;overflow:hidden} .cat-fig img{width:100%;height:100%;object-fit:contain;display:block} .cat-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center; gap:2px;padding:12px 14px} .cat-txt b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25} .cat-txt em{font-style:normal;font-size:11.5px;color:var(--ink-fraco)} .provas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px; background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);padding:18px} .provas b{display:block;font-size:12.5px} .provas span{font-size:11px;color:var(--ink-fraco);line-height:1.35} /* `.sec` é seção, não cartão: o recuo lateral continua sendo o do `.wrap`. Zerar o padding aqui puxava o título e a grade 20px para a esquerda de todo o resto da página. */ .sec{padding:34px 20px} .sec-topo{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap} .sec-topo h2{font-size:25px;font-weight:700;margin-top:5px} .conta{font-size:12.5px;color:var(--ink-fraco)} .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px} /* ── A LISTA: foto à esquerda, dizeres à direita ──────────────────────────── É o desenho do Mercado Livre na busca e na categoria, e a razão é de COMPARAÇÃO: na grade, o nome cabe em duas linhas e o olho salta de foto em foto; na lista, cada peça tem uma faixa larga para nome, preço e prova, e comparar duas viradas é ler duas linhas em vez de cruzar a tela. O HTML é o MESMO da grade. Um segundo `lojaCard()` para a lista seria a segunda cópia de tudo o que o card decide (selo, preço em faixas, nota, coração), e a que divergisse mostraria informação diferente para a mesma peça conforme a visualização escolhida. */ .grade.lista,html[data-ver="lista"] .grade.auto{display:flex;flex-direction:column;gap:0; background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden} .grade.lista .card-envolve,html[data-ver="lista"] .grade.auto .card-envolve{border-bottom:1px solid var(--linha-fraca)} .grade.lista .card-envolve:last-child,html[data-ver="lista"] .grade.auto .card-envolve:last-child{border-bottom:0} .grade.lista .card,html[data-ver="lista"] .grade.auto .card{flex-direction:row;border:0;border-radius:0;background:transparent;gap:18px; padding:16px} /* Na lista o cartão não levanta: `translateY` numa linha de uma pilha faz a linha de baixo parecer que afundou. O aviso de que dá para clicar é o fundo. */ .grade.lista .card:hover,html[data-ver="lista"] .grade.auto .card:hover{transform:none;box-shadow:none;background:var(--alto)} .grade.lista .card-fig,html[data-ver="lista"] .grade.auto .card-fig{width:172px;flex:0 0 172px;aspect-ratio:1;border:1px solid var(--edge); border-radius:var(--r);overflow:hidden} .grade.lista .card-fig img,html[data-ver="lista"] .grade.auto .card-fig img{object-fit:contain} .grade.lista .card-corpo,html[data-ver="lista"] .grade.auto .card-corpo{padding:2px 0 0;gap:6px} .grade.lista .card-corpo h3,html[data-ver="lista"] .grade.auto .card-corpo h3{font-size:16px;line-height:1.3} .grade.lista .card-preco,html[data-ver="lista"] .grade.auto .card-preco{margin-top:8px} .grade.lista .card-preco b,html[data-ver="lista"] .grade.auto .card-preco b{font-size:22px} /* O coração acompanha a FOTO, não o canto do cartão: numa faixa de 1100px ele ficaria a meia tela de distância da peça que guarda. Na grade ele é absoluto em relação ao invólucro, que ali tem o tamanho da foto; na lista o invólucro é a faixa inteira, então ele é posto à mão sobre a imagem. */ .grade.lista .card-fav,html[data-ver="lista"] .grade.auto .card-fav{top:24px;left:24px;right:auto} @media (max-width:600px){ .grade.lista .card-fav{top:18px;left:18px;width:30px;height:30px} } @media (max-width:600px){ .grade.lista .card,html[data-ver="lista"] .grade.auto .card{padding:12px;gap:12px} .grade.lista .card-fig,html[data-ver="lista"] .grade.auto .card-fig{width:104px;flex:0 0 104px} .grade.lista .card-corpo h3,html[data-ver="lista"] .grade.auto .card-corpo h3{font-size:14px} .grade.lista .card-preco b,html[data-ver="lista"] .grade.auto .card-preco b{font-size:19px} /* "MAIS VENDIDO" tem 12 letras e a foto da lista tem 104px: o selo do tamanho da grade transbordava para fora da imagem. Aqui ele encolhe e encosta na borda, que é onde ele cabe. */ .grade.lista .card-selo,html[data-ver="lista"] .grade.auto .card-selo{left:4px;bottom:4px;font-size:8.5px;padding:3px 6px; letter-spacing:0;max-width:calc(100% - 8px);overflow:hidden; text-overflow:ellipsis;white-space:nowrap} } /* O alternador fica na direita, na linha acima da grade: à esquerda ele disputaria com a contagem de peças, que é o que a pessoa lê primeiro. */ .grade-topo{display:flex;align-items:center;justify-content:flex-end;margin-bottom:12px} /* ── o alternador grade/lista ───────────────────────────────────────────── */ .ver-como{display:flex;gap:4px;padding:3px;border:1px solid var(--edge);border-radius:var(--r); background:var(--surface)} .ver-como button{display:grid;place-items:center;width:34px;height:32px;border-radius:5px; color:var(--ink-fraco)} .ver-como button[aria-pressed="true"]{background:var(--acao-fraca);color:var(--acao)} .ver-como button:hover{color:var(--acao)} .card{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden; display:flex;flex-direction:column;transition:.18s} .card:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(15,35,70,.1);border-color:rgba(29,122,217,.35)} .card-fig{aspect-ratio:1;background:var(--surface-2);display:grid;place-items:center;border-bottom:1px solid var(--edge)} .card-fig img{width:100%;height:100%;object-fit:cover} .card-corpo{padding:14px 15px 16px;display:flex;flex-direction:column;gap:8px;flex:1} .card-cat{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-fraco)} .card h3{font-family:Inter,sans-serif;letter-spacing:0;font-size:13.5px;font-weight:600;line-height:1.35} .cores{display:flex;gap:5px;align-items:center} .cores i{width:14px;height:14px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)} .cores em{font-size:10.5px;color:var(--ink-fraco);font-style:normal} /* Tudo colado na esquerda e empilhado, como no Mercado Livre. O "a partir de" saiu: ele empurrava o preço para o meio da linha e não decidia nada. Quem explica a variação é a linha do lote, logo abaixo. */ .card-preco{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:3px} .card-preco-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .card-preco b{font-size:19px;white-space:nowrap;line-height:1.1} .card-off{font-style:normal;font-size:11.5px;font-weight:800;color:var(--ok);white-space:nowrap} /* Prova social: nota e vendidos, os dois vindos de dado real. */ .card-prova{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-fraco);margin-bottom:8px} .card-nota{display:inline-flex;align-items:center;gap:3px;color:var(--acao);font-weight:600} .card-nota svg{width:12px;height:12px;fill:currentColor} .card-prova i{font-style:normal;opacity:.4} .vazio{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r);padding:44px;text-align:center;color:var(--ink-soft)} .vazio a{color:var(--primary);font-weight:600} /* produto */ .produto{padding:22px 20px 40px} .migalha{font-size:12px;color:var(--ink-fraco);margin:0 0 18px} .migalha a{color:var(--ink-soft)} .produto-grade{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start} .palco{position:sticky;top:88px;display:flex;flex-direction:column;gap:12px} .palco-fig{background:var(--surface-2);border-radius:var(--r);aspect-ratio:1;display:grid;place-items:center;overflow:hidden} .palco-fig img{width:100%;height:100%;object-fit:cover} .mini{border:1.5px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--surface-2); aspect-ratio:1;position:relative;padding:0} .mini.on{border-color:var(--primary)} .mini img{width:100%;height:100%;object-fit:cover} .mini-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;background:rgba(0,0,0,.35)} .decisao h1{font-size:clamp(22px,2.4vw,30px);font-weight:700;line-height:1.15;margin-bottom:10px} .vendedor{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:12px} .sku-atual{margin-left:auto;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-fraco)} /* ⚠️ ONZE PIXELS AO LADO DE UM NÚMERO DE 40 LEEM COMO COLADO. O vão parecia razoável sozinho e não é: num bloco onde um elemento tem o TRIPLO do tamanho do outro, o espaço que separa de verdade é proporcional ao maior deles, e 11px é o que se usaria entre dois textos de 13. Fica em px, e não em `em`, porque o `em` aqui enganaria: no `gap` ele sai do font-size do BLOCO (o do corpo, 16px) e numa margem do `.preco-obs` sai do font-size DELE (13px). Nenhum dos dois é o número de 40px que manda na leitura. Mexeu no tamanho do preço, confira este valor junto. */ /* ⚠️ O PRECO ENCOSTAVA NO BLOCO DE BAIXO: ZERO pixels, medido. O respiro para baixo vinha do `margin-top` da linha de parcelas, e essa linha SOME quando a peca nao parcela (ou quando o painel esta fechado). Sem ela, o selo verde de atacado colava no numero. O espaco entre dois elementos e do PRIMEIRO, nunca do segundo, justamente para nao depender de quem vem depois existir. Margem e nao padding porque o pai e `display:block`: ela COLAPSA com o `margin-top:5px` da linha de parcelas quando ela aparece, entao o vao e 14 nos dois casos em vez de virar 19 num deles. */ .preco-bloco{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px} .preco{font-size:40px;font-weight:700;line-height:1} .preco-obs{font-size:13px;color:var(--ink-fraco);padding-bottom:7px} /* O espaço até a linha do total fica AQUI, no elemento de cima. Ele estava do outro lado, como `margin-top: -16px` na linha do total, compensando estes 24px, e margem negativa só funciona enquanto nada entra no meio. Bastou o painel de parcelas nascer entre os dois para o total ser puxado 16px para cima e ficar POR DENTRO do painel. Quarta vez que uma compensação de margem morde neste projeto. A regra que ficou: espaço entre dois elementos é do primeiro, e nunca margem negativa do segundo. */ .parcela{font-size:12.5px;color:var(--ink-fraco);margin:5px 0 8px} .parcela b{color:var(--ink);font-family:"JetBrains Mono",monospace} .bloco{margin-bottom:22px} .rotulo{display:block;font-size:12.5px;font-weight:700;margin-bottom:10px} .rotulo em{font-style:normal;font-weight:500;color:var(--ink-fraco);margin-left:5px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chips button{border:1.5px solid var(--edge);background:var(--surface);border-radius:var(--r); padding:11px 15px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px;min-height:44px;transition:.14s} .chips button:hover{border-color:rgba(29,122,217,.5)} .chips button.on{background:rgb(var(--primary-rgb) / .09);border-color:var(--primary); color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)} .chips-qtd button.on small{color:var(--primary);opacity:.75} .chips i{width:17px;height:17px;border-radius:99px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)} .chips-qtd button{flex-direction:column;gap:2px;align-items:center;min-width:88px;padding:10px} .chips-qtd b{font-family:"JetBrains Mono",monospace;font-size:14px} .chips-qtd small{font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--ink-fraco)} .chips-qtd button.on small{color:rgba(255,255,255,.75)} .prazo{background:var(--aviso-fundo);border:1px solid var(--aviso-borda);border-radius:var(--r);padding:13px 15px; font-size:12.5px;color:var(--aviso-txt);margin:0 0 18px} .btn-comprar{width:100%;background:var(--acao);color:#fff;border-radius:var(--r);padding:16px; font-size:15px;font-weight:600;min-height:52px; display:flex;align-items:center;justify-content:center;gap:9px} .btn-comprar:hover{background:var(--acao-forte)} .btn-comprar span{font-family:"JetBrains Mono",monospace} .frete-nota{font-size:12px;color:var(--ink-fraco);margin:12px 0 0;text-align:center} .ficha{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--edge); display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px} .ficha div{display:flex;flex-direction:column;gap:2px;font-size:12.5px; border-bottom:1px solid var(--linha-fraca);padding-bottom:8px;text-align:left} .ficha dt{color:var(--ink-fraco);margin:0} .ficha dd{margin:0;font-weight:600;color:var(--ink)} /* rodapé */ /* Sem padding embaixo: a faixa da identificação é filha do `