/** * Estilos principais do child theme (Astra Child). */ /* -------------------------------------------------------------------------- Cartões de produto — mesma aparência em: - EAEL Woo Product Grid (#eael-product-grid) - Widget Shortcode ([products] / [product_category], etc.) - Widgets Elementor “Products” / grelhas com ul.products.columns-* - Arquivos Woo (loja, categorias, etiquetas) — Astra: .ast-woocommerce-container - Produtos relacionados / upsells (single product) — section.related.products, section.upsells.products !important: necessário para sobrepor CSS inline do Elementor/EAEL. -------------------------------------------------------------------------- */ body .woocommerce ul.products li.product, body.woocommerce .woocommerce ul.products li.product, body .ast-woocommerce-container ul.products li.product, body section.related.products ul.products li.product, body section.upsells.products ul.products li.product, body .elementor-widget-eicon-woocommerce .eael-product-grid .woocommerce ul.products li.product, body #eael-product-grid .woocommerce ul.products li.product, body .elementor-wc-products .woocommerce ul.products li.product, body .elementor-widget-woocommerce-products .woocommerce ul.products li.product, body .elementor-element .woocommerce ul.products li.product, body.elementor-page .elementor-widget-shortcode .woocommerce ul.products li.product, body .elementor-widget-shortcode .woocommerce ul.products li.product, body .elementor-widget-shortcode .woocommerce ul.products li.product.ast-article-single, body .entry-content .woocommerce ul.products li.product.ast-article-single, /* Astra + Woo: maior especificidade que o CSS dinâmico (loja, relacionados, upsells) */ body.woocommerce div.product .related.products ul.products li.product, body.woocommerce-page div.product .related.products ul.products li.product, body.woocommerce div.product .upsells.products ul.products li.product, body.woocommerce-page div.product .upsells.products ul.products li.product, body.woocommerce-page .site-main .ast-woocommerce-container ul.products li.product { box-sizing: border-box; position: relative; z-index: 0; overflow: hidden; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 12px !important; /* drop-shadow ajuda quando um contentor Elementor corta box-shadow */ filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.08)); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06) !important; transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease, filter 0.22s ease; } body .woocommerce ul.products li.product:hover, body.woocommerce .woocommerce ul.products li.product:hover, body .ast-woocommerce-container ul.products li.product:hover, body section.related.products ul.products li.product:hover, body section.upsells.products ul.products li.product:hover, body .elementor-widget-eicon-woocommerce .eael-product-grid .woocommerce ul.products li.product:hover, body #eael-product-grid .woocommerce ul.products li.product:hover, body .elementor-wc-products .woocommerce ul.products li.product:hover, body .elementor-widget-woocommerce-products .woocommerce ul.products li.product:hover, body .elementor-element .woocommerce ul.products li.product:hover, body.elementor-page .elementor-widget-shortcode .woocommerce ul.products li.product:hover, body .elementor-widget-shortcode .woocommerce ul.products li.product:hover, body.woocommerce div.product .related.products ul.products li.product:hover, body.woocommerce-page div.product .related.products ul.products li.product:hover, body.woocommerce div.product .upsells.products ul.products li.product:hover, body.woocommerce-page div.product .upsells.products ul.products li.product:hover, body.woocommerce-page .site-main .ast-woocommerce-container ul.products li.product:hover { border-color: rgba(15, 23, 42, 0.14) !important; filter: drop-shadow(0 8px 20px rgba(15, 23, 42, 0.12)); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.1) !important; transform: translateY(-3px); } /* Espaço para a sombra não ser cortada por grelhas com overflow */ body .elementor-widget-shortcode .woocommerce ul.products, body .entry-content .woocommerce ul.products, body .ast-woocommerce-container ul.products, body section.related.products ul.products, body section.upsells.products ul.products, body.woocommerce div.product .related.products ul.products, body.woocommerce-page div.product .related.products ul.products, body.woocommerce div.product .upsells.products ul.products, body.woocommerce-page div.product .upsells.products ul.products { overflow: visible !important; padding-bottom: 6px; } /* Imagem do produto: mesmo border-radius que o cartão (cantos superiores na grelha) */ body .woocommerce ul.products li.product img, body .woocommerce ul.products li.product picture img, body .woocommerce ul.products li.product .woocommerce-loop-product__link img, body .woocommerce ul.products li.product .woocommerce-LoopProduct-link img, body .woocommerce ul.products li.product .eael-product-wrap img, body .woocommerce ul.products li.product .product-image-wrap img, body .ast-woocommerce-container ul.products li.product img, body .ast-woocommerce-container ul.products li.product picture img, body .ast-woocommerce-container ul.products li.product .woocommerce-loop-product__link img, body .ast-woocommerce-container ul.products li.product .woocommerce-LoopProduct-link img, body .ast-woocommerce-container ul.products li.product .eael-product-wrap img, body .ast-woocommerce-container ul.products li.product .product-image-wrap img, body section.related.products ul.products li.product img, body section.related.products ul.products li.product picture img, body section.related.products ul.products li.product .woocommerce-loop-product__link img, body section.related.products ul.products li.product .woocommerce-LoopProduct-link img, body section.related.products ul.products li.product .eael-product-wrap img, body section.related.products ul.products li.product .product-image-wrap img, body section.upsells.products ul.products li.product img, body section.upsells.products ul.products li.product picture img, body section.upsells.products ul.products li.product .woocommerce-loop-product__link img, body section.upsells.products ul.products li.product .woocommerce-LoopProduct-link img, body section.upsells.products ul.products li.product .eael-product-wrap img, body section.upsells.products ul.products li.product .product-image-wrap img, body.woocommerce div.product .related.products ul.products li.product img, body.woocommerce div.product .related.products ul.products li.product picture img, body.woocommerce div.product .related.products ul.products li.product .woocommerce-loop-product__link img, body.woocommerce div.product .related.products ul.products li.product .woocommerce-LoopProduct-link img, body.woocommerce-page div.product .related.products ul.products li.product img, body.woocommerce-page div.product .related.products ul.products li.product picture img, body.woocommerce-page div.product .related.products ul.products li.product .woocommerce-loop-product__link img, body.woocommerce-page div.product .related.products ul.products li.product .woocommerce-LoopProduct-link img, body.woocommerce div.product .upsells.products ul.products li.product img, body.woocommerce-page div.product .upsells.products ul.products li.product img { border-radius: 12px 12px 0 0 !important; } /* EAEL Product Grid: linha sob a miniatura (na img, não no link) */ body #eael-product-grid .eael-product-wrap a.woocommerce-LoopProduct-link.woocommerce-loop-product__link img { border-bottom: 1px solid #eee; } body .eael-product-title { padding: 10px; } body #eael-product-grid .eael-product-title { padding: 10px 0; padding-bottom: 0; } .eael-product-grid .woocommerce ul.products li.product .eael-product-price { margin-bottom: 20px; } body #eael-product-grid .eael-product-title .woocommerce-loop-product__title { padding-inline: 20px; } body .wc-block-grid__products .wc-block-grid__product img, body .wc-block-grid__products .wc-block-grid__product .wc-block-grid__product-image img { border-radius: 12px 12px 0 0 !important; } /* WooCommerce Blocks (Gutenberg), se usares em alguma página */ body .wc-block-grid__products .wc-block-grid__product { box-sizing: border-box; overflow: hidden; background: #fff; border: 1px solid rgba(15, 23, 42, 0.08) !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06) !important; transition: box-shadow 0.22s ease, border-color 0.22s ease, transform 0.22s ease; } body .wc-block-grid__products .wc-block-grid__product:hover { border-color: rgba(15, 23, 42, 0.14) !important; box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.1) !important; transform: translateY(-3px); } /* -------------------------------------------------------------------------- Sobreposição ao CSS dinâmico do tema pai (sem CSS inline no PHP). !important + seletores com #page / .site-main para ganhar ao tema. Se algo voltar a falhar, verifica plugins que injetem