/* v564 - Global Modules Mobile Inheritance Fix Regra estrutural: modulos globais homologados devem preservar seu padrao mobile em qualquer pagina onde forem instalados pelo Layout Engine. Este arquivo deve ser carregado por ultimo no das paginas publicas para neutralizar overrides locais. */ /* Isolamento: slots do Layout Engine nao podem transformar modulo global em layout antigo. */ .mb-layout-root .mb-layout-slot > .mb-benefits-global, .mb-layout-root .mb-layout-slot > .mb-home-banner, .mb-layout-root .mb-layout-slot > .mb-category-module, .mb-layout-root .mb-layout-slot > .mb-featured-products, .mb-layout-root .mb-layout-slot > .mb-step-by-step, .mb-layout-root .mb-layout-slot > .mb-blog-global, .mb-layout-root .mb-layout-slot > .mb-faq-global, .mb-layout-root .mb-layout-slot > .mb-global-html-module, .mb-layout-root .mb-layout-render-slot > .mb-benefits-global, .mb-layout-root .mb-layout-render-slot > .mb-home-banner, .mb-layout-root .mb-layout-render-slot > .mb-category-module, .mb-layout-root .mb-layout-render-slot > .mb-featured-products, .mb-layout-root .mb-layout-render-slot > .mb-step-by-step, .mb-layout-root .mb-layout-render-slot > .mb-blog-global, .mb-layout-root .mb-layout-render-slot > .mb-faq-global, .mb-layout-root .mb-layout-render-slot > .mb-global-html-module{ width:100%; } @media (max-width: 760px){ /* Containers globais: mesmo respiro mobile em todas as paginas. */ .mb-layout-root .mb-benefits-global, .mb-layout-root .mb-category-module, .mb-layout-root .mb-featured-products, .mb-layout-root .mb-step-by-step, .mb-layout-root .mb-blog-global, .mb-layout-root .mb-faq-global, .mb-layout-root .mb-global-html-module{ max-width:100%; padding-left:14px; padding-right:14px; } /* Category Card Global: padrao homologado mobile, sem carrossel quando renderizado como grid. */ .mb-layout-root .mb-category-module .mb-category-grid, .mb-layout-root .mb-category-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; overflow:visible !important; padding:0 !important; margin:0 !important; scroll-snap-type:none !important; } .mb-layout-root .mb-category-grid > *, .mb-layout-root .mb-category-grid > .mb-category-card{ min-width:0 !important; width:100% !important; scroll-snap-align:unset !important; } /* Product Card Global: grid mobile homologado, 2 por linha, sem carrossel local. */ .mb-layout-root .mb-product-grid, .mb-layout-root .mb-catalog-filter .mb-product-grid, .mb-layout-root .mb-filter-results .mb-product-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; overflow:visible !important; padding:0 !important; margin:0 !important; scroll-snap-type:none !important; } .mb-layout-root .mb-product-grid > *, .mb-layout-root .mb-product-grid > .mb-product-card{ min-width:0 !important; width:100% !important; scroll-snap-align:unset !important; } /* Beneficios Global: preserva o carrossel mobile homologado do modulo. */ .mb-layout-root .mb-benefits-global__track{ display:flex !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; gap:10px !important; padding:2px 14px 10px !important; margin:0 -14px !important; scrollbar-width:none; } .mb-layout-root .mb-benefits-global__track::-webkit-scrollbar{display:none !important;} .mb-layout-root .mb-benefits-global__track .mb-benefit-card{ min-width:70% !important; scroll-snap-align:start !important; } /* Passo a Passo Global: carrossel mobile homologado. */ .mb-layout-root .mb-step-by-step__track{ display:grid !important; grid-auto-flow:column !important; grid-auto-columns:84% !important; grid-template-columns:none !important; gap:12px !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; margin:0 -14px !important; padding:2px 14px 12px !important; scrollbar-width:none; } .mb-layout-root .mb-step-by-step__track::-webkit-scrollbar{display:none !important;} .mb-layout-root .mb-step-by-step__track > *{scroll-snap-align:start !important;} /* Produtos em Destaque Global: mantem carrossel do modulo, nao vira grid por CSS local. */ .mb-layout-root .mb-featured-products__track{ display:grid !important; grid-auto-flow:column !important; grid-auto-columns:84% !important; grid-template-columns:none !important; gap:12px !important; overflow-x:auto !important; scroll-snap-type:x mandatory !important; margin:0 -14px !important; padding:2px 14px 14px !important; scrollbar-width:none; } .mb-layout-root .mb-featured-products__track::-webkit-scrollbar{display:none !important;} .mb-layout-root .mb-featured-products__track > *{scroll-snap-align:start !important;} /* Blog Global: cards em coluna no mobile para manter leitura e evitar herancas de grids desktop. */ .mb-layout-root .mb-blog-global__grid, .mb-layout-root .mb-blog-featured__grid, .mb-layout-root .mb-blog-list__grid{ display:grid !important; grid-template-columns:1fr !important; gap:16px !important; } /* FAQ Global e modulos HTML globais: largura e alinhamento padrao mobile. */ .mb-layout-root .mb-faq-layout, .mb-layout-root .mb-faq-list, .mb-layout-root .mb-global-html-module__content{ width:100% !important; max-width:100% !important; } } @media (max-width: 380px){ .mb-layout-root .mb-product-grid, .mb-layout-root .mb-catalog-filter .mb-product-grid, .mb-layout-root .mb-filter-results .mb-product-grid, .mb-layout-root .mb-category-module .mb-category-grid, .mb-layout-root .mb-category-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* V567 - Restaura exatamente os padrões mobile homologados dos módulos globais. Este bloco fica por último para corrigir overrides introduzidos em v564/v565/v566. */ @media(max-width:760px){ /* Benefícios: 2 cards completos + metade do terceiro, rolável lateralmente. */ .mb-layout-root .mb-benefits-global{ width:100% !important; max-width:100% !important; overflow:hidden !important; padding-left:0 !important; padding-right:0 !important; } .mb-layout-root .mb-benefits-global .mb-benefits-global__track{ --mb-benefits-mobile-pad:10px; --mb-benefits-mobile-gap:8px; display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important; gap:var(--mb-benefits-mobile-gap) !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scroll-snap-type:x mandatory !important; scrollbar-width:none !important; width:100% !important; max-width:100% !important; padding:2px var(--mb-benefits-mobile-pad) 10px var(--mb-benefits-mobile-pad) !important; margin:0 !important; } .mb-layout-root .mb-benefits-global .mb-benefits-global__track::-webkit-scrollbar{display:none !important;} .mb-layout-root .mb-benefits-global .mb-benefits-global__track .mb-benefit-card{ flex:0 0 calc((100% - (var(--mb-benefits-mobile-pad) * 2) - (var(--mb-benefits-mobile-gap) * 2)) / 2.5) !important; min-width:calc((100% - (var(--mb-benefits-mobile-pad) * 2) - (var(--mb-benefits-mobile-gap) * 2)) / 2.5) !important; max-width:calc((100% - (var(--mb-benefits-mobile-pad) * 2) - (var(--mb-benefits-mobile-gap) * 2)) / 2.5) !important; width:auto !important; scroll-snap-align:start !important; } /* Blog em Destaque: volta ao padrão rolável lateralmente homologado. */ .mb-layout-root .mb-blog-global{ width:100% !important; max-width:100% !important; overflow:hidden !important; padding-left:0 !important; padding-right:0 !important; } .mb-layout-root .mb-blog-global > .mb-blog-global__grid, .mb-layout-root .mb-blog-global .mb-blog-global__grid{ display:grid !important; grid-template-columns:none !important; grid-auto-flow:column !important; grid-auto-columns:78% !important; gap:12px !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scroll-behavior:smooth !important; scrollbar-width:none !important; -ms-overflow-style:none !important; padding:4px 14px 18px 2px !important; margin:0 !important; -webkit-overflow-scrolling:touch !important; } .mb-layout-root .mb-blog-global .mb-blog-global__grid::-webkit-scrollbar{display:none !important;} .mb-layout-root .mb-blog-global .mb-blog-global__grid > .mb-blog-card, .mb-layout-root .mb-blog-global .mb-blog-global__grid > .mb-article-card{ width:100% !important; min-width:0 !important; scroll-snap-align:start !important; } } /* V571 - Paginas Unicas Mobile: padrao final isolado Escopo exclusivo: paginas criadas no modulo Paginas Unicas (.mb-institutional-page) em mobile. Nao altera Home, Grupo, Categoria, Subcategoria, Produto, Busca, Blog ou Orcamento. */ @media (max-width: 760px){ .mb-institutional-page{ overflow-x:hidden !important; background:#fff !important; } .mb-institutional-page .mb-layout-root{ width:100% !important; max-width:100% !important; display:grid !important; gap:28px !important; overflow:visible !important; } .mb-institutional-page .mb-layout-root > .mb-layout-slot{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; } .mb-institutional-page .mb-layout-root > .mb-layout-slot[data-block-kind="nativeBlock"], .mb-institutional-page .mb-layout-root > .mb-layout-slot[data-block-key="institutionalPageBreadcrumb"], .mb-institutional-page .mb-layout-root > .mb-layout-slot[data-block-key="institutionalPageHero"], .mb-institutional-page .mb-layout-root > .mb-layout-slot[data-block-key="institutionalPageContent"]{ width:100% !important; max-width:100% !important; } .mb-institutional-page .mb-page-breadcrumb .container, .mb-institutional-page .breadcrumb .container, .mb-institutional-page .mb-page-banner .container, .mb-institutional-page .mb-page-title .container, .mb-institutional-page .mb-page-content .container{ width:calc(100% - var(--mb-public-gutter-mobile,28px)) !important; max-width:calc(100% - var(--mb-public-gutter-mobile,28px)) !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } .mb-institutional-page .mb-page-banner, .mb-institutional-page .mb-page-title, .mb-institutional-page .mb-page-content{ padding:0 !important; margin:0 !important; } .mb-institutional-page .mb-page-static-banner.mb-home-banner, .mb-institutional-page .mb-page-static-banner .mb-home-banner__track, .mb-institutional-page .mb-page-static-banner .mb-home-banner__slide{ width:100% !important; min-height:240px !important; height:240px !important; border-radius:18px !important; overflow:hidden !important; } .mb-institutional-page .mb-page-static-banner .mb-home-banner__picture, .mb-institutional-page .mb-page-static-banner .mb-home-banner__picture img{ width:100% !important; height:100% !important; max-width:none !important; display:block !important; object-fit:cover !important; object-position:center center !important; } .mb-institutional-page .mb-page-title h1{ font-size:clamp(28px,8vw,34px) !important; line-height:1.08 !important; letter-spacing:-.035em !important; text-align:center !important; } .mb-institutional-page .mb-page-title p{ max-width:100% !important; margin:12px auto 0 !important; font-size:15.5px !important; line-height:1.58 !important; text-align:center !important; } .mb-institutional-page .mb-page-content__inner{ width:100% !important; max-width:100% !important; overflow:hidden !important; font-size:15.5px !important; line-height:1.72 !important; overflow-wrap:anywhere !important; } .mb-institutional-page .mb-page-content__inner *, .mb-institutional-page .mb-page-content__inner *::before, .mb-institutional-page .mb-page-content__inner *::after{ box-sizing:border-box !important; } .mb-institutional-page .mb-page-content__inner > *, .mb-institutional-page .mb-page-content__inner .mb-page-wrap, .mb-institutional-page .mb-page-content__inner section, .mb-institutional-page .mb-page-content__inner article, .mb-institutional-page .mb-page-content__inner div{ max-width:100% !important; } .mb-institutional-page .mb-page-content__inner .container, .mb-institutional-page .mb-page-content__inner .wrapper, .mb-institutional-page .mb-page-content__inner .row{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } .mb-institutional-page .mb-page-content__inner .row{ display:block !important; } .mb-institutional-page .mb-page-content__inner [class*="col-"]{ width:100% !important; max-width:100% !important; float:none !important; } .mb-institutional-page .mb-page-content__inner img, .mb-institutional-page .mb-page-content__inner picture, .mb-institutional-page .mb-page-content__inner video, .mb-institutional-page .mb-page-content__inner canvas, .mb-institutional-page .mb-page-content__inner svg{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; border-radius:16px !important; } .mb-institutional-page .mb-page-content__inner iframe, .mb-institutional-page .mb-page-content__inner embed, .mb-institutional-page .mb-page-content__inner object{ display:block !important; width:100% !important; max-width:100% !important; aspect-ratio:16/9 !important; height:auto !important; border-radius:16px !important; } .mb-institutional-page .mb-page-content__inner table{ display:block !important; width:100% !important; max-width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; } /* Slots globais em Paginas Unicas Mobile: o slot nao redesenha o modulo; apenas fornece largura segura. */ .mb-institutional-page .mb-layout-root > .mb-layout-slot[data-block-kind="globalModule"]{ width:calc(100% - var(--mb-public-gutter-mobile,28px)) !important; max-width:calc(100% - var(--mb-public-gutter-mobile,28px)) !important; margin-left:auto !important; margin-right:auto !important; padding:0 !important; overflow:visible !important; } .mb-institutional-page .mb-layout-root > .mb-layout-slot[data-block-kind="globalModule"] > *{ width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important; } /* Beneficios: 2 cards e meio visiveis, rolavel lateralmente, somente dentro das Paginas Unicas. */ .mb-institutional-page .mb-benefits-global{ overflow:hidden !important; } .mb-institutional-page .mb-benefits-global .mb-benefits-global__track{ --mb-benefits-mobile-pad:0px; --mb-benefits-mobile-gap:8px; display:flex !important; flex-wrap:nowrap !important; gap:var(--mb-benefits-mobile-gap) !important; overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch !important; scroll-snap-type:x mandatory !important; scrollbar-width:none !important; padding:2px 0 10px !important; margin:0 !important; width:100% !important; } .mb-institutional-page .mb-benefits-global .mb-benefits-global__track::-webkit-scrollbar{display:none !important;} .mb-institutional-page .mb-benefits-global .mb-benefits-global__track .mb-benefit-card{ flex:0 0 calc((100% - 16px) / 2.5) !important; min-width:calc((100% - 16px) / 2.5) !important; max-width:calc((100% - 16px) / 2.5) !important; width:auto !important; scroll-snap-align:start !important; } /* Produtos em Destaque: usa carrossel mobile homologado e Product Card Global intacto. */ .mb-institutional-page .mb-featured-products{ overflow:hidden !important; } .mb-institutional-page .mb-featured-products__tabs{ justify-content:flex-start !important; flex-wrap:nowrap !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; padding-bottom:4px !important; } .mb-institutional-page .mb-featured-products__tabs::-webkit-scrollbar{display:none !important;} .mb-institutional-page .mb-featured-products__tab{ white-space:nowrap !important; flex:0 0 auto !important; } .mb-institutional-page .mb-featured-products__track{ display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:calc((100% - 12px) / 1.5) !important; gap:12px !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; scrollbar-width:none !important; -webkit-overflow-scrolling:touch !important; margin:0 !important; padding:2px 0 16px !important; } .mb-institutional-page .mb-featured-products__track::-webkit-scrollbar{display:none !important;} .mb-institutional-page .mb-featured-products__track > *{ min-width:0 !important; scroll-snap-align:start !important; } /* Blog em Destaque: cards rolaveis lateralmente. */ .mb-institutional-page .mb-blog-global{ overflow:hidden !important; } .mb-institutional-page .mb-blog-global .mb-blog-global__grid{ display:grid !important; grid-template-columns:none !important; grid-auto-flow:column !important; grid-auto-columns:78% !important; gap:12px !important; overflow-x:auto !important; overflow-y:visible !important; scroll-snap-type:x mandatory !important; -webkit-overflow-scrolling:touch !important; scrollbar-width:none !important; margin:0 !important; padding:4px 0 18px !important; } .mb-institutional-page .mb-blog-global .mb-blog-global__grid::-webkit-scrollbar{display:none !important;} .mb-institutional-page .mb-blog-global .mb-blog-global__grid > *{ width:100% !important; min-width:0 !important; scroll-snap-align:start !important; } .mb-institutional-page .mb-faq-global, .mb-institutional-page .mb-step-by-step, .mb-institutional-page .mb-global-html-module, .mb-institutional-page .mb-category-module, .mb-institutional-page .mb-special-dates, .mb-institutional-page .mb-institutional-blocks{ width:100% !important; max-width:100% !important; overflow:visible !important; } }