/* ===== Gigantic mega-menu v4 — desktop =====
   Carregado via <link ?v=> no header (entra no bundle Lightning content-hashed).
   v4: corrige ENCAVALAMENTO dos títulos — eles herdavam white-space:nowrap de
   .ul-top-items (regra do topo) e não quebravam, vazando sobre a coluna vizinha.
   Fix: white-space:normal nos TÍTULOS + overflow:hidden na coluna (rede de segurança).
   TRAVA: nenhuma largura forçada em [class*=col-md-] genérico — só nas colunas de
   categoria (.sub-item2-category-content/.sub-item2-content), nunca wrappers full-width. */

/* painel branco sólido + borda laranja + respiro.
   (o box-shadow ±1000px que cobre a barra vermelha vem da regra .sub-menu-container
    do a11y-fixes.css, mais específica — não mexer.) */
.horizontal-menu .mega-menu-container,.pt-menu .mega-menu-container,.pt-menu .sub-menu-container{background:#fff!important;border-top:3px solid #ff7a00!important;z-index:999!important;padding:18px 8px!important}

/* TIPOGRAFIA: mata o itálico que o tema aplica nos títulos (.a-mega-second-link) —
   itálico em menu de navegação é datado/ilegível; grandes e-commerces usam fonte RETA. */
.horizontal-menu .mega-menu-container,.horizontal-menu .mega-menu-container *{font-style:normal!important}

/* TÍTULO da categoria = laranja, QUEBRA em até 2 linhas dentro da coluna.
   white-space:normal mata o nowrap herdado; min-height alinha o início dos subitens.
   Só esta regra toca o a-mega-second-link → não é sobrescrita pelos subitens. */
.horizontal-menu .mega-menu-container .menu-cat-title,.horizontal-menu .mega-menu-container .a-mega-second-link,.horizontal-menu .mega-menu-container h4,.horizontal-menu .mega-menu-container .html-title{color:#e8650a!important;font-size:14px!important;font-weight:500!important;line-height:1.4!important;letter-spacing:.2px!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;opacity:1!important;display:block!important;margin-bottom:14px!important;min-height:2.6em!important}

/* SUBITENS = cinza-escuro legível, respiro generoso.
   NÃO inclui .sub-item2-content a (pegaria o título). */
.horizontal-menu .mega-menu-container .a-mega-third-link,.horizontal-menu .mega-menu-container .sub-item3-content a,.horizontal-menu .mega-menu-container li a{color:#1f2937!important;font-size:13px!important;font-weight:400!important;line-height:1.8!important;padding:5px 0!important;white-space:normal!important;overflow-wrap:anywhere!important;opacity:1!important;display:block!important}

.horizontal-menu .mega-menu-container a:hover{color:#ff7a00!important}

/* COLUNA de categoria: gap horizontal (~30px entre vizinhas) + respiro vertical inferior
   + overflow:hidden como rede de segurança contra qualquer vazamento de texto.
   SEM forçar width — a largura segue do grid Bootstrap (col-md-2 = 16.66%). */
.horizontal-menu .mega-menu-container .sub-item2-content,.horizontal-menu .mega-menu-container .sub-item2-category-content{box-sizing:border-box!important;padding:0 15px 24px!important;min-width:0!important;overflow:hidden!important;word-break:break-word!important;overflow-wrap:anywhere!important}

/* float-stagger: 6 colunas/linha → cada 7ª "limpa" o float, mantendo as linhas alinhadas.
   Escopado SÓ às colunas de categoria (não afeta wrappers full-width). */
.horizontal-menu .mega-menu-container .sub-item2-category-content:nth-child(6n+1){clear:both!important}

/* === Padrão "célula clicável + hover" nas CATEGORIAS e subitens (mesmo das guias) ===
   Hover acende a célula (#fff4ec) e o link vira laranja → affordance de clique (+CTR).
   Tudo CSS no bundle, menu só no hover → PageSpeed neutro. */
.horizontal-menu .mega-menu-container .menu-cat-title{padding:6px 9px!important;margin-bottom:8px!important;border-radius:6px!important;transition:background .15s ease!important}
.horizontal-menu .mega-menu-container .menu-cat-title:hover{background:#fff4ec!important}
.horizontal-menu .mega-menu-container .menu-cat-title:hover .a-mega-second-link{color:#ff7a00!important}
.horizontal-menu .mega-menu-container .a-mega-third-link,.horizontal-menu .mega-menu-container .sub-item3-content a,.horizontal-menu .mega-menu-container li a{padding-left:9px!important;padding-right:9px!important;border-radius:6px!important;transition:background .15s ease!important}
.horizontal-menu .mega-menu-container .a-mega-third-link:hover,.horizontal-menu .mega-menu-container .sub-item3-content a:hover,.horizontal-menu .mega-menu-container li a:hover{background:#fff4ec!important}

/* === BLOCO HTML "Guias de suplementação" (col-md-3 no mega de Suplementos) ===
   Itens são <p><a><strong>Título</strong></a><br><span style="...color:#888">descrição</span>,
   com estilos inline feios. !important vence o inline. Escopado a .sub-item2-content p
   (os títulos de categoria ficam em span.menu-cat-title, NÃO em <p> → não são afetados). */
/* item = "linha clicável": padding + hover acende a linha inteira (affordance → +CTR).
   Tudo CSS no bundle (zero request/JS) → PageSpeed neutro; menu só renderiza no hover. */
.horizontal-menu .mega-menu-container .sub-item2-content p{margin:0 0 6px!important;padding:7px 9px!important;line-height:1.4!important;border-radius:6px!important;transition:background .15s ease!important}
.horizontal-menu .mega-menu-container .sub-item2-content p:hover{background:#fff4ec!important}
.horizontal-menu .mega-menu-container .sub-item2-content p a,.horizontal-menu .mega-menu-container .sub-item2-content p a strong{color:#111827!important;font-size:14px!important;font-weight:600!important;line-height:1.35!important;text-decoration:none!important;letter-spacing:0!important}
.horizontal-menu .mega-menu-container .sub-item2-content p:hover a,.horizontal-menu .mega-menu-container .sub-item2-content p:hover a strong{color:#ff7a00!important}
/* descrição: reta, 12.5px, #4b5563 (~7:1 AA) com line-height arejado — subtítulo legível, não "fine print" */
.horizontal-menu .mega-menu-container .sub-item2-content p span{display:block!important;color:#4b5563!important;font-size:12.5px!important;font-weight:400!important;line-height:1.55!important;letter-spacing:.1px!important;margin-top:4px!important}