/* Product-first mobile chrome: glass masthead, conventional Menu, four-bay dock.
   Class names stay --open-wall for contract stability. No lumber photos. */
@media (max-width: 760px) {
  body.stud-v3 {
    --ow-head: 64px;
    --ow-lime: var(--v4-lime, #c8f53f);
    --ow-card: #0c1117;
    --ow-locator: 170ms;

    > .page-shell:has(> .site-header--open-wall) {
      top: 0 !important;
      width: 100% !important;
      max-width: none !important;
      padding: 0 !important;
    }

    &.home-page .v4-hero__inner--finder { padding-top: 16px !important; }

    .site-header.site-header--open-wall {
      position: relative !important;
      width: 100% !important;
      height: var(--ow-head) !important;
      min-height: var(--ow-head) !important;
      max-height: var(--ow-head) !important;
      padding: 0 !important;
      overflow: visible !important;
      border: 0 !important;
      border-bottom: 1px solid #ffffff14 !important;
      background: rgba(5, 7, 10, 0.86) !important;
      box-shadow: 0 10px 28px #0008 !important;
      backdrop-filter: blur(22px) saturate(1.35) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;

      &::after {
        display: block !important;
        position: absolute !important;
        inset: auto 0 0 !important;
        height: 2px !important;
        pointer-events: none !important;
        content: "" !important;
        background: linear-gradient(90deg, transparent, #c8f53f80 28%, #a06bff66 72%, transparent) !important;
      }

      .shell-wrap.shell-wrap--open-wall {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        width: 100% !important;
        height: var(--ow-head) !important;
        min-height: var(--ow-head) !important;
        max-height: var(--ow-head) !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;

        > :is(.shell-nav, .shell-find-command, .shell-search, .shell-buy-stud) { display: none !important; }
      }

      .brandmark {
        width: auto !important;
        min-width: 0 !important;
        min-height: 40px !important;
        flex: 1 1 auto !important;
        overflow: visible;
        color: #fff !important;
        text-shadow: none;
      }

      .brand-symbol {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        flex: 0 0 40px;
        overflow: hidden;
        border: 1px solid #ffffffd6;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 6px 16px #0007, 0 0 0 2px #c8f53f2e;

        img { border-radius: 8px; background: #fff; }
      }

      .brand-copy {
        min-width: 0;
        gap: 3px !important;
      }

      .brand-copy strong {
        overflow: visible;
        color: #f7f8f4 !important;
        font-size: 20px !important;
        font-weight: 950 !important;
        line-height: .98 !important;
        letter-spacing: -.04em;
        white-space: nowrap;
      }

      .brand-copy .brand-name-stud {
        display: inline !important;
        color: var(--ow-lime) !important;
        font: inherit !important;
      }

      .brand-copy > .brand-tagline {
        display: none !important;
      }

      .shell-nav,
      .shell-find-command,
      .shell-buy-stud {
        display: none !important;
      }
    }

    .shell-wrap--open-wall > :is(.shell-menu, .shell-menu-static) {
      position: relative !important;
      z-index: 4 !important;
      display: inline-flex !important;
      flex-direction: row !important;
      width: 82px !important;
      height: 44px !important;
      min-width: 82px !important;
      min-height: 44px !important;
      flex: 0 0 82px !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 8px !important;
      margin-left: auto !important;
      padding: 0 10px !important;
      color: #f5f7f4 !important;
      border: 1px solid #ffffff22 !important;
      border-radius: 12px !important;
      background: #ffffff0d !important;
      box-shadow: inset 0 1px #ffffff14 !important;
      transform: none !important;
      transition: color 140ms ease, border-color 140ms ease, background 140ms ease !important;

      &[aria-expanded="true"] {
        color: var(--ow-lime) !important;
        border-color: #c8f53f8c !important;
        background: #c8f53f18 !important;
        box-shadow: 0 0 0 1px #c8f53f2e, inset 0 1px #ffffff14 !important;
      }

      .shell-menu-glyph {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 22px !important;
        height: 16px !important;
        min-width: 22px !important;
        min-height: 16px !important;
        flex: 0 0 22px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        transform: none !important;

        &::before, &::after { display: none !important; content: none !important; }
        i {
          position: absolute;
          left: 50%;
          display: block;
          height: 2px;
          border-radius: 9px;
          background: currentcolor;
          transform: translateX(-50%);
          transition: opacity 120ms ease, transform 160ms cubic-bezier(.2,.8,.2,1);
          &:nth-child(1) { top: 1px; width: 22px; }
          &:nth-child(2) { top: 7px; width: 16px; }
          &:nth-child(3) { top: 13px; width: 22px; }
        }
      }

      &[aria-expanded="true"] .shell-menu-glyph i {
        &:nth-child(1) { transform: translate(-50%, 6px) rotate(45deg); }
        &:nth-child(2) { opacity: 0; transform: translateX(-50%) scaleX(.45); }
        &:nth-child(3) { transform: translate(-50%, -6px) rotate(-45deg); }
      }

      [data-shell-menu-label] {
        display: block;
        min-width: 34px;
        color: inherit;
        font-size: 9px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: .13em;
        text-align: right;
        text-transform: uppercase;
        white-space: nowrap;
      }
      &[aria-expanded="true"] [data-shell-menu-label] { letter-spacing: .08em; }
    }

    .site-tabbar.site-tabbar--open-wall {
      position: fixed !important;
      z-index: 170 !important;
      right: auto !important;
      bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
      left: 50% !important;
      width: calc(min(100vw, 430px) - 24px) !important;
      max-width: 406px !important;
      height: 68px !important;
      min-height: 68px !important;
      max-height: 68px !important;
      grid-template: 52px/repeat(4, minmax(0, 1fr)) !important;
      gap: 6px !important;
      margin: 0 !important;
      padding: 8px !important;
      overflow: hidden !important;
      border: 1px solid #ffffff1f !important;
      border-radius: 20px !important;
      background: rgba(8, 11, 16, 0.9) !important;
      box-shadow: 0 18px 40px #000c, inset 0 1px #ffffff18 !important;
      backdrop-filter: blur(22px) saturate(1.3) !important;
      -webkit-backdrop-filter: blur(22px) saturate(1.3) !important;
      transform: translateX(-50%) !important;
      transition: transform 220ms ease, opacity 180ms ease, visibility 220ms !important;
      isolation: isolate;

      &::before { display: none !important; content: none !important; }

      > .site-tab {
        position: relative !important;
        z-index: 2 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        justify-self: stretch !important;
        align-self: stretch !important;
        grid-template: 22px 12px/1fr !important;
        gap: 3px !important;
        margin: 0 !important;
        padding: 5px 2px 4px !important;
        overflow: hidden !important;
        color: #9aa5b1 !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        transition: color 140ms ease, background 140ms ease, transform 90ms ease !important;

        &::before, &::after { display: none !important; content: none !important; }
        &:is(.active, .is-active, .is-current) {
          color: #101503 !important;
          background: var(--ow-lime) !important;
          box-shadow: 0 8px 18px #c8f53f33 !important;
        }
        &:is(.active, .is-active, .is-current) .site-tab-icon { color: inherit !important; background: transparent !important; }
        &:active { transform: translateY(1px) !important; }
      }

      .site-tab-icon svg { width: 18px !important; height: 18px !important; stroke-width: 2.1px !important; }
      .site-tab-label { font-size: 10px !important; font-weight: 850 !important; white-space: nowrap; }
    }

    .site-tabbar-stud,
    .site-tabbar-stud--left,
    .site-tabbar-stud--right {
      display: none !important;
    }

    .site-tabbar-locator {
      position: absolute;
      z-index: 3;
      top: 8px;
      left: 8px;
      width: calc((100% - 34px)/4);
      height: 2px;
      border-radius: 9px;
      background: transparent;
      opacity: 0;
      pointer-events: none;
    }

    .site-tabbar--open-wall[data-active-key="home"] .site-tabbar-locator { transform: translateX(0); }
    .site-tabbar--open-wall[data-active-key="explore"] .site-tabbar-locator { transform: translateX(calc(100% + 6px)); }
    .site-tabbar--open-wall[data-active-key="find"] .site-tabbar-locator { transform: translateX(calc(200% + 12px)); }
    .site-tabbar--open-wall[data-active-key="events"] .site-tabbar-locator { transform: translateX(calc(300% + 18px)); }

    .shell-mobile-nav--open-wall[aria-hidden="true"] { display: none !important; }

    :is(.shell-menu, .shell-menu-static, .site-tabbar--open-wall a):focus-visible { outline: 3px solid var(--ow-lime) !important; outline-offset: 2px !important; }

    &:is(.menu-open, .site-keyboard-open, .site-dock-collapsed, .has-quick-preview-open, .has-ask-studboards-open, .has-featured-picker-open) .site-tabbar--open-wall,
    .site-tabbar--open-wall[data-keyboard-suppressed="true"] {
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translate(-50%, calc(100% + 24px)) !important;
    }
  }

  @media (max-width: 430px) {
    body.stud-v3 .site-header.site-header--open-wall {
      .brand-copy > .brand-tagline { display: none !important; }
    }
  }

  @media (max-width: 390px) {
    body.stud-v3 .site-header.site-header--open-wall {
      .shell-wrap--open-wall { padding-inline: 12px !important; }
    }
  }

  @media (max-width: 350px) {
    body.stud-v3 .site-header.site-header--open-wall {
      .shell-wrap--open-wall { padding-inline: 8px !important; }
      .brandmark { gap: 8px !important; }
      .brand-symbol { width: 36px !important; height: 36px !important; min-width: 36px !important; min-height: 36px !important; flex-basis: 36px !important; }
      .brand-copy strong { font-size: 17px !important; }
      .brand-copy > .brand-tagline { display: none !important; }
      .shell-nav { margin-left: 6px !important; }
      .shell-wrap--open-wall > :is(.shell-menu, .shell-menu-static) {
        width: 52px !important;
        min-width: 52px !important;
        flex-basis: 52px !important;
        padding: 0 8px !important;
        justify-content: center !important;
      }
      .shell-wrap--open-wall > :is(.shell-menu, .shell-menu-static) [data-shell-menu-label] { display: none !important; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.stud-v3 :is(.site-tabbar--open-wall, .site-tabbar-locator, .shell-menu, .shell-menu-static, .shell-menu-glyph i) { transition: none !important; }
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  body.stud-v3 .site-header.site-header--open-wall {
    .shell-wrap.shell-wrap--open-wall {
      grid-template-columns: minmax(180px, 1fr) auto auto !important;
      gap: 10px !important;
      width: calc(100% - 28px) !important;
    }

    .brand-copy > .brand-tagline { display: none !important; }
    .shell-find-command,
    .shell-menu,
    .shell-menu-static { display: none !important; }

    .shell-nav {
      display: inline-flex !important;
      gap: 4px !important;
      min-width: 0 !important;
    }

    .shell-buy-stud { display: none !important; }
    .shell-nav .shell-nav-link { min-height: 44px !important; padding: 8px 12px !important; }
    .shell-nav .shell-nav-thumb { display: none !important; }
  }

  body.stud-v3 .site-tabbar.site-tabbar--open-wall {
    z-index: 170 !important;
    right: auto !important;
    bottom: 10px !important;
    left: 50% !important;
    width: min(406px, calc(100vw - 24px)) !important;
    max-width: 406px !important;
    height: 68px !important;
    min-height: 68px !important;
    grid-template: 52px / repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    transform: translateX(-50%) !important;

    > .site-tab {
      height: 52px !important;
      min-height: 52px !important;
      grid-template: 22px 12px / 1fr !important;
      padding: 5px 2px 4px !important;
    }

    .site-tab-icon { width: 22px !important; height: 22px !important; }
    :is(.site-tabbar-stud, .site-tabbar-locator) { display: none !important; }
  }
}

@media (min-width: 761px) {
  body.stud-v3 .site-header.site-header--open-wall {
    .brand-copy .brand-name-stud {
      display: inline !important;
      color: var(--v4-lime, #c8f53f) !important;
      font: inherit !important;
    }

    .shell-buy-stud { display: none !important; }

    .shell-nav {
      display: inline-flex !important;
      align-items: center !important;
      justify-self: center !important;
      width: max-content !important;
      max-width: 100% !important;
      gap: 2px !important;
      padding: 4px !important;
      border: 1px solid #ffffff16 !important;
      border-radius: 999px !important;
      background: #ffffff0a !important;
    }

    .shell-nav .shell-nav-link {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 0 !important;
      min-width: 88px !important;
      min-height: 44px !important;
      padding: 8px 14px !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    .shell-nav .shell-nav-link.active {
      color: #f7f8f4 !important;
      background: #c8f53f22 !important;
      box-shadow: inset 0 0 0 1px #c8f53f55 !important;
    }

    .shell-nav .shell-nav-thumb {
      display: none !important;
    }
  }
}