доделал product

assets/css/gp-style-core.css

@@ -293,6 +293,12 @@ button{
 }
 .main-menu__item:hover{
   opacity: .8;
+
+  background: #f2f2f2;
+  border-radius: 24px;
+}
+.main-menu__item:active{
+  opacity: 1;
 }
 .main-menu__link{
   display: block;

assets/css/gp-style-desktop.css

@@ -387,9 +387,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);
@@ -433,6 +441,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;
@@ -440,9 +452,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;
   }
@@ -804,6 +844,7 @@
 
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
 .detail-block-form__item--radio{
   margin: 16px -8px -8px -8px;
@@ -854,6 +895,10 @@
 }
 .detail__catalot{
   margin-top: 64px;
+
+  width: 100%;
+
+  overflow: hidden;
 }
 .detail-catalot__header{
   display: flex;
@@ -884,7 +929,7 @@
   font-size: 24px;
   line-height: 100%;
   text-transform: uppercase;
-  text-align: center;
+  text-align: start;
   color: var(--text-0);
 }
 .detail-catalot__content{
@@ -894,6 +939,12 @@
 
   display: flex;
 }
+.detail__catalot .product__item{
+  width: calc(100% - 24px);
+}
+.detail__images-phone{
+  display: none;
+}
 .toggle__table{
   margin-top: 32px;
 
@@ -974,8 +1025,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{
@@ -987,8 +1162,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,6 +10,9 @@
 .modal__basket{
     width: 100%;
 }
+.modal__filter{
+    width: 100%;
+}
 .modal__button .to-know{
     display: flex;
 
@@ -97,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) {
@@ -63,14 +65,97 @@
 .detail{
     flex-direction: column;
 }
-
+.detail__images{
-.detail__images,
+    display: none;
+}
 .detail__content{
     width: 100%;
 }
 .detail__content{
-    margin-top: 48px;
     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/js/gp-main.js

@@ -16,6 +16,34 @@ modalClose('.modal__close');
 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');
 
@@ -123,6 +151,120 @@ checkbox.forEach(e => {
 })
 // checkbox 
 
+
+
+
+// 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
+
+
+// function
 function modalOpen(buttonElement, contentElement){
     let modal = document.querySelector('.modal'),
         aside = document.querySelector('.modal__aside'),
@@ -139,7 +281,7 @@ function modalOpen(buttonElement, contentElement){
             let width = thisContentElement.clientWidth;
 
             setTimeout(() => {
-                if (device <= 576) {
+                if (device <= 720) {
                     aside.style.width = `${device}px`;
                     thisContentElement.style.opacity = 1;
                     thisContentElement.style.filter = 'blur(0px)';
@@ -231,4 +373,54 @@ function singleToggleOpenX(button, content, blockheight) {
             thisContent.classList .remove('open');
         }
     }
-}
+}
+
+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) => {
+    // media
+    modalOpen('.button--filter', '.modal__filter');
+    modalOpen('.basket-open', '.modal__basket');
+    modalClose('.modal__close');
+    // media
+    // gallery
+    // if (!document.querySelector('.detail__images').classList.contains('swiper')) {
+    //     createGalleryPhone('.detail__images', '.detail-images__wrapper', '.detail__image', 980);
+    // }
+    // gallery
+});
+// resize