/* 22Media Premium Pro v6.58 — mobile header, quick actions, scroll polish and ad no-fill cleanup */

/* Native horizontal scrollbars should never look like desktop browser chrome. */
.m22-trending-items,
.m22-weather-grid{
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.m22-trending-items::-webkit-scrollbar,
.m22-weather-grid::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

@media (max-width:980px){
  /* Reserve explicit columns for menu, centered wordmark and search/account actions. */
  .m22-header-v66 .m22-header-main-v6{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) 84px!important;
    gap:7px!important;
    min-height:72px!important;
    height:72px!important;
    padding:0 4px!important;
    align-items:center!important;
  }
  .m22-header-v66 .m22-menu-toggle{
    grid-column:1!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    justify-self:start!important;
    position:static!important;
    margin:0!important;
  }
  .m22-header-v66 .m22-brand-horizontal{
    grid-column:2!important;
    position:static!important;
    inset:auto!important;
    transform:none!important;
    margin:0!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    justify-self:stretch!important;
    display:flex!important;
    justify-content:center!important;
    overflow:visible!important;
    z-index:6!important;
  }
  .m22-header-v66 .m22-brand-square{display:none!important}
  .m22-header-v66 .m22-brand-wordmark{
    display:flex!important;
    min-width:0!important;
    width:100%!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .m22-header-v66 .m22-brand-wordmark .m22-logo-image{
    width:min(176px,100%)!important;
    max-width:100%!important;
    height:48px!important;
    object-fit:contain!important;
    object-position:center!important;
    border-radius:0!important;
  }
  .m22-header-v66 .m22-brand-caption{display:none!important}
  .m22-header-v66 .m22-header-actions-v66{
    grid-column:3!important;
    justify-self:end!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:4px!important;
    width:84px!important;
    min-width:84px!important;
    position:static!important;
    z-index:12!important;
  }
  .m22-header-v66 .m22-header-actions-v66>.m22-header-compact-link,
  .m22-header-v66 .m22-header-actions-v66>.m22-theme-toggle{display:none!important}
  .m22-header-v66 .m22-header-actions-v66 .m22-search-toggle,
  .m22-header-v66 .m22-header-actions-v66 .m22-account-btn{
    display:grid!important;
    place-items:center!important;
    flex:0 0 40px!important;
    width:40px!important;
    min-width:40px!important;
    max-width:40px!important;
    height:40px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
  }
  .m22-header-v66 .m22-header-actions-v66 .m22-account-btn span{display:none!important}
}

@media (max-width:700px){
  /* Only 22 / Watch / Live: one balanced row, no icon/text clipping. */
  .m22-home-v7 .m22-home-commandbar,
  .m22-home-commandbar{
    padding:10px!important;
    border-radius:18px!important;
    overflow:visible!important;
    min-height:0!important;
  }
  .m22-home-v7 .m22-home-command-links,
  .m22-home-command-links{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:8px!important;
  }
  .m22-home-v7 .m22-home-command-links a,
  .m22-home-command-links a{
    min-width:0!important;
    width:100%!important;
    height:56px!important;
    padding:0 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;
    border-radius:14px!important;
    overflow:hidden!important;
  }
  .m22-home-command-links a>i:not(:empty),
  .m22-home-command-links a>i.fa-solid{
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
    margin:0!important;
    border-radius:10px!important;
    display:grid!important;
    place-items:center!important;
    font-size:14px!important;
  }
  .m22-home-command-links a.is-live>i{
    position:relative!important;
    flex:0 0 32px!important;
    width:32px!important;
    height:32px!important;
    margin:0!important;
    border-radius:50%!important;
    background:#fff0f3!important;
    box-shadow:none!important;
  }
  .m22-home-command-links a.is-live>i:after{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:9px;height:9px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#e82f51;
    box-shadow:0 0 0 6px rgba(232,47,81,.10);
  }
  .m22-home-command-links span{
    display:block!important;
    min-width:0!important;
    align-self:auto!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }
  .m22-home-command-links small{display:none!important}

  /* Trending becomes a clean swipe rail; title is a compact chip, not a half blue bar. */
  .m22-home-v7 .m22-trending-strip,
  .m22-trending-strip{
    display:block!important;
    position:relative!important;
    margin:18px 0 28px!important;
    padding:10px!important;
    overflow:hidden!important;
    border-radius:18px!important;
    background:var(--m22-card)!important;
  }
  .m22-home-v7 .m22-trending-title,
  .m22-trending-title{
    width:max-content!important;
    min-width:0!important;
    max-width:100%!important;
    height:34px!important;
    min-height:34px!important;
    flex-basis:auto!important;
    margin:0 0 9px!important;
    padding:0 13px!important;
    border-radius:10px!important;
    display:inline-flex!important;
    justify-content:flex-start!important;
    gap:8px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  .m22-trending-title:after{width:6px!important;height:6px!important;box-shadow:0 0 0 4px rgba(65,225,143,.12)!important}
  .m22-trending-items{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    padding:0 1px 2px!important;
  }
  .m22-home-v7 .m22-trending-items a,
  .m22-trending-items a{
    flex:0 0 min(76vw,265px)!important;
    min-width:0!important;
    min-height:62px!important;
    padding:11px 12px!important;
    border:1px solid var(--m22-line)!important;
    border-radius:13px!important;
    background:rgba(255,255,255,.62)!important;
    scroll-snap-align:start!important;
  }
  .m22-trending-items a:last-child{border-right:1px solid var(--m22-line)!important}

  /* Weather is swipeable without the old thick browser scrollbar. */
  .m22-weather-center{
    padding:16px!important;
    border-radius:20px!important;
    overflow:hidden!important;
  }
  .m22-weather-grid{
    display:flex!important;
    width:100%!important;
    max-width:100%!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x proximity!important;
    padding:0 1px 3px!important;
  }
  .m22-weather-grid article{
    display:grid!important;
    flex:0 0 min(74vw,245px)!important;
    min-width:205px!important;
    scroll-snap-align:start!important;
  }
}

@media (max-width:430px){
  .m22-header-v66 .m22-header-main-v6{
    grid-template-columns:42px minmax(0,1fr) 78px!important;
    gap:5px!important;
    padding:0 2px!important;
  }
  .m22-header-v66 .m22-menu-toggle{width:40px!important;height:40px!important;min-width:40px!important}
  .m22-header-v66 .m22-brand-wordmark .m22-logo-image{width:min(154px,100%)!important;height:45px!important}
  .m22-header-v66 .m22-header-actions-v66{width:78px!important;min-width:78px!important;gap:3px!important}
  .m22-header-v66 .m22-header-actions-v66 .m22-search-toggle,
  .m22-header-v66 .m22-header-actions-v66 .m22-account-btn{flex-basis:37px!important;width:37px!important;min-width:37px!important;max-width:37px!important;height:37px!important}
  .m22-home-command-links{gap:6px!important}
  .m22-home-command-links a{height:54px!important;padding:0 6px!important;gap:6px!important}
  .m22-home-command-links a>i.fa-solid,.m22-home-command-links a.is-live>i{flex-basis:30px!important;width:30px!important;height:30px!important}
  .m22-home-command-links span{font-size:9.5px!important}
}

@media (max-width:365px){
  .m22-header-v66 .m22-brand-wordmark .m22-logo-image{width:min(138px,100%)!important}
  .m22-home-command-links a{padding:0 4px!important;gap:4px!important}
  .m22-home-command-links a>i.fa-solid,.m22-home-command-links a.is-live>i{flex-basis:28px!important;width:28px!important;height:28px!important}
  .m22-home-command-links span{font-size:9px!important}
}

/* Dark-mode surfaces for the new mobile rails. */
body.m22-dark .m22-trending-items a,[data-theme="dark"] .m22-trending-items a{background:#121a28!important;border-color:#29364a!important}