/* ============================================================ PREMIUM ECOLOGICA BOARD 4 PDP V2B6.3 CONTEUDO DINAMICO ABAIXO DO HERO IMPORTANTE: - Videos podem ou nao existir na descricao. - Nenhum espacamento depende da existencia de iframe. - Nenhuma secao artificial e criada. - Hero / Fotorama / compra permanecem congelados. ============================================================ */ /* ============================================================ BASE GERAL ============================================================ */ body.catalog-product-view .product.info.detailed { clear: both !important; box-sizing: border-box !important; } body.catalog-product-view .product.info.detailed * { box-sizing: border-box; } /* ============================================================ CONTEUDO DE DESCRICAO Funciona independentemente do HTML cadastrado no Magento. ============================================================ */ body.catalog-product-view .product.info.detailed .product.attribute.description { color: #263b31 !important; overflow-wrap: anywhere !important; } body.catalog-product-view .product.info.detailed .product.attribute.description p { margin-top: 0 !important; } body.catalog-product-view .product.info.detailed .product.attribute.description strong { color: #0b412b !important; font-weight: 700 !important; } /* * Títulos que eventualmente forem cadastrados * diretamente na descrição. */ body.catalog-product-view .product.info.detailed .product.attribute.description h1, body.catalog-product-view .product.info.detailed .product.attribute.description h2, body.catalog-product-view .product.info.detailed .product.attribute.description h3, body.catalog-product-view .product.info.detailed .product.attribute.description h4 { color: #0b412b !important; line-height: 1.2 !important; font-weight: 700 !important; } /* ============================================================ YOUTUBE / EMBEDS Só existe visualmente SE existir iframe na descrição. Nenhum container ou altura é reservado na ausência deles. ============================================================ */ body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtube.com"], body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtube-nocookie.com"], body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtu.be"] { display: block !important; width: 100% !important; max-width: 760px !important; height: auto !important; aspect-ratio: 16 / 9 !important; margin-left: auto !important; margin-right: auto !important; border: 0 !important; background: #000 !important; overflow: hidden !important; } /* * Também protege embeds futuros que não sejam YouTube. */ body.catalog-product-view .product.info.detailed .product.attribute.description iframe { max-width: 100% !important; border: 0 !important; } /* ============================================================ IMAGENS DA DESCRICAO ============================================================ */ body.catalog-product-view .product.info.detailed .product.attribute.description img { max-width: 100% !important; height: auto !important; } /* ============================================================ VIDEOS HTML5 FUTUROS ============================================================ */ body.catalog-product-view .product.info.detailed .product.attribute.description video { display: block !important; width: 100% !important; max-width: 760px !important; height: auto !important; margin-left: auto !important; margin-right: auto !important; } /* ============================================================ TABELAS FUTURAS DA DESCRICAO ============================================================ */ body.catalog-product-view .product.info.detailed .product.attribute.description table { max-width: 100% !important; } /* ============================================================ DESKTOP ============================================================ */ @media (min-width: 768px) { /* -------------------------------------------------------- CONTAINER ABAIXO DO HERO -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed { width: 100% !important; max-width: 1180px !important; margin: 44px auto 0 !important; padding: 0 22px !important; } body.catalog-product-view .product.info.detailed .product.data.items { width: 100% !important; margin: 0 !important; padding: 0 !important; } /* -------------------------------------------------------- TITULOS DOS BLOCOS MAGENTO -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .data.item.title { float: none !important; display: block !important; width: 100% !important; margin: 0 0 16px !important; padding: 0 !important; background: transparent !important; border: 0 !important; } body.catalog-product-view .product.info.detailed .data.item.title .data.switch { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #0b412b !important; font-size: 18px !important; line-height: 1.2 !important; font-weight: 700 !important; text-transform: none !important; } /* -------------------------------------------------------- CONTEUDO DAS SECOES -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .data.item.content { float: none !important; display: block !important; width: 100% !important; margin: 0 0 38px !important; padding: 0 0 36px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #e4ebe7 !important; } /* -------------------------------------------------------- DESCRICAO -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .product.attribute.description { width: 100% !important; max-width: 920px !important; margin: 0 auto !important; font-size: 14px !important; line-height: 1.62 !important; } body.catalog-product-view .product.info.detailed .product.attribute.description p { margin-bottom: 11px !important; } body.catalog-product-view .product.info.detailed .product.attribute.description h2 { margin: 28px 0 14px !important; font-size: 22px !important; } body.catalog-product-view .product.info.detailed .product.attribute.description h3 { margin: 24px 0 12px !important; font-size: 18px !important; } /* -------------------------------------------------------- YOUTUBE Se nao houver iframe, estas regras simplesmente nao sao aplicadas a elemento algum. -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtube.com"], body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtube-nocookie.com"], body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtu.be"] { margin-top: 18px !important; margin-bottom: 18px !important; border-radius: 11px !important; box-shadow: 0 6px 22px rgba(15, 67, 43, .07) !important; } /* -------------------------------------------------------- RELACIONADOS / UPSELL -------------------------------------------------------- */ body.catalog-product-view .block.related, body.catalog-product-view .block.upsell { clear: both !important; width: 100% !important; max-width: 1180px !important; margin: 42px auto 55px !important; padding: 0 22px !important; box-sizing: border-box !important; } body.catalog-product-view .block.related .block-title, body.catalog-product-view .block.upsell .block-title { margin-bottom: 22px !important; color: #0b412b !important; font-size: 18px !important; font-weight: 700 !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 767px) { /* -------------------------------------------------------- INICIO DO CONTEUDO EDITORIAL -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed { width: 100% !important; margin: 22px 0 0 !important; padding: 0 !important; border-top: 1px solid #e3ebe6 !important; } body.catalog-product-view .product.info.detailed .product.data.items { width: 100% !important; margin: 0 !important; } /* -------------------------------------------------------- TITULOS DOS BLOCOS -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .data.item.title { float: none !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 18px 0 11px !important; background: transparent !important; border: 0 !important; } body.catalog-product-view .product.info.detailed .data.item.title .data.switch { display: block !important; width: 100% !important; padding: 0 !important; color: #0b412b !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 700 !important; text-transform: none !important; } /* -------------------------------------------------------- CONTEUDO -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .data.item.content { float: none !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 0 0 22px !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid #e3ebe6 !important; } /* -------------------------------------------------------- DESCRICAO -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .product.attribute.description { width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 12px !important; line-height: 1.55 !important; } body.catalog-product-view .product.info.detailed .product.attribute.description p { margin-bottom: 9px !important; } body.catalog-product-view .product.info.detailed .product.attribute.description h2 { margin: 21px 0 10px !important; font-size: 17px !important; } body.catalog-product-view .product.info.detailed .product.attribute.description h3 { margin: 18px 0 9px !important; font-size: 15px !important; } /* -------------------------------------------------------- YOUTUBE OPCIONAL -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtube.com"], body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtube-nocookie.com"], body.catalog-product-view .product.info.detailed .product.attribute.description iframe[src*="youtu.be"] { width: 100% !important; max-width: 100% !important; margin: 10px 0 !important; border-radius: 9px !important; box-shadow: none !important; } /* -------------------------------------------------------- IMAGENS -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .product.attribute.description img { width: auto !important; max-width: 100% !important; height: auto !important; } /* -------------------------------------------------------- TABELAS -------------------------------------------------------- */ body.catalog-product-view .product.info.detailed .product.attribute.description table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } /* -------------------------------------------------------- RELACIONADOS -------------------------------------------------------- */ body.catalog-product-view .block.related, body.catalog-product-view .block.upsell { width: 100% !important; margin: 27px 0 35px !important; padding: 0 !important; } body.catalog-product-view .block.related .block-title, body.catalog-product-view .block.upsell .block-title { margin: 0 0 14px !important; color: #0b412b !important; font-size: 15px !important; line-height: 1.2 !important; font-weight: 700 !important; } /* * Mantemos duas colunas quando a extensão * utilizar products-grid tradicional. */ body.catalog-product-view .block.related .products-grid .product-item, body.catalog-product-view .block.upsell .products-grid .product-item { width: calc(50% - 5px) !important; margin: 0 5px 12px 0 !important; vertical-align: top !important; } body.catalog-product-view .block.related .product-item-info, body.catalog-product-view .block.upsell .product-item-info { width: 100% !important; padding: 7px !important; border: 1px solid #e2ebe5 !important; border-radius: 9px !important; background: #fff !important; box-sizing: border-box !important; } body.catalog-product-view .block.related .product-image-container, body.catalog-product-view .block.upsell .product-image-container { width: 100% !important; } body.catalog-product-view .block.related .product-item-name, body.catalog-product-view .block.upsell .product-item-name { margin: 6px 0 !important; font-size: 10px !important; line-height: 1.25 !important; } }