доделал

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{
-  content: '';
+.lang-open__arrow{
+  margin-left: 7.25px;
 
-  position: absolute;
-  top: 19.25px;
-  right: 18.25px;
-
-  width: 10px;
-  height: 6px;
-
-  background-image: url(../img/svg/main/arrow-black.svg);
-  background-repeat: no-repeat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.lang__open:hover{
-  opacity: .8;
+.lang-open__black{
+
+}
+.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{
-    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{
+  .product-item-overlay__tags li:nth-child(n+1)::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
-toggleOpenX('#pc-menu','.header__menu-block','.header__pc-menu');
-toggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
+function createGalleryPhone(swiper, wrapper, slide, width) {
+    if (window.screen.width <= width) {
+        let thisSwiper = document.querySelector(swiper),
+            thisWrapper = document.querySelector(wrapper),
+            thisSlides = document.querySelectorAll(slide);
 
-// header end
         
-// lang start
-toggleOpenX('.lang__open','.lang__content','.lang__list');
-// lang end
+        
+        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) => {
+    // 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

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>

product.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="ru">
-    <head>
+
+<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,6 +9,9 @@
     <meta name="description" content="SEO Description">
     <link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
 
+    <!-- swiperjs -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
+
     <!-- Базовые стили -->
     <link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
     <link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
@@ -17,6 +21,7 @@
     <link rel="stylesheet" media="screen and (max-width: 720px)" href="/assets/css/gp-style-mobile.css?v=1.0">
 
 
+
     <!-- Яндекс.Вебмастер + Google Search Console -->
     <meta name="yandex-verification" content="XXXXXXXXXXXXXXXXX" />
     <meta name="google-site-verification" content="XXXXXXXXXXXXXXXXX" />
@@ -46,8 +51,9 @@
     <!-- /Yandex.Metrika counter -->
 
 
-    </head>
-    <body>
+</head>
+
+<body>
 
     <header class="header">
         <div class="header__content">
@@ -115,7 +121,7 @@
                     </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">
                     </button>
                 </div>
@@ -224,18 +230,21 @@
 
         <div class="detail">
             <div class="detail__images">
-                    <div class="detail__image detail__image--width-perc-100">
+                <div class="detail__image detail__image--width-perc-100" data-count-img="0">
                     <img src="assets/img/product/image.png" alt="" class="">
                 </div>
-                    <div class="detail__image detail__image--width-perc-50">
+                <div class="detail__image detail__image--width-perc-50" data-count-img="1">
                     <img src="assets/img/product/image.png" alt="" class="">
                 </div>
-                    <div class="detail__image detail__image--width-perc-50">
+                <div class="detail__image detail__image--width-perc-50" data-count-img="2">
                     <img src="assets/img/product/image.png" alt="" class="">
                 </div>
-                    <div class="detail__image detail__image--width-perc-100">
+                <div class="detail__image detail__image--width-perc-100" data-count-img="3">
                     <img src="assets/img/product/image.png" alt="" class="">
                 </div>
+
+                <div class="swiper-pagination"></div>
+                
             </div>
 
             <div class="detail__content">
@@ -253,6 +262,35 @@
                 <p class="detail__title">
                     Сухой корм, для средних и крупных пород
                 </p>
+
+                <div class="detail__images-phone">
+
+                    <div class="swiper-wrapper">
+                        <div class="swiper-slide">
+                            <div class="detail-images-phone__image-block" data-count-img="0">
+                                <img src="assets/img/product/image.png" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="detail-images-phone__image-block" data-count-img="1">
+                                <img src="assets/img/product/image.png" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="detail-images-phone__image-block" data-count-img="2">
+                                <img src="assets/img/product/image.png" alt="">
+                            </div>
+                        </div>
+                        <div class="swiper-slide">
+                            <div class="detail-images-phone__image-block" data-count-img="3">
+                                <img src="assets/img/product/image.png" alt="">
+                            </div>
+                        </div>
+                      </div>
+
+                      <div class="swiper-pagination"></div>
+                </div>
+
                 <div class="detail__block-price">
                     <p class="detail-block-price__price">
                         4304
@@ -268,7 +306,7 @@
                     </div>
                 </div>
                 <form action="" class="detail-block__form">
-                        <div class="detail-block-form__item detail-block-form__item--radio">
+                    <div class="detail-block-form__item detail-block-form__item--radio radio-button">
                         <button class="button button--white button--red-48-px">
                             2 КГ
                         </button>
@@ -280,38 +318,52 @@
                         <button class="button button--white button--red-48-px">
                             10 КГ
                         </button>
+                        <input type="text" class="radio-button__input" value="5 КГ" readonly>
                     </div>
                     <div class="detail-block-form__item">
-                            <input type="submit" value="Добавить в корзину" class="button button--gradient button--high detail-block-form__submit">
+                        <input type="submit" value="Добавить в корзину"
+                            class="button button--gradient button--high detail-block-form__submit">
                     </div>
                 </form>
 
                 <div class="detail__toggle">
-                        <div class="toggle active">
+                    <div class="toggle">
                         <p class="toggle__title">
                             ОПИСАНИЕ
                         </p>
                         <div class="toggle__block-content">
                             <div class="toggle__content">
                                 <p class="toggle__text">
-                                        Утончённое гурманское меню: полнорационный корм для собак 
со вкусом рыбы, на основе индейки и энтопротеина. Все источники протеина легко усваиваются и является гипоаллергенными. 
А высокое содержание в корме Омега-3 способствует здоровью шерсти и кожи, улучшает подвижность суставов, повышает интеллект и укрепляет сердце. Бонусы, с которыми знакомы все заядлые рыбаки!
+                                    Утончённое гурманское меню: полнорационный корм для собак 
со вкусом рыбы, на основе
+                                    индейки и энтопротеина. Все источники протеина легко усваиваются и является
+                                    гипоаллергенными. 
А высокое содержание в корме Омега-3 способствует здоровью шерсти
+                                    и кожи, улучшает подвижность суставов, повышает интеллект и укрепляет сердце.
+                                    Бонусы, с которыми знакомы все заядлые рыбаки!
                                 </p>
                             </div>
                         </div>
                     </div>
-                        <div class="toggle active">
+                    <div class="toggle">
                         <p class="toggle__title">
                             СОСТАВ
                         </p>
                         <div class="toggle__block-content">
                             <div class="toggle__content">
                                 <p class="toggle__text">
-                                        Дегидрированное мясо индейки и белок насекомых 36% (дегидрированное мясо индейки 21%; белковый концентрат
из Черной львинки (Hermetia illucens) 15%), цельный рис, картофель, жир индейки, печеночный гидролизат, высушенная мякоть сахарной свеклы, автолизат пивных дрожжей (источник натуральных пребиотиков MOS и бета-глюканов), льняное семя, сушеное яблоко, лососевое масло (источник незаменимых Омега-3 жирных кислот), оливковое масло (источник витаминов Е и К), DL-метионин, витаминно-минеральный комплекс, инулин (натуральный пребиотик FOS), экстракт розмарина (натуральный антиоксидант), юкка Шидигера, экстракт женьшеня, глюкозамин, хондроитин.
+                                    Дегидрированное мясо индейки и белок насекомых 36% (дегидрированное мясо индейки
+                                    21%; белковый концентрат
из Черной львинки (Hermetia illucens) 15%), цельный рис,
+                                    картофель, жир индейки, печеночный гидролизат, высушенная мякоть сахарной свеклы,
+                                    автолизат пивных дрожжей (источник натуральных пребиотиков MOS и бета-глюканов),
+                                    льняное семя, сушеное яблоко, лососевое масло (источник незаменимых Омега-3 жирных
+                                    кислот), оливковое масло (источник витаминов Е и К), DL-метионин,
+                                    витаминно-минеральный комплекс, инулин (натуральный пребиотик FOS), экстракт
+                                    розмарина (натуральный антиоксидант), юкка Шидигера, экстракт женьшеня, глюкозамин,
+                                    хондроитин.
                                 </p>
                             </div>
                         </div>
                     </div>
-                        <div class="toggle active">
+                    <div class="toggle">
                         <p class="toggle__title">
                             РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ
                         </p>
@@ -362,7 +414,7 @@
                             </div>
                         </div>
                     </div>
-                        <div class="toggle active">
+                    <div class="toggle">
                         <p class="toggle__title">
                             РЕКОМЕНДАЦИИ ПО КОРМЛЕНИЮ
                         </p>
@@ -389,7 +441,8 @@
 
                                 <div class="toggle__table toggle__table--two">
                                     <div class="toggle-table__block ">
-                                            <p class="toggle-table__title toggle-table__title--center">ПИТАТЕЛЬНЫЕ ДОБАВКИ <br> НА КГ</p>
+                                        <p class="toggle-table__title toggle-table__title--center">ПИТАТЕЛЬНЫЕ ДОБАВКИ
+                                            <br> НА КГ</p>
                                         <div class="toggle-table__item">
                                             <p>Сырой белок</p>
                                             <div class="toggle-table-item__line"></div>
@@ -397,7 +450,8 @@
                                         </div>
                                     </div>
                                     <div class="toggle-table__block ">
-                                            <p class="toggle-table__title toggle-table__title--center">ЭНЕРГЕТИЧЕСКАЯ ЦЕННОСТЬ <br> НА 100 ГРАММ</p>
+                                        <p class="toggle-table__title toggle-table__title--center">ЭНЕРГЕТИЧЕСКАЯ
+                                            ЦЕННОСТЬ <br> НА 100 ГРАММ</p>
                                         <div class="toggle-table__item">
                                             <div class="detail__warning warning">
                                                 <div class="detail-warning__content">
@@ -424,6 +478,23 @@
             </div>
 
             <div class="detail__catalot">
+                    <div class="detail-catalot__header">
+                        <p class="detail-catalot__title">
+                            вашему питомцу может понравиться
+                        </p>
+
+                        <div class="detail-catalot__control">
+                            <button class="detail-catalot-control__button prev">
+                                <img src="assets/img/svg/main/arrow-left.svg" alt="">
+                            </button>
+
+                            <button class="detail-catalot-control__button next">
+                                <img src="assets/img/svg/main/arrow-right.svg" alt="">
+                            </button>
+                        </div>
+                    </div>
+                    <div class="detail-catalot__content swiper-wrapper">
+                        <div class="swiper-slide">
                             <div class="product__item">
                                 <div class="product-item__label">
                                     <div class="product-item-label__tag product-item-label__tag--sale">
@@ -439,9 +510,9 @@
                                         <div class="compound__item">Индейка </div>  
                                     </div>
                                     <p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
-                            <p class="product-item__price">
-                                1 304
-                            </p>
+                                    <div class="product-item__price">
+                                        <p>1 304</p>
+                                    </div>
                                     <div class="product-item__bye">
                                         <button class="button button--white button--100-perc">
                                             Купить
@@ -449,6 +520,65 @@
                                     </div>
                                 </div>
                             </div>
+                        </div>
+
+                        <div class="swiper-slide">
+                            <div class="product__item">
+                                <div class="product-item__label">
+                                    <div class="product-item-label__tag product-item-label__tag--new-green">
+                                        Распродажа %
+                                    </div>
+                                </div>
+                                <div class="product-item__product-card">
+                                    <img src="assets/img/product/image.png" alt="" class="product-item__images">
+                                </div>
+                                <div class="product-item__content-card">
+                                    <div class="compound">
+                                        <div class="compound__item">Индейка </div>
+                                        <div class="compound__item">Индейка </div>  
+                                    </div>
+                                    <p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
+                                    <div class="product-item__price">
+                                        <p>1 304</p> <del>1 449</del> <span>10</span> 
+                                    </div>
+                                    <div class="product-item__bye">
+                                        <button class="button button--white button--100-perc">
+                                            Купить
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <div class="swiper-slide">
+                            <div class="product__item">
+                                <div class="product-item__label">
+                                    <div class="product-item-label__tag product-item-label__tag--sale-red">
+                                        Распродажа %
+                                    </div>
+                                </div>
+                                <div class="product-item__product-card">
+                                    <img src="assets/img/product/image.png" alt="" class="product-item__images">
+                                </div>
+                                <div class="product-item__content-card">
+                                    <div class="compound">
+                                        <div class="compound__item">Индейка </div>
+                                        <div class="compound__item">Индейка </div>  
+                                    </div>
+                                    <p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
+                                    <div class="product-item__price">
+                                        <p>1 304</p>
+                                    </div>
+                                    <div class="product-item__bye">
+                                        <button class="button button--white button--100-perc active">
+                                            Узнать о поступлении
+                                        </button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="swiper-slide">
                             <div class="product__item">
                                 <div class="product-item__label">
                                     <div class="product-item-label__tag product-item-label__tag--sale">
@@ -464,9 +594,9 @@
                                         <div class="compound__item">Индейка </div>  
                                     </div>
                                     <p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
-                            <p class="product-item__price">
-                                1 304
-                            </p>
+                                    <div class="product-item__price">
+                                        <p>1 304</p>
+                                    </div>
                                     <div class="product-item__bye">
                                         <button class="button button--white button--100-perc">
                                             Купить
@@ -474,6 +604,9 @@
                                     </div>
                                 </div>
                             </div>
+                        </div>
+
+                        <div class="swiper-slide">
                             <div class="product__item">
                                 <div class="product-item__label">
                                     <div class="product-item-label__tag product-item-label__tag--sale">
@@ -489,9 +622,9 @@
                                         <div class="compound__item">Индейка </div>  
                                     </div>
                                     <p class="product-item__title">Сухой корм, для средних и крупных пород, 2 кг.</p>
-                            <p class="product-item__price">
-                                1 304
-                            </p>
+                                    <div class="product-item__price">
+                                        <p>1 304</p>
+                                    </div>
                                     <div class="product-item__bye">
                                         <button class="button button--white button--100-perc">
                                             Купить
@@ -501,8 +634,335 @@
                             </div>
                         </div>
                     </div>
+                </div>
+        </div>
     </main>
 
+    <div class="gallery">
+        <button class="gallery__close gallery-button">
+            <img src="assets/img/svg/main/black-x.svg" alt="">
+         </button>
+
+         <div class="gallery__wrapper">
+             <div class="gallery__pagination">
+                <button class="gallery-pagination__item" data-count-img="0">
+                    <img src="assets/img/product/image.png" alt="">
+                </button>
+                <button class="gallery-pagination__item" data-count-img="1">
+                    <img src="assets/img/product/image.png" alt="">
+                </button>
+                <button class="gallery-pagination__item" data-count-img="2">
+                    <img src="assets/img/product/image.png" alt="">
+                </button>
+                <button class="gallery-pagination__item" data-count-img="3">
+                    <img src="assets/img/product/image.png" alt="">
+                </button>
+             </div>
+             
+    
+             <div class="gallery__slider swiper">
+                <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                        <div class="gallery__block">
+                            <img src="assets/img/product/image.png" alt="">
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="gallery__block">
+                            <img src="assets/img/product/image.png" alt="">
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="gallery__block">
+                            <img src="assets/img/product/image.png" alt="">
+                        </div>
+                    </div>
+                    <div class="swiper-slide">
+                        <div class="gallery__block">
+                            <img src="assets/img/product/image.png" alt="">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="swiper-pagination"></div>
+
+                <div class="swiper-button-prev gallery-button">
+                    <img src="assets/img/svg/main/arrow-left.svg" alt="">
+                </div>
+                <div class="swiper-button-next gallery-button">
+                    <img src="assets/img/svg/main/arrow-right.svg" alt="">
+                </div>
+             </div>
+         </div>
+    </div>
+
+    <div class="modal">
+        <aside class="modal__aside">
+            <div class="modal__item modal__filter">
+                <button class="modal__close">
+                    <img src="assets/img/svg/main/black-x.svg" alt="">
+                </button>
+
+                <div class="modal__header">
+                    <p class="modal__title">Фильтры</p>
+                    <div class="modal__content">
+                        <div class="toggle">
+                            <p class="toggle__title">
+                                ДЛЯ КОГО
+                            </p>
+                            <div class="toggle__block-content">
+                                <div class="toggle__content">
+                                    <div class="toggle-content__item">
+                                        <div class="toggle-content__element toggle-content__element--width-perc-50">
+                                            <div class="radio">
+                                                <input type="radio" name="animal" id="" class="radio__input">
+
+                                                <label for="" class="radio__label">Для кошек</label>
+                                            </div>
+                                        </div>
+                                        <div class="toggle-content__element toggle-content__element--width-perc-50">
+                                            <div class="radio">
+                                                <input type="radio" name="animal" id="" class="radio__input">
+
+                                                <label for="" class="radio__label">Для собак</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="toggle">
+                            <p class="toggle__title">
+                                ТИП ПРОДУКЦИИ
+                            </p>
+                            <div class="toggle__block-content">
+                                <div class="toggle__content">
+                                    <div class="toggle-content__item">
+                                        <div class="toggle-content__element toggle-content__element--width-perc-100">
+                                            <div class="checkbox active">
+                                                <div class="checkbox__state"></div>
+                                                <input type="checkbox" name="" id="" class="checkbox__input">
+                                                <label for="" class="checkbox__label">Корм</label>
+                                            </div>
+                                        </div>
+                                        <div class="toggle-content__element toggle-content__element--width-perc-100">
+                                            <div class="checkbox">
+                                                <div class="checkbox__state"></div>
+                                                <input type="checkbox" name="" id="" class="checkbox__input">
+                                                <label for="" class="checkbox__label">Лакомстава</label>
+                                            </div>
+                                        </div>
+                                        <div class="toggle-content__element toggle-content__element--width-perc-100">
+                                            <div class="checkbox">
+                                                <div class="checkbox__state"></div>
+                                                <input type="checkbox" name="" id="" class="checkbox__input">
+                                                <label for="" class="checkbox__label">Аксессуары</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="toggle">
+                            <p class="toggle__title">
+                                ВКУС
+                            </p>
+                            <div class="toggle__block-content">
+                                <div class="toggle__content">
+                                    <div class="toggle-content__item">
+                                        <div class="toggle-content__element toggle-content__element--width-perc-50">
+                                            <div class="checkbox active">
+                                                <div class="checkbox__state"></div>
+                                                <input type="checkbox" name="" id="" class="checkbox__input">
+                                                <label for="" class="checkbox__label">Индейка</label>
+                                            </div>
+                                        </div>
+                                        <div class="toggle-content__element toggle-content__element--width-perc-50">
+                                            <div class="checkbox">
+                                                <div class="checkbox__state"></div>
+                                                <input type="checkbox" name="" id="" class="checkbox__input">
+                                                <label for="" class="checkbox__label">Говядина</label>
+                                            </div>
+                                        </div>
+                                        <div class="toggle-content__element toggle-content__element--width-perc-50">
+                                            <div class="checkbox">
+                                                <div class="checkbox__state"></div>
+                                                <input type="checkbox" name="" id="" class="checkbox__input">
+                                                <label for="" class="checkbox__label">Рыба</label>
+                                            </div>
+                                        </div>
+                                        <div class="toggle-content__element toggle-content__element--width-perc-50">
+                                            <div class="checkbox">
+                                                <div class="checkbox__state"></div>
+                                                <input type="checkbox" name="" id="" class="checkbox__input">
+                                                <label for="" class="checkbox__label">Бараника</label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="modal__block-button">
+                    <div class="modal__button">
+                        <button class="button button--gradient button--high button--100-perc">
+                            Применить
+                        </button>
+                    </div>
+                    <div class="modal__button">
+                        <button class="to-know button--100-perc to-know--background-none">
+                            <p>Сбросить фильтры</p>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal__item modal__basket">
+                <button class="modal__close">
+                    <img src="assets/img/svg/main/black-x.svg" alt="">
+                </button>
+                <div class="modal__header">
+                    <p class="modal__title">Корзина</p>
+                    <div class="modal__content">
+                        <div class="modal-basket__item">
+                            <div class="modal-basket-item__block-image">
+                                <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
+                            </div>
+                            
+                            <div class="modal-basket-item__content">
+                                <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
+                                <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
+                                <div class="modal-basket-item__control">
+                                    <div class="counter counter--small">
+                                        <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>
+
+                                    <p class="modal-basket-item__price">1280</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal-basket__item">
+                            <div class="modal-basket-item__block-image">
+                                <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
+                            </div>
+                            
+                            <div class="modal-basket-item__content">
+                                <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
+                                <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
+                                <div class="modal-basket-item__control">
+                                    <div class="counter counter--small">
+                                        <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>
+
+                                    <p class="modal-basket-item__price">1280</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal-basket__item">
+                            <div class="modal-basket-item__block-image">
+                                <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
+                            </div>
+                            
+                            <div class="modal-basket-item__content">
+                                <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
+                                <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
+                                <div class="modal-basket-item__control">
+                                    <div class="counter counter--small">
+                                        <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>
+
+                                    <p class="modal-basket-item__price">1280</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal-basket__item">
+                            <div class="modal-basket-item__block-image">
+                                <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
+                            </div>
+                            
+                            <div class="modal-basket-item__content">
+                                <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
+                                <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
+                                <div class="modal-basket-item__control">
+                                    <div class="counter counter--small">
+                                        <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>
+
+                                    <p class="modal-basket-item__price">1280</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="modal-basket__item">
+                            <div class="modal-basket-item__block-image">
+                                <img src="assets/img/product/image.png" alt="" class="modal-basket-item__image">
+                            </div>
+                            
+                            <div class="modal-basket-item__content">
+                                <p class="modal-basket-item__title">Сухой корм, для крупны и средних пород</p>
+                                <p class="modal-basket-item__sub-title">Индейка, 2 кг</p>
+                                <div class="modal-basket-item__control">
+                                    <div class="counter counter--small">
+                                        <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>
+
+                                    <p class="modal-basket-item__price">1280</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal__footer">
+                    <div class="modal__block-price">
+                        <p class="modal-block-price__title">Общая стоимость</p>
+                        <p class="modal-block-price__price">
+                            8960
+                        </p>
+                    </div>
+                    <div class="modal__block-button">
+                        <div class="modal__button">
+                            <button class="button button--gradient button--high button--100-perc">
+                                Перейти к оформлению
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </aside>
+    </div>
+
+
     <footer class="footer">
         <div class="footer__wrapper wrapper">
             <div class="footer__content">
@@ -569,7 +1029,8 @@
                         <input class="form__input" type="text" name="name" placeholder="Эл.почта" required>
                     </div>
                     <div class="form__item">
-                            <textarea class="form__input form__input--textarea" name="" id="" placeholder="Текст обращения"></textarea>
+                        <textarea class="form__input form__input--textarea" name="" id=""
+                            placeholder="Текст обращения"></textarea>
                     </div>
                     <div class="form__item">
                         <input class="form__button" type="submit" value="Отправить">
@@ -591,7 +1052,11 @@
         </div>
     </footer>
 
+    <!-- swiperjs -->
+    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
     <script src="assets/js/gp-main.js"></script>
-    </body>
+    <script src="assets/js/gp-product.js"></script>
+</body>
+
 </html>