fix1707

src/components/CoreProductCard.tsx

@@ -312,9 +312,9 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                   <img src="/images/info.svg" loading="lazy" alt="info" className="image-9" />
                 </div>
                 <div className="w-layout-vflex flex-block-50">
-                  <div className="w-layout-hflex flex-block-79">
+                  <div className="flex flex-row flex-nowrap items-center gap-2">
-                    <h3 className="heading-10 name">{brand}</h3>
+                    <h3 className="heading-10 name" style={{marginRight: 8}}>{brand}</h3>
-                    <h3 className="heading-10">{article}</h3>
+                    <h3 className="heading-10" style={{marginRight: 8}}>{article}</h3>
                     <div 
                       className="favorite-icon w-embed" 
                       onClick={handleFavoriteClick} 
@@ -328,7 +328,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                       </svg>
                     </div>
                   </div>
-                  <div className="text-block-21">{name}</div>
+                  <div className="text-block-21 mt-1">{name}</div>
                 </div>
               </div>
               {image && (

src/components/Footer.tsx

@@ -115,7 +115,7 @@ const Footer = () => (
             <button className="bg-[#23407A] rounded-lg py-2 px-6 font-medium mt-1 mb-2">Напиши нам</button>
           </div>
           {/* Центр: меню */}
-          <div className="hidden md:flex flex-1 flex-wrap gap-10 justify-center min-w-[400px]">
+          <div className="hidden md:flex flex-1 flex-wrap gap-30 justify-center min-w-[400px]">
             <div className="flex flex-col gap-3 min-w-[150px]">
               <div className="link">Подбор по марке авто</div>
               <a href="#" className="link">Поиск по VIN</a>
@@ -178,7 +178,7 @@ const Footer = () => (
       
             </a>
           </div>
-          <div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-20 md:mt-6 md:min-w-[400px]">
+          <div className="flex flex-col items-center md:flex-row md:items-start md:justify-center flex-1 flex-wrap gap-4 md:gap-37 md:mt-6 md:min-w-[400px]">
             <a href="#" className=" hover:underline text-xs opacity-70 text-center  md:w-auto md:text-left">Политика конфиденциальности</a>
             
             <a href="#" className=" hover:underline text-xs opacity-70 text-center md:w-auto md:text-left">Согласие на обработку персональных данных</a>

src/components/index/BestPriceSection.tsx

@@ -111,12 +111,62 @@ const BestPriceSection: React.FC = () => {
             <div className="text-block-58">Подборка лучших предложенийпо цене</div>
             <a href="#" className="button-24 w-button">Показать все</a>
           </div>
-          <div className="carousel-row">
+          <div className="carousel-row" style={{ position: 'relative' }}>
+            {/* Стили для стрелок как в ProductOfDayBanner, но без абсолютного позиционирования */}
+            <style>{`
+              .carousel-arrow {
+                width: 40px;
+                height: 40px;
+                border: none;
+                background: none;
+                padding: 0;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 1;
+                transition: opacity 0.2s;
+                cursor: pointer;
+                margin: 0 8px;
+              }
+              .carousel-arrow-left {}
+              .carousel-arrow-right {}
+              .carousel-arrow .arrow-circle {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                background: rgba(255,255,255,0.85);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s;
+              }
+              .carousel-arrow:hover .arrow-circle,
+              .carousel-arrow:focus .arrow-circle {
+                background: #ec1c24;
+              }
+              .carousel-arrow .arrow-svg {
+                width: 20px;
+                height: 20px;
+                display: block;
+                transition: stroke 0.2s;
+                stroke: #222;
+              }
+              .carousel-arrow:hover .arrow-svg,
+              .carousel-arrow:focus .arrow-svg {
+                stroke: #fff;
+              }
+              .carousel-row {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+              }
+            `}</style>
             <button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
             <div className="w-layout-hflex flex-block-121 carousel-scroll" ref={scrollRef}>
               {bestPriceItems.map((item, i) => (
@@ -124,10 +174,11 @@ const BestPriceSection: React.FC = () => {
               ))}
             </div>
             <button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
           </div>
         </div>

src/components/index/NewArrivalsSection.tsx

@@ -84,16 +84,66 @@ const NewArrivalsSection: React.FC = () => {
             <h2 className="heading-4">Новое поступление</h2>
           </div>
           <div className="carousel-row">
+            {/* Стили для стрелок как в BestPriceSection и TopSalesSection */}
+            <style>{`
+              .carousel-arrow {
+                width: 40px;
+                height: 40px;
+                border: none;
+                background: none;
+                padding: 0;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 1;
+                transition: opacity 0.2s;
+                cursor: pointer;
+                margin: 0 8px;
+              }
+              .carousel-arrow-left {}
+              .carousel-arrow-right {}
+              .carousel-arrow .arrow-circle {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                background: rgba(255,255,255,0.85);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s;
+              }
+              .carousel-arrow:hover .arrow-circle,
+              .carousel-arrow:focus .arrow-circle {
+                background: #ec1c24;
+              }
+              .carousel-arrow .arrow-svg {
+                width: 20px;
+                height: 20px;
+                display: block;
+                transition: stroke 0.2s;
+                stroke: #222;
+              }
+              .carousel-arrow:hover .arrow-svg,
+              .carousel-arrow:focus .arrow-svg {
+                stroke: #fff;
+              }
+              .carousel-row {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+              }
+            `}</style>
             <button 
               className="carousel-arrow carousel-arrow-left" 
               onClick={scrollLeft} 
               aria-label="Прокрутить влево"
               style={{ cursor: 'pointer' }}
             >
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
             
             <div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
@@ -149,10 +199,11 @@ const NewArrivalsSection: React.FC = () => {
               aria-label="Прокрутить вправо"
               style={{ cursor: 'pointer' }}
             >
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
           </div>
         </div>

src/components/index/NewsAndPromos.tsx

@@ -32,11 +32,61 @@ const NewsAndPromos = () => {
             </div>
           </div>
           <div className="carousel-row">
+            {/* Стили для стрелок как в других секциях */}
+            <style>{`
+              .carousel-arrow {
+                width: 40px;
+                height: 40px;
+                border: none;
+                background: none;
+                padding: 0;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 1;
+                transition: opacity 0.2s;
+                cursor: pointer;
+                margin: 0 8px;
+              }
+              .carousel-arrow-left {}
+              .carousel-arrow-right {}
+              .carousel-arrow .arrow-circle {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                background: rgba(255,255,255,0.85);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s;
+              }
+              .carousel-arrow:hover .arrow-circle,
+              .carousel-arrow:focus .arrow-circle {
+                background: #ec1c24;
+              }
+              .carousel-arrow .arrow-svg {
+                width: 20px;
+                height: 20px;
+                display: block;
+                transition: stroke 0.2s;
+                stroke: #222;
+              }
+              .carousel-arrow:hover .arrow-svg,
+              .carousel-arrow:focus .arrow-svg {
+                stroke: #fff;
+              }
+              .carousel-row {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+              }
+            `}</style>
             <button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
             <div className="w-layout-hflex flex-block-6-copy-copy carousel-scroll" ref={scrollRef}>
               <NewsCard
@@ -69,10 +119,11 @@ const NewsAndPromos = () => {
               />
             </div>
             <button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
           </div>
         </div>

src/components/index/ProductOfDaySection.tsx

@@ -110,7 +110,12 @@ const ProductOfDaySection: React.FC = () => {
       };
     }
 
-    return null;
+    // Если нет ни одной картинки, возвращаем noimage.png
+    return {
+      url: '/images/noimage.png',
+      alt: product.name,
+      source: 'noimage'
+    };
   };
 
   // Обработчики для навигации по товарам дня
@@ -209,6 +214,11 @@ const ProductOfDaySection: React.FC = () => {
                       Parts Index
                     </div>
                   )}
+                  {productImage.source === 'noimage' && (
+                    <div className="absolute bottom-0 right-0 bg-gray-400 text-white text-xs px-2 py-1 rounded-tl">
+                      Нет изображения
+                    </div>
+                  )}
                 </div>
               )}
             </div>

src/components/index/TopSalesSection.tsx

@@ -143,11 +143,61 @@ const TopSalesSection: React.FC = () => {
             <h2 className="heading-4">Топ продаж</h2>
           </div>
           <div className="carousel-row">
+            {/* Стили для стрелок как в BestPriceSection */}
+            <style>{`
+              .carousel-arrow {
+                width: 40px;
+                height: 40px;
+                border: none;
+                background: none;
+                padding: 0;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+                opacity: 1;
+                transition: opacity 0.2s;
+                cursor: pointer;
+                margin: 0 8px;
+              }
+              .carousel-arrow-left {}
+              .carousel-arrow-right {}
+              .carousel-arrow .arrow-circle {
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                background: rgba(255,255,255,0.85);
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s;
+              }
+              .carousel-arrow:hover .arrow-circle,
+              .carousel-arrow:focus .arrow-circle {
+                background: #ec1c24;
+              }
+              .carousel-arrow .arrow-svg {
+                width: 20px;
+                height: 20px;
+                display: block;
+                transition: stroke 0.2s;
+                stroke: #222;
+              }
+              .carousel-arrow:hover .arrow-svg,
+              .carousel-arrow:focus .arrow-svg {
+                stroke: #fff;
+              }
+              .carousel-row {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+              }
+            `}</style>
             <button className="carousel-arrow carousel-arrow-left" onClick={scrollLeft} aria-label="Прокрутить влево">
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M19.5 24L12.5 16L19.5 8" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
             <div className="w-layout-hflex core-product-search carousel-scroll" ref={scrollRef}>
               {activeTopSalesProducts.map((item: TopSalesProductData) => {
@@ -177,10 +227,11 @@ const TopSalesSection: React.FC = () => {
               })}
             </div>
             <button className="carousel-arrow carousel-arrow-right" onClick={scrollRight} aria-label="Прокрутить вправо">
-              <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <span className="arrow-circle">
-                <circle cx="16" cy="16" r="16" fill="#F3F4F6"/>
+                <svg className="arrow-svg" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M12.5 8L19.5 16L12.5 24" stroke="#222" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+                  <path d="M3.33398 10H16.6673M16.6673 10L11.6673 5M16.6673 10L11.6673 15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                 </svg>
+              </span>
             </button>
           </div>
         </div>

src/components/vin/VehicleAttributesTooltip.tsx

@@ -19,6 +19,7 @@ interface VehicleAttributesTooltipProps {
 const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
   show,
   position,
+  vehicleName,
   vehicleAttributes,
   onMouseEnter,
   onMouseLeave,
@@ -27,7 +28,7 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
   if (!show) return null;
   return (
     <div
-      className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
+      className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] max-w-full fixed z-[9999]"
       style={{
         left: `${position.x + 120}px`,
         top: `${position.y}px`,
@@ -45,16 +46,33 @@ const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
         />
       )}
       <div className="flex relative flex-col w-full">
-        {vehicleAttributes.map((attr, idx) => (
+        {/* Заголовок */}
-          <div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
+        {vehicleName && (
-            <div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
+          <div className="font-semibold text-lg text-black mb-3 truncate">{vehicleName}</div>
+        )}
+        {/* Список характеристик или сообщение */}
+        {vehicleAttributes.length > 0 ? (
+          vehicleAttributes.map((attr, idx) => (
+            <div
+              key={idx}
+              className="grid grid-cols-[150px_1fr] gap-x-5 items-start mt-2 w-full first:mt-0"
+            >
+              <div className="text-gray-400 break-words whitespace-normal text-left">
                 {attr.name}
               </div>
-            <div className="self-stretch my-auto font-medium text-black truncate">
+              <div
+                className="font-medium text-black break-words whitespace-normal text-left justify-self-start"
+                style={{ textAlign: 'left' }}
+              >
                 {attr.value}
               </div>
             </div>
-        ))}
+          ))
+        ) : (
+          <div className="flex flex-col items-center justify-center w-full py-8">
+            <div className="text-gray-400 mb-2">Дополнительная информация недоступна</div>
+          </div>
+        )}
       </div>
     </div>
   );

src/components/vin/VinQuick.tsx

@@ -88,10 +88,9 @@ const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId,
                     ))}
                     {total > 3 && shownCount < total && (
                       <div className="flex gap-2 mt-2 w-full">
-                        {shownCount + 3 < total && (
                         <button
                           className="expand-btn"
-                            onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: shownCount + 3 }))}
+                          onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
                           style={{ border: '1px solid #EC1C24', borderRadius: 8, background: '#fff', color: '#222', padding: '6px 18px', minWidth: 180 }}
                         >
                           Развернуть
@@ -99,10 +98,9 @@ const VinQuick: React.FC<VinQuickProps> = ({ quickGroup, catalogCode, vehicleId,
                             <path d="M4 6l4 4 4-4" stroke="#222" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                           </svg>
                         </button>
-                        )}
                         <button
                           className="showall-btn"
-                          onClick={() => setShownCounts(prev => ({ ...prev, [unit.unitid]: total }))}
+                          onClick={() => handleUnitClick(unit)}
                           style={{ background: '#e9eef5', borderRadius: 8, color: '#222', padding: '6px 18px', border: 'none'}}
                         >
                           Показать все

src/styles/my.css

@@ -491,7 +491,6 @@ input#VinSearchInput {
   line-height: 1.4em;
 }
 
-.heading-9-copy,
 .text-block-21-copy {
   width: 250px;
   overflow: hidden;
@@ -939,12 +938,11 @@ a.link-block-2.w-inline-block  {
   max-width: 100%;
 }
 
-.heading-9-copy {
-  min-width: 100px;
 
+.flex-block-36 {
+  width: 100%;
 }
 
-
 .flex-block-15-copy {
   width: 232px!important;
   min-width: 232px!important;
@@ -1194,3 +1192,84 @@ a.link-block-2.w-inline-block  {
     box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 4px rgba(44,62,80,0.08) !important;
   }
 }
+
+.pricecartbp {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px; /* или другой нужный вам отступ */
+}
+
+.bestpriceitem {
+  height: 279px;
+}
+
+
+.flex-block-49 {
+  gap: 15px;
+}
+
+.pcs-search-s1, 
+.sort-item.first {
+  width: 100px;
+}
+
+@media (max-width: 991px) {
+  .pcs-search-s1,
+  .sort-item.first {
+    width: 60px;
+  }
+}
+@media (max-width: 479px) {
+  .pcs-search-s1,
+  .sort-item.first {
+    width: 50px;
+  }
+}
+
+.w-layout-vflex.flex-block-36 {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
+.w-layout-vflex.flex-block-44 {
+  flex: 1 1 calc(33.333% - 16px);
+  max-width: calc(33.333% - 16px);
+  min-width: 0;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+@media (max-width: 991px) {
+  .w-layout-vflex.flex-block-44 {
+    flex: 1 1 calc(50% - 12px);
+    max-width: calc(50% - 12px);
+  }
+}
+@media (max-width: 600px) {
+  .w-layout-vflex.flex-block-44 {
+    flex: 1 1 100%;
+    max-width: 100%;
+  }
+}
+@media (max-width: 767px) {
+  .w-layout-vflex.flex-block-36 {
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    gap: 12px;
+    -webkit-overflow-scrolling: touch;
+  }
+  .w-layout-vflex.flex-block-44 {
+    min-width: 160px;
+    max-width: 160px;
+    flex: 0 0 160px;
+  }
+  .heading-9-copy {
+    text-align: left !important;
+    margin-left: 0 !important;
+  }
+}