/* ========================================================================= PINTE TINTAS — Seções da Home Escopado sob .pt-scope. Cores via variáveis --pt-* (tema magalu/marca). ========================================================================= */ .pt-scope *, .pt-scope *::before, .pt-scope *::after { box-sizing: border-box; } .pt-scope { font-family: 'Inter', system-ui, sans-serif; color: var(--pt-ink); line-height: 1.5; -webkit-font-smoothing: antialiased; } .pt-scope a { color: inherit; text-decoration: none; } .pt-scope img { max-width: 100%; display: block; } .pt-scope button { font-family: inherit; cursor: pointer; } /* Largura interna (imune ao layout do Divi) */ .pt-scope .pt-wrap { width: 100%; margin: 0 auto; padding: 0 20px; } .pt-w-contido .pt-wrap { max-width: 1280px; } .pt-w-full .pt-wrap { max-width: none; } /* Cabeçalho de seção genérico */ .pt-sec { padding: 14px 0 28px; } .pt-sec-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .pt-sec-bar h2 { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; } .pt-sec-bar h2 span { color: var(--pt-blue); } .pt-sec-bar a { font-size: .86rem; font-weight: 700; color: var(--pt-blue); } /* ========================================================================= 1. HERO — carrossel + promos laterais ========================================================================= */ .pt-hero-band { padding: 20px 0; } .pt-hero-grid { display: grid; grid-template-columns: 1fr 300px; gap: 16px; } .pt-carousel { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(11,42,74,.07); min-height: 340px; } .pt-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s; display: flex; align-items: center; padding: 48px 56px; color: #fff; } .pt-slide.pt-on { opacity: 1; } .pt-slide.pt-s1 { background: linear-gradient(115deg, var(--pt-blue-dark), var(--pt-blue-2) 60%, #2E86E0); } .pt-slide.pt-s2 { background: linear-gradient(115deg, var(--pt-blue-dark), #12A19A 90%); } .pt-slide.pt-s3 { background: linear-gradient(115deg, #8F3F12, var(--pt-amber-deep) 95%); } .pt-slide.pt-s4 { background: linear-gradient(115deg, #0E7A38, var(--pt-green) 90%); } .pt-slide .pt-st { max-width: 520px; position: relative; z-index: 2; } .pt-slide .pt-tagline { display: inline-block; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); padding: 5px 13px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 14px; } .pt-slide h2 { font-size: 2.4rem; font-weight: 900; line-height: 1.08; margin-bottom: 12px; letter-spacing: -.02em; } .pt-slide p { font-size: 1rem; color: rgba(255,255,255,.9); margin-bottom: 22px; } .pt-slide .pt-cta-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--pt-amber); color: var(--pt-blue-ink); font-weight: 800; padding: 13px 26px; border-radius: 9px; font-size: .95rem; } .pt-slide .pt-cta-btn:hover { background: #fff; } .pt-slide .pt-deco { position: absolute; right: -40px; bottom: -60px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.22), transparent 60%); z-index: 1; } .pt-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; } .pt-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); } .pt-dots button.pt-on { background: #fff; width: 24px; border-radius: 6px; } .pt-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); color: var(--pt-blue); font-size: 1.3rem; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(11,42,74,.07); } .pt-arrow.pt-prev { left: 16px; } .pt-arrow.pt-next { right: 16px; } .pt-arrow:hover { background: #fff; } .pt-side-promos { display: grid; grid-template-rows: 1fr 1fr; gap: 16px; } .pt-promo { border-radius: 16px; padding: 22px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 2px 8px rgba(11,42,74,.07); } .pt-promo.pt-p1 { background: linear-gradient(135deg, #1B9E4B, #12833C); } .pt-promo.pt-p2 { background: linear-gradient(135deg, var(--pt-blue), var(--pt-blue-2)); } .pt-promo small { font-size: .76rem; opacity: .9; font-weight: 600; } .pt-promo h3 { font-size: 1.3rem; font-weight: 800; line-height: 1.1; margin: 4px 0 10px; } .pt-promo .pt-promo-link { font-size: .82rem; font-weight: 700; text-decoration: underline; } /* v2.7.4 — banner com IMAGEM de fundo (opcional). Scrim escuro p/ o texto branco ficar legível sobre qualquer foto. Sem imagem, o gradiente .pt-sN / .pt-pN continua valendo. O texto (.pt-st z-index:2) já fica acima do scrim. */ .pt-slide.pt-has-img { background-size: cover; background-position: center; background-repeat: no-repeat; } .pt-slide.pt-has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(8,20,40,.72), rgba(8,20,40,.30)); z-index: 1; } .pt-slide.pt-has-img .pt-deco { display: none; } .pt-promo.pt-has-img { background-size: cover; background-position: center; background-repeat: no-repeat; } .pt-promo.pt-has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(8,20,40,.68), rgba(8,20,40,.32)); z-index: 0; } .pt-promo.pt-has-img small, .pt-promo.pt-has-img h3, .pt-promo.pt-has-img .pt-promo-link { position: relative; z-index: 1; } /* ========================================================================= 2. CATEGORIAS EM CÍRCULO ========================================================================= */ .pt-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; } .pt-cat { background: var(--pt-paper); border: 1px solid var(--pt-line); border-radius: 12px; padding: 18px 10px; text-align: center; transition: .18s; } .pt-cat:hover { box-shadow: 0 8px 26px rgba(11,42,74,.12); transform: translateY(-3px); border-color: transparent; } .pt-circle { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; font-size: 1.7rem; } .pt-cat-name { font-size: .84rem; font-weight: 600; color: var(--pt-ink); display: block; } /* ========================================================================= 3. FAIXA CTA ========================================================================= */ .pt-cta-band { background: linear-gradient(115deg, var(--pt-blue-dark), var(--pt-blue-2)); border-radius: 16px; padding: 34px 40px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: 0 2px 8px rgba(11,42,74,.07); } .pt-cta-band h2 { font-size: 1.7rem; font-weight: 900; letter-spacing: -.01em; color: #FFFFFF; } .pt-cta-band p { color: rgba(255,255,255,.88); margin-top: 6px; max-width: 560px; font-size: .95rem; } .pt-b-cta { display: flex; gap: 12px; flex-wrap: wrap; } .pt-b1 { background: var(--pt-amber); color: #20242B; font-weight: 800; padding: 13px 26px; border-radius: 9px; } .pt-b1:hover { background: #fff; } .pt-b2 { background: #1F9D57; border: 1.5px solid #1F9D57; color: #fff; font-weight: 700; padding: 13px 26px; border-radius: 9px; } /* ========================================================================= 4. PROVA DE VENDEDOR ========================================================================= */ .pt-sellers { background: var(--pt-paper); border-radius: 16px; padding: 22px; box-shadow: 0 2px 8px rgba(11,42,74,.07); text-align: center; } .pt-sellers h3 { font-size: 1rem; font-weight: 800; margin-bottom: 16px; color: var(--pt-ink-2); } .pt-sellers-row { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; align-items: center; } .pt-seller { display: flex; align-items: center; gap: 10px; text-align: left; } .pt-seller-ic { width: 40px; height: 40px; border-radius: 10px; background: #EAF2FC; display: grid; place-items: center; font-size: 1.2rem; flex: none; } .pt-seller b { display: block; font-size: .95rem; color: var(--pt-ink); font-weight: 800; } .pt-seller small { font-size: .8rem; color: var(--pt-ink-2); } /* ========================================================================= 5. CARD DE PRODUTO (para o LOOP BUILDER do Divi) ------------------------------------------------------------------------- Estas classes são para você aplicar no card desenhado no Loop Builder, ou colar num Code module de referência. Ver o Guia de Montagem. ========================================================================= */ .pt-scope .pt-prod-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .pt-scope .pt-pcard { background: var(--pt-paper); border: 1px solid var(--pt-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: .18s; position: relative; } .pt-scope .pt-pcard:hover { box-shadow: 0 8px 26px rgba(11,42,74,.12); transform: translateY(-4px); border-color: transparent; } .pt-scope .pt-pcard .pt-disc { position: absolute; top: 10px; left: 10px; background: var(--pt-green); color: #fff; font-size: .72rem; font-weight: 800; padding: 3px 9px; border-radius: 6px; z-index: 2; } .pt-scope .pt-pcard .pt-pthumb { aspect-ratio: 1/1; display: grid; place-items: center; padding: 14px; background: #fff; } .pt-scope .pt-pcard .pt-pbody { padding: 12px 14px 16px; display: flex; flex-direction: column; flex: 1; } .pt-scope .pt-pcard .pt-pcat { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pt-mute); margin-bottom: 5px; } .pt-scope .pt-pcard .pt-pname { font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--pt-ink); margin-bottom: 10px; min-height: 2.6em; } .pt-scope .pt-pcard .pt-old { font-size: .78rem; color: var(--pt-mute); text-decoration: line-through; } .pt-scope .pt-pcard .pt-now { font-size: 1.35rem; font-weight: 800; color: var(--pt-ink); line-height: 1.1; } .pt-scope .pt-pcard .pt-pix { font-size: .76rem; color: var(--pt-green); font-weight: 700; margin-top: 2px; } .pt-scope .pt-pcard .pt-inst { font-size: .76rem; color: var(--pt-ink-2); margin-top: 1px; } .pt-scope .pt-pcard .pt-buy { margin-top: 12px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--pt-blue), var(--pt-blue-2)); color: #fff; border: 0; border-radius: 9px; padding: 12px; font-weight: 800; font-size: .88rem; letter-spacing: .01em; transition: box-shadow .2s, transform .2s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 6px rgba(15,76,154,.25); } .pt-scope .pt-pcard .pt-buy .pt-buy-ic { transition: transform .25s; } /* brilho que atravessa o botão no hover */ .pt-scope .pt-pcard .pt-buy::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .55s; } .pt-scope .pt-pcard .pt-buy:hover { background: linear-gradient(135deg, var(--pt-blue-dark), var(--pt-blue)); box-shadow: 0 8px 20px rgba(15,76,154,.4); transform: translateY(-1px); } .pt-scope .pt-pcard .pt-buy:hover::before { left: 130%; } .pt-scope .pt-pcard .pt-buy:hover .pt-buy-ic { transform: translateX(3px); } .pt-scope .pt-pcard .pt-buy:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(15,76,154,.35); } /* Faixa de ofertas relâmpago (cabeçalho da seção) */ .pt-scope .pt-shelf { background: var(--pt-paper); border-radius: 16px; padding: 18px; box-shadow: 0 2px 8px rgba(11,42,74,.07); } .pt-scope .pt-shelf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .pt-scope .pt-flame { background: var(--pt-red); color: #fff; font-weight: 800; font-size: .78rem; padding: 5px 12px; border-radius: 7px; display: flex; align-items: center; gap: 6px; } .pt-scope .pt-shelf-head h2 { font-size: 1.25rem; font-weight: 800; } .pt-scope .pt-timer { margin-left: auto; display: flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--pt-ink-2); } .pt-scope .pt-timer b { background: var(--pt-ink); color: #fff; padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; } .pt-scope .pt-filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; } .pt-scope .pt-filters button { font-weight: 600; font-size: .84rem; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--pt-line); background: #fff; color: var(--pt-ink-2); transition: .15s; } .pt-scope .pt-filters button:hover { border-color: var(--pt-blue); color: var(--pt-blue); } .pt-scope .pt-filters button.pt-on { background: var(--pt-blue); color: #fff; border-color: var(--pt-blue); } /* ========================================================================= RESPONSIVO — cortes 1080 / 680 (iguais ao mockup) ========================================================================= */ @media (max-width: 1080px) { .pt-hero-grid { grid-template-columns: 1fr; } .pt-side-promos { grid-template-rows: none; grid-template-columns: 1fr 1fr; } .pt-cats { grid-template-columns: repeat(3, 1fr); } .pt-scope .pt-prod-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .pt-slide { padding: 30px 26px; } .pt-slide h2 { font-size: 1.7rem; } .pt-side-promos { grid-template-columns: 1fr; } .pt-cats { grid-template-columns: repeat(2, 1fr); } .pt-scope .pt-prod-grid { grid-template-columns: repeat(2, 1fr); } .pt-cta-band { flex-direction: column; align-items: flex-start; } /* v2.7.2 — "Por que comprar direto da fábrica": no celular os 5 benefícios quebravam de forma irregular (flex wrap centralizado). Vira 1 por linha, alinhado à esquerda, de forma consistente. */ .pt-sellers-row { flex-direction: column; align-items: flex-start; gap: 18px; } .pt-seller { width: 100%; } } /* ========================================================================= PÁGINAS WOOCOMMERCE (Loja/Categoria + Produto individual) Adicionado na v1.1.0. Mesmo conteúdo do arquivo avulso pinte-woo-paginas.css ========================================================================= */ .pt-scope .pt-crumb { font-size: .8rem; color: var(--pt-mute); margin-bottom: 6px; } .pt-scope .pt-crumb a { color: var(--pt-blue); } .pt-scope .pt-shop-toolbar { display: flex; align-items: center; justify-content: space-between; background: var(--pt-paper); border: 1px solid var(--pt-line); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .pt-scope .pt-shop-count { font-size: .84rem; color: var(--pt-ink-2); } .pt-scope .pt-shop-sort { font-size: .84rem; border: 1.5px solid var(--pt-line); border-radius: 8px; padding: 8px 12px; color: var(--pt-ink); background: #fff; } /* ---------- SIDEBAR DE FILTROS ---------- */ .pt-scope .pt-filters-panel { background: var(--pt-paper); border: 1px solid var(--pt-line); border-radius: 12px; padding: 4px 16px 12px; position: sticky; top: 16px; } .pt-scope .pt-fgroup { padding: 14px 0; border-bottom: 1px solid var(--pt-line); } .pt-scope .pt-fgroup:last-child { border-bottom: 0; } .pt-scope .pt-fgroup h4 { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--pt-ink); margin-bottom: 12px; } .pt-scope .pt-fitem { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: .88rem; color: var(--pt-ink-2); cursor: pointer; } .pt-scope .pt-fitem input { accent-color: var(--pt-blue); width: 16px; height: 16px; } .pt-scope .pt-fitem .pt-fcount { margin-left: auto; font-size: .76rem; color: var(--pt-mute); } .pt-scope .pt-fitem:hover { color: var(--pt-blue); } .pt-scope .pt-price-range { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .pt-scope .pt-price-range input { width: 100%; border: 1.5px solid var(--pt-line); border-radius: 8px; padding: 8px 10px; font-size: .82rem; } .pt-scope .pt-fapply { width: 100%; margin-top: 12px; background: var(--pt-blue); color: #fff; border: 0; border-radius: 8px; padding: 10px; font-weight: 700; font-size: .86rem; } .pt-scope .pt-fapply:hover { background: var(--pt-blue-dark); } .pt-scope .pt-fchips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .pt-scope .pt-fchip { display: inline-flex; align-items: center; gap: 6px; background: #EAF2FC; color: var(--pt-blue); border-radius: 999px; padding: 5px 12px; font-size: .78rem; font-weight: 600; } .pt-scope .pt-fchip b { cursor: pointer; } /* ---------- PAGINAÇÃO ---------- */ .pt-scope .pt-pager { display: flex; gap: 6px; justify-content: center; margin-top: 24px; } .pt-scope .pt-pager a { min-width: 38px; height: 38px; display: grid; place-items: center; border: 1.5px solid var(--pt-line); border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--pt-ink-2); background: #fff; } .pt-scope .pt-pager a.pt-on { background: var(--pt-blue); color: #fff; border-color: var(--pt-blue); } .pt-scope .pt-pager a:hover:not(.pt-on) { border-color: var(--pt-blue); color: var(--pt-blue); } /* ========================================================================= PRODUTO INDIVIDUAL ========================================================================= */ .pt-scope .pt-single { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; } /* Galeria */ .pt-scope .pt-gallery .pt-main-img { background: var(--pt-paper); border: 1px solid var(--pt-line); border-radius: 14px; aspect-ratio: 1/1; display: grid; place-items: center; padding: 28px; margin-bottom: 12px; } .pt-scope .pt-thumbs { display: flex; gap: 10px; } .pt-scope .pt-thumbs span { width: 66px; height: 66px; border: 1.5px solid var(--pt-line); border-radius: 10px; display: grid; place-items: center; padding: 6px; cursor: pointer; background: #fff; } .pt-scope .pt-thumbs span.pt-on { border-color: var(--pt-blue); } /* Coluna de compra */ .pt-scope .pt-buybox .pt-pcat { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--pt-mute); margin-bottom: 8px; } .pt-scope .pt-buybox h1 { font-size: 1.7rem; font-weight: 800; line-height: 1.2; color: var(--pt-ink); margin-bottom: 10px; } .pt-scope .pt-rating { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: .84rem; color: var(--pt-ink-2); } .pt-scope .pt-stars { color: var(--pt-amber-deep); letter-spacing: 2px; } .pt-scope .pt-price-block { background: var(--pt-paper); border: 1px solid var(--pt-line); border-radius: 12px; padding: 18px; margin-bottom: 18px; } .pt-scope .pt-price-block .pt-old { font-size: .9rem; color: var(--pt-mute); text-decoration: line-through; } .pt-scope .pt-price-block .pt-now { font-size: 2.1rem; font-weight: 800; color: var(--pt-ink); line-height: 1.1; } .pt-scope .pt-price-block .pt-pix { font-size: .95rem; color: var(--pt-green); font-weight: 700; margin-top: 4px; } .pt-scope .pt-price-block .pt-inst { font-size: .86rem; color: var(--pt-ink-2); margin-top: 2px; } .pt-scope .pt-qty-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } .pt-scope .pt-qty { display: flex; align-items: center; border: 1.5px solid var(--pt-line); border-radius: 8px; overflow: hidden; } .pt-scope .pt-qty button { width: 40px; height: 46px; border: 0; background: #fff; font-size: 1.2rem; color: var(--pt-ink-2); } .pt-scope .pt-qty input { width: 46px; height: 46px; border: 0; text-align: center; font-size: 1rem; font-weight: 700; } .pt-scope .pt-buy-lg { flex: 1; background: var(--pt-blue); color: #fff; border: 0; border-radius: 8px; padding: 14px; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 9px; } .pt-scope .pt-buy-lg:hover { background: var(--pt-blue-dark); } .pt-scope .pt-buy-2 { width: 100%; background: #fff; border: 1.5px solid var(--pt-blue); color: var(--pt-blue); border-radius: 8px; padding: 13px; font-weight: 700; font-size: .95rem; margin-bottom: 18px; } .pt-scope .pt-trust { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .pt-scope .pt-trust div { display: flex; align-items: center; gap: 9px; font-size: .82rem; color: var(--pt-ink-2); background: var(--pt-paper); border: 1px solid var(--pt-line); border-radius: 10px; padding: 10px 12px; } .pt-scope .pt-trust .pt-tic { font-size: 1.1rem; } /* Abas de ficha técnica */ .pt-scope .pt-tabs { margin-top: 40px; } .pt-scope .pt-tabnav { display: flex; gap: 4px; border-bottom: 2px solid var(--pt-line); margin-bottom: 20px; flex-wrap: wrap; } .pt-scope .pt-tabnav button { background: none; border: 0; padding: 12px 20px; font-size: .92rem; font-weight: 700; color: var(--pt-ink-2); border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; } .pt-scope .pt-tabnav button.pt-on { color: var(--pt-blue); border-bottom-color: var(--pt-blue); } .pt-scope .pt-tabpane { display: none; font-size: .94rem; line-height: 1.7; color: var(--pt-ink-2); } .pt-scope .pt-tabpane.pt-on { display: block; } .pt-scope .pt-spec-table { width: 100%; border-collapse: collapse; } .pt-scope .pt-spec-table td { padding: 11px 14px; border-bottom: 1px solid var(--pt-line); font-size: .9rem; } .pt-scope .pt-spec-table td:first-child { font-weight: 700; color: var(--pt-ink); width: 34%; background: #F7F9FC; } @media (max-width: 1080px) { .pt-scope .pt-shop { grid-template-columns: 1fr; } .pt-scope .pt-filters-panel { position: static; } .pt-scope .pt-single { grid-template-columns: 1fr; gap: 24px; } } @media (max-width: 680px) { .pt-scope .pt-trust { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------------- Se usar ESTE arquivo SEM o plugin, descomente o :root abaixo para fornecer as variáveis de cor (tema Azul Magalu). Com o plugin ativo, NÃO precisa — as variáveis já vêm de lá. ------------------------------------------------------------------------- .pt-scope { --pt-blue:#0F4C9A; --pt-blue-2:#1560BD; --pt-blue-dark:#0A3A78; --pt-blue-ink:#0B2A4A; --pt-amber:#FFB13C; --pt-amber-deep:#F59E00; --pt-green:#1B9E4B; --pt-red:#E23744; --pt-ink:#20242B; --pt-ink-2:#5A626E; --pt-mute:#8A94A3; --pt-line:#E6E9EF; --pt-bg:#F2F4F8; --pt-paper:#FFFFFF; } ------------------------------------------------------------------------- */ /* ========================================================================= OVERRIDE DAS CORES NATIVAS DO WOOCOMMERCE (v1.3.0) ------------------------------------------------------------------------- O WooCommerce injeta um roxo/rosa (#a46497) e azuis genéricos em mensagens, notices, badges e links. Este bloco força a paleta Pinte por cima, para não precisar corrigir elemento por elemento. Não precisa de .pt-scope: mira as classes nativas do Woo diretamente. Escopo amplo, mas restrito ao Woo. ========================================================================= */ /* Variáveis do tema padrão do WooCommerce (Storefront/blocos) */ :root { --wc-green: #1B9E4B; --wc-red: #E23744; --wc-primary: #0F4C9A; --wc-primarytext: #ffffff; --wc-secondary: #EAF2FC; --wc-secondarytext: #0F4C9A; --wc-highlight: #0F4C9A; --wc-highlightext: #ffffff; --wc-content-bg: #ffffff; --wc-subtext: #5A626E; /* ===================================================================== >>> COR DA FAIXA "ADICIONADO AO CARRINHO" — TROQUE AQUI <<< --------------------------------------------------------------------- Para mudar a cor da faixa, altere SÓ estas 3 linhas: - AZUL FORTE (atual): fundo #0F4C9A · texto #fff · link #FFB13C - VERDE (alternativa): fundo #1B9E4B · texto #fff · link #FFF7CC Basta trocar os valores abaixo (ou copiar os do verde por cima). ===================================================================== */ --pt-msg-bg: #0F4C9A; /* cor de fundo da faixa (verde: #1B9E4B) */ --pt-msg-text: #ffffff; /* cor do texto (verde: #ffffff) */ --pt-msg-link: #FFB13C; /* cor do link Ver carrinho (verde: #FFF7CC) */ } /* ------------------------------------------------------------------------- FAIXA "ADICIONADO AO CARRINHO" — azul forte, centralizada em 1280px Especificidade reforçada (html body ...) para vencer a cor do tema. A cor sai das variáveis --pt-msg-* acima. ------------------------------------------------------------------------- */ html body .woocommerce-message, html body .woocommerce .woocommerce-message, html body .woocommerce-notices-wrapper .woocommerce-message, html body .wc-block-components-notice-banner.is-success { background: var(--pt-msg-bg) !important; color: var(--pt-msg-text) !important; border: 0 !important; border-top: 0 !important; border-radius: 0 !important; max-width: 1280px !important; margin: 0 auto !important; padding: 18px 24px !important; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; font-size: 1rem; font-weight: 600; list-style: none !important; box-shadow: none !important; } /* estrutura interna do notice de bloco (versão nova do Woo) */ html body .woocommerce-message .message-inner, html body .wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__content { background: transparent !important; color: var(--pt-msg-text) !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* remove o ícone/check/SVG padrão (clássico e bloco) */ html body .woocommerce-message::before, html body .wc-block-components-notice-banner.is-success > svg, html body .wc-block-components-notice-banner.is-success .wc-block-components-notice-banner__icon { display: none !important; } html body .woocommerce-message a, html body .woocommerce-message a.button, html body .wc-block-components-notice-banner.is-success a, html body .wc-block-components-notice-banner.is-success .wc-block-components-button, html body .wc-block-components-notice-banner.is-success .wc-block-components-button:not(.is-link), html body .wc-block-components-notice-banner .wc-block-components-button, html body .woocommerce-message .wc-block-components-button, html body .woocommerce-notices-wrapper .wc-block-components-button { color: #ffffff !important; background: none !important; background-color: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; font-weight: 700 !important; padding: 0 !important; margin: 0 !important; text-decoration: underline !important; box-shadow: none !important; min-height: 0 !important; height: auto !important; width: auto !important; } html body .wc-block-components-notice-banner.is-success .wc-block-components-button__text, html body .wc-block-components-notice-banner .wc-block-components-button__text { color: #ffffff !important; background: none !important; } /* Mensagens de info/erro do WooCommerce (a de sucesso é tratada acima) */ .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { border-top-color: #1B9E4B !important; background: #EAF6EE !important; color: #14532d !important; } .wc-block-components-notice-banner.is-success::before { color: #1B9E4B !important; } .woocommerce-info, .wc-block-components-notice-banner.is-info { border-top-color: #0F4C9A !important; background: #EAF2FC !important; color: #0B2A4A !important; } .woocommerce-info::before { color: #0F4C9A !important; } .woocommerce-error, .wc-block-components-notice-banner.is-error { border-top-color: #E23744 !important; background: #FCEBED !important; color: #7f1d1d !important; } .woocommerce-error::before { color: #E23744 !important; } /* ------------------------------------------------------------------------- TEXTO do aviso de ERRO legível (v2.5.4). O aviso fica dentro de um módulo de texto do Divi com a classe .et_pb_bg_layout_light, cujo esquema de cor de texto vinha vencendo o nosso color no
  • /, deixando as letras BRANCAS sobre o rosa claro. Aqui reforçamos o vinho escuro cobrindo o container do erro E seus filhos diretos (li/strong/a) — mesma família de seletor da regra acima (html body + a classe do próprio aviso), sem exagero de especificidade e sem vazar para o resto da loja. ------------------------------------------------------------------------- */ html body .woocommerce-error, html body .woocommerce-error li, html body .woocommerce-error strong, html body .woocommerce-error a { color: #7f1d1d !important; } /* Links dentro das mensagens de info (a de sucesso é tratada no bloco da faixa) */ .woocommerce-info a { color: #0F4C9A !important; font-weight: 700; } /* Selo "Oferta!" / "Sale" nativo do Woo — bem discreto, canto superior esquerdo */ .woocommerce span.onsale, .wc-block-components-product-sale-badge { background: #E23744 !important; color: #fff !important; border-radius: 5px !important; font-weight: 700 !important; font-size: .58rem !important; line-height: 1 !important; letter-spacing: .03em; text-transform: uppercase; padding: 3px 6px !important; min-height: 0 !important; min-width: 0 !important; width: auto !important; height: auto !important; top: 8px !important; left: 8px !important; right: auto !important; margin: 0 !important; position: absolute !important; z-index: 3 !important; box-shadow: 0 1px 4px rgba(226,55,68,.3); } /* Botões nativos do WooCommerce (fora dos nossos .pt-buy) */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .button.alt, .woocommerce #respond input#submit { background: #0F4C9A !important; color: #fff !important; border-radius: 8px !important; font-weight: 700 !important; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .button.alt:hover { background: #0A3A78 !important; } /* Links gerais do Woo e preços */ .woocommerce a { color: #0F4C9A; } .woocommerce .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: #20242B; } .woocommerce .price del { color: #8A94A3; } .woocommerce .price ins { color: #20242B; text-decoration: none; } /* Estrelas de avaliação nativas */ .woocommerce .star-rating span::before, .woocommerce p.stars a::before { color: #F59E00 !important; } /* Badge de estoque */ .woocommerce .stock.in-stock { color: #1B9E4B !important; } .woocommerce .stock.out-of-stock { color: #E23744 !important; } /* ========================================================================= CARD: QUANTIDADE + BOTÃO LADO A LADO (v1.4.0) ------------------------------------------------------------------------- O módulo "Produto Woo Adicionar ao Carrinho" empilha o campo de quantidade e o botão. Aqui forçamos os dois na mesma linha, dentro do card. Mira o formulário nativo do Woo (.cart) e seus filhos (.quantity + botão), estando ele dentro de um elemento com a classe .pt-buy (aplicada no módulo). ========================================================================= */ /* O formulário que contém quantidade + botão vira flex (lado a lado) */ .pt-buy form.cart, .pt-pcard form.cart, .pt-buy .wp-block-add-to-cart-form, .pt-pcard .wp-block-add-to-cart-form { display: -webkit-box; display: -webkit-flex; display: flex !important; -webkit-box-align: stretch; align-items: stretch; gap: 8px; flex-wrap: nowrap; } /* Campo de quantidade compacto à esquerda */ .pt-buy form.cart .quantity, .pt-pcard form.cart .quantity { flex: 0 0 auto; margin: 0 !important; } .pt-buy form.cart .quantity input.qty, .pt-pcard form.cart .quantity input.qty { width: 42px; height: 100%; min-height: 42px; border: 1.5px solid var(--pt-line); border-radius: 8px; text-align: center; font-weight: 700; font-size: .9rem; padding: 0 4px; -moz-appearance: textfield; } /* Botão ocupa o resto da linha — compacto para caber em 4 colunas */ .pt-buy form.cart button.button, .pt-buy form.cart button[type="submit"], .pt-pcard form.cart button.button, .pt-pcard form.cart button[type="submit"] { flex: 1 1 auto; margin: 0 !important; min-height: 42px; padding: 8px 10px !important; font-size: .8rem !important; line-height: 1.15; white-space: normal; /* permite quebrar em 2 linhas se faltar espaço */ word-break: break-word; } .pt-buy form.cart .gap, .pt-buy form.cart { gap: 6px; } /* Remove quebras/margens que o Woo insere e empurram o botão pra baixo */ .pt-buy form.cart br, .pt-pcard form.cart br { display: none !important; } .pt-buy form.cart::after, .pt-pcard form.cart::after { content: none !important; } /* ========================================================================= MINIATURAS DA GALERIA — escondidas no CARD da loja (v1.7.0) ------------------------------------------------------------------------- No card da loja (dentro de .pt-pcard), as miniaturas ficam apertadas e não agregam — quem quer ver mais fotos clica no produto. Então as escondemos apenas no card. Na PÁGINA DO PRODUTO (galeria .pt-scope .pt-gallery) elas continuam aparecendo normalmente, pois lá há espaço. ========================================================================= */ /* Esconde as miniaturas somente dentro do card da loja */ .pt-pcard .flex-control-thumbs, .pt-pcard .flex-control-nav, .pt-pthumb .flex-control-thumbs, .pt-pthumb .flex-control-nav { display: none !important; } /* Garante que a galeria da PÁGINA DO PRODUTO mantenha as miniaturas visíveis, centralizadas e compactas (não é card, é .pt-gallery). */ .pt-scope .pt-gallery .flex-control-thumbs { display: -webkit-box; display: -webkit-flex; display: flex !important; -webkit-box-pack: center; justify-content: center !important; -webkit-box-align: center; align-items: center; gap: 6px !important; flex-wrap: wrap; margin: 10px 0 0 !important; padding: 0 !important; list-style: none !important; width: 100%; float: none !important; } .pt-scope .pt-gallery .flex-control-thumbs li { float: none !important; margin: 0 !important; width: auto !important; list-style: none !important; } .pt-scope .pt-gallery .flex-control-thumbs li img { width: 56px !important; height: 56px !important; object-fit: cover; border-radius: 8px; border: 1.5px solid var(--pt-line); opacity: .8; transition: .15s; cursor: pointer; display: block; } .pt-scope .pt-gallery .flex-control-thumbs li img:hover, .pt-scope .pt-gallery .flex-control-thumbs li img.flex-active { opacity: 1; border-color: var(--pt-blue); } /* ========================================================================= CARRINHO E CHECKOUT (blocos WooCommerce) — paleta Pinte ------------------------------------------------------------------------- Baseado na documentação oficial: o botão de bloco é .wc-block-components-button (NÃO tem a classe .button). O texto interno é .wc-block-components-button__text. Seletores com especificidade reforçada para vencer o CSS padrão do Woo, que usa body:not(.woocommerce-block-theme-has-button-styles) .wc-block-components-button. ========================================================================= */ /* TODOS os botões de bloco (base) — cor da marca */ html body.woocommerce-cart .wc-block-components-button:not(.is-link), html body.woocommerce-checkout .wc-block-components-button:not(.is-link), html body .wp-block-woocommerce-cart .wc-block-components-button:not(.is-link), html body .wp-block-woocommerce-checkout .wc-block-components-button:not(.is-link), html body .wc-block-components-checkout-place-order-button, html body .wc-block-cart__submit-button { background: #0F4C9A !important; background-color: #0F4C9A !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 800 !important; box-shadow: 0 2px 8px rgba(15,76,154,.25) !important; } /* texto interno do botão de bloco */ html body .wc-block-components-button:not(.is-link) .wc-block-components-button__text { color: #fff !important; } /* hover dos botões de bloco */ html body .wc-block-components-button:not(.is-link):hover, html body .wc-block-components-checkout-place-order-button:hover, html body .wc-block-cart__submit-button:hover { background: #0A3A78 !important; background-color: #0A3A78 !important; } /* Botões clássicos (caso alguma tela use shortcode) */ html body .woocommerce a.button, html body .woocommerce button.button, html body .woocommerce input.button, html body .woocommerce a.checkout-button, html body .woocommerce #place_order { background: #0F4C9A !important; color: #fff !important; border-radius: 10px !important; font-weight: 800 !important; } html body .woocommerce a.button:hover, html body .woocommerce button.button:hover, html body .woocommerce a.checkout-button:hover, html body .woocommerce #place_order:hover { background: #0A3A78 !important; } /* Botão outline (voltar ao carrinho, etc.) */ html body .wc-block-components-button.is-style-outline, html body .wc-block-components-button.outlined { background: #fff !important; background-color: #fff !important; color: #0F4C9A !important; box-shadow: inset 0 0 0 1.5px #0F4C9A !important; } html body .wc-block-components-button.is-style-outline .wc-block-components-button__text, html body .wc-block-components-button.outlined .wc-block-components-button__text { color: #0F4C9A !important; } /* Links (nomes de produto, "Ver carrinho", editar) em azul */ html body .wc-block-components-product-name, html body .wc-block-cart-item__product-name a, html body .woocommerce-cart-form a { color: #0F4C9A !important; } /* Preços e totais em grafite */ html body .wc-block-components-totals-item__value, html body .wc-block-formatted-money-amount { color: #20242B !important; font-weight: 700 !important; } /* Badge de quantidade no resumo do pedido (classe oficial da doc) */ html body .wc-block-components-order-summary-item__quantity { background-color: #0F4C9A !important; border-color: #0F4C9A !important; box-shadow: 0 0 0 2px #0F4C9A !important; color: #fff !important; } /* Selo "Economize R$" — verde discreto */ html body .wc-block-components-sale-badge { background: #EAF6EE !important; color: #14532d !important; border: 1px solid #1B9E4B !important; border-radius: 6px !important; font-weight: 700 !important; font-size: .78rem !important; } /* Foco dos campos em azul */ html body .wc-block-components-text-input input:focus, html body .woocommerce-checkout input:focus, html body .woocommerce-checkout select:focus { border-color: #0F4C9A !important; box-shadow: 0 0 0 2px rgba(15,76,154,.15) !important; outline: none !important; } /* ------------------------------------------------------------------------- LAYOUT do checkout em blocos — evita o "texto espremido" do resumo. A doc (WC 10.0) define .wp-block-woocommerce-checkout como container. Forçamos formulário (esquerda) e resumo (direita) lado a lado. ------------------------------------------------------------------------- */ html body .wp-block-woocommerce-checkout, html body .wc-block-checkout { display: flex !important; flex-wrap: wrap; gap: 40px; align-items: flex-start; max-width: 1280px; margin-left: auto; margin-right: auto; } html body .wp-block-woocommerce-checkout .wc-block-checkout__main { flex: 1 1 55% !important; min-width: 340px; max-width: none !important; } html body .wp-block-woocommerce-checkout .wc-block-checkout__sidebar { flex: 1 1 32% !important; min-width: 300px; /* resumo à direita, largura confortável */ max-width: 420px !important; } /* No RESUMO do pedido: mostrar NOME e DESCRIÇÃO do produto (como no carrinho) */ html body .wc-block-components-order-summary-item__description { display: block !important; font-size: .8rem !important; color: #5A626E !important; line-height: 1.4 !important; margin-top: 2px !important; } html body .wc-block-components-order-summary-item__name { display: block !important; white-space: normal !important; word-break: normal !important; font-weight: 700 !important; font-size: .9rem !important; color: #20242B !important; margin-bottom: 2px !important; } html body .wc-block-components-order-summary-item__total-price { white-space: nowrap !important; } /* ========================================================================= CAMPOS DE FORMULÁRIO — cantos arredondados (v1.7.0) ------------------------------------------------------------------------- Arredonda inputs, selects e textareas do checkout, carrinho e busca, para combinar com os cards e botões da loja. >>> Para mudar o raio, altere a variável --pt-field-radius abaixo. <<< ========================================================================= */ :root { --pt-field-radius: 10px; /* meio-termo entre 8 e 12. Pílula = 999px */ } html body .woocommerce form .form-row input.input-text, html body .woocommerce form .form-row textarea, html body .woocommerce-checkout input[type="text"], html body .woocommerce-checkout input[type="email"], html body .woocommerce-checkout input[type="tel"], html body .woocommerce-checkout input[type="password"], html body .woocommerce-checkout select, html body .woocommerce-checkout .select2-selection, html body .wc-block-components-text-input input, html body .wc-block-components-select__container, html body .wc-block-components-address-form input, html body .wc-block-components-address-form select, html body .woocommerce-cart input[type="text"], html body .woocommerce input#coupon_code, html body .woocommerce .quantity input.qty, html body .pt-scope .pt-search input { border-radius: var(--pt-field-radius) !important; } /* select2 (país/estado) — arredonda a caixa e a abertura */ html body .select2-container--default .select2-selection--single { border-radius: var(--pt-field-radius) !important; } html body .select2-dropdown { border-radius: var(--pt-field-radius) !important; overflow: hidden; } /* ========================================================================= LOJA — dropdown "Ordenar por" (woocommerce-ordering) (v2.7.6) ------------------------------------------------------------------------- Arredonda e estiliza o select de ordenação do catálogo no padrão da loja: mesmo raio dos campos (--pt-field-radius), borda da marca, seta própria (azul #4080C0) e foco azul. Combina com os cards, botões e a paginação. ========================================================================= */ html body .woocommerce .woocommerce-ordering select.orderby, html body .woocommerce-page .woocommerce-ordering select.orderby { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; font-size: .9rem; font-weight: 600; color: #20242B; background-color: #fff; border: 1.5px solid #4080C0; /* borda sempre azul da marca (padrão do cliente) */ border-radius: var(--pt-field-radius, 10px); padding: 10px 42px 10px 16px; line-height: 1.3; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M2%204.5l4%204%204-4'%20fill='none'%20stroke='%234080C0'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; } html body .woocommerce .woocommerce-ordering select.orderby:hover, html body .woocommerce-page .woocommerce-ordering select.orderby:hover { border-color: #4080C0; } html body .woocommerce .woocommerce-ordering select.orderby:focus, html body .woocommerce-page .woocommerce-ordering select.orderby:focus { outline: none; border-color: #4080C0; box-shadow: 0 0 0 3px rgba(64, 128, 192, .18); } /* ========================================================================= LOJA — cabeçalho da listagem: título + breadcrumb ([pinte_loja_crumb]) ------------------------------------------------------------------------- v2.7.9 — título "Loja" no MESMO MOLDE da seção de Ofertas (azul + traço azul), com o breadcrumb "Início / Loja" discreto abaixo. v2.7.7 — breadcrumb fixo e correto da listagem (substitui o breadcrumb de produto do Divi, que caía no produto mais recente). O link usa home_url() no PHP, então sobrevive ao go-live. A classe .pt-scope traz o azul do tema. ========================================================================= */ .pt-loja-head { margin: 8px 0 18px; } /* Título no molde das Ofertas (espelha .nvc-ofertas__titulo) */ .pt-loja-titulo { font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--pt-blue, #4080C0); margin: 0 0 8px; padding-bottom: 8px; border-bottom: 3px solid var(--pt-blue, #4080C0); display: inline-block; } @media (max-width: 600px) { .pt-loja-titulo { font-size: 19px; } } .pt-loja-crumb { font-size: .86rem; line-height: 1.4; padding: 2px 0; color: var(--pt-ink-2, #5A626E); } .pt-loja-crumb a { color: var(--pt-blue, #4080C0); text-decoration: none; font-weight: 600; } .pt-loja-crumb a:hover { text-decoration: underline; } .pt-loja-crumb .pt-loja-crumb__sep { margin: 0 7px; color: var(--pt-line, #C4CDD8); } .pt-loja-crumb .pt-loja-crumb__atual { color: var(--pt-ink-2, #5A626E); } /* ========================================================================= CHECKOUT CLÁSSICO (shortcode) — paleta Pinte + cantos arredondados (v1.9.0) ------------------------------------------------------------------------- Estiliza o checkout clássico do WooCommerce (não-blocos). Classes estáveis: #customer_details, #order_review, #payment, #place_order, .form-row, etc. ========================================================================= */ /* Container geral centralizado no padrão da loja */ html body .woocommerce-checkout .woocommerce { max-width: 1280px; margin: 0 auto; } /* Caixas em formato "cartão" (Detalhes de Cobrança, Seu Pedido, Pagamento) */ html body .woocommerce-checkout #customer_details .col-1, html body .woocommerce-checkout #customer_details .col-2, html body .woocommerce-checkout #order_review, html body .woocommerce-checkout #payment, html body .woocommerce-checkout .woocommerce-billing-fields, html body .woocommerce-checkout .woocommerce-shipping-fields { background: #fff; border: 1px solid var(--pt-line, #E6E9EF); border-radius: 14px; padding: 24px; box-shadow: 0 2px 8px rgba(11,42,74,.05); } /* Títulos das seções em grafite da marca */ html body .woocommerce-checkout h3, html body .woocommerce-checkout #order_review_heading { color: #20242B !important; font-weight: 800 !important; } /* Campos de formulário — cantos arredondados (usa a var já existente) */ html body .woocommerce-checkout .form-row input.input-text, html body .woocommerce-checkout .form-row textarea, html body .woocommerce-checkout select, html body .woocommerce-checkout .select2-selection, html body .woocommerce-checkout .select2-selection--single { border-radius: var(--pt-field-radius, 10px) !important; border: 1.5px solid var(--pt-line, #E6E9EF) !important; padding: 12px 14px !important; min-height: 46px; } html body .woocommerce-checkout .form-row input.input-text:focus, html body .woocommerce-checkout .form-row textarea:focus, html body .woocommerce-checkout select:focus { border-color: #0F4C9A !important; box-shadow: 0 0 0 2px rgba(15,76,154,.15) !important; outline: none !important; } /* Tabela do resumo "Seu Pedido" */ html body .woocommerce-checkout .shop_table { border-radius: 12px; overflow: hidden; } html body .woocommerce-checkout .shop_table th { color: #20242B; font-weight: 700; } html body .woocommerce-checkout .shop_table .amount, html body .woocommerce-checkout .order-total .amount { color: #20242B !important; font-weight: 700; } html body .woocommerce-checkout .shop_table .product-name a { color: #0F4C9A !important; } /* Bloco de pagamento */ html body .woocommerce-checkout #payment { background: #fff; } html body .woocommerce-checkout #payment ul.payment_methods { border: 0; } /* radio de pagamento selecionado em azul */ html body .woocommerce-checkout #payment input[type="radio"] { accent-color: #0F4C9A; } /* caixa de descrição da forma de pagamento */ html body .woocommerce-checkout #payment .payment_box { background: #EAF2FC !important; border-radius: 10px !important; color: #0B2A4A; } html body .woocommerce-checkout #payment .payment_box::before { border-bottom-color: #EAF2FC !important; } /* Botão principal "Finalizar pedido" — azul da marca */ html body .woocommerce-checkout #place_order, html body .woocommerce-checkout button#place_order { background: #0F4C9A !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 800 !important; font-size: 1rem !important; padding: 16px 24px !important; box-shadow: 0 2px 8px rgba(15,76,154,.25) !important; transition: background .15s; } html body .woocommerce-checkout #place_order:hover { background: #0A3A78 !important; } /* Botão "Cotar Frete via WhatsApp" — mantém verde (convenção WhatsApp) */ html body .woocommerce-checkout a[href*="wa.me"], html body .woocommerce-checkout a[href*="whatsapp"], html body .woocommerce-checkout .pt-whatsapp-btn { background: #25D366 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important; font-weight: 800 !important; box-shadow: 0 2px 8px rgba(37,211,102,.25) !important; } html body .woocommerce-checkout a[href*="wa.me"]:hover, html body .woocommerce-checkout a[href*="whatsapp"]:hover { background: #1EBE5A !important; } /* Caixa "ATENÇÃO" (aviso do topo) — azul suave no padrão da marca */ html body .woocommerce-checkout .woocommerce-info, html body .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { background: #EAF2FC !important; border-top: 3px solid #0F4C9A !important; color: #0B2A4A !important; border-radius: 0 0 10px 10px; } /* checkbox "Entregar para endereço diferente" e "nota" */ html body .woocommerce-checkout input[type="checkbox"] { accent-color: #0F4C9A; } /* ========================================================================= CONSOLIDAÇÃO v2.0 (08/09/2026) — ajustes visuais home/loja/pedido ========================================================================= */ /* Hero — título do slide grande em branco */ .pt-scope .pt-slide .pt-st h2 { color: #FFFFFF !important; font-family: "Inter", sans-serif !important; } /* Hero — banners laterais (Pix / Kits): textos em branco, leve negrito */ .pt-side-promos .pt-promo small, .pt-side-promos .pt-promo h3, .pt-side-promos .pt-promo .pt-promo-link { color: #FFFFFF !important; font-family: "Inter", sans-serif !important; font-weight: 600 !important; } /* CTA — botão "Falar com consultor" (WhatsApp): verde da marca no repouso + escurece no hover. !important e alta especificidade para vencer as regras de link do Divi (mesma razão da barra de deptos). */ .pt-sec .pt-b-cta a.pt-b2 { background: #1F9D57 !important; border-color: #1F9D57 !important; color: #FFFFFF !important; } .pt-sec .pt-b-cta a.pt-b2:hover { background: #187A43 !important; border-color: #187A43 !important; color: #FFFFFF !important; } /* Pedido recebido — linha de descrição do pagamento vira caixa "Observação" azul */ .woocommerce-order p:has(+ section.woocommerce-order-details) { margin-top: 12px !important; margin-bottom: 36px !important; background: #EAF2FC !important; border: 1px solid #0F4C9A !important; border-radius: 10px !important; padding: 14px 18px !important; color: #0B2A4A !important; } .woocommerce-order p:has(+ section.woocommerce-order-details)::before { content: "Observação: "; font-weight: 700; color: #0F4C9A; } /* ========================================================================= PEDIDO RECEBIDO (order-received) — LAYOUT (v2.1.0) ------------------------------------------------------------------------- Migrado do CSS Personalizado do Divi em 20/09/2026. Estilo de LAYOUT da tela "obrigado / pedido recebido": nomes azuis, tabela e endereço em cartão arredondado, títulos grafite, mensagem de sucesso azul, e o bloco de metadados (ul.order_details) em flex. NOTA: os font-weight aqui (nomes 600, títulos 800) referem-se ao NOME do produto e aos TÍTULOS das seções — NÃO aos valores A/B tratados pelo plugin próprio de order-received. Mantidos conforme aprovado. ========================================================================= */ /* Nomes dos produtos -> azul da marca (tira o rosa) */ .woocommerce-order .woocommerce-table--order-details a, .woocommerce-order .woocommerce-table__product-name a, .woocommerce-order td.product-name a { color: #0F4C9A !important; font-weight: 600 !important; } /* Tabela "Detalhes do pedido" -> bordas arredondadas */ .woocommerce-order .woocommerce-table--order-details, .woocommerce-order table.order_details, .woocommerce-order table.shop_table { border: 1px solid #E6E9EF !important; border-radius: 14px !important; overflow: hidden !important; border-collapse: separate !important; border-spacing: 0 !important; } .woocommerce-order table.shop_table th { background: #F7F9FC !important; color: #20242B !important; font-weight: 700 !important; padding: 14px !important; } .woocommerce-order table.shop_table td { padding: 14px !important; border-top: 1px solid #E6E9EF !important; } .woocommerce-order table.shop_table .amount { color: #20242B !important; font-weight: 700 !important; } /* Caixa "Endereço de cobrança" -> formato de cartão arredondado */ .woocommerce-order .woocommerce-customer-details address, .woocommerce-order address { background: #fff !important; border: 1px solid #E6E9EF !important; border-radius: 14px !important; padding: 24px !important; box-shadow: 0 2px 8px rgba(11,42,74,.05) !important; } /* Títulos ("Detalhes do pedido", "Endereço de cobrança") em grafite */ .woocommerce-order h2, .woocommerce-order .woocommerce-column__title { color: #20242B !important; font-weight: 800 !important; } /* Mensagem de sucesso do topo (se houver) -> azul suave */ .woocommerce-order .woocommerce-notice--success, .woocommerce-order .woocommerce-thankyou-order-received { background: #EAF2FC !important; border-radius: 12px !important; border-top: 3px solid #0F4C9A !important; color: #0B2A4A !important; padding: 16px 20px !important; } /* Só reorganiza o bloco em colunas iguais, mantendo o estilo original */ .woocommerce-order ul.order_details { display: flex !important; flex-wrap: wrap !important; gap: 20px 32px !important; } .woocommerce-order ul.order_details li { flex: 0 0 auto !important; border: 0 !important; margin: 0 !important; padding: 0 !important; } /* ========================================================================= Faixa "senha temporária" (Minha Conta) — garante legibilidade e evita o botão sobrepor o texto. Nessa mensagem do Woo o link (botão) vem ANTES do texto no HTML; o flex + ordem deixam texto à esquerda e botão à direita. ========================================================================= */ html body .woocommerce-message { flex-wrap: wrap !important; } /* o texto (nó de texto/estrutura) fica legível e ocupa a linha */ html body .woocommerce-message { color: var(--pt-msg-text) !important; } /* empurra o link "Reenviar e-mail" para a direita, sem cobrir o texto */ html body .woocommerce-message > a.button.wc-forward, html body .woocommerce-message a.wc-forward { order: 2 !important; margin-left: auto !important; white-space: nowrap !important; flex: 0 0 auto !important; } /* ========================================================================= CORREÇÃO DE CLIQUE — Minha Conta dentro do Divi O Divi (.et_pb_text / .et_builder_inner_content) cria pseudo-elementos (::before/::after) e parágrafos que formam uma camada invisível SOBRE o conteúdo, capturando o clique dos links (só "soltava" ao abrir o F12, que força um reflow). Aqui neutralizamos essa camada na página da conta. ========================================================================= */ /* Os wrappers do Divi na Minha Conta não devem capturar cliques... */ body.woocommerce-account .et_pb_text_inner, body.woocommerce-account .et_pb_text, body.woocommerce-account .et_pb_module, body.woocommerce-account .et_builder_inner_content { position: relative !important; } /* ...e seus pseudo-elementos decorativos não podem cobrir os links. */ body.woocommerce-account .et_pb_text::before, body.woocommerce-account .et_pb_text::after, body.woocommerce-account .et_pb_module::before, body.woocommerce-account .et_pb_module::after { pointer-events: none !important; } /* Parágrafos vazios que o shortcode deixa (antes/depois) não ocupam clique. */ body.woocommerce-account .woocommerce > p:empty, body.woocommerce-account .et_pb_text_inner > p:empty { display: none !important; } /* Toda a área do WooCommerce e seus links ficam clicáveis, acima de tudo. */ body.woocommerce-account .woocommerce, body.woocommerce-account .woocommerce-MyAccount-navigation, body.woocommerce-account .woocommerce-MyAccount-content { position: relative !important; z-index: 5 !important; pointer-events: auto !important; } body.woocommerce-account .woocommerce a { pointer-events: auto !important; } /* ------------------------------------------------------------------------- CAUSA DO "SETINHA" nos itens de baixo do menu: No layout do Woo, .woocommerce-MyAccount-navigation (menu, ~35% à esq.) e .woocommerce-MyAccount-content (conteúdo, ~65% à dir.) são floats. O ::after do .woocommerce (clearfix) e/ou o content podem se sobrepor à METADE INFERIOR do menu, capturando o clique dos itens de baixo (Downloads/Endereços/Detalhes/Sair). Aqui blindamos isso. ------------------------------------------------------------------------- */ /* O clearfix (::before/::after do .woocommerce) nunca captura clique. */ body.woocommerce-account .woocommerce::before, body.woocommerce-account .woocommerce::after { pointer-events: none !important; content: "" !important; display: table !important; } /* O menu inteiro fica ACIMA do conteúdo e 100% clicável em toda a altura. */ body.woocommerce-account .woocommerce-MyAccount-navigation { position: relative !important; z-index: 10 !important; pointer-events: auto !important; } body.woocommerce-account .woocommerce-MyAccount-navigation ul, body.woocommerce-account .woocommerce-MyAccount-navigation li, body.woocommerce-account .woocommerce-MyAccount-navigation li a { position: relative !important; z-index: 11 !important; pointer-events: auto !important; } /* O conteúdo fica em camada mais baixa que o menu, e não estoura para a esquerda por baixo dele. */ body.woocommerce-account .woocommerce-MyAccount-content { position: relative !important; z-index: 6 !important; } /* ------------------------------------------------------------------------- LAYOUT DAS COLUNAS: menu à esquerda, conteúdo AO LADO (à direita). Usamos flex com nowrap para as duas colunas ficarem SEMPRE lado a lado (nunca uma embaixo da outra), o que também resolveu a sobreposição do float. No mobile, a media query no fim empilha as colunas. ESCOPO (v2.5.3): restrito a body.woocommerce-account.LOGGED-IN — a página /minha-conta é a MESMA URL logada (painel) e deslogada (login/cadastro), então o flex vazava para a tela deslogada e espremia o aviso de erro ao lado dos formulários. A classe .logged-in vem do core (body_class()), a mesma origem de woocommerce-account, logo é confiável. Deslogado volta ao fluxo normal (aviso em faixa larga, acima); logado fica idêntico ao de antes. ------------------------------------------------------------------------- */ body.woocommerce-account.logged-in .woocommerce { display: flex !important; flex-wrap: nowrap !important; /* NÃO deixa o conteúdo cair pra baixo */ align-items: flex-start !important; gap: 24px !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation { flex: 0 0 240px !important; /* largura fixa da coluna do menu */ width: 240px !important; max-width: 240px !important; float: none !important; /* remove o float que causava a invasão */ margin: 0 !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-content { flex: 1 1 auto !important; /* conteúdo ocupa o resto, ao lado do menu */ float: none !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; } /* No mobile, as colunas se empilham (menu em cima, conteúdo embaixo). */ @media (max-width: 768px) { body.woocommerce-account.logged-in .woocommerce { flex-wrap: wrap !important; } body.woocommerce-account.logged-in .woocommerce-MyAccount-navigation, body.woocommerce-account.logged-in .woocommerce-MyAccount-content { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; } } /* ------------------------------------------------------------------------- FAIXAS DE AVISO do Woo na conta (Pedidos: "Confirme seu e-mail"; Downloads: "Você ainda não tem downloads"): fundo azul clarinho + texto azul escuro, no mesmo padrão das caixas do painel (Opção B), para o texto ficar legível (antes o fundo era claro demais e o texto sumia). ------------------------------------------------------------------------- */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message { background: #EAF2FC !important; border: 1px solid #DCE6F5 !important; border-left: 5px solid #0F4C9A !important; border-radius: 10px !important; color: #0B2A4A !important; box-shadow: none !important; text-shadow: none !important; display: flex !important; /* texto e botão lado a lado */ align-items: center !important; justify-content: space-between !important; gap: 24px !important; /* respiro entre texto e botão */ flex-wrap: wrap !important; padding: 16px 20px !important; line-height: 1.5 !important; } /* o botão da faixa não encosta no texto e não estica demais */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message .button, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info .button { flex: 0 0 auto !important; margin: 0 !important; white-space: nowrap !important; } /* Texto e links dessas faixas em azul escuro legível */ body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a:not(.button), body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a:not(.button) { color: #0B2A4A !important; } body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before, body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before { color: #0F4C9A !important; } /* ------------------------------------------------------------------------- ENDEREÇOS (aba Endereços): alinhar as duas colunas (cobrança/entrega) pelo topo, para os títulos e os links "Editar" ficarem na mesma altura mesmo quando um título quebra em duas linhas. ------------------------------------------------------------------------- */ body.woocommerce-account .woocommerce-Addresses.col2-set { display: flex !important; flex-wrap: wrap !important; gap: 32px !important; align-items: flex-start !important; } body.woocommerce-account .woocommerce-Addresses .woocommerce-Address { flex: 1 1 0 !important; width: auto !important; float: none !important; margin: 0 !important; min-width: 0 !important; } /* Título com altura mínima consistente, para os "Editar" alinharem */ body.woocommerce-account .woocommerce-Address-title.title { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 12px !important; flex-wrap: wrap !important; margin-bottom: 12px !important; } body.woocommerce-account .woocommerce-Address-title.title h2, body.woocommerce-account .woocommerce-Address-title.title h3 { margin: 0 !important; } @media (max-width: 768px) { body.woocommerce-account .woocommerce-Addresses .woocommerce-Address { flex: 1 1 100% !important; } } /* ------------------------------------------------------------------------- CAUSA RAIZ REAL (achada via F12): o container do RODAPÉ do Divi (footer.et-l--footer > .et_builder_inner_content) tem altura enorme (~1200px) e se sobrepõe à metade inferior da página com uma camada invisível (a área "cinza"), capturando o clique dos itens de baixo do menu. A correção: o rodapé e seus wrappers não capturam cliques fora do seu conteúdo real, e o conteúdo da página fica acima do rodapé. ------------------------------------------------------------------------- */ /* O wrapper interno do rodapé não intercepta cliques em área vazia. */ .et-l--footer, .et-l--footer .et_builder_inner_content { pointer-events: none !important; } /* ...mas os elementos REAIS do rodapé (links, textos) continuam clicáveis. */ .et-l--footer .pt-footer, .et-l--footer .pt-footer * { pointer-events: auto !important; } /* A área de conteúdo principal fica ACIMA do container do rodapé. */ body.woocommerce-account #main-content, body.woocommerce-account #et-main-area { position: relative !important; z-index: 20 !important; } /* ========================================================================= PAINEL DA MINHA CONTA — caixas com moldura azul clara (marca) Conteúdo gerado por pinte_home_dashboard_conteudo() + linha do Clube (esta vinda do plugin do Clube, via .ptclube-ja-membro). ========================================================================= */ /* Esconde os 2 parágrafos padrão do WooCommerce (impressos direto no template dashboard.php, sem classe). Nossas caixas são e , que NÃO são atingidos por este seletor. Também preservamos o botão "Entrar no Clube" (), que vem do plugin do Clube para quem ainda não é membro. */ .woocommerce-MyAccount-content > p:not(.ptclube-ja-membro):not(.ptclube-entrar-wrap) { display: none !important; } /* Garante que as caixas e seus links fiquem acima de qualquer camada do tema/Divi, para os cliques sempre funcionarem. O Divi aplica position:relative;z-index:1 em .et_pb_text — subimos acima disso. */ .woocommerce-MyAccount-content .pt-conta-box, .woocommerce-MyAccount-content p.ptclube-ja-membro { position: relative !important; z-index: 2 !important; } .woocommerce-MyAccount-content .pt-conta-box a, .woocommerce-MyAccount-content p.ptclube-entrar-wrap a { position: relative !important; z-index: 3 !important; pointer-events: auto !important; } .woocommerce-MyAccount-content .pt-conta-box, .woocommerce-MyAccount-content p.ptclube-ja-membro { background: #EAF2FC !important; border: 1px solid #DCE6F5 !important; /* borda suave ao redor */ border-left: 5px solid #0F4C9A !important; /* barra lateral azul (padrão) */ border-radius: 10px !important; padding: 16px 20px !important; margin: 0 0 16px !important; color: #0B2A4A !important; font-family: "Inter", sans-serif !important; } .woocommerce-MyAccount-content .pt-conta-box p { margin: 0 !important; color: #0B2A4A !important; line-height: 1.6 !important; } .woocommerce-MyAccount-content .pt-conta-box a { color: #0F4C9A !important; font-weight: 600 !important; text-decoration: underline !important; } .woocommerce-MyAccount-content .pt-conta-logout { font-size: .9rem !important; color: #5A626E !important; } .woocommerce-MyAccount-content .pt-conta-titulo { font-weight: 700 !important; margin-bottom: 8px !important; } .woocommerce-MyAccount-content .pt-conta-lista { margin: 0 !important; padding-left: 20px !important; list-style: decimal !important; } .woocommerce-MyAccount-content .pt-conta-lista li { margin: 4px 0 !important; color: #0B2A4A !important; } /* Caixa da senha temporária — leve destaque em dourado */ .woocommerce-MyAccount-content .pt-conta-senha { border-left: 5px solid #E0B010 !important; } /* Linha do Clube — moldura + destaque, com os ícones no texto (via plugin) */ .woocommerce-MyAccount-content p.ptclube-ja-membro { font-weight: 600 !important; border-left: 5px solid #1B9E4B !important; } /* ========================================================================= MENU LATERAL DA MINHA CONTA — efeito de "abas" com barra lateral Substitui as bolinhas (marcadores) por cartões com barra à esquerda, no mesmo espírito visual das caixas de conteúdo. Seletores reais do HTML do WooCommerce (woocommerce-MyAccount-navigation). ========================================================================= */ /* Remove as bolinhas da lista do menu */ .woocommerce-MyAccount-navigation ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Cada item vira um "cartão" com barra lateral cinza (inativo) */ .woocommerce-MyAccount-navigation ul li { list-style: none !important; margin: 0 0 8px !important; padding: 0 !important; background: #F5F7FA !important; border: 1px solid #E6E9EF !important; border-left: 4px solid #C7D0DE !important; border-radius: 8px !important; overflow: hidden !important; transition: all .15s ease !important; } /* O link ocupa todo o cartão (área clicável ampla) */ .woocommerce-MyAccount-navigation ul li a { display: block !important; padding: 11px 16px !important; color: #20242B !important; font-family: "Inter", sans-serif !important; font-weight: 600 !important; text-decoration: none !important; position: relative !important; /* acima da camada do Divi (.et_pb_text z-index:1) */ z-index: 2 !important; pointer-events: auto !important; } /* Garante que o item do menu não capture o clique antes do link */ .woocommerce-MyAccount-navigation ul li { position: relative !important; z-index: 1 !important; } /* Hover nos itens inativos: barra azul + leve fundo azul */ .woocommerce-MyAccount-navigation ul li:hover { background: #EAF2FC !important; border-left-color: #0F4C9A !important; } /* Item ATIVO (a "aba" atual): fundo azul clarinho + barra azul + texto azul */ .woocommerce-MyAccount-navigation ul li.is-active { background: #EAF2FC !important; border-color: #DCE6F5 !important; border-left: 4px solid #0F4C9A !important; } .woocommerce-MyAccount-navigation ul li.is-active a { color: #0F4C9A !important; font-weight: 800 !important; } /* "Sair" — barra vermelha suave para diferenciar a ação de logout */ .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { border-left-color: #E23744 !important; } .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout:hover { background: #FCEBEC !important; border-left-color: #E23744 !important; } .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { color: #B03020 !important; } /* ========================================================================= * CARRINHO VAZIO -> faixa "Novidade na loja" (bloco woocommerce/product-new) * ------------------------------------------------------------------------- * Quando o carrinho fica vazio (inclusive ao remover o ultimo item), o * WooCommerce renderiza o bloco de produtos "Novidade na loja" * (.wc-block-grid.wp-block-product-new). Os botoes desse bloco sao * .wp-block-button__link (botoes de BLOCO -- NAO tem a classe .button), por * isso escapavam da regra azul dos botoes classicos do Woo e caiam no cinza * padrao do tema. Aqui a faixa inteira entra no padrao de card da loja: * card branco com borda e elevacao no hover, selo "Oferta" vermelho de * marca, preco "por" em azul, botao no azul de marca. * (Adicionado na v2.5.5) * ========================================================================= */ /* Titulo "Seu carrinho esta vazio" + heading "Novidade na loja" em grafite */ html body .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title, html body .wp-block-woocommerce-empty-cart-block > .wp-block-heading { color: #20242B !important; } /* Grade: respiro confortavel entre os cards */ html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__products { gap: 18px !important; } /* Card do produto -- branco, borda, cantos 12px, elevacao leve no hover. flex-column + margin-top:auto no botao mantem os botoes alinhados embaixo mesmo com nomes de 1 ou 2 linhas. */ html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product { position: relative !important; display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; padding: 14px !important; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease !important; } html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product:hover { border-color: #C9D6EA !important; box-shadow: 0 6px 18px rgba(15,76,154,.12) !important; transform: translateY(-2px) !important; } /* Selo "Oferta" -- vermelho de marca, canto superior esquerdo (mesmo padrao visual do selo classico da loja, la em cima) */ html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-onsale { background: #E23744 !important; color: #fff !important; border: 0 !important; border-radius: 5px !important; font-weight: 700 !important; font-size: .58rem !important; line-height: 1 !important; letter-spacing: .03em !important; text-transform: uppercase !important; padding: 3px 6px !important; position: absolute !important; top: 8px !important; left: 8px !important; right: auto !important; margin: 0 !important; min-width: 0 !important; z-index: 3 !important; box-shadow: 0 1px 4px rgba(226,55,68,.3) !important; } /* Nome do produto -- grafite, peso 600 */ html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { color: #20242B !important; font-weight: 600 !important; font-size: .95rem !important; line-height: 1.3 !important; margin: 10px 0 6px !important; } /* Preco de/por: antigo riscado discreto, atual em azul de marca e destaque */ html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price del { color: #8A94A6 !important; font-weight: 400 !important; font-size: .82rem !important; } html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price ins { color: #0F4C9A !important; text-decoration: none !important; font-weight: 800 !important; font-size: 1.05rem !important; } /* Botao "Adicionar ao carrinho" -- botao de BLOCO trazido pro azul de marca */ html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart.wp-block-button { width: 100% !important; margin-top: auto !important; padding-top: 10px !important; } html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link, html body .wp-block-woocommerce-empty-cart-block a.add_to_cart_button.ajax_add_to_cart { display: block !important; background: #0F4C9A !important; color: #fff !important; text-decoration: none !important; border: 0 !important; border-radius: 8px !important; font-weight: 700 !important; padding: 10px 16px !important; width: 100% !important; text-align: center !important; transition: background .15s ease !important; } html body .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover, html body .wp-block-woocommerce-empty-cart-block a.add_to_cart_button.ajax_add_to_cart:hover { background: #0A3A78 !important; } /* Icone "carrinho vazio" (a carinha) -> azul de marca, no lugar do preto padrao. Substitui o icone do ::before por um SVG proprio em #0F4C9A e neutraliza mascara/cor de fundo, pra funcionar seja qual for o mecanismo que o WooCommerce use (background-image, mask ou currentColor). (Adicionado na v2.5.6) */ html body .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='27' fill='none' stroke='%230F4C9A' stroke-width='4'/%3E%3Ccircle cx='23' cy='27' r='3' fill='%230F4C9A'/%3E%3Ccircle cx='41' cy='27' r='3' fill='%230F4C9A'/%3E%3Cpath d='M23 44 q9 -10 18 0' fill='none' stroke='%230F4C9A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* ========================================================================= PÁGINA DE PRODUTO — ABAS, GALERIA E BORDAS ARREDONDADAS (v2.6.1) ------------------------------------------------------------------------- CORREÇÃO (v2.6.0 -> v2.6.1): os seletores anteriores usavam ".woocommerce div.product" com prefixo "html body", que NÃO casava, porque no Divi o ".woocommerce" fica no (body.woocommerce) e não num wrapper. Além disso, o Divi injeta regras com !important + ID (#content-area) que um seletor universal não vence. Solução: casar a estrutura/especificidade do Divi e superá-la por um fio (prefixo "html body.woocommerce #content-area div.product ..."), mantendo !important. Vence de forma determinística nesta página (que é sempre Divi). Paleta REAL da loja: azul #0F4C9A · verde #1B9E4B · dourado #F59E00. ========================================================================= */ /* --- Neutraliza os cantos/triângulos padrão do Woo nas abas --- */ html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li::before, html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li::after { display: none !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs::before { border-bottom: 1px solid #E2E8F0 !important; } /* --- Cada aba: "pílula" de cantos superiores arredondados --- */ html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li { background: #F5F7FA !important; border: 1px solid #E2E8F0 !important; border-radius: 10px 10px 0 0 !important; margin: 0 4px 0 0 !important; padding: 0 !important; transition: background .15s ease !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li a { display: block !important; padding: 12px 22px !important; font-weight: 700 !important; text-decoration: none !important; } /* --- Cor do texto por aba (classe nativa de cada aba) --- */ html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.description_tab a { color: #0F4C9A !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.pft_ficha_tecnica_tab a { color: #1B9E4B !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.reviews_tab a { color: #F59E00 !important; } /* --- Aba inativa: texto esmaecido; realça no hover --- */ html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li:not(.active) a { opacity: .78 !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li:not(.active):hover { background: #EEF2F7 !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li:not(.active):hover a { opacity: 1 !important; } /* --- Aba ATIVA: fundo branco + faixa superior na cor da aba --- */ html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.active { background: #fff !important; border-top-width: 3px !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.description_tab.active { border-top-color: #0F4C9A !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.pft_ficha_tecnica_tab.active { border-top-color: #1B9E4B !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.reviews_tab.active { border-top-color: #F59E00 !important; } /* Aba ativa mantém a cor da marca no texto (vence o #000 que o Divi força) */ html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.description_tab.active a { color: #0F4C9A !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.pft_ficha_tecnica_tab.active a { color: #1B9E4B !important; } html body.woocommerce #content-area div.product .woocommerce-tabs ul.tabs li.reviews_tab.active a { color: #F59E00 !important; } /* --- Caixa de conteúdo: cartão branco arredondado abaixo das abas --- */ html body.woocommerce #content-area div.product .woocommerce-tabs .panel { background: #fff !important; border: 1px solid #E2E8F0 !important; border-radius: 10px !important; padding: 24px !important; margin-top: 10px !important; } /* --- Galeria: imagem principal e miniaturas arredondadas --- */ /* CORREÇÃO (v2.6.8): a galeria é um módulo Divi no CORPO do template, que NÃO fica sob #content-area (mesmo caso dos dropdowns na v2.6.5). Com #content-area a regra não casava e a imagem ficava quadrada. Removido o #content-area. */ html body.woocommerce div.product .woocommerce-product-gallery__image img { border-radius: 12px !important; } html body.woocommerce div.product .flex-control-thumbs li img { border-radius: 8px !important; } /* --- Selo "OFERTA!" arredondado --- */ html body.woocommerce #content-area div.product span.onsale { border-radius: 8px !important; } /* --- Botões e seletor de quantidade arredondados --- */ html body.woocommerce #content-area div.product form.cart .single_add_to_cart_button, html body.woocommerce #content-area div.product .single_add_to_cart_button { border-radius: 10px !important; } html body.woocommerce #content-area div.product form.cart .quantity .qty { border-radius: 8px !important; } /* ------------------------------------------------------------------------- PRODUTOS RELACIONADOS — cards no estilo "cartão" da home (v2.6.2) Cartão branco, borda #E2E8F0, cantos 12px, imagem arredondada e leve elevação no hover. Mesma especificidade Divi-matched das abas acima. Classes confirmadas via DevTools: section.related.products ul.products li.product > a > span.et_shop_image > img.attachment-woocommerce_thumbnail ------------------------------------------------------------------------- */ html body.woocommerce #content-area div.product section.related.products ul.products li.product { background: #fff !important; border: 1px solid #E2E8F0 !important; border-radius: 12px !important; padding: 12px !important; transition: box-shadow .15s ease, transform .15s ease !important; } html body.woocommerce #content-area div.product section.related.products ul.products li.product:hover { box-shadow: 0 6px 18px rgba(16, 76, 154, .12) !important; transform: translateY(-2px) !important; } html body.woocommerce #content-area div.product section.related.products ul.products li.product a img { border-radius: 10px !important; margin-bottom: 12px !important; } /* ------------------------------------------------------------------------- DESCRIÇÃO CURTA — "caixa de destaque" elegante (v2.6.3) Painel com fundo suave (#F5F7FA), borda fina (#E2E8F0), cantos 12px e barrinha azul de marca (#0F4C9A) à esquerda. Envolve a descrição curta do produto na coluna de compra. Classe confirmada via DevTools: .woocommerce-product-details__short-description (saída nativa do Woo). ------------------------------------------------------------------------- */ html body.woocommerce #content-area div.product .woocommerce-product-details__short-description { background: #F5F7FA !important; border: 1px solid #E2E8F0 !important; border-left: 4px solid #0F4C9A !important; border-radius: 12px !important; padding: 18px 20px !important; margin: 16px 0 !important; } /* Tira o respiro extra do último parágrafo, pra caixa ficar justa embaixo */ html body.woocommerce #content-area div.product .woocommerce-product-details__short-description > *:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* ------------------------------------------------------------------------- PRODUTO VARIÁVEL — seletores de variação (Cor / Litros) elegantes (v2.6.5) ------------------------------------------------------------------------- CORREÇÃO (v2.6.4 -> v2.6.5): o seletor anterior usava "#content-area div.product", mas na PÁGINA DE PRODUTO (template Divi) os dropdowns ficam DENTRO do módulo .et_pb_wc_add_to_cart, que NÃO está sob #content-area — por isso o CSS não casava com nada (nem aparecia no DevTools). Confirmado: o Divi já estiliza via ".et_pb_wc_add_to_cart form.cart .variations td select". Solução: mirar .et_pb_wc_add_to_cart (que existe onde o select está) e superá-lo em especificidade (html body.woocommerce div.product + .et_pb_wc_add_to_cart) com !important. Mantém também a variante #content-area para o caso de a página nativa do Woo ser usada. Paleta: azul #0F4C9A · grafite #2C3946. ------------------------------------------------------------------------- */ /* Rótulos "cor" / "Litros" */ html body.woocommerce div.product .et_pb_wc_add_to_cart form.cart table.variations th.label, html body.woocommerce div.product form.cart table.variations th.label { color: #2C3946 !important; font-weight: 600 !important; font-size: 15px !important; vertical-align: middle !important; padding-right: 14px !important; } /* O