/* =========================================================
   STEEL BALL — FINAL MOBILE HEADER SEARCH
   Replaces the old standalone/search-icon presentation.
   Mobile only. Desktop is untouched.
   ========================================================= */
@media (max-width:700px){
  .header{
    position:sticky !important;
    top:0 !important;
    width:100% !important;
    height:70px !important;
    min-height:70px !important;
    padding:9px 10px !important;
    box-sizing:border-box !important;
    z-index:4000 !important;
  }

  .header-inner{
    width:100% !important;
    max-width:none !important;
    height:52px !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
    direction:ltr !important;
  }

  /* Logo stays on the right side of the mobile header. */
  .logo-brand-wrap{
    grid-column:2 !important;
    grid-row:1 !important;
    justify-self:end !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    overflow:visible !important;
    white-space:nowrap !important;
  }

  .brand-s-mark{font-size:34px !important;line-height:.8 !important;}
  .brand-text-main,.brand-text-gold{font-size:23px !important;line-height:.94 !important;}

  /* The actual search bar is now a permanent part of the header. */
  .header-actions{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:stretch !important;
    align-self:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    direction:ltr !important;
  }

  .header-actions .mobile-searchbar{
    display:flex !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:44px !important;
    margin:0 !important;
    padding:0 11px !important;
    box-sizing:border-box !important;
    align-items:center !important;
    gap:8px !important;
    border:1px solid rgba(226,184,87,.30) !important;
    border-radius:13px !important;
    background:#101216 !important;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.012) !important;
    overflow:hidden !important;
  }

  .header-actions .mobile-searchbar i{
    flex:0 0 auto !important;
    color:var(--gold,#e2b857) !important;
    font-size:16px !important;
  }

  .header-actions .mobile-searchbar input{
    display:block !important;
    flex:1 1 auto !important;
    width:0 !important;
    min-width:0 !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#f4f4f4 !important;
    direction:rtl !important;
    text-align:right !important;
    font:inherit !important;
    font-size:12px !important;
  }

  .header-actions .mobile-searchbar input::placeholder{
    color:#85858b !important;
    opacity:1 !important;
  }

  /* Remove the old mobile search icon/menu/login controls. */
  .header-actions .search-toggle,
  .header-actions .mobile-menu-toggle,
  .header-actions .login-btn{
    display:none !important;
  }

  /* Remove the old large catalog search box on phones. */
  .catalog-toolbar .catalog-search,
  .catalog-section .catalog-search{
    display:none !important;
  }

  /* Search results become a compact dropdown below the header,
     never a second full-size search box. */
  .search-overlay{
    display:none !important;
  }

  .search-overlay.mobile-search-open{
    display:block !important;
    position:fixed !important;
    inset:auto 8px auto 8px !important;
    top:calc(70px + 8px) !important;
    width:auto !important;
    height:auto !important;
    max-height:calc(100svh - 100px) !important;
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    overflow:auto !important;
    z-index:4500 !important;
  }

  .search-overlay.mobile-search-open .search-overlay-inner{
    width:100% !important;
    max-width:none !important;
  }

  .search-overlay.mobile-search-open .search-overlay-bar{
    display:none !important;
  }

  .search-overlay.mobile-search-open .search-results{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    border:1px solid rgba(226,184,87,.20) !important;
    border-radius:14px !important;
    background:rgba(10,11,14,.98) !important;
    box-shadow:0 18px 45px rgba(0,0,0,.55) !important;
    overflow:hidden !important;
  }

  .search-overlay.mobile-search-open .search-result-item{
    grid-template-columns:44px minmax(0,1fr) auto !important;
    gap:9px !important;
    padding:9px !important;
  }

  .search-overlay.mobile-search-open .search-result-item img{
    width:44px !important;
    height:58px !important;
  }
}

@media (max-width:390px){
  .header{padding-inline:8px !important;}
  .header-inner{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr) !important;gap:6px !important;}
  .brand-s-mark{font-size:31px !important;}
  .brand-text-main,.brand-text-gold{font-size:21px !important;}
  .header-actions .mobile-searchbar{height:42px !important;padding-inline:9px !important;gap:6px !important;}
  .header-actions .mobile-searchbar input{font-size:11px !important;}
}

/* =========================================================
   MOBILE SEARCH — COLLAPSED BOX -> EXPANDING HEADER BAR
   Final replacement for the permanent mobile search field.
   ========================================================= */
@media (max-width:700px){
  .header-actions{
    justify-content:flex-start !important;
  }

  .header-actions .mobile-searchbar{
    width:48px !important;
    max-width:48px !important;
    min-width:48px !important;
    height:44px !important;
    flex:0 0 48px !important;
    padding:0 !important;
    justify-content:center !important;
    gap:0 !important;
    cursor:text !important;
    transition:width .22s ease,max-width .22s ease,flex-basis .22s ease,
                background .18s ease,border-color .18s ease !important;
  }

  .header-actions .mobile-searchbar i{
    flex:0 0 16px !important;
    margin:0 !important;
    pointer-events:none !important;
  }

  .header-actions .mobile-searchbar input{
    display:none !important;
    flex:1 1 auto !important;
    width:0 !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* Expanded state: the same box becomes the real search bar. */
  .header-actions .mobile-searchbar.mobile-search-expanded{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    padding:0 11px !important;
    justify-content:flex-start !important;
    gap:8px !important;
  }

  .header-actions .mobile-searchbar.mobile-search-expanded input{
    display:block !important;
  }

  .header-actions .mobile-searchbar.mobile-search-expanded i{
    order:2 !important;
  }

  .header-actions .mobile-searchbar.mobile-search-expanded input{
    order:1 !important;
  }

  /* Never let the logo or search box overflow the real viewport. */
  .header-inner,
  .logo-brand-wrap,
  .header-actions{
    overflow:visible !important;
  }

  .logo-brand-wrap{
    max-width:calc(100vw - 62px) !important;
  }
}

@media (max-width:390px){
  .header-actions .mobile-searchbar{
    width:44px !important;
    max-width:44px !important;
    min-width:44px !important;
    flex-basis:44px !important;
    height:42px !important;
  }

  .header-actions .mobile-searchbar.mobile-search-expanded{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    flex-basis:auto !important;
    padding-inline:9px !important;
  }
}