/* ============================================================ IPC COMERCIAL — CSS PERSONALIZADO (COMPLETO) Consolidado: duplicações removidas, menu novo (opção 2) integrado. ATUALIZAÇÃO: badge do PIX dos cards REFEITA -> OPÇÃO 3 (empilhada, tudo em cinza, só o VALOR em destaque #ff5100). Parcelamento dos cards = ideia 4 (ícone de cartão + "Cartão de Crédito - 12x"). PDP: badge do PIX TAMBÉM na OPÇÃO 3 (mesmo desenho dos cards). Resto da PDP intacto. ATUALIZAÇÃO (respiro): margin-top no #product-rating pra separar "Produtos Relacionados" de "Avalie este produto" (ver bloco abaixo). ============================================================ */ /* ============================================================ PÁGINA DO PRODUTO — LAYOUT ============================================================ */ .element-product-detail .product-detail-right > div { padding: 10px 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .element-product-detail .wrapper-product-price .wrapper-btn-buy { padding-top: 10px; } .element-product-detail .product-detail-right .wrapper-product-combination .product-combination-list { margin-top: 0; margin-bottom: 0; } .element-product-detail div[class^="box-"] { padding: 10px !important; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .element-product-detail .product-detail-right > div:first-child { padding-top: 10px; } .element-product-detail .product-detail-right > div.wrapper-product-price, .element-product-detail .product-detail-right > div.wrapper-product-home { padding-bottom: 10px; margin-bottom: 10px; } .product-detail-right .box-shipping { display: inline-block !important; max-height: 1100px; overflow-y: auto; overflow-x: hidden !important; } .product-detail-right .box-shipping::-webkit-scrollbar { width: 10px; } .product-detail-right .box-shipping::-webkit-scrollbar-thumb { background-color: rgba(0,0,0, .2); border-radius: 5px; } .header-section { background: #343741; color: #ffffff; } a.link.pj-enable { color: #DF1E26; } .element-product-detail .label-stamp-wrapper .label-stamp.label-promo { background: #c9302c; color: #ffffff; } .element-product-detail .label-stamp-wrapper .label-stamp { background: #c9302c; color: #ffffff; } .element-product-detail .label-stamp-wrapper .label-stamp.label-launch { background: #c9302c; color: #ffffff; } .product-list-sidebar .product-list-item .label-promo, #product-list .product-list-item .label-promo { background: #c9302c; color: #ffffff; } #product-list .product-list-item .label-launch { background: #c9302c; color: #ffffff; } .product-detail.product-detail-right { top: 40px !important; } /* Tabela desconto progressivo */ .wrapper-progressive .table-progressive { width: 100%; } .wrapper-progressive .progressive-title { display: block; font-size: 14px; font-weight: bold; line-height: 30px; margin-bottom: 5px; text-align: center; } .wrapper-progressive { background: #efefef !important; border: 1px solid #dfdfdf !important; margin-bottom: 20px !important; padding: 5px !important; -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; border-radius: 4px !important; -webkit-background-clip: padding-box !important; -moz-background-clip: padding !important; background-clip: padding-box !important; } .wrapper-progressive .table-progressive { border-collapse: separate; border-spacing: 2px; margin: 0; } .wrapper-progressive .table-progressive th { background: #fff; padding: 5px; font-weight: bold; text-align: center; } .wrapper-progressive .table-progressive td { background: #fff; padding: 5px; text-align: center; } .element-product-detail .product-detail-right > div.product-amount { border-top: 0.666667px solid #cccccc !important; border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; } .element-product-detail .product-detail-right > div:first-of-type { border-top: 1px solid #cccccc !important; border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; } p.product-sku, p.product-ncm { display: block !important; color: #000 !important; font-size: 15px !important; } p.product-sku { text-transform: uppercase !important; } p.product-codebar, p.product-category { display: none !important; } /* ============================================================ PDP — RESPIRO ENTRE "PRODUTOS RELACIONADOS" E "AVALIE ESTE PRODUTO" ------------------------------------------------------------ Inspeção (DOM real): .element-product-related e #product-rating ficam no MESMO pai, encostados (gap 0px). O conteúdo interno do relacionados (.product-view-content) ainda extrapola ~15px a borda do próprio container (provável medida do bxSlider — ver diretriz JS 4.16), então os cards quase tocam o título "Avalie este produto". Solução: respiro por margin-top no #product-rating. Seletor por ID (especificidade alta), imune ao reset do tema e ao transbordo do vizinho. 35px = 20px de respiro VISÍVEL + 15px de compensação do transbordo. Só desktop (este é o campo de CSS do desktop; o mobile tem o seu). NÃO mexemos na altura do slider de propósito (bxSlider é frágil — 4.16). ============================================================ */ #product-rating.element-product-rating { margin-top: 35px !important; } /* ============================================================ LOADING ============================================================ */ .loading-page { background-color: rgba(255, 255, 255, 0.85) !important; background-image: none !important; } .loading-page::before { content: ''; position: fixed; top: 50%; left: 50%; width: 64px; height: 64px; margin-top: -32px; margin-left: -32px; border-radius: 50%; border: 3px solid transparent; border-top-color: #1D9E75; border-right-color: #9FE1CB; animation: ipcSpin .9s linear infinite; z-index: 1000051; } .loading-page::after { content: ''; position: fixed; top: 50%; left: 50%; width: 38px; height: 38px; margin-top: -19px; margin-left: -19px; background: url('https://ipc.tec.br/himg/uploads/img_69b81b16d10de4.56656724.png') center / contain no-repeat; z-index: 1000051; } @keyframes ipcSpin { to { transform: rotate(360deg); } } /* ============================================================ FRETE — CARDS / SKELETON / MODAL (ipc-*) ============================================================ */ #cep { font-size: 16px !important; } .ipc-table-hidden { display: none !important; } .ipc-city { font-size: 13px !important; color: #555 !important; margin-top: 10px !important; margin-bottom: 6px !important; display: flex !important; align-items: center !important; gap: 5px !important; flex-wrap: nowrap !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; clear: both !important; } @keyframes ipcPulse { 0% { background-color: #e0e0e0; } 50% { background-color: #f5f5f5; } 100% { background-color: #e0e0e0; } } .ipc-skeleton-wrap { margin-top: 8px; width: 100%; } .ipc-skeleton-card { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 6px; background: #fff; } .ipc-skeleton-left { flex: 1; padding-right: 12px; } .ipc-skeleton-line { height: 13px; border-radius: 4px; animation: ipcPulse 1.4s ease-in-out infinite; margin-bottom: 8px; } .ipc-skeleton-line:last-child { margin-bottom: 0; } .ipc-skeleton-name { width: 55%; } .ipc-skeleton-date { width: 35%; height: 11px; } .ipc-skeleton-price { width: 70px; height: 15px; border-radius: 4px; animation: ipcPulse 1.4s ease-in-out infinite; flex-shrink: 0; } .ipc-skeleton-card:nth-child(1) .ipc-skeleton-line, .ipc-skeleton-card:nth-child(1) .ipc-skeleton-price { animation-delay: 0s; } .ipc-skeleton-card:nth-child(2) .ipc-skeleton-line, .ipc-skeleton-card:nth-child(2) .ipc-skeleton-price { animation-delay: 0.15s; } .ipc-skeleton-card:nth-child(3) .ipc-skeleton-line, .ipc-skeleton-card:nth-child(3) .ipc-skeleton-price { animation-delay: 0.3s; } .ipc-cards-wrap { margin-top: 8px; width: 100%; } .ipc-card { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 6px; background: #fff; transition: background .15s; cursor: default; } .ipc-card:hover { background: #f0f4ff; } .ipc-card-left { flex: 1; min-width: 0; padding-right: 12px; } .ipc-card-name { font-size: 13.5px; color: #222; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .ipc-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; white-space: nowrap; line-height: 1.5; position: relative; cursor: default; } .ipc-badge:hover .ipc-badge-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .ipc-badge-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: #333; color: #fff; font-size: 11px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s; pointer-events: none; z-index: 999; } .ipc-badge-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #333; } .ipc-date-wrap { display: inline-block; position: relative; margin-top: 3px; } .ipc-card-date { font-size: 12px; color: #777; cursor: default; } .ipc-date-wrap:hover .ipc-tooltip { opacity: 1; visibility: visible; transform: translateY(0); } .ipc-tooltip { position: absolute; bottom: calc(100% + 6px); left: 0; background: #333; color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; z-index: 999; } .ipc-tooltip::after { content: ""; position: absolute; top: 100%; left: 12px; border: 4px solid transparent; border-top-color: #333; } .ipc-card-price { font-size: 14px; font-weight: 700; color: #1a1a1a; white-space: nowrap; } @keyframes ipcSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .ipc-toggle { margin-top: 8px; font-size: 13px; color: #1565c0; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; display: block; text-align: center; width: 100%; } .ipc-toggle:hover { color: #0d47a1; } .ipc-note { margin-top: 10px !important; margin-bottom: 0 !important; font-size: 13px !important; color: #888 !important; line-height: 1.5 !important; display: block !important; visibility: visible !important; } .ipc-carrier-info { margin-top: 10px; font-size: 13px; color: #888; display: block; } .ipc-carrier-link { color: #1565c0; text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font-size: 12px; font-family: inherit; } .ipc-carrier-link:hover { color: #0d47a1; } .ipc-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 9999; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; } .ipc-modal-overlay.open { display: flex; } .ipc-modal { background: #fff; border-radius: 8px; padding: 24px; max-width: 420px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,.18); position: relative; box-sizing: border-box; } .ipc-modal-title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin-bottom: 16px; } .ipc-modal-steps { list-style: none; padding: 0; margin: 0 0 16px 0; } .ipc-modal-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: #333; line-height: 1.5; margin-bottom: 10px; } .ipc-modal-steps li:last-child { margin-bottom: 0; } .ipc-modal-step-num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 50%; background: #1565c0; color: #fff; font-size: 11px; font-weight: 700; flex-shrink: 0; } .ipc-modal-warning { font-size: 12px; color: #888; border-top: 1px solid #eee; padding-top: 12px; margin-top: 4px; line-height: 1.5; } .ipc-modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; font-size: 20px; color: #aaa; cursor: pointer; line-height: 1; padding: 0; } .ipc-modal-close:hover { color: #333; } /* ============================================================ RODAPÉ — COPYRIGHT / LOGO ============================================================ */ #footer-main .copyright { display: block !important; background: #ffffff !important; border-top: 1px solid #e5e7eb !important; padding: 0 !important; width: 100% !important; box-sizing: border-box !important; } #footer-main .copyright .container-12 { margin: 0 auto !important; max-width: 1280px !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; } #footer-main .copyright .grid-12 { margin: 0 !important; padding: 0 !important; width: 100% !important; } #footer-main .copyright p { display: flex !important; align-items: center !important; justify-content: center !important; height: 54px !important; padding: 0 24px !important; margin: 0 auto !important; width: 100% !important; max-width: 1280px !important; font-size: 0 !important; color: transparent !important; text-transform: none !important; line-height: 1 !important; gap: 0 !important; box-sizing: border-box !important; } #footer-main .copyright p::before { content: "" !important; display: inline-block !important; height: 20px !important; width: 55px !important; min-width: 55px !important; background-image: url("https://ipc.tec.br/himg/uploads/img_693180c23f9533.75182789.png") !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; opacity: 0.85 !important; flex-shrink: 0 !important; } #footer-main .copyright p::after { content: none !important; } #footer-main .copyright p .logo-plat { display: inline-flex !important; align-items: center !important; background: none !important; height: 20px !important; width: auto !important; overflow: visible !important; text-indent: 0 !important; text-decoration: none !important; border-left: 1px solid #e5e7eb !important; margin-left: 12px !important; padding-left: 12px !important; pointer-events: none !important; } #footer-main .copyright p .logo-plat img { display: none !important; } #footer-main .copyright p .logo-plat::before { content: "2026 \00A9\00A0" !important; font-size: 12.5px !important; font-family: Roboto, Arial, sans-serif !important; font-weight: 400 !important; color: #6b7280 !important; line-height: 20px !important; } #footer-main .copyright p .logo-plat::after { content: "IPC Comercial" !important; font-size: 12.5px !important; font-family: Roboto, Arial, sans-serif !important; font-weight: 700 !important; color: #111827 !important; line-height: 20px !important; } #product-list .product-list-item .wrapper-btn-product, #product-list-sidebar .product-list-item .wrapper-btn-product { visibility: visible; opacity: 1; } /* ============================================================ FONTE POPPINS — webfont própria, nome único por peso ============================================================ */ @font-face { font-family:'Poppins'; src:url('https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2') format('woff2'); font-weight:400; font-display:swap; } @font-face { font-family:'Poppins'; src:url('https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2') format('woff2'); font-weight:500; font-display:swap; } @font-face { font-family:'Poppins'; src:url('https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2') format('woff2'); font-weight:600; font-display:swap; } @font-face { font-family:'Poppins'; src:url('https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2') format('woff2'); font-weight:700; font-display:swap; } body, button, input, select, textarea, h1, h2, h3, h4, h5, h6, .btn, .product-name, .product-name h2, .product-price, .product-cash-price { font-family:'Poppins', sans-serif !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Correção do texto pixelado nos cards (camada GPU do bxSlider) */ .bx-wrapper .bx-viewport { -webkit-transform:none !important; transform:none !important; } .bx-wrapper .bx-viewport ul li { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; } /* 1) PREÇO PRINCIPAL AZUL + NEGRITO */ .product-price .product-big-price, .product-sell-price ins, .product-sell-price span.product-price { color:#000000 !important; } #product-list .product-big-price, #product-list .product-big-price ins, #product-list .product-sell-price ins, #product-list .product-sell-price span.product-price { font-weight:700 !important; } /* 1b) NOME DO PRODUTO — POPPINS NEGRITO 15px */ #product-list .product-name h2, #product-list .product-link, .product-list-item .product-link { font-family:'Poppins', sans-serif !important; font-weight:600 !important; font-size:15px !important; line-height:1.4 !important; -webkit-font-smoothing:antialiased !important; text-rendering:optimizeLegibility !important; } /* ============================================================ 2) BADGE COLADA NA BASE DO CARD (mantém o alinhamento) A badge do PIX fica sempre presa na base do card via position:absolute. O `…-inner` reserva espaço embaixo (padding-bottom) pra ela não cobrir o conteúdo. Reserva = 72px porque o bloco da OPÇÃO 3 (empilhado) é mais alto (duas linhas: rótulo + valor grande). ============================================================ */ #product-list .product-list-item-inner, #product-list-sidebar .product-list-item-inner { position:relative !important; height:100% !important; padding-bottom:72px !important; box-sizing:border-box !important; } #product-list .product-cash-price, #product-list-sidebar .product-cash-price { position:absolute !important; left:8px !important; right:8px !important; bottom:8px !important; margin:0 !important; width:auto !important; z-index:2 !important; } /* ============================================================ 3) BADGE PIX NOS CARDS — OPÇÃO 3 (empilhada: cinza + valor laranja) Tudo em tons de cinza; só o VALOR (último do tema) ganha destaque: fonte maior em #ff5100. Layout em duas linhas: linha 1 (pequena, cinza): [ícone PIX cinza] PIX com desconto de 5% linha 2 (grande, laranja): R$ 72,48 O "5%" e o "R$ ..." continuam vindo dos do tema (dinâmicos, variam por produto). Só a frase fixa "PIX com desconto de " é reposta no ::before. Técnica: font-size:0 no

esconde os nós de texto soltos ("PIX com desconto de ", " - ", espaços); os são restaurados. Continua colada na base do card (ver bloco 2). OBS: assume que o tema imprime "PIX com desconto de X%". Se a frase mudar, ajustar o content do ::before abaixo. ============================================================ */ .product-list-item .product-cash-price { display:block !important; box-sizing:border-box !important; min-height:54px !important; padding:6px 8px !important; background:#F6F7F9 !important; /* cinza um pouco mais claro */ border:0 !important; /* remove a borda verde antiga (5A) */ border-radius:10px !important; box-shadow:0 2px 4px -2px rgba(20,22,26,.10) !important; /* sombra levíssima só embaixo */ font-size:0 !important; /* esconde os nós de texto soltos */ line-height:1.25 !important; text-align:center !important; } /* linha 1: ícone PIX cinza (background) + frase fixa reposta */ .product-list-item .product-cash-price::before { content:"PIX com desconto de " !important; font-size:11px !important; font-weight:500 !important; color:#5F5E5A !important; padding-left:16px !important; background:url("data:image/svg+xml;utf8,") no-repeat left center / 12px 12px !important; } /* "5%" (primeiro span do tema) — segue na linha 1, em cinza */ .product-list-item .product-cash-price span:first-of-type { font-size:11px !important; font-weight:500 !important; color:#5F5E5A !important; white-space:nowrap !important; } /* VALOR (último span do tema) — linha 2, grande, laranja */ .product-list-item .product-cash-price span:last-of-type { display:block !important; margin-top:1px !important; font-size:19px !important; font-weight:700 !important; color:#ff5100 !important; white-space:nowrap !important; } /* 4) TAG DE DESCONTO VERMELHA NOS CARDS */ .label-product.label-promo[style*="block"] { background:linear-gradient(135deg, #E03131, #C92A2A) !important; color:#FFFFFF !important; border:none !important; border-radius:6px !important; font-weight:700 !important; padding:0 7px 0 22px !important; position:relative !important; } .label-product.label-promo[style*="block"]::before { content:"" !important; position:absolute !important; left:6px !important; top:50% !important; transform:translateY(-50%) !important; width:12px !important; height:12px !important; background-color:#FFFFFF !important; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat !important; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat !important; } /* ============================================================ PÁGINA DO PRODUTO (PDP) ============================================================ */ .element-product-detail .product-info .product-name, .table-kit .product-info .product-name { font-family:'Poppins', sans-serif !important; font-weight:700 !important; } /* 5) BADGE PIX NA PDP — OPÇÃO 3 em UMA LINHA (desktop) Estrutura:

PIX com desconto de 5% - R$ 31,44

Texto natural numa linha só, só recolorido: tudo cinza, ícone do PIX cinza inline à esquerda e o VALOR (.desconto_avista) em laranja, um pouco maior. margin-bottom dá respiro pra linha de baixo. */ .product-price-off { display:inline-block !important; box-sizing:border-box !important; padding:8px 14px !important; background:#F6F7F9 !important; border:0 !important; border-radius:10px !important; box-shadow:0 2px 4px -2px rgba(20,22,26,.10) !important; font-size:13px !important; font-weight:500 !important; color:#5F5E5A !important; /* "PIX com desconto de" + " - " em cinza */ line-height:1.3 !important; white-space:nowrap !important; /* segura tudo numa linha só */ margin-bottom:12px !important; /* respiro maior pra linha de baixo */ } /* ícone do PIX em cinza, inline à esquerda */ .product-price-off::before { content:"" !important; display:inline-block !important; vertical-align:middle !important; width:14px !important; height:14px !important; margin:-2px 6px 0 0 !important; background:url("data:image/svg+xml;utf8,") no-repeat center / 14px 14px !important; } /* "5%" em cinza */ .product-price-off .desconto_parcela { color:#5F5E5A !important; font-weight:600 !important; } /* VALOR à vista — laranja, um pouco maior, mesma linha */ .product-price-off .desconto_avista { color:#ff5100 !important; font-weight:700 !important; font-size:16px !important; } /* 6) TAG DE DESCONTO VERMELHA NA PDP */ .label-stamp-wrapper .label-stamp.label-promo[style*="block"] { background:linear-gradient(135deg, #E03131, #C92A2A) !important; color:#FFFFFF !important; border:none !important; border-radius:6px !important; font-weight:700 !important; padding-left:24px !important; position:relative !important; } .label-stamp-wrapper .label-stamp.label-promo[style*="block"]::before { content:"" !important; position:absolute !important; left:7px !important; top:50% !important; transform:translateY(-50%) !important; width:13px !important; height:13px !important; background-color:#FFFFFF !important; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat !important; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat !important; } /* ============================================================ RODAPÉ — TIPOGRAFIA ============================================================ */ #footer-main, #footer-main *, #footer-main .info-ddd, #footer-main .info-label-whatsapp, #footer-main .info-phone, #footer-main .info-phone * { font-size:14px !important; line-height:1.6 !important; } #footer-main .menu-footer-list > li > a, #footer-main .title-footer { font-size:16px !important; font-weight:600 !important; line-height:1.8 !important; } /* ============================================================ BUSCA (cabeçalho) — campo mais alto + botão preto proporcional ============================================================ */ #header-main .element-search .search-inner{ position:relative !important; } #header-main .element-search .search-inner .search-field{ border-radius:10px !important; padding:13px 60px 13px 16px !important; line-height:20px !important; font-size:15px !important; } #header-main .element-search .search-inner .btn{ background:#15161A !important; border-radius:0 10px 10px 0 !important; padding:0 !important; width:50px !important; top:0 !important; right:0 !important; bottom:0 !important; height:auto !important; display:flex !important; align-items:center !important; justify-content:center !important; } #header-main .element-search .search-inner .btn span[class^="icon"]{ background:#fff !important; width:18px !important; height:18px !important; } /* ============================================================ FAIXA DE TOPO (header-1) — preta, ícones amarelos, uma linha ============================================================ */ #header-main .header-1{ background:#15161A !important; color:#D7D9DE !important; font-size:14px !important; padding-top:9px !important; padding-bottom:9px !important; } #header-main .header-1 a{ color:#D7D9DE !important; } #header-main .header-1 a:hover{ color:#fff !important; } /* remove o texto "Atendimento" e o link "Fale Conosco" */ #header-main .header-1 .info-title{ display:none !important; } #header-main .header-1 li:has(> a[href*="/contato"]){ display:none !important; } #header-main .header-1 .container-12{ display:flex !important; align-items:center !important; justify-content:space-between !important; } #header-main .header-1 .container-12 > .grid-6{ width:auto !important; float:none !important; margin:0 !important; } #header-main .header-1 .element-info .info-inner{ white-space:nowrap !important; } /* ícone de telefone (amarelo) antes dos números */ #header-main .header-1 .info-phone > a::before{ font-family:'FontAwesomeSolid'; content:"\f095"; color:#FFD700 !important; margin-right:6px; font-size:12px; } /* WhatsApp: só ícone amarelo + texto "WhatsApp" (esconde o número) */ #header-main .header-1 .info-phone.info-whatsapp > a{ font-size:0 !important; } #header-main .header-1 .info-phone.info-whatsapp .info-ddd, #header-main .header-1 .info-phone.info-whatsapp .info-label-whatsapp{ display:none !important; } #header-main .header-1 .info-phone.info-whatsapp > a::before{ font-family:'FontAwesomeBrands'; content:"\f232"; color:#FFD700 !important; font-size:13px !important; margin-right:5px; } #header-main .header-1 .info-phone.info-whatsapp > a::after{ content:"WhatsApp" !important; font-size:14px !important; color:#D7D9DE !important; } /* ============================================================ MENU PRINCIPAL — OPÇÃO 2: barra escura + pílula amarela na ativa + mega-menu escuro (só desktop). Substitui o menu antigo (P1/MEGA). Estrutura: .menu-main-list > li > a (topo) ; > li > ul (painel) > li > a (TÍTULO da categoria) ; > li > ul > li > a (itens) ============================================================ */ /* fonte dos links do menu */ #menu-main .menu-main-list a { font-family:'Poppins', sans-serif !important; } /* barra clara — com sombra sutil embaixo pra separar do conteúdo */ #nav-main .element-menu-main{ background:#FFFFFF !important; border-bottom:1px solid #E7E8EC !important; box-shadow:0 5px 10px -5px rgba(20,22,26,.12) !important; position:relative !important; z-index:20 !important; } /* fit: 8 itens em uma linha, distribuídos */ #nav-main .element-menu-main #menu-main .menu-main-list{ display:flex !important; justify-content:space-between !important; align-items:center !important; width:100% !important; flex-wrap:nowrap !important; } /* itens — base (pílula) */ #nav-main .element-menu-main #menu-main .menu-main-list > li > a{ color:#3A3D44 !important; font-weight:500 !important; padding:8px 12px !important; border:0 !important; border-radius:8px !important; letter-spacing:0 !important; white-space:nowrap !important; transition:.15s !important; } /* hover — pílula cinza sutil */ #nav-main .element-menu-main #menu-main .menu-main-list > li:hover > a{ background:#F1F2F5 !important; color:#15161A !important; } /* (destaque fixo da categoria ativa removido — usamos só o hover, pra ficar consistente em todas as páginas: produtos, subcategorias e busca não carregam a classe da categoria no body, então a pílula fixa só aparecia em parte do site) */ /* ----- MEGA-MENU ESCURO (só desktop) ----- */ @media (min-width: 992px) { /* item da barra: respiro pra pílula + âncora do dropdown (hover contínuo) */ #nav-main #menu-main .menu-main-list > li { position:relative !important; padding-top:8px !important; padding-bottom:8px !important; } /* DROPDOWN CLARO — mesmo layout robusto do tema (sem full-width); só as cores mudam (escuro → claro) */ #nav-main #menu-main .menu-main-list > li > ul { background:#FFFFFF !important; color:#4B5563 !important; border:1px solid #E7E8EC !important; border-top:3px solid #FFD700 !important; box-shadow:0 16px 30px -10px rgba(20,22,26,.18) !important; min-width:280px !important; padding:18px 22px !important; } /* título da subcategoria */ #nav-main #menu-main .menu-main-list > li > ul > li > a { color:#15161A !important; font-weight:700 !important; text-transform:uppercase !important; font-size:12.5px !important; letter-spacing:.4px !important; } /* itens / diâmetros */ #nav-main #menu-main .menu-main-list > li > ul > li > ul > li > a { color:#4B5563 !important; } /* hover dos links do dropdown */ #nav-main #menu-main .menu-main-list > li > ul li a:hover { color:#C99A00 !important; text-decoration:none !important; } } /* ============================================================ BREADCRUMB DA PÁGINA DE PRODUTO (PDP) — DESKTOP (SUBSTITUI o bloco de breadcrumb anterior) Faz 3 coisas, todas SÓ na página de produto (body.pagina-produto), sem afetar a página de categoria: 1. Esconde o último item (nome completo do produto) — já está no H1. 2. Esconde o primeiro item ("Home"). 3. Troca o separador "/" por uma seta sutil "›". Tudo via display:none / override de CSS: os
  • continuam no HTML, então o breadcrumb estruturado Schema.org (SEO) fica intacto. Resultado visível na PDP: Acessórios › Manipulos › Zamak ============================================================ */ /* 1) Esconde o nome do produto (último item, marcado com .active) */ body.pagina-produto .breadcrumb-list li.active { display: none; } /* 1b) O tema só remove o separador "/" do :last-child — que agora está escondido. Sem isto, sobraria um "/" solto depois do "Zamak". nth-last-child(2) = o item visível logo antes do produto. */ body.pagina-produto .element-breadcrumb .breadcrumb ul.breadcrumb-list li:nth-last-child(2)::after { display: none; } /* 2) Esconde o "Home" (primeiro item). O separador dele é um ::after, então some junto — não sobra "/" no começo. */ body.pagina-produto .breadcrumb-list li:first-child { display: none; } /* 3) Troca o separador "/" pela seta sutil "›". A regra do tema tem especificidade alta, por isso repetimos o seletor completo + o escopo body.pagina-produto para vencer. */ body.pagina-produto .element-breadcrumb .breadcrumb ul.breadcrumb-list li::after { content: "›"; color: #B4B2A9; /* cinza sutil, parecido com o mock */ font-family: inherit; padding: 0 7px; } /* ============================================================ BREADCRUMB DA PÁGINA DE CATEGORIA — DESKTOP (bloco novo — vai JUNTO com o bloco da PDP, não substitui) Faz 2 coisas, todas SÓ na página de categoria (body.pagina-categoria), sem afetar a página de produto: 1. Esconde o último item (nome da categoria) — já está no H1 logo abaixo. 2. Troca o separador "/" pela seta "›", em tom claro pra ler bem sobre a faixa cinza escura. O "Home" é mantido de propósito (sem ele, sobraria um breadcrumb de uma palavra só). display:none mantém o
  • no HTML → SEO intacto. Resultado visível na categoria: Home › Acessórios (+ H1 "Manipulos") ============================================================ */ /* 1) Esconde o nome da categoria (último item, marcado com .active) */ body.pagina-categoria .breadcrumb-list li.active { display: none; } /* 1b) O tema só tira o separador do :last-child (agora escondido). Sem isto sobraria um "›" solto depois de "Acessórios". nth-last-child(2) = o item visível logo antes da categoria. */ body.pagina-categoria .element-breadcrumb .breadcrumb ul.breadcrumb-list li:nth-last-child(2)::after { display: none; } /* 2) Troca o separador "/" pela seta "›". Cor clara/discreta porque aqui o fundo é a faixa cinza escura. */ body.pagina-categoria .element-breadcrumb .breadcrumb ul.breadcrumb-list li::after { content: "›"; color: #6E727B; /* cinza claro, visível no fundo escuro */ font-family: inherit; padding: 0 7px; } /* ============================================================ PARCELAMENTO NOS CARDS — IDEIA 4 + texto reescrito Troca "Cartão de Crédito em até 12x" -> "Cartão de Crédito - 12x" SÓ nos cards (escopo .product-list-item). A PDP não é afetada. Técnica: font-size:0 esconde o texto original do tema; o prefixo novo entra via ::before; o "12x" (no ) é restaurado. ============================================================ */ .product-list-item .product-parcelled-price { display: block !important; margin: 2px 0 0 !important; padding: 0 0 0 19px !important; /* espaço pro ícone à esquerda */ font-size: 0 !important; /* esconde o texto original */ line-height: 1.4 !important; color: #5F5E5A !important; /* cinza neutro */ background: url("data:image/svg+xml;utf8,") no-repeat left center / 14px 14px !important; } /* prefixo novo */ .product-list-item .product-parcelled-price::before { content: "Cartão de Crédito - " !important; font-size: 11px !important; font-weight: 500 !important; color: #5F5E5A !important; } /* "12x" restaurado e destacado */ .product-list-item .product-parcelled-price span { font-size: 11px !important; font-weight: 700 !important; color: #3A3D44 !important; } /* ===================================================================== IPC · LISTAS e TABELAS no conteúdo da descrição Critério seguro: ul/ol/li/table SEM classe (= escritos no editor). Onde: campo de CSS PERSONALIZADO. Contêiner: .product-view-content. Listas: estilo "contorno vazado". Tabela: estilo D + hover (amarelo creme) + mobile com rolagem. ===================================================================== */ /* ---------- Contêineres editoriais ---------- */ .product-view-content ul:not([class]):has(> li:not([class])), .product-view-content ol:not([class]):has(> li:not([class])){ list-style:none !important; padding-left:0 !important; margin:0 0 24px !important; } .product-view-content ol:not([class]):has(> li:not([class])){ counter-reset:ipc-ol; } /* ---------- LISTAS comuns (ul): bullet de contorno (vazado) ---------- */ .product-view-content ul:not([class]) > li:not([class]){ position:relative; padding:0 0 10px 22px; margin:0; } .product-view-content ul:not([class]) > li:not([class]):last-child{ padding-bottom:0; } .product-view-content ul:not([class]) > li:not([class])::before{ content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%; border:2px solid #C99A00; box-sizing:border-box; } /* ---------- LISTAS numeradas (ol): número em círculo de contorno ---------- */ .product-view-content ol:not([class]) > li:not([class]){ position:relative; padding:0 0 10px 34px; margin:0; counter-increment:ipc-ol; } .product-view-content ol:not([class]) > li:not([class]):last-child{ padding-bottom:0; } .product-view-content ol:not([class]) > li:not([class])::before{ content:counter(ipc-ol); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; border:1.5px solid #15161A; box-sizing:border-box; color:#15161A; font-weight:600; font-size:12px; display:flex; align-items:center; justify-content:center; } /* ---------- TABELAS (estilo D) ---------- */ .product-view-content table:not([class]){ width:100% !important; border-collapse:separate; border-spacing:0; font-size:14px; margin:0 0 24px; border:1px solid #E7E8EC; border-radius:12px; overflow:hidden; } .product-view-content table:not([class]) th{ background:#F8F8FA; color:#15161A; text-align:center; font-size:12px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; padding:12px 16px !important; border-bottom:2px solid #FFD700 !important; border-right:1px solid #E0D49A !important; } .product-view-content table:not([class]) th:last-child{ border-right:0 !important; } .product-view-content table:not([class]) td{ padding:12px 16px !important; color:#3A3D44; border-right:1px solid #F0F1F4 !important; border-bottom:1px solid #F0F1F4 !important; transition:background .12s; } .product-view-content table:not([class]) td:last-child{ border-right:0 !important; } .product-view-content table:not([class]) tr:last-child td{ border-bottom:0 !important; } .product-view-content table:not([class]) td:first-child{ font-weight:500; color:#15161A; background:#FCFBF4; } .product-view-content table:not([class]) td.num{ text-align:right; font-variant-numeric:tabular-nums; } /* Hover na linha (amarelo creme) — só desktop, hover não existe no toque */ .product-view-content table:not([class]) tr:hover td{ background:#FFF6D6; } .product-view-content table:not([class]) tr:hover td:first-child{ background:#FBEFB8; } /* ---------- Mobile: larga ROLA, estreita fica justa ---------- */ @media (max-width:600px){ .product-view-content table:not([class]){ display:block; width:fit-content; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .product-view-content table:not([class]) th, .product-view-content table:not([class]) td{ white-space:nowrap; padding:10px 12px !important; } } /* ===================================================================== IPC · PDP (desktop) — RESPIRO na coluna de info do produto --------------------------------------------------------------------- PROBLEMA: nome, SKU, NCM, "Quantidade Disponivel", "Prazo de Producao" e a ETIQUETA de desconto (.label-stamp-wrapper) vinham todos com margin 0 (confirmado por diagnostico ao vivo: p.product-sku mt=0 mb=0), entao grudavam uns nos outros e no texto. A regra existente (linha ~80) so deu display:block + 15px ao SKU/NCM, sem margem. ESCOPO REAL (confirmado pelo DOM renderizado, NAO pelo HTML do servidor): o SKU mora em .product-detail-left > .product-detail-inner.right > .product-info -> entao ancoramos em .element-product-detail .product-info (pega o produto principal; NAO pega os cards de relacionados, onde o "SKU" e um dentro do nome, nao um

    ). SO DESKTOP: prefixo body:not(.layout-mobile). ===================================================================== */ body:not(.layout-mobile) .element-product-detail .product-info .product-name{ margin-bottom:12px !important; } body:not(.layout-mobile) .element-product-detail .product-info p.product-sku, body:not(.layout-mobile) .element-product-detail .product-info p.product-ncm, body:not(.layout-mobile) .element-product-detail .product-info p.product-aval-amount, body:not(.layout-mobile) .element-product-detail .product-info p.product-production-time{ margin:7px 0 !important; line-height:1.5 !important; } /* etiqueta de desconto (tarja "% OFF") — descola do texto acima e do que vem depois */ body:not(.layout-mobile) .element-product-detail .product-info .label-stamp-wrapper{ margin:14px 0 !important; } /* bloco de tags do produto (quando existir) — respiro acima */ body:not(.layout-mobile) .element-product-tags{ margin-top:24px !important; } /* ===================================================================== IPC · CONTEUDO EDITORIAL (desktop) — RESPIRO entre titulos e textos --------------------------------------------------------------------- PROBLEMA: no conteudo da descricao (escrito no editor) os H2/H3 ficam colados no texto / lista / tabela / imagem seguinte. O tema da Simplo7 so define margem ACIMA dos titulos (regra "* + h2") e margem nos

    , mas NAO da uma margem ABAIXO consistente aos titulos; e o bloco de LISTAS/TABELAS (acima) zera o margin-top de ul/ol/table. Resultado: o espaco passa a depender do
      que por acaso foi digitado no editor (as vezes existe, as vezes nao) -> ritmo irregular, layout torto. SOLUCAO: um ritmo vertical UNICO e previsivel para o conteudo editorial. ESCOPO: so os conteineres editoriais (.element-product-info e .element-product-description). NAO afeta cards de "Produtos Relacionados" nem "Avaliacoes" (que ficam em .element-product-related / #product-rating). SO DESKTOP: prefixo body:not(.layout-mobile) (layout-mobile = marca do tema mobile). O mobile e tratado em outro processo. Sem !important: a especificidade ja vence o tema (que nao usa !important nessas margens). Sem :has() / sem colchetes novos alem do :not([class]). ===================================================================== */ /* Titulos: separacao CLARA acima + respiro ABAIXO (para nao colar no paragrafo / lista / tabela / imagem que vem logo depois). */ body:not(.layout-mobile) .element-product-info .product-view-content h2:not([class]), body:not(.layout-mobile) .element-product-description .product-view-content h2:not([class]){ margin:34px 0 14px; } body:not(.layout-mobile) .element-product-info .product-view-content h3:not([class]), body:not(.layout-mobile) .element-product-description .product-view-content h3:not([class]){ margin:30px 0 12px; } body:not(.layout-mobile) .element-product-info .product-view-content h4:not([class]), body:not(.layout-mobile) .element-product-info .product-view-content h5:not([class]), body:not(.layout-mobile) .element-product-info .product-view-content h6:not([class]), body:not(.layout-mobile) .element-product-description .product-view-content h4:not([class]), body:not(.layout-mobile) .element-product-description .product-view-content h5:not([class]), body:not(.layout-mobile) .element-product-description .product-view-content h6:not([class]){ margin:24px 0 10px; } /* Paragrafos: so margem ABAIXO (margem de cima zerada para nao dobrar o espaco logo apos um titulo e manter o ritmo uniforme entre paragrafos). */ body:not(.layout-mobile) .element-product-info .product-view-content p:not([class]), body:not(.layout-mobile) .element-product-description .product-view-content p:not([class]){ margin:0 0 16px; } /* ===================================================================== IPC · CHECKOUT (desktop) — destaque do link "Pessoa Juridica" Transforma o link nativo (texto vermelho) numa caixa amarela (cara da marca), SEM tocar no comportamento dele: o tema continua cuidando do toggle (abre/fecha o #pj-box). Obs.: so CSS nao muda o TEXTO nem injeta icone; o texto segue o nativo ("Incluir dados de Pessoa Juridica" / "...Fisica"). ===================================================================== */ a.pj-enable{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; box-sizing:border-box !important; margin:10px 0 !important; padding:13px 16px !important; background:#FFD700 !important; color:#15161A !important; font-weight:600 !important; font-size:14px !important; line-height:1.2 !important; text-align:center !important; text-decoration:none !important; border:1px solid #E6C200 !important; border-radius:8px !important; cursor:pointer !important; transition:filter .15s !important; } a.pj-enable:hover{ filter:brightness(.97) !important; color:#15161A !important; text-decoration:none !important; } /* ============================================================ CARDS DAS PÁGINAS DE PRODUTO — IPC Cole no painel de CSS do tema (desktop E mobile). Os dois cards usam a MESMA moldura e o MESMO corpo de texto: moldura: fundo #F5F5F5 · borda 1px #E7E8EC · cantos 10px · padding 20/24 texto: 18px · cor #15161A · line-height 1.7 Diferença proposital: só o conteúdo (o CTA tem o botão amarelo). ============================================================ */ /* ---------- Card "Falar com a equipe" (CTA / Fale conosco) ---------- */ .product-view-content .cta-box{ background:#F5F5F5; /* fundo cinza-claro */ border:1px solid #E7E8EC; /* contorno suave */ border-radius:10px; /* cantos arredondados */ padding:20px 24px; /* respiro interno */ margin:0 0 8px; } .product-view-content .cta-box .cta-tit{ font-size:18px; font-weight:600; color:#15161A; margin:0 0 4px; /* título da chamada */ } .product-view-content .cta-box .cta-sub{ font-size:18px; /* era 14px — igual ao texto do card Confiabilidade */ color:#15161A; /* era #6E727B (cinza) — agora o mesmo preto */ line-height:1.7; /* era 1.6 */ margin:0 0 16px; } .product-view-content a.cta-ipc{ display:inline-block; background:#FFD700; color:#15161A; /* botão amarelo IPC */ font-size:18px; font-weight:600; line-height:1.4; padding:14px 28px; border-radius:8px; text-decoration:none; } .product-view-content a.cta-ipc:hover{ background:#F2CC00; /* amarelo mais forte no hover */ } /* ---------- Card "Confiabilidade e autenticidade IPC" ---------- */ /* Mesma moldura do CTA. O texto do corpo (18px / #15161A) já vem embutido na descrição de cada produto; aqui só cuidamos da caixa. */ .trust-box{ background:#F5F5F5; /* mesmo fundo do CTA */ border:1px solid #E7E8EC; /* mesmo contorno do CTA */ border-radius:10px; /* mesmos cantos do CTA */ padding:20px 24px; /* mesmo respiro do CTA */ margin:18px 0; } .trust-box .trust-tit{ font-weight:bold; font-size:20px; line-height:1.4; margin:0 0 10px; /* título do card */ } .trust-box p{ margin:0 0 8px; /* espaço entre parágrafos */ } .trust-box p:last-child{ margin-bottom:0; /* tira a folga do último parágrafo */ }