/* Styzen r27 — correção final da logo e do botão de menu no mobile. */
@media(max-width:720px){
  .top{position:sticky!important;top:0!important;z-index:1000!important}
  .top-main{
    width:100%!important;max-width:none!important;min-height:72px!important;
    padding:0 12px!important;margin:0!important;
    display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:space-between!important;
    gap:8px!important
  }

  /* Mostra a marca inteira sem cortar o nome STYZEN. */
  .top-main .brand,
  .brand{
    width:112px!important;min-width:112px!important;height:68px!important;flex:0 0 112px!important;
    margin:0!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    overflow:hidden!important
  }
  .top-main .brand img,
  .brand img{
    display:block!important;
    width:88px!important;min-width:88px!important;height:68px!important;
    max-width:none!important;max-height:none!important;
    object-fit:contain!important;object-position:center!important;
    transform:scale(1.60)!important;transform-origin:center center!important;
    filter:saturate(1.45) contrast(1.15) brightness(1.10) drop-shadow(0 3px 8px rgba(0,0,0,.16))!important
  }
  html[data-theme="light"] .top-main .brand img,
  html[data-theme="light"] .brand img{
    filter:saturate(1.22) contrast(1.06) brightness(.98) drop-shadow(0 3px 7px rgba(8,40,79,.10))!important
  }

  /* Três barras reais, centralizadas e com área de toque confortável. */
  .menu-toggle{
    position:static!important;
    display:inline-flex!important;flex-direction:column!important;
    align-items:center!important;justify-content:center!important;
    gap:4px!important;
    width:46px!important;height:46px!important;min-width:46px!important;flex:0 0 46px!important;
    margin:0!important;padding:0!important;
    border:1px solid var(--line-strong)!important;border-radius:12px!important;
    background:var(--surface-2)!important;
    box-shadow:0 7px 18px rgba(0,0,0,.14)!important
  }
  .menu-toggle span{
    display:block!important;flex:0 0 auto!important;
    width:22px!important;height:2px!important;min-height:2px!important;
    margin:0!important;padding:0!important;border-radius:999px!important;
    background:var(--ink)!important;opacity:1!important;
    transform:none!important;transition:transform .18s ease,opacity .18s ease!important
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)!important}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0!important}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)!important}

  .top-navigation{
    order:3!important;width:100%!important;flex:0 0 100%!important
  }
}

@media(max-width:420px){
  .top-main{min-height:70px!important;padding-inline:11px!important}
  .top-main .brand,.brand{width:104px!important;min-width:104px!important;height:66px!important;flex-basis:104px!important}
  .top-main .brand img,.brand img{width:84px!important;min-width:84px!important;height:66px!important;transform:scale(1.56)!important}
  .menu-toggle{width:44px!important;height:44px!important;min-width:44px!important;flex-basis:44px!important}
  .menu-toggle span{width:21px!important}
}