/* =========================================================== Overrides do site. Carregado depois do main.css. =========================================================== */ /* ----------------------------------------------------------- 1) ACORDEÃO (FAQ, vitaminas, abas do produto) O tema declarava, no estado aberto: max-height: 200vh; ... max-height: 100%; A segunda declaração vence. Como a altura do pai é definida pelo próprio conteúdo, a porcentagem resolve para "none" — e não dá para animar de 0px até none. Resultado: o painel abre de estalo e as margens negativas (-16px) puxam o bloco seguinte por cima, que é o "bug" ao clicar. ----------------------------------------------------------- */ .wt-collapse__target{ max-height:0; overflow:hidden; margin-top:0; margin-bottom:0; transition:max-height .3s ease, opacity .2s ease; opacity:0; } .wt-collapse__trigger--active + .wt-collapse__target{ max-height:200vh; /* valor animável; o 100% era o bug */ margin-top:0; margin-bottom:0; opacity:1; } /* Navegadores que sabem animar até altura automática ganham a versão correta, sem o salto do 200vh. Os outros ficam no 200vh. */ @supports (interpolate-size: allow-keywords){ :root{ interpolate-size: allow-keywords; } .wt-collapse__trigger--active + .wt-collapse__target{ max-height:max-content; } } /* O ícone + / − precisa reagir ao estado aberto. */ .wt-collapse__trigger .svg-icon--plus .icon-plus-x{ transform-origin:center; transition:transform .3s ease, opacity .3s ease; } .wt-collapse__trigger--active .svg-icon--plus .icon-plus-x{ opacity:0; transform:rotate(90deg); } .wt-collapse__trigger{ transition:color .2s ease; } .wt-collapse__trigger:hover .wt-collapse__trigger__title{ color:#ff1c80; } /* ----------------------------------------------------------- 2) BORDAS LATERAIS DO SITE (desktop largo) O critical.css põe "border-width:0 1px" no , que fica travado em --hero-max-width. Em telas mais largas que isso sobram duas faixas com um risco cinza de cada lado. ----------------------------------------------------------- */ body{ border-width:0; max-width:none; } /* O header fica no bloco