/* ============================================================ PREMIUM ECOLOGICA BOARD 4 - RC3 FINAL Somente acabamento visual. NÃO altera: - galeria - Fotorama - minicart - RequireJS - frete JS - configuração do produto ============================================================ */ body.catalog-product-view { --pe3-green: #148c49; --pe3-dark: #064b30; --pe3-muted: #697970; --pe3-border: #dae6df; --pe3-soft: #f7faf8; --pe3-soft-green: #edf8f1; } /* ============================================================ DESKTOP ============================================================ */ @media (min-width: 1024px) { /* * Hero um pouco mais próximo do header. */ body.catalog-product-view main.page-main { padding-top: 14px !important; } /* * Card comercial: * último ajuste de densidade. */ body.catalog-product-view .column.main > .product-info-main { padding: 18px 20px 16px !important; border-radius: 14px !important; } /* * Título. */ body.catalog-product-view .product-info-main .page-title .base { font-size: 25px !important; line-height: 1.07 !important; font-weight: 700 !important; letter-spacing: -.3px !important; } /* * Preço. */ body.catalog-product-view .product-info-main .price-box .price { font-size: 35px !important; line-height: 1 !important; } /* * Parcelamento mais parecido com informação textual * do mockup. */ body.catalog-product-view .product-info-main .mm-price-parcels-grid { color: #58685f !important; font-size: 10.5px !important; line-height: 1.22 !important; } /* * Pix pequeno. */ body.catalog-product-view .product-info-main #preco-a-vista-mm { margin-top: 4px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body.catalog-product-view .product-info-main #preco-a-vista-mm p { min-height: 27px !important; padding: 4px 8px !important; font-size: 10px !important; } /* * Estoque ganha peso de conversão. */ body.catalog-product-view .product-info-main .product-info-stock-sku { min-height: 47px !important; margin-top: 6px !important; padding: 7px 10px !important; background: var(--pe3-soft) !important; border: 1px solid var(--pe3-border) !important; border-radius: 8px !important; } body.catalog-product-view .product-info-main .stock.available { color: var(--pe3-dark) !important; font-weight: 700 !important; } /* * Frete compacto. */ body.catalog-product-view .product-info-main #simularFrete { margin: 8px 0 6px !important; padding: 9px !important; border-radius: 8px !important; } /* * CTA mais próximo do mockup. */ body.catalog-product-view .product-info-main #product-addtocart-button { min-height: 44px !important; height: 44px !important; border-radius: 6px !important; background: var(--pe3-green) !important; font-size: 12px !important; font-weight: 700 !important; } body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { min-height: 41px !important; border-radius: 6px !important; } /* * Faixa de confiança: * mais próxima do Board, sem aumentar muito a altura. */ body.catalog-product-view .premium-board4-confidence { margin-top: 10px !important; } body.catalog-product-view .premium-board4-confidence__primary { gap: 10px !important; } body.catalog-product-view .premium-board4-confidence__card { min-height: 98px !important; padding: 14px !important; gap: 12px !important; border-radius: 11px !important; } body.catalog-product-view .premium-board4-confidence__icon { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; font-size: 19px !important; } body.catalog-product-view .premium-board4-confidence__card strong { margin: 2px 0 4px !important; color: var(--pe3-dark) !important; font-size: 12.5px !important; line-height: 1.2 !important; } body.catalog-product-view .premium-board4-confidence__card span { color: var(--pe3-muted) !important; font-size: 10.2px !important; line-height: 1.34 !important; } body.catalog-product-view .premium-board4-confidence__secondary { margin-top: 8px !important; border-radius: 10px !important; } body.catalog-product-view .premium-board4-confidence__benefit { min-height: 49px !important; font-size: 11.5px !important; } /* * Aproxima o conteúdo inferior da faixa de confiança. */ body.catalog-product-view .product.info.detailed { margin-top: 30px !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { /* * Ordem final da decisão: * * título * chips * resumo * preço * estoque * voltagem * CTA * frete */ body.catalog-product-view .product-info-main .product-info-price { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 0 !important; margin: 3px 0 0 !important; } body.catalog-product-view .product-info-main .price-box { order: 1 !important; width: 100% !important; } body.catalog-product-view .product-info-main .product-info-stock-sku { order: 2 !important; width: 100% !important; min-height: 43px !important; margin: 6px 0 4px !important; padding: 6px 8px !important; box-sizing: border-box !important; background: var(--pe3-soft) !important; border: 1px solid var(--pe3-border) !important; border-radius: 7px !important; } /* * Estoque mobile mais parecido com o mockup. */ body.catalog-product-view .product-info-main .stock.available { position: relative !important; margin: 0 !important; padding-left: 27px !important; color: var(--pe3-dark) !important; font-size: 9px !important; font-weight: 700 !important; } body.catalog-product-view .product-info-main .stock.available::before { content: "✓"; position: absolute !important; left: 0 !important; top: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin-top: -10px !important; border-radius: 50% !important; background: var(--pe3-green) !important; color: #fff !important; } body.catalog-product-view .product-info-main .stock.available::after { content: "Envio imediato para todo o Brasil"; display: block !important; margin-top: 2px !important; color: var(--pe3-muted) !important; font-size: 8px !important; line-height: 1.15 !important; font-weight: 400 !important; text-transform: none !important; } body.catalog-product-view .product-info-main .product.attribute.sku { margin: 0 !important; font-size: 8px !important; } /* * Preço acima do estoque. */ body.catalog-product-view .product-info-main .price-box .price { font-size: 30px !important; line-height: 1 !important; } body.catalog-product-view .product-info-main .mm-price-parcels-grid { margin-top: 2px !important; font-size: 9px !important; } /* * Pix permanece dentro do bloco de preço. */ body.catalog-product-view .product-info-main #preco-a-vista-mm { margin-top: 3px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body.catalog-product-view .product-info-main #preco-a-vista-mm p { min-height: 27px !important; padding: 4px 7px !important; } /* * Voltagem compacta. */ body.catalog-product-view .product-info-main .product-options-wrapper { margin-top: 5px !important; } body.catalog-product-view .product-info-main .premium-pdp-option-pills { gap: 5px !important; } body.catalog-product-view .product-info-main .premium-pdp-option-pill { min-height: 37px !important; font-size: 10px !important; } /* * CTA. */ body.catalog-product-view .product-info-main #product-addtocart-button { min-height: 41px !important; height: 41px !important; border-radius: 6px !important; font-size: 11px !important; } body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { min-height: 39px !important; border-radius: 6px !important; } /* * Frete vira bloco secundário abaixo da compra. */ body.catalog-product-view .product-info-main #simularFrete { margin: 7px 0 5px !important; padding: 7px !important; background: var(--pe3-soft) !important; border: 1px solid var(--pe3-border) !important; border-radius: 7px !important; } /* * Sem trust duplicado no mobile. */ body.catalog-product-view .premium-board4-confidence, body.catalog-product-view .product-info-main > .premium-board4-trust { display: none !important; } /* * Menos vazio antes da descrição. */ body.catalog-product-view .product.info.detailed { margin-top: 17px !important; } } /* ============================================================ BARRA DE BENEFICIOS DUPLICADA DO HEADER Selector identificado automaticamente. ============================================================ */ @media (min-width: 1024px) { body.catalog-product-view div.premium-board-trust { display: none !important; } } /* ============================================================ PREMIUM ECOLOGICA BOARD 4 - RC3.1 FINAL ALIGNMENT Último hotfix visual da PDP. Corrige exclusivamente: - alinhamento Qtd x CTA - alinhamento CTA x WhatsApp - hierarquia visual do estoque - centralização dos ícones de confiança Nenhuma alteração funcional. ============================================================ */ /* ============================================================ ESTOQUE - DESKTOP ============================================================ */ @media (min-width: 768px) { body.catalog-product-view .product-info-main .product-info-stock-sku { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 48px !important; padding: 7px 10px !important; } body.catalog-product-view .product-info-main .stock.available { position: relative !important; display: block !important; min-height: 30px !important; margin: 0 !important; padding: 2px 0 0 31px !important; color: #075f35 !important; font-size: 10px !important; line-height: 1.08 !important; font-weight: 700 !important; background: transparent !important; border: 0 !important; } body.catalog-product-view .product-info-main .stock.available::before { content: "✓"; position: absolute !important; left: 0 !important; top: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 23px !important; height: 23px !important; margin-top: -11.5px !important; border-radius: 50% !important; background: #148c49 !important; color: #fff !important; font-size: 12px !important; line-height: 1 !important; } body.catalog-product-view .product-info-main .stock.available::after { content: "Envio imediato para todo o Brasil"; position: static !important; display: block !important; margin: 3px 0 0 !important; padding: 0 !important; color: #6a7971 !important; font-size: 8.5px !important; line-height: 1.12 !important; font-weight: 400 !important; text-transform: none !important; } } /* ============================================================ QTD + CTA - DESKTOP ============================================================ */ @media (min-width: 1024px) { body.catalog-product-view .product-info-main .box-tocart .fieldset { display: grid !important; grid-template-columns: 68px minmax(0, 1fr) !important; gap: 8px !important; align-items: start !important; width: 100% !important; margin: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty { display: block !important; width: 68px !important; margin: 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty > .label { display: block !important; min-height: 17px !important; margin: 0 0 5px !important; padding: 0 !important; line-height: 17px !important; } body.catalog-product-view .product-info-main .box-tocart #qty { display: block !important; width: 68px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; box-sizing: border-box !important; } /* * O actions contém o CTA e nosso WhatsApp. * O padding-top corresponde ao label Qtd + espaço. */ body.catalog-product-view .product-info-main .box-tocart .actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 5px !important; width: 100% !important; margin: 0 !important; padding: 22px 0 0 !important; box-sizing: border-box !important; } html body.catalog-product-view .product-info-main #product-addtocart-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 16px !important; border-radius: 7px !important; box-sizing: border-box !important; } /* * CORREÇÃO PRINCIPAL: * ele já está dentro da coluna actions. * Portanto não pode receber outro margin-left. */ html body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; height: 41px !important; min-height: 41px !important; margin: 0 !important; padding: 0 14px !important; border-radius: 7px !important; box-sizing: border-box !important; } } /* ============================================================ QTD + CTA - MOBILE ============================================================ */ @media (max-width: 767px) { body.catalog-product-view .product-info-main .box-tocart .fieldset { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; gap: 5px !important; align-items: start !important; width: 100% !important; margin: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty { display: block !important; width: 56px !important; margin: 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty > .label { display: block !important; min-height: 16px !important; margin: 0 0 4px !important; line-height: 16px !important; } body.catalog-product-view .product-info-main .box-tocart #qty { width: 56px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 4px !important; width: 100% !important; margin: 0 !important; padding: 20px 0 0 !important; box-sizing: border-box !important; } html body.catalog-product-view .product-info-main #product-addtocart-button { width: 100% !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; border-radius: 7px !important; } html body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { width: 100% !important; height: 39px !important; min-height: 39px !important; margin: 0 !important; border-radius: 7px !important; } /* * SKU não é informação crítica para decisão * na pequena primeira dobra mobile. */ body.catalog-product-view .product-info-main .product.attribute.sku { display: none !important; } } /* ============================================================ ÍCONES DA FAIXA DE CONFIANÇA ============================================================ */ @media (min-width: 768px) { body.catalog-product-view .premium-board4-confidence__icon { display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; } body.catalog-product-view .premium-board4-confidence__icon i { position: static !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #148c49 !important; font-size: 18px !important; line-height: 1 !important; opacity: 1 !important; transform: none !important; } body.catalog-product-view .premium-board4-confidence__icon i::before { position: static !important; margin: 0 !important; font-size: inherit !important; line-height: inherit !important; transform: none !important; } } /* ============================================================ PREMIUM ECOLOGICA BOARD 4 - RC3.2 FINAL CTA LAYOUT Desktop: Voltagem + Qtd na mesma linha. CTA e WhatsApp full width abaixo. Mobile: Mantém Qtd + CTA. Aumenta distância vertical entre os CTAs. CSS ONLY. ============================================================ */ /* ============================================================ DESKTOP - VOLTAGEM + QUANTIDADE ============================================================ */ @media (min-width: 1024px) { /* * O formulário passa a organizar somente a geometria * visual. Nenhum elemento é removido ou movido no DOM. */ body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) { display: grid !important; grid-template-columns: minmax(0, 1fr) 82px !important; grid-template-areas: "options qty" "actions actions" !important; column-gap: 16px !important; row-gap: 10px !important; align-items: start !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * Voltagem ocupa a coluna principal. */ body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) > .product-options-wrapper { grid-area: options !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * Mantemos o DOM intacto e apenas removemos * caixas intermediárias do cálculo visual da grid. */ body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) > .product-options-bottom, body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) > .product-options-bottom > .box-tocart, body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) > .product-options-bottom > .box-tocart > .fieldset { display: contents !important; } /* * Quantidade vai para o espaço livre * ao lado da voltagem. */ body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) .field.qty { grid-area: qty !important; display: block !important; align-self: start !important; width: 82px !important; margin: 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) .field.qty > .label { display: block !important; min-height: 18px !important; margin: 0 0 6px !important; padding: 0 !important; font-size: 11px !important; line-height: 18px !important; font-weight: 700 !important; } body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) #qty { display: block !important; width: 82px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 8px !important; box-sizing: border-box !important; text-align: center !important; border-radius: 7px !important; } /* * CTAs ficam abaixo da linha Voltagem + Qtd * e ocupam toda a largura. */ body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) .box-tocart .actions { grid-area: actions !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } html body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) #product-addtocart-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 18px !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 12px !important; font-weight: 700 !important; } html body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) .premium-board4-whatsapp-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 41px !important; min-height: 41px !important; margin: 0 !important; padding: 0 16px !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 11px !important; } } /* ============================================================ MOBILE - NÃO ESPREMER VOLTAGEM ============================================================ */ @media (max-width: 767px) { /* * No mobile a largura não comporta: * Voltagem + Voltagem + Qtd com boa área de toque. * * Mantemos Qtd + CTA na segunda linha. */ body.catalog-product-view .product-info-main .box-tocart { margin-top: 7px !important; } body.catalog-product-view .product-info-main .box-tocart .actions { gap: 8px !important; } html body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { margin: 0 !important; } } /* ============================================================ TABLET / INTERMEDIÁRIO Mantém o comportamento seguro atual. ============================================================ */ @media (min-width: 768px) and (max-width: 1023px) { body.catalog-product-view .product-info-main .box-tocart .actions { gap: 8px !important; } html body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { margin-top: 0 !important; } } /* ============================================================ PREMIUM ECOLOGICA BOARD 4 - RC3.3 FINAL HERO POLISH Somente desktop. - parcelamento + Pix na mesma linha - compactacao final do card comercial - confiança mais proxima do hero - centralizacao robusta dos icones Nenhuma alteracao funcional. ============================================================ */ @media (min-width: 1024px) { /* ======================================================== 1. PARCELAMENTO + PIX NA MESMA LINHA ======================================================== */ body.catalog-product-view .product-info-main .mm-price-parcels-grid { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: none !important; margin: 5px 9px 0 0 !important; padding: 0 !important; vertical-align: middle !important; white-space: nowrap !important; font-size: 10px !important; line-height: 25px !important; } body.catalog-product-view .product-info-main #preco-a-vista-mm { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: none !important; min-height: 0 !important; margin: 5px 0 0 !important; padding: 0 !important; vertical-align: middle !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.catalog-product-view .product-info-main #preco-a-vista-mm p { display: inline-flex !important; align-items: center !important; width: auto !important; min-height: 25px !important; height: 25px !important; margin: 0 !important; padding: 3px 7px !important; box-sizing: border-box !important; white-space: nowrap !important; font-size: 9.5px !important; line-height: 1 !important; } /* ======================================================== 2. COMPACTACAO VERTICAL FINAL Sem alterar ordem nem DOM. ======================================================== */ body.catalog-product-view .column.main > .product-info-main { padding-bottom: 11px !important; } body.catalog-product-view .product-info-main .product-info-price { margin-bottom: 0 !important; padding-bottom: 3px !important; } body.catalog-product-view .product-info-main .product-info-stock-sku { min-height: 44px !important; margin-top: 4px !important; padding: 6px 9px !important; } body.catalog-product-view .product-info-main #simularFrete { margin: 6px 0 4px !important; padding: 7px 8px !important; } body.catalog-product-view .product-info-main #simularFrete label { margin-bottom: 3px !important; } body.catalog-product-view .product-info-main #simularFrete input, body.catalog-product-view .product-info-main #simularFrete button { min-height: 32px !important; height: 32px !important; } body.catalog-product-view .product-info-main .product-options-wrapper { margin-top: 2px !important; } body.catalog-product-view .product-info-main .box-tocart { margin-top: 2px !important; } /* ======================================================== 3. CONFIANCA MAIS PROXIMA DO HERO Sem margin negativa. ======================================================== */ body.catalog-product-view .premium-board4-confidence { margin-top: 5px !important; } /* ======================================================== 4. CIRCULOS / ICONES Neutraliza posicionamentos herdados do tema. ======================================================== */ body.catalog-product-view .premium-board4-confidence__icon { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; text-align: center !important; line-height: 1 !important; } /* * Cobre i, span, svg e qualquer wrapper utilizado pelo tema. */ body.catalog-product-view .premium-board4-confidence__icon > * { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #148c49 !important; font-size: 18px !important; line-height: 20px !important; text-align: center !important; opacity: 1 !important; transform: none !important; translate: none !important; } body.catalog-product-view .premium-board4-confidence__icon > *::before, body.catalog-product-view .premium-board4-confidence__icon > *::after { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1 !important; text-align: center !important; transform: none !important; translate: none !important; } body.catalog-product-view .premium-board4-confidence__icon svg { position: static !important; display: block !important; width: 19px !important; height: 19px !important; margin: auto !important; transform: none !important; } } /* ============================================================ PREMIUM ECOLOGICA BOARD 4 - RC3.4 FINAL Diagnostico confirmou estrutura real da PDP: .product-info-price .price-box .jsr-priceinstallment .mm-price-parcels-view #preco-a-vista-mm script .product-info-stock-sku Correcoes: 1. Parcelamento + Pix na mesma linha DESKTOP 2. Compactacao natural do price block 3. Centralizacao definitiva dos icones de confianca Nao altera mobile. Nao altera DOM. Nao altera JS. ============================================================ */ @media (min-width: 1024px) { /* ======================================================== 1. ESTRUTURA REAL DO BLOCO DE PRECO ======================================================== */ body.catalog-product-view .product-info-main .product-info-price { display: grid !important; grid-template-columns: max-content max-content minmax(0, 1fr) !important; grid-template-areas: "price price price" "installment pix filler" "stock stock stock" !important; column-gap: 9px !important; row-gap: 4px !important; align-items: center !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* * Preço principal. */ body.catalog-product-view .product-info-main .product-info-price > .price-box { grid-area: price !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * Parcelamento REAL da PDP. * * Importante: * mm-price-parcels-grid pertence aos cards inferiores. */ body.catalog-product-view .product-info-main .product-info-price > .jsr-priceinstallment { grid-area: installment !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; height: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; white-space: nowrap !important; } body.catalog-product-view .product-info-main .product-info-price > .jsr-priceinstallment > .mm-price-parcels-view { display: block !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; color: #65766d !important; font-size: 10px !important; line-height: 26px !important; font-weight: 400 !important; white-space: nowrap !important; } /* * Pix REAL da PDP. * * Escopo estrito product-info-main para não atingir * os IDs duplicados presentes nos produtos recomendados. */ body.catalog-product-view .product-info-main .product-info-price > #preco-a-vista-mm { grid-area: pix !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; height: 26px !important; min-height: 26px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; white-space: nowrap !important; } body.catalog-product-view .product-info-main .product-info-price > #preco-a-vista-mm > p { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: 25px !important; min-height: 25px !important; margin: 0 !important; padding: 3px 7px !important; box-sizing: border-box !important; background: #edf8f1 !important; border: 1px solid #d5eadb !important; border-radius: 5px !important; color: #087538 !important; font-size: 9.5px !important; line-height: 1 !important; font-weight: 700 !important; white-space: nowrap !important; } /* * Estoque ocupa linha completa imediatamente abaixo. */ body.catalog-product-view .product-info-main .product-info-price > .product-info-stock-sku { grid-area: stock !important; width: 100% !important; margin: 1px 0 0 !important; box-sizing: border-box !important; } /* ======================================================== 2. CENTRALIZACAO DEFINITIVA DOS ICONES DE CONFIANCA ======================================================== */ body.catalog-product-view .premium-board4-confidence__icon { position: relative !important; display: grid !important; place-items: center !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; line-height: 1 !important; text-align: center !important; } /* * Algumas versões do Argento desenham o ícone no próprio * pseudo-elemento do círculo. */ body.catalog-product-view .premium-board4-confidence__icon::before, body.catalog-product-view .premium-board4-confidence__icon::after { position: static !important; grid-area: 1 / 1 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #148c49 !important; font-size: 18px !important; line-height: 1 !important; text-align: center !important; transform: none !important; translate: none !important; } /* * E cobre também ícones renderizados como filhos. */ body.catalog-product-view .premium-board4-confidence__icon > * { position: static !important; grid-area: 1 / 1 !important; align-self: center !important; justify-self: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #148c49 !important; line-height: 1 !important; text-align: center !important; transform: none !important; translate: none !important; } body.catalog-product-view .premium-board4-confidence__icon > *::before, body.catalog-product-view .premium-board4-confidence__icon > *::after { position: static !important; display: block !important; margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1 !important; transform: none !important; translate: none !important; } body.catalog-product-view .premium-board4-confidence__icon svg { display: block !important; width: 19px !important; height: 19px !important; margin: auto !important; transform: none !important; } } /* ============================================================ PREMIUM ECOLOGICA BOARD 4 - RC3.5 FINAL PURCHASE CONTROLS Desktop: - Voltagem + Qtd - Comprar + WhatsApp na mesma linha Mobile: - Voltagem - Qtd compacta em linha propria - CTA principal - WhatsApp ============================================================ */ /* ============================================================ DESKTOP ============================================================ */ @media (min-width: 1024px) { /* * Primeira linha: * * VOLTAGEM QTD */ body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) { grid-template-columns: minmax(0, 1fr) 68px !important; grid-template-areas: "options qty" "actions actions" !important; column-gap: 14px !important; row-gap: 8px !important; } body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) .field.qty { width: 68px !important; margin: 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) .field.qty > .label { display: block !important; min-height: 18px !important; margin: 0 0 5px !important; padding: 0 !important; line-height: 18px !important; } body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) #qty { width: 68px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 6px !important; text-align: center !important; border-radius: 7px !important; box-sizing: border-box !important; } /* * Segunda linha: * * CTA PRINCIPAL WHATSAPP * * Os dois ficam menores individualmente, * mas juntos ocupam toda a largura comercial. */ body.catalog-product-view .product-info-main #product_addtocart_form:has(.premium-pdp-option-pills) .box-tocart .actions { display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) !important; gap: 8px !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } html body.catalog-product-view .product-info-main #product_addtocart_form #product-addtocart-button { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 7px !important; box-sizing: border-box !important; font-size: 11px !important; white-space: nowrap !important; } html body.catalog-product-view .product-info-main #product_addtocart_form .premium-board4-whatsapp-cta { width: 100% !important; max-width: none !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 10px !important; border-radius: 7px !important; box-sizing: border-box !important; font-size: 10.5px !important; white-space: nowrap !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { /* * No celular não tentamos encaixar Qtd ao lado * do CTA principal. * * O bloco fica vertical e previsível. */ body.catalog-product-view .product-info-main .box-tocart .fieldset { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* * Qtd vira um pequeno controle horizontal: * * Qtd [ 1 ] */ body.catalog-product-view .product-info-main .box-tocart .field.qty { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 9px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty > .label { display: block !important; width: auto !important; min-width: 24px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; font-size: 11px !important; line-height: 40px !important; font-weight: 700 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty .control { display: block !important; width: 58px !important; margin: 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main .box-tocart #qty { display: block !important; width: 58px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 6px !important; box-sizing: border-box !important; text-align: center !important; border-radius: 7px !important; } /* * No mobile os dois CTAs ficam separados * e com área de toque confortável. */ body.catalog-product-view .product-info-main .box-tocart .actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body.catalog-product-view .product-info-main #product-addtocart-button { width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 8px !important; box-sizing: border-box !important; } html body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 8px !important; box-sizing: border-box !important; } } /* ============================================================ PREMIUM ECOLOGICA BOARD 4 - RC3.6 MOBILE CTA FINAL POLISH Corrige exclusivamente: - raio excessivo do CTA principal - padronizacao visual dos dois CTAs - espacamento vertical entre Comprar e WhatsApp Desktop permanece intacto. ============================================================ */ @media (max-width: 767px) { /* ======================================================== CONTAINER DOS CTAS Zeramos gap herdado e controlamos o respiro de forma explícita pelo primeiro botão. ======================================================== */ body.catalog-product-view .product-info-main .box-tocart .actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; gap: 0 !important; row-gap: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ======================================================== CTA PRINCIPAL ======================================================== */ html body.catalog-product-view .product-info-main #product-addtocart-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 0 9px 0 !important; padding: 0 14px !important; box-sizing: border-box !important; /* * Sai do formato pill. * Aproxima do Board. */ border-radius: 7px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 700 !important; } /* ======================================================== WHATSAPP ======================================================== */ html body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: none !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 14px !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; } /* * Evita qualquer margin negativa herdada * de versões anteriores. */ html body.catalog-product-view .product-info-main #product-addtocart-button + .premium-board4-whatsapp-cta { margin-top: 0 !important; } }