.header-search-bar {
  position: relative;
  width: 100%;
  max-width: 440px;

  .form {
    margin: 0;
  }

  .input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--color-gray-6);
    transition: border-color var(--motion-duration-standard) var(--motion-ease-standard);

    .icon svg {
      stroke: var(--color-gray-16);
      transition: stroke var(--motion-duration-standard) var(--motion-ease-standard);
    }

    &:focus-within {
      border-color: var(--color-black);

      .icon svg {
        stroke: var(--color-black);
      }
    }

    .input {
      flex: 1;
      display: block;
      border: 0;
      background: transparent;
      color: var(--color-black);
      font-family: var(--font-stack);
      font-size: var(--font-size-4);
      line-height: var(--line-height-body-trimmed);
      padding: 2px 0;

      &::placeholder {
        color: var(--color-gray-16);
      }

      &:focus {
        outline: none;
      }
    }
  }

  .autocomplete-frame {
    display: block;

    .surface {
      margin-top: var(--space-3);
      padding: var(--space-2);
      background-color: var(--color-white);
      border: 1px solid var(--color-gray-3);
      border-radius: var(--radius-3);
      box-shadow: var(--shadow-2);

      .results {
        display: flex;
        flex-direction: column;

        .result {
          /* !important: outweighs 06_header.css's deeply-nested ".tray-column a" rule */
          display: flex !important;
          align-items: center;
          gap: var(--space-3);
          padding: var(--space-2);
          border-radius: var(--radius-2);
          text-decoration: none;
          color: var(--color-black);
          font-size: var(--font-size-3) !important;
          transition: background-color var(--motion-duration-fast) var(--motion-ease-standard);

          &:hover,
          &:focus-visible,
          &.is-active {
            background-color: var(--color-gray-1);
            outline: none;
          }

          .thumb {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            background-color: var(--color-gray-2);
            background-size: cover;
            background-position: center;
            border-radius: var(--radius-1);
          }

          .copy {
            min-width: 0;

            .brand {
              font-size: var(--font-size-1);
              letter-spacing: 0.04em;
              text-transform: uppercase;
              color: var(--color-gray-17);
              margin: 0 0 2px;
            }

            .name {
              font-size: var(--font-size-3);
              color: var(--color-black);
              /* Restates the body value: this <p> otherwise inherits
                 `line-height: 1` from 06_header.css's ".tray-column a", and with
                 overflow hidden for the ellipsis that line box clips ascenders. */
              line-height: var(--line-height-body);
              margin: 0;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }

      .footer {
        margin-top: var(--space-1);
        padding-top: var(--space-2);
        border-top: 1px solid var(--color-gray-3);

        .all-results {
          display: block;
          padding: var(--space-2);
          border-radius: var(--radius-2);
          font-size: var(--font-size-3) !important;
          color: var(--color-gray-19) !important;
          text-decoration: none;
          transition:
            color var(--motion-duration-fast) var(--motion-ease-standard),
            background-color var(--motion-duration-fast) var(--motion-ease-standard);

          &:hover {
            color: var(--color-black) !important;
            background-color: var(--color-gray-1);
          }
        }
      }

      .empty {
        font-size: var(--font-size-3);
        color: var(--color-gray-17);
        margin: 0;
        padding: var(--space-2);
      }
    }
  }
}

.search-results {
  .search-empty-state {
    font-size: var(--font-size-4);
    color: var(--color-gray-19);
    text-align: center;
    padding: var(--space-8) 0;
  }
}