/* ================= OPUS Mega Menu – CSS COMPLETO (v1.0.6) ================= */
:root{
  --opus-accent:#E30613;
  --opus-hover:#000;
}

@media (min-width:1025px){

  .qodef-page-header,
  .qodef-menu-area{
    overflow: visible !important;
  }

  li.opus-mega{
    position: static !important;
  }

  .opus-mega-portal{
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: calc(var(--header-h, 80px) + 10px);
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 99999 !important;

    background: #fff !important;
    border-top: 1px solid #eee;
    box-shadow: 0 10px 24px rgba(0,0,0,.06);

    display:block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  }

  .opus-mega-portal.is-open{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .opus-mega-portal.mega-hidden{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(8px) !important;
  }

  .opus-mega-portal > .inner{
    width: 100% !important;
    max-width: none !important;
    padding:20px clamp(22px,3vw,36px) 24px clamp(60px,6vw,96px) !important;

    display:grid !important;
    grid-template-columns: 240px repeat(6, minmax(128px,1fr));
    column-gap:12px;
    row-gap:14px;
    align-items:start !important;

    background:#fff !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .opus-mega-promo{
    grid-column:1 / span 1;
    align-self:stretch;
    border-right:1px solid #eee;
    padding-right:10px;
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
    overflow:hidden;
  }

  .opus-mega-promo a{
    display:block;
    text-decoration:none;
  }

  .opus-mega-promo img{
    width:100%;
    height:auto;
    display:block;
    border-radius:4px;
    object-fit:cover;
  }

  .opus-mega-promo .caption{
    font-size:12px;
    line-height:1.3;
    color:#555;
  }

  .opus-mega-portal .opus-mega-col{
    min-width:0;
    margin:0 !important;
    padding:0 !important;
  }

  .opus-mega-portal .opus-mega-col > a.opus-mega-title,
  .opus-mega-portal .opus-mega-col > a.is-category{
    display:block !important;
    font-size:15px !important;
    font-weight:300 !important;
    text-transform:uppercase !important;
    letter-spacing:0 !important;
    margin:0 0 6px 0 !important;
    color:#111 !important;
    text-decoration:none !important;
    line-height:1.1 !important;
  }

  .opus-mega-portal .opus-mega-col ul{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    list-style:none !important;
  }

  .opus-mega-portal .opus-mega-col li{
    margin:0 !important;
    padding:0 !important;
    text-indent:0 !important;
    list-style:none !important;
  }

  .opus-mega-portal .opus-mega-col ul a,
  .opus-mega-portal .opus-mega-link{
    display:block !important;
    padding:4px 0 !important;
    font-size:13px !important;
    line-height:1.5 !important;
    font-weight:200 !important;
    color:#222 !important;
    text-decoration:none !important;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
  }

  .opus-mega-portal .opus-mega-col ul a:hover,
  .opus-mega-portal .opus-mega-link:hover{
    color:var(--opus-hover) !important;
    text-decoration:underline !important;
  }

  .opus-mega-portal .opus-mega-col ul a.is-featured{
    color: var(--opus-accent) !important;
    font-weight:200 !important;
  }

  .opus-mega-portal .opus-mega-col ul a.is-featured:hover{
    color: var(--opus-accent) !important;
    text-decoration: underline !important;
  }

  /* hover animado dos títulos no portal */
  .opus-mega-portal .opus-mega-col > a.opus-mega-title{
    display:inline-block !important;
    position:relative;
    transition:color .15s ease;
  }

  .opus-mega-portal .opus-mega-col > a.opus-mega-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-2px;
    height:1.5px;
    width:0;
    background:currentColor;
    transition:width .22s ease;
  }

  .opus-mega-portal .opus-mega-col > a.opus-mega-title:hover::after,
  .opus-mega-portal .opus-mega-col > a.opus-mega-title:focus-visible::after{
    width:100%;
  }

  .opus-mega-portal .opus-mega-col > a.opus-mega-title:hover{
    color:var(--opus-hover, #000) !important;
  }
}

@media (max-width:1024px){
  li.opus-mega > .second{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
  }

  li.opus-mega > .second > .inner{
    display:block !important;
    padding:0 !important;
    max-width:none !important;
  }

  .opus-mega-promo{
    display:none !important;
  }

  .opus-mega-portal{
    display:none !important;
  }

  li.opus-mega .opus-mega-col > a.opus-mega-title{
    position:relative;
    text-decoration:none !important;
  }

  li.opus-mega .opus-mega-col > a.opus-mega-title::after{
    content:"";
    position:absolute;
    left:0;
    bottom:6px;
    height:1.5px;
    width:0;
    background:currentColor;
    transition:width .22s ease;
  }

  li.opus-mega .opus-mega-col.open > a.opus-mega-title::after{
    width:100%;
  }
}


/* hover suave nas subcategorias */
.opus-mega-portal .opus-mega-col ul a{
  position:relative;
  transition:color .15s ease;
}

.opus-mega-portal .opus-mega-col ul a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  height:1px;
  width:0;
  background:currentColor;
  transition:width .22s ease;
}

.opus-mega-portal .opus-mega-col ul a:hover::after{
  width:100%;
}


/* FIX underline duplicado */
.opus-mega-portal .opus-mega-col ul a{
  text-decoration:none !important;
}

/* hover subcategorias (apenas 1 linha, contida no texto) */
.opus-mega-portal .opus-mega-col ul a::after{
  height:1px !important;
  width:0;
  max-width:100%;
}

.opus-mega-portal .opus-mega-col ul a:hover::after{
  width:100%;
}

/* suavizar underline das categorias */
.opus-mega-portal .opus-mega-col > a.opus-mega-title::after{
  height:1px !important;
  opacity:.6;
}



/* ===== Ajuste final do hover das subcategorias ===== */
/* remove qualquer underline nativo no hover */
.opus-mega-portal .opus-mega-col ul a,
.opus-mega-portal .opus-mega-col ul a:hover,
.opus-mega-portal .opus-mega-link,
.opus-mega-portal .opus-mega-link:hover{
  text-decoration:none !important;
}

/* faz o link ocupar só a largura do texto para o underline terminar junto dele */
.opus-mega-portal .opus-mega-col ul a,
.opus-mega-portal .opus-mega-link{
  display:inline-block !important;
  width:auto !important;
  max-width:100%;
  position:relative;
}

/* mantém o item da lista respirado sem esticar o underline */
.opus-mega-portal .opus-mega-col li{
  display:block !important;
  width:100%;
}

/* underline animado apenas da largura do texto */
.opus-mega-portal .opus-mega-col ul a::after,
.opus-mega-portal .opus-mega-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px !important;
  background:currentColor;
  transition:width .22s ease;
}

.opus-mega-portal .opus-mega-col ul a:hover::after,
.opus-mega-portal .opus-mega-col ul a:focus-visible::after,
.opus-mega-portal .opus-mega-link:hover::after,
.opus-mega-portal .opus-mega-link:focus-visible::after{
  width:100%;
}

/* ===== Fix underline duplo nos itens vermelhos ===== */
.opus-mega-portal .opus-mega-col ul a.is-featured,
.opus-mega-portal .opus-mega-col ul a.is-featured:hover,
.opus-mega-portal .opus-mega-col ul a.is-featured:focus-visible{
  text-decoration:none !important;
  box-shadow:none !important;
  border-bottom:0 !important;
  background-image:none !important;
}

.opus-mega-portal .opus-mega-col ul a.is-featured::before{
  content:none !important;
}

.opus-mega-portal .opus-mega-col ul a.is-featured::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:0;
  height:1px !important;
  background:currentColor;
  transition:width .22s ease;
}

.opus-mega-portal .opus-mega-col ul a.is-featured:hover::after,
.opus-mega-portal .opus-mega-col ul a.is-featured:focus-visible::after{
  width:100%;
}
