/* Category pills stay above the card layout. Burger menus use the page's own menus again. */
body.home #sample-grid .video-card.is-chip-off,
body.home.home-preview #sample-grid .video-card.is-chip-off,
body.home #sample-grid .video-card[hidden] {
  display: none !important;
}
.chips .chip,
#preview-chips .chip {
  cursor: pointer;
}
#chip-empty {
  margin: 4px 16px 20px;
  color: #5c6573;
  font-size: 15px;
  line-height: 1.4;
}
#chip-empty[hidden] { display: none !important; }

@media (min-width: 821px) {
  /* Desktop menu covers the header and the language bar. Phone drawer is unchanged. */
  body.menu-open { overflow: hidden; }
  body.home.home-preview.menu-open nav.sidebar,
  body.home.menu-open nav.sidebar,
  body.menu-open nav.sidebar {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    z-index: 430 !important;
  }
  body.menu-open .menu-scrim:not([hidden]) {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 420 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(18, 22, 31, 0.45) !important;
    cursor: pointer;
  }
  .menu-scrim[hidden] { display: none !important; }
  body.menu-open .app-bar,
  body.menu-open .lang-bar,
  body.menu-open .lang-bar[data-collapsed="false"] {
    z-index: 40 !important;
  }
  body.home.home-preview.menu-open #preview-sidebar,
  body.menu-open #preview-sidebar {
    top: 0 !important;
    z-index: 440 !important;
  }
  body.home .channel-page,
  body[data-zz-page="studio"] .channel-page {
    padding-top: 28px !important;
  }
}

/* zz-stack: menu and popups above the language bar. Guest and signed in. */
html body.menu-open .lang-bar,
html body.menu-open .lang-bar .lang-pills,
html body.home.menu-open .lang-bar,
html body.home.menu-open .lang-bar[data-collapsed="false"],
html body.home.home-preview.menu-open .lang-bar,
html body.home.home-preview.menu-open .lang-bar[data-collapsed="false"],
html body.home.home-preview.menu-open .lang-bar .lang-pills,
html body.lang-fullnames.menu-open .lang-bar,
html body.lang-fullnames.menu-open .lang-bar[data-collapsed="false"],
html body.lang-fullnames.menu-open .lang-bar[data-collapsed="false"] .lang-pills,
html body.home:not(.login-body).menu-open .lang-bar,
html body.home:not(.login-body).menu-open .lang-bar[data-collapsed="false"],
html body.home:not(.login-body).menu-open .lang-bar[data-collapsed="false"] .lang-pills,
html body.zz-guest.menu-open .lang-bar,
html body.settings-open .lang-bar,
html body:has(#zz-login-pop:not([hidden])) .lang-bar,
html body:has(.zz-welcome:not([hidden])) .lang-bar,
html body:has(#zz-fb:not([hidden])) .lang-bar,
html body:has(.settings-panel:not([hidden])) .lang-bar {
  z-index: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html body.menu-open .menu-scrim,
html body.menu-open .menu-scrim:not([hidden]),
html body.home.menu-open .menu-scrim,
html body.home.home-preview.menu-open .menu-scrim {
  z-index: 9000 !important;
}
html body.menu-open nav.sidebar,
html body.home.menu-open nav.sidebar,
html body.home.home-preview.menu-open nav.sidebar,
html body.home.home-preview.menu-open nav.sidebar:not(.mini),
html body.home.home-preview.menu-open #preview-sidebar,
html body.menu-open #preview-sidebar {
  z-index: 9100 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  background: #fff !important;
}
html.z-dark body.menu-open nav.sidebar,
html.z-dark body.menu-open #preview-sidebar { background: #171c24 !important; }
html body .zz-welcome,
html body #zz-login-pop,
html body .settings-panel,
html body #zz-fb { z-index: 9200 !important; }