доделал

assets/css/gp-style-core.css

@@ -142,6 +142,15 @@ button{
   background: none;
   border: none;
 
+  display: flex;
+  align-items: center;
+
+  transition: opacity .2s ease-out;
+}
+.lang__open:hover{
+  opacity: .8;
+}
+.lang-open p{
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 16px;
@@ -150,26 +159,19 @@ button{
   text-align: start;
   
   color: var(--text-black);
-
-  position: relative;
-
-  transition: opacity .2s ease-out;
 }
-.lang__open::before{
+.lang-open__arrow{
-  content: '';
+  margin-left: 7.25px;
 
-  position: absolute;
+  display: flex;
-  top: 19.25px;
+  justify-content: center;
-  right: 18.25px;
+  align-items: center;
-
-  width: 10px;
-  height: 6px;
-
-  background-image: url(../img/svg/main/arrow-black.svg);
-  background-repeat: no-repeat;
 }
-.lang__open:hover{
+.lang-open__black{
-  opacity: .8;
+
+}
+.lang-open__white{
+  display: none;
 }
 .lang__content{
   position: absolute;
@@ -273,6 +275,9 @@ button{
   width: 24px;
   aspect-ratio: 1;
 }
+.mini-profile__icon.white{
+  display: none;
+}
 /* mini-profile */
 
 
@@ -293,6 +298,12 @@ button{
 }
 .main-menu__item:hover{
   opacity: .8;
+
+  background: #f2f2f2;
+  border-radius: 24px;
+}
+.main-menu__item:active{
+  opacity: 1;
 }
 .main-menu__link{
   display: block;
@@ -435,7 +446,7 @@ button{
 
 /* breadcrumbs */
 .breadcrumbs{
-  margin: 24px;
+  margin: 96px 24px 24px;
 
   display: flex;
   align-items: center;
@@ -640,7 +651,7 @@ button{
 
   padding: 11px 47px 11px 13px;
 
-  pointer-events:none;
+  /* pointer-events:none; */
 
   border: 1px solid var(--background-black);
   border-radius: 20px;
@@ -651,6 +662,8 @@ button{
   line-height: 120%;
   color: var(--text-black);
 
+  cursor: pointer;
+
   position: relative;
 
   transition: opacity .2s ease-out;
@@ -671,6 +684,8 @@ button{
   background-image: url(../img/svg/main/arrow-black.svg);
   background-repeat: no-repeat;
   background-size: contain;
+
+  pointer-events: none;
 }
 .state__block{
   position: absolute;
@@ -681,6 +696,8 @@ button{
 
   height: 0;
   overflow: hidden;
+
+  transition: height .2s ease-out;
 }
 .state__content{
   padding: 8px;
@@ -797,29 +814,44 @@ button{
   background: rgba(0, 0, 0, 0.25);
 
   z-index: 200;
+
+  opacity: 0;
+  transition: opacity .2s ease-out;
+  pointer-events: none;
+}
+.modal.active{
+  opacity: 1;
+  pointer-events: auto;
 }
 .modal__aside{
   position: fixed;
   top: 0;
   right: 0;
 
-  width: auto;
+  width: 0;
   height: 100%;
 
   overflow: hidden;
+  transition: width .4s ease-out;
 }
 .modal__item{
   height: 100%;
 
   padding: 24px;
 
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-
   background: var(--background-white);
 
   position: relative;
+
+  display: none;
+  
+  filter: blur(10px);
+  transition: filter .2s ease-out;
+}
+.modal__item.active{
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 .modal__close{
   position: absolute;
@@ -1021,7 +1053,7 @@ button{
   cursor: pointer;
 }
 .toggle__block-content{
-  /* height: 0; */
+  height: 0;
   overflow: hidden;
 
   transition: height .2s ease-out;
@@ -1113,3 +1145,14 @@ button{
   color: var(--text-dark);
 }
 /* radio */
+
+
+@keyframes slidein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

assets/css/gp-style-desktop.css

@@ -6,6 +6,13 @@
     position: relative;
 
     background-color: var(--background-white);
+
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+
+    z-index: 200;
 }
 .header::after{
     content: '';
@@ -73,10 +80,14 @@
     width: 182px;
     height: 40px;
 }
-.header__logo-black{
+.header__logo-black,
+.header__logo-white{
     width: 100%;
     height: 100%;
 }
+.header__logo-white{
+  display: none;
+}
 
 .header__menu-block{
     position: absolute;
@@ -236,6 +247,43 @@
 
     text-decoration: none;
 }
+.header.white{
+  /* background-color: thistle; */
+}
+.header.white .header__logo-black{
+  display: none;
+}
+.header.white .header__logo-white{
+  display: block;
+}
+.header.white .main-menu__link{
+  color: var(--text-white);
+}
+.header.white .main-menu__button{
+  background: var(--background-white);
+}
+.header.white .lang__open{
+  color: var(--text-white);
+}
+.header.white::after{
+  background: var(--background-white);
+}
+.header.white .lang-open__black{
+  display: none;
+}
+.header.white .lang-open__white{
+  display: block;
+}
+.header.white .mini-profile__icon.white{
+  display: block;
+}
+.header.white .mini-profile__icon.black{
+  display: none;
+}
+.header.white .header__open-menu::before,
+.header.white .header__open-menu::after{
+  background: var(--background-white);
+}
 /* header end */
 
 /* product */
@@ -326,6 +374,8 @@
     background-color: var(--background-grey);
     border-radius: 24px;
 
+    overflow: hidden;
+
     position: relative;
   }
   .product__item::before{
@@ -349,6 +399,9 @@
   .product__item:hover::before{
     opacity: 1;
   }
+  .product__item.active::before{
+    opacity: 0;
+  }
   .product-item__block-label{
     position: absolute;
     top: 16px;
@@ -382,9 +435,17 @@
   .product-item-label__tag--new{
     background: var(--gradient-blue);
   }
+  .product-item-label__tag--new-green{
+    background: #d9ffcc;
+    color: #4e7623;
+  }
   .product-item-label__tag--sale{
     background: var(--gradient-red);
   }
+  .product-item-label__tag--sale-red{
+    color: #fa0505;
+    background: #ffe5e5;
+  }
   .product-item-label__tag--black{
     background: var(--background-black);
     color: var(--text-white);
@@ -428,6 +489,10 @@
   .product-item__price{
     margin-top: 8px;
   
+    display: flex;
+    align-items: center;
+  }
+  .product-item__price p{
     font-family: var(--font-family);
     font-weight: 700;
     font-size: 20px;
@@ -435,9 +500,37 @@
     text-transform: uppercase;
     color: var(--text-black);
   }
-  .product-item__price::after{
+  .product-item__price p::after{
     content: '₽';
   }
+  .product-item__price span{
+    margin-left: 9px;
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-red);
+  }
+  .product-item__price del{
+    margin-left: 24px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 133%;
+    text-transform: uppercase;
+    text-decoration: line-through;
+    color: var(--text-6);
+  }
+  .product-item__price del::after{
+    content: '₽';
+  }
+  .product-item__price span::before{
+    content: '-';
+  }
+  .product-item__price span::after{
+    content: '%';
+  }
   .product-item__bye{
     margin-top: 8px;
   }
@@ -449,7 +542,7 @@
   }
   .product-item__overlay{
     position: absolute;
-    top: 0;
+    top: 100%;
     left: 0;
 
     width: 100%;
@@ -466,6 +559,11 @@
     background-color: rgba(242, 242, 242, 0.8);
 
     z-index: 10;
+
+    transition: top .4s ease-out;
+  }
+  .product-item__overlay.active{
+    top: 0;
   }
   .product-item-overlay__header{}
   .product-item-overlay__tags{
@@ -487,20 +585,7 @@
 
     position: relative;
   }
-  .product-item-overlay__tags li:nth-child(n+2)::before{
+  .product-item-overlay__tags li:nth-child(n+1)::after{
-    content: '';
-
-    position: absolute;
-    top: 6px;
-    left: -8px;
-
-    width: 4px;
-    aspect-ratio: 1;
-
-    background-color: var(--text-3);
-    border-radius: 50%;
-  }
-  .product-item-overlay__tags li:nth-child(n+2)::after{
     content: '';
 
     position: absolute;
@@ -674,6 +759,7 @@
   margin: 48px 24px 24px 24px;
 
   display: flex;
+  align-items: start;
   flex-wrap: wrap;
 }
 .detail__images{
@@ -806,6 +892,7 @@
 
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 .detail-block-form__item--radio{
   margin: 16px -8px -8px -8px;
@@ -855,12 +942,57 @@
   margin-bottom: 48px;
 }
 .detail__catalot{
+  margin-top: 64px;
+
+  width: 100%;
+
+  overflow: hidden;
+}
+.detail-catalot__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.detail-catalot__control{
+  display: flex;
+  align-items: center;
+}
+.detail-catalot-control__button{
+  margin-left: 24px;
+
+  width: 48px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  border: 1px solid var(--background-black);
+  background: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.detail-catalot__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 100%;
+  text-transform: uppercase;
+  text-align: start;
+  color: var(--text-0);
+}
+.detail-catalot__content{
   margin: 12px -12px -12px -12px;
 
   width: 100%;
 
   display: flex;
 }
+.detail__catalot .product__item{
+  width: calc(100% - 24px);
+}
+.detail__images-phone{
+  display: none;
+}
 .toggle__table{
   margin-top: 32px;
 
@@ -941,8 +1073,132 @@
   opacity: .6;
 }
 
+.radio-button{
+}
+.radio-button__input{
+  display: none;
+}
 /* detail */
 
+/* gallery */
+.gallery{
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  padding: 24px;
+
+  display: flex;
+  align-items: center;
+
+  background: var(--background-white);
+
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity .2s ease-out;
+
+  z-index: 300;
+}
+.gallery.active{
+  opacity: 1;
+  pointer-events: auto;
+}
+.gallery__close{
+  position: absolute;
+  top: 24px;
+  right: 24px;
+
+  z-index: 10;
+}
+.gallery__pagination{
+  margin: -12px;
+}
+.gallery-pagination__item{
+  margin: 12px;
+
+  width: 134px;
+  height: 136px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: none;
+  border-radius: 16px;
+  background: var(--background-grey);
+}
+.gallery-pagination__item img{
+  width: 90%;
+  max-height: 90%;
+
+  object-fit: contain;
+}
+.gallery__slider{
+  margin-left: 48px;
+
+  padding: 100px;
+}
+.gallery__slider{
+  width: 100%;
+}
+.gallery__slider .swiper-pagination{
+  display: none;
+}
+.gallery__slider .swiper-button-next::after,
+.gallery__slider .swiper-button-prev::after{
+  display: none;
+}
+.gallery-button{
+  width: 48px;
+  height: 48px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid var(--background-black);
+  border-radius: 20px;
+
+  background: none;
+}
+.gallery__slider .swiper-slide{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.gallery__block{
+  width: 600px;
+  height: 774px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: var(--background-grey);
+  border-radius: 24px;
+}
+.gallery__block img{
+  width: 90%;
+  max-height: 90%;
+
+  object-fit: contain;
+}
+.gallery__wrapper{
+  margin: 0 auto;
+  max-width: 1600px;
+
+  display: flex;
+  align-items: center;
+}
+/* .swiper {
+  width: 600px;
+  height: 300px;
+} */
+
+/* gallery */
+
 @media only screen and (max-width: 1600px) {
 
 .wrapper{
@@ -954,8 +1210,17 @@
   
     width: calc(33.3% - 24px);
 }
+
+.gallery__wrapper{
+  max-width: 1280px;
+}
 }
 
+@media only screen and (max-width: 1365px) {
+  .gallery__wrapper{
+    max-width: 100%;
+  }
+}
 
 
 

assets/css/gp-style-mobile.css

@@ -10,13 +10,16 @@
 .modal__basket{
     width: 100%;
 }
+.modal__filter{
+    width: 100%;
+}
 .modal__button .to-know{
     display: flex;
 
     background: none;
 }
 .modal__basket .modal__header {
-    height: calc(100% - 158px);
+    height: calc(100% - 92px);
     margin-bottom: -36px;
 }
 .modal-basket-item__block-image{
@@ -66,6 +69,16 @@
     margin-top: 20px;
 }
 /* footer */
+
+/* detail */
+.toggle__table--two .toggle-table__block{
+    width: 100%;
+}
+.toggle__table--two .toggle-table__block:nth-child(even){
+    margin-top: 32px;
+    margin-left: 0;
+}
+/* detail */
 }
 
 @media only screen and (max-width: 576px) {
@@ -87,8 +100,11 @@
 .modal__aside{
     left: 0;
 }
-.modal__filter{
-    width: 100%;
-}
 /* modal */
+
+/* detail */
+.detail-block-form__item,
+.detail-block-form__submit{
+    min-width: 100%;
+}
 }

assets/css/gp-style-tablet.css

@@ -49,6 +49,8 @@
     display: none;
 }
 /* footer */
+
+
 }
 
 @media only screen and (max-width: 980px) {
@@ -57,4 +59,103 @@
     width: calc(50% - 24px);
 }
 /* product */
+
+
+/* detail */
+.detail{
+    flex-direction: column;
+}
+.detail__images{
+    display: none;
+}
+.detail__content{
+    width: 100%;
+}
+.detail__content{
+    margin-left: 0;
+}
+
+.detail__images-phone{
+    display: block;
+
+    margin-top: 48px;
+    margin-bottom: 48px;
+
+    position: relative;
+
+    overflow: hidden;
+}
+.detail__images-phone .swiper-slide{
+    display: flex;
+    justify-content: center;
+}
+.detail-images-phone__image-block{
+    width: 100%;
+    aspect-ratio: 1;
+    max-width: 500px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background: var(--background-grey);
+    border-radius: 16px;
+}
+
+.detail__images-phone .swiper-pagination-bullet{
+    width: 8px;
+    height: 8px;
+
+    border-radius: 50%;
+
+    border: 1px solid #666;
+    background-color: #666;
+
+    opacity: 1;
+}
+.detail__images-phone .swiper-pagination-bullet.swiper-pagination-bullet-active{
+    background-color: var(--background-white);
+}
+
+.detail__images-phone .swiper-pagination{
+    margin-bottom: 19px;
+}
+.detail__title{
+    font-size: 26px;
+    line-height: 123%;
+}
+.gallery__slider .swiper-pagination {
+    display: block;
+}
+.gallery__pagination{
+    display: none;
+}
+
+.gallery__slider .swiper-pagination-bullet{
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    border: 1px solid #666;
+    background-color: #666;
+    opacity: 1;
+}
+.gallery__wrapper .gallery-button{
+    display: none;
+}
+
+.gallery__slider  .swiper-pagination-bullet.swiper-pagination-bullet-active{
+    background-color: var(--background-white);
+}
+
+.gallery__slider{
+    margin-left:0;
+    padding: 0px 0px 50px 0px;
+    /* padding: 40px; */
+}
+.gallery__block {
+    width: 100%;
+    aspect-ratio: 1;
+    height: auto;
+}
+/* detail */
 }

assets/img/svg/main/arrow-left.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16.4854H28" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16.4854L14.4853 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6 16.4854L14.4853 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/svg/main/arrow-right.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26 16.4854H4" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 16.4854L17.5147 24.9706" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 16.4854L17.5147 8.00007" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/svg/mini-profile/basket-w.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 3.53846C11.3616 3.53846 10.7499 3.78159 10.2988 4.21437C9.84778 4.64715 9.59439 5.23412 9.59439 5.84615V7.12821H14.4045V5.84615C14.4045 5.23412 14.1511 4.64715 13.7001 4.21437C13.2491 3.78159 12.6373 3.53846 11.9995 3.53846ZM16.0079 7.12821V5.84615C16.0079 4.82609 15.5856 3.84781 14.8339 3.12651C14.0821 2.40522 13.0626 2 11.9995 2C10.9364 2 9.91679 2.40522 9.16506 3.12651C8.41333 3.84781 7.99102 4.82609 7.99102 5.84615V7.12821H5.93986M7.99102 8.66667H5.93976C5.74711 8.66665 5.55664 8.7066 5.38159 8.78378C5.20654 8.86097 5.05095 8.97356 4.9255 9.11385C4.80004 9.25413 4.70769 9.41879 4.65477 9.59653C4.60186 9.77423 4.58961 9.9608 4.61887 10.1435C4.61886 10.1434 4.61888 10.1435 4.61887 10.1435L5.96036 18.5045C6.04768 19.0493 6.33539 19.5463 6.77139 19.9052C7.20738 20.2642 7.76287 20.4615 8.33735 20.4615C8.33734 20.4615 8.33736 20.4615 8.33735 20.4615H15.6616C16.2362 20.4617 16.7921 20.2644 17.2283 19.9055C17.6645 19.5465 17.9523 19.0496 18.0396 18.5046L19.3811 10.1436C19.3811 10.1436 19.3811 10.1435 19.3811 10.1436C19.4104 9.96093 19.3981 9.77423 19.3452 9.59653C19.2923 9.41879 19.1999 9.25413 19.0745 9.11385C18.949 8.97356 18.7935 8.86097 18.6184 8.78378C18.4433 8.7066 18.253 8.66665 18.0603 8.66667H16.0079V10.9744C16.0079 11.3992 15.649 11.7436 15.2062 11.7436C14.7635 11.7436 14.4045 11.3992 14.4045 10.9744V8.66667H9.59439V10.9744C9.59439 11.3992 9.23547 11.7436 8.79271 11.7436C8.34995 11.7436 7.99102 11.3992 7.99102 10.9744V8.66667ZM16.0079 7.12821H18.0601C18.0601 7.12821 18.0602 7.12821 18.0601 7.12821C18.4839 7.12817 18.9028 7.21606 19.2879 7.38586C19.673 7.55567 20.0153 7.80338 20.2913 8.11201C20.5673 8.42063 20.7705 8.78288 20.8869 9.1739C21.0033 9.56493 21.0303 9.97549 20.9658 10.3774L19.6244 18.7385C19.6243 18.7385 19.6244 18.7384 19.6244 18.7385C19.4788 19.6467 18.9991 20.475 18.2722 21.0732C17.5453 21.6715 16.6192 22.0002 15.6616 22C15.6615 22 15.6616 22 15.6616 22H8.33735C7.37986 22 6.45398 21.6711 5.72732 21.0728C5.00069 20.4746 4.52121 19.6466 4.37565 18.7386C4.37565 18.7385 4.37566 18.7386 4.37565 18.7386L3.03416 10.3776C2.96974 9.97561 2.99665 9.56493 3.11308 9.1739C3.22951 8.78288 3.43268 8.42063 3.70868 8.11201C3.98468 7.80338 4.32697 7.55567 4.71208 7.38586C5.09717 7.21606 5.51606 7.12817 5.93986 7.12821" fill="white"/>
+</svg>

assets/img/svg/mini-profile/profile-w.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64124 3.64124C9.53204 2.75044 10.7402 2.25 12 2.25C13.2598 2.25 14.468 2.75044 15.3588 3.64124C16.2496 4.53204 16.75 5.74022 16.75 7C16.75 8.25978 16.2496 9.46796 15.3588 10.3588C14.468 11.2496 13.2598 11.75 12 11.75C10.7402 11.75 9.53204 11.2496 8.64124 10.3588C7.75044 9.46796 7.25 8.25978 7.25 7C7.25 5.74022 7.75044 4.53204 8.64124 3.64124ZM12 3.75C11.138 3.75 10.3114 4.09241 9.7019 4.7019C9.09241 5.3114 8.75 6.13805 8.75 7C8.75 7.86195 9.09241 8.6886 9.7019 9.2981C10.3114 9.90759 11.138 10.25 12 10.25C12.862 10.25 13.6886 9.90759 14.2981 9.2981C14.9076 8.6886 15.25 7.86195 15.25 7C15.25 6.13805 14.9076 5.3114 14.2981 4.7019C13.6886 4.09241 12.862 3.75 12 3.75Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10 15.75C9.13805 15.75 8.3114 16.0924 7.7019 16.7019C7.09241 17.3114 6.75 18.138 6.75 19V21C6.75 21.4142 6.41421 21.75 6 21.75C5.58579 21.75 5.25 21.4142 5.25 21V19C5.25 17.7402 5.75044 16.532 6.64124 15.6412C7.53204 14.7504 8.74022 14.25 10 14.25H14C15.2598 14.25 16.468 14.7504 17.3588 15.6412C18.2496 16.532 18.75 17.7402 18.75 19V21C18.75 21.4142 18.4142 21.75 18 21.75C17.5858 21.75 17.25 21.4142 17.25 21V19C17.25 18.138 16.9076 17.3114 16.2981 16.7019C15.6886 16.0924 14.862 15.75 14 15.75H10Z" fill="white"/>
+</svg>

assets/js/gp-main.js

@@ -1,6 +1,251 @@
 'use strict';
 
-function toggleOpenX(button, content, blockheight) {
+// header
+toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
+singleToggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
+// header 
+
+// media
+modalOpen('.button--filter', '.modal__filter');
+modalOpen('.basket-open', '.modal__basket');
+modalClose('.modal__close');
+// media
+
+// toggle
+toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
+// toggle
+
+// radio-button
+let radioButtons = document.querySelectorAll('.radio-button');
+
+radioButtons.forEach(radioBlock => {
+    let buttons = radioBlock.querySelectorAll('.button');
+    
+    buttons.forEach(button => {
+        let input = radioBlock.querySelector('.radio-button__input');
+
+        button.onclick = function (e) {
+            e.preventDefault();
+
+            buttons.forEach(thisButton => {
+                if (thisButton.classList.contains('active')) {
+                    thisButton.classList.remove('active')
+                }
+            })
+
+            let text = button.textContent.trim();
+
+            button.classList.toggle('active');
+
+            input.value = text;            
+        } 
+    })   
+})
+// radio-button
+
+// overlay
+let products = document.querySelectorAll('.product__item');
+
+products.forEach(productItem => {
+    let button = productItem.querySelector('.open-overlay'),
+        overlay = productItem.querySelector('.product-item__overlay');
+
+    
+    if (button) {
+        button.onclick = function (e) {
+            document.querySelectorAll('.product__item').forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.classList.remove('active');
+                }
+            });
+            document.querySelectorAll('.product-item__overlay').forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.classList.remove('active');
+                }
+            });
+
+            productItem.classList.toggle('active'); 
+            overlay.classList.toggle('active');            
+        }
+    }
+    
+})
+// overlay
+
+
+// select
+toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', true);
+
+let selects = document.querySelectorAll('.select');
+
+selects.forEach(e => {
+    let state = e.querySelector('.select__state'),
+        buttons = e.querySelectorAll('.state__button');
+        
+    buttons.forEach(e => {
+        let button = e;
+
+        e.onclick = function (event) {
+            event.preventDefault();
+
+            buttons.forEach(element => {
+                if (element.classList.contains('active')) {
+                    element.classList.remove('active');
+                }
+            })          
+            
+            let text = e.textContent.trim();
+            state.value = text;
+
+            button.classList.add('active');
+        }        
+    })
+})
+// select
+
+// counter
+let counters = document.querySelectorAll('.counter');
+
+counters.forEach(e => {
+    let minus = e.querySelector('.minus'),
+        plus  = e.querySelector('.plus'),
+        input = e.querySelector('.counter__input');
+
+        minus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number >= 2){
+                input.value = Number(number) - 1;
+            }
+        }
+
+        plus.onclick = function (e) {
+            e.preventDefault();
+            
+            let number = input.value;
+            
+            if (number <= 99) {
+                input.value = Number(number) + 1;
+            }
+        }
+})
+// counter
+
+// checkbox 
+let checkbox = document.querySelectorAll('.checkbox');
+
+checkbox.forEach(e => {
+    e.onclick = function (event) {
+        let input = e.querySelector('.checkbox__input');
+
+        if (!e.classList.contains('active')) {
+            input.checked = 1;
+        }else{
+            input.checked = 0;
+        }
+        e.classList.toggle('active');
+    }
+})
+// checkbox 
+
+
+// function
+function modalOpen(buttonElement, contentElement){
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        elements = document.querySelectorAll(buttonElement),
+        device = window.screen.width;
+
+    elements.forEach(e => {
+        let thisContentElement = document.querySelector(contentElement);
+
+        e.onclick = function () {
+            modal.classList.add('active');
+            thisContentElement.classList.add('active');
+            
+            let width = thisContentElement.clientWidth;
+
+            setTimeout(() => {
+                if (device <= 720) {
+                    aside.style.width = `${device}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }else{
+                    aside.style.width = `${width}px`;
+                    thisContentElement.style.opacity = 1;
+                    thisContentElement.style.filter = 'blur(0px)';
+                }
+            }, 10);
+        }
+    })
+}
+
+function modalClose(buttonElement) {
+    let modal = document.querySelector('.modal'),
+        aside = document.querySelector('.modal__aside'),
+        asideItems = document.querySelectorAll('.modal__item'),
+        elements = document.querySelectorAll(buttonElement);
+
+    elements.forEach(e => {
+        e.onclick = function () {            
+            aside.style.width = '0px';
+            
+            asideItems.forEach(e => {
+                if (e.classList.contains('active')) {
+                    e.style.filter  = 'blur(10px)';
+                }
+            });
+
+            setTimeout(() => {
+                asideItems.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                    }
+                });
+
+                modal.classList.remove('active');
+            }, 300);
+        }
+    })
+}
+
+function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement, close) {
+    let elements = document.querySelectorAll(mainElement);
+
+    elements.forEach(e => {
+        let thisMainElement = e,
+            thisButtonElement = e.querySelector(buttonElement),
+            thisHeightElement = e.querySelector(heightElement),
+            thisContentElement = e.querySelector(contentElement);        
+
+        thisButtonElement.onclick = function (e) {
+            let height = thisHeightElement.clientHeight;
+
+            if (close == true && !thisMainElement.classList.contains('active')) {
+                elements.forEach(e => {
+                    if (e.classList.contains('active')) {
+                        e.classList.remove('active');
+                        e.querySelector(contentElement).style.height = null
+                    }                    
+                })
+            }
+
+            if (!thisMainElement.classList.contains('active')) {
+                thisContentElement.style.height = `${height}px`;
+                thisMainElement.classList.add('active');
+            }else{
+                thisContentElement.style.height = null;
+                thisMainElement.classList.remove('active');
+            }
+        }
+        
+    });
+}
+
+function singleToggleOpenX(button, content, blockheight) {
     let thisButton = document.querySelector(button), 
         thisContent = document.querySelector(content),
         thisBlockheight = document.querySelector(blockheight);
@@ -18,12 +263,60 @@ function toggleOpenX(button, content, blockheight) {
     }
 }
 
-// header start
+function createGalleryPhone(swiper, wrapper, slide, width) {
-toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+    if (window.screen.width <= width) {
-toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
+        let thisSwiper = document.querySelector(swiper),
+            thisWrapper = document.querySelector(wrapper),
+            thisSlides = document.querySelectorAll(slide);
 
-// header end
+        
+        
+        thisSwiper.classList.add('swiper');
+        thisWrapper.classList.add('swiper-wrapper'); 
+        thisSlides.forEach(e => {
+            e.classList.add('swiper-slide'); 
+        })
 
-// lang start
+        const t = new Swiper('.detail__images', {
-toggleOpenX('.lang__open','.lang__content','.lang__list');
+            spaceBetween: 100,
-// lang end
+          
+            pagination: {
+              el: '.swiper-pagination',
+            },
+          
+            navigation: {
+              nextEl: '.swiper-button-next',
+              prevEl: '.swiper-button-prev',
+            },
+          
+            scrollbar: {
+              el: '.swiper-scrollbar',
+            },
+        });
+         
+    }
+}
+
+
+// resize
+window.addEventListener('resize', (e) => {
+    // media
+    modalOpen('.button--filter', '.modal__filter');
+    modalOpen('.basket-open', '.modal__basket');
+    modalClose('.modal__close');
+});
+// resize
+
+// scroll
+window.addEventListener("scroll", function (e) {
+    let header = document.querySelector('.header');
+    let scroll = window.scrollY;
+    
+    if (scroll >= 75) {
+        header.classList.remove('white')
+    }else{
+        header.classList.add('white')
+    }
+    
+});
+// scroll

assets/js/gp-product.js

@@ -0,0 +1,110 @@
+'use strict';
+
+// slider gallery modal
+const gallery = new Swiper('.gallery__slider', {
+    spaceBetween: 100,
+  
+    pagination: {
+      el: '.swiper-pagination',
+    },
+  
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  
+    scrollbar: {
+      el: '.swiper-scrollbar',
+    },
+});
+
+let paginationButtons = document.querySelectorAll('.gallery-pagination__item');
+
+paginationButtons.forEach(button => {
+    let index = button.dataset.countImg;
+
+    button.onclick = function () {
+        gallery.slideTo(index);
+    }
+})
+
+// open gallery
+let detailImage= document.querySelectorAll('.detail__image');
+detailImage.forEach(button => {
+    let index = button.dataset.countImg;
+
+    button.onclick = function () {
+        gallery.slideTo(index);
+        
+        document.querySelector('.gallery').classList.add('active');
+    }
+})
+
+// close gallery
+
+document.querySelector('.gallery__close').onclick = function () {
+    document.querySelector('.gallery').classList.remove('active');
+}
+// slider gallery modal
+
+// slider gallery main phone
+
+// createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
+
+const detailPhone = new Swiper('.detail__images-phone', {
+    spaceBetween: 100,
+  
+    pagination: {
+      el: '.swiper-pagination',
+    },
+  
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  
+    scrollbar: {
+      el: '.swiper-scrollbar',
+    },
+});
+
+let detailImagesPhones = document.querySelectorAll('.detail-images-phone__image-block');
+
+detailImagesPhones.forEach(button => {
+    button.onclick = function (e) {
+        let index = button.dataset.countImg;
+
+        gallery.slideTo(index);
+        
+        document.querySelector('.gallery').classList.add('active');
+    }
+})
+
+// slider gallery main phone
+
+// detail catalog
+const detailCatalot = new Swiper('.detail__catalot', {
+    // Navigation arrows
+    navigation: {
+      nextEl: '.detail-catalot-control__button.next',
+      prevEl: '.detail-catalot-control__button.prev',
+    },
+    breakpoints: {
+        1600: {
+            slidesPerView: 4,
+        },
+        1200: {
+            slidesPerView: 3,
+        },
+        780: {
+            slidesPerView: 2.2,
+        },
+        100: {
+            slidesPerView: 1.3,
+            spaceBetween: 20
+        },
+    }
+
+
+});
+// detail catalog

index.html

@@ -49,7 +49,7 @@
     </head>
     <body>
 
-        <header class="header">
+        <header class="header white">
             <div class="header__content">
                 <button class="header__open-menu" id="phone-menu">
                 </button>
@@ -59,6 +59,11 @@
                         <path d="M50.4859 5.79145C49.0065 3.27258 44.6431 2.78969 38.1761 4.42108C35.0048 1.89583 31.1372 0.376333 27.0791 0.0613091C23.021 -0.253715 18.9613 0.650395 15.4309 2.65541C11.9004 4.66042 9.06364 7.673 7.29143 11.2992C5.51922 14.9254 4.8941 18.9964 5.49783 22.9798C0.798105 27.6978 -0.973633 31.6805 0.51234 34.2081C1.42019 35.7547 3.36998 36.5377 6.22762 36.5377C8.05553 36.5052 9.87449 36.2769 11.6527 35.8569C12.0352 35.7721 12.4265 35.6785 12.8222 35.5785C15.793 37.9443 19.3793 39.4307 23.1672 39.8663C26.9551 40.3018 30.7903 39.6687 34.2301 38.0399C37.67 36.4112 40.5744 33.8533 42.6083 30.6613C44.6421 27.4693 45.7224 23.7733 45.7246 19.9998C45.7261 19.0003 45.6527 18.002 45.5048 17.0132C48.3119 14.1855 50.1891 11.5144 50.7805 9.29786C51.1519 7.93619 51.0508 6.75724 50.4859 5.79145ZM25.5013 1.7282C29.77 1.73333 33.9054 3.19952 37.206 5.87806C40.5066 8.5566 42.7692 12.2825 43.61 16.4238C40.0555 19.8366 35.081 23.4888 29.4339 26.6994C23.4306 30.1122 17.8253 32.4092 13.253 33.66C10.4542 31.1997 8.47718 27.9557 7.5842 24.3581C6.69122 20.7605 6.92444 16.9793 8.25293 13.5159C9.58142 10.0525 11.9424 7.07045 15.0229 4.96526C18.1033 2.86006 21.7576 1.73114 25.5013 1.7282ZM2.03568 33.3337C1.10145 31.7458 2.58523 28.6353 5.93746 25.0549C6.84638 28.4997 8.66755 31.6421 11.2131 34.1581C6.34633 35.2261 2.96332 34.9172 2.03568 33.3337ZM25.5013 38.2714C21.7268 38.275 18.0427 37.1282 14.95 34.9868C19.6937 33.5556 25.0243 31.2085 30.3044 28.2089C35.635 25.1767 40.3303 21.8008 43.8957 18.5424C43.9353 19.0231 43.9617 19.5082 43.9617 19.9998C43.9559 24.8432 42.0092 29.4866 38.5486 32.9118C35.088 36.3371 30.3959 38.2645 25.5013 38.2714ZM49.0835 8.84759C48.6152 10.5877 47.1974 12.6868 45.0718 14.9512C44.1572 11.4985 42.3267 8.3504 39.7697 5.83278C44.5728 4.78434 48.0327 5.08016 48.9648 6.66588C49.2857 7.2162 49.3274 7.94924 49.0835 8.84759Z" fill="#121212"/>
                         <path d="M73.68 26.12C73.1067 27.36 72.2733 28.32 71.18 29C70.0867 29.6667 68.7533 30 67.18 30C65.6467 30 64.34 29.6533 63.26 28.96C62.1933 28.2667 61.38 27.3133 60.82 26.1C60.2733 24.8733 60 23.48 60 21.92C60 20.36 60.2733 18.9867 60.82 17.8C61.3667 16.6133 62.18 15.6867 63.26 15.02C64.34 14.34 65.6467 14 67.18 14C68.78 14 70.1267 14.34 71.22 15.02C72.3133 15.6867 73.1533 16.6667 73.74 17.96L72.24 19.02C71.9333 18.2867 71.54 17.68 71.06 17.2C70.5933 16.7067 70.0333 16.34 69.38 16.1C68.7267 15.8467 67.9933 15.72 67.18 15.72C66.1 15.72 65.1467 15.9733 64.32 16.48C63.5067 16.9867 62.8733 17.7067 62.42 18.64C61.9667 19.5733 61.74 20.6667 61.74 21.92C61.74 23.2267 61.9667 24.36 62.42 25.32C62.8733 26.2667 63.5067 27 64.32 27.52C65.1333 28.0267 66.0867 28.28 67.18 28.28C67.9933 28.28 68.72 28.16 69.36 27.92C70.0133 27.68 70.5733 27.32 71.04 26.84C71.5067 26.36 71.8933 25.7667 72.2 25.06L73.68 26.12ZM75.7422 21.92C75.7422 20.36 76.0155 18.9867 76.5622 17.8C77.1222 16.6133 77.9422 15.6867 79.0222 15.02C80.1155 14.34 81.4289 14 82.9622 14C84.4955 14 85.8022 14.34 86.8822 15.02C87.9622 15.6867 88.7755 16.6133 89.3222 17.8C89.8822 18.9867 90.1622 20.36 90.1622 21.92C90.1622 23.48 89.8822 24.8733 89.3222 26.1C88.7755 27.3133 87.9555 28.2667 86.8622 28.96C85.7822 29.6533 84.4822 30 82.9622 30C81.4289 30 80.1155 29.6533 79.0222 28.96C77.9422 28.2667 77.1222 27.3133 76.5622 26.1C76.0155 24.8733 75.7422 23.48 75.7422 21.92ZM77.5022 21.92C77.5022 23.1467 77.7155 24.24 78.1422 25.2C78.5689 26.1467 79.1889 26.8933 80.0022 27.44C80.8289 27.9733 81.8155 28.24 82.9622 28.24C84.1089 28.24 85.0889 27.9667 85.9022 27.42C86.7155 26.8733 87.3355 26.1267 87.7622 25.18C88.1889 24.2333 88.4022 23.1467 88.4022 21.92C88.4022 20.7067 88.1889 19.64 87.7622 18.72C87.3355 17.8 86.7155 17.08 85.9022 16.56C85.0889 16.0267 84.1089 15.76 82.9622 15.76C81.8155 15.76 80.8289 16.0267 80.0022 16.56C79.1889 17.08 78.5689 17.8 78.1422 18.72C77.7155 19.64 77.5022 20.7067 77.5022 21.92ZM93.668 24.94C94.2013 26.1267 94.8413 26.98 95.588 27.5C96.348 28.02 97.2746 28.28 98.368 28.28C99.5413 28.28 100.455 28.0733 101.108 27.66C101.775 27.2467 102.108 26.5933 102.108 25.7C102.108 24.8867 101.781 24.2133 101.128 23.68C100.475 23.1467 99.5213 22.7533 98.268 22.5L97.268 22.28C95.668 21.96 94.4546 21.4533 93.628 20.76C92.8146 20.0667 92.408 19.1 92.408 17.86C92.408 17.0733 92.6413 16.3867 93.108 15.8C93.588 15.2133 94.2146 14.7667 94.988 14.46C95.7613 14.1533 96.608 14 97.528 14C99.048 14 100.255 14.34 101.148 15.02C102.041 15.7 102.788 16.7267 103.388 18.1L101.988 18.96C101.481 17.8267 100.861 17 100.128 16.48C99.408 15.96 98.528 15.7 97.488 15.7C96.4613 15.7 95.6413 15.8933 95.028 16.28C94.4146 16.6667 94.108 17.2333 94.108 17.98C94.108 18.6733 94.3946 19.2267 94.968 19.64C95.5413 20.0533 96.4013 20.3933 97.548 20.66L98.508 20.88C99.8013 21.1733 100.835 21.5467 101.608 22C102.395 22.44 102.961 22.9667 103.308 23.58C103.655 24.1933 103.821 24.9267 103.808 25.78C103.795 27.1667 103.288 28.22 102.288 28.94C101.288 29.6467 99.968 30 98.328 30C96.7413 30 95.468 29.6533 94.508 28.96C93.5613 28.2533 92.7813 27.22 92.168 25.86L93.668 24.94ZM107.561 14V30H105.801V14H107.561ZM107.621 14L114.641 30H112.821L105.881 14H107.621ZM121.381 14L114.641 30H112.821L119.641 14H121.381ZM121.461 14V30H119.701V14H121.461ZM123.457 21.92C123.457 20.36 123.73 18.9867 124.277 17.8C124.837 16.6133 125.657 15.6867 126.737 15.02C127.83 14.34 129.144 14 130.677 14C132.21 14 133.517 14.34 134.597 15.02C135.677 15.6867 136.49 16.6133 137.037 17.8C137.597 18.9867 137.877 20.36 137.877 21.92C137.877 23.48 137.597 24.8733 137.037 26.1C136.49 27.3133 135.67 28.2667 134.577 28.96C133.497 29.6533 132.197 30 130.677 30C129.144 30 127.83 29.6533 126.737 28.96C125.657 28.2667 124.837 27.3133 124.277 26.1C123.73 24.8733 123.457 23.48 123.457 21.92ZM125.217 21.92C125.217 23.1467 125.43 24.24 125.857 25.2C126.284 26.1467 126.904 26.8933 127.717 27.44C128.544 27.9733 129.53 28.24 130.677 28.24C131.824 28.24 132.804 27.9667 133.617 27.42C134.43 26.8733 135.05 26.1267 135.477 25.18C135.904 24.2333 136.117 23.1467 136.117 21.92C136.117 20.7067 135.904 19.64 135.477 18.72C135.05 17.8 134.43 17.08 133.617 16.56C132.804 16.0267 131.824 15.76 130.677 15.76C129.53 15.76 128.544 16.0267 127.717 16.56C126.904 17.08 126.284 17.8 125.857 18.72C125.43 19.64 125.217 20.7067 125.217 21.92ZM141.603 22.32H145.843C146.803 22.32 147.636 22.22 148.343 22.02C149.049 21.8067 149.609 21.46 150.023 20.98C150.449 20.5 150.663 19.86 150.663 19.06C150.663 18.3 150.449 17.6667 150.023 17.16C149.609 16.6533 149.036 16.28 148.303 16.04C147.583 15.8 146.763 15.68 145.843 15.68H141.603V22.32ZM141.603 24V29.98V30H139.883V14H145.843C147.763 14 149.349 14.3867 150.603 15.16C151.856 15.92 152.483 17.2333 152.483 19.1C152.483 20.2733 152.169 21.2267 151.543 21.96C150.916 22.68 150.103 23.2 149.103 23.52C148.116 23.84 147.029 24 145.843 24H141.603ZM156.192 14V30H154.492V14H156.192ZM164.692 22.84H156.192V21.16L164.692 21Line truncated
                     </svg>
+
+                    <svg class="header__logo-white" width="181" height="40" viewBox="0 0 181 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M50.4859 5.79145C49.0065 3.27258 44.6431 2.78969 38.1761 4.42108C35.0048 1.89583 31.1372 0.376333 27.0791 0.0613091C23.021 -0.253715 18.9613 0.650395 15.4309 2.65541C11.9004 4.66042 9.06364 7.673 7.29143 11.2992C5.51922 14.9254 4.8941 18.9964 5.49783 22.9798C0.798105 27.6978 -0.973633 31.6805 0.51234 34.2081C1.42019 35.7547 3.36998 36.5377 6.22762 36.5377C8.05553 36.5052 9.87449 36.2769 11.6527 35.8569C12.0352 35.7721 12.4265 35.6785 12.8222 35.5785C15.793 37.9443 19.3793 39.4307 23.1672 39.8663C26.9551 40.3018 30.7903 39.6687 34.2301 38.0399C37.67 36.4112 40.5744 33.8533 42.6083 30.6613C44.6421 27.4693 45.7224 23.7733 45.7246 19.9998C45.7261 19.0003 45.6527 18.002 45.5048 17.0132C48.3119 14.1855 50.1891 11.5144 50.7805 9.29786C51.1519 7.93619 51.0508 6.75724 50.4859 5.79145ZM25.5013 1.7282C29.77 1.73333 33.9054 3.19952 37.206 5.87806C40.5066 8.5566 42.7692 12.2825 43.61 16.4238C40.0555 19.8366 35.081 23.4888 29.4339 26.6994C23.4306 30.1122 17.8253 32.4092 13.253 33.66C10.4542 31.1997 8.47718 27.9557 7.5842 24.3581C6.69122 20.7605 6.92444 16.9793 8.25293 13.5159C9.58142 10.0525 11.9424 7.07045 15.0229 4.96526C18.1033 2.86006 21.7576 1.73114 25.5013 1.7282ZM2.03568 33.3337C1.10145 31.7458 2.58523 28.6353 5.93746 25.0549C6.84638 28.4997 8.66755 31.6421 11.2131 34.1581C6.34633 35.2261 2.96332 34.9172 2.03568 33.3337ZM25.5013 38.2714C21.7268 38.275 18.0427 37.1282 14.95 34.9868C19.6937 33.5556 25.0243 31.2085 30.3044 28.2089C35.635 25.1767 40.3303 21.8008 43.8957 18.5424C43.9353 19.0231 43.9617 19.5082 43.9617 19.9998C43.9559 24.8432 42.0092 29.4866 38.5486 32.9118C35.088 36.3371 30.3959 38.2645 25.5013 38.2714ZM49.0835 8.84759C48.6152 10.5877 47.1974 12.6868 45.0718 14.9512C44.1572 11.4985 42.3267 8.3504 39.7697 5.83278C44.5728 4.78434 48.0327 5.08016 48.9648 6.66588C49.2857 7.2162 49.3274 7.94924 49.0835 8.84759Z" fill="white"/>
+                        <path d="M73.68 26.12C73.1067 27.36 72.2733 28.32 71.18 29C70.0867 29.6667 68.7533 30 67.18 30C65.6467 30 64.34 29.6533 63.26 28.96C62.1933 28.2667 61.38 27.3133 60.82 26.1C60.2733 24.8733 60 23.48 60 21.92C60 20.36 60.2733 18.9867 60.82 17.8C61.3667 16.6133 62.18 15.6867 63.26 15.02C64.34 14.34 65.6467 14 67.18 14C68.78 14 70.1267 14.34 71.22 15.02C72.3133 15.6867 73.1533 16.6667 73.74 17.96L72.24 19.02C71.9333 18.2867 71.54 17.68 71.06 17.2C70.5933 16.7067 70.0333 16.34 69.38 16.1C68.7267 15.8467 67.9933 15.72 67.18 15.72C66.1 15.72 65.1467 15.9733 64.32 16.48C63.5067 16.9867 62.8733 17.7067 62.42 18.64C61.9667 19.5733 61.74 20.6667 61.74 21.92C61.74 23.2267 61.9667 24.36 62.42 25.32C62.8733 26.2667 63.5067 27 64.32 27.52C65.1333 28.0267 66.0867 28.28 67.18 28.28C67.9933 28.28 68.72 28.16 69.36 27.92C70.0133 27.68 70.5733 27.32 71.04 26.84C71.5067 26.36 71.8933 25.7667 72.2 25.06L73.68 26.12ZM75.7422 21.92C75.7422 20.36 76.0155 18.9867 76.5622 17.8C77.1222 16.6133 77.9422 15.6867 79.0222 15.02C80.1155 14.34 81.4289 14 82.9622 14C84.4955 14 85.8022 14.34 86.8822 15.02C87.9622 15.6867 88.7755 16.6133 89.3222 17.8C89.8822 18.9867 90.1622 20.36 90.1622 21.92C90.1622 23.48 89.8822 24.8733 89.3222 26.1C88.7755 27.3133 87.9555 28.2667 86.8622 28.96C85.7822 29.6533 84.4822 30 82.9622 30C81.4289 30 80.1155 29.6533 79.0222 28.96C77.9422 28.2667 77.1222 27.3133 76.5622 26.1C76.0155 24.8733 75.7422 23.48 75.7422 21.92ZM77.5022 21.92C77.5022 23.1467 77.7155 24.24 78.1422 25.2C78.5689 26.1467 79.1889 26.8933 80.0022 27.44C80.8289 27.9733 81.8155 28.24 82.9622 28.24C84.1089 28.24 85.0889 27.9667 85.9022 27.42C86.7155 26.8733 87.3355 26.1267 87.7622 25.18C88.1889 24.2333 88.4022 23.1467 88.4022 21.92C88.4022 20.7067 88.1889 19.64 87.7622 18.72C87.3355 17.8 86.7155 17.08 85.9022 16.56C85.0889 16.0267 84.1089 15.76 82.9622 15.76C81.8155 15.76 80.8289 16.0267 80.0022 16.56C79.1889 17.08 78.5689 17.8 78.1422 18.72C77.7155 19.64 77.5022 20.7067 77.5022 21.92ZM93.668 24.94C94.2013 26.1267 94.8413 26.98 95.588 27.5C96.348 28.02 97.2746 28.28 98.368 28.28C99.5413 28.28 100.455 28.0733 101.108 27.66C101.775 27.2467 102.108 26.5933 102.108 25.7C102.108 24.8867 101.781 24.2133 101.128 23.68C100.475 23.1467 99.5213 22.7533 98.268 22.5L97.268 22.28C95.668 21.96 94.4546 21.4533 93.628 20.76C92.8146 20.0667 92.408 19.1 92.408 17.86C92.408 17.0733 92.6413 16.3867 93.108 15.8C93.588 15.2133 94.2146 14.7667 94.988 14.46C95.7613 14.1533 96.608 14 97.528 14C99.048 14 100.255 14.34 101.148 15.02C102.041 15.7 102.788 16.7267 103.388 18.1L101.988 18.96C101.481 17.8267 100.861 17 100.128 16.48C99.408 15.96 98.528 15.7 97.488 15.7C96.4613 15.7 95.6413 15.8933 95.028 16.28C94.4146 16.6667 94.108 17.2333 94.108 17.98C94.108 18.6733 94.3946 19.2267 94.968 19.64C95.5413 20.0533 96.4013 20.3933 97.548 20.66L98.508 20.88C99.8013 21.1733 100.835 21.5467 101.608 22C102.395 22.44 102.961 22.9667 103.308 23.58C103.655 24.1933 103.821 24.9267 103.808 25.78C103.795 27.1667 103.288 28.22 102.288 28.94C101.288 29.6467 99.968 30 98.328 30C96.7413 30 95.468 29.6533 94.508 28.96C93.5613 28.2533 92.7813 27.22 92.168 25.86L93.668 24.94ZM107.561 14V30H105.801V14H107.561ZM107.621 14L114.641 30H112.821L105.881 14H107.621ZM121.381 14L114.641 30H112.821L119.641 14H121.381ZM121.461 14V30H119.701V14H121.461ZM123.457 21.92C123.457 20.36 123.73 18.9867 124.277 17.8C124.837 16.6133 125.657 15.6867 126.737 15.02C127.83 14.34 129.144 14 130.677 14C132.21 14 133.517 14.34 134.597 15.02C135.677 15.6867 136.49 16.6133 137.037 17.8C137.597 18.9867 137.877 20.36 137.877 21.92C137.877 23.48 137.597 24.8733 137.037 26.1C136.49 27.3133 135.67 28.2667 134.577 28.96C133.497 29.6533 132.197 30 130.677 30C129.144 30 127.83 29.6533 126.737 28.96C125.657 28.2667 124.837 27.3133 124.277 26.1C123.73 24.8733 123.457 23.48 123.457 21.92ZM125.217 21.92C125.217 23.1467 125.43 24.24 125.857 25.2C126.284 26.1467 126.904 26.8933 127.717 27.44C128.544 27.9733 129.53 28.24 130.677 28.24C131.824 28.24 132.804 27.9667 133.617 27.42C134.43 26.8733 135.05 26.1267 135.477 25.18C135.904 24.2333 136.117 23.1467 136.117 21.92C136.117 20.7067 135.904 19.64 135.477 18.72C135.05 17.8 134.43 17.08 133.617 16.56C132.804 16.0267 131.824 15.76 130.677 15.76C129.53 15.76 128.544 16.0267 127.717 16.56C126.904 17.08 126.284 17.8 125.857 18.72C125.43 19.64 125.217 20.7067 125.217 21.92ZM141.603 22.32H145.843C146.803 22.32 147.636 22.22 148.343 22.02C149.049 21.8067 149.609 21.46 150.023 20.98C150.449 20.5 150.663 19.86 150.663 19.06C150.663 18.3 150.449 17.6667 150.023 17.16C149.609 16.6533 149.036 16.28 148.303 16.04C147.583 15.8 146.763 15.68 145.843 15.68H141.603V22.32ZM141.603 24V29.98V30H139.883V14H145.843C147.763 14 149.349 14.3867 150.603 15.16C151.856 15.92 152.483 17.2333 152.483 19.1C152.483 20.2733 152.169 21.2267 151.543 21.96C150.916 22.68 150.103 23.2 149.103 23.52C148.116 23.84 147.029 24 145.843 24H141.603ZM156.192 14V30H154.492V14H156.192ZM164.692 22.84H156.192V21.16L164.692 21Line truncated
+                    </svg>
                 </div>
 
                 <ul class="main-menu">
@@ -85,7 +90,15 @@
                     <div class="mini-profile__item">
                         <div class="lang">
                             <button class="lang__open">
-                                RU
+                                <p>RU</p>
+                                <div class="lang-open__arrow">
+                                    <svg class="lang-open__black" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L5 3.93934L8.46967 0.46967C8.76256 0.176777 9.23744 0.176777 9.53033 0.46967C9.82322 0.762563 9.82322 1.23744 9.53033 1.53033L5.53033 5.53033C5.23744 5.82322 4.76256 5.82322 4.46967 5.53033L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#333333"/>
+                                    </svg>
+                                    <svg class="lang-open__white" width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M0.46967 0.46967C0.762563 0.176777 1.23744 0.176777 1.53033 0.46967L5 3.93934L8.46967 0.46967C8.76256 0.176777 9.23744 0.176777 9.53033 0.46967C9.82322 0.762563 9.82322 1.23744 9.53033 1.53033L5.53033 5.53033C5.23744 5.82322 4.76256 5.82322 4.46967 5.53033L0.46967 1.53033C0.176777 1.23744 0.176777 0.762563 0.46967 0.46967Z" fill="#fff"/>
+                                    </svg>
+                                </div>
                             </button>
                             <div class="lang__content">
                                 <ul class="lang__list">
@@ -111,12 +124,14 @@
                     </div>
                     <div class="mini-profile__item">
                         <a href="" class="mini-profile__button">
-                            <img src="assets/img/svg/mini-profile/profile.svg" alt="" class="mini-profile__icon">
+                            <img src="assets/img/svg/mini-profile/profile.svg" alt="" class="mini-profile__icon black">
+                            <img src="assets/img/svg/mini-profile/profile-w.svg" alt="" class="mini-profile__icon white">
                         </a>
                     </div>
                     <div class="mini-profile__item">
-                        <button class="mini-profile__button">
+                        <button class="mini-profile__button basket-open">
-                            <img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon">
+                            <img src="assets/img/svg/mini-profile/basket.svg" alt="" class="mini-profile__icon black">
+                            <img src="assets/img/svg/mini-profile/basket-w.svg" alt="" class="mini-profile__icon white">
                         </button>
                     </div>
                 </div>
@@ -274,7 +289,7 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay">
                                     Купить
                                 </button>
                             </div>
@@ -297,7 +312,7 @@
                                         <p class="product-item-overlay-field__title">Объем</p>
 
                                         <div class="select">
-                                            <input type="text" class="select__state" value="2 кг">
+                                            <input type="text" class="select__state" value="2 кг" readonly>
                                             <div class="state__block">
                                                 <ul class="state__content">
                                                     <li>
@@ -323,11 +338,11 @@
                                         <p class="product-item-overlay-field__title">Количество</p>
 
                                         <div class="counter">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -368,11 +383,80 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay ">
                                     Купить
                                 </button>
                             </div>
                         </div>
+                        <div class="product-item__overlay">
+                            <div class="product-item-overlay__header">
+                                <p class="product-item__title">
+                                    Сухой корм, 2 кг, для крупных и средних пород
+                                </p>
+                                <ul class="product-item-overlay__tags">
+                                    <li>Seperpremium</li>
+                                    <li>Для крупных и средних пород </li>
+                                    <li>Полнорационный</li>
+                                </ul>
+                            </div>
+                            
+                            <form class="product-item__form" method="post" action="/send-telegram.php">
+                                <div class="product-item-overlay__input-block">
+                                    <div class="product-item-overlay__field">
+                                        <p class="product-item-overlay-field__title">Объем</p>
+
+                                        <div class="select">
+                                            <input type="text" class="select__state" value="2 кг" readonly>
+                                            <div class="state__block">
+                                                <ul class="state__content">
+                                                    <li>
+                                                        <button class="state__button active">
+                                                            2 кг
+                                                        </button>
+                                                    </li>
+                                                    <li>
+                                                        <button class="state__button">
+                                                            3 кг
+                                                        </button>
+                                                    </li>
+                                                    <li>
+                                                        <button class="state__button">
+                                                            4 кг
+                                                        </button>
+                                                    </li>
+                                                </ul>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="product-item-overlay__field">
+                                        <p class="product-item-overlay-field__title">Количество</p>
+
+                                        <div class="counter">
+                                            <button class="counter__button minus">
+                                                <img src="assets/img/svg/main/minus.svg" alt="">
+                                            </button>
+                                            <input type="text" class="counter__input" value="1">
+                                            <button class="counter__button plus">
+                                                <img src="assets/img/svg/main/plus.svg" alt="">
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                                <p class="product-item-overlay__price">
+                                    1280
+                                </p>
+                                <div class="product-item-overlay__block-button">
+                                    <div class="product-item-overlay__button">
+                                        <input class="button button--gradient button--base button--100-perc" type="submit" value="Добавить в корзину">
+                                    </div>
+                                    <div class="product-item-overlay__button">
+                                        <button class="to-know button--100-perc">
+                                            <p>Подробнее</p>
+                                        </button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
                     </div>
                     <div class="product__item hiding">
                         <div class="product-item__label">
@@ -421,7 +505,7 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay">
                                     Купить
                                 </button>
                             </div>
@@ -446,7 +530,7 @@
                                 1 304
                             </p>
                             <div class="product-item__bye">
-                                <button class="button button--white button--100-perc">
+                                <button class="button button--white button--100-perc open-overlay">
                                     Купить
                                 </button>
                             </div>
@@ -490,9 +574,9 @@
             </div>
         </main>
 
-        <div class="modal" style="display: none;">
+        <div class="modal">
             <aside class="modal__aside">
-                <div class="modal__item modal__filter" style="display: none;">
+                <div class="modal__item modal__filter">
                     <button class="modal__close">
                         <img src="assets/img/svg/main/black-x.svg" alt="">
                     </button>
@@ -500,7 +584,7 @@
                     <div class="modal__header">
                         <p class="modal__title">Фильтры</p>
                         <div class="modal__content">
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ДЛЯ КОГО
                                 </p>
@@ -525,7 +609,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ТИП ПРОДУКЦИИ
                                 </p>
@@ -557,7 +641,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ВКУС
                                 </p>
@@ -613,7 +697,7 @@
                     </div>
                 </div>
 
-                <div class="modal__item modal__basket" style="display: none;">
+                <div class="modal__item modal__basket">
                     <button class="modal__close">
                         <img src="assets/img/svg/main/black-x.svg" alt="">
                     </button>
@@ -630,11 +714,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -653,11 +737,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -676,11 +760,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -699,11 +783,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>
@@ -722,11 +806,11 @@
                                     <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
                                     <div class="modal-basket-item__control">
                                         <div class="counter counter--small">
-                                            <button class="counter__button">
+                                            <button class="counter__button minus">
                                                 <img src="assets/img/svg/main/minus.svg" alt="">
                                             </button>
                                             <input type="text" class="counter__input" value="1">
-                                            <button class="counter__button">
+                                            <button class="counter__button plus">
                                                 <img src="assets/img/svg/main/plus.svg" alt="">
                                             </button>
                                         </div>

modal-filter.html

@@ -500,7 +500,7 @@
                     <div class="modal__header">
                         <p class="modal__title">Фильтры</p>
                         <div class="modal__content">
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ДЛЯ КОГО
                                 </p>
@@ -525,7 +525,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ТИП ПРОДУКЦИИ
                                 </p>
@@ -557,7 +557,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="toggle active">
+                            <div class="toggle">
                                 <p class="toggle__title">
                                     ВКУС
                                 </p>