/* ============================================================ PREMIUM ECOLOGICA BOARD 4 PDP V3A.1 SAFE HERO GEOMETRY PRINCIPIO: aumentar escala e proporcao do HERO sem alterar o funcionamento interno do Magento/Fotorama. PROIBIDO NESTA CAMADA: - .fotorama__* - gallery JS - column.main display - minicart - requirejs - DOM ============================================================ */ body.catalog-product-view { --pev31-green: #168846; --pev31-dark: #07472e; --pev31-border: #dce7e0; --pev31-soft: #f7faf8; } /* ============================================================ DESKTOP GRANDE ============================================================ */ @media (min-width: 1200px) { /* -------------------------------------------------------- 1. USAR MAIS DA LARGURA DISPONIVEL -------------------------------------------------------- */ body.catalog-product-view main.page-main { width: 100% !important; max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box !important; } body.catalog-product-view .columns, body.catalog-product-view .column.main { width: 100% !important; max-width: none !important; } /* -------------------------------------------------------- 2. PROPORCAO DO HERO Mantemos float/layout original do Magento. Apenas redefinimos as larguras. -------------------------------------------------------- */ body.catalog-product-view .column.main > .product.media { float: left !important; width: 58.5% !important; max-width: 58.5% !important; margin: 0 3.5% 0 0 !important; padding: 0 !important; box-sizing: border-box !important; } body.catalog-product-view .column.main > .product-info-main { float: right !important; width: 38% !important; max-width: 38% !important; margin: 0 !important; box-sizing: border-box !important; } /* * Mantem conteudo inferior fora dos floats. */ body.catalog-product-view .column.main > .product.info.detailed { clear: both !important; width: 100% !important; max-width: 1180px !important; margin: 52px auto 0 !important; } /* -------------------------------------------------------- 3. CARD COMERCIAL -------------------------------------------------------- */ body.catalog-product-view .column.main > .product-info-main { padding: 25px 28px 24px !important; background: #fff !important; border: 1px solid var(--pev31-border) !important; border-radius: 16px !important; box-shadow: 0 8px 26px rgba(13, 66, 42, .045) !important; } /* -------------------------------------------------------- 4. TITULO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .page-title-wrapper { margin: 0 0 11px !important; } body.catalog-product-view .product-info-main .page-title .base { color: var(--pev31-dark) !important; font-size: 30px !important; line-height: 1.08 !important; letter-spacing: -.4px !important; font-weight: 700 !important; } /* -------------------------------------------------------- 5. CHIPS -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-summary { margin-bottom: 9px !important; } 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; } /* -------------------------------------------------------- 6. RESUMO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product.attribute.overview { margin: 7px 0 9px !important; } body.catalog-product-view .product-info-main .product.attribute.overview .value { font-size: 12px !important; line-height: 1.42 !important; } /* -------------------------------------------------------- 7. PRECO -------------------------------------------------------- */ body.catalog-product-view .product-info-main .price-box .price { font-size: 39px !important; line-height: 1 !important; letter-spacing: -.55px !important; } body.catalog-product-view .product-info-main .product-info-price { padding-bottom: 11px !important; } /* -------------------------------------------------------- 8. FRETE -------------------------------------------------------- */ body.catalog-product-view .product-info-main #simularFrete { width: 100% !important; margin: 13px 0 10px !important; padding: 12px !important; box-sizing: border-box !important; background: var(--pev31-soft) !important; border: 1px solid var(--pev31-border) !important; border-radius: 9px !important; } body.catalog-product-view .product-info-main #simularFrete input { min-height: 41px !important; } body.catalog-product-view .product-info-main #simularFrete button { min-height: 41px !important; } /* -------------------------------------------------------- 9. VOLTAGEM -------------------------------------------------------- */ body.catalog-product-view .product-info-main .product-options-wrapper { margin-top: 11px !important; } body.catalog-product-view .product-info-main .premium-pdp-option-pill { min-height: 40px !important; } /* -------------------------------------------------------- 10. CTA -------------------------------------------------------- */ body.catalog-product-view .product-info-main #product-addtocart-button { min-height: 49px !important; font-size: 14px !important; } body.catalog-product-view .product-info-main .premium-board4-whatsapp-cta { min-height: 46px !important; font-size: 13px !important; } /* -------------------------------------------------------- 11. TRUST AINDA DENTRO DO CARD Será tratado separadamente depois. -------------------------------------------------------- */ body.catalog-product-view .product-info-main .premium-board4-trust { gap: 8px !important; margin-top: 11px !important; } body.catalog-product-view .product-info-main .premium-board4-trust__item { min-height: 61px !important; } } /* ============================================================ DESKTOP MEDIO ============================================================ */ @media (min-width: 1024px) and (max-width: 1199px) { body.catalog-product-view main.page-main { max-width: 1140px !important; padding-left: 20px !important; padding-right: 20px !important; } body.catalog-product-view .column.main > .product.media { float: left !important; width: 56.5% !important; max-width: 56.5% !important; margin-right: 3.5% !important; } body.catalog-product-view .column.main > .product-info-main { float: right !important; width: 40% !important; max-width: 40% !important; } body.catalog-product-view .column.main > .product.info.detailed { clear: both !important; } } /* ============================================================ MOBILE Nesta etapa mexemos pouco. Primeiro queremos validar o desktop sem regressao. ============================================================ */ @media (max-width: 767px) { body.catalog-product-view main.page-main { width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; box-sizing: border-box !important; } body.catalog-product-view .column.main > .product.media, body.catalog-product-view .column.main > .product-info-main { width: 100% !important; max-width: 100% !important; float: none !important; } /* * Pequeno ganho de presença sem tocar na Fotorama. */ body.catalog-product-view .product.media { margin-bottom: 8px !important; } body.catalog-product-view .product-info-main .page-title .base { font-size: 21px !important; line-height: 1.06 !important; } body.catalog-product-view .product-info-main .price-box .price { font-size: 31px !important; } }