overlay js + css правки

assets/css/gp-style-core.css

@@ -807,8 +807,6 @@ button{
   opacity: 0;
   transition: opacity .2s ease-out;
   pointer-events: none;
-
-  white-space: nowrap;
 }
 .modal.active{
   opacity: 1;

assets/css/gp-style-desktop.css

@@ -326,6 +326,8 @@
     background-color: var(--background-grey);
     border-radius: 24px;
 
+    overflow: hidden;
+
     position: relative;
   }
   .product__item::before{
@@ -349,6 +351,9 @@
   .product__item:hover::before{
     opacity: 1;
   }
+  .product__item.active::before{
+    opacity: 0;
+  }
   .product-item__block-label{
     position: absolute;
     top: 16px;
@@ -449,7 +454,7 @@
   }
   .product-item__overlay{
     position: absolute;
-    top: 0;
+    top: 100%;
     left: 0;
 
     width: 100%;
@@ -466,6 +471,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{

assets/js/gp-main.js

@@ -16,6 +16,36 @@ modalClose('.modal__close');
 toggleOpenX('.toggle', '.toggle__title', '.toggle__content', '.toggle__block-content', true);
 // toggle
 
+// 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);