fix inputTabs

assets/css/gp-style-desktop.css

@@ -14,14 +14,16 @@
 
     z-index: 200;
 }
-.header::after{
+.header__content::after{
     content: '';
 
     position: absolute;
-    left: 24px;
+    left: auto;
+    right: auto;
     bottom: 0;
     
     width: calc(100% - 48px);
+    max-width: 1552px;
     height: 1px;
 
     background:  var(--text-3);
@@ -182,6 +184,10 @@
     display: none;
 
     padding: 24px 16px;
+
+    height: calc(100vh - 56px);
+
+    overflow-x: auto;
 }
 .header-phone-menu__item{
     padding: 16px 0;
@@ -242,13 +248,12 @@
     font-weight: 500;
     font-size: 16px;
     line-height: 125%;
-    color: #121212;
     color: var(--text-black);
 
     text-decoration: none;
 }
 .header.white{
-  /* background-color: thistle; */
+  background: none;
 }
 .header.white .header__logo-black{
   display: none;
@@ -265,7 +270,7 @@
 .header.white .lang__open{
   color: var(--text-white);
 }
-.header.white::after{
+.header.white .header__content::after{
   background: var(--background-white);
 }
 .header.white .lang-open__black{
@@ -284,6 +289,13 @@
 .header.white .header__open-menu::after{
   background: var(--background-white);
 }
+.header__phone-menu::-webkit-scrollbar {
+  width: 0px;
+}
+
+main{
+  padding-top: 72px;
+}
 /* header end */
 
 /* product */
@@ -310,6 +322,7 @@
     border-radius: 16px;
   
     background: var(--gradient-blue);
+    border: none;
   }
   .product-tag-item__content{
     padding: 3px 11px;
@@ -344,6 +357,33 @@
     background-repeat: no-repeat;
     background-position: center;
   }
+  .product__error{
+    margin: auto;
+
+    padding: 0 16px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 100%;
+    text-transform: uppercase;
+    color: var(--text-0);
+    text-align: center;
+  }
+  .product__error-button{
+    border-radius: 20px;
+    padding: 4px 24px;
+
+    font-family: var(--font-family);
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+
+    border: 1px solid var(--text-0);
+    background: var(--background-white);
+    text-decoration: none;
+  }
   .product__title{
     font-family: var(--font-family);
     font-weight: 700;
@@ -431,6 +471,9 @@
     color: #f4f1f0;
 
     border-radius: 16px;
+    display: block;
+
+    text-decoration: none;
   }
   .product-item-label__tag--new{
     background: var(--gradient-blue);
@@ -482,6 +525,9 @@
     font-size: 20px;
     line-height: 120%;
     color: var(--text-black);
+
+    text-decoration: none;
+    display: block;
   }
   .product-item__title:first-child{
     margin-top: 0;
@@ -502,6 +548,7 @@
   }
   .product-item__price p::after{
     content: '₽';
+    padding-left: 5px;
   }
   .product-item__price span{
     margin-left: 9px;
@@ -651,9 +698,9 @@
 /* product */
 
 /* modal */
-.modal__button .to-know{
+/* .modal__button .to-know{
   display: none;
-}
+} */
 /* modal */
 
 /* footer */
@@ -704,6 +751,9 @@
 .footer-list__item:nth-child(even){
   width: 322px;
 }
+.footer-list__item .button{
+  border-radius: 24px;
+}
 .footer-list__title{
   font-family: var(--font-family);
   font-weight: 700;
@@ -841,7 +891,6 @@
   font-size: 36px;
   line-height: 111%;
   text-transform: uppercase;
-  color: #121212;
 }
 .detail-block-price__price::after{
   content: '₽';
@@ -941,14 +990,21 @@
   margin-top: 48px;
   margin-bottom: 48px;
 }
-.detail__catalot{
+.detail__wrapper-catalot{
   margin-top: 64px;
 
-  width: 100%;
+  width: calc(100% + 16px);
 
   overflow: hidden;
+
+  position: relative;
+}
+.detail__catalot{
+
 }
 .detail-catalot__header{
+  padding-right: 16px;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -993,6 +1049,9 @@
 .detail__images-phone{
   display: none;
 }
+.back-detail{
+  display: none;
+}
 .toggle__table{
   margin-top: 32px;
 
@@ -1199,6 +1258,679 @@
 
 /* gallery */
 
+
+/* cabinet */
+.cabinet{
+  padding: 24px;
+
+  display: flex;
+  justify-content: space-between;
+}
+.cabinet__control{
+  margin: 24px;
+  margin-bottom: 0;
+
+  display: none;
+}
+.cabinet-control__button{
+  margin-left: 8px;
+
+  padding: 12px 16px;
+  
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  background: var(--background-white);
+  border: 2px solid var(--text-black);
+  border-radius: 48px;
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-control__button:first-child{
+  margin-left: 0;
+}
+.cabinet-control__button.active{
+  background: var(--background-black);
+  color: var(--text-white);
+}
+.cabinet-control__button:hover{
+  opacity: .8;
+}
+.cabinet__orders{
+  width: calc(((100% - 48px) / 3) * 2);
+}
+.cabinet__profile{
+  width: calc((100% - 48px) / 3);
+}
+
+.cabinet-card{
+  margin-top: 32px;
+
+  padding: 1px;
+
+  border-radius: 20px;
+}
+.cabinet-card:first-child{
+  margin-top: 0;
+}
+.cabinet-card--green{
+  background: var(--background-green);
+}
+.cabinet-card--green-white{
+  background: var(--background-green-white);
+}
+.cabinet-card--green-white .cabinet-card__content{
+  background: none;
+}
+.cabinet-card--red-blue{
+  background: var(--gradient-red);
+}
+.cabinet-card--grey{
+  background: var(--background-9);
+}
+.cabinet-card__content{
+  padding: 23px;
+
+  border-radius: 19px;
+
+  background-color: var(--background-white);
+}
+.cabinet-card__element{
+  margin-top: 24px;
+
+  position: relative;
+}
+.cabinet-card__element--margin-top-32{
+  margin-top: 32px;
+}
+.cabinet-card__element:first-child,
+.cabinet-card__element--margin-top-32:first-child{
+  margin-top: 0
+}
+.cabinet-card__element-change{
+  position: absolute;
+  top: 14px;
+  right: 0;
+
+  width: 24px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/change-dot.svg);
+  border: none;
+  background-color: var(--background-white);
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-card__element-change:hover{
+  opacity: .8;
+}
+.cabinet-card__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 26px;
+  line-height: 123%;
+  text-transform: uppercase;
+  background: var(--gradient-blue);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.cabinet-card__text{
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+
+  color: var(--text-black);
+}
+.cabinet-card__text--grey{
+  color: var(--text-grey);
+}
+.cabinet-card__label{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+
+  color: var(--text-3);
+}
+.cabinet-card__status{
+  padding-left: 20px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+
+  position: relative;
+}
+.cabinet-card__status--chek{
+  color: var(--text-green);
+}
+.cabinet-card__status--chek::before{
+  content: '';
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 16px;
+  height: 16px;
+
+  background-image: url(../img/svg/main/status-chek.svg);
+  object-fit: contain;
+}
+.cabinet-card__status--cancelled{
+  color: var(--text-red);
+}
+.cabinet-card__status--cancelled::before{
+  content: '';
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 16px;
+  height: 16px;
+
+  background-image: url(../img/svg/main/status-cancelled.svg);
+  object-fit: contain;
+}
+.cabinet-card__block-accounts{
+  display: flex;
+}
+.cabinet-card__account{
+  margin-left: 16px;
+
+  width: 40px;
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background: var(--background-9);
+  border-radius: 50%;
+}
+.cabinet-card__account:first-child{
+  margin-left: 0;
+}
+.cabinet-card__block-buttons{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cabinet-card__button{
+  padding: 8px 8px 6px 0;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  background: none;
+  border: none;
+
+  position: relative;
+
+  text-decoration: none;
+}
+.cabinet-card__button::before{
+  content: '';
+
+  position: absolute;
+  bottom: 6px;
+
+  width: calc(100% - 8px);
+  height: 1px;
+
+  background: var(--text-black);
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-card__button:hover{
+  opacity: .8;
+}
+.cabinet-card__confirm{
+  margin-top: 16px;
+
+  border-radius: 20px;
+  padding: 4px 24px;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+
+
+  background: var(--background-black);
+  color: var(--text-white);
+  border: none;
+
+  transition: opacity .2s ease-out;
+}
+.cabinet-card__confirm:hover{
+  opacity: .8;
+}
+.cabinet-card__text, .cabinet-card__label, .cabinet-card__status, .cabinet-card__block-accounts, .cabinet-card__block-buttons{
+  margin-top: 8px;
+}
+.cabinet-card__text:first-child, .cabinet-card__label:first-child, .cabinet-card__status:first-child, .cabinet-card__block-accounts:first-child, .cabinet-card__block-buttons:first-child{
+  margin-top: 0px;
+}
+.cabinet-card__block-add-pets{
+  width: 100%;
+
+  display: flex;
+  align-items: center;
+
+  background: none;
+  border: none;
+}
+.cabinet-card-add-pets__circle{
+  width: 48px;
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border: 1px solid var(--text-6);
+  border-radius: 50%;
+}
+.cabinet-card-add-pets__text{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+
+  color: var(--text-6);
+
+  position: relative;
+}
+.cabinet-card-add-pets__text::after{
+  content: '';
+
+  position: absolute;
+  left: 0;
+  bottom: -4px;
+
+  width: 100%;
+  height: 1px;
+
+  background: var(--text-6);
+}
+.cabinet-card__discount{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-discount__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-discount__percent::after{
+  content: '%';
+}
+.cabinet-card-discount__arrow{
+  display: inline-block;
+
+  margin-left: 6px;
+
+  width: 20px;
+  aspect-ratio: 1;
+
+  background-image: url(../img/svg/main/arrow-breadcrumbs-black.svg);
+  background-position: center;
+}
+.cabinet-card__no-orders{
+  margin-top: 32px;
+
+  padding: 48px 24px;
+}
+.cabinet-card-no-orders__element{
+  margin-top: 26px;
+}
+.cabinet-card-no-orders__element:first-child{
+  margin-top: 0;
+}
+.cabinet-card-no-orders__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  text-align: center;
+  color: var(--text-black);
+}
+.cabinet-card__pet{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-pet__icon{
+  width: 48px;
+  aspect-ratio: 1;
+
+  border-radius: 50%;
+  background: var(--gradient-blue);
+}
+.cabinet-card-pet-icon__content{
+  margin: 1px;
+  
+  width: calc(100% - 2px);
+  aspect-ratio: 1;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  border-radius: 50%;
+  background: var(--background-white);
+}
+.cabinet-card-pet-icon__content img{
+  width: 32px;
+  aspect-ratio: 1;
+
+  object-fit: contain;
+}
+.cabinet-card-pet__name{
+  margin-left: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card__order{
+  position: relative;
+}
+.cabinet-card-order__header{
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+.cabinet-card-order__main{}
+.cabinet-card-order-main__date{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 24px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-main__number::before{
+  content: '№';
+}
+.cabinet-card-order__payment{
+  display: flex;
+  align-items: flex-end;
+
+  transition: margin .2s ease-out;
+}
+.cabinet-card-order-payment__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-black);
+}
+.cabinet-card-order-payment__price::after{
+  margin-left: 5px;
+  content: '₽';
+}
+.cabinet-card-order-payment__price--add::after{
+  display: none;
+}
+.cabinet-card-order__content{
+  margin-top: 24px;
+}
+.cabinet-card-order__content
+.cabinet-card-order__status{
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-order-status__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);  
+}
+.cabinet-card-order-status__pointer{
+  margin-left: 12px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-status__pointer--grey{
+  color: var(--text-6);
+}
+.cabinet-card-order-status__pointer--green{
+  color: var(--text-green);
+}
+.cabinet-card-order-status__pointer--red{
+  color: var(--text-red);
+}
+.cabinet-card-order__block-detail{
+  height: 0;
+  overflow: hidden;
+
+  transition: height .2s ease-out;
+}
+.cabinet-card-order__detail{
+  padding-top: 24px;
+}
+.cabinet-card-order-detail__address{}
+.cabinet-card-order-detail-address__title{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-detail-address__text{
+  margin-top: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black); 
+}
+.cabinet-card-order-detail__main{
+  margin-top: 24px;
+
+  display: flex;
+  justify-content: space-between;
+}
+.cabinet-card-order-detail-main__products{}
+.cabinet-card-order-detail-main__product{
+  margin-top: 4px;
+
+  display: flex;
+  align-items: center;
+}
+.cabinet-card-order-detail-main__product:first-child{
+  margin-top: 0;
+}
+.cabinet-card-order-detail-main-product__img{
+  width: 106px;
+  height: 96px;
+}
+.cabinet-card-order-detail-main-product__content{
+  display: flex;
+}
+.cabinet-card-order-detail-main-product__description{
+  width: 212px;
+}
+.cabinet-card-order-detail-main-product-description__what{
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-black);
+}
+.cabinet-card-order-detail-main-product-description__with-what{
+  margin-top: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
+  color: var(--text-6);
+}
+.cabinet-card-order-detail-main-product__count{
+  margin-left: 8px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 133%;
+  text-align: right;
+  color: var(--text-6);
+}
+.cabinet-card-order-detail-main-product__count::before{
+  margin-right: 4px;
+
+  content: 'x';
+}
+.cabinet-card-order-detail-main-product__price{
+  margin-left: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 133%;
+  text-align: right;
+  color: var(--text-black);
+}
+.cabinet-card-order-detail-main-product__price::after{
+  content: ' Р';
+}
+.cabinet-card-order-detail-main__links{
+  display: flex;
+  flex-direction: column;
+}
+.cabinet-card-order-detail-main__link{
+  margin-top: 16px;
+}
+.cabinet-card-order-detail-main__link:first-child{
+  margin-top: 0;
+}
+.cabinet-card-order__open-detail{
+  margin-top: 24px;
+
+  padding-right: 24px;
+
+  font-family: var(--font-family);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  border: none;
+  background: none;
+
+  position: relative;
+}
+.cabinet-card-order__open-detail::after{
+  content: '';
+
+  position: absolute;
+  top: 6.75px;
+  right: 0;
+
+  width: 12.5px;
+  height: 10.5px;
+
+  background-image: url(../img/svg/main/arrow-black.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  transition: transform .2s;
+  /* transform: rotate(180deg); */
+}
+.cabinet-card-order__detail-short{
+  position: absolute;
+  right: 0;
+  bottom: 0;
+
+  display: flex;
+  align-items: center;
+
+  transition: opacity .2s .1s ease-out;
+}
+.cabinet-card-order-detail-short__item{
+  border-radius: 16px;
+  width: 106px;
+  height: 96px;
+}
+.cabinet-card__download{
+  margin-top: 32px;
+}
+.cabinet-card__order.active .cabinet-card-order__detail-short{
+  opacity: 0;
+}
+.cabinet-card__order.active .cabinet-card-order__open-detail::after{
+  transform: rotate(180deg);
+}
+.cabinet-card-order__payment-add{
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+}
+.cabinet-card-order__sub-title{
+  font-size: 14px;
+}
+.cabinet-card-order__date{
+  font-size: 16px;
+}
+/* .cabinet-card-no-orders__ */
+.cabinet__subscription-pc{
+}
+.cabinet__subscription-mobile{
+  display: none;
+}
+/* cabinet */
+
 @media only screen and (max-width: 1600px) {
 
 .wrapper{
@@ -1214,21 +1946,63 @@
 .gallery__wrapper{
   max-width: 1280px;
 }
+
+.header__content::after{
+  max-width: 1232px;
+}
 }
 
 @media only screen and (max-width: 1365px) {
   .gallery__wrapper{
     max-width: 100%;
   }
+  
 }
 
+.subscription{
+  margin-top: 12px;
+}
+.subscription__item{
+  padding: 12px 0;
+  justify-content: space-between;
+}
+.subscription__item{
+  font-size: 20px;
+}
+.subscription__add{
+  color: var(--text-black);
+}
+.subscription__add-header{
 
-
+}
-
+.subscription__add-title{
-
+  font-size: 24px;
-
+}
-
+.subscription__add-content{
-/* Стили для лептопов  */
+  padding: 24px 0 12px 0;
-/* @media only screen and (min-width: 992px) and (max-width: 1400px) {
+}
-
+.subscription__add-product{
-} */
+  align-items: start;
+}
+.subscription__add-product > *:nth-child(3){
+ margin-left: auto;
+ align-items: center;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__what {
+  font-size: 16px;
+  line-height: 125%;
+}
+.subscription__add .cabinet-card-order-detail-main-product-description__with-what {
+  font-weight: 500;
+  font-size: 16px;
+}
+.subscription__add .cabinet-card-order-detail-main-product__count{
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 100%;
+}
+.subscription__add .cabinet-card-order-detail-main-product__price{
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 120%;
+}

assets/css/gp-style-mobile.css

@@ -13,13 +13,17 @@
 .modal__filter{
     width: 100%;
 }
+.modal__to-know,
+.modal__to-know-submit{
+    width: 100%;
+}
 .modal__button .to-know{
     display: flex;
 
     background: none;
 }
 .modal__basket .modal__header {
-    height: calc(100% - 92px);
+    height: calc(100% - 156px);
     margin-bottom: -36px;
 }
 .modal-basket-item__block-image{
@@ -42,6 +46,65 @@
     
     font-size: 16px;
 }
+.modal-basket__item--return{
+    flex-direction: column;
+    align-items: start;
+}
+.modal-basket__item--return .modal-basket-item__title{
+    margin-right: auto;
+}
+.notification--width-584{
+    width: 100%;
+}
+.notification__title{
+    font-size: 20px;
+}
+.notification__text--center-pc{
+    text-align: start;
+}
+.notification__img{
+    height: 360px;
+}
+.notification__title{
+    padding-right: 96px;
+}
+.modal-form__buttons--two{
+    flex-wrap: wrap;
+}
+.modal-form__buttons--two button, .modal-form__buttons--two input{
+    margin-top: 24px;
+    width: 100%;
+}
+.modal-form__buttons--two button:first-child, .modal-form__buttons--two input:first-child{
+    margin-top: 0;
+}
+.modal-map__control{
+    flex-wrap: wrap;
+}
+.modal-map-control__item{
+    width: calc(100% - 24px);
+}
+.form__full-mobile{
+    width: 100%;
+    border-radius: 0;
+    border: none;
+}
+
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(1){
+    width: 69px;
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(2){
+
+}
+.modal-form-content__line--three .modal-form-content-line__element:nth-child(3){
+    width: 82px;
+}
+.form__input{
+    padding: 12px 14px;
+}
+.modal-form--height-100-phone{
+    min-height: 100%;
+}
 /* modal */
 
 /* footer */
@@ -65,6 +128,11 @@
 
     margin-top: 24px;
 }
+.footer-about__text{
+    padding-top: 35px;
+    display: block;
+    text-align: left;
+}
 .footer__list{
     margin-top: 20px;
 }
@@ -78,7 +146,70 @@
     margin-top: 32px;
     margin-left: 0;
 }
+.toggle__table--three .toggle-table__block:nth-child(1){
+    width: 31%;
+}
 /* detail */
+
+/* cabinet */
+.cabinet-card__title{
+    font-size: 20px;
+}
+.cabinet-card__no-orders{
+    margin-top: 16px;
+}
+.cabinet-card-order__header{
+    flex-direction: column;
+}
+.cabinet-card-order__payment{
+    margin-top: 16px;
+}
+.cabinet-card-order-detail__main{
+    flex-direction: column;
+}
+.cabinet-card-order-detail-main__links{
+    margin-top: 24px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__img{
+    width: 70px;
+    height: 70px;
+}
+.cabinet-card-order-detail-main__product{
+    margin-top: 16px;
+
+    align-items: start;
+}
+.cabinet-card-order-detail-main-product__content{
+    margin-left: 16px;
+
+    flex-wrap: wrap;
+
+    position: relative;
+}
+.cabinet-card-order-detail-main-product__description{
+    width: 100%;
+}
+.cabinet-card-order-detail-main-product__count{
+    position: absolute;
+    left: 116px;
+    bottom: 0;
+}
+.cabinet-card-order-detail-main-product__price{
+    position: absolute;
+    left: 153px;
+    bottom: 0;
+}
+.cabinet-card__content{
+    padding-right: 19px;
+}
+.cabinet-card-order-main__date{
+    font-size: 20px;
+}
+/* .cabinet-card__order.active */
+/* .cabinet-card__order.active */
+/* cabinet */
 }
 
 @media only screen and (max-width: 576px) {
@@ -100,6 +231,15 @@
 .modal__aside{
     left: 0;
 }
+.form-input-radio__title span{
+    display: block;
+    width: 100%;
+
+    color: var(--text-grey);
+}
+.modal-form__title{
+    font-size: 20px;
+}
 /* modal */
 
 /* detail */
@@ -107,4 +247,90 @@
 .detail-block-form__submit{
     min-width: 100%;
 }
+/* detail */
+
+/* cabinet */
+
+.cabinet-card-order-detail-main-product__img{
+    width: 40px;
+    height: 40px;
 }
+
+.cabinet-card-order-detail-main-product__count{
+    left: auto;
+    right: 71px;
+}
+.cabinet-card-order-detail-main-product__price{
+    left: auto;
+    right: 0;
+}
+.cabinet-card-order__detail-short{
+    transition-delay: 0;
+    transition-duration: 0;
+}
+/* cabinet */
+}
+
+@media only screen and (max-width: 720px) {
+    .subscription__item{
+        flex-direction: column;
+    }
+
+    .subscription__item > p:first-child{
+        font-size: 16px;
+        color: var(--text-6);
+    }
+    .subscription__item > p:last-child{
+        margin-top: 6px;
+    }
+
+    .subscription__add-title {
+        font-size: 20px;
+    }
+
+    .subscription__add-product{
+        flex-wrap: wrap;
+    }
+
+    .subscription__add-product > *:not(:first-child){
+        padding-top: 0;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__img{
+        width: 73px;
+        height: 66px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__what{
+        font-size: 12px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product-description__with-what{
+        margin-top: 8px;
+
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__description {
+        width: calc(100% - 73px);
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__content{
+        position: static;
+        margin-top: -10px;
+        margin-left: auto;
+        width: calc(100% - 73px);
+
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__count{
+        position: static;
+        font-size: 12px;
+    }
+    .subscription__add-product .cabinet-card-order-detail-main-product__price{
+        position: static;
+        font-size: 16px;
+    }
+}
+

assets/css/gp-style-order.css

@@ -0,0 +1,241 @@
+.order{
+    display: flex;
+}
+.order__title{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order__contacts{
+    width: calc(50% - 0.5px);
+
+    padding: 24px;
+
+    border-right: 1px solid #121212;
+}
+.order-contacts__header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-contacts__form{
+    margin-top: 24px;
+}
+.order-contacts__delivery{
+    margin-top: 47.5px;
+
+    padding-top: 48px;
+
+    border-top: 1px solid var(--background-grey);
+}
+
+.order-contacts-deliver__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date{
+    padding: 8px;
+
+    border-radius: 24px;
+
+    background: var(--background-grey);
+}
+.order-contacts-deliver__date .form-input-radio__item{
+    margin-top: 24px;
+}
+.order-contacts-deliver__date .form-input-radio__item:first-child{
+    margin-top: 0;
+}
+.order__your{  
+    width: calc(50% - 0.5px);
+
+    padding: 24px 24px 24px 48px;
+
+    background: var(--background-grey);
+}
+.order-your__products{
+    margin-top: 48px;
+}
+.order-your-products__item{
+    margin-top: 16px;
+
+    display: flex;
+    justify-content: space-between;
+}
+.order-your-products__left{
+    display: flex;
+}
+.order-your-products__img{
+    width: 40px;
+    aspect-ratio: 1;
+
+    border-radius: 16px;
+}
+.order-your-products__content{
+    margin-left: 16px;
+}
+.order-your-products__name{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-black);
+
+    text-decoration: none;
+}
+.order-your-products__description{
+    margin-top: 8px;
+
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    color: var(--text-6);
+}
+.order-your-products__description span{
+    font-weight: 700;
+}
+.order-your-products__description span::before{
+    margin-left: 3px;
+
+    content: 'x ';
+}
+.order-your-products__right{
+    display: flex;
+}
+.order-your-products__count{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-6);
+}
+.order-your-products__count::before{
+    content: 'x';
+}
+.order-your-products__price{
+    margin-left: 16px;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-products__price::after{
+    content: 'Р';
+}
+.order-your__calculation{
+    margin-top: 48px;
+}
+.order-your__promo{
+    display: flex;
+}
+.order-your-promo__button{
+    margin-left: 8px;
+}
+.order-your-calculation__item{
+    margin-top: 24px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.order-your-calculation__title{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 120%;
+    color: var(--text-black);
+}
+.order-your-calculation__value{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 200%;
+    text-transform: uppercase;
+    text-align: right;
+    color: var(--text-black);
+}
+.order-your-calculation__value--price::after{
+    content: ' ₽';
+}
+.order-your-calculation__value--discount{
+    background: var(--gradient-red);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.order-your-calculation__value--discount::before{
+    content: '- ';
+}
+.order-your-calculation__description{
+    font-family: var(--font-family);
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+    text-align: right;
+    color: var(--text-9);
+}
+.order-your-calculation__line{
+    margin-top: 23px;
+    border: 1px solid var(--background-9);
+}
+.order-your-calculation__result{
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 117%;
+    text-transform: uppercase;
+    color: var(--text-black);
+}
+.order-your-calculation__submit{
+    margin-top: 48px;
+}
+
+@media only screen and (max-width: 1200px) {
+.order{
+    display: block;
+}
+.order__contacts, .order__your{
+    border: none;
+    width: 100%;
+}
+}
+
+@media only screen and (max-width: 720px) {
+.order__title{
+    max-width: 181px;
+
+    font-size: 20px;
+    line-height: 120%;
+}
+.order__your{
+    margin-top: 16px;
+}
+.order__contacts{
+    padding: 24px 16px;
+}
+.order__your{
+    padding: 40px 16px 9px 16px;
+}
+.order-your__promo{
+    display: block;
+}
+.order-your-promo__button{
+    margin-left: 0;
+    margin-top: 24px;
+
+    width: 100%;
+}
+.order-your-products__content{
+    max-width: 164px;
+}
+.order-your-products__count, .order-your-products__price{
+    flex-shrink: 0;
+}
+}

assets/css/gp-style-tablet.css

@@ -1,6 +1,9 @@
 /* Стили для планшетов  */
 @media only screen and (max-width: 1200px) {
 /* header */
+main{
+    padding-top: 64px;
+}
 .main-menu{
     display: none;
 }
@@ -12,7 +15,7 @@
 }
 .header__logo{
     width: 136px;
-    height: 24px;
+    height: 29px;
 }
 .header__content{
     height: auto;
@@ -36,21 +39,180 @@
 .header__menu-block{
     top: 56px;
 }
+.header__content::after{
+    left: 0;
+    right: 0;
+    width: 100%;
+}
 /* header */
 
 /* footer */
 .footer{
     margin-top: 0;
-}
+
-.footer__about{
+    padding: 24px 16px;
-    justify-content: center;
-}
-.footer-about__text{
-    display: none;
 }
 /* footer */
 
+/* breadcrumbs */
+.breadcrumbs{
+    display: none;
+}
+/* breadcrumbs */
 
+/* product */
+.product{
+    padding: 12px;
+    padding-top: 20px;
+}
+.product__title{
+    font-weight: 700;
+    font-size: 26px;
+    line-height: 123%;
+    text-transform: uppercase;
+}
+.to-know p {
+    font-size: 18px;
+}
+.toggle-table__title{
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+}
+.toggle-table__item p{
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+}
+.toggle-table-item__line{
+    margin-top: 12px;
+}
+.detail{
+    margin: 24px 16px;
+}
+.back-detail{
+    display: inline;
+}
+.detail-catalot__title{
+    font-size: 22px;
+}
+.product__footer--error{
+    margin: 48px 0px 24px;
+}
+/* product */
+
+/* modal */
+.modal{
+    padding: 0;
+}
+.modal__text{
+    padding-right: 0;
+}
+.form__button-pc{
+    display: none;
+}
+.form__button-mobile{
+    display: block;
+}
+.modal-form{
+    /* min-height: 100%;
+    width: 100%;
+
+    border-radius: 0;
+    border: none; */
+}
+.modal__notification{
+    margin: 24px;
+}
+.form-input-phone__list{
+    left: 0;
+}
+
+.modal-form-content__line--two{
+    flex-wrap: wrap;
+}
+.modal-form-content__line--two .modal-form-content-line__element{
+    margin-top: 24px;
+
+    width: 100%;
+}
+.modal-form-content__line--two .modal-form-content-line__element:first-child{
+    margin-top: 0;
+}
+.modal-map{
+    width: 100%;
+
+    flex-direction: column;
+
+    border-radius: 0;
+}
+.modal-map__left, .modal-map__right{
+    width: 100%;
+}
+.modal-map__map iframe {
+    width: 100%;
+    height: 528px;
+}
+.modal-map-form__button{
+    display: none;
+}
+.modal-map-form__sub-button{
+    margin-top: 64px;
+
+    padding: 0 24px;
+
+    display: flex;
+  }
+/* modal */
+
+/* cabinet */
+.cabinet{
+    flex-direction: column;
+
+    position: relative;
+}
+.cabinet__control{
+    display: flex;
+
+    position: relative;
+}
+.cabinet__orders, .cabinet__profile{
+    width: calc(100% - 48px);
+}
+.cabinet__orders, .cabinet__profile{
+    position: absolute;
+    opacity: 0;
+
+    transition: opacity .2s ease-out;
+}
+.cabinet-content{
+    pointer-events:none;
+}
+.cabinet__orders.active, .cabinet__profile.active{
+    opacity: 1;
+}
+.cabinet__orders.hide, .cabinet__profile.hide{
+    position: static;
+    display: block;
+    pointer-events:auto;
+
+    width: 100%;
+}
+.cabinet__subscription-pc{
+    display: none;
+}
+.cabinet__subscription-mobile{
+  display: block;
+
+  margin: 24px 24px 0 24px;
+}
+.cabinet__orders .cabinet-card:nth-child(2){
+    margin-top: 0;
+  }
+  .cabinet__orders--no-cab .cabinet-card:nth-child(2){
+    margin-top: 32px;
+  }
+/* cabinet */
 }
 
 @media only screen and (max-width: 980px) {
@@ -159,3 +321,28 @@
 }
 /* detail */
 }
+
+@media only screen and (max-width: 750px) {
+/* cabinet */
+.cabinet-card-order__open-detail{
+    margin-top: 144px;
+}
+.cabinet-card-order__detail-short{
+    right: auto;
+    left: 0;
+    bottom: 48px;
+}
+.cabinet-card-order-detail-short__item{
+    margin-left: -27px;
+}
+.cabinet-card-order-detail-short__item:first-child{
+    margin-left: 0;
+}
+.cabinet-card__order.active .cabinet-card-order__open-detail{
+    margin-top: 24px;
+}
+.cabinet-card-order__link{
+    margin-top: 144px;
+}
+/* cabinet */
+}

assets/img/svg/country/ar.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_230_9775)">
+<path d="M0 0H16V5.33437H0V0Z" fill="#D90012"/>
+<path d="M0 5.33447H16V10.6657H0V5.33447Z" fill="#0033A0"/>
+<path d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#F2A800"/>
+</g>
+<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
+<defs>
+<clipPath id="clip0_230_9775">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/img/svg/country/ru.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_230_9627)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H16V16H0V0Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 5.33447H16V16.0001H0V5.33447Z" fill="#0039A6"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 10.6655H16V15.9999H0V10.6655Z" fill="#D52B1E"/>
+</g>
+<rect x="0.1" y="0.1" width="15.8" height="15.8" stroke="#999999" stroke-width="0.2"/>
+<defs>
+<clipPath id="clip0_230_9627">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.5 12.3643H21" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 18.7282" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 12.3643L10.864 6.0003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/svg/main/arrow-breadcrumbs-black.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.94673 2.74797C9.26993 2.62677 9.63019 2.79052 9.75139 3.11373L12.2514 9.78039C12.3045 9.92188 12.3045 10.0778 12.2514 10.2193L9.75139 16.886C9.63019 17.2092 9.26993 17.3729 8.94673 17.2517C8.62353 17.1305 8.45978 16.7703 8.58098 16.4471L10.9987 9.99984L8.58098 3.55263C8.45978 3.22943 8.62353 2.86917 8.94673 2.74797Z" fill="#333333"/>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 8.24268H3" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 12.4853" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14 8.24268L9.75736 4.00003" stroke="#121212" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/svg/main/change-dot.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.2929 5.70711C11.1054 5.51957 11 5.26522 11 5C11 4.73478 11.1054 4.48043 11.2929 4.29289C11.4804 4.10536 11.7348 4 12 4C12.2652 4 12.5196 4.10536 12.7071 4.29289C12.8946 4.48043 13 4.73478 13 5C13 5.26522 12.8946 5.51957 12.7071 5.70711C12.5196 5.89464 12.2652 6 12 6C11.7348 6 11.4804 5.89464 11.2929 5.70711ZM11 12C11 12.2652 11.1054 12.5196 11.2929 12.7071C11.4804 12.8946 11.7348 13 12 13C12.2652 13 12.5196 12.8946 12.7071 12.7071C12.8946 12.5196 13 12.2652 13 12C13 11.7348 12.8946 11.4804 12.7071 11.2929C12.5196 11.1054 12.2652 11 12 11C11.7348 11 11.4804 11.1054 11.2929 11.2929C11.1054 11.4804 11 11.7348 11 12ZM11 19C11 19.2652 11.1054 19.5196 11.2929 19.7071C11.4804 19.8946 11.7348 20 12 20C12.2652 20 12.5196 19.8946 12.7071 19.7071C12.8946 19.5196 13 19.2652 13 19C13 18.7348 12.8946 18.4804 12.7071 18.2929C12.5196 18.1054 12.2652 18 12 18C11.7348 18 11.4804 18.1054 11.2929 18.2929C11.1054 18.4804 11 18.7348 11 19Z" fill="#121212"/>
+</svg>

assets/img/svg/main/google-white.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.7875 10.2271C19.7875 9.51801 19.7239 8.83619 19.6057 8.18164H10.1875V12.0498H15.5693C15.3375 13.2998 14.633 14.3589 13.5739 15.068V17.5771H16.8057C18.6966 15.8362 19.7875 13.2726 19.7875 10.2271Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1864 20.0004C12.8864 20.0004 15.15 19.105 16.8046 17.5777L13.5728 15.0686C12.6773 15.6686 11.5318 16.0231 10.1864 16.0231C7.58183 16.0231 5.37728 14.264 4.59092 11.9004H1.25V14.4913C2.89546 17.7595 6.27728 20.0004 10.1864 20.0004Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.59205 11.8997C4.39205 11.2997 4.27842 10.6588 4.27842 9.99971C4.27842 9.34062 4.39205 8.6997 4.59205 8.0997V5.50879H1.25114C0.573864 6.85879 0.1875 8.38607 0.1875 9.99971C0.1875 11.6133 0.573864 13.1406 1.25114 14.4906L4.59205 11.8997Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1864 3.97728C11.6546 3.97728 12.9728 4.48183 14.0091 5.47274L16.8773 2.60455C15.1455 0.990911 12.8818 0 10.1864 0C6.27728 0 2.89546 2.24091 1.25 5.5091L4.59092 8.10002C5.37728 5.73638 7.58183 3.97728 10.1864 3.97728Z" fill="white"/>
+</svg>

assets/img/svg/main/plus-grey.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_178_5112)">
+<path d="M12 5V19" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12H19" stroke="#666666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_178_5112">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/img/svg/main/question.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.00005 1.2498C4.27213 1.2498 1.25005 4.27188 1.25005 7.9998C1.25005 11.7277 4.27213 14.7498 8.00005 14.7498C11.728 14.7498 14.75 11.7277 14.75 7.9998C14.75 4.27188 11.728 1.2498 8.00005 1.2498ZM0.0500488 7.9998C0.0500488 3.60914 3.60939 0.0498047 8.00005 0.0498047C12.3907 0.0498047 15.9501 3.60914 15.9501 7.9998C15.9501 12.3905 12.3907 15.9498 8.00005 15.9498C3.60938 15.9498 0.0500488 12.3905 0.0500488 7.9998ZM8.75664 11.8914C8.75664 12.3056 8.42085 12.6414 8.00664 12.6414C7.59243 12.6414 7.25664 12.3056 7.25664 11.8914C7.25664 11.4772 7.59243 11.1414 8.00664 11.1414C8.42085 11.1414 8.75664 11.4772 8.75664 11.8914ZM6.35884 6.22749C6.35879 5.76088 6.51651 5.31995 6.80394 5.00253C7.08243 4.69497 7.51419 4.46749 8.14659 4.46748C9.28878 4.46747 10.0031 5.57665 9.44696 6.64451C9.21979 7.08066 8.93274 7.37811 8.60211 7.7207L8.60206 7.72075C8.49777 7.82881 8.38915 7.94137 8.27671 8.06418C7.82078 8.56216 7.37999 9.17405 7.37999 10.1425C7.37999 10.4738 7.64862 10.7425 7.97999 10.7425C8.31136 10.7425 8.57999 10.4738 8.57999 10.1425C8.57999 9.61088 8.79169 9.27875 9.16178 8.87452C9.23347 8.79622 9.31482 8.71242 9.40228 8.62233C9.75046 8.26368 10.1953 7.80545 10.5113 7.19883C11.4927 5.31454 10.1697 3.26746 8.14658 3.26748C7.19634 3.26749 6.43417 3.62308 5.91442 4.19707C5.4036 4.7612 5.15877 5.5003 5.15884 6.22761C5.15887 6.55898 5.42753 6.82758 5.7589 6.82755C6.09027 6.82752 6.35887 6.55886 6.35884 6.22749Z" fill="#121212"/>
+</svg>

assets/img/svg/main/status-cancelled.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C7.64641 1.5 6.80117 1.66813 6.01256 1.99478C5.22394 2.32144 4.50739 2.80023 3.90381 3.40381C3.30023 4.00739 2.82144 4.72394 2.49478 5.51256C2.16813 6.30117 2 7.14641 2 8C2 8.85359 2.16813 9.69883 2.49478 10.4874C2.82144 11.2761 3.30023 11.9926 3.90381 12.5962C4.50739 13.1998 5.22394 13.6786 6.01256 14.0052C6.80117 14.3319 7.64641 14.5 8.5 14.5C9.35359 14.5 10.1988 14.3319 10.9874 14.0052C11.7761 13.6786 12.4926 13.1998 13.0962 12.5962C13.6998 11.9926 14.1786 11.2761 14.5052 10.4874C14.8319 9.69883 15 8.85359 15 8C15 7.14641 14.8319 6.30117 14.5052 5.51256C14.1786 4.72394 13.6998 4.00739 13.0962 3.40381C12.4926 2.80023 11.7761 2.32144 10.9874 1.99478C10.1988 1.66813 9.35359 1.5 8.5 1.5ZM6.39524 2.91866C7.06253 2.64226 7.77773 2.5 8.5 2.5C9.22227 2.5 9.93747 2.64226 10.6048 2.91866C11.272 3.19506 11.8784 3.60019 12.3891 4.11091C12.8998 4.62164 13.3049 5.22795 13.5813 5.89524C13.8577 6.56253 14 7.27773 14 8C14 8.72227 13.8577 9.43747 13.5813 10.1048C13.3049 10.772 12.8998 11.3784 12.3891 11.8891C11.8784 12.3998 11.272 12.8049 10.6048 13.0813C9.93747 13.3577 9.22227 13.5 8.5 13.5C7.77773 13.5 7.06253 13.3577 6.39524 13.0813C5.72795 12.8049 5.12164 12.3998 4.61091 11.8891C4.10019 11.3784 3.69506 10.772 3.41866 10.1048C3.14226 9.43747 3 8.72227 3 8C3 7.27773 3.14226 6.56253 3.41866 5.89524C3.69506 5.22795 4.10019 4.62163 4.61091 4.11091C5.12163 3.60019 5.72795 3.19506 6.39524 2.91866ZM7.52022 6.31311C7.32496 6.11785 7.00838 6.11785 6.81311 6.31311C6.61785 6.50838 6.61785 6.82496 6.81311 7.02022L7.79289 8L6.81311 8.97978C6.61785 9.17504 6.61785 9.49162 6.81311 9.68689C7.00838 9.88215 7.32496 9.88215 7.52022 9.68689L8.5 8.70711L9.47978 9.68689C9.67504 9.88215 9.99162 9.88215 10.1869 9.68689C10.3821 9.49162 10.3821 9.17504 10.1869 8.97978L9.20711 8L10.1869 7.02022C10.3821 6.82496 10.3821 6.50838 10.1869 6.31311C9.99162 6.11785 9.67504 6.11785 9.47978 6.31311L8.5 7.29289L7.52022 6.31311Z" fill="#F60909"/>
+</svg>

assets/img/svg/main/status-chek.svg

@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 1.5C7.64641 1.5 6.80117 1.66813 6.01256 1.99478C5.22394 2.32144 4.50739 2.80023 3.90381 3.40381C3.30023 4.00739 2.82144 4.72394 2.49478 5.51256C2.16813 6.30117 2 7.14641 2 8C2 8.85359 2.16813 9.69883 2.49478 10.4874C2.82144 11.2761 3.30023 11.9926 3.90381 12.5962C4.50739 13.1998 5.22394 13.6786 6.01256 14.0052C6.80117 14.3319 7.64641 14.5 8.5 14.5C9.35359 14.5 10.1988 14.3319 10.9874 14.0052C11.7761 13.6786 12.4926 13.1998 13.0962 12.5962C13.6998 11.9926 14.1786 11.2761 14.5052 10.4874C14.8319 9.69883 15 8.85359 15 8C15 7.14641 14.8319 6.30117 14.5052 5.51256C14.1786 4.72394 13.6998 4.00739 13.0962 3.40381C12.4926 2.80023 11.7761 2.32144 10.9874 1.99478C10.1988 1.66813 9.35359 1.5 8.5 1.5ZM6.39524 2.91866C7.06253 2.64226 7.77773 2.5 8.5 2.5C9.22227 2.5 9.93747 2.64226 10.6048 2.91866C11.272 3.19506 11.8784 3.60019 12.3891 4.11091C12.8998 4.62164 13.3049 5.22795 13.5813 5.89524C13.8577 6.56253 14 7.27773 14 8C14 8.72227 13.8577 9.43747 13.5813 10.1048C13.3049 10.772 12.8998 11.3784 12.3891 11.8891C11.8784 12.3998 11.272 12.8049 10.6048 13.0813C9.93747 13.3577 9.22227 13.5 8.5 13.5C7.77773 13.5 7.06253 13.3577 6.39524 13.0813C5.72795 12.8049 5.12164 12.3998 4.61091 11.8891C4.10019 11.3784 3.69506 10.772 3.41866 10.1048C3.14226 9.43747 3 8.72227 3 8C3 7.27773 3.14226 6.56253 3.41866 5.89524C3.69506 5.22795 4.10019 4.62163 4.61091 4.11091C5.12163 3.60019 5.72795 3.19506 6.39524 2.91866ZM10.8536 7.02022C11.0488 6.82496 11.0488 6.50838 10.8536 6.31311C10.6583 6.11785 10.3417 6.11785 10.1464 6.31311L7.83333 8.62623L6.85355 7.64645C6.65829 7.45118 6.34171 7.45118 6.14645 7.64645C5.95118 7.84171 5.95118 8.15829 6.14645 8.35355L7.47978 9.68689C7.67504 9.88215 7.99162 9.88215 8.18689 9.68689L10.8536 7.02022Z" fill="#2ED15D"/>
+</svg>

assets/img/svg/main/triangle-grey.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.75 5.25L1.25 2.75L6.25 2.75L3.75 5.25Z" fill="#999999"/>
+</svg>

assets/img/svg/main/vk-white.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9825 14C4.46596 14 0.178638 8.74474 0 0H3.76515C3.88882 6.41842 6.66459 9.13714 8.86321 9.6977V0H12.4085V5.53553C14.5796 5.2973 16.8607 2.77477 17.6302 0H21.1755C20.8855 1.43908 20.3075 2.80165 19.4776 4.0025C18.6477 5.20335 17.5837 6.21663 16.3523 6.97898C17.7269 7.67555 18.941 8.6615 19.9145 9.87175C20.888 11.082 21.5988 12.489 22 14H18.0974C17.7373 12.6876 17.0054 11.5128 15.9934 10.6228C14.9814 9.73284 13.7343 9.16727 12.4085 8.997V14H11.9825Z" fill="white"/>
+</svg>

assets/img/svg/main/white-x.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.62404 2.77566C3.38807 2.54301 3.00683 2.54436 2.77252 2.77867C2.53821 3.01299 2.53954 3.39154 2.77551 3.62419L6.90259 7.6933L2.77551 11.7624C2.53954 11.9951 2.53821 12.3736 2.77252 12.6079C3.00684 12.8422 3.38807 12.8436 3.62404 12.6109L7.75716 8.53587L11.8903 12.6109C12.1262 12.8436 12.5075 12.8422 12.7418 12.6079C12.9761 12.3736 12.9748 11.995 12.7388 11.7624L8.61173 7.6933L12.7388 3.62421C12.9748 3.39156 12.9761 3.01301 12.7418 2.77869C12.5075 2.54438 12.1262 2.54303 11.8903 2.77568L7.75716 6.85073L3.62404 2.77566Z" fill="white"/>
+</svg>

assets/img/svg/main/ya-white.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.1991 2.77628H8.65909C5.83576 2.77628 4.35076 4.20628 4.35076 6.31461C4.35076 8.69794 5.37742 9.81461 7.48576 11.2463L9.22742 12.4196L4.22242 19.8979H0.482422L4.97409 13.2079C2.39076 11.3563 0.940755 9.55794 0.940755 6.51628C0.940755 2.70294 3.59909 0.0996094 8.64076 0.0996094H13.6458V19.8796H10.1991V2.77628Z" fill="white"/>
+</svg>

assets/js/gp-cabinet.js

@@ -0,0 +1,67 @@
+'use strict';
+
+import * as fun from './_gp-function.js';
+
+let widthPhoneCabinet = 1200;
+
+fun.toggleOpenX('.cabinet-card__order', '.cabinet-card-order__open-detail', '.cabinet-card-order__detail', '.cabinet-card-order__block-detail');
+fun.modalFormOpen('.form-open');
+
+fun.closeModalForm('.modal-form__close');
+fun.closeModalForm('.modal-form__button-close');
+
+controlCabinet('.cabinet-control__button', '.cabinet', widthPhoneCabinet);
+
+function controlCabinet(buttons, main, minWidth){
+    let thisWidth = window.innerWidth;
+    let thisMain = document.querySelector(main);
+
+    let thisButtons = document.querySelectorAll(buttons);
+
+    thisButtons.forEach(e => {
+        e.onclick = function (element){
+            let thisContent = document.querySelector(`.cabinet__${e.dataset.cabinet}`);
+            let newHeight = thisContent.clientHeight + 48;
+            let thisButton = element.target;
+
+            thisMain.style.height = `${newHeight}px`
+
+            if (!thisContent.classList.contains('active')) {
+                thisMain.querySelector('.active').classList.remove('active');
+                thisContent.classList.add('active');
+
+                setTimeout(() => {
+                    thisMain.style.height = 'auto';
+
+                    if (thisMain.querySelector('.hide')) {
+                        thisMain.querySelector('.hide').classList.remove('hide');
+                    }
+
+                    thisMain.querySelector('.active').classList.add('hide');
+                }, 200);
+            }
+
+            thisButtons.forEach(e => {
+                e.classList.remove('active');
+            })
+            thisButton.classList.add('active');
+        }
+    })
+
+}
+
+let modal = document.querySelector('.modal');
+modal.onclick = function (eventModal) {
+    let thisTarget = eventModal.target;
+
+    if (thisTarget.classList.contains('modal')) {
+        thisTarget.classList.remove('active');
+
+        if (!thisTarget.querySelector('.modal-map.active')) {
+            thisTarget.querySelector('.modal-form.active').classList.remove('active');
+        }else{
+            thisTarget.querySelector('.modal-map.active').classList.remove('active');
+        }
+    }
+}
+

assets/js/gp-form.js

@@ -0,0 +1,286 @@
+'use strict';
+
+
+inputPhone('.form-input__phone', '.form-input-phone__icon', '.form-input-phone__code', '.form-input-phone__input', '.form-input-phone__list', 'form-input-phone-list__item', '.form-input-phone-list-item__icon', '.form-input-phone-list-item__code', 'form-input-phone-list__search');
+
+function inputPhone(main, mainFlag, mainCode, input, list, selects, selectIcon, selectCode, searchInput) {
+    let inputs = document.querySelectorAll(main);
+
+    inputs.forEach(e => {
+        let thisMainFlag = e.querySelector(mainFlag), 
+            thisMainCode  = e.querySelector(mainCode),
+            thisInput  = e.querySelector(input),
+            thisList  = e.querySelector(list),
+            thisSelects  = e.querySelectorAll(`.${selects}`),
+            thisSearchInput = e.querySelector(`.${searchInput}`);
+
+        thisInput.onblur = function (input) {
+            if (!(input.relatedTarget != null && (input.relatedTarget.classList.contains(searchInput) || input.relatedTarget.classList.contains(selects)))) {
+                thisList.classList.remove('active');                 
+            }
+        }
+
+        e.onclick = function (event) {
+            if (!event.target.classList.contains(searchInput)) {
+                if (thisList.classList.contains('active')) {
+                    thisList.classList.remove('active');
+                }
+
+                thisInput.focus();
+                thisList.classList.add('active');
+            }
+        }
+
+        thisSelects.forEach(e => {
+            let newIcon = e.querySelector(selectIcon),
+                newCode = e.querySelector(selectCode);
+
+            e.onclick = function (event) {
+                event.preventDefault();
+                thisMainFlag.style.cssText = `background-image:url("${newIcon.src}");`;
+                thisMainCode.textContent = newCode.textContent;
+                
+
+                setTimeout(() => {
+                    thisList.classList.remove('active');
+                }, 0);
+            }
+            
+        })
+    })
+}
+
+if (document.querySelector('.form-input-phone__input')) {
+    checkPhone('.form-input-phone__input');
+}
+
+function checkPhone(input) {
+    document.querySelector(input).addEventListener('input', function(event) {
+        let text = event.target.value;
+        let length = text.length;
+        let newSymbol = event.data;
+
+        if (!(/^\d+$/.test(text.replaceAll(' ', '')))) {
+            event.target.value = text.slice(0, -1);
+            return;
+        }
+
+        if (length == 4 || length == 8) {
+            if (newSymbol != null) {
+                event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+            }
+        }
+    })
+}
+
+inputTabs('.form-input__tabs', '.form-input-tabs__button');
+inputTabs('.modal-map__control', '.modal-map-control__item');
+
+function inputTabs(main, button) {
+    let mains = document.querySelectorAll(main);
+
+    mains.forEach(main => {
+        let buttons = main.querySelectorAll(button);
+
+        buttons.forEach(button => {
+            button.onclick = function () {
+                if (button.classList.contains('active')) {
+                    return ;
+                }
+
+                main.querySelector('.active').classList.remove('active');
+
+                button.classList.add('active');
+
+                if (button.querySelector('input')){
+                    button.querySelector('input').click();
+                } 
+            }
+        })
+        
+    })
+}
+
+
+inputRadio('.form-input__radio', '.form-input-radio__item', '.form-input-radio__title', '.form-input-radio__input')
+
+function inputRadio(main ,item, textClass, input) {
+    let inputRadios = document.querySelectorAll(main);
+
+    inputRadios.forEach(inputRadio => {
+        let items = inputRadio.querySelectorAll(item),
+            thisInput = inputRadio.querySelector(input);
+
+        items.forEach(radio => {
+            let thisText = radio.querySelector(textClass).textContent;
+
+            radio.onclick = function (event) {
+                event.preventDefault();
+
+                if (inputRadio.querySelector(`${item}.active`)) {
+                    inputRadio.querySelector(`${item}.active`).classList.remove('active');
+                }
+                thisInput.value = thisText;
+                radio.classList.add('active');
+            }
+        })
+    })
+}
+
+listInputRadio('.form-input__list' ,'.form-input-list__item', '.form-input-list-item__text', '.form-input-list__input', '.form-input-list__content', '.form-input-list__block-content');
+
+function listInputRadio(main ,item, textClass, input, content, block) {
+    let listInputRadios = document.querySelectorAll(main);
+
+    listInputRadios.forEach(listInputRadio => {
+        let thisInput = listInputRadio.querySelector(input),
+            items = listInputRadio.querySelectorAll(item),
+            thisContent = listInputRadio.querySelector(content),
+            thisBlock = listInputRadio.querySelector(block);
+
+        thisInput.onclick = function () {
+            thisBlock.classList.add('active');
+            thisBlock.style.height = '192px';
+        }
+
+
+        thisInput.onblur = function(){
+            thisBlock.classList.remove('active');
+            thisBlock.style.height = '0px';
+        };
+
+        items.forEach(item => {
+            item.onclick = function (event) {
+                event.preventDefault();
+                let newText = item.querySelector(textClass).textContent;
+
+                thisInput.value = newText;
+                
+                if (thisContent.querySelector('.active')) {
+                    thisContent.querySelector('.active').classList.remove('active');
+                }
+
+                item.classList.add('active');
+            }
+        })
+    })
+}
+
+remoteControl('.form-input__remote-control', '.form-input-tabs__button');
+remoteControl('.modal-map__control', '.modal-map-control__item');
+
+function remoteControl(main, button) {
+    let mains = document.querySelectorAll(main);
+
+    mains.forEach(main => {
+        let subjectClass = main.dataset.content,
+            subject  = document.querySelector(`.${subjectClass}`),
+            buttons = Array.from(main.querySelectorAll(button));
+
+        main.addEventListener('click', function (eventMain) {
+            setTimeout(() => {
+                let indexActive = buttons.findIndex((button, index) => {
+                    if (button.classList.contains('active')) {
+                        return true;
+                    }
+                });
+                if(subject.children[indexActive].classList.contains('active')){
+                    return ;
+                }
+                
+                subject.querySelector('.remote-control__item.active').classList.remove('active');
+                subject.children[indexActive].classList.add('active');
+
+                let mandatorys = subject.querySelectorAll('.mandatory');
+
+                mandatorys.forEach(mandatory => {
+                    if (mandatory.required) {
+                        mandatory.required = false;
+                    }else{
+                        mandatory.required = true;
+                    }
+                })
+            }, 0);
+        })
+    })
+}
+
+formCheck('.modal-form__content', 'input[type=submit]');
+formCheck('.modal-map__form', 'input[type=submit]');
+
+function formCheck(form, submit) {
+    let forms = document.querySelectorAll(form);
+
+    forms.forEach(form => {
+        let thisSubmit = form.querySelector(submit);
+
+        thisSubmit.onclick = function () {
+            form.classList.add('check')
+        }
+        
+    })
+}
+
+inputPhoneNoFlag('.no-flag');
+
+function inputPhoneNoFlag(input){
+    let inputs = document.querySelectorAll(input);
+
+    inputs.forEach(input => {
+        let code = '+' + input.dataset.code;
+        
+        input.onfocus = function () {
+            if (input.value == '') {
+                input.value = code;
+            }
+        }
+
+        input.addEventListener('input', function(event) {
+            let text = event.target.value;
+            let length = text.length;
+            let newSymbol = event.data;
+
+            if (isNaN(event.data) || event.data == ' ') {
+                event.target.value = text.slice(0, -1);
+                return;
+            }
+
+            if (length == 3 || length == 7 || length == 11) {
+                if (newSymbol != null) {
+                    event.target.value = text.slice(0, -1) + ' ' + newSymbol;
+                }
+            }
+            
+        })
+    })
+}
+
+
+inputCheck('.form-agreement__check');
+
+function inputCheck(className) {
+    let checks = document.querySelectorAll(className);
+
+    checks.forEach(check => {
+        let square = check.querySelector('.form-agreement__square'),
+            input = check.querySelector('input');
+
+        square.onclick = function () {
+            input.click();   
+        }
+    })
+}
+
+
+inputRead('.input-read');
+function inputRead(className) {
+    let inputs = document.querySelectorAll(className);
+
+    inputs.forEach(input => {
+        input.addEventListener("input", function (event) {
+            let text = event.target.value;
+
+            event.target.value = text.slice(0, -1);            
+        })
+    })
+}

assets/js/gp-function.js

@@ -0,0 +1,156 @@
+'use strict';
+
+// function
+export 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);
+        }
+    })
+}
+
+export 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);
+        }
+    })
+}
+
+export function closeModalForm(close){
+    let buttons = document.querySelectorAll(close),
+        modal = document.querySelector('.modal');
+
+    buttons.forEach(button => {
+        button.onclick = function (buttonEvent) {
+            modal.classList.remove('active');
+            
+            if (!modal.querySelector('.modal-map.active')) {
+                modal.querySelector('.modal-form.active').classList.remove('active');
+            }else{
+                modal.querySelector('.modal-map.active').classList.remove('active');
+            }
+        }
+    })
+}
+
+export 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');
+            }
+        }
+        
+    });
+}
+
+export function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
+    let thisButton = document.querySelector(button), 
+        thisContent = document.querySelector(content),
+        thisRemoveBlock = document.querySelector(removeBlock) || '',
+        thisBlockheight = document.querySelector(blockheight);
+
+    thisButton.onclick = function () {
+        let height = thisBlockheight.clientHeight;
+
+        if (!thisContent.classList .contains('open')) {
+            thisContent.style.height = `${height}px`;
+            thisContent.classList .add('open');
+
+            if (removeBlock) {
+                thisRemoveBlock.classList.remove(removeClass);
+            }
+        }else{
+            thisContent.style.height = null;
+            thisContent.classList .remove('open');
+
+            if (removeBlock) {
+                if (window.scrollY <= 25) {
+                    thisRemoveBlock.classList.add(removeClass);
+                }
+            }
+        }
+    }
+}
+
+export function modalFormOpen(formOrNotification) {
+    let buttons = document.querySelectorAll(formOrNotification),
+        modal = document.querySelector('.modal');
+
+    buttons.forEach(button => {
+        button.onclick = function (eventButton) {
+            let classOpenForm = button.dataset.form,
+                form = modal.querySelector(`.${classOpenForm}`);                
+
+            form.classList.add('active');
+            modal.classList.add('active');
+        }
+    })
+}
+// function

assets/js/gp-main.js

@@ -2,15 +2,35 @@
 
 // header
 toggleOpenX('.lang', '.lang__open', '.lang__list', '.lang__content', false);
-singleToggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
+toggleHeader('#pc-menu','.header__menu-block','.header__pc-menu', '.white', 'white');
-singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
+toggleHeader('#phone-menu','.header__menu-block','.header__phone-menu', '.white', 'white');
 // header 
 
-// media
+// modal
 modalOpen('.button--filter', '.modal__filter');
 modalOpen('.basket-open', '.modal__basket');
+modalOpen('.open-to-know', '.modal__to-know');
 modalClose('.modal__close');
-// media
+
+let modal = document.querySelector('.modal');
+
+modal.onclick = function (event) {
+    let target = event.target;
+
+    if (target.classList.contains('modal')) {
+        let aside = target.querySelector('.modal__aside'),
+            modalItem = target.querySelector('.modal__item.active');
+
+            aside.style.width = '0px';
+            setTimeout(() => {
+                modalItem.style.cssText = '';
+                modalItem.classList.remove('active');
+                target.classList.remove('active');
+            }, 300);
+    }
+}
+
+// modal
 
 // toggle
 toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
@@ -79,9 +99,10 @@ toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', tr
 
 let selects = document.querySelectorAll('.select');
 
-selects.forEach(e => {
+selects.forEach(select => {
-    let state = e.querySelector('.select__state'),
+    let state = select.querySelector('.select__state'),
-        buttons = e.querySelectorAll('.state__button');
+        content = select.querySelector('.state__block'),
+        buttons = select.querySelectorAll('.state__button');
         
     buttons.forEach(e => {
         let button = e;
@@ -99,6 +120,8 @@ selects.forEach(e => {
             state.value = text;
 
             button.classList.add('active');
+            content.style.height = 0;
+            select.classList.remove('active');
         }        
     })
 })
@@ -245,9 +268,10 @@ function toggleOpenX(mainElement, buttonElement ,heightElement, contentElement,
     });
 }
 
-function singleToggleOpenX(button, content, blockheight) {
+function toggleHeader(button, content, blockheight, removeBlock, removeClass) {
     let thisButton = document.querySelector(button), 
         thisContent = document.querySelector(content),
+        thisRemoveBlock = document.querySelector(removeBlock) || '',
         thisBlockheight = document.querySelector(blockheight);
 
     thisButton.onclick = function () {
@@ -256,67 +280,69 @@ function singleToggleOpenX(button, content, blockheight) {
         if (!thisContent.classList .contains('open')) {
             thisContent.style.height = `${height}px`;
             thisContent.classList .add('open');
+
+            if (removeBlock) {
+                thisRemoveBlock.classList.remove(removeClass);
+            }
         }else{
             thisContent.style.height = null;
             thisContent.classList .remove('open');
+
+            if (removeBlock) {
+                if (window.scrollY <= 25) {
+                    thisRemoveBlock.classList.add(removeClass);
+                }
+            }
         }
     }
 }
-
+// function
-function createGalleryPhone(swiper, wrapper, slide, width) {
-    if (window.screen.width <= width) {
-        let thisSwiper = document.querySelector(swiper),
-            thisWrapper = document.querySelector(wrapper),
-            thisSlides = document.querySelectorAll(slide);
-
-        
-        
-        thisSwiper.classList.add('swiper');
-        thisWrapper.classList.add('swiper-wrapper'); 
-        thisSlides.forEach(e => {
-            e.classList.add('swiper-slide'); 
-        })
-
-        const t = new Swiper('.detail__images', {
-            spaceBetween: 100,
-          
-            pagination: {
-              el: '.swiper-pagination',
-            },
-          
-            navigation: {
-              nextEl: '.swiper-button-next',
-              prevEl: '.swiper-button-prev',
-            },
-          
-            scrollbar: {
-              el: '.swiper-scrollbar',
-            },
-        });
-         
-    }
-}
-
 
 // resize
 window.addEventListener('resize', (e) => {
+    let width = window.screen.width;
+
     // media
     modalOpen('.button--filter', '.modal__filter');
     modalOpen('.basket-open', '.modal__basket');
+    modalOpen('.open-to-know', '.modal__to-know');
     modalClose('.modal__close');
+    
+    let modalItem = document.querySelectorAll('.modal__item');
+
+    // if (width <= 720) {
+        modalItem.forEach(modal => {
+            if (modal.classList.contains('active')) {
+                let aside = document.querySelector('.modal__aside');
+
+                if (width <= 720) {
+                    aside.style.width = `${width}px`
+                }else{
+                    let openAside = document.querySelector('.modal__item.active'),
+                        newWidth = openAside.clientWidth;
+
+                    aside.style.width = `${newWidth}px`
+                }
+            }
+        })
+    // }
 });
 // resize
 
 // scroll
-window.addEventListener("scroll", function (e) {
+
+
+if (document.querySelector('.header').classList.contains('white')) {
+    window.addEventListener("scroll", function (e) {
         let header = document.querySelector('.header');
         let scroll = window.scrollY;
         
-    if (scroll >= 75) {
+        if (scroll >= 25) {
             header.classList.remove('white')
         }else{
             header.classList.add('white')
         }
         
-});
+    });
+}
 // scroll

assets/js/gp-product.js

@@ -97,10 +97,10 @@ const detailCatalot = new Swiper('.detail__catalot', {
             slidesPerView: 3,
         },
         780: {
-            slidesPerView: 2.2,
+            slidesPerView: 2,
         },
         100: {
-            slidesPerView: 1.3,
+            slidesPerView: 1.1,
             spaceBetween: 20
         },
     }

assets/js/tabs.js

@@ -0,0 +1,67 @@
+const rootSelectorTabs = '[data-js-tabs]';
+
+class Tabs{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorTabs,
+        button: '[data-js-tabs-button]',
+        content: '[data-js-tabs-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeMenuIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.limitTabsIndex = this.buttonElements.length - 1;
+        this.bindEvents();
+    }
+
+    updateUI(){
+        const { activeMenuIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.contentElements.forEach((contentElement, index) => {
+            const isActive = index === activeMenuIndex;
+
+            contentElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeMenuIndex = buttonIndex;
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TabsCollection {
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorTabs).forEach((element) => {
+            new Tabs(element);
+        });
+    }
+}
+
+export default TabsCollection;

assets/js/toggle.js

@@ -0,0 +1,89 @@
+const rootSelectorToggles = '[data-js-toggle]';
+
+class Toggle{
+    // элементы для поиска
+    selectors = {
+        root: rootSelectorToggles,
+        button: '[data-js-toggle-button]',
+        wrapper: '[data-js-toggle-wrapper]',
+        content: '[data-js-toggle-content]',
+    }
+    // класс отображения состояния
+    stateClasses = {
+        isActive: 'active',
+    }
+
+    constructor(rootElement){
+        this.rootElement = rootElement;
+        this.buttonElements = this.rootElement.querySelectorAll(this.selectors.button);
+        this.wrapperElements = this.rootElement.querySelectorAll(this.selectors.wrapper);
+        this.contentElements = this.rootElement.querySelectorAll(this.selectors.content);
+        this.state = {
+            activeToggleIndex: [...this.buttonElements]
+                .findIndex((buttonElement) => buttonElement.classList.contains(this.stateClasses.isActive)),
+        };
+        this.bindEvents();
+    }
+
+    updateUI(newHeight){
+        const { activeToggleIndex } = this.state;
+
+        this.buttonElements.forEach((buttonElement, index) => {
+            const isActive = index === activeToggleIndex;
+
+            buttonElement.classList.toggle(this.stateClasses.isActive, isActive);
+        })
+
+        this.wrapperElements.forEach((wrapperElement, index) => {
+            const isActive = index === activeToggleIndex,
+                  newHeight = this.contentElements[index].offsetHeight;
+
+            wrapperElement.classList.toggle(this.stateClasses.isActive, isActive);
+
+            if (isActive) {
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `auto`;
+                    }
+                }, 300);
+            }else{
+                wrapperElement.style.height = `${newHeight}px`;
+
+                setTimeout(() => {
+                    if (!wrapperElement.classList.contains('active')) {
+                        wrapperElement.style.height = `${0}px`;
+                    }
+                }, 10);
+            }
+        })
+
+    }
+
+    onButtonClick(buttonIndex){
+        this.state.activeToggleIndex = (buttonIndex === this.state.activeToggleIndex) ? -1 : buttonIndex;
+
+        this.updateUI();
+    }
+
+    bindEvents(){
+        this.buttonElements.forEach((buttonElement, index) => {
+            buttonElement.addEventListener('click', () => this.onButtonClick(index))
+        })
+    }
+}
+
+class TogglesCollection{    
+    constructor(){
+        this.init();
+    }
+
+    init(){
+        document.querySelectorAll(rootSelectorToggles).forEach((element) => {
+            new Toggle(element);
+        });
+    }
+}
+
+export default TogglesCollection;

del.html

@@ -1,12 +0,0 @@
-<!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
-<form class="form" method="post" action="/send-telegram.php">
-    <div class="form__item">
-        <input class="form__input" type="text" name="name" required>
-        <label class="form__label">Ваше имя</label>
-    </div>
-    <div class="form__item">
-        <input class="form__input" type="text" name="phone" required>
-        <label class="form__label">Номер телефона</label>
-    </div>
-    <input class="form__input btn" type="submit" value="Отправить">
-</form>

ui_kit.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>UI kit</title>
-    <link rel="stylesheet" type="text/css" href="/assets/css/gp-style-core.css">
+    <link rel="stylesheet" type="text/css" href="assets/css/gp-style-core.css">
 </head>
 <style>
     /* Стили для выравнивания UI-элеметнов для данной страницы */
@@ -172,6 +172,6 @@
         </div>
     </div> -->
 
-    <script src="/assets/js/gp-main.js"></script>
+    <script src="assets/js/gp-main.js"></script>
 </body>
 </html>