/* ============================================================ PREMIUM ECOLOGICA BOARD 4 - V3 FINAL RC2 FECHAMENTO VISUAL DA PDP. Objetivo: aproximar decisão de compra do Board aprovado sem alterar componentes funcionais estabilizados. ============================================================ */ body.catalog-product-view { --pe2-green: #148c49; --pe2-green-dark: #076038; --pe2-ink: #073f29; --pe2-muted: #68776f; --pe2-border: #dce7e0; --pe2-soft: #f7faf8; --pe2-soft-green: #edf8f1; } /* ============================================================ DESKTOP ============================================================ */ @media (min-width: 1024px) { /* -------------------------------------------------------- CARD COMERCIAL -------------------------------------------------------- */ body.catalog-product-view .column.main > .product-info-main { padding: 17px 19px 15px !important; min-height: 0 !important; } /* -------------------------------------------------------- TITULO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .page-title-wrapper { margin: 0 0 6px !important; } body.catalog-product-view .product-info-main .page-title { margin: 0 !important; } body.catalog-product-view .product-info-main .page-title .base { font-size: 25px !important; line-height: 1.06 !important; letter-spacing: -.35px !important; } /* -------------------------------------------------------- CHIPS -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-summary { margin: 0 0 5px !important; } body.catalog-product-view .product-info-main .premium-board4-summary__chips { gap: 5px !important; } body.catalog-product-view .product-info-main .premium-board4-summary__chip { min-height: 25px !important; padding: 4px 8px !important; } /* -------------------------------------------------------- RESUMO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product.attribute.overview { margin: 4px 0 5px !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; border: 0 !important; } body.catalog-product-view .product-info-main .product.attribute.overview .value { font-size: 11px !important; line-height: 1.28 !important; } /* -------------------------------------------------------- REVIEW VAZIO Se não existe rating real, não gastar espaço crítico. -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-reviews-summary:not(:has(.rating-summary)) { display: none !important; } /* -------------------------------------------------------- PREÇO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-info-price { gap: 2px !important; margin: 3px 0 0 !important; padding: 0 0 7px !important; } body.catalog-product-view .product-info-main .price-box { margin: 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main .price-box .price { font-size: 34px !important; line-height: 1 !important; } body.catalog-product-view .product-info-main .mm-price-parcels-grid { margin-top: 3px !important; font-size: 10px !important; line-height: 1.2 !important; } /* -------------------------------------------------------- PIX No Board é condição comercial pequena. -------------------------------------------------------- */ body.catalog-product-view .product-info-main #preco-a-vista-mm { display: block !important; width: auto !important; min-height: 0 !important; margin: 4px 0 0 !important; padding: 0 !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; width: auto !important; min-height: 27px !important; margin: 0 !important; padding: 4px 8px !important; box-sizing: border-box !important; background: var(--pe2-soft-green) !important; border: 1px solid #cbe5d3 !important; border-radius: 5px !important; font-size: 10px !important; } /* -------------------------------------------------------- ESTOQUE -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-info-stock-sku { min-height: 44px !important; margin: 5px 0 0 !important; padding: 6px 9px !important; gap: 8px !important; box-sizing: border-box !important; background: var(--pe2-soft) !important; border: 1px solid var(--pe2-border) !important; border-radius: 7px !important; } body.catalog-product-view .product-info-main .stock.available { position: static !important; display: grid !important; grid-template-columns: 22px auto !important; grid-template-rows: auto auto !important; column-gap: 7px !important; row-gap: 0 !important; align-items: center !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; font-size: 10px !important; } body.catalog-product-view .product-info-main .stock.available::before { content: "✓"; position: static !important; grid-column: 1 !important; grid-row: 1 / 3 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 22px !important; height: 22px !important; margin: 0 !important; border-radius: 50% !important; background: var(--pe2-green) !important; color: #fff !important; font-size: 12px !important; } body.catalog-product-view .product-info-main .stock.available::after { content: "Envio imediato para todo o Brasil"; grid-column: 2 !important; grid-row: 2 !important; display: block !important; margin: 1px 0 0 !important; color: var(--pe2-muted) !important; font-size: 8.5px !important; line-height: 1.1 !important; font-weight: 400 !important; text-transform: none !important; } body.catalog-product-view .product-info-main .product.attribute.sku { font-size: 8.5px !important; } /* -------------------------------------------------------- FRETE -------------------------------------------------------- */ body.catalog-product-view .product-info-main #simularFrete { margin: 7px 0 5px !important; padding: 8px !important; min-height: 0 !important; box-shadow: none !important; border-radius: 7px !important; } body.catalog-product-view .product-info-main #simularFrete label { margin-bottom: 4px !important; font-size: 9px !important; line-height: 1.15 !important; } body.catalog-product-view .product-info-main #simularFrete input, body.catalog-product-view .product-info-main #simularFrete button { min-height: 34px !important; height: 34px !important; font-size: 9px !important; } /* -------------------------------------------------------- OPÇÕES -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-options-wrapper { margin: 5px 0 0 !important; padding: 0 !important; } body.catalog-product-view .product-info-main .product-options-wrapper .field { margin-bottom: 4px !important; } body.catalog-product-view .product-info-main .premium-pdp-option-pills { gap: 6px !important; margin-top: 3px !important; } body.catalog-product-view .product-info-main .premium-pdp-option-pill { min-height: 34px !important; padding: 5px 15px !important; font-size: 10px !important; } /* -------------------------------------------------------- QTD + CTA -------------------------------------------------------- */ body.catalog-product-view .product-info-main .box-tocart { display: block !important; margin: 4px 0 0 !important; padding: 0 !important; min-height: 0 !important; overflow: visible !important; } body.catalog-product-view .product-info-main .box-tocart .fieldset { display: grid !important; grid-template-columns: 62px minmax(0,1fr) !important; gap: 6px !important; align-items: end !important; margin: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty { display: block !important; width: 62px !important; margin: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .actions { display: block !important; width: 100% !important; margin: 0 !important; } body.catalog-product-view .product-info-main #qty { width: 62px !important; min-height: 42px !important; height: 42px !important; } body.catalog-product-view .product-info-main #product-addtocart-button { display: flex !important; width: 100% !important; min-height: 42px !important; height: 42px !important; margin: 0 !important; padding: 0 14px !important; border-radius: 6px !important; font-size: 12px !important; } body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { display: flex !important; width: calc(100% - 68px) !important; min-height: 39px !important; margin: 5px 0 0 68px !important; border-radius: 6px !important; font-size: 11px !important; } /* -------------------------------------------------------- TRUST DO HERO NÃO DUPLICA -------------------------------------------------------- */ body.catalog-product-view .product-info-main > .premium-board4-trust { display: none !important; } /* -------------------------------------------------------- CONFIANÇA ABAIXO DO HERO -------------------------------------------------------- */ body.catalog-product-view .premium-board4-confidence { margin-top: 12px !important; } body.catalog-product-view .premium-board4-confidence__primary { gap: 9px !important; } body.catalog-product-view .premium-board4-confidence__card { min-height: 94px !important; padding: 13px !important; gap: 11px !important; } body.catalog-product-view .premium-board4-confidence__icon { flex-basis: 39px !important; width: 39px !important; height: 39px !important; font-size: 18px !important; } body.catalog-product-view .premium-board4-confidence__card strong { margin: 1px 0 4px !important; font-size: 12px !important; } body.catalog-product-view .premium-board4-confidence__card span { font-size: 10px !important; line-height: 1.32 !important; } body.catalog-product-view .premium-board4-confidence__secondary { margin-top: 8px !important; } body.catalog-product-view .premium-board4-confidence__benefit { min-height: 48px !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { /* * O mockup mobile não mostra a faixa institucional * antes do produto. */ body.catalog-product-view .premium-board4-confidence { display: none !important; } body.catalog-product-view .product-info-main > .premium-board4-trust { display: none !important; } /* -------------------------------------------------------- HERO MOBILE -------------------------------------------------------- */ body.catalog-product-view .column.main > .product-info-main { padding-bottom: 4px !important; } body.catalog-product-view .product-info-main .page-title-wrapper { margin-bottom: 5px !important; } body.catalog-product-view .product-info-main .page-title .base { font-size: 19px !important; line-height: 1.05 !important; } body.catalog-product-view .product-info-main .premium-board4-summary { margin-bottom: 5px !important; } /* -------------------------------------------------------- REVIEW VAZIO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-reviews-summary:not(:has(.rating-summary)) { display: none !important; } /* -------------------------------------------------------- PREÇO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-info-price { margin: 2px 0 0 !important; padding-bottom: 6px !important; } body.catalog-product-view .product-info-main .price-box .price { font-size: 29px !important; } body.catalog-product-view .product-info-main #preco-a-vista-mm { width: auto !important; min-height: 0 !important; margin: 3px 0 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body.catalog-product-view .product-info-main #preco-a-vista-mm p { display: inline-flex !important; width: auto !important; min-height: 28px !important; margin: 0 !important; padding: 5px 7px !important; } /* -------------------------------------------------------- ESTOQUE -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-info-stock-sku { min-height: 39px !important; margin: 4px 0 3px !important; padding: 5px 7px !important; } body.catalog-product-view .product-info-main .stock.available { margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------------- OPÇÕES -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-options-wrapper { margin: 5px 0 0 !important; } body.catalog-product-view .product-info-main .premium-pdp-option-pill { min-height: 37px !important; } /* -------------------------------------------------------- RESTAURA QTD + CTA MOBILE -------------------------------------------------------- */ body.catalog-product-view .product-info-main .box-tocart { display: block !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 4px 0 0 !important; padding: 0 !important; overflow: visible !important; } 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: end !important; width: 100% !important; height: auto !important; margin: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .field.qty { display: block !important; visibility: visible !important; width: 56px !important; height: auto !important; margin: 0 !important; } body.catalog-product-view .product-info-main .box-tocart .actions { display: block !important; visibility: visible !important; width: 100% !important; height: auto !important; margin: 0 !important; } body.catalog-product-view .product-info-main #qty { display: block !important; width: 56px !important; min-height: 40px !important; height: 40px !important; } body.catalog-product-view .product-info-main #product-addtocart-button { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; min-height: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 6px !important; } body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { display: flex !important; visibility: visible !important; width: calc(100% - 61px) !important; min-height: 39px !important; margin: 4px 0 0 61px !important; border-radius: 6px !important; } /* -------------------------------------------------------- FRETE MOBILE -------------------------------------------------------- */ body.catalog-product-view .product-info-main #simularFrete { min-height: 0 !important; margin: 6px 0 6px !important; padding: 7px !important; } body.catalog-product-view .product-info-main #simularFrete input, body.catalog-product-view .product-info-main #simularFrete button { min-height: 37px !important; height: 37px !important; } /* -------------------------------------------------------- CONTEÚDO DA DESCRIÇÃO Se houver vídeo YouTube, normaliza para 16:9. Se não houver vídeo, não produz qualquer efeito. -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed iframe[src*="youtube.com"], body.catalog-product-view .product.info.detailed iframe[src*="youtube-nocookie.com"] { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin: 0 0 10px !important; border: 0 !important; } } /* ============================================================ DESCRIÇÃO / YOUTUBE DESKTOP ============================================================ */ @media (min-width: 768px) { body.catalog-product-view .product.info.detailed iframe[src*="youtube.com"], body.catalog-product-view .product.info.detailed iframe[src*="youtube-nocookie.com"] { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; } }