/* ============================================================ PREMIUM ECOLOGICA BOARD 4 PDP V2B8 FINAL VISUAL POLISH IMPORTANTE ------------------------------------------------------------ - Nao altera DOM - Nao altera ordem - Nao toca Fotorama - Nao toca minicart - Nao toca voltage guard - Nao toca frete JS - Nao toca descricao ============================================================ */ /* ============================================================ TOKENS VISUAIS ============================================================ */ body.catalog-product-view { --pe8-green: #168846; --pe8-green-dark: #075c32; --pe8-text: #083f2a; --pe8-muted: #66766d; --pe8-border: #dce7e0; --pe8-border-soft: #e8eeea; --pe8-soft: #f7fbf8; --pe8-white: #ffffff; } /* ============================================================ DESKTOP ============================================================ */ @media (min-width: 768px) { /* -------------------------------------------------------- 1. GALERIA -------------------------------------------------------- */ body.catalog-product-view .product.media .fotorama__stage { border: 1px solid var(--pe8-border) !important; border-radius: 14px !important; background: #fff !important; overflow: hidden !important; } body.catalog-product-view .product.media .fotorama__thumb { border: 1px solid var(--pe8-border) !important; border-radius: 9px !important; overflow: hidden !important; } body.catalog-product-view .product.media .fotorama__active .fotorama__thumb { border-color: var(--pe8-green) !important; box-shadow: inset 0 0 0 1px var(--pe8-green) !important; } /* -------------------------------------------------------- 2. PAINEL COMERCIAL O Board aprovado trabalha esta área como card. -------------------------------------------------------- */ body.catalog-product-view .column.main > .product-info-main { box-sizing: border-box !important; padding: 24px 26px 22px !important; background: var(--pe8-white) !important; border: 1px solid var(--pe8-border) !important; border-radius: 18px !important; box-shadow: 0 8px 28px rgba(24, 71, 48, .045) !important; } /* -------------------------------------------------------- 3. TITULO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .page-title-wrapper { margin-bottom: 10px !important; } body.catalog-product-view .product-info-main .page-title .base { color: var(--pe8-text) !important; font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -.4px !important; } /* -------------------------------------------------------- 4. CHIPS -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-summary__chips { gap: 7px !important; } body.catalog-product-view .product-info-main .premium-board4-summary__chip { min-height: 30px !important; padding: 6px 10px !important; background: #f8fbf9 !important; border: 1px solid #d6e5dc !important; border-radius: 18px !important; color: #125d39 !important; } /* -------------------------------------------------------- 5. PREÇO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .price-box .price { color: var(--pe8-text) !important; font-size: 38px !important; letter-spacing: -.6px !important; } /* -------------------------------------------------------- 6. PIX -------------------------------------------------------- */ body.catalog-product-view .product-info-main #preco-a-vista-mm { display: inline-flex !important; align-items: center !important; min-height: 32px !important; padding: 6px 9px !important; background: #edf8f0 !important; border: 1px solid #c8e5d1 !important; border-radius: 6px !important; } /* -------------------------------------------------------- 7. FRETE -------------------------------------------------------- */ body.catalog-product-view .product-info-main #simularFrete { padding: 11px !important; background: var(--pe8-soft) !important; border: 1px solid var(--pe8-border) !important; border-radius: 9px !important; box-shadow: none !important; } body.catalog-product-view .product-info-main #simularFrete input { background: #fff !important; border-radius: 7px !important; } /* -------------------------------------------------------- 8. VOLTAGEM -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-pdp-option-pill { min-height: 40px !important; padding: 8px 18px !important; border-radius: 21px !important; transition: border-color .15s ease, background-color .15s ease !important; } /* -------------------------------------------------------- 9. CTA PRINCIPAL -------------------------------------------------------- */ body.catalog-product-view .product-info-main #product-addtocart-button { min-height: 48px !important; border-radius: 24px !important; background: var(--pe8-green) !important; border: 1px solid var(--pe8-green) !important; color: #fff !important; font-weight: 700 !important; box-shadow: 0 5px 14px rgba(22, 136, 70, .12) !important; } body.catalog-product-view .product-info-main #product-addtocart-button:hover:not(:disabled) { background: var(--pe8-green-dark) !important; border-color: var(--pe8-green-dark) !important; } /* * Estado sem voltagem continua visualmente secundário. */ body.catalog-product-view .product-info-main #product-addtocart-button:disabled, body.catalog-product-view .product-info-main #product-addtocart-button.premium-voltage-required { background: #edf6f0 !important; border-color: #bddac8 !important; color: #32704c !important; box-shadow: none !important; opacity: 1 !important; } /* -------------------------------------------------------- 10. WHATSAPP -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { min-height: 46px !important; border-radius: 23px !important; background: #fff !important; border: 1px solid var(--pe8-green) !important; } /* -------------------------------------------------------- 11. TRUST -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-trust { gap: 8px !important; margin-top: 10px !important; } body.catalog-product-view .product-info-main .premium-board4-trust__item { min-height: 60px !important; padding: 9px 10px !important; background: #fff !important; border: 1px solid var(--pe8-border) !important; border-radius: 9px !important; } /* -------------------------------------------------------- 12. VIDEO CTA -------------------------------------------------------- */ body.catalog-product-view .product.media .premium-board4-video-cta { background: rgba(255,255,255,.98) !important; border-color: #cadfd1 !important; box-shadow: 0 5px 17px rgba(20, 62, 42, .08) !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { /* -------------------------------------------------------- 1. GALERIA -------------------------------------------------------- */ body.catalog-product-view .product.media { margin-bottom: 9px !important; } body.catalog-product-view .product.media .fotorama__stage { border: 1px solid var(--pe8-border) !important; border-radius: 12px !important; background: #fff !important; } body.catalog-product-view .premium-mobile-galleryrail { gap: 6px !important; margin-top: 7px !important; } body.catalog-product-view .premium-mobile-galleryrail__item { background: #fff !important; border: 1px solid var(--pe8-border) !important; border-radius: 8px !important; } body.catalog-product-view .premium-mobile-galleryrail__item.is-active { border-color: var(--pe8-green) !important; box-shadow: inset 0 0 0 1px var(--pe8-green) !important; } /* -------------------------------------------------------- 2. VIDEO -------------------------------------------------------- */ body.catalog-product-view .product.media .premium-board4-video-cta { min-height: 38px !important; margin: 8px auto 10px !important; padding: 6px 13px !important; border-radius: 20px !important; } /* -------------------------------------------------------- 3. PRODUCT INFO Sem card externo no mobile. -------------------------------------------------------- */ body.catalog-product-view .column.main > .product-info-main { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* -------------------------------------------------------- 4. TITULO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .page-title .base { color: var(--pe8-text) !important; font-size: 21px !important; line-height: 1.06 !important; letter-spacing: -.22px !important; } /* -------------------------------------------------------- 5. CHIPS -------------------------------------------------------- */ 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: 27px !important; padding: 5px 8px !important; background: #f8fbf9 !important; border: 1px solid #d9e7df !important; border-radius: 15px !important; font-size: 9px !important; } /* -------------------------------------------------------- 6. PREÇO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .price-box .price { color: var(--pe8-text) !important; font-size: 30px !important; letter-spacing: -.45px !important; } body.catalog-product-view .product-info-main #preco-a-vista-mm { display: inline-flex !important; align-items: center !important; padding: 5px 7px !important; background: #edf8f0 !important; border: 1px solid #cce7d4 !important; border-radius: 6px !important; } /* -------------------------------------------------------- 7. VOLTAGEM -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-pdp-option-pills { gap: 7px !important; } body.catalog-product-view .product-info-main .premium-pdp-option-pill { min-height: 40px !important; border-radius: 21px !important; } /* -------------------------------------------------------- 8. CTA PRINCIPAL -------------------------------------------------------- */ body.catalog-product-view .product-info-main #product-addtocart-button { min-height: 48px !important; border-radius: 9px !important; font-size: 13px !important; } body.catalog-product-view .product-info-main #product-addtocart-button:not(:disabled) { background: var(--pe8-green) !important; color: #fff !important; } body.catalog-product-view .product-info-main #product-addtocart-button:disabled, body.catalog-product-view .product-info-main #product-addtocart-button.premium-voltage-required { background: #eef7f1 !important; border-color: #c2dec9 !important; color: #397150 !important; opacity: 1 !important; box-shadow: none !important; } /* -------------------------------------------------------- 9. WHATSAPP -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { min-height: 46px !important; border-radius: 9px !important; background: #fff !important; } /* -------------------------------------------------------- 10. FRETE -------------------------------------------------------- */ body.catalog-product-view .product-info-main #simularFrete { padding: 8px !important; border-radius: 8px !important; background: var(--pe8-soft) !important; } /* -------------------------------------------------------- 11. TRUST -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-trust { gap: 6px !important; } body.catalog-product-view .product-info-main .premium-board4-trust__item { min-height: 56px !important; padding: 7px !important; border: 1px solid var(--pe8-border) !important; border-radius: 8px !important; background: #fff !important; } /* -------------------------------------------------------- 12. REVIEW VAZIO O Magento normalmente usa classe "empty". Não escondemos avaliações reais. -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-reviews-summary.empty { display: none !important; } /* -------------------------------------------------------- 13. SEPARAÇÃO DO CONTEÚDO EDITORIAL -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed { margin-top: 24px !important; } } /* ============================================================ PEQUENOS CELULARES ============================================================ */ @media (max-width: 430px) { body.catalog-product-view .product-info-main .page-title .base { font-size: 20px !important; } body.catalog-product-view .product-info-main .price-box .price { font-size: 29px !important; } }