/* ============================================================ PREMIUM ECOLOGICA BOARD 4 PDP V2B7 FINAL HERO FIDELITY DOM confirmado: .product-info-main 0 page-title-wrapper 1 premium-board4-summary 2 product attribute overview 3 product-reviews-summary 4 product-info-price 5 product-add-form 6 premium-board4-trust 7 #simularFrete SOMENTE ORDEM VISUAL. NENHUM ELEMENTO E MOVIDO NO DOM. ============================================================ */ /* ============================================================ TOKENS ============================================================ */ body.catalog-product-view { --pe7-green: #168846; --pe7-green-dark: #0d703b; --pe7-text: #0b412b; --pe7-muted: #66756d; --pe7-border: #dce7e0; --pe7-soft: #f7fbf8; } /* ============================================================ RESUMO CURTO Aproxima do Board: menos "caixa", mais conteúdo. ============================================================ */ body.catalog-product-view .product-info-main .product.attribute.overview { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.catalog-product-view .product-info-main .product.attribute.overview .value { color: #53655c !important; line-height: 1.4 !important; } /* ============================================================ DESKTOP ============================================================ */ @media (min-width: 768px) { /* -------------------------------------------------------- 1. ORDENAÇÃO CONTROLADA DO PAINEL DE COMPRA -------------------------------------------------------- */ body.catalog-product-view .product-info-main { display: flex !important; flex-direction: column !important; align-items: stretch !important; } body.catalog-product-view .product-info-main > .page-title-wrapper { order: 10 !important; } body.catalog-product-view .product-info-main > .premium-board4-summary { order: 20 !important; } body.catalog-product-view .product-info-main > .product.attribute.overview { order: 30 !important; } body.catalog-product-view .product-info-main > .product-reviews-summary { order: 40 !important; } body.catalog-product-view .product-info-main > .product-info-price { order: 50 !important; } /* * No Board, cálculo de entrega está ligado * diretamente à decisão de compra. */ body.catalog-product-view .product-info-main > #simularFrete { order: 60 !important; } body.catalog-product-view .product-info-main > .product-add-form { order: 70 !important; } body.catalog-product-view .product-info-main > .premium-board4-trust { order: 80 !important; } /* scripts continuam fora do fluxo visual */ body.catalog-product-view .product-info-main > script { order: 100 !important; } /* -------------------------------------------------------- 2. TITULO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .page-title-wrapper { margin: 0 0 8px !important; } body.catalog-product-view .product-info-main .page-title .base { font-size: 31px !important; line-height: 1.07 !important; letter-spacing: -.45px !important; } /* -------------------------------------------------------- 3. CHIPS -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-summary { margin: 0 0 7px !important; } body.catalog-product-view .product-info-main .premium-board4-summary__chips { margin: 0 0 5px !important; gap: 6px !important; } /* -------------------------------------------------------- 4. RESUMO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product.attribute.overview { margin: 4px 0 7px !important; padding: 0 !important; } body.catalog-product-view .product-info-main .product.attribute.overview .value { font-size: 12px !important; line-height: 1.42 !important; } /* -------------------------------------------------------- 5. REVIEW -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-reviews-summary { margin: 3px 0 8px !important; } /* -------------------------------------------------------- 6. PRECO / ESTOQUE -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-info-price { margin: 0 !important; padding: 0 0 9px !important; border-bottom: 1px solid #e5ece8 !important; } body.catalog-product-view .product-info-main .price-box .price { font-size: 38px !important; line-height: 1 !important; } /* -------------------------------------------------------- 7. FRETE MAIS PROXIMO DO PRECO -------------------------------------------------------- */ body.catalog-product-view .product-info-main #simularFrete { width: 100% !important; margin: 11px 0 5px !important; padding: 10px !important; background: var(--pe7-soft) !important; border: 1px solid var(--pe7-border) !important; border-radius: 8px !important; box-shadow: none !important; } /* -------------------------------------------------------- 8. OPTIONS / COMPRA -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-add-form { margin: 3px 0 0 !important; } body.catalog-product-view .product-info-main .product-options-wrapper { margin-top: 10px !important; } body.catalog-product-view .product-info-main .box-tocart { margin: 7px 0 9px !important; } /* -------------------------------------------------------- 9. TRUST -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-trust { margin: 8px 0 0 !important; } } /* ============================================================ MOBILE Conversão primeiro. ============================================================ */ @media (max-width: 767px) { /* -------------------------------------------------------- 1. PRODUCT INFO PASSA A TER ORDEM VISUAL -------------------------------------------------------- */ body.catalog-product-view .product-info-main { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; } /* * Board mobile: * * título * chips * preço/estoque * compra * frete * confiança * informações complementares */ body.catalog-product-view .product-info-main > .page-title-wrapper { order: 10 !important; } body.catalog-product-view .product-info-main > .premium-board4-summary { order: 20 !important; } body.catalog-product-view .product-info-main > .product-info-price { order: 30 !important; } body.catalog-product-view .product-info-main > .product-add-form { order: 40 !important; } body.catalog-product-view .product-info-main > #simularFrete { order: 50 !important; } body.catalog-product-view .product-info-main > .premium-board4-trust { order: 60 !important; } /* * Conteúdo auxiliar sai da área crítica * de conversão sem desaparecer da página. */ body.catalog-product-view .product-info-main > .product.attribute.overview { order: 70 !important; } body.catalog-product-view .product-info-main > .product-reviews-summary { order: 80 !important; } body.catalog-product-view .product-info-main > script { order: 100 !important; } /* -------------------------------------------------------- 2. 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 .base { font-size: 22px !important; line-height: 1.06 !important; letter-spacing: -.28px !important; } /* -------------------------------------------------------- 3. CHIPS -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-summary { margin: 0 0 7px !important; } body.catalog-product-view .product-info-main .premium-board4-summary__chips { margin: 0 !important; gap: 5px !important; } /* -------------------------------------------------------- 4. PRECO AGORA VEM IMEDIATAMENTE APOS CHIPS -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-info-price { margin: 4px 0 0 !important; padding: 0 0 9px !important; border-bottom: 1px solid #e4ebe7 !important; } body.catalog-product-view .product-info-main .price-box .price { font-size: 31px !important; line-height: 1 !important; } /* -------------------------------------------------------- 5. OPTIONS MAIS PROXIMAS DO PRECO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-add-form { margin: 0 !important; } body.catalog-product-view .product-info-main .product-options-wrapper { margin: 10px 0 0 !important; } body.catalog-product-view .product-info-main .box-tocart { margin: 5px 0 7px !important; } /* -------------------------------------------------------- 6. FRETE -------------------------------------------------------- */ body.catalog-product-view .product-info-main #simularFrete { width: 100% !important; margin: 4px 0 8px !important; padding: 8px !important; background: var(--pe7-soft) !important; border: 1px solid var(--pe7-border) !important; border-radius: 8px !important; } /* -------------------------------------------------------- 7. CONFIANCA -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-trust { margin: 0 0 10px !important; } /* -------------------------------------------------------- 8. RESUMO COMPLEMENTAR Depois da compra. -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product.attribute.overview { margin: 4px 0 4px !important; padding: 10px 0 0 !important; border-top: 1px solid #e4ebe7 !important; background: transparent !important; } body.catalog-product-view .product-info-main .product.attribute.overview .value { color: #53655c !important; font-size: 11px !important; line-height: 1.4 !important; } /* -------------------------------------------------------- 9. REVIEW NAO DISPUTA MAIS A DOBRA COM PRECO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-reviews-summary { margin: 4px 0 4px !important; font-size: 10px !important; } } /* ============================================================ PEQUENOS CELULARES ============================================================ */ @media (max-width: 430px) { body.catalog-product-view .product-info-main .page-title .base { font-size: 21px !important; } body.catalog-product-view .product-info-main .price-box .price { font-size: 30px !important; } }