/* Card de produto — Bloco V1 (24/08/2026), consolidado no Bloco L1 (25/08/2026). Ate o Bloco L1 o visual do card (fundo, raio, padding, foto, titulo, preco, badge, botao de compra) vivia editado diretamente no custom_css 170 — a unica peca do design que o Git nao versionava. D1 do Bloco L1 moveu essas regras para ca INTEGRALMENTE, sem alterar nenhum valor no movimento (o refino visual em si, estoque/SKU e altura do titulo, e trabalho separado D2/D3, feito depois no mesmo arquivo/mesma janela). Este topo do arquivo cobre o que ja era genuinamente novo desde o Bloco V1: o botão de favoritar sobreposto no card. */ .kb-card-fav{ position:absolute; top:14px; right:14px; z-index:5; margin:0; } .kb-card-fav .kb-card-fav__btn{ display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-radius:50%; background:var(--branco); border:1px solid var(--cinza-borda); color:var(--cinza-texto); } .kb-card-fav .kb-card-fav__btn:hover, .kb-card-fav .kb-fav-btn--active{ border-color:var(--verde); color:var(--verde); } .kb-card-fav .kb-fav-btn__icon{ width:18px; height:18px; } .kb-card-fav .kb-fav-btn--active .kb-fav-btn__icon{ fill:currentColor; } /* ========================================================================== Bloco L1 (25/08/2026) — D1: movido INTEGRALMENTE do custom_css 170 para este arquivo, sem alteracao de valor no movimento (o refino visual e trabalho separado, D2/D3/D4, feito depois deste bloco no mesmo arquivo). custom_css imprime DEPOIS deste CSS enfileirado no wp_head — nenhuma regra remanescente do custom_css voltou a competir com as regras abaixo (nao havia empate de especificidade a resolver na mudanca). ========================================================================== */ /* ===== Cards de produto (grade classica e blocos WooCommerce) ===== */ .woocommerce ul.products li.product, .wc-block-product-template .wc-block-product, .wc-block-grid__products .wc-block-grid__product{ position:relative; display:flex; flex-direction:column; background-color:var(--cinza-card); border:0; border-radius:var(--raio-card); padding:44px 20px 20px !important; box-shadow:none; /* Bloco L1B, G2 (25/08/2026): sem box-sizing explicito o card herdava content-box, entao "height:100%" (abaixo, grade blockified) definia so a altura do CONTEUDO igual a 100% da linha da grade, e o padding deste seletor (64px no total) somava por cima — o card ficava 64px mais alto que a linha reservada para ele e estourava por baixo, sobre a paginacao da /shop/ e sobre o rodape na pagina de produto. border-box faz "height:100%" cobrir a caixa inteira, padding incluso. */ box-sizing:border-box; } .woocommerce ul.products li.product img{ width:100%; height:165px; max-width:100%; max-height:165px; object-fit:contain; background:var(--branco); margin:0; border-radius:0; } .wc-block-components-product-image{ width:100%; height:165px; background:var(--branco); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:0; } .wc-block-components-product-image img{ /* Bloco L1E (25/08/2026), achado do E4: duas causas empilhadas, as duas do proprio WooCommerce Blocks, nenhuma nossa. (1) O bloco Product Collection grava "style='object-fit:cover'" INLINE em todo (confirmado no /shop/ e na /produkt-kategorie/zubehoer/, mesmo markup nos dois) -- inline sempre vence external sem !important. (2) "wp-content/plugins/woocommerce/.../product-image.css" tem ".wc-block-components-product-image img{height:auto;width:100%}" -- MESMO seletor desta regra, MESMA especificidade -- e como carrega depois deste arquivo no , ganhava o empate por ordem. Com "height:auto" vencendo, a imagem usava a altura NATURAL (escalada pela largura da caixa); uma foto retrato (relogio, proporcao ~2:3) saia mais alta que a caixa de 165px e o "overflow:hidden" do container cortava topo/base -- e nao o "object-fit:cover" em si, que so decide como o CONTEUDO se encaixa numa caixa que ja tenha o tamanho certo. Fotos paisagem (bike) nunca estouravam a caixa mesmo com a altura errada, por isso o defeito so aparecia em Zubehor. "height:100% !important" sozinho NAO bastou -- medido em runtime: dentro deste flex (align-items:center) num elemento substituido, o percentual nao resolveu contra a altura definida do pai (motivo nao totalmente identificado; trocar so para "165px" absoluto, mesmo valor literal do container acima, resolveu de imediato). As tres !important sao a excecao justificada (regra de terceiro que nao controlamos, mesma especificidade, resolvendo por ordem que pode mudar a qualquer atualizacao do WooCommerce). */ width:100% !important; height:165px !important; object-fit:contain !important; display:block; margin:0; } /* Bloco L1, D3 (25/08/2026): titulo com altura fixa de 3 linhas — antes so tinha min-height:70px sem clamp, entao um titulo muito longo (caso nomeado: "Cube Kathmandu Hybrid Comfort Pro 800 Easy Entry Easy Entry electricred") empurrava preco/CTA para baixo de forma diferente card a card, quebrando o alinhamento na grade. Agora todo titulo reserva a MESMA altura (3 linhas), curto ou longo. */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .wc-block-components-product-name, .wc-block-product-template .wc-block-product .wp-block-post-title a, .wc-block-grid__product .wp-block-post-title a{ font-family:var(--fonte-base) !important; font-weight:400 !important; font-size:16px !important; line-height:1.45; margin-top:24px; min-height:calc(1.45em * 3); color:var(--preto) !important; letter-spacing:normal; text-decoration:none; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-align:center !important; } .woocommerce ul.products li.product a.woocommerce-loop-product__link:hover .woocommerce-loop-product__title, .wc-block-components-product-name:hover, .wc-block-product-template .wc-block-product .wp-block-post-title a:hover, .wc-block-grid__product .wp-block-post-title a:hover{ text-decoration:underline; } .woocommerce ul.products li.product .price, .wc-block-components-product-price, .wc-block-grid__product-price{ color:var(--verde) !important; font-weight:700 !important; font-size:22px !important; font-family:var(--fonte-base) !important; } .woocommerce ul.products li.product .price del, .wc-block-components-product-price del{ color:var(--cinza-preco) !important; opacity:1 !important; font-weight:400 !important; font-size:16px !important; text-decoration:line-through; } .woocommerce ul.products li.product .price ins, .wc-block-components-product-price ins{ text-decoration:none; } .woocommerce span.onsale, .wc-block-components-product-sale-badge{ background-color:var(--vermelho) !important; color:var(--branco) !important; font-family:var(--fonte-base); font-weight:700; font-size:14px; text-transform:none; letter-spacing:normal; padding:7px 15px; border-radius:var(--raio-pill); box-shadow:none; } /* ===== Badge de oferta — consistencia entre grade classica e blocos ===== */ .onsale, .woocommerce span.onsale, .woocommerce ul.products li.product span.onsale, .wc-block-components-product-sale-badge{ border-radius:var(--raio-pill) !important; min-height:0 !important; min-width:0 !important; line-height:1.4 !important; padding:7px 15px !important; font-size:14px !important; } .onsale, .woocommerce span.onsale, .woocommerce ul.products li.product span.onsale{ top:14px !important; left:14px !important; right:auto !important; width:auto !important; } /* KEBIKE — fix grade de produtos: card como coluna flex, botao fixado no rodape (19/08/2026). */ .wc-block-product-template .wc-block-product { display: flex; flex-direction: column; height: 100%; } .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button { margin-top: auto; } /* KEBIKE — grade de produtos: preco (sufixo "inkl. MwSt.") e CTA nao quebram linha (19/08/2026). */ .wc-block-product-template .wc-block-product .woocommerce-price-suffix { display: block; white-space: nowrap; font-family: var(--fonte-base) !important; font-size: 14px !important; font-weight: 400; color: var(--verde) !important; margin-top: 0.15rem; } .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link { white-space: nowrap; font-size: 15px; padding-left: 10px !important; padding-right: 10px !important; padding-top: 17px !important; padding-bottom: 17px !important; background-color: var(--vermelho) !important; border-color: var(--vermelho) !important; color: var(--branco) !important; width: 100%; border-radius: var(--raio-botao) !important; box-shadow: none !important; transform: none !important; margin-top: 20px; } .wc-block-product-template .wc-block-product .wp-block-woocommerce-product-button .wp-block-button__link:hover { background-color: var(--vermelho-hover) !important; border-color: var(--vermelho-hover) !important; color: var(--branco) !important; transform: none !important; box-shadow: none !important; } /* KEBIKE — fix grade classica (Bestseller / Online Shop -50%, shortcode WooCommerce classico ul.products): grid de 4 colunas, card em coluna, botao fixado no rodape, preco/CTA sem quebra de linha (19/08/2026). */ /* Nota: o wrapper .woocommerce do shortcode classico nao tem align:wide (fica em content-size, 645px), diferente do bloco Product Collection (wide-size, 1340px). Para viabilizar 4 colunas sem overflow, com paridade visual ao resto do site, o max-width foi ampliado para o wide-size do tema via CSS puro (sem alterar shortcode, HTML ou selecao de produtos). */ .entry-content .woocommerce.columns-3, .entry-content .woocommerce.columns-4 { max-width: var(--wp--style--global--wide-size, 1340px); } .woocommerce ul.products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } .woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; } .woocommerce ul.products li.product { float: none !important; width: auto !important; min-width: 0; margin: 0 !important; display: flex; flex-direction: column; height: 100%; } .woocommerce ul.products li.product a.add_to_cart_button, .woocommerce ul.products li.product a.button { margin-top: auto; white-space: nowrap; background-color: var(--vermelho) !important; border-color: var(--vermelho) !important; color: var(--branco) !important; width: 100%; text-align: center; font-size: 15px; font-weight: 700; padding: 17px 10px !important; border-radius: var(--raio-botao) !important; box-shadow: none !important; transform: none !important; } .woocommerce ul.products li.product a.add_to_cart_button:hover, .woocommerce ul.products li.product a.button:hover { background-color: var(--vermelho-hover) !important; border-color: var(--vermelho-hover) !important; color: var(--branco) !important; transform: none !important; box-shadow: none !important; } .woocommerce ul.products li.product .woocommerce-price-suffix { white-space: nowrap; font-family: var(--fonte-base) !important; font-size: 14px !important; font-weight: 400; color: var(--verde) !important; } @media (max-width: 1400px) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .woocommerce ul.products { grid-template-columns: 1fr; } } /* KEBIKE — acabamento visual do card de produto (20/08/2026): card flat (sem raio, sem sombra) nas duas familias; hover so muda cor de borda (sem translateY); titulo sem sublinhado no estado normal, sublinhado no hover; badge de oferta com mesmo tamanho/ padding/raio nas duas familias. Achado nesta unidade: a grade classica herdava ".woocommerce ul.products li.product .onsale{right:0}" do core do WooCommerce; ao somar nosso "left:0.7rem !important" sem tratar o "right", o badge ficava over-constrained e o navegador esticava a largura para preencher todo o cartao (banner full-width, nao um chip). Corrigido com "right:auto !important; width:auto !important" no mesmo seletor — sem tocar no core. NAO RESOLVIDO NESTE PASSO (fora do escopo CSS): o texto-base do badge diverge ("Angebot" no bloco vs "Angebot!" na grade classica) e nenhuma das duas famílias exibe o percentual de desconto — ambos vem de PHP (`woocommerce_sale_badge_text` no bloco, `woocommerce_sale_flash()`/traducao na grade classica), nao de CSS. Corrigir exige um filtro PHP com autorizacao explicita, nao coberto por esta tarefa. */ /* KEBIKE — Bloco V1 (24/08/2026): grade blockified (woocommerce/product-template) forcada para CSS grid de 5 colunas / 28px, sobrepondo o sistema nativo flex + classe "columns-N" do WooCommerce Blocks 11.x (confirmado em runtime: o