доделал

assets/css/gp-style-core.css

@@ -446,7 +446,7 @@ button{
 
 /* breadcrumbs */
 .breadcrumbs{
-  margin: 24px;
+  margin: 96px 24px 24px;
 
   display: flex;
   align-items: center;

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: '';
@@ -78,6 +85,9 @@
     width: 100%;
     height: 100%;
 }
+.header__logo-white{
+  display: none;
+}
 
 .header__menu-block{
     position: absolute;
@@ -238,11 +248,14 @@
     text-decoration: none;
 }
 .header.white{
-  background-color: thistle;
+  /* 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);
 }

assets/js/gp-main.js

@@ -152,118 +152,6 @@ 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'),
@@ -416,11 +304,19 @@ window.addEventListener('resize', (e) => {
     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
+// 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

product.html

@@ -1056,6 +1056,7 @@
     <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
 
     <script src="assets/js/gp-main.js"></script>
+    <script src="assets/js/gp-product.js"></script>
 </body>
 
 </html>