/* KEBIKE — Página de produto (DESIGN-SPEC.md secao 11). Bloco V2, 24/08/2026. Escopo: so body.single-product. Motor: template blockified nativo do WooCommerce (wp:columns > wp:column galeria + wp:column resumo, wp:woocommerce/product-details com as abas classicas ul.tabs.wc-tabs). Nenhum HTML novo — so CSS sobre o markup ja renderizado. */ body.single-product .wp-block-columns.alignwide:has(.wp-block-woocommerce-product-image-gallery){ display:grid !important; grid-template-columns:1fr 1fr; gap:64px; align-items:start; } body.single-product .wp-block-columns.alignwide:has(.wp-block-woocommerce-product-image-gallery) > .wp-block-column{ flex-basis:auto !important; width:100% !important; } /* ===== Galeria — imagem principal 3:2, borda 1px #ececec; 3 miniaturas 3:2, grid 3, gap 16 ===== .woocommerce-product-gallery fica opacity:0 ate o FlexSlider (JS do WooCommerce core) trocar para opacity:1 via style inline apos montar o carrossel — achado em runtime (Bloco F1, 24/08/2026): em alguns loads o valor computado nao acompanha esse inline style (a foto principal nunca aparece, mesmo com carregado e a miniatura funcionando). Forcado aqui como rede de seguranca, sem depender do timing do JS. */ body.single-product .woocommerce-product-gallery{ opacity:1 !important; } body.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child{ border:1px solid #ececec; border-radius:var(--raio-card); overflow:hidden; aspect-ratio:3/2; } /* Bloco L1B, P1 (25/08/2026): a vem envolvida por um do proprio FlexSlider (core do WooCommerce), sem altura propria. "height:100%" na img resolve contra esse , que e a containing block imediata — sem altura explicita nele, o fica com altura indefinida e o percentual da img e tratado como "auto" (CSS 2.1 §10.5), MESMO com !important: o !important decide qual VALOR declarado vence a cascata, nao resolve um percentual contra base indefinida. Medido em runtime: com so o !important na img, o computed height continuava 510px (a altura natural), estourando a caixa 3:2 de 342px e sendo cortado pelo overflow:hidden. A correcao e dar altura definida tambem ao . */ body.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child a{ display:block; height:100%; } body.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child img{ width:100%; height:100% !important; object-fit:contain; background:var(--branco); } body.single-product .flex-control-thumbs{ display:grid !important; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:16px; list-style:none; padding:0; } body.single-product .flex-control-thumbs li{ /* GL (24/08/2026), F2: width/float com !important sobrepoe ".woocommerce div.product div.images .flex-control-thumbs li" do proprio woocommerce.css (assets/css/woocommerce.css do core) — especificidade (0,4,3), maior que a nossa (0,2,1); sem !important o "width:25%;float:left" do core vencia e a miniatura ficava presa a 1/4 da coluna do grid de 3 em vez de preencher a celula 1fr inteira (medido em runtime: 42px em vez dos 160px da coluna). */ width:100% !important; float:none !important; aspect-ratio:3/2; border:1px solid #ececec; border-radius:var(--raio-card); overflow:hidden; } body.single-product .flex-control-thumbs li img{ width:100%; height:100% !important; object-fit:contain; background:var(--branco); } /* ===== Coluna direita ===== */ body.single-product .wp-block-post-title{ font-family:var(--fonte-base); font-size:36px !important; font-weight:700; line-height:1.2; color:var(--preto); margin:0 0 16px; } body.single-product .wp-block-woocommerce-product-price, body.single-product .wp-block-woocommerce-product-price .price{ font-family:var(--fonte-base); font-size:34px !important; font-weight:700; color:var(--verde); } /* E1 (Bloco F1) — achado em runtime: o preco nao usa .price nesta pagina (motor blockified do product-details), e sim .wc-block-components-product-price > ins/del > .woocommerce-Price-amount. Um estilo legado (custom_css, "--kb-ink") colore esse span especificamente, direto no descendente, entao a cor herdada do container acima nunca chegava la. Corrigido no proprio span. */ body.single-product .wp-block-woocommerce-product-price ins, body.single-product .wp-block-woocommerce-product-price ins .woocommerce-Price-amount{ font-family:var(--fonte-base) !important; font-size:34px !important; font-weight:700 !important; color:var(--verde) !important; text-decoration:none !important; } body.single-product .wp-block-woocommerce-product-price .price del, body.single-product .wp-block-woocommerce-product-price del, body.single-product .wp-block-woocommerce-product-price del .woocommerce-Price-amount{ font-size:20px !important; font-weight:400 !important; color:var(--cinza-preco) !important; opacity:1; } body.single-product .wp-block-woocommerce-product-price{ padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--cinza-borda); } /* Selo de estoque — usa a classe nativa .stock, sem markup novo. */ body.single-product p.stock{ display:inline-block; font-family:var(--fonte-base); font-size:13px; font-weight:700; letter-spacing:.4px; color:var(--verde); background:var(--verde-claro-2); padding:6px 14px; border-radius:var(--raio-pill); margin:0 0 20px; } body.single-product p.stock.out-of-stock{ color:var(--vermelho); background:#fdeceb; } /* ===== Seletor de quantidade 58px + botao vermelho na mesma linha ===== O bloco AddToCartForm ja imprime quantidade+botao em grid-auto-flow: column (WooCommerce Blocks) — so altura/cor sao ajustadas aqui. */ body.single-product .wc-block-components-quantity-selector{ height:58px !important; border-color:var(--cinza-borda); border-radius:var(--raio-botao); } body.single-product .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input{ font-family:var(--fonte-base); font-size:15px; } body.single-product input.qty, body.single-product .wp-block-woocommerce-add-to-cart-form .wc-block-add-to-cart-form .input-text.qty{ height:58px !important; border:1px solid var(--cinza-borda); border-radius:var(--raio-botao); text-align:center; font-size:15px; } body.single-product .single_add_to_cart_button, body.single-product .wp-block-woocommerce-add-to-cart-form .wp-element-button{ height:58px; background:var(--vermelho) !important; border-color:var(--vermelho) !important; color:var(--branco) !important; font-size:15px; font-weight:700; border-radius:var(--raio-botao) !important; box-shadow:none !important; } body.single-product .single_add_to_cart_button:hover{ background:var(--vermelho-hover) !important; border-color:var(--vermelho-hover) !important; } /* Botao de favoritar (kebike-favoriten, ja existente) — so espacamento em relacao ao formulario de compra, cor/estado sao do proprio plugin. */ body.single-product .kb-fav-btn, body.single-product .kb-fav-form{ margin-top:20px; } /* ===== Abas — borda inferior 1px, ativa border-bottom 3px vermelho ===== Bloco L1B, P2 (25/08/2026), emenda ao DESIGN-SPEC §11: painel inteiro (abas + conteudo) ganha fundo --areia e a mesma largura da coluna de colunas/resumo e de "Ähnliche Produkte" — pedido do responsavel contra a referencia visual fornecida, divergindo do §11 (que definia fundo branco e th cinza-claro). Ver nota de emenda datada no DESIGN-SPEC.md. */ body.single-product .woocommerce-tabs.wc-tabs-wrapper{ margin-top:56px; background:var(--areia); border-radius:var(--raio-card); padding:32px 40px 40px; } body.single-product ul.tabs.wc-tabs{ display:flex; gap:8px; list-style:none; margin:0; padding:0; border-bottom:1px solid var(--cinza-borda); } body.single-product ul.tabs.wc-tabs li{ margin:0; } body.single-product ul.tabs.wc-tabs li a{ display:block; font-family:var(--fonte-base); font-size:16px; font-weight:700; color:var(--cinza-texto); padding:16px 26px; text-decoration:none; border-bottom:3px solid transparent !important; margin-bottom:-1px; } body.single-product ul.tabs.wc-tabs li.active a, body.single-product ul.tabs.wc-tabs li.ui-tabs-active a{ color:var(--preto) !important; border-bottom-color:var(--vermelho) !important; } /* ===== Painel — largura cheia (Bloco L1B, P2) ===== O bloco woocommerce/product-details usa layout "constrained": sem esta regra, .woocommerce-Tabs-panel herda max-width:672px (~content-size do tema) e o texto/tabela ficam presos a metade esquerda da coluna, mesmo com o wrapper acima (.wc-tabs-wrapper) ja ocupando a largura inteira — medido em runtime, 50-722px de 1340px disponiveis. */ body.single-product .woocommerce-Tabs-panel{ max-width:none; padding-top:32px; } /* ===== Tabela de ficha tecnica — th 230px, zebra de linha inteira ===== */ body.single-product .woocommerce-Tabs-panel table{ width:100%; border-collapse:collapse; margin:16px 0; } body.single-product .woocommerce-Tabs-panel table th, body.single-product .woocommerce-Tabs-panel table td{ padding:14px 16px; border-bottom:1px solid #ededed; text-align:left; font-family:var(--fonte-base); font-size:15px; } /* A ficha tecnica do conteudo enriquecido usa nas duas colunas (sem semantico) — :first-child cobre a coluna de rotulo em ambos os casos, sem tocar o HTML/conteudo do produto. */ body.single-product .woocommerce-Tabs-panel table th, body.single-product .woocommerce-Tabs-panel table tr > td:first-child{ width:230px; font-weight:700; color:var(--preto); } /* Zebra de linha inteira (Bloco L1B, P2) — substitui o fundo fixo #fafafa do th, que so cobria a coluna de rotulo; a referencia usa a MESMA cor nas duas colunas, linha sim/linha nao. */ body.single-product .woocommerce-Tabs-panel table tr:nth-child(odd) th, body.single-product .woocommerce-Tabs-panel table tr:nth-child(odd) td{ background:var(--areia-faixa); } /* ===== Lista de vantagens (so quando o produto tem, secao 11) ===== Renderizada pelo plugin so quando o short_description trouxer um