/* ========================================================================= PINTE TINTAS — Loja (grade de produtos WooCommerce) ------------------------------------------------------------------------- Estiliza os cards NATIVOS do Woo (módulo "Produtos Woo" do Divi) no mesmo idioma visual da vitrine de Ofertas. Estrutura real do card (confirmada via Inspecionar): li.product.product-type-variable.et_pb_shop_item_0_N > a (link do produto) > span (wrapper da imagem — Divi: .et_shop_image) > img > span.et_overlay (o "+" de hover do Divi) > h2.woocommerce-loop-product__title > span.price (> span.onsale — selo OFERTA, quando houver) Colunas: 4 (desktop) / 3 (tablet) / 2 (celular) / 1 (celular pequeno). Blindagem: o Divi reaplica um layout próprio aos li.product e atropela o grid; ancoramos no #et-boc (container externo do Divi, presente em toda página) para subir a especificidade de forma legítima — mesma técnica já usada no pinte-hf.css. IMPORTANTE: as media queries usam os MESMOS seletores da regra-base de cada camada, para que o corte de coluna vença por ordem de origem (sem cair na armadilha de especificidade). ========================================================================= */ :root { --ptl-blue: #4080C0; /* azul da marca Pinte */ --ptl-blue-dark: #356AA0; /* hover do botão */ --ptl-ink: #20242B; /* texto do título */ --ptl-border: #8A94A3; /* borda cinza mais escura (pedido do cliente) */ --ptl-media-bg: #F8FAFC; /* fundo claro atrás da imagem */ --ptl-radius: 12px; /* cantos do card */ --ptl-radius-img: 8px; /* cantos da imagem (igual às Ofertas) */ } /* ------------------------------------------------------------------------- GRADE — camada base (fallback) + reforço #et-boc. Ambas em grid, 100%. ------------------------------------------------------------------------- */ /* v1.9.4 — o GRID (layout) vale só FORA da tela de produto (body:not(.single-product)). Na tela de produto, quem manda nas colunas dos "Produtos relacionados" é o DIVI (módulo de relacionados, responsivo por dispositivo) — o nosso CSS sai da frente e cuida só do visual do card. */ body:not(.single-product) .woocommerce ul.products, body:not(.single-product) ul.products, body:not(.single-product) #et-boc ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 22px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body:not(.single-product) .woocommerce ul.products::before, body:not(.single-product) .woocommerce ul.products::after, body:not(.single-product) ul.products::before, body:not(.single-product) ul.products::after, body:not(.single-product) #et-boc ul.products::before, body:not(.single-product) #et-boc ul.products::after { content: none !important; display: none !important; } /* Zera largura/margem/float que o Woo/Divi dá a cada item (vira item de grid). */ /* SKIN do card — vale em TODO lugar (loja E relacionados da tela de produto): borda, fundo, cantos, e a coluna flex interna (imagem/título/preço/botão). */ .woocommerce ul.products li.product, ul.products li.product, #et-boc ul.products li.product { position: relative !important; padding: 14px !important; background: #FFFFFF !important; border: 1px solid var(--ptl-border) !important; border-radius: var(--ptl-radius) !important; display: flex !important; flex-direction: column !important; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important; } /* LAYOUT do card (largura/margem/float) — só FORA da tela de produto. No single, o Divi define a largura das colunas dos relacionados; não forçamos. */ body:not(.single-product) .woocommerce ul.products li.product, body:not(.single-product) ul.products li.product, body:not(.single-product) #et-boc ul.products li.product { width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; float: none !important; clear: none !important; } .woocommerce ul.products li.product:hover, ul.products li.product:hover, #et-boc ul.products li.product:hover { border-color: var(--ptl-blue) !important; box-shadow: 0 6px 18px rgba(20, 36, 70, .10) !important; transform: translateY(-2px) !important; } /* ------------------------------------------------------------------------- RESPONSIVO — corte de colunas aplicado NAS MESMAS camadas da regra-base. 4 (desktop) / 3 (≤1024, tablet) / 2 (≤700, celular) / 1 (≤420, pequeno). ------------------------------------------------------------------------- */ @media (max-width: 1024px) { body:not(.single-product) .woocommerce ul.products, body:not(.single-product) ul.products, body:not(.single-product) #et-boc ul.products { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } } @media (max-width: 700px) { body:not(.single-product) .woocommerce ul.products, body:not(.single-product) ul.products, body:not(.single-product) #et-boc ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } } @media (max-width: 420px) { body:not(.single-product) .woocommerce ul.products, body:not(.single-product) ul.products, body:not(.single-product) #et-boc ul.products { grid-template-columns: 1fr !important; gap: 12px !important; } } /* ------------------------------------------------------------------------- LINK DO PRODUTO — coluna flex de largura total; ocupa a altura do card. ------------------------------------------------------------------------- */ .woocommerce ul.products li.product > a, ul.products li.product > a { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; text-decoration: none !important; color: inherit !important; } /* ------------------------------------------------------------------------- WRAPPER DA IMAGEM — largura total (era o que quebrava no mobile). ------------------------------------------------------------------------- */ .woocommerce ul.products li.product .et_shop_image, .woocommerce ul.products li.product > a > span:first-child:not(.onsale), ul.products li.product > a > span:first-child:not(.onsale) { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 0 12px 0 !important; float: none !important; } /* ------------------------------------------------------------------------- IMAGEM — quadrada, preenche o box, cantos 8px (igual às Ofertas). ------------------------------------------------------------------------- */ .woocommerce ul.products li.product img, ul.products li.product img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: contain !important; background: var(--ptl-media-bg) !important; border-radius: var(--ptl-radius-img) !important; margin: 0 !important; padding: 0 !important; display: block !important; box-sizing: border-box !important; } /* ------------------------------------------------------------------------- TÍTULO — até 2 linhas; nunca parte palavra no meio (ex.: "IMPERBLOCK"). ------------------------------------------------------------------------- */ .woocommerce ul.products li.product .woocommerce-loop-product__title, ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3 { font-family: 'Inter', system-ui, sans-serif !important; font-size: .95rem !important; line-height: 1.3 !important; font-weight: 700 !important; color: var(--ptl-ink) !important; min-height: 2.6em !important; margin: 0 0 8px 0 !important; padding: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: none !important; } /* ------------------------------------------------------------------------- PREÇO — "A partir de R$ X" em azul da marca, forte, empurrado pra base. O valor (R$ 263,00) nunca quebra no meio do número. ------------------------------------------------------------------------- */ .woocommerce ul.products li.product .price, ul.products li.product .price { color: var(--ptl-blue) !important; font-weight: 800 !important; font-size: 1.05rem !important; margin: 0 0 8px 0 !important; margin-top: auto !important; word-break: normal !important; overflow-wrap: normal !important; word-wrap: normal !important; hyphens: none !important; } .woocommerce ul.products li.product .price del { opacity: .6 !important; font-weight: 600 !important; } .woocommerce ul.products li.product .price ins { text-decoration: none !important; } .woocommerce ul.products li.product .price .woocommerce-Price-amount, .woocommerce ul.products li.product .price bdi, ul.products li.product .price .woocommerce-Price-amount, ul.products li.product .price bdi { white-space: nowrap !important; } /* ------------------------------------------------------------------------- BOTÃO "Ver opções" — via CSS DENTRO do link do card (o card já é um link para a página do produto → clicar leva a escolher a variação). white-space:nowrap evita quebrar "Ver opções" / "opçõe s". ------------------------------------------------------------------------- */ .woocommerce ul.products li.product > a::after, ul.products li.product > a::after { content: "Ver opções"; display: block !important; width: 100% !important; margin-top: 10px !important; /* respiro entre o preço e o botão */ text-align: center !important; white-space: nowrap !important; background: var(--ptl-blue) !important; color: #FFFFFF !important; border-radius: 8px !important; padding: 10px 12px !important; font-weight: 700 !important; font-size: .9rem !important; line-height: 1.2 !important; box-sizing: border-box !important; transition: background-color .15s ease !important; } .woocommerce ul.products li.product:hover > a::after, ul.products li.product:hover > a::after { background: var(--ptl-blue-dark) !important; } /* ------------------------------------------------------------------------- SELO "OFERTA" — verde da marca, topo-esquerda (mesma linguagem da vitrine). ------------------------------------------------------------------------- */ .woocommerce ul.products li.product .onsale, ul.products li.product .onsale, .woocommerce ul.products li.product > a > span.onsale:first-child { position: absolute !important; top: 10px !important; left: 10px !important; right: auto !important; bottom: auto !important; margin: 0 !important; /* pastilha pequena: encolhe ao conteúdo, nunca estica de ponta a ponta */ display: inline-block !important; width: auto !important; max-width: calc(100% - 20px) !important; background: #1B9E4B !important; color: #FFFFFF !important; border-radius: 6px !important; padding: 3px 10px !important; font-weight: 800 !important; font-size: .72rem !important; line-height: 1.4 !important; white-space: nowrap !important; min-width: 0 !important; min-height: 0 !important; z-index: 3 !important; }