/* Keep the brand legible when the device requests a dark header. */
.header-logo {
  display: contents;
}

@media screen and (prefers-color-scheme: dark) {
  .top-bar,
  .site-header {
    color-scheme: dark;
    background: #111827;
    color: #f8fafc;
    border-bottom-color: #374151;
  }

  .top-bar .welcome,
  .site-header .welcome,
  .site-header .search-bar > label {
    color: #d8e0ea;
  }

  .top-bar .menu-btn,
  .top-bar .shelf-label-bell,
  .site-header .mobile-menu-toggle,
  .site-header .shelf-label-bell {
    background: #1f2937;
    color: #f8fafc;
    border-color: #4b5563;
  }

  .site-header .mobile-menu-toggle span {
    background: #f8fafc;
  }

  .site-header .site-navigation {
    color-scheme: light;
    color: #172033;
  }

  /* Only the brand artwork changes; product photos keep their own colors. */
  .header-logo > img.logo {
    filter: brightness(0) invert(1);
  }

  @media (min-width: 901px) {
    .site-header .menu-bar > ul > li > a,
    .site-header .menu-bar > ul > li > button {
      color: #f8fafc;
    }

    .site-header .menu-bar > ul > li > a:hover,
    .site-header .menu-bar > ul > li > button:hover {
      background: #374151;
    }
  }
}