Merge pull request 'fix1207' (#26) from fix1207 into main

Reviewed-on: #26

src/components/CoreProductCard.tsx

@@ -272,6 +272,8 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
   return (
     <>
       <div className="w-layout-hflex core-product-search-s1">
+        <div className="w-layout-vflex flex-block-48-copy">
+          <div className="w-layout-vflex product-list-search-s1">
             <div className="w-layout-vflex core-product-s1">
               <div className="w-layout-vflex flex-block-47">
                 <div className="div-block-19">
@@ -309,6 +311,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
               )}
             </div>
             <div className="w-layout-vflex flex-block-48-copy">
+              <div className="w-layout-vflex product-list-search-s1">
                 <div className="w-layout-hflex sort-list-s1">
                   <div className="w-layout-hflex flex-block-49">
                     <div className="sort-item first">Наличие</div>
@@ -316,7 +319,6 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                   </div>
                   <div className="sort-item price">Цена</div>
                 </div>
-          <div className="w-layout-vflex product-list-search-s1">
                 {displayedOffers.map((offer, idx) => {
                   const isLast = idx === displayedOffers.length - 1;
                   const maxCount = parseStock(offer.pcs);
@@ -405,7 +407,6 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                     </div>
                   );
                 })}
-          </div>
                 {hasMoreOffers || visibleOffersCount > INITIAL_OFFERS_LIMIT ? (
                   <div 
                     className="w-layout-hflex show-more-search"
@@ -443,6 +444,9 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                 ) : null}
               </div>
             </div>
+          </div>
+        </div>
+      </div>
 
     </>
   );

src/styles/my.css

@@ -51,7 +51,9 @@
 
 }
 
-
+.flex-block-40 {
+  background-color: #fff;
+}
 
 input.text-block-31 {
   background: none !important;
@@ -407,7 +409,14 @@ input.input-receiver:focus {
 
 
 .core-product-s1{
-  max-width: 320px ;
+  width: 100% !important;
+}
+
+.heading-10 {
+  width: auto !important;
+  min-width: 0 !important;
+  
+  white-space: nowrap; /* если хотите, чтобы текст не переносился */
 }
 
 .flex-block-112 {
@@ -743,7 +752,7 @@ a.link-block-2.w-inline-block  {
  height: 140px;
 }
 }
-@media screen and (max-width: 767px) {
+@media (max-width: 767px) {
   .div-block-128 {
    height: 100px;
   }
@@ -836,10 +845,57 @@ a.link-block-2.w-inline-block  {
  max-width: 33%;
 }
 
+.flex-block-44 {
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  flex: 1;
+}
+
+.sort-list-s1 {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.show-more-search {
+  padding: 6px 20px;
+ 
+}
+
+
+
+
+
+.flex-block-37 {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.w-layout-vflex.flex-block-40 {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.flex-block-47 {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  justify-content: center !important; /* по центру по горизонтали */
+  gap: 16px !important;
+}
+.flex-block-50 {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 16px !important;
+  width: 100% !important;
+}
+.flex-block-79 {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center !important;
+  gap: 8px !important;
+}
+
 .text-block-21 {
-  overflow: hidden;
+
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .flex-block-45 {
@@ -1047,3 +1103,26 @@ a.link-block-2.w-inline-block  {
     display: none !important;
   }
 }
+@media (max-width: 767px) {
+  .flex-block-50 {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    justify-content: flex-start !important;
+    gap: 8px !important;
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+}
+@media (max-width: 767px) {
+  .div-block-19 {
+    display: none !important;
+  }
+}
+
+@media (max-width: 767px) {
+  .core-product-s1 {
+    flex-direction: row !important; /* или column, если нужно вертикально */
+    justify-content: flex-start !important;
+    align-items: flex-start !important;
+  }
+}

src/styles/protekproject.webflow.css

@@ -2324,8 +2324,7 @@ body {
 .text-block-21 {
   color: var(--_fonts---color--light-blue-grey);
   font-size: var(--_fonts---font-size--small-font-size);
-  align-self: stretch;
+
-  overflow: hidden;
 }
 
 .text-block-22 {
@@ -2396,13 +2395,7 @@ body {
   margin-right: 5px;
 }
 
-.flex-block-47 {
+
-  grid-column-gap: 15px;
-  grid-row-gap: 15px;
-  flex-flow: row;
-  flex: 1;
-  align-self: auto;
-}
 
 .image-10 {
   object-fit: contain;
@@ -3716,9 +3709,7 @@ body {
   align-items: center;
 }
 
-.flex-block-79 {
+
-  align-self: stretch;
-}
 
 .flex-block-80 {
   grid-column-gap: 20px;
@@ -4491,16 +4482,7 @@ body {
   max-width: 100%;
 }
 
-.core-product-s1 {
+
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-  flex-flow: row-reverse;
-  flex: 1;
-  justify-content: flex-end;
-  align-self: stretch;
-  align-items: center;
-  max-width: 100%;
-}
 
 .flex-block-48-copy {
   grid-column-gap: 16px;
@@ -6767,14 +6749,7 @@ body {
     flex: 0 auto;
   }
 
-  .core-product-s1 {
+
-    flex-flow: column;
-    flex: 1;
-    justify-content: flex-start;
-    align-self: stretch;
-    align-items: flex-start;
-    min-width: 270px;
-  }
 
   .core-product-search-s2 {
     flex-flow: row;
@@ -7037,10 +7012,7 @@ body {
     flex: 1;
   }
 
-  .core-product-s1 {
+
-    flex-flow: column;
-    max-width: 320px;
-  }
 
   .core-product-search-s2 {
     flex-flow: row;
@@ -7869,9 +7841,7 @@ body {
     flex-flow: column;
   }
 
-  .core-product-s1 {
+
-    flex-flow: row-reverse;
-  }
 
   .sort-list-s1 {
     padding-right: 210px;
@@ -9498,9 +9468,9 @@ body {
     margin-top: 0;
   }
 
-  .text-block-21 {
+  /* .text-block-21 {
     line-height: 140%;
-  }
+  } */
 
   .flex-block-45 {
     display: flex;
@@ -10057,13 +10027,7 @@ body {
     max-width: 100%;
   }
 
-  .core-product-s1 {
+
-    grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    flex-flow: column-reverse wrap;
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
 
   .flex-block-48-copy {
     max-width: 100%;