сделал js search

assets/css/gp-style-desktop.css

@@ -115,8 +115,106 @@
     background-position: center right;
 }
 .header-menu__search{
+    display: flex;
+    align-items: center;
+
+    position: relative;
+}
+.header-menu-search__open{
     width: 32px;
     aspect-ratio: 1;
+
+    background: none;
+    overflow: hidden;
+
+    border: none;
+}
+.header-menu__search.active .header-menu-search__open img:first-child{
+    display: none;
+}
+.header-menu-search__block{
+    position: absolute;
+    top: 58px;
+    right: 0;
+
+    width: 400px;
+
+    transition: all .3s;
+
+    pointer-events: none;
+
+    opacity: 0;
+}
+.header-menu__search.active .header-menu-search__block{
+    pointer-events: auto;
+
+    opacity: 1;
+}
+.header-menu-search__input{
+    padding: 14px 64px 14px 24px;
+
+    width: 100%;
+
+    font-weight: 400;
+    font-size: 16px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    border: 1px solid var(--text-white);
+    border-radius: 4px;
+
+    background-color: var(--background-grey-hover);
+}
+.header-menu-search__input::placeholder{
+    color: var(--link);
+}
+.header-menu-search__btn{
+    position: absolute;
+    top: 8px;
+    right: 24px;
+
+    width: 32px;
+    aspect-ratio: 1;
+
+    background: none;
+    border: none;
+
+    background-image: url(/assets/img/icon/search.svg);
+    /* background-image: url(/assets/img/icon/close.svg); */
+}
+.header-menu-search__found{
+    margin-top: 24px;
+
+    padding: 24px;
+
+    background-color: var(--background-grey-hover);
+    border-radius: 4px;
+}
+.header-menu-search__error{}
+.header-menu-search__item{
+    margin-top: 24px;
+
+    display: flex;
+}
+.header-menu-search__item:first-child{
+    margin-top: 0;
+}
+.header-menu-search-item__img{
+    width: 72px;
+    aspect-ratio: 1;
+
+    border-radius: 8px;
+}
+.header-menu-search-item__content{
+    margin-left: 16px;
+}
+.header-menu-search-item__art{
+    margin-top: 8px;
+
+    color: var(--link);
+}
+.phone-search{
+    display: none;
 }
 /* header */
 

assets/css/gp-style-tablet.css

@@ -130,10 +130,17 @@
     width: 100%;
     transition: all .3s;
 
+    height: 100vh;
+
     background-color: var(--background-main);
 }
 .phone-menu__sub.active{
     left: 0;
+
+    overflow-y: auto;
+}
+.phone-menu__sub .title-1{
+    margin-bottom: 32px;
 }
 .phone-menu-content__close{
     position: absolute;
@@ -217,6 +224,108 @@
 .phone-menu{
     display: block;
 }
+.phone-search{
+    position: absolute;
+    top: 112px;
+    left: 0;
+
+    width: 100%;
+    height: 0;
+
+    display: block;
+
+    transition: all .3s;
+    overflow: hidden;
+}
+.phone-search.active{
+    height: 79px;
+}
+.phone-search.hidden{
+    overflow: visible;
+}
+.phone-search__content{
+    padding: 16px;
+
+    background-color: var(--background-grey-hover);
+}
+.phone-search__input{
+    width: 100%;
+
+    padding: 14.5px 23px;
+
+    font-weight: 400;
+    font-size: 14px;
+    text-transform: uppercase;
+    color: var(--text-white);
+
+    border: 1px solid var(--text-white);
+    border-radius: 4px;
+
+    background-color: rgba(0, 0, 0, 0);
+
+    outline: none;
+}
+.phone-search__input::placeholder{
+    color: var(--link);
+}
+.phone-search__found{
+    position: absolute;
+    top: 95px;
+    left: 16px;
+    right: 16px;
+
+    max-height: 256px;
+    width: calc(100% - 32px);
+
+    padding: 16px;
+
+    background-color: var(--background-grey-hover);
+    border-radius: 4px;
+
+    overflow-y: auto;
+    display: none;
+}
+.phone-search__found.active{
+    display: block;
+}
+.phone-search__item{
+
+}
+
+.phone-search__item{
+    margin-top: 24px;
+
+    display: flex;
+}
+.phone-search__item:first-child{
+    margin-top: 0;
+}
+.phone-search-item__img{
+    width: 64px;
+    aspect-ratio: 1;
+
+    border-radius: 8px;
+}
+.phone-search-item__content{
+    margin-left: 16px;
+}
+.phone-search-item__art{
+    margin-top: 8px;
+
+    color: var(--link);
+}
+.phone__open-search{
+    width: 32px;
+    aspect-ratio: 1;
+
+    overflow: hidden;
+
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+}
+.phone__open-search.active img:first-child{
+    display: none;
+}
 /* header */
 
 /* footer */