/* Theme Name: TBA B2B Theme URI: https://b2b.tbadistribuidora.com.br Description: Tema-filho da loja B2B da TBA Distribuidora sobre o Storefront (WooCommerce). Versionado em Git; sem page builder. Cores tiradas da própria logo; logo e textos entram pelo Personalizar, não por código. Author: TBA Distribuidora Template: storefront Version: 0.17.13 Requires PHP: 8.3 Text Domain: tba-b2b-tema */ /* ============================================================================ 0.4.0 — harmonização pedida pelo dono em 20/09/2026 1. A faixa escura é de UMA linha, sempre. Em duas, estourava o topo. 2. Composição centrada: hero, título de seção, linha de apoio, cartão, passos e vantagens no mesmo eixo. 3. O convite passou a ser "Veja o preço", sem "meu": o lojista não sabe que existe tabela por enquadramento, e "meu preço" planta a dúvida de que a dele seja a pior. (Rótulo trocado no plugin, não aqui.) 4. Logo maior — o bloco oficial é empilhado (TBA sobre DISTRIBUIDORA) e a 58px a palavra de baixo volta a ser legível. ========================================================================= */ /* ============================================================================ O QUE MUDOU NA 0.3.0, E POR QUÊ O diagnóstico de 20/09/2026, feito sobre a página renderizada: num monitor de 1280x900 o visitante não via nenhum produto sem rolar. O cabeçalho gastava três faixas (logo, busca, botões) e o hero ocupava o resto da tela. Cada cartão saía com dois botões vermelhos, e a grade era a do Storefront: cartões soltos, sem borda, com títulos centralizados de altura variável. As decisões desta versão, em ordem de impacto: 1. Cabeçalho numa faixa só. Logo, busca e ação na mesma linha. 2. Hero comprimido, sem a onda decorativa solta (ela é do logo, e lá fica). 3. Grade de produto em CSS grid, com cartão de verdade: moldura, foto em caixa quadrada, título de altura fixa, código do produto e UM botão. 4. Densidade maior: menos ar entre seções, medida de texto controlada. A regra de sempre continua: nenhuma regra de preço mora aqui. O plugin corta o preço na fonte; o tema só apresenta o que sobra. ========================================================================= */ :root { /* Paleta da marca — amostrada da logo oficial (tba-logo.png, 18/09/2026). */ --tba-vermelho: #C01E36; --tba-vermelho-escuro: #9B1729; --tba-verde: #11933F; --tba-verde-escuro: #0C7532; --tba-amarelo: #F2E726; --tba-tinta: #17202B; --tba-tinta-suave: #5A6673; /* #8A939D dava 3,12:1 sobre branco — reprovado pelo Lighthouse em 21/09/2026, nas 25 etiquetas de marca dos cartões. O mínimo da WCAG AA para texto pequeno é 4,5:1; este tom dá 4,75:1. Todos os usos desta cor estão sobre fundo claro, então escurecer aqui conserta a loja inteira de uma vez. */ --tba-tinta-fraca: #6B7480; --tba-fundo: #F6F7F8; --tba-borda: #E2E5E9; --tba-borda-forte: #CFD4DA; --tba-raio: 10px; --tba-sombra: 0 1px 2px rgba(23,32,43,.06), 0 4px 12px rgba(23,32,43,.05); --tba-sombra-alta: 0 2px 4px rgba(23,32,43,.08), 0 12px 24px rgba(23,32,43,.10); /* Colunas da grade de catálogo. Trocado nos pontos de quebra. */ --tba-colunas: 4; /* Pilha do sistema: zero byte, zero conexão externa, e a fonte de interface nativa de cada aparelho. O Source Sans Pro do Storefront é desligado no functions.php. */ --tba-fonte: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Escala ~1.22, comercial e não editorial. */ --t-micro: .6875rem; /* sobrelinha, selo */ --t-mini: .75rem; /* código, contagem */ --t-ui: .8125rem; /* botão, rótulo */ --t-card: .875rem; /* título de cartão */ --t-base: 1rem; --t-prosa: 1.0625rem; /* texto corrido */ } /* ------------------------------------------------------------------- base */ body { color: var(--tba-tinta); background: #fff; font-family: var(--tba-fonte); font-size: var(--t-base); -webkit-font-smoothing: antialiased; } a { color: var(--tba-vermelho); } a:hover { color: var(--tba-vermelho-escuro); } /* Títulos apertados. O Storefront aplica entrelinha de texto corrido (1.618) em tudo, inclusive rótulo e botão — é o que faz o site parecer documento. Interface densa quer 1.2–1.35; só prosa quer 1.5–1.6. */ h1, h2, h3, h4 { font-family: var(--tba-fonte); line-height: 1.14; letter-spacing: -.022em; color: var(--tba-tinta); text-wrap: balance; /* evita a linha órfã de uma palavra só, comum em português */ } h1 { font-weight: 700; } h2 { font-weight: 700; } h3 { font-weight: 600; letter-spacing: -.014em; } /* Medida de 45–75 caracteres: texto atravessando a largura toda é o segundo sinal de template. */ .entry-content p, .entry-content li, .tba-faq-resposta p { max-width: 68ch; line-height: 1.6; font-size: var(--t-prosa); } /* Onde não é leitura, entrelinha curta. */ .button, .tba-card-sku, .woocommerce-loop-product__title, .tba-faixa, .woocommerce-result-count, .tba-marcas-vitrine { line-height: 1.3; } /* Todo número em versalete tabular. Sozinho, muda a percepção de rigor: preço, código e quantidade param de dançar entre linhas. */ .price, .tba-card-sku, .quantity input, .order-total, td.product-total, .woocommerce-result-count, .woocommerce ul.products li.product-category .count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Botões: o Storefront entrega um botão cinza arredondado com sombra interna. Substituído por um botão sólido, sem gradiente. */ .button:not(.menu-toggle), button:not(.menu-toggle), input[type="submit"], .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { border-radius: 6px; font-weight: 600; letter-spacing: 0; text-shadow: none; box-shadow: none; padding: .68em 1.15em; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } .button.tba-cta, .woocommerce a.button.tba-cta { background: var(--tba-vermelho); color: #fff; border: 1px solid var(--tba-vermelho); } .button.tba-cta:hover, .woocommerce a.button.tba-cta:hover { background: var(--tba-vermelho-escuro); border-color: var(--tba-vermelho-escuro); color: #fff; } .button.tba-secundario, .button.tba-simples { background: #fff; color: var(--tba-tinta); border: 1px solid var(--tba-borda-forte); } .button.tba-secundario:hover, .button.tba-simples:hover { background: #fff; border-color: var(--tba-vermelho); color: var(--tba-vermelho); } /* -------------------------------------------------------------- cabeçalho */ /* Uma faixa só. O Storefront empilha logo, busca e widgets; empilhado, o cabeçalho comia 200px antes de qualquer conteúdo. */ /* O Storefront reserva ~68px de margem sob o cabeçalho e mais um bloco de respiro na navegação. Medido em 20/09: 328px gastos antes da faixa de confiança, num monitor de 900px de altura. Zerado aqui. */ .site-header { border-bottom: 1px solid var(--tba-borda); padding-top: .85rem; padding-bottom: 0; margin-bottom: 0 !important; } /* O container do topo é grade, e a declaração está na 0.6.0, lá no fim. O seletor usa `>` de propósito: o `.col-full` da navegação também casa com `.site-header .col-full`, e mexer no layout dele bagunça o botão "Menu". */ /* Posição e tamanho vão na grade da 0.6.0. Aqui só o que não é layout. */ .site-header .site-branding { margin: 0; float: none; } /* Altura fixa, não `max-height`: o Storefront dimensiona a logo pela largura do bloco de marca, e a nossa é empilhada (TBA sobre DISTRIBUIDORA, 1000x614). Medido em 20/09: com `max-height` ela saía a 141px e sozinha respondia por metade do cabeçalho. */ .site-header .custom-logo-link img.custom-logo, .site-header img.custom-logo { height: 52px; width: auto; max-width: none; max-height: none; display: block; } /* Base estreita de propósito: a busca cresce para ocupar a sobra, mas se a base for larga ela empurra os botões para uma segunda linha e o cabeçalho ganha 80px. Medido em 20/09: com base de 320px faltavam 2px e quebrava. */ /* Largura, posição e comportamento da busca ficam NA GRADE, na 0.6.0 lá embaixo. Aqui sobrou só o que não é de layout. Esta linha já teve `width: auto; flex: 1 1 210px`, de quando o cabeçalho era flex. Com a grade, as duas propriedades pararam de fazer sentido — e a `width: auto` ainda brigava com a `width: 100%` da regra nova: a busca saía com 248px (a largura natural de um campo de texto) dentro de uma faixa de 1141px, ou seja, perdida no meio do cabeçalho. Duas regras contraditórias para o mesmo elemento é pior que uma regra errada, porque some na leitura. */ .site-header .site-search { clear: none; } .site-header .site-search .widget { margin: 0; } .site-header .site-search form { margin: 0; } /* min-height de 44px: o Lighthouse reprovou o campo de busca por alvo de toque pequeno demais em 21/09/2026. Numa loja de atacado a busca e o caminho principal — o lojista chega sabendo o que quer e digita o codigo de barras. Campo que erra o dedo no celular custa venda. */ .site-header .site-search .search-field { width: 100%; border: 1px solid var(--tba-borda-forte); border-radius: 6px; padding: .6em .9em; min-height: 44px; background: #fff; box-shadow: none; font-size: .95rem; } .site-header .site-search .search-field:focus { border-color: var(--tba-vermelho); outline: 2px solid rgba(192,30,54,.15); outline-offset: 0; } .site-header .tba-header-cta { display: flex; gap: .5rem; align-items: center; flex: 0 0 auto; float: none; width: auto; padding: 0; } .tba-header-cta .button { margin: 0; white-space: nowrap; font-size: .92rem; } /* Navegação colada no cabeçalho, sem a barra escura do Storefront. */ .storefront-primary-navigation { background: transparent; border-top: 1px solid var(--tba-borda); margin-top: .85rem; padding: 0; } .storefront-primary-navigation .col-full { padding-top: 0; padding-bottom: 0; } .main-navigation { margin: 0; } .main-navigation ul.menu, .main-navigation ul.nav-menu { margin: 0; } .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a { padding: .62em 0; margin-right: 1.75rem; font-weight: 600; font-size: .94rem; color: var(--tba-tinta); } .main-navigation ul.menu > li > a:hover { color: var(--tba-vermelho); } .main-navigation ul.menu > li.current-menu-item > a { box-shadow: inset 0 -3px 0 var(--tba-vermelho); } @media (max-width: 767px) { /* Duas linhas, nesta ordem: marca + ação, depois a busca. O bloco de marca do Storefront toma a largura toda por padrão, o que empurrava a ação para uma TERCEIRA linha — e ela caía por cima da navegação, porque o botão "Menu" flutua. Medido em 20/09/2026: o CTA começava em y=131 e a navegação em y=123. */ .site-header > .col-full { gap: .55rem .75rem; align-items: center; } /* `order` e `flex` daqui viraram inertes com a grade; o empilhamento em duas linhas é feito pelas áreas nomeadas, na 0.6.0. */ .storefront-primary-navigation { clear: both; } /* O Storefront esconde a busca no celular (.site-search{display:none}). Aqui ela é essencial: o lojista repõe procurando pelo código de barras da caixa, e mais da metade do acesso é por telefone. */ .site-header .site-search { display: block; } /* Cada pixel do topo é produto que o visitante não vê. */ .site-header { padding-top: .6rem; } .site-header .custom-logo-link img.custom-logo, .site-header img.custom-logo { height: 42px; } .storefront-primary-navigation { margin-top: .6rem; } /* Sem mexer no espaçamento do "Menu": o Storefront reserva a esquerda para o ícone, e o meu estilo genérico de botão comia esse espaço — o glifo saía por cima da palavra. */ .main-navigation .menu-toggle { margin: .35rem 0; } .tba-hero { padding-top: 1.1rem; padding-bottom: 1.1rem; margin-bottom: 1.2rem; } .tba-hero h1 { font-size: 1.45rem; } .tba-hero p { font-size: .95rem; margin-bottom: .8rem; } .tba-hero small { font-size: .78rem; } .tba-secao > h2 { font-size: 1.2rem; } .tba-secao-apoio { font-size: .92rem; margin-bottom: 1rem; } .tba-header-cta .button { font-size: .86rem; padding: .6em .8em; } .tba-header-cta .button.tba-simples { display: none; } /* "Entrar" vive no menu no celular */ } /* Faixa de confiança logo abaixo do cabeçalho. */ /* A faixa é de UMA linha, sempre. Empilhada em duas ela estoura o desenho do topo e rouba altura de quem só quer ver produto. Onde não couber, ela desliza na horizontal em vez de quebrar. */ .tba-faixa { background: var(--tba-tinta); color: #fff; font-size: clamp(.68rem, 1.1vw, .8rem); } .tba-faixa ul { display: flex; flex-wrap: nowrap; /* `safe center` centraliza quando cabe e volta a alinhar pela esquerda quando não cabe. Com `center` puro, a lista que transborda fica cortada NOS DOIS lados e o primeiro item some — foi o que aconteceu em 882px. */ justify-content: safe center; align-items: center; gap: clamp(.9rem, 2.2vw, 2rem); list-style: none; margin: 0 auto; padding: .42rem 1rem; max-width: 1170px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .tba-faixa ul::-webkit-scrollbar { display: none; } .tba-faixa li { white-space: nowrap; flex: 0 0 auto; } .tba-faixa li::before { content: "✓"; color: var(--tba-amarelo); font-weight: 700; margin-right: .3rem; } /* ------------------------------------------------------------------- home */ /* Hero comprimido. A versão anterior era uma tela inteira de texto branco centralizado: o pedido do dono era ver produto de cara, e não se via nenhum. Agora a faixa tem altura de anúncio, não de capa. */ .tba-hero { background: linear-gradient(180deg, #FBF9FA 0%, #F6F7F8 100%); border-bottom: 1px solid var(--tba-borda); margin: 0 calc(50% - 50vw) 1.6rem; padding: 1.6rem calc(50vw - 50%) 1.5rem; text-align: center; } .tba-hero h1 { font-size: clamp(1.5rem, 3vw, 2.05rem); margin: 0 auto .35rem; max-width: 30ch; } .tba-hero h1 em { font-style: normal; color: var(--tba-vermelho); } .tba-hero p { max-width: 58ch; margin: 0 auto .95rem; font-size: 1rem; color: var(--tba-tinta-suave); } .tba-hero .button { margin: 0 .3rem .35rem; } .tba-hero small { display: block; color: var(--tba-tinta-fraca); margin: .6rem auto 0; font-size: .82rem; max-width: 64ch; } /* A onda decorativa saiu: três cores da marca num rabisco horizontal era o elemento mais datado da página, e ocupava 34px em toda largura sem dizer nada. Mantida a classe para não quebrar template antigo. */ .tba-onda { display: none; } /* Composição centrada: título, linha de apoio e conteúdo no mesmo eixo. Era o que faltava para a página parecer desenhada em vez de montada. */ .tba-secao { margin: 0 0 2.6rem; text-align: center; } .tba-secao > h2 { font-size: 1.35rem; margin: 0 0 .3rem; } .tba-secao > h2::after { content: none; } .tba-secao-apoio { color: var(--tba-tinta-suave); margin: 0 auto 1.3rem; max-width: 58ch; font-size: .96rem; } .tba-secao-mais { text-align: center; margin-top: 1.5rem; } /* --------------------------------------------------------------- catálogo */ /* Grade em CSS grid. O Storefront calcula largura por porcentagem e margem com float, o que deixa a última coluna desalinhada e impede cartão de altura igual. Grid resolve os dois. */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; grid-template-columns: repeat(var(--tba-colunas), minmax(0, 1fr)); gap: 1.1rem; margin: 0 0 1rem; padding: 0; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; } .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tba-borda); border-radius: var(--tba-raio); padding: .7rem .7rem .8rem; text-align: center; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .woocommerce ul.products li.product:hover { border-color: var(--tba-borda-forte); box-shadow: var(--tba-sombra-alta); transform: translateY(-2px); } .woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; } /* Foto em caixa quadrada: catálogo de distribuidora recebe foto de fabricante em proporções diferentes, e sem caixa fixa a grade fica serrilhada. */ .woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; height: auto; margin: 0 0 .6rem; border-radius: 6px; background: #fff; } /* Sem foto: um desenho claro e silencioso ocupa a caixa da imagem. Neutro de proposito — numa grade com muitas ausencias, bloco colorido com texto grande rouba a cena dos produtos que TEM foto. */ .tba-sem-foto { aspect-ratio: 1 / 1; width: 100%; margin: 0 0 .6rem; border-radius: 6px; overflow: hidden; background: #F6F4F6; box-shadow: inset 0 0 0 1px rgba(0,0,0,.045); } .tba-sem-foto__arte { display: block; width: 100%; height: 100%; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .93rem; font-weight: 600; line-height: 1.32; text-align: center; color: var(--tba-tinta); padding: 0; margin: 0 0 .3rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.64em; /* duas linhas: mantém os botões alinhados na grade */ } /* O código do produto. Selecionável com um clique: quem repõe copia o código para a lista de compra, e dentro de um link o texto não se deixa marcar. */ .tba-card-sku { display: block; font-size: var(--t-mini); color: var(--tba-tinta-fraca); letter-spacing: .02em; margin: 0 0 .5rem; user-select: all; cursor: text; } /* O PREÇO DO CARTÃO APARECE. Esta regra já foi `display: none` sem condição. Ela nasceu para esconder um `` vazio que o plugin produzia para o visitante — e escondia junto **o preço de verdade do cliente aprovado**, no catálogo inteiro. O Jean entrou com a conta dele em 22/09/2026 e não viu preço em cartão nenhum; o HTML os tinha todos. A causa foi consertada na origem: o plugin devolve string vazia e o WooCommerce não desenha o invólucro. Aqui ficou só a aparência. */ .woocommerce ul.products li.product .price { display: block; margin: 0 0 .55rem; font-size: 1.08rem; font-weight: 700; color: var(--tba-tinta); line-height: 1.2; } .woocommerce ul.products li.product .price del { font-weight: 400; font-size: .9rem; color: var(--tba-tinta-fraca); margin-right: .35rem; } .woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--tba-vermelho); } /* Um botão por cartão, largura total, no fim da coluna. */ .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .tba-b2b-cta-preco { margin: auto 0 0; width: 100%; text-align: center; background: #fff; color: var(--tba-vermelho); border: 1px solid var(--tba-borda-forte); font-size: .88rem; padding: .6em .7em; } .woocommerce ul.products li.product .button:hover, .woocommerce ul.products li.product .tba-b2b-cta-preco:hover { background: var(--tba-vermelho); border-color: var(--tba-vermelho); color: #fff; } .woocommerce ul.products li.product .added_to_cart { display: none; } /* Categorias: bloco compacto, sem foto. As 36 categorias vieram do ERP sem imagem nenhuma, então um cartão com foto mostraria 36 placeholders — pior do que não ter foto. Sem imagem, cabem seis por linha e a lista inteira é varrida de um olhar, que é o que o lojista faz. Se um dia as categorias ganharem imagem, basta apagar a regra do `img`. */ .tba-secao .woocommerce ul.products:has(li.product-category) { --tba-colunas: 6; gap: .6rem; } .woocommerce ul.products li.product-category { padding: 0; } .woocommerce ul.products li.product-category > a { display: flex; flex-direction: column; height: 100%; padding: .75rem .85rem; } .woocommerce ul.products li.product-category img { display: none; } .woocommerce ul.products li.product-category h2.woocommerce-loop-category__title { font-size: .92rem; font-weight: 600; text-align: left; padding: 0; margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; } .woocommerce ul.products li.product-category .count { background: transparent; color: var(--tba-tinta-fraca); font-size: .78rem; padding: 0; font-variant-numeric: tabular-nums; } @media (max-width: 1100px) { .tba-secao .woocommerce ul.products:has(li.product-category) { --tba-colunas: 4; } } @media (max-width: 767px) { .tba-secao .woocommerce ul.products:has(li.product-category) { --tba-colunas: 2; } } /* Pontos de quebra da grade. */ @media (max-width: 1100px) { :root { --tba-colunas: 3; } } @media (max-width: 767px) { :root { --tba-colunas: 2; } .woocommerce ul.products { gap: .7rem; } .woocommerce ul.products li.product { padding: .55rem .55rem .65rem; } .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .87rem; } .tba-card-sku { font-size: .73rem; } .woocommerce ul.products li.product .button { font-size: .82rem; } } /* Página do produto: ali o convite é o único, então volta a ser botão. */ .tba-b2b-preco-oculto { display: block; } .entry-summary .tba-b2b-cta-preco { display: inline-block; background: var(--tba-vermelho); color: #fff; border: 1px solid var(--tba-vermelho); font-weight: 600; } .entry-summary .tba-b2b-cta-preco:hover { background: var(--tba-vermelho-escuro); border-color: var(--tba-vermelho-escuro); color: #fff; } .tba-b2b-preco-recado { font-size: .9rem; color: var(--tba-tinta-suave); margin: .6rem 0 1rem; max-width: 52ch; } .woocommerce span.onsale { background: var(--tba-verde); } /* ------------------------------------------------------- blocos da home */ .tba-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; list-style: none; margin: 0; padding: 0; counter-reset: passo; } .tba-passos li { background: #fff; border: 1px solid var(--tba-borda); border-radius: var(--tba-raio); padding: 1.2rem 1rem; counter-increment: passo; text-align: center; } .tba-passos li::before { content: counter(passo); display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: var(--tba-vermelho); color: #fff; font-weight: 700; font-size: .95rem; margin-bottom: .55rem; } .tba-passos h3 { font-size: .98rem; margin: 0 0 .3rem; } .tba-passos p { margin: 0; color: var(--tba-tinta-suave); font-size: .92rem; line-height: 1.45; } .tba-vantagens { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; list-style: none; margin: 0; padding: 0; } /* Acento no topo, não à esquerda: com o texto centralizado, a barra lateral puxava o olho para fora do eixo da página. */ .tba-vantagens li { padding: 1.1rem 1rem .95rem; border: 1px solid var(--tba-borda); border-top: 3px solid var(--tba-verde); border-radius: 0 0 var(--tba-raio) var(--tba-raio); background: #fff; font-size: .93rem; line-height: 1.45; color: var(--tba-tinta-suave); text-align: center; } .tba-vantagens li strong { display: block; color: var(--tba-tinta); font-size: .97rem; margin-bottom: .2rem; } .tba-cta-final { text-align: center; background: var(--tba-tinta); color: #fff; border-radius: var(--tba-raio); padding: 2rem 1rem; } .tba-cta-final h2 { color: #fff; } .tba-cta-final p { color: rgba(255,255,255,.82); max-width: 52ch; margin: .3rem auto 1.1rem; } .tba-cta-final .button.tba-cta { background: var(--tba-vermelho); border-color: var(--tba-vermelho); color: #fff; } .tba-cta-final .button.tba-cta:hover { background: #fff; border-color: #fff; color: var(--tba-tinta); } /* ------------------------------------------------------------ Minha conta */ .tba-mc-pedido { border-top: 1px solid var(--tba-borda); margin-top: 2rem; padding-top: 1rem; } .tba-mc-linha { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; } .tba-mc-linha li::before { content: "○ "; color: var(--tba-tinta-fraca); } .tba-mc-linha li.ok::before { content: "● "; color: var(--tba-verde); } .tba-mc-rma-form { border: 1px solid var(--tba-borda); border-radius: var(--tba-raio); padding: 1rem; margin-top: 1rem; background: var(--tba-fundo); } /* ---------------------------------------------------------------- rodapé */ .site-footer { border-top: 1px solid var(--tba-borda); background: var(--tba-fundo); } .site-footer .tba-rodape { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; padding: 1.75rem 0 1.25rem; border-bottom: 1px solid var(--tba-borda); margin-bottom: 1rem; } .site-footer .tba-rodape h3 { font-size: .95rem; margin-bottom: .45rem; color: var(--tba-tinta); } .site-footer .tba-rodape ul { list-style: none; margin: 0; padding: 0; } .site-footer .tba-rodape li { margin: 0 0 .28rem; } .site-footer .tba-rodape a, .site-footer .tba-rodape p { color: var(--tba-tinta-suave); font-size: .92rem; line-height: 1.5; } .site-footer .tba-rodape a:hover { color: var(--tba-vermelho); } /* tinta-suave, e nao tinta-fraca: aqui o fundo e o cinza do rodape, nao o branco. A mesma cor que da 4,75:1 sobre branco cai para 4,32:1 sobre #F6F7F8 e reprova. Reparado em 21/09/2026. */ .site-footer .site-info { font-size: .85rem; color: var(--tba-tinta-suave); padding-bottom: 1.25rem; } /* ----------------------------------------------- perguntas frequentes */ /* Sanfona nativa:
funciona sem JavaScript, o que importa porque os robôs de IA não executam script — o texto da resposta precisa estar no HTML servido, e está. */ .tba-faq-indice ul { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; } .tba-faq-indice a { display: inline-block; border: 1px solid var(--tba-borda); border-radius: 999px; padding: .32rem .85rem; font-size: .9rem; text-decoration: none; color: var(--tba-tinta); } .tba-faq-indice a:hover { border-color: var(--tba-vermelho); color: var(--tba-vermelho); } .tba-faq-grupo { margin-bottom: 2.25rem; scroll-margin-top: 1rem; } .tba-faq-grupo > h2 { font-size: 1.15rem; border-bottom: 2px solid var(--tba-vermelho); display: inline-block; padding-bottom: .2rem; } .tba-faq-item { border-bottom: 1px solid var(--tba-borda); padding: .1rem 0; } .tba-faq-item summary { cursor: pointer; padding: .75rem 0; list-style: none; } .tba-faq-item summary::-webkit-details-marker { display: none; } .tba-faq-item summary::before { content: "+"; color: var(--tba-vermelho); font-weight: 700; margin-right: .6rem; } .tba-faq-item[open] summary::before { content: "–"; } .tba-faq-item summary h3 { display: inline; font-size: 1rem; margin: 0; } .tba-faq-resposta { padding: 0 0 1rem 1.4rem; max-width: 70ch; color: var(--tba-tinta-suave); } .tba-faq-resposta p { margin: 0; } /* Bloco sem foto na página do produto: mesma linguagem do catálogo, em tamanho de galeria. Entra com dimensão definida, então não empurra o conteúdo. */ .tba-sem-foto-unico { width: 100%; } .tba-sem-foto-unico .tba-sem-foto { border-radius: var(--tba-raio); margin: 0; } /* ------------------------------------------------- marca no cartão */ /* A marca vende mais que o código, então ela toma o lugar dele quando existe. Sobrelinha em caixa alta: lê como etiqueta, não como texto. */ .tba-card-marca { display: block; font-size: var(--t-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tba-tinta-fraca); margin: 0 0 .45rem; } /* -------------------------------------------- vídeo e ficha técnica */ /* Proporção reservada no CSS: o vídeo entra sem empurrar o que está abaixo, que é o que o Google mede como salto de layout. */ .tba-produto-video, .tba-ficha { margin: 2.5rem 0; } .tba-produto-video > h2, .tba-ficha > h2 { font-size: 1.2rem; margin: 0 0 .9rem; } .tba-video-caixa { position: relative; aspect-ratio: 16 / 9; width: 100%; background: var(--tba-fundo); border-radius: var(--tba-raio); overflow: hidden; border: 1px solid var(--tba-borda); } .tba-video-caixa iframe, .tba-video-caixa video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .tba-ficha-tabela { width: 100%; border-collapse: collapse; margin: 0; } .tba-ficha-tabela th, .tba-ficha-tabela td { padding: .6rem .8rem; border-bottom: 1px solid var(--tba-borda); text-align: left; font-size: .93rem; vertical-align: top; } .tba-ficha-tabela th { width: 34%; font-weight: 600; color: var(--tba-tinta-suave); background: var(--tba-fundo); } .tba-ficha-tabela td { font-variant-numeric: tabular-nums; } .tba-ficha-tabela tr:last-child th, .tba-ficha-tabela tr:last-child td { border-bottom: 0; } @media (max-width: 480px) { .tba-ficha-tabela th { width: 42%; } .tba-ficha-tabela th, .tba-ficha-tabela td { padding: .5rem .6rem; font-size: .88rem; } } /* ------------------------------------------------- gatilhos de cadastro */ /* O "porquê" do preço reservado. É o ponto de contato mais valioso da loja com quem chegou pela busca, então ele tem caixa própria e não se perde no meio do resumo do produto. */ .tba-b2b-preco-recado { background: var(--tba-fundo); border: 1px solid var(--tba-borda); border-left: 3px solid var(--tba-vermelho); border-radius: 0 var(--tba-raio) var(--tba-raio) 0; padding: .9rem 1rem; margin: .9rem 0 1.2rem; max-width: 58ch; font-size: .93rem; line-height: 1.5; color: var(--tba-tinta-suave); } .tba-b2b-preco-recado p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; } .tba-b2b-preco-recado strong { color: var(--tba-tinta); } /* tinta-suave: este selo fica sobre o cinza claro do bloco, nao sobre branco, e ali a tinta-fraca da 4,41:1 — abaixo do minimo de 4,5:1. Mesmo caso do rodape e do bloco de captura; este passou batido na primeira varredura e foi o Lighthouse contra o servidor de verdade que o pegou, em 21/09/2026. */ .tba-b2b-preco-selo { margin-top: .5rem !important; font-size: .87rem; color: var(--tba-tinta-suave); } /* Nota sob o CTA final: o pedido mínimo é o maior trunfo comercial da loja. */ .tba-cta-final-nota { color: rgba(255,255,255,.72); font-size: .88rem; max-width: 56ch; margin: 1rem auto 0; line-height: 1.5; } @media (max-width: 767px) { .tba-b2b-preco-recado { padding: .8rem .85rem; font-size: .89rem; } .tba-cta-final-nota { font-size: .84rem; } } /* ------------------------------------------- identidade do produto */ .tba-produto-identidade { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem; margin: 0 0 .35rem; font-size: var(--t-mini); } .tba-produto-marca { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tba-vermelho); } .tba-produto-marca a { color: inherit; text-decoration: none; } .tba-produto-marca a:hover { text-decoration: underline; } .tba-produto-codigo { color: var(--tba-tinta-fraca); font-variant-numeric: tabular-nums; } .tba-produto-codigo b { font-weight: 600; color: var(--tba-tinta-suave); user-select: all; cursor: text; } .tba-produto-tags { margin: 2rem 0; } .tba-produto-tags > h2 { font-size: 1.05rem; margin: 0 0 .7rem; } .tba-produto-tags ul { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; } .tba-produto-tags a { display: inline-block; padding: .34rem .8rem; border: 1px solid var(--tba-borda); border-radius: 999px; background: #fff; color: var(--tba-tinta); text-decoration: none; font-size: .88rem; } .tba-produto-tags a:hover { border-color: var(--tba-vermelho); color: var(--tba-vermelho); } /* --------------------------------------------------- captura de cadastro */ /* Um campo. O CNPJ não é gravado aqui: ele só viaja para o formulário de cadastro já preenchido. Ver o cabeçalho de Captura.php. */ .tba-captura { margin: 2.5rem 0; padding: 1.5rem 1.25rem; background: var(--tba-fundo); border: 1px solid var(--tba-borda); border-radius: var(--tba-raio); text-align: center; } .tba-captura-titulo { font-size: 1.2rem; margin: 0 0 .4rem; } .tba-captura-texto { color: var(--tba-tinta-suave); max-width: 52ch; margin: 0 auto 1rem; font-size: .95rem; line-height: 1.5; } .tba-captura-forma { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0; } .tba-captura-forma input { flex: 1 1 260px; max-width: 320px; min-width: 0; border: 1px solid var(--tba-borda-forte); border-radius: 6px; padding: .68em .9em; font-size: 1rem; background: #fff; font-variant-numeric: tabular-nums; } .tba-captura-forma input:focus { border-color: var(--tba-vermelho); outline: 2px solid rgba(192,30,54,.15); } .tba-captura-forma .button { flex: 0 0 auto; margin: 0; } /* Mesmo caso do rodape: o bloco de captura tem fundo tingido. */ .tba-captura-ajuda { font-size: .84rem; color: var(--tba-tinta-suave); margin: .7rem 0 0; } @media (max-width: 767px) { .tba-captura { padding: 1.2rem 1rem; margin: 2rem 0; } .tba-captura-titulo { font-size: 1.1rem; } .tba-captura-texto { font-size: .91rem; } /* Campo e botão em largura total: alvo de toque confortável no polegar. */ .tba-captura-forma { flex-direction: column; } .tba-captura-forma input { flex: 1 1 auto; max-width: none; font-size: 1rem; } .tba-captura-forma .button { width: 100%; padding-top: .8em; padding-bottom: .8em; } .tba-produto-identidade { font-size: .72rem; gap: .3rem .8rem; } } /* ------------------------------------------------------------------ blog */ /* O Storefront não dá

à listagem de artigos; o tema-filho põe um cabeçalho de verdade (home.php). */ .tba-blog-cabecalho { text-align: center; margin: 0 0 2rem; } .tba-blog-cabecalho h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .35rem; } .tba-blog-cabecalho .tba-secao-apoio { margin: 0 auto; } .tba-blog-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.1rem; margin: 0 0 2rem; } .tba-blog-item { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--tba-borda); border-radius: var(--tba-raio); padding: 1.1rem 1.15rem 1rem; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .tba-blog-item:hover { border-color: var(--tba-borda-forte); box-shadow: var(--tba-sombra-alta); transform: translateY(-2px); } .tba-blog-categoria { align-self: flex-start; font-size: var(--t-micro); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tba-vermelho); text-decoration: none; margin-bottom: .5rem; } .tba-blog-categoria:hover { text-decoration: underline; } .tba-blog-titulo { font-size: 1.05rem; line-height: 1.25; margin: 0 0 .5rem; } .tba-blog-titulo a { color: var(--tba-tinta); text-decoration: none; } .tba-blog-titulo a:hover { color: var(--tba-vermelho); } .tba-blog-resumo { color: var(--tba-tinta-suave); font-size: .93rem; line-height: 1.5; margin: 0 0 .9rem; max-width: none; } .tba-blog-data { margin: auto 0 0; font-size: var(--t-mini); color: var(--tba-tinta-fraca); font-variant-numeric: tabular-nums; } /* Artigo aberto: medida de leitura controlada. */ .single-post .entry-content { max-width: 68ch; margin-inline: auto; } .single-post .entry-content h2 { margin-top: 2rem; } .single-post .entry-content table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; } .single-post .entry-content th, .single-post .entry-content td { padding: .6rem .8rem; border-bottom: 1px solid var(--tba-borda); text-align: left; font-size: .95rem; } .single-post .entry-content th { background: var(--tba-fundo); font-weight: 600; } .single-post .entry-content blockquote { border-left: 3px solid var(--tba-vermelho); background: var(--tba-fundo); padding: .9rem 1.1rem; margin: 1.4rem 0; border-radius: 0 var(--tba-raio) var(--tba-raio) 0; } .single-post .entry-content blockquote p { margin: 0; font-size: .95rem; } @media (max-width: 767px) { .tba-blog-lista { grid-template-columns: 1fr; gap: .8rem; } .tba-blog-item { padding: .95rem 1rem; } .single-post .entry-content { max-width: none; } } /* ----------------------------------------------- aviso de falta de estoque O laranja-avermelhado do Storefront (#e2401c) dá 3,8:1 sobre branco e reprovou no Lighthouse em 21/09/2026. É um aviso, o tipo de texto que mais precisa ser lido — e quem lê está prestes a desistir da compra, então vale a pena ele estar legível para dizer bem o que houve. */ .woocommerce div.product p.stock.out-of-stock, .woocommerce .product p.stock.out-of-stock { color: var(--tba-vermelho-escuro); font-weight: 600; } /* ------------------------------- busca da barra inferior, no celular O painel de busca do Storefront fica no HTML mesmo fechado, posicionado abaixo da barra — fora da tela, mas ainda "visível" para o navegador. Duas consequências, e a segunda é a que importa: 1. O Lighthouse o conta como alvo de toque encoberto e reprova a página. 2. Quem navega por teclado TABULA para dentro de um campo de busca que não está na tela. O foco some, a pessoa digita no escuro e não entende onde está. Isso é defeito de verdade, não detalhe de avaliador. `visibility: hidden` resolve os dois: tira do fluxo de foco e da contagem de alvos, sem mexer na animação — o Storefront anima `bottom`, não `opacity`. Quando a pessoa toca na lupa, o `.active` devolve tudo. */ .storefront-handheld-footer-bar .search .site-search { visibility: hidden; } .storefront-handheld-footer-bar .search.active .site-search { visibility: visible; } /* ============================================================================ 0.5.0 — 21/09/2026: a revisão que o Jean pediu olhando o site pronto Ele apontou cinco coisas, e cada uma tem um bloco abaixo: 1. o site não usava a tela toda — sobrava branco nas laterais 2. o formulário de cadastro estava torto 3. a lista de categorias da página de erro era gigante 4. o rodapé estava bagunçado e repetia link 5. a foto padrão dos produtos sem imagem (é imagem, não CSS — ver 43-foto-padrao) ========================================================================= */ /* --------------------------------------------------- 1. a largura da página O Storefront trava tudo em 1170px. Num monitor de 1900px isso deixa uns 360px de branco de cada lado — foi o que o Jean fotografou. 1170px é uma escolha de quando "tela grande" era 1366px. Hoje desperdiça um terço de um monitor comum. Mas abrir até a borda também está errado: linha de texto muito longa cansa de ler, e é por isso que a prosa continua limitada em ~68ch mais acima. O que ganha com largura é a GRADE DE PRODUTO, que é o conteúdo desta loja. Então o invólucro cresce e o texto não. E cresce em `min()` com `vw`, de modo que a margem lateral nunca some: num monitor ultralargo o conteúdo para de crescer e continua respirando. */ .col-full { max-width: min(1480px, 94vw); } /* Com mais largura cabem mais cartões. Sem isto, o cartão de produto ficaria enorme e a foto esticada — o problema oposto do que estamos consertando. */ @media (min-width: 1400px) { :root { --tba-colunas: 5; } } @media (min-width: 1750px) { :root { --tba-colunas: 6; } } /* MONITOR GRANDE GANHA MAIS, MAS NÃO GANHA TUDO. Pedido do Jean em 22/09/2026: "se é um monitor mais novo, tem que ser uma proporção melhor". Num monitor de 2560px o teto de 1480 deixaria 540px de branco de cada lado — de volta ao problema que ele apontou. O teto sobe em degrau, e a grade acompanha com mais colunas, porque largura sem coluna a mais só faz o cartão inchar. O `vw` continua no `min()`: é ele que garante margem lateral em qualquer tela, inclusive nas que ainda não existem. */ @media (min-width: 1900px) { .col-full { max-width: min(1720px, 92vw); } .tba-faixa ul { max-width: min(1720px, 92vw); } :root { --tba-colunas: 6; } } @media (min-width: 2200px) { .col-full { max-width: min(1980px, 90vw); } .tba-faixa ul { max-width: min(1980px, 90vw); } :root { --tba-colunas: 7; } } /* A faixa escura tinha largura própria e ficaria estreita ao lado do resto. */ .tba-faixa ul { max-width: min(1480px, 94vw); } /* ------------------------------------------- 2. o formulário de cadastro A causa principal era MARCAÇÃO, não CSS: as nossas linhas de campo não traziam a classe `form-row`, que é a que o WooCommerce estiliza. Corrigido no plugin. O que fica aqui é o acabamento — e vale igualmente para os campos nativos e os nossos, para que ninguém consiga distinguir de quem é cada linha. */ .woocommerce-form-register .form-row, .woocommerce-form-login .form-row { display: block; margin: 0 0 1.05rem; } .woocommerce-form-register .form-row label, .woocommerce-form-login .form-row label { display: block; font-weight: 600; font-size: .92rem; color: var(--tba-tinta); margin: 0 0 .32rem; } .woocommerce-form-register .form-row input.input-text, .woocommerce-form-register .form-row select, .woocommerce-form-login .form-row input.input-text { width: 100%; box-sizing: border-box; padding: .62rem .7rem; font-size: 1rem; line-height: 1.35; border: 1px solid var(--tba-borda); border-radius: 4px; background: #fff; color: var(--tba-tinta); } .woocommerce-form-register .form-row select { /* Alguns navegadores ignoram o padding vertical do `select`; a altura mínima o deixa do mesmo tamanho dos campos de texto, que é o que faz a coluna parecer alinhada. */ min-height: 2.85rem; } .woocommerce-form-register .form-row input:focus, .woocommerce-form-register .form-row select:focus, .woocommerce-form-login .form-row input:focus { outline: 2px solid var(--tba-vermelho); outline-offset: 1px; border-color: var(--tba-vermelho); } /* A frase de ajuda vai ABAIXO do campo, na linha inteira. Antes era um `` em fluxo de texto e se pendurava à direita da caixa, empurrando o rótulo seguinte — o efeito "jogado para frente" da foto. */ .woocommerce-form-register .form-row small { display: block; margin: .35rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--tba-tinta-fraca); } /* A caixa "minha empresa é isenta" é uma escolha, não um rótulo de campo: linha própria, peso normal e alvo de clique confortável. O SELETOR PRECISA DO `label`. Sem ele esta regra tem peso (0,2,0) e perde para `.woocommerce-form-register .form-row label`, que tem (0,2,1) e está logo acima — a caixa voltava a `display: block` e o texto caía embaixo do quadradinho. Medido na página, não deduzido: a primeira versão desta regra não pegou. */ .woocommerce-form-register .form-row label.tba-b2b-isento { display: flex; align-items: flex-start; gap: .5rem; margin: .5rem 0 0; font-weight: 400; font-size: .9rem; color: var(--tba-tinta-suave); cursor: pointer; } .woocommerce-form-register .form-row label.tba-b2b-isento input[type="checkbox"] { width: auto; margin: .15rem 0 0; flex: 0 0 auto; } /* Campo desligado pela caixa de isento precisa PARECER desligado. */ .woocommerce-form-register .form-row input:disabled { background: #F4F5F6; color: var(--tba-tinta-fraca); cursor: not-allowed; } /* As duas colunas (entrar / cadastrar) com respiro e alinhadas pelo topo. Em celular viram uma embaixo da outra, com "Entrar" primeiro — quem já é cliente volta mais vezes do que quem se cadastra. */ .woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; align-items: start; } /* O `#customer_login` no seletor NÃO É ENFEITE. A primeira versão desta regra usava só classes e não pegou — as colunas continuavam com 280px e 360px dentro de faixas de 681px, que era exatamente o desalinhamento da foto do Jean. O motivo apareceu ao inspecionar a página: woocommerce.css @media (min-width: 768px) .col2-set#customer_login .col-1 { width: 41.1765% } O WooCommerce mira pelo **id** do bloco. Um id pesa mais que qualquer número de classes, então a regra dele ganhava da nossa por especificidade, não por ordem — trocar a ordem dos arquivos nunca resolveria. (E 41,1765% da faixa de 681px dá 280,25px: bate na casa dos centavos com o que foi medido.) Repetir o id do lado de cá é o caminho honesto: fica no mesmo patamar e acrescenta uma classe. A alternativa seria `!important`, que ganha a briga de hoje e esconde a próxima. `width: 100%` e não `auto`: as colunas são flutuantes de origem e, mesmo como itens de grade, o navegador continua dando a elas largura de conteúdo. Nem `float: none` nem `justify-self: stretch` mudaram isso — testado na página. */ .woocommerce-account .col2-set#customer_login .col-1, .woocommerce-account .col2-set#customer_login .col-2 { width: 100%; float: none; box-sizing: border-box; } .woocommerce-account .u-columns.col2-set h2 { margin-bottom: 1rem; } /* A coluna cresce; o formulário, não. Com as colunas finalmente esticando, cada campo passou a ter 623px de largura — e campo de CNPJ com 623px é desconfortável de usar: o olho perde a ligação entre o rótulo, à esquerda, e o cursor, que fica longe. A recomendação antiga de formulário continua valendo: a caixa tem o tamanho do que se escreve nela. A COLUNA ocupa o espaço; o formulário fica na medida. */ .woocommerce-account .col2-set#customer_login form { max-width: 32rem; } .woocommerce-form-register .woocommerce-privacy-policy-text p, .woocommerce-form-register .woocommerce-form-register__submit { margin-top: 1rem; } .woocommerce-form-register .woocommerce-privacy-policy-text p { font-size: .88rem; color: var(--tba-tinta-suave); line-height: 1.5; max-width: 56ch; } /* ------------------------------------------------------ 3. página de erro */ .tba-404 { max-width: 62rem; margin: 1.5rem auto 2.5rem; } .tba-404 h1 { font-size: clamp(1.45rem, 3vw, 2rem); margin: 0 0 .6rem; } .tba-404-recado { color: var(--tba-tinta-suave); max-width: 62ch; margin: 0 0 1.2rem; } .tba-404-busca { max-width: 30rem; margin: 0 0 1.8rem; } .tba-404-busca form { display: flex; gap: .5rem; } .tba-404-busca input[type="search"] { flex: 1 1 auto; min-width: 0; } .tba-404-saidas { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin: 0 0 2.2rem; } .tba-404-saida { display: block; padding: .95rem 1.05rem; border: 1px solid var(--tba-borda); border-radius: 6px; background: #fff; text-decoration: none; transition: border-color .15s, transform .15s; } .tba-404-saida:hover { border-color: var(--tba-vermelho); transform: translateY(-1px); } .tba-404-saida strong { display: block; color: var(--tba-vermelho); margin-bottom: .2rem; } .tba-404-saida span { display: block; font-size: .88rem; color: var(--tba-tinta-suave); line-height: 1.45; } .tba-404-titulo { font-size: 1.05rem; margin: 0 0 .7rem; } /* Em linha e embrulhando, não em coluna infinita: doze etiquetas cabem em duas linhas, contra as 70 que rolavam meia tela na versão do Storefront. */ .tba-404-cats { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; } .tba-404-cats a { display: inline-flex; align-items: baseline; gap: .4rem; padding: .38rem .7rem; border: 1px solid var(--tba-borda); border-radius: 999px; font-size: .88rem; color: var(--tba-tinta); text-decoration: none; background: #fff; } .tba-404-cats a:hover { border-color: var(--tba-vermelho); color: var(--tba-vermelho); } .tba-404-cats span { font-size: .78rem; color: var(--tba-tinta-fraca); } /* ---------------------------------------------------------- 4. rodapé */ .site-footer .tba-rodape { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } /* A coluna da marca ganha mais espaço: carrega endereço, três contatos e o horário, e espremida em 210px o endereço quebrava em cinco linhas. */ .site-footer .tba-rodape-marca { min-width: 0; } @media (min-width: 900px) { .site-footer .tba-rodape-marca { grid-column: span 2; } } .site-footer .tba-rodape-endereco { margin: 0 0 .7rem; max-width: 42ch; } .site-footer .tba-rodape-contato { list-style: none; margin: 0; padding: 0; } .site-footer .tba-rodape-contato li { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 .3rem; font-size: .92rem; color: var(--tba-tinta-suave); line-height: 1.5; } /* O rótulo à esquerda é o que resolve a reclamação: sem ele, o número no rodapé era só um telefone, e ninguém sabia que dava para mandar mensagem. */ .site-footer .tba-rodape-rotulo { flex: 0 0 5.6rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tba-tinta-fraca); font-weight: 600; } @media (max-width: 480px) { .site-footer .tba-rodape-contato li { flex-wrap: wrap; } .site-footer .tba-rodape-rotulo { flex-basis: 100%; } } /* ------------------------------------------------- 5. a faixa de marcas Pedido do Jean em 21/09/2026: um carrossel de marcas na home, clicável, que leva à listagem daquela marca. Rolagem horizontal com encaixe (`scroll-snap`), em CSS puro. O comportamento é o de um carrossel — arrasta no celular, encaixa cartão a cartão — sem biblioteca, sem `