.custom-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 160px;
  background-color: transparent;

  @media screen and (max-width: 768px) {
    height: 80px;
  }

  .header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding-inline: 48px;

    @media screen and (max-width: 768px) {
      padding-inline: 24px;
    }

    .header__logo-wrapper {
      width: 54px;
      display: block;

      @media screen and (max-width: 768px) {
        width: 36px;
      }

      .header__logo-image {
        width: 100%;
        display: block;
      }
    }

    .header__nav {
      @media screen and (max-width: 768px) {
        display: none;
      }

      .header__nav--navigation {
        .header__nav--list {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 18px;
          list-style: none;
          padding: 0;
          margin: 0;

          .header__nav--list-item {
            .header__nav--item-link {
              color: white;
              font-family: var(--astra-source-code-pro), monospace;
              font-weight: var(--astra-font-weight-light);
              text-decoration: none;
            }
          }
        }
      }
    }

    .header__icon-menu {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      padding: 0;
      gap: 24px;

      @media screen and (max-width: 768px) {
        padding: 0 10px;
      }

      .float-menu__button {
        text-decoration: none;
        width: 24px;
        height: 24px;
        color: white;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 0;

        @media screen and (max-width: 768px) {
          width: 24px;
          height: 24px;

          &:nth-child(-n+3) {
            display: none;
          }
        }

        &.fav {
          position: relative;
        }

        &.cart {
          position: relative;
        }

        > :not(svg) {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        svg {
          width: 24px;
          height: 24px;
        }

        .cart-count-bubble {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #F45151;
          color: white;
          padding: 0;
          margin: 0;
          position: absolute;
          top: -9px;
          right: 9px;
          font-family: var(--astra-source-code-pro), monospace;
          font-size: 12px;
          font-weight: bold;

          @media screen and (max-width: 768px) {
            width: 20px;
            height: 20px;
            font-size: 12px;
            right: -8px;
          }
        }
      }

      details {
        @media screen and (max-width: 768px) {
          display: none;
        }
      }

      .search-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background: rgba(0, 0, 0, .5);

        .search-overlay__content {
          display: flex;
          justify-content: center;
          align-items: center;
          padding-top: 38px;

          .search-modal__form {
            color: black;

            .field {

              .search__input {
                font-family: var(--astra-roboto), sans-serif;
              }

              .field__label {
                font-family: var(--astra-roboto), sans-serif;
              }
            }
          }
        }

        .search-overlay__close-button {
          appearance: none;
          border: none;
          width: 42px;
          height: 42px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: transparent;
          color: white;
          cursor: pointer;
        }
      }
    }
  }
}


#hamburger {
  .open {
    display: block;
  }

  .close {
    display: none;
  }
}

#hamburger.active {
  .open {
    display: none;
  }

  .close {
    display: block;
  }
}