внесение правок

assets/css/gp-style-core.css

@@ -418,6 +418,54 @@ button{
 .form__button:hover{
   opacity: .8;
 }
+
+.label{
+  padding-bottom: 4px;
+
+  display: inline-block;
+
+  position: relative;
+}
+.label::after{
+  content: '';
+
+  position: absolute;
+  top: 2px;
+  right: -20px;
+
+  width: 16px;
+  height: 16px;
+
+  background-image: url(../img/svg/main/question.svg);
+
+  cursor: pointer;
+}
+.label__title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 125%;
+  color: var(--text-3);
+}
+.label__question{
+  position: absolute;
+
+  padding: 8px;
+
+  border-radius: 6px;
+  transition: height .2s ease-out;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1), 0 0 2px 0 rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  background-color: var(--background-white);
+
+  opacity: 0;
+  transition: opacity .2s ease-out;
+  pointer-events: none;
+}
+.label:hover .label__question{
+  opacity: 1;
+  pointer-events: auto;
+}
 /* form */
 
 
@@ -446,7 +494,7 @@ button{
 
 /* breadcrumbs */
 .breadcrumbs{
-  margin: 96px 24px 24px;
+  margin: 24px;
 
   display: flex;
   align-items: center;
@@ -638,6 +686,53 @@ button{
 .to-know--background-none{
   background: none;
 }
+.back{
+  margin-top: 16px;
+  margin-left: 16px;
+
+  padding: 8px;
+  padding-left: 32px;
+
+  background: none;
+  border: none;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-black);
+
+  text-decoration: none;
+
+  position: relative;
+}
+.back::before{
+  content: '';
+
+  position: absolute;
+  top: 8px;
+  left: 0;
+
+  margin-right: 8px;
+
+  width: 24px;
+  height: 24px;
+
+  background-image: url(../img/svg/main/arrow-back.svg);
+}
+
+.back::after{
+  content: '';
+
+  position: absolute;
+  bottom: 6px;
+  left: 0;
+
+  width: calc(100% - 8px);
+  height: 1px;
+
+  background: var(--text-black);
+}
 /* button */
 
 /* select */
@@ -848,6 +943,9 @@ button{
   filter: blur(10px);
   transition: filter .2s ease-out;
 }
+.modal__item--no-title{
+  padding-top: 72px;
+}
 .modal__item.active{
   display: flex;
   flex-direction: column;
@@ -875,6 +973,29 @@ button{
   text-transform: uppercase;
   color: var(--text-black);
 }
+.modal__small-title{
+  font-family: var(--font-family);
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 100%;
+  text-transform: uppercase;
+  color: var(--text-black);
+}
+.modal__text{
+  margin-top: 16px;
+
+  font-family: var(--font-family);
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-0);
+}
+.modal__form-sub{
+  margin-top: 48px;
+}
+.modal-form-sub__submit{
+  margin-top: 64px;
+}
 .modal__block-button{
   margin-top: 24px;
 }
@@ -921,6 +1042,10 @@ button{
 .modal__basket{
   width: 600px;
 }
+.modal__to-know,
+.modal__to-know-submit{
+  width: 412px;
+}
 .modal-basket__item{
   padding-top: 23px;
   padding-bottom: 24px;
@@ -952,6 +1077,33 @@ button{
 .modal-basket__item:hover .modal-basket__item::before{
   opacity: .8;
 }
+.modal-basket__item--return{
+  padding-right: 5px;
+  
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.modal-basket__item--return .modal-basket-item__title{
+  padding-right: 10px;
+}
+.modal-basket__item--return::before{
+  display: none;
+}
+.modal-basket-item__return{
+  border-radius: 20px;
+  padding: 4px 24px;
+
+  font-family: var(--font-family);
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 120%;
+  color: var(--text-white);
+
+  background: var(--background-black);
+
+  border: none;
+}
 .modal-basket-item__block-image{
   width: 128px;
   aspect-ratio: 1;
@@ -1014,6 +1166,15 @@ button{
 .modal__basket .modal__content{
   height: calc(100% - 100px);
   overflow-x: hidden;
+
+}
+.modal__basket .modal__content::-webkit-scrollbar {
+  width: 7px;
+  background-color: #f9f9fd;
+}
+.modal__basket .modal__content::-webkit-scrollbar-thumb {
+  background-color: var(--background-black);
+  border-radius: 2px;
 }
 /* modal */
 
@@ -1039,11 +1200,14 @@ button{
   background-image: url(../img/svg/main/black-x.svg);
   transform: rotate(45deg);
   transition: transform .2s;
+  pointer-events: none;
 }
 .toggle.active::after{
   transform: rotate(0deg);
 }
 .toggle__title{
+  padding-right: 30px;
+
   font-family: var(--font-family);
   font-weight: 700;
   font-size: 16px;
@@ -1093,6 +1257,8 @@ button{
 .checkbox{
   display: flex;
   align-items: center;
+
+  cursor: pointer;
 }
 .checkbox__state{
   border-radius: 4px;
@@ -1102,6 +1268,8 @@ button{
 
   border: 2px solid var(--background-black);
   background: var(--background-white);
+
+  flex-shrink: 0;
 }
 .checkbox.active .checkbox__state{
   background-color: var(--background-black);
@@ -1121,6 +1289,23 @@ button{
   font-size: 20px;
   line-height: 120%;
   color: var(--text-dark);
+
+  cursor: pointer;
+}
+.checkbox__label a{
+  color: #76ce75;
+
+  text-decoration: none;
+}
+.checkbox--small{
+  margin-top: 24px;
+}
+.checkbox--small .checkbox__label{
+  padding-left: 24px;
+
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 133%;
 }
 /* checkbox */
 
@@ -1134,6 +1319,8 @@ button{
   aspect-ratio: 1;
 
   accent-color: var(--background-black);
+
+  cursor: pointer;
 }
 .radio__label{
   padding-left: 8px;
@@ -1143,6 +1330,8 @@ button{
   font-size: 20px;
   line-height: 120%;
   color: var(--text-dark);
+
+  cursor: pointer;
 }
 /* radio */
 

assets/css/gp-style-desktop.css

@@ -248,7 +248,7 @@
     text-decoration: none;
 }
 .header.white{
-  /* background-color: thistle; */
+  background: none;
 }
 .header.white .header__logo-black{
   display: none;
@@ -284,6 +284,10 @@
 .header.white .header__open-menu::after{
   background: var(--background-white);
 }
+
+main{
+  padding-top: 72px;
+}
 /* header end */
 
 /* product */
@@ -310,6 +314,7 @@
     border-radius: 16px;
   
     background: var(--gradient-blue);
+    border: none;
   }
   .product-tag-item__content{
     padding: 3px 11px;
@@ -344,6 +349,16 @@
     background-repeat: no-repeat;
     background-position: center;
   }
+  .product__error{
+    margin: auto;
+
+    font-family: var(--font-family);
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 100%;
+    text-transform: uppercase;
+    color: var(--text-0);
+  }
   .product__title{
     font-family: var(--font-family);
     font-weight: 700;
@@ -651,9 +666,9 @@
 /* product */
 
 /* modal */
-.modal__button .to-know{
+/* .modal__button .to-know{
   display: none;
-}
+} */
 /* modal */
 
 /* footer */
@@ -704,6 +719,9 @@
 .footer-list__item:nth-child(even){
   width: 322px;
 }
+.footer-list__item .button{
+  border-radius: 24px;
+}
 .footer-list__title{
   font-family: var(--font-family);
   font-weight: 700;
@@ -941,14 +959,21 @@
   margin-top: 48px;
   margin-bottom: 48px;
 }
-.detail__catalot{
+.detail__wrapper-catalot{
   margin-top: 64px;
 
-  width: 100%;
+  width: calc(100% + 16px);
 
   overflow: hidden;
+
+  position: relative;
+}
+.detail__catalot{
+
 }
 .detail-catalot__header{
+  padding-right: 16px;
+
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -993,6 +1018,9 @@
 .detail__images-phone{
   display: none;
 }
+.back-detail{
+  display: none;
+}
 .toggle__table{
   margin-top: 32px;
 

assets/css/gp-style-mobile.css

@@ -13,6 +13,10 @@
 .modal__filter{
     width: 100%;
 }
+.modal__to-know,
+.modal__to-know-submit{
+    width: 100%;
+}
 .modal__button .to-know{
     display: flex;
 
@@ -65,6 +69,11 @@
 
     margin-top: 24px;
 }
+.footer-about__text{
+    padding-top: 35px;
+    display: block;
+    text-align: left;
+}
 .footer__list{
     margin-top: 20px;
 }

assets/css/gp-style-tablet.css

@@ -1,6 +1,9 @@
 /* Стили для планшетов  */
 @media only screen and (max-width: 1200px) {
 /* header */
+main{
+    padding-top: 64px;
+}
 .main-menu{
     display: none;
 }
@@ -12,7 +15,7 @@
 }
 .header__logo{
     width: 136px;
-    height: 24px;
+    height: 29px;
 }
 .header__content{
     height: auto;
@@ -41,16 +44,50 @@
 /* footer */
 .footer{
     margin-top: 0;
-}
+
-.footer__about{
+    padding: 24px 16px;
-    justify-content: center;
-}
-.footer-about__text{
-    display: none;
 }
 /* footer */
 
+/* breadcrumbs */
+.breadcrumbs{
+    display: none;
+}
+/* breadcrumbs */
 
+/* product */
+.product{
+    padding: 12px;
+}
+.product__title{
+    font-weight: 400;
+    font-size: 26px;
+    line-height: 123%;
+    text-transform: uppercase;
+}
+.to-know p {
+    font-size: 18px;
+}
+.toggle-table__title{
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 133%;
+}
+.toggle-table__item p{
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 133%;
+}
+.detail{
+    margin: 24px 16px;
+}
+.back-detail{
+    display: inline;
+}
+.detail-catalot__title{
+    font-size: 22px;
+}
+/* product */
 }
 
 @media only screen and (max-width: 980px) {

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

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

assets/img/svg/main/question.svg

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

assets/js/gp-main.js

@@ -10,6 +10,7 @@ singleToggleOpenX('#phone-menu','.header__menu-block','.header__phone-menu');
 modalOpen('.button--filter', '.modal__filter');
 modalOpen('.basket-open', '.modal__basket');
 modalClose('.modal__close');
+modalOpen('.open-to-know', '.modal__to-know');
 // media
 
 // toggle
@@ -79,9 +80,10 @@ toggleOpenX('.select', '.select__state' , '.state__content', '.state__block', tr
 
 let selects = document.querySelectorAll('.select');
 
-selects.forEach(e => {
+selects.forEach(select => {
-    let state = e.querySelector('.select__state'),
+    let state = select.querySelector('.select__state'),
-        buttons = e.querySelectorAll('.state__button');
+        content = select.querySelector('.state__block'),
+        buttons = select.querySelectorAll('.state__button');
         
     buttons.forEach(e => {
         let button = e;
@@ -99,6 +101,8 @@ selects.forEach(e => {
             state.value = text;
 
             button.classList.add('active');
+            content.style.height = 0;
+            select.classList.remove('active');
         }        
     })
 })
@@ -300,23 +304,48 @@ function createGalleryPhone(swiper, wrapper, slide, width) {
 
 // resize
 window.addEventListener('resize', (e) => {
+    let width = window.screen.width;
+
     // media
     modalOpen('.button--filter', '.modal__filter');
     modalOpen('.basket-open', '.modal__basket');
     modalClose('.modal__close');
+    
+    let modalItem = document.querySelectorAll('.modal__item');
+
+    // if (width <= 720) {
+        modalItem.forEach(modal => {
+            if (modal.classList.contains('active')) {
+                let aside = document.querySelector('.modal__aside');
+
+                if (width <= 720) {
+                    aside.style.width = `${width}px`
+                }else{
+                    let openAside = document.querySelector('.modal__item.active'),
+                        newWidth = openAside.clientWidth;
+
+                    aside.style.width = `${newWidth}px`
+                }
+            }
+        })
+    // }
 });
 // resize
 
 // scroll
-window.addEventListener("scroll", function (e) {
-    let header = document.querySelector('.header');
-    let scroll = window.scrollY;
 
-    if (scroll >= 75) {
-        header.classList.remove('white')
-    }else{
-        header.classList.add('white')
-    }
 
-});
+if (document.querySelector('.header').classList.contains('white')) {
+    window.addEventListener("scroll", function (e) {
+        let header = document.querySelector('.header');
+        let scroll = window.scrollY;
+        
+        if (scroll >= 25) {
+            header.classList.remove('white')
+        }else{
+            header.classList.add('white')
+        }
+        
+    });
+}
 // scroll

assets/js/gp-product.js

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

del.html

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

product.html

@@ -228,6 +228,10 @@
             </a>
         </div>
 
+        <a href="#" class="back back-detail">
+            к каталогу
+        </a>
+
         <div class="detail">
             <div class="detail__images">
                 <div class="detail__image detail__image--width-perc-100" data-count-img="0">
@@ -477,7 +481,8 @@
                 </div>
             </div>
 
-            <div class="detail__catalot">
+            <div class="detail__wrapper-catalot">
+                <div class="detail__catalot">
                     <div class="detail-catalot__header">
                         <p class="detail-catalot__title">
                             вашему питомцу может понравиться
@@ -635,6 +640,7 @@
                         </div>
                     </div>
                 </div>
+            </div>
         </div>
     </main>