/* Full-width runtime guard for the Browse Creators platinum hero. */
#browse-hero{
  padding:0!important;
  background:#0b0e14!important;
}
#browse-hero > .browse-collage-backdrop{
  top:0!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:none!important;
  height:100%!important;
  transform:none!important;
  border-radius:0!important;
  border-left:0!important;
  border-right:0!important;
  box-shadow:none!important;
}

/* UGCHost yellow/black primary action treatment. */
#browse-hero .browse-hero-search button,
#browse-hero #heroCreatorSearch{
  min-height:44px!important;
  padding:0 22px!important;
  border:2px solid #111318!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ffe56f 0%,#ffd84d 56%,#f3c52c 100%)!important;
  color:#0b0d11!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  box-shadow:0 5px 0 #111318,0 11px 24px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.72)!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
#browse-hero .browse-hero-search button:hover,
#browse-hero #heroCreatorSearch:hover{
  filter:brightness(1.04)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 7px 0 #111318,0 14px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
#browse-hero .browse-hero-search button:active,
#browse-hero #heroCreatorSearch:active{
  transform:translateY(3px)!important;
  box-shadow:0 2px 0 #111318,0 7px 16px rgba(0,0,0,.2)!important;
}
#browse-hero .browse-hero-search button:focus-visible,
#browse-hero #heroCreatorSearch:focus-visible,
#retryCreatorSearch:focus-visible{
  outline:3px solid rgba(255,216,77,.38)!important;
  outline-offset:3px!important;
}
#retryCreatorSearch{
  width:100%!important;
  min-height:50px!important;
  border:2px solid #111318!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,#ffe56f 0%,#ffd84d 56%,#f3c52c 100%)!important;
  color:#0b0d11!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  box-shadow:0 5px 0 #111318,0 10px 24px rgba(21,25,35,.16),inset 0 1px 0 rgba(255,255,255,.7)!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
#retryCreatorSearch:hover{
  filter:brightness(1.035)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 7px 0 #111318,0 14px 27px rgba(21,25,35,.18),inset 0 1px 0 rgba(255,255,255,.76)!important;
}
#retryCreatorSearch:active{
  transform:translateY(3px)!important;
  box-shadow:0 2px 0 #111318,0 6px 14px rgba(21,25,35,.15)!important;
}

@media (min-width:981px){
  #browse-hero > .browse-hero-inner.container{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
    width:min(1440px,calc(100% - 80px))!important;
    max-width:1440px!important;
    min-height:300px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding:28px 40px!important;
    grid-template-columns:minmax(0,1fr) minmax(280px,340px)!important;
    gap:38px!important;
  }
  #browse-hero .browse-hero-copy{
    min-width:0!important;
    max-width:760px!important;
  }
  #browse-hero .browse-hero-search{
    width:100%!important;
    max-width:720px!important;
  }
  #browse-hero .browse-hero-metrics{
    width:100%!important;
    max-width:340px!important;
    margin:0!important;
    justify-self:end!important;
  }
}
@media (min-width:981px) and (max-width:1180px){
  #browse-hero > .browse-hero-inner.container{
    width:calc(100% - 44px)!important;
    grid-template-columns:minmax(0,1fr) 280px!important;
    gap:24px!important;
    padding:26px 22px!important;
  }
  #browse-hero .browse-hero-copy h1{font-size:clamp(33px,4vw,42px)!important}
  #browse-hero .browse-hero-metrics{max-width:280px!important}
}
@media (max-width:980px){
  #browse-hero > .browse-collage-backdrop{
    top:0!important;
    bottom:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    border-radius:0!important;
  }
  #browse-hero > .browse-hero-inner.container{
    width:calc(100% - 36px)!important;
    max-width:none!important;
    margin:0 auto!important;
  }
}
@media (max-width:700px){
  #browse-hero > .browse-hero-inner.container{
    width:calc(100% - 24px)!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  #browse-hero .browse-hero-search button,
  #browse-hero #heroCreatorSearch{
    width:100%!important;
    border-radius:13px!important;
  }
}