/* U-867 folyt. (2026-09-07): body.mx-mobile-mode is kell a sima szélesség
   mellé, hogy asztali nagyításnál ne aktiválódjon (l. 00-dom-segedek.js). */
@media (max-width: 820px){
  body.mx-mobile-mode .header-account{ display:none!important; }
  body.mx-mobile-mode .header-account.open{
    display:flex!important; grid-column:1/-1!important; order:4!important;
    flex-direction:column!important; align-items:stretch!important; flex-wrap:nowrap!important;
    background:var(--panel)!important; border:1px solid var(--border)!important;
    border-radius:var(--radius-md)!important; padding:var(--space-3)!important; box-shadow:var(--shadow-md)!important;
    margin-top:var(--space-2)!important; position:relative!important; gap:0!important;
  }
  /* egységes "MENÜ" címke-fül, ugyanaz a minta, mint a "KARAKTER" dobozon
     (.header-group::before, l. fentebb) -- konzisztencia a két doboz közt. */
  body.mx-mobile-mode .header-account.open::before{
    content:"Menü"; position:absolute; top:-0.55rem; left:0.9rem;
    font-size:0.65rem; text-transform:uppercase; letter-spacing:0.06em;
    color:var(--dim-secondary); background:var(--panel); padding:0 0.3rem;
  }
  /* a journey-statebar (kaland-állapot pillék) NE keveredjen a menü-
     gombok közé -- külön sorban, elválasztóval a gombok fölött. */
  body.mx-mobile-mode .header-account.open .journey-statebar{
    order:-1; width:100%; padding-bottom:.5rem; margin-bottom:.4rem;
    border-bottom:1px solid var(--border-dim);
  }
  body.mx-mobile-mode .header-account.open .journey-statebar:empty{ display:none!important; }
  /* a 6 kategória-gomb EGY oszlopos, teljes szélességű listává rendezve
     -- a korábbi flex-wrap "rács" véletlenszerűen tört sorokat adott,
     ami nem nézett ki áttekinthető menünek. */
  body.mx-mobile-mode .header-account.open .mx-um-trg{
    width:100%!important; justify-content:flex-start!important;
    padding:.65rem .5rem!important; border-radius:8px!important; margin:0!important;
  }
  body.mx-mobile-mode .header-account.open .mx-um-trg + .mx-um-trg{ border-top:1px solid var(--border-dim); }
  body.mx-mobile-mode .header-account.open .mx-um-trg:active{ background:rgba(255,255,255,.06); }
}