/* ===== MOBILE: aparência do accordion ===== */
@media (max-width:1024px){

  /* Remove setas/pseudo-elementos do tema que possam conflitar */
  .mobile-menu a::after,
  .menu-mobile a::after,
  .nav-mobile a::after,
  nav a::after,
  .menu a::after { content: none !important; }

  /* Garante que o <li> comporte um botão absoluto à direita */
  li.li-enhanced { position: relative !important; }

  /* Link da categoria com espaço para a seta à direita */
  li.li-enhanced > a,
  li.li-enhanced > div > a {
    display: block !important;
    padding-right: 44px !important;
    box-sizing: border-box;
  }

  /* Botão da seta, sem fundo/borda/sombra e alinhado à direita */
  .li-toggle{
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
  }
  .li-toggle, .li-toggle *{
    background: transparent !important;
    box-shadow: none !important;
  }
  .li-toggle .arrow{
    font-size: 12px;
    line-height: 1;
    display: inline-block;
  }

  /* Submenus controlados via JS (fechados por padrão) */
  li.li-enhanced > ul,
  li.li-enhanced > div > ul{
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease;
  }

  /* Títulos longos não cortam */
  .mobile-menu li a,
  .menu-mobile li a,
  .nav-mobile li a,
  nav li a {
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
  }
}

/* ===== DESKTOP: não mostra o botão/accordion ===== */
@media (min-width:1025px){
  .li-toggle{ display:none !important; }
  li.li-enhanced > ul{ max-height: none !important; overflow: visible !important; }
}
/* ======= Seta maior, preta e clean (aplica-se a vários temas) ======= */
@media (max-width:1024px){

  /* remove pseudo-setas conflitantes do tema */
  .mobile-menu a::after,
  .menu-mobile a::after,
  .nav-mobile a::after,
  nav .menu a::after,
  nav li a::after,
  .menu a::after {
    content: none !important;
  }

  /* garante espaço para a seta no link */
  li.li-enhanced > a,
  li.li-enhanced > div > a,
  .menu li.has-sub > a,
  .menu__item.has-children > a {
    padding-right: 56px !important; /* espaço para o botão maior */
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* botão da seta (quando existe .li-toggle inserido via JS) */
  .li-toggle {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 40px !important;      /* área de toque confortável */
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 60 !important;
  }
  .li-toggle, .li-toggle * { background: transparent !important; box-shadow: none !important; }

  /* chevron SVG maior e preto */
  .li-toggle .arrow { width: 20px !important; height: 20px !important; display:inline-block !important; }
  .li-toggle .arrow svg { width:100% !important; height:100% !important; stroke:#000 !important; stroke-width:2.4 !important; fill:none !important; stroke-linecap:round !important; stroke-linejoin:round !important; }

  /* se tema ainda usar pseudo-elemento ::after, usamos um SVG como background (fallback) */
  .menu li.has-sub > a::after,
  .menu__item.has-children > a::after,
  nav li.has-sub > a::after {
    content: '' !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin-left: 8px !important;
    vertical-align: middle !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    /* SVG inline (preto chevron) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>") !important;
  }

  /* garante comportamento visual do submenu (controlado pelo JS) */
  li.li-enhanced > ul,
  li.li-enhanced > div > ul,
  .menu li.has-sub > ul {
    overflow: hidden;
    max-height: 0;
    transition: max-height .28s ease;
  }
}

/* Desktop: mantém padrão nativo (sem botão) */
@media (min-width:1025px){
  .li-toggle { display: none !important; }
  li.li-enhanced > ul, .menu li.has-sub > ul { max-height: none !important; overflow: visible !important; }
}