/* Phone load mark and search bar. Flat dark surfaces, no navy wash. */

@media (max-width: 900px) {
  header.top .brand img,
  .top .brand img,
  .brand .brand-mark,
  .jr-listing-e18-top .brand img,
  .jr-listing-e18-top .brand-mark,
  body.jr-has-results .top .brand img,
  body.jr-browse-open .top .brand img,
  body.jr-listing-v2-page .jr-listing-e18-top .brand img {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    box-shadow: none !important;
    filter: none !important;
    background: transparent !important;
  }

  header.top,
  .top,
  .jr-listing-e18-top {
    height: auto !important;
    min-height: 96px !important;
    grid-template-columns: 84px minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
}

html,
body {
  background: #121212 !important;
  background-image: none !important;
}

header.top,
.top,
.jr-listing-e18-top {
  background: #121212 !important;
  background-image: none !important;
  border-bottom-color: #282828 !important;
}

html .top .search,
html .search,
html[data-jr-theme="spotify"] .search,
html[data-jr-theme="lake-dark"] .search,
html[data-jr-theme="lake-dark-premium"] .search,
html[data-appearance="lake-dark-premium"] .search,
html[data-jr-theme="charcoal"] .search,
html[data-jr-theme="black"] .search,
html[data-jr-theme="lake-dark"] .top .search,
html[data-jr-theme="lake-dark-premium"] .top .search {
  background: #282828 !important;
  background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: none !important;
}

html .search input,
html[data-jr-theme] .search input {
  color: #ffffff !important;
  caret-color: #ff9709 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 0 !important;
  height: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html .search input::placeholder,
html[data-jr-theme] .search input::placeholder,
html[data-jr-theme="lake-dark"] .search input::placeholder,
html[data-jr-theme="lake-dark-premium"] .search input::placeholder,
html[data-appearance="lake-dark-premium"] .search input::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}

html .search [data-icon],
html .search [data-icon] svg,
html[data-jr-theme] .search [data-icon] svg {
  color: #b3b3b3 !important;
  stroke: #b3b3b3 !important;
}

@media (max-width: 900px) {
  #categoryRow,
  #subRow,
  .overflow-row,
  .sub-row {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    height: auto !important;
  }

  #categoryRow .nav-btn,
  #subRow .sub-btn,
  .nav-btn.jr-overflowed,
  .sub-btn.jr-overflowed {
    display: inline-flex !important;
    flex: 0 0 auto !important;
  }

  #categoryMore,
  #subMore {
    display: none !important;
  }
}

html .search-sug,
html[data-jr-theme="lake-dark"] .search-sug,
html[data-jr-theme="lake-dark-premium"] .search-sug {
  background: #181818 !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}