@charset "UTF-8"; /** * Aparência da loja — WooCommerce. * * Carregado só em páginas do WooCommerce (ver `inc/enqueue.php`), e só porque o * tema DESLIGA a folha do plugin. Todo o vocabulário visual vem do `style.css`; * aqui está apenas a tradução dele para o markup do WooCommerce. * * ## A regra que organiza este arquivo * * O contrato manda: "o ouro aparece no fio, não no preenchimento" e nunca dois * elementos primários na mesma dobra. Numa loja isso se decide assim: * * · `.vnx-product > .button` — o "adicionar" da GRADE é contorno. Doze * cards com doze botões dourados fariam do acento um fundo. * · `single_add_to_cart_button` — o "comprar" do PRODUTO é o ouro sólido. * · `.checkout-button` e `#place_order` — o avanço do CARRINHO e do CHECKOUT * também, porque cada um é o CTA único da sua tela. * * Um sólido por tela. Onde houver dúvida, contorno. * * @package Venexia_Store * * ## Por que `.vnx-main` e não `.vnx-shop-main` * * A primeira versão escopava tudo em `.vnx-shop-main`, que o tema emite dentro * de `woocommerce_before_main_content`. Só que esse hook é disparado por * `archive-product.php` e `single-product.php` — **carrinho, checkout e conta não * o disparam**. Resultado: as seções de carrinho e checkout inteiras não se * aplicavam a nada, e a loja aparecia com o layout cru do plugin justamente onde * o dinheiro troca de mãos. * * `.vnx-main` é o `
` do `header.php`, que envolve TODA * página. Escopo mais largo e correto: vale para qualquer superfície do * WooCommerce, e não vaza para o admin. * * ## E `body.single-product`, não `.vnx-main .single-product` * * A primeira versão prefixava os seletores da página de produto com * `.vnx-main .single-product`. Só que `single-product` é uma classe do `` * (o WooCommerce a põe lá em `body_class`), NÃO de um invólucro dentro do * conteúdo. O seletor exigia um ancestral que não existe em lugar nenhum, e * TODA a aparência da página de produto era letra morta — a página saía com o * markup cru do plugin. `body.single-product .vnx-main X` é o caminho real. */ /* ============================================================================ 1 · GRADE E CARTÃO DE PRODUTO ========================================================================= */ /* SEM escopo por `.vnx-shop-main`, e isso é correção de um defeito real: o shortcode `[products]` usado na primeira dobra imprime a lista FORA do wrapper da loja, e com o seletor escopado a grade caía para uma coluna só — imagens de largura inteira, uma por tela. A lista de produtos é a mesma coisa em qualquer contexto, então a regra também é. `ul.products` e NÃO `.products`, e a diferença não é estilo: `section` dos relacionados e dos up-sells TAMBÉM carrega a classe `products` (`
`). Com o seletor sem a tag, o wrapper da seção virava uma grade de três colunas e seus dois filhos — o `

` e o `