.header-search-fake {
  flex-grow: 1;
  position: relative;
  height: 2.625rem;
  border-radius: 1rem;
  border: 1px solid #D9D9D9;
  background-color: #FFFFFF;

  &::after {
    content: "";
    position: absolute;
    top: .375rem;
    bottom: .375rem;
    right: 2.875rem;
    z-index: 1;
    border-left: 1px solid #D9D9D9;
  }
}

.header-search {
  position: absolute;
  top: .5rem;
  bottom: .5rem;
  right: 0;
  left: 3.875rem;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: .25rem;
  border: 1px solid transparent;

  &.open {
    top: .875rem;
    left: 0;
    right: .375rem;
  }

  .input {
    flex-grow: 1;
    margin-left: 1.125rem;
    width: 100%;
    border: none;
    background-color: transparent;
    font-weight: 700;
    --input--fz: 1rem;
    color: #27282B;

    &::placeholder {
      color: #757575;
    }
  }

  .button {
    flex-shrink: 0;
    width: 2.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background-color: transparent;
  }
}

.header-search-popup {
  overflow: hidden;
  position: absolute;
  top: .5rem;
  right: 0;
  left: 0;
  z-index: 3;
  padding: .125rem 1rem 1rem;
  max-height: calc(100dvh - (var(--footer--h) + 3rem));
  min-height: 3rem;

  border-radius: 1rem;
  border: 1px solid #D9D9D9;
  background-color: #FFFFFF;

  &:not([hidden]) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
}

.header-search-results-wrapper {
  flex-shrink: 1;
  overflow-y: auto;
  margin-top: 3rem;
  padding-top: .875rem;
  padding-bottom: 1rem;
  border-top: 1px solid #D9D9D9;
}

.header-search-results {
  &:not([hidden]) {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.75rem;
  }

  .result {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .875rem;
    text-decoration: none;

    .img {
      flex-shrink: 0;
      width: 4rem;
      object-fit: contain;
      aspect-ratio: 64/40;
    }

    .title {
      font-weight: 700;
      font-size: 1rem;
      color: #373635;
    }

    .text, .price, .price-old, .price-new {
      font-size: 1rem;
    }

    .text, .price, .price-old {
      color: #8F8F8F;
    }

    .price-new {
      color: #009AE3;
    }

    .text, .price-old {
      font-weight: 400;
    }

    .price, .price-new {
      font-weight: 700;
    }

    .price-old {
      text-decoration: line-through;
    }
  }
}