/* the header's own: the top bar's left slot keeps the width the client's phone line gave it (175.8px at 1440),
   so the search stays where theirs is now that the slot carries our email instead */
@media screen and (min-width: 767px) {
  .desktop-header .upper-nav .left { flex: 0 0 175.8px; min-width: 0; white-space: nowrap; }
}
/* the live search's product titles: the theme's links are white, on the dropdown's white */
#searchSuggestions .productTitle a { color: #333; }
/* the Magento pages' 25px under the header is the header's nav-sections bar (styles-l.css); three pages still fake it
   with padding on their .pw-stand-in, which does not collapse with the bar's margin: theirs counts until they drop it */
.nav-sections:has(+ #content .pw-stand-in) { margin-bottom: 0; }
/* the Orbital Parts mark: on the desktop the dark-lettered one on the white bar and the white-lettered one at night,
   when the bar takes the page's near black; on the phone the white-lettered one on the black bar in both themes.
   Each draws at 5:1 (250 by 50 as on orbitalparts.ca, 130 by 26 on the phone) inside the box the AutoMeter logo
   filled (75px high, 38px on the phone), so neither bar changes height. On the phone it sits beside the menu button,
   not centred: centred, a mark that wide runs under the account icon once the night's theme switch joins the right */
.desktop-header .site-branding img.logo { width: 250px; max-width: none; height: 75px; object-fit: contain; object-position: left center; }
.desktop-header .site-branding .cl-logo-night, :root[data-parts-theme="dark"] .desktop-header .site-branding .cl-logo-day { display: none; }
:root[data-parts-theme="dark"] .desktop-header .site-branding .cl-logo-night { display: block; }
@media screen and (max-width: 767px) {
  header.mobile-header .upper-nav .left, header.mobile-header .upper-nav .right { width: auto; flex: none; }
  header.mobile-header .upper-nav .center { width: auto; flex: 1 1 auto; min-width: 0; justify-content: flex-start; margin-left: 8px; }
  header.mobile-header .center .site-branding > a { align-items: flex-start; }
  header.mobile-header .center .site-branding img.logo { width: 130px; height: 38px; object-fit: contain; object-position: left center; }
}