Обновлены запросы GraphQL для поиска: заменен SEARCH_LAXIMO_FULLTEXT на GET_LAXIMO_FULLTEXT_SEARCH в компонентах FulltextSearchSection и VinLeftbar. Удален устаревший запрос SEARCH_LAXIMO_FULLTEXT из файла graphql.ts.

Reviewed-on: #8

src/components/BrandSelectionModal.tsx

@@ -52,7 +52,7 @@ const BrandSelectionModal: React.FC<BrandSelectionModalProps> = ({
 
   return (
     <div 
-      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
+      className="fixed inset-0 bg-black/10 bg-opacity-50 flex items-center justify-center z-50 p-4"
       onClick={handleBackdropClick}
     >
       <div className="bg-white rounded-lg shadow-xl max-w-md w-full max-h-[80vh] overflow-hidden">

src/components/CartItem.tsx

@@ -16,6 +16,8 @@ interface CartItemProps {
   onComment: (comment: string) => void;
   onCountChange?: (count: number) => void;
   onRemove?: () => void;
+  isSummaryStep?: boolean;
+  itemNumber?: number;
 }
 
 const CartItem: React.FC<CartItemProps> = ({
@@ -34,9 +36,14 @@ const CartItem: React.FC<CartItemProps> = ({
   onComment,
   onCountChange,
   onRemove,
+  isSummaryStep = false,
+  itemNumber,
 }) => (
   <div className="w-layout-hflex cart-item">
     <div className="w-layout-hflex info-block-search-copy">
+      {isSummaryStep ? (
+        <div style={{ marginRight: 12, minWidth: 24, textAlign: 'center', fontWeight: 600, fontSize: 14 }}>{itemNumber}</div>
+      ) : (
       <div
         className={"div-block-7" + (selected ? " active" : "")}
         onClick={onSelect}
@@ -48,9 +55,22 @@ const CartItem: React.FC<CartItemProps> = ({
           </svg>
         )}
       </div>
+      )}
       <div className="w-layout-hflex block-name">
         <h4 className="heading-9-copy">{name}</h4>
-        <div className="text-block-21-copy">{description}</div>
+        <div
+          className={
+            "text-block-21-copy" +
+            (isSummaryStep && itemNumber === 1 ? " border-t-0" : "")
+          }
+          style={
+            isSummaryStep && itemNumber === 1
+              ? { borderTop: 'none' }
+              : undefined
+          }
+        >
+          {description}
+        </div>
       </div>
       <div className="form-block-copy w-form">
         <form className="form-copy" onSubmit={e => e.preventDefault()}>
@@ -64,6 +84,7 @@ const CartItem: React.FC<CartItemProps> = ({
             id="Search-5"
             value={comment}
             onChange={e => onComment(e.target.value)}
+            disabled={isSummaryStep}
           />
         </form>
         <div className="success-message w-form-done">
@@ -80,6 +101,10 @@ const CartItem: React.FC<CartItemProps> = ({
         <div className="text-block-21-copy-copy">{deliveryDate}</div>
       </div>
       <div className="w-layout-hflex pcs-cart-s1">
+        {isSummaryStep ? (
+          <div className="text-block-26" style={{ fontWeight: 600, fontSize: 14 }}>{count} шт.</div>
+        ) : (
+          <>
             <div
               className="minus-plus"
               onClick={() => onCountChange && onCountChange(count - 1)}
@@ -124,11 +149,14 @@ const CartItem: React.FC<CartItemProps> = ({
                 </svg>
         </div>
         </div>
+          </>
+        )}
       </div>
       <div className="w-layout-hflex flex-block-39-copy-copy">
         <h4 className="price-in-cart-s1">{price}</h4>
         <div className="price-1-pcs-cart-s1">{pricePerItem}</div>
       </div>
+      {!isSummaryStep && (
       <div className="w-layout-hflex control-element">
         <div className="favorite-icon w-embed" onClick={onFavorite} style={{ cursor: 'pointer', color: favorite ? '#e53935' : undefined }}>
           <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -161,6 +189,7 @@ const CartItem: React.FC<CartItemProps> = ({
             </svg>
           </div>
       </div>
+      )}
     </div>
   </div>
 );

src/components/CartList.tsx

@@ -3,7 +3,11 @@ import CartItem from "./CartItem";
 import { useCart } from "@/contexts/CartContext";
 import { useFavorites } from "@/contexts/FavoritesContext";
 
-const CartList: React.FC = () => {
+interface CartListProps {
+  isSummaryStep?: boolean;
+}
+
+const CartList: React.FC<CartListProps> = ({ isSummaryStep = false }) => {
   const { state, toggleSelect, updateComment, removeItem, selectAll, removeSelected, updateQuantity } = useCart();
   const { addToFavorites, removeFromFavorites, isFavorite, favorites } = useFavorites();
   const { items } = state;
@@ -25,24 +29,18 @@ const CartList: React.FC = () => {
   const handleFavorite = (id: string) => {
     const item = items.find(item => item.id === id);
     if (!item) return;
-
     const isInFavorites = isFavorite(item.productId, item.offerKey, item.article, item.brand);
-
     if (isInFavorites) {
-      // Находим товар в избранном по правильному ID
       const favoriteItem = favorites.find((fav: any) => {
-        // Проверяем по разным комбинациям идентификаторов
         if (item.productId && fav.productId === item.productId) return true;
         if (item.offerKey && fav.offerKey === item.offerKey) return true;
         if (fav.article === item.article && fav.brand === item.brand) return true;
         return false;
       });
-      
       if (favoriteItem) {
         removeFromFavorites(favoriteItem.id);
       }
     } else {
-      // Добавляем в избранное
       addToFavorites({
         productId: item.productId,
         offerKey: item.offerKey,
@@ -68,14 +66,17 @@ const CartList: React.FC = () => {
     updateQuantity(id, count);
   };
 
-  // Функция для форматирования цены
   const formatPrice = (price: number, currency: string = 'RUB') => {
     return `${price.toLocaleString('ru-RU')} ${currency === 'RUB' ? '₽' : currency}`;
   };
 
+  // На втором шаге показываем только выбранные товары
+  const displayItems = isSummaryStep ? items.filter(item => item.selected) : items;
+
   return (
     <div className="w-layout-vflex flex-block-48">
       <div className="w-layout-vflex product-list-cart">
+        {!isSummaryStep && (
           <div className="w-layout-hflex multi-control">
             <div className="w-layout-hflex select-all-block" onClick={handleSelectAll} style={{ cursor: 'pointer' }}>
               <div
@@ -110,17 +111,28 @@ const CartList: React.FC = () => {
               </svg>
             </div>
           </div>
-        {items.length === 0 ? (
+        )}
+        {displayItems.length === 0 ? (
           <div className="empty-cart-message" style={{ textAlign: 'center', padding: '2rem', color: '#666' }}>
             <p>Ваша корзина пуста</p>
             <p>Добавьте товары из каталога</p>
           </div>
         ) : (
-          items.map((item) => {
+          displayItems.map((item, idx) => {
             const isInFavorites = isFavorite(item.productId, item.offerKey, item.article, item.brand);
-            
             return (
-              <div className="div-block-21" key={item.id}>
+              <div
+                className={
+                  "div-block-21" +
+                  (isSummaryStep && idx === 0 ? " border-t-0" : "")
+                }
+                style={
+                  isSummaryStep && idx === 0
+                    ? { borderTop: 'none' }
+                    : undefined
+                }
+                key={item.id}
+              >
                 <CartItem
                   name={item.name}
                   description={item.description}
@@ -137,6 +149,8 @@ const CartList: React.FC = () => {
                   onComment={(comment) => handleComment(item.id, comment)}
                   onCountChange={(count) => handleCountChange(item.id, count)}
                   onRemove={() => handleRemove(item.id)}
+                  isSummaryStep={isSummaryStep}
+                  itemNumber={idx + 1}
                 />
               </div>
             );

src/components/CartList2.tsx

@@ -26,8 +26,17 @@ const CartList2: React.FC = () => {
             <p>Вернитесь на предыдущий шаг и выберите товары</p>
           </div>
         ) : (
-          selectedItems.map((item) => (
+          selectedItems.map((item, index) => (
-            <div className="div-block-21-copy" key={item.id}>
+            <div
+              className={
+                "div-block-21-copy" +
+                (index === 0 ? " border-t-0" : "")
+              }
+              style={
+                index === 0 ? { borderTop: 'none' } : undefined
+              }
+              key={item.id}
+            >
               <div className="w-layout-hflex cart-item-check">
                 <div className="w-layout-hflex info-block-search">
                   <div className="text-block-35">{item.quantity}</div>

src/components/CartSummary.tsx

@@ -5,7 +5,12 @@ import { useMutation, useQuery } from "@apollo/client";
 import { CREATE_ORDER, CREATE_PAYMENT, GET_CLIENT_ME, GET_CLIENT_DELIVERY_ADDRESSES } from "@/lib/graphql";
 import toast from "react-hot-toast";
 
-const CartSummary: React.FC = () => {
+interface CartSummaryProps {
+  step: number;
+  setStep: (step: number) => void;
+}
+
+const CartSummary: React.FC<CartSummaryProps> = ({ step, setStep }) => {
   const { state, updateDelivery, updateOrderComment, clearCart } = useCart();
   const { summary, delivery, items, orderComment } = state;
   const legalEntityDropdownRef = useRef<HTMLDivElement>(null);
@@ -16,7 +21,6 @@ const CartSummary: React.FC = () => {
   const [error, setError] = useState("");
   const [isProcessing, setIsProcessing] = useState(false);
   const [showAuthWarning, setShowAuthWarning] = useState(false);
-  const [step, setStep] = useState(1);
   
   // Новые состояния для первого шага
   const [selectedLegalEntity, setSelectedLegalEntity] = useState<string>("");
@@ -135,25 +139,20 @@ const CartSummary: React.FC = () => {
       toast.error('Пожалуйста, введите имя получателя');
       return;
     }
-    
     if (!recipientPhone.trim()) {
       toast.error('Пожалуйста, введите телефон получателя');
       return;
     }
-    
     if (!selectedDeliveryAddress.trim()) {
       toast.error('Пожалуйста, выберите адрес доставки');
       return;
     }
-
-    // Обновляем данные доставки без стоимости
     updateDelivery({ 
       address: selectedDeliveryAddress,
-      cost: 0, // Стоимость включена в товары
+      cost: 0,
       date: 'Включена в стоимость товаров',
       time: 'Способ доставки указан в адресе'
     });
-
     setStep(2);
   };
 
@@ -894,7 +893,7 @@ const CartSummary: React.FC = () => {
         {error && <div style={{ color: 'red', marginTop: 10 }}>{error}</div>}
 
         {/* Кнопка "Назад" */}
-        {/* <button 
+        <button 
           onClick={handleBackToStep1}
           style={{
             background: 'none',
@@ -908,7 +907,7 @@ const CartSummary: React.FC = () => {
           }}
         >
           ← Назад к настройкам доставки
-        </button> */}
+        </button>
 
         <div className="w-layout-hflex privacy-consent" style={{ cursor: 'pointer' }} onClick={() => setConsent((v) => !v)}>
           <div

src/components/CatalogGroupsSection.tsx

@@ -208,7 +208,7 @@ const CatalogGroupsSection: React.FC<CatalogGroupsSectionProps> = ({
         vehicleId,
         ...(ssd && ssd.trim() !== '' && { ssd })
       },
-      skip: !catalogCode || !vehicleId || catalogType !== 'quickGroups',
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || catalogType !== 'quickGroups',
       errorPolicy: 'all'
     }
   );

src/components/CategoriesSection.tsx

@@ -33,7 +33,7 @@ const CategoriesSection: React.FC<CategoriesSectionProps> = ({
         vehicleId,
         ...(ssd && ssd.trim() !== '' && { ssd })
       },
-      skip: !catalogCode || !vehicleId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null,
       errorPolicy: 'all'
     }
   );

src/components/FulltextSearchSection.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useLazyQuery } from '@apollo/client';
 import { LaximoFulltextSearchResult, LaximoFulltextDetail, LaximoOEMResult } from '@/types/laximo';
-import { SEARCH_LAXIMO_FULLTEXT, SEARCH_LAXIMO_OEM } from '@/lib/graphql';
+import { GET_LAXIMO_FULLTEXT_SEARCH, SEARCH_LAXIMO_OEM } from '@/lib/graphql/laximo';
 import PartDetailCard from './PartDetailCard';
 
 interface FulltextSearchSectionProps {
@@ -17,7 +17,7 @@ const FulltextSearchSection: React.FC<FulltextSearchSectionProps> = ({
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
   
-  const [executeSearch, { data, loading, error }] = useLazyQuery(SEARCH_LAXIMO_FULLTEXT, {
+  const [executeSearch, { data, loading, error }] = useLazyQuery(GET_LAXIMO_FULLTEXT_SEARCH, {
     errorPolicy: 'all'
   });
 

src/components/GroupDetailsSection.tsx

@@ -187,13 +187,13 @@ const GroupDetailsSection: React.FC<GroupDetailsSectionProps> = ({
   const { data, loading, error } = useQuery<{ laximoQuickDetail: LaximoQuickDetail }>(
     GET_LAXIMO_QUICK_DETAIL,
     {
-      variables: {
+      variables: quickGroupId ? {
         catalogCode,
         vehicleId,
         quickGroupId,
         ssd
-      },
+      } : undefined,
-      skip: !catalogCode || !vehicleId || !quickGroupId || !ssd,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !quickGroupId || !ssd || ssd.trim() === '',
       errorPolicy: 'all'
     }
   );

src/components/Layout.tsx

@@ -30,7 +30,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         onSuccess={handleAuthSuccess}
       />
       </header>
-      <main className="pt-[132px]">{children}</main>
+      <main className="pt-[108px] md:pt-[131px]">{children}</main>
       <MobileMenuBottomSection onOpenAuthModal={() => setAuthModalOpen(true)} />
     </>
   );

src/components/QuickGroupsSection.tsx

@@ -154,13 +154,13 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
   const { data: quickDetailData, loading: quickDetailLoading, error: quickDetailError } = useQuery<{ laximoQuickDetail: LaximoQuickDetail }>(
     GET_LAXIMO_QUICK_DETAIL,
     {
-      variables: {
+      variables: selectedGroup?.quickgroupid ? {
         catalogCode,
         vehicleId,
         quickGroupId: selectedGroup.quickgroupid,
         ssd
-      },
+      } : undefined,
-      skip: !catalogCode || !vehicleId || !selectedGroup.quickgroupid || !ssd,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !selectedGroup?.quickgroupid || !ssd || ssd.trim() === '',
       errorPolicy: 'all',
       fetchPolicy: 'cache-and-network' // Принудительно запрашиваем данные
     }
@@ -169,11 +169,28 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
   const quickDetail = quickDetailData?.laximoQuickDetail;
 
   // Добавляем отладочную информацию
-  console.log('🔍 QuickDetailSection Debug:');
+  console.log('🔍 QuickDetailSection Debug:', {
-  console.log('📊 quickDetailData:', quickDetailData);
+    catalogCode,
-  console.log('📋 quickDetail:', quickDetail);
+    vehicleId,
-  console.log('🏗️ quickDetail.units:', quickDetail?.units);
+    vehicleIdType: typeof vehicleId,
-  console.log('⚙️ Variables:', { catalogCode, vehicleId, quickGroupId: selectedGroup.quickgroupid, ssd });
+    quickGroupId: selectedGroup?.quickgroupid,
+    quickGroupIdType: typeof selectedGroup?.quickgroupid,
+    ssd: ssd ? `${ssd.substring(0, 30)}...` : 'отсутствует',
+    ssdType: typeof ssd,
+    ssdLength: ssd?.length,
+    hasData: !!quickDetailData,
+    hasQuickDetail: !!quickDetail,
+    unitsCount: quickDetail?.units?.length || 0,
+    loading: quickDetailLoading,
+    error: quickDetailError?.message,
+    skipCondition: !catalogCode || vehicleId === undefined || vehicleId === null || !selectedGroup?.quickgroupid || !ssd,
+    skipDetails: {
+      noCatalogCode: !catalogCode,
+      noVehicleId: vehicleId === undefined || vehicleId === null,
+      noQuickGroupId: !selectedGroup?.quickgroupid,
+      noSsd: !ssd
+    }
+  });
 
   // Если выбран узел для детального просмотра, показываем UnitDetailsSection
   if (selectedUnit) {
@@ -213,6 +230,20 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
   }
 
   if (quickDetailError) {
+    console.error('🚨 QuickDetailSection Error Details:', {
+      message: quickDetailError.message,
+      graphQLErrors: quickDetailError.graphQLErrors,
+      networkError: quickDetailError.networkError,
+      extraInfo: quickDetailError.extraInfo,
+      selectedGroup: selectedGroup,
+      variables: selectedGroup?.quickgroupid ? {
+        catalogCode,
+        vehicleId,
+        quickGroupId: selectedGroup.quickgroupid,
+        ssd
+      } : 'undefined (no variables sent)'
+    });
+
     return (
       <div className="space-y-4">
         <div className="flex items-center justify-between">
@@ -231,6 +262,33 @@ const QuickDetailSection: React.FC<QuickDetailSectionProps> = ({
           <h3 className="text-lg font-medium text-red-600 mb-2">Ошибка загрузки деталей</h3>
           <p className="text-red-700">Не удалось загрузить детали для группы "{selectedGroup.name}"</p>
           <p className="text-sm text-red-600 mt-2">Ошибка: {quickDetailError.message}</p>
+          
+          {/* Отладочная информация */}
+          <details className="mt-4">
+            <summary className="text-sm text-red-700 cursor-pointer hover:text-red-800">
+              🔧 Показать отладочную информацию
+            </summary>
+            <div className="mt-2 p-3 bg-red-100 rounded text-xs">
+              <div><strong>Catalog Code:</strong> {catalogCode}</div>
+              <div><strong>Vehicle ID:</strong> {vehicleId} (type: {typeof vehicleId})</div>
+              <div><strong>Quick Group ID:</strong> {selectedGroup?.quickgroupid} (type: {typeof selectedGroup?.quickgroupid})</div>
+              <div><strong>SSD:</strong> {ssd ? `${ssd.substring(0, 100)}...` : 'отсутствует'} (length: {ssd?.length})</div>
+              <div className="mt-2">
+                <strong>GraphQL Errors:</strong>
+                <pre className="mt-1 text-xs overflow-auto">
+                  {JSON.stringify(quickDetailError.graphQLErrors, null, 2)}
+                </pre>
+              </div>
+              {quickDetailError.networkError && (
+                <div className="mt-2">
+                  <strong>Network Error:</strong>
+                  <pre className="mt-1 text-xs overflow-auto">
+                    {JSON.stringify(quickDetailError.networkError, null, 2)}
+                  </pre>
+                </div>
+              )}
+            </div>
+          </details>
         </div>
       </div>
     );
@@ -464,7 +522,7 @@ const QuickGroupsSection: React.FC<QuickGroupsSectionProps> = ({
         vehicleId,
         ...(ssd && ssd.trim() !== '' && { ssd })
       },
-      skip: !catalogCode || !vehicleId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null,
       errorPolicy: 'all'
     }
   );

src/components/UnitDetailsSection.tsx

@@ -39,7 +39,7 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
         unitId,
         ssd: ssd || ''
       },
-      skip: !catalogCode || !vehicleId || !unitId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
       errorPolicy: 'all'
     }
   );
@@ -54,7 +54,7 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
         unitId,
         ssd: ssd || ''
       },
-      skip: !catalogCode || !vehicleId || !unitId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
       errorPolicy: 'all'
     }
   );
@@ -69,7 +69,7 @@ const UnitDetailsSection: React.FC<UnitDetailsSectionProps> = ({
         unitId,
         ssd: ssd || ''
       },
-      skip: !catalogCode || !vehicleId || !unitId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
       errorPolicy: 'all'
     }
   );

src/components/UnitsSection.tsx

@@ -59,7 +59,7 @@ const UnitsSection: React.FC<UnitsSectionProps> = ({
         categoryId,
         ...(ssd && ssd.trim() !== '' && { ssd })
       },
-      skip: !catalogCode || !vehicleId || !categoryId,
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !categoryId,
       errorPolicy: 'all',
       fetchPolicy: 'no-cache', // Полностью отключаем кэширование для гарантии свежих данных
       notifyOnNetworkStatusChange: true

src/components/profile/LegalEntityListBlock.tsx

@@ -110,7 +110,7 @@ const LegalEntityListBlock: React.FC<LegalEntityListBlockProps> = ({ legalEntiti
                 </div>
                 <div
                   layer-name="link_control_element"
-                  className="flex relative gap-1.5 items-center cursor-pointer hover:text-red-600"
+                  className="flex relative gap-1.5 items-center cursor-pointer group"
                   role="button"
                   tabIndex={0}
                   onClick={() => router.push('/profile-requisites')}
@@ -130,7 +130,7 @@ const LegalEntityListBlock: React.FC<LegalEntityListBlockProps> = ({ legalEntiti
                   </div>
                   <div
                     layer-name="Редактировать"
-                    className="text-sm leading-5 text-gray-600"
+                    className="text-sm leading-5 text-gray-600 group-hover:text-red-600"
                   >
                     Реквизиты компании
                   </div>
@@ -141,8 +141,9 @@ const LegalEntityListBlock: React.FC<LegalEntityListBlockProps> = ({ legalEntiti
                 <div
                   role="button"
                   tabIndex={0}
-                  className="flex relative gap-1.5 items-center cursor-pointer hover:text-red-600"
+                  className="flex relative gap-1.5 items-center cursor-pointer group"
                   onClick={() => onEdit && onEdit(entity)}
+                  aria-label="Редактировать юридическое лицо"
                 >
                   <div className="relative h-4 w-[18px]">
                     <Image
@@ -153,26 +154,37 @@ const LegalEntityListBlock: React.FC<LegalEntityListBlockProps> = ({ legalEntiti
                       className="absolute left-0.5 top-0"
                     />
                   </div>
-                  <div className="text-sm leading-5 text-gray-600">
+                  <div className="text-sm leading-5 text-gray-600 group-hover:text-red-600">
                     Редактировать
                   </div>
                 </div>
                 <div
                   role="button"
                   tabIndex={0}
-                  className="flex relative gap-1.5 items-center cursor-pointer hover:text-red-600"
+                  className="flex relative gap-1.5 items-center cursor-pointer group"
+                  aria-label="Удалить юридическое лицо"
                   onClick={() => handleDelete(entity.id, entity.shortName)}
+                  onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleDelete(entity.id, entity.shortName)}
+                  style={{ display: 'inline-flex', cursor: 'pointer', transition: 'color 0.2s' }}
+                  onMouseEnter={e => {
+                    const path = e.currentTarget.querySelector('path');
+                    if (path) path.setAttribute('fill', '#ec1c24');
+                  }}
+                  onMouseLeave={e => {
+                    const path = e.currentTarget.querySelector('path');
+                    if (path) path.setAttribute('fill', '#D0D0D0');
+                  }}
                 >
-                  <div className="relative h-4 w-[18px]">
+                  <div className="relative h-4 w-4">
-                    <Image
+                    <svg width="16" height="16" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      src="/images/delete.svg"
+                      <path
-                      alt="Удалить"
+                        d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
-                      width={16}
+                        fill="#D0D0D0"
-                      height={16}
+                        style={{ transition: 'fill 0.2s' }}
-                      className="absolute left-0.5 top-0"
                       />
+                    </svg>
                   </div>
-                  <div className="text-sm leading-5 text-gray-600">
+                  <div className="text-sm leading-5 text-gray-600 group-hover:text-red-600">
                     Удалить
                   </div>
                 </div>

src/components/profile/ProfileAddressCard.tsx

@@ -52,14 +52,50 @@ const ProfileAddressCard: React.FC<ProfileAddressCardProps> = ({
 </div>
         </div>
       )}
-      <div className="flex justify-between items-start self-stretch">
+      <div className="flex justify-between items-start self-stretch max-sm:flex-row max-sm:gap-4 max-sm:justify-start max-sm:items-center">
-        <div className="flex gap-1.5 items-center cursor-pointer group" onClick={onEdit}>
+        <div
-          <img src="/images/edit.svg" alt="edit" width={18} height={18} className="mr-1.5 group-hover:filter-red" />
+          className="flex gap-1.5 items-center cursor-pointer group"
-          <div className="relative text-sm leading-5 text-gray-600">Редактировать</div>
+          onClick={onEdit}
+          role="button"
+          tabIndex={0}
+          aria-label="Редактировать адрес"
+          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onEdit && onEdit()}
+          onMouseEnter={e => {
+            const svg = (e.currentTarget as HTMLElement).querySelector('img');
+            if (svg) (svg as HTMLImageElement).style.filter = 'invert(32%) sepia(97%) saturate(7490%) hue-rotate(355deg) brightness(97%) contrast(108%)';
+          }}
+          onMouseLeave={e => {
+            const svg = (e.currentTarget as HTMLElement).querySelector('img');
+            if (svg) (svg as HTMLImageElement).style.filter = '';
+          }}
+        >
+          <img src="/images/edit.svg" alt="edit" width={18} height={18} className="mr-1.5" />
+          <div className="relative text-sm leading-5 text-gray-600 group-hover:text-red-600 max-sm:hidden">Редактировать</div>
         </div>
-        <div className="flex gap-1.5 items-center cursor-pointer group" onClick={onDelete}>
+        <div
-          <img src="/images/delete.svg" alt="delete" width={18} height={18} className="mr-1.5 group-hover:filter-red" />
+          className="flex gap-1.5 items-center cursor-pointer group"
-          <div className="relative text-sm leading-5 text-gray-600">Удалить</div>
+          role="button"
+          tabIndex={0}
+          aria-label="Удалить адрес"
+          onClick={onDelete}
+          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onDelete && onDelete()}
+          onMouseEnter={e => {
+            const path = e.currentTarget.querySelector('path');
+            if (path) path.setAttribute('fill', '#ec1c24');
+          }}
+          onMouseLeave={e => {
+            const path = e.currentTarget.querySelector('path');
+            if (path) path.setAttribute('fill', '#D0D0D0');
+          }}
+        >
+          <svg width="18" height="18" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
+              fill="#D0D0D0"
+              style={{ transition: 'fill 0.2s' }}
+            />
+          </svg>
+          <div className="relative text-sm leading-5 text-gray-600 group-hover:text-red-600 max-sm:hidden">Удалить</div>
         </div>
       </div>
       {onSelectMain && (

src/components/profile/ProfileBalanceCard.tsx

@@ -89,11 +89,11 @@ const ProfileBalanceCard: React.FC<ProfileBalanceCardProps> = ({
               {balance}
             </div>
           </div>
-          <div className="flex flex-row gap-5 items-end mt-5 w-full max-sm:flex-col">
+          <div className="flex flex-row gap-5 items-end mt-5 w-full max-sm:flex-col max-sm:items-start">
             <div className="flex flex-col flex-1 shrink basis-0">
               <div className="flex flex-col min-w-[160px]">
                 <div className="text-sm leading-snug text-gray-600">Лимит отсрочки</div>
-                <div className="flex flex-col self-start mt-2">
+                <div className="flex flex-col mt-2">
                   <div className="text-lg font-medium leading-none text-gray-950">{limit}</div>
                   <div className={`text-sm leading-snug ${isOverLimit ? 'text-red-600' : 'text-gray-600'}`}>
                     {limitLeft.includes('Не установлен') ? limitLeft : `Осталось ${limitLeft}`}

src/components/profile/ProfileGarageMain.tsx

@@ -179,7 +179,7 @@ const ProfileGarageMain = () => {
 
         {!vehiclesLoading && filteredVehicles.map((vehicle) => (
           <div key={vehicle.id} className="mt-8">
-            <div className="flex flex-col justify-center pr-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full">
+            <div className="flex flex-col justify-center px-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full">
               <div className="flex flex-wrap gap-8 items-center w-full max-md:max-w-full">
                 <div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2">
                   <div className="self-stretch my-auto text-xl font-bold leading-none text-gray-950">
@@ -203,15 +203,29 @@ const ProfileGarageMain = () => {
                 <div className="flex gap-5 items-center self-stretch pr-2.5 my-auto text-sm leading-snug text-gray-600 whitespace-nowrap">
                   <button 
                     type="button" 
-                    className="flex gap-1.5 items-center self-stretch my-auto cursor-pointer text-sm leading-snug text-gray-600 hover:text-red-600 transition-colors"
+                    className="flex gap-1.5 items-center self-stretch my-auto text-sm leading-snug text-gray-600 cursor-pointer bg-transparent group"
+                    style={{ outline: 'none' }}
+                    aria-label="Удалить автомобиль"
+                    tabIndex={0}
                     onClick={() => handleDeleteVehicle(vehicle.id)}
+                    onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleDeleteVehicle(vehicle.id)}
+                    onMouseEnter={e => {
+                      const path = e.currentTarget.querySelector('path');
+                      if (path) path.setAttribute('fill', '#ec1c24');
+                    }}
+                    onMouseLeave={e => {
+                      const path = e.currentTarget.querySelector('path');
+                      if (path) path.setAttribute('fill', '#D0D0D0');
+                    }}
                   >
-                    <img
+                    <svg width="16" height="16" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      loading="lazy"
+                      <path
-                      src="/images/delete.svg"
+                        d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
-                      className="object-contain shrink-0 self-stretch my-auto aspect-[1.12] w-[18px]"
+                        fill="#D0D0D0"
+                        style={{ transition: 'fill 0.2s' }}
                       />
-                    <span className="self-stretch my-auto text-gray-600">
+                    </svg>
+                    <span className="self-stretch my-auto text-gray-600 group-hover:text-red-600">
                       Удалить
                     </span>
                   </button>
@@ -418,15 +432,29 @@ const ProfileGarageMain = () => {
                     </div>
                     <button 
                       type="button" 
-                      className="flex gap-1.5 items-center self-stretch my-auto text-sm leading-snug text-gray-600 cursor-pointer bg-transparent hover:text-red-600 transition-colors"
+                      className="flex gap-1.5 items-center self-stretch my-auto text-sm leading-snug text-gray-600 cursor-pointer bg-transparent group"
+                      style={{ outline: 'none' }}
+                      aria-label="Удалить из истории поиска"
+                      tabIndex={0}
                       onClick={() => handleDeleteFromHistory(historyItem.id)}
+                      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleDeleteFromHistory(historyItem.id)}
+                      onMouseEnter={e => {
+                        const path = e.currentTarget.querySelector('path');
+                        if (path) path.setAttribute('fill', '#ec1c24');
+                      }}
+                      onMouseLeave={e => {
+                        const path = e.currentTarget.querySelector('path');
+                        if (path) path.setAttribute('fill', '#D0D0D0');
+                      }}
                     >
-                      <img
+                      <svg width="16" height="16" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        loading="lazy"
+                        <path
-                        src="/images/delete.svg"
+                          d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
-                        className="object-contain shrink-0 self-stretch my-auto aspect-[1.12] w-[18px]"
+                          fill="#D0D0D0"
+                          style={{ transition: 'fill 0.2s' }}
                         />
-                      <span className="self-stretch my-auto text-gray-600">
+                      </svg>
+                      <span className="self-stretch my-auto text-gray-600 group-hover:text-red-600">
                         Удалить
                       </span>
                     </button>

src/components/profile/ProfileHistoryItem.tsx

@@ -80,24 +80,25 @@ const ProfileHistoryItem: React.FC<ProfileHistoryItemProps> = ({
             <div className="w-16 text-center max-md:w-full">
               <button
                 onClick={handleDeleteClick}
-                className="p-2 text-red-500 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors group"
+                className="flex items-center p-2 group"
                 title="Удалить из истории"
                 aria-label="Удалить из истории"
+                tabIndex={0}
+                onMouseEnter={e => {
+                  const path = e.currentTarget.querySelector('path');
+                  if (path) path.setAttribute('fill', '#ec1c24');
+                }}
+                onMouseLeave={e => {
+                  const path = e.currentTarget.querySelector('path');
+                  if (path) path.setAttribute('fill', '#D0D0D0');
+                }}
                 >
-                <svg
+                <svg width="16" height="16" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  width="16"
+                  <path
-                  height="16"
+                    d="M4.625 17.5C4.14375 17.5 3.73192 17.3261 3.3895 16.9782C3.04708 16.6304 2.87558 16.2117 2.875 15.7222V4.16667H2V2.38889H6.375V1.5H11.625V2.38889H16V4.16667H15.125V15.7222C15.125 16.2111 14.9538 16.6298 14.6114 16.9782C14.269 17.3267 13.8568 17.5006 13.375 17.5H4.625ZM6.375 13.9444H8.125V5.94444H6.375V13.9444ZM9.875 13.9444H11.625V5.94444H9.875V13.9444Z"
-                  viewBox="0 0 24 24"
+                    fill="#D0D0D0"
-                  fill="none"
+                    style={{ transition: 'fill 0.2s' }}
-                  stroke="currentColor"
+                  />
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="transition-colors"
-                >
-                  <path d="M3 6h18" className="group-hover:stroke-[#ec1c24]" />
-                  <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" className="group-hover:stroke-[#ec1c24]" />
-                  <path d="M8 6V4c0-1 1-2 2-2h4c-1 0 2 1 2 2v2" className="group-hover:stroke-[#ec1c24]" />
                 </svg>
               </button>
             </div>

src/components/profile/ProfileHistoryMain.tsx

@@ -272,7 +272,7 @@ const ProfileHistoryMain = () => {
 
   return (
     <div className="flex flex-col min-h-[526px]">
-      <div className="flex flex-wrap gap-5 items-center px-8 py-3 w-full leading-snug text-gray-400 whitespace-nowrap bg-white rounded-lg max-md:px-5 max-md:max-w-full max-md:flex-col">
+      <div className="flex gap-5 items-center px-8 py-3 w-full leading-snug text-gray-400 whitespace-nowrap bg-white rounded-lg max-md:px-5 max-md:max-w-full">
         <div className="flex-1 shrink self-stretch my-auto text-gray-400 basis-0 text-ellipsis max-md:max-w-full max-md:w-full">
           <SearchInput 
             value={search} 
@@ -280,7 +280,7 @@ const ProfileHistoryMain = () => {
             placeholder="Поиск в истории..."
           />
         </div>
-        <div className="flex gap-2">
+        <div className="flex gap-2 max-sm:hidden">
           {(selectedManufacturer !== "Все" || search.trim() || activeTab !== "Все") && (
             <button
               onClick={() => {

src/components/profile/ProfileHistoryTabs.tsx

@@ -89,7 +89,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
         </div>
       ))}
       <div
-        className="relative w-[240px] max-w-full"
+        className="relative w-[240px] max-w-full max-sm:w-full"
         ref={dropdownRef}
         tabIndex={0}
       >

src/components/profile/ProfileSettingsActionsBlock.tsx

@@ -10,7 +10,7 @@ const ProfileSettingsActionsBlock: React.FC<ProfileSettingsActionsBlockProps> =
       Сохранить изменения
     </div>
     <div className="gap-2.5 self-stretch px-5 py-4 my-auto rounded-xl border border-red-600 min-h-[50px] min-w-[240px] cursor-pointer bg-white text-gray-950" onClick={onAddLegalEntity}>
-      Добавить юридическое лицо
+      Добавить юр лицо
     </div>
   </div>
 );

src/components/vin/KnotIn.tsx

@@ -1,4 +1,27 @@
-import React from "react";
+import React, { useRef, useState } from "react";
+import { useQuery } from '@apollo/client';
+import { useRouter } from 'next/router';
+import { GET_LAXIMO_UNIT_INFO, GET_LAXIMO_UNIT_IMAGE_MAP } from '@/lib/graphql';
+import BrandSelectionModal from '../BrandSelectionModal';
+
+interface KnotInProps {
+  catalogCode: string;
+  vehicleId: string;
+  ssd?: string;
+  unitId: string;
+  unitName?: string;
+  parts?: Array<{
+    detailid?: string;
+    codeonimage?: string | number;
+    oem?: string;
+    name?: string;
+    price?: string | number;
+    brand?: string;
+    availability?: string;
+    note?: string;
+    attributes?: Array<{ key: string; name?: string; value: string }>;
+  }>;
+}
 
 // Функция для корректного формирования URL изображения
 const getImageUrl = (baseUrl: string, size: string) => {
@@ -11,26 +34,139 @@ const getImageUrl = (baseUrl: string, size: string) => {
     .replace('%size%', size);
 };
 
-const KnotIn = ({ node }: { node: any }) => {
+const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, unitName, parts }) => {
-  if (!node) return null;
+  const imgRef = useRef<HTMLImageElement>(null);
-  let imageUrl = '';
+  const [imageScale, setImageScale] = useState({ x: 1, y: 1 });
-  if (node.imageurl) {
+  const selectedImageSize = 'source';
-    imageUrl = getImageUrl(node.imageurl, '250');
+  const [isBrandModalOpen, setIsBrandModalOpen] = useState(false);
-  } else if (node.largeimageurl) {
+  const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null);
-    imageUrl = node.largeimageurl;
+  const router = useRouter();
+
+  // Получаем инфо об узле (для картинки)
+  const { data: unitInfoData, loading: unitInfoLoading, error: unitInfoError } = useQuery(
+    GET_LAXIMO_UNIT_INFO,
+    {
+      variables: { catalogCode, vehicleId, unitId, ssd: ssd || '' },
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
+      errorPolicy: 'all',
     }
+  );
+  // Получаем карту координат
+  const { data: imageMapData, loading: imageMapLoading, error: imageMapError } = useQuery(
+    GET_LAXIMO_UNIT_IMAGE_MAP,
+    {
+      variables: { catalogCode, vehicleId, unitId, ssd: ssd || '' },
+      skip: !catalogCode || vehicleId === undefined || vehicleId === null || !unitId,
+      errorPolicy: 'all',
+    }
+  );
+
+  const unitInfo = unitInfoData?.laximoUnitInfo;
+  const coordinates = imageMapData?.laximoUnitImageMap?.coordinates || [];
+  const imageUrl = unitInfo?.imageurl ? getImageUrl(unitInfo.imageurl, selectedImageSize) : '';
+
+  // Масштабируем точки после загрузки картинки
+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const img = e.currentTarget;
+    if (!img.naturalWidth || !img.naturalHeight) return;
+    setImageScale({
+      x: img.offsetWidth / img.naturalWidth,
+      y: img.offsetHeight / img.naturalHeight,
+    });
+  };
+
+  // Клик по точке: найти part по codeonimage/detailid и открыть BrandSelectionModal
+  const handlePointClick = (codeonimage: string | number) => {
+    if (!parts) return;
+    console.log('Клик по точке:', codeonimage, 'Все детали:', parts);
+    const part = parts.find(
+      (p) =>
+        (p.codeonimage && p.codeonimage.toString() === codeonimage.toString()) ||
+        (p.detailid && p.detailid.toString() === codeonimage.toString())
+    );
+    console.log('Найдена деталь для точки:', part);
+    if (part?.oem) {
+      setSelectedDetail({ oem: part.oem, name: part.name || '' });
+      setIsBrandModalOpen(true);
+    } else {
+      console.warn('Нет артикула (oem) для выбранной точки:', codeonimage, part);
+    }
+  };
+
+  // Для отладки: вывести детали и координаты
+  React.useEffect(() => {
+    console.log('KnotIn parts:', parts);
+    console.log('KnotIn coordinates:', coordinates);
+  }, [parts, coordinates]);
+
+  if (unitInfoLoading || imageMapLoading) {
+    return <div className="text-center py-8 text-gray-500">Загружаем схему узла...</div>;
+  }
+  if (unitInfoError) {
+    return <div className="text-center py-8 text-red-600">Ошибка загрузки схемы: {unitInfoError.message}</div>;
+  }
+  if (!imageUrl) {
+    return <div className="text-center py-8 text-gray-400">Нет изображения для этого узла</div>;
+  }
+
   return (
-    <div className="knotin">
+    <>
-      {imageUrl ? (
+      <div className="relative inline-block">
-        <img src={imageUrl} loading="lazy" alt={node.name || "Изображение узла"} className="image-26" />
+        {/* ВРЕМЕННО: выводим количество точек для быстрой проверки */}
-      ) : (
+        <div style={{ position: 'absolute', top: 4, left: 4, zIndex: 20, background: 'rgba(255,0,0,0.1)', color: '#c00', fontWeight: 700, fontSize: 14, padding: '2px 8px', borderRadius: 6 }}>
-        <div style={{ width: 200, height: 200, background: '#eee', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          {coordinates.length} точек
-          Нет изображения
         </div>
-      )}
+        <img
-      {/* <div style={{ marginTop: 8, fontWeight: 500 }}>{node.name}</div> */}
+          ref={imgRef}
+          src={imageUrl}
+          loading="lazy"
+          alt={unitName || unitInfo?.name || "Изображение узла"}
+          onLoad={handleImageLoad}
+          className="max-w-full h-auto mx-auto rounded"
+          style={{ maxWidth: 400, display: 'block' }}
+        />
+        {/* Точки/области */}
+        {coordinates.map((coord: any, idx: number) => {
+          const scaledX = coord.x * imageScale.x;
+          const scaledY = coord.y * imageScale.y;
+          const scaledWidth = coord.width * imageScale.x;
+          const scaledHeight = coord.height * imageScale.y;
+          return (
+            <div
+              key={`coord-${unitId}-${idx}-${coord.x}-${coord.y}`}
+              tabIndex={0}
+              aria-label={`Деталь ${coord.codeonimage}`}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') handlePointClick(coord.codeonimage);
+              }}
+              className="absolute flex items-center justify-center border-2 border-red-600 bg-white rounded-full cursor-pointer"
+              style={{
+                left: scaledX,
+                top: scaledY,
+                width: scaledWidth,
+                height: scaledHeight,
+                borderRadius: '50%',
+                pointerEvents: 'auto',
+              }}
+              title={coord.codeonimage}
+              onClick={() => handlePointClick(coord.codeonimage)}
+            >
+              <span className="flex items-center justify-center w-full h-full text-black text-sm font-bold select-none pointer-events-none">
+                {coord.codeonimage}
+              </span>
             </div>
           );
+        })}
+    </div>
+      {/* Модалка выбора бренда */}
+      <BrandSelectionModal
+        isOpen={isBrandModalOpen}
+        onClose={() => setIsBrandModalOpen(false)}
+        articleNumber={selectedDetail?.oem || ''}
+        detailName={selectedDetail?.name || ''}
+      />
+    </>
+  );
 };
 
 export default KnotIn; 

src/components/vin/KnotParts.tsx

@@ -1,5 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { useRouter } from "next/router";
+import BrandSelectionModal from '../BrandSelectionModal';
 
 interface KnotPartsProps {
   parts: Array<{
@@ -13,14 +14,30 @@ interface KnotPartsProps {
     note?: string;
     attributes?: Array<{ key: string; name?: string; value: string }>;
   }>;
+  selectedCodeOnImage?: string | number;
 }
 
-const KnotParts: React.FC<KnotPartsProps> = ({ parts }) => {
+const KnotParts: React.FC<KnotPartsProps> = ({ parts, selectedCodeOnImage }) => {
-  const router = useRouter();
+  const [isBrandModalOpen, setIsBrandModalOpen] = useState(false);
+  const [selectedDetail, setSelectedDetail] = useState<{ oem: string; name: string } | null>(null);
+
+  const handlePriceClick = (part: any) => {
+    if (part.oem) {
+      setSelectedDetail({ oem: part.oem, name: part.name || '' });
+      setIsBrandModalOpen(true);
+    }
+  };
+
   return (
+    <>
       <div className="knot-parts">
-      {parts.map((part, idx) => (
+        {parts.map((part, idx) => {
-        <div className="w-layout-hflex knotlistitem" key={part.detailid || idx}>
+          const isSelected = part.codeonimage && part.codeonimage === selectedCodeOnImage;
+          return (
+            <div
+              className={`w-layout-hflex knotlistitem border rounded transition-colors duration-150 ${isSelected ? 'bg-yellow-100 border-yellow-400' : 'border-transparent'}`}
+              key={part.detailid || idx}
+            >
               <div className="w-layout-hflex flex-block-116">
                 <div className="nuberlist">{part.codeonimage || idx + 1}</div>
                 <div className="oemnuber">{part.oem}</div>
@@ -29,11 +46,7 @@ const KnotParts: React.FC<KnotPartsProps> = ({ parts }) => {
               <div className="w-layout-hflex flex-block-117">
                 <button
                   className="button-3 w-button"
-              onClick={() => {
+                  onClick={() => handlePriceClick(part)}
-                if (part.oem) {
-                  router.push(`/search?q=${encodeURIComponent(part.oem)}&mode=parts`);
-                }
-              }}
                 >
                   Цена
                 </button>
@@ -44,8 +57,16 @@ const KnotParts: React.FC<KnotPartsProps> = ({ parts }) => {
                 </div>
               </div>
             </div>
-      ))}
+          );
+        })}
       </div>
+      <BrandSelectionModal
+        isOpen={isBrandModalOpen}
+        onClose={() => setIsBrandModalOpen(false)}
+        articleNumber={selectedDetail?.oem || ''}
+        detailName={selectedDetail?.name || ''}
+      />
+    </>
   );
 };
 

src/components/vin/VinCategory.tsx

@@ -12,7 +12,7 @@ interface VinCategoryProps {
 const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect }) => {
   const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
     variables: { catalogCode, vehicleId, ssd },
-    skip: !catalogCode || !vehicleId,
+    skip: !catalogCode || vehicleId === undefined || vehicleId === null,
     errorPolicy: "all",
   });
   const categories = categoriesData?.laximoCategories || [];

src/components/vin/VinLeftbar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useLazyQuery, useQuery } from '@apollo/client';
-import { SEARCH_LAXIMO_FULLTEXT, GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_QUICK_DETAIL } from '@/lib/graphql/laximo';
+import { GET_LAXIMO_FULLTEXT_SEARCH, GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS, GET_LAXIMO_QUICK_GROUPS, GET_LAXIMO_QUICK_DETAIL } from '@/lib/graphql/laximo';
 import VinPartCard from './VinPartCard';
 
 interface VinLeftbarProps {
@@ -21,11 +21,11 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
   const [openIndex, setOpenIndex] = useState<number | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [activeTab, setActiveTab] = useState<'uzly' | 'manufacturer'>('uzly');
-  const [executeSearch, { data, loading, error }] = useLazyQuery(SEARCH_LAXIMO_FULLTEXT, { errorPolicy: 'all' });
+  const [executeSearch, { data, loading, error }] = useLazyQuery(GET_LAXIMO_FULLTEXT_SEARCH, { errorPolicy: 'all' });
 
   const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
     variables: { catalogCode, vehicleId, ssd },
-    skip: !catalogCode || !vehicleId,
+    skip: !catalogCode || vehicleId === undefined || vehicleId === null,
     errorPolicy: 'all'
   });
   const categories = categoriesData?.laximoCategories || [];
@@ -88,7 +88,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
   }, [searchResults, searchQuery, onSearchResults]);
 
   // --- Новый блок: вычисляем доступность поиска ---
-  const isSearchAvailable = !!catalogCode && !!vehicleId && !!ssd && ssd.trim() !== '';
+  const isSearchAvailable = !!catalogCode && vehicleId !== undefined && vehicleId !== null && !!ssd && ssd.trim() !== '';
   const showWarning = !isSearchAvailable;
   const showError = !!error && isSearchAvailable && searchQuery.trim();
   const showNotFound = isSearchAvailable && searchQuery.trim() && !loading && data && searchResults && searchResults.details && searchResults.details.length === 0;
@@ -98,7 +98,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
   const [selectedQuickGroup, setSelectedQuickGroup] = useState<any | null>(null);
   const { data: quickGroupsData, loading: quickGroupsLoading, error: quickGroupsError } = useQuery(GET_LAXIMO_QUICK_GROUPS, {
     variables: { catalogCode, vehicleId, ssd },
-    skip: !catalogCode || !vehicleId || activeTab !== 'manufacturer',
+    skip: !catalogCode || vehicleId === undefined || vehicleId === null || activeTab !== 'manufacturer',
     errorPolicy: 'all'
   });
   const quickGroups = quickGroupsData?.laximoQuickGroups || [];
@@ -136,12 +136,30 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
   const skipQuickDetail =
     !selectedQuickGroup ||
     !catalogCode ||
-    !vehicleId ||
+    vehicleId === undefined ||
-    !selectedQuickGroup.quickgroupid ||
+    vehicleId === null ||
-    !ssd;
+    !selectedQuickGroup?.quickgroupid ||
+    !ssd ||
+    ssd.trim() === '';
+
+  console.log('QuickDetail QUERY VARS', {
+    catalogCode,
+    vehicleId,
+    quickGroupId: selectedQuickGroup?.quickgroupid,
+    ssd: ssd ? `${ssd.substring(0, 30)}...` : 'отсутствует'
+  });
+
+  console.log('QuickDetail SKIP CONDITIONS', {
+    hasSelectedQuickGroup: !!selectedQuickGroup,
+    hasCatalogCode: !!catalogCode,
+    hasVehicleId: vehicleId !== undefined && vehicleId !== null,
+    hasQuickGroupId: !!selectedQuickGroup?.quickgroupid,
+    hasSsd: !!ssd && ssd.trim() !== '',
+    skipQuickDetail
+  });
 
   const { data: quickDetailData, loading: quickDetailLoading, error: quickDetailError } = useQuery(GET_LAXIMO_QUICK_DETAIL, {
-    variables: selectedQuickGroup ? {
+    variables: selectedQuickGroup?.quickgroupid && !skipQuickDetail ? {
       catalogCode,
       vehicleId,
       quickGroupId: selectedQuickGroup.quickgroupid,
@@ -180,12 +198,42 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
     </div>
   );
 
+  // === Полнотекстовый поиск деталей (аналогично FulltextSearchSection) ===
+  const [fulltextQuery, setFulltextQuery] = useState('');
+  const [executeFulltextSearch, { data: fulltextData, loading: fulltextLoading, error: fulltextError }] = useLazyQuery(SEARCH_LAXIMO_FULLTEXT, { errorPolicy: 'all' });
+
+  const handleFulltextSearch = () => {
+    if (!fulltextQuery.trim()) return;
+    if (!ssd || ssd.trim() === '') {
+      console.error('SSD обязателен для поиска по названию');
+      return;
+    }
+    executeFulltextSearch({
+      variables: {
+        catalogCode,
+        vehicleId,
+        searchText: fulltextQuery.trim(),
+        ssd
+      }
+    });
+  };
+
+  const handleFulltextKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleFulltextSearch();
+    }
+  };
+
+  const fulltextResults = fulltextData?.laximoFulltextSearch?.details || [];
+
   return (
     <div className="w-layout-vflex vinleftbar">
+      {/* === Форма полнотекстового поиска === */}
       <div className="div-block-2">
         <div className="form-block w-form">
-          <form id="vin-form-search" name="vin-form-search" data-name="vin-form-search" action="#" method="post" className="form">
+          <form id="vin-form-search" name="vin-form-search" data-name="vin-form-search" action="#" method="post" className="form" onSubmit={e => { e.preventDefault(); handleFulltextSearch(); }}>
-            <a href="#" className="link-block-3 w-inline-block" onClick={e => { e.preventDefault(); if (!ssd || ssd.trim() === '') { return; } handleSearch(); }}>
+            <a href="#" className="link-block-3 w-inline-block" onClick={e => { e.preventDefault(); if (!ssd || ssd.trim() === '') { return; } handleFulltextSearch(); }}>
               <div className="code-embed-6 w-embed">
                 {/* SVG */}
                 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -203,14 +251,95 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
               type="text"
               id="VinSearchInput"
               required
-              value={searchQuery}
+              value={fulltextQuery}
-              onChange={e => setSearchQuery(e.target.value)}
+              onChange={e => setFulltextQuery(e.target.value)}
-              onKeyDown={handleKeyDown}
+              onKeyDown={handleFulltextKeyDown}
-              disabled={loading}
+              disabled={fulltextLoading}
             />
+            <button
+              type="button"
+              onClick={handleFulltextSearch}
+              disabled={!fulltextQuery.trim() || fulltextLoading || !ssd || ssd.trim() === ''}
+              className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors ml-2"
+            >
+              {fulltextLoading ? 'Поиск...' : 'Найти'}
+            </button>
           </form>
-          {/* Варианты отображения: предупреждение, ошибка, подсказки, результаты */}
+          {(!ssd || ssd.trim() === '') && (
-
+            <div className="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded-lg">
+              <div className="flex">
+                <svg className="h-5 w-5 text-yellow-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+                  <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+                </svg>
+                <div className="ml-3">
+                  <h3 className="text-sm font-medium text-yellow-800">
+                    Полнотекстовый поиск недоступен
+                  </h3>
+                  <p className="text-sm text-yellow-700 mt-1">
+                    Для поиска по названию деталей необходимо сначала выбрать конкретный автомобиль через поиск по VIN или мастер подбора.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+          {fulltextError && (
+            <div className="bg-red-50 border border-red-200 rounded-lg p-4 mt-3">
+              <div className="flex">
+                <div className="flex-shrink-0">
+                  <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                  </svg>
+                </div>
+                <div className="ml-3">
+                  <h3 className="text-sm font-medium text-red-800">
+                    Ошибка поиска
+                  </h3>
+                  <div className="mt-2 text-sm text-red-700">
+                    <p>{fulltextError.message}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+          {fulltextResults && (
+            <div className="bg-white border border-gray-200 rounded-lg overflow-hidden mt-3">
+              <div className="px-6 py-4 bg-gray-50 border-b border-gray-200">
+                <h3 className="text-lg font-medium text-gray-900">
+                  Результаты поиска: "{fulltextQuery}"
+                </h3>
+                <p className="text-sm text-gray-600 mt-1">
+                  Найдено {fulltextResults.length} деталей
+                </p>
+              </div>
+              {fulltextResults.length > 0 ? (
+                <div className="space-y-4 p-6">
+                  <div className="text-sm text-blue-700 bg-blue-50 border border-blue-200 rounded-lg p-3">
+                    💡 Нажмите на карточку детали для поиска предложений и цен. Используйте кнопку "Показать применимость" для просмотра применения в автомобиле.
+                  </div>
+                  {fulltextResults.map((detail: any, index: number) => (
+                    <VinPartCard
+                      key={`${detail.oem}-${index}`}
+                      n={index + 1}
+                      name={detail.name}
+                      oem={detail.oem}
+                    />
+                  ))}
+                </div>
+              ) : (
+                <div className="px-6 py-8 text-center">
+                  <svg className="w-12 h-12 mx-auto text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.172 16.172a4 4 0 015.656 0M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                  </svg>
+                  <p className="text-gray-600">
+                    По запросу "{fulltextQuery}" ничего не найдено
+                  </p>
+                  <p className="text-sm text-gray-500 mt-1">
+                    Попробуйте изменить поисковый запрос
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
       <div className="w-layout-vflex flex-block-113">

src/lib/graphql/laximo.ts

@@ -180,23 +180,6 @@ export const SEARCH_LAXIMO_OEM = gql`
   }
 `;
 
-export const SEARCH_LAXIMO_FULLTEXT = gql`
-  query SearchLaximoFulltext($catalogCode: String!, $vehicleId: String!, $searchText: String!, $ssd: String!) {
-    laximoFulltextSearch(catalogCode: $catalogCode, vehicleId: $vehicleId, searchText: $searchText, ssd: $ssd) {
-      details {
-        codeonimage
-        code
-        name
-        note
-        filter
-        oem
-        price
-        availability
-      }
-    }
-  }
-`;
-
 export const GET_LAXIMO_FULLTEXT_SEARCH = gql`
   query GetLaximoFulltextSearch($catalogCode: String!, $vehicleId: String!, $searchQuery: String!, $ssd: String!) {
     laximoFulltextSearch(catalogCode: $catalogCode, vehicleId: $vehicleId, searchQuery: $searchQuery, ssd: $ssd) {
@@ -208,6 +191,10 @@ export const GET_LAXIMO_FULLTEXT_SEARCH = gql`
         parttype
         filter
         note
+        codeonimage
+        code
+        price
+        availability
         attributes {
           key
           name

src/pages/cart.tsx

@@ -7,8 +7,10 @@ import CartSummary from "@/components/CartSummary";
 import CartRecommended from "../components/CartRecommended";
 import CatalogSubscribe from "@/components/CatalogSubscribe";
 import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
+import React, { useState } from "react";
 
 export default function CartPage() {
+  const [step, setStep] = useState(1);
 
   return (
     <><Head>
@@ -26,8 +28,8 @@ export default function CartPage() {
         <div className="w-layout-blockcontainer container w-container">
           <div className="w-layout-vflex cart-list">
             <div className="w-layout-hflex core-product-card">
-                <CartList />
+                <CartList isSummaryStep={step === 2} />
-                <CartSummary />
+                <CartSummary step={step} setStep={setStep} />
               </div>
             <CartRecommended />
           </div>

src/pages/profile-acts.tsx

@@ -58,7 +58,7 @@ const ProfileActsPage = () => {
     );
   }
   return (
-    <div className="page-wrapper">
+    <>
       <Head>
         <title>ProfileActs</title>
         <meta content="ProfileActs" property="og:title" />
@@ -78,7 +78,7 @@ const ProfileActsPage = () => {
       </section>
       <MobileMenuBottomSection />
       <Footer />
-    </div>
+    </>
   );
 };
 

src/pages/vehicle-search/[brand]/[vehicleId].tsx

@@ -123,7 +123,7 @@ const VehicleDetailsPage = () => {
         ...(finalSsd && { ssd: finalSsd }),
         localized: true
       },
-      skip: !brand || !vehicleId,
+      skip: !brand || vehicleId === undefined || vehicleId === null,
       errorPolicy: 'all'
     }
   );
@@ -194,8 +194,9 @@ const VehicleDetailsPage = () => {
     );
   }
 
-  // Если vehicleId невалидный (например, '0'), показываем предупреждение и не рендерим поиск
+  // Если vehicleId отсутствует или пустой, показываем предупреждение
-  if (!vehicleId || vehicleId === '0') {
+  // Важно: vehicleId может быть '0' для некоторых автомобилей, найденных по VIN
+  if (!vehicleId || vehicleId === '') {
     return (
       <main className="min-h-screen bg-yellow-50 flex items-center justify-center">
         <div className="text-center">
@@ -214,7 +215,8 @@ const VehicleDetailsPage = () => {
 
   // Гарантируем, что vehicleId — строка
   const vehicleIdStr = Array.isArray(vehicleId) ? (vehicleId[0] || '') : (vehicleId || '');
-  const fallbackVehicleId = (vehicleIdStr !== '0' ? vehicleIdStr : '');
+  // Для Laximo API vehicleId может быть '0' для автомобилей, найденных по VIN
+  const fallbackVehicleId = vehicleIdStr;
 
   let vehicleInfo = vehicleData?.laximoVehicleInfo || {
     vehicleid: fallbackVehicleId,
@@ -225,8 +227,8 @@ const VehicleDetailsPage = () => {
     attributes: [] as never[]
   };
 
-  // Если вдруг с сервера пришёл vehicleid: '0', подменяем на корректный
+  // Убеждаемся, что vehicleid соответствует параметру из URL
-  if (vehicleInfo.vehicleid === '0' && fallbackVehicleId) {
+  if (vehicleInfo.vehicleid !== fallbackVehicleId && fallbackVehicleId) {
     vehicleInfo = { ...vehicleInfo, vehicleid: fallbackVehicleId };
   }
 
@@ -303,7 +305,14 @@ const VehicleDetailsPage = () => {
               <div className="w-layout-hflex flex-block-13">
                 <div className="w-layout-vflex flex-block-14-copy-copy">
                   <button onClick={() => setSelectedNode(null)} style={{ marginBottom: 16 }}>Назад</button>
-                  <KnotIn node={selectedNode} />
+                  <KnotIn
+                    catalogCode={vehicleInfo.catalog}
+                    vehicleId={vehicleInfo.vehicleid}
+                    ssd={vehicleInfo.ssd}
+                    unitId={selectedNode.unitid}
+                    unitName={selectedNode.name}
+                    parts={unitDetails}
+                  />
                   {unitDetailsLoading ? (
                     <div style={{ padding: 24, textAlign: 'center' }}>Загружаем детали узла...</div>
                   ) : unitDetailsError ? (

src/pages/vehicle-search/[brand]/[vehicleId]/part/[oemNumber].tsx

@@ -74,12 +74,12 @@ const PartDetailPage = () => {
         oemNumber: oemNumber,
         ssd: finalSsd
       },
-      skip: !brand || !vehicleId || !oemNumber || !finalSsd,
+      skip: !brand || vehicleId === undefined || vehicleId === null || !oemNumber || !finalSsd,
       errorPolicy: 'all'
     }
   );
 
-  if (!brand || !vehicleId || !oemNumber) {
+  if (!brand || vehicleId === undefined || vehicleId === null || !oemNumber) {
     return (
       <>
         <Head>

src/styles/my.css

@@ -386,15 +386,17 @@ input.input-receiver:focus {
   color: var(--_fonts---color--light-blue-grey);
 }
 
-.knotin {
+/* .knotin {
   max-width: 100%;
   display: flex;
   align-items: stretch;
 }
 .knotin img {
   max-width: 100%;
-  object-fit: contain; /* или cover */
+  object-fit: contain; 
-}
+} */
+
+
 
 .tabs-menu.w-tab-menu {
   scrollbar-width: none;
@@ -429,3 +431,38 @@ input#VinSearchInput {
   max-height: 2.8em;
   line-height: 1.4em;
 }
+
+.heading-9-copy,
+.text-block-21-copy {
+  width: 250px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (max-width: 767px) {
+  .w-layout-hflex.flex-block-6 {
+    flex-direction: column !important;
+  }
+  @media (max-width: 767px) {
+    .div-block-12,
+    .div-block-12.small,
+    .div-block-12-copy,
+    .div-block-12-copy.small,
+    .div-block-123,
+    .div-block-123.small,
+    .div-block-red,
+    .div-block-red.small {
+      width: 100% !important;
+      max-width: 100% !important;
+    }
+  }
+}
+@media (max-width: 767px) {
+  .flex-block-6 {
+    grid-template-columns: 1fr !important;
+    grid-template-rows: none !important;
+    grid-template-areas: none !important;
+    grid-auto-flow: row !important; /* <--- ВАЖНО! */
+  }
+}

src/styles/protekproject.webflow.css

@@ -787,6 +787,8 @@
   .w-layout-blockcontainer {
     max-width: 728px;
   }
+
+
 }
 
 @media screen and (max-width: 767px) {
@@ -794,6 +796,8 @@
     max-width: none;
   }
 
+
+
   .w-commerce-commercelayoutcontainer {
     flex-direction: column;
     align-items: stretch;
@@ -2844,6 +2848,7 @@ body {
   flex-flow: column;
   flex: 1;
   display: flex;
+  
 }
 
 .text-field-copy {
@@ -3110,6 +3115,7 @@ body {
 }
 
 .block-name {
+  max-width: 300px;
   flex-flow: column;
   flex: 1;
   display: flex;
@@ -3908,6 +3914,7 @@ body {
   font-size: var(--_fonts---font-size--small-font-size);
   height: 20px;
   margin-top: 0;
+  max-width: 100%;
   margin-bottom: 0;
   font-weight: 700;
 }
@@ -4024,6 +4031,7 @@ body {
   position: relative;
 }
 
+
 .button-for-mobile-menu-block:hover {
   background-color: var(--_button---hover-dark_blue);
 }
@@ -4329,7 +4337,7 @@ body {
   color: var(--_fonts---color--black);
   font-size: var(--_fonts---font-size--bigger);
   text-align: right;
-  max-width: 100px;
+  max-width: 200px;
   margin-top: 0;
   margin-bottom: 0;
   font-weight: 700;
@@ -5426,10 +5434,10 @@ body {
     margin-left: 0;
     margin-right: 0;
   }
-
+/* 
-  .topmenuh {
+   .bottom_head {
     margin-top: 0;
-  }
+  } */
 
   .flex-block-4 {
     grid-column-gap: 40px;
@@ -5519,7 +5527,7 @@ body {
   }
 
   .flex-block-39-copy {
-    width: 200px;
+    width: 150px;
   }
 
   .cart-ditail {
@@ -5579,6 +5587,8 @@ body {
     background-color: var(--white);
   }
 
+
+
   .button-for-mobile-menu-block {
     padding-left: 20px;
     padding-right: 20px;
@@ -5680,9 +5690,9 @@ body {
     margin-top: 12px;
   }
 
-  .topmenub {
+  /* .bottom_head {
     margin-top: 0;
-  }
+  } */
 
   .vinleftbar {
     width: 320px;
@@ -6082,7 +6092,7 @@ body {
     padding-bottom: 40px;
   }
 
-  .top_head, .topmenuh {
+  .top_head, .bottom_head {
     padding-left: 30px;
     padding-right: 30px;
   }
@@ -6882,7 +6892,7 @@ body {
     margin-left: 0;
   }
 
-  .topmenub {
+  .bottom_head {
     padding-left: 30px;
     padding-right: 30px;
   }
@@ -7329,7 +7339,7 @@ body {
   }
 
   .flex-block-39-copy {
-    width: 200px;
+    width: 150px;
   }
 
   .heading-9-copy-copy {
@@ -7543,8 +7553,9 @@ body {
   }
 
   .flex-block-18-copy-copy {
-    grid-column-gap: 10px;
+    grid-column-gap: 40px;
-    grid-row-gap: 10px;
+    grid-row-gap: 40px;
+    flex-flow: column;
   }
 
   .link-block-4-copy {
@@ -7602,8 +7613,9 @@ body {
   }
 
   .flex-block-87 {
-    grid-column-gap: 0px;
+    grid-column-gap: 10px;
-    grid-row-gap: 0px;
+    grid-row-gap: 10px;
+    flex: 1;
   }
 
   .mobile-menu-bottom {
@@ -7627,10 +7639,16 @@ body {
   }
 
   .button-for-mobile-menu-block {
-    grid-column-gap: 0px;
+    grid-column-gap: 2px;
-    grid-row-gap: 0px;
+    grid-row-gap: 2px;
-    width: 60px;
+    background-color: var(--_fonts---color--white);
-    padding-bottom: 5px;
+    color: var(--_button---light-blue-grey);
+    flex-flow: column;
+    width: 70px;
+  }
+
+  .button-for-mobile-menu-block:hover {
+    background-color: var(--_button---light-blue);
   }
 
   .section-3 {
@@ -7643,7 +7661,8 @@ body {
   }
 
   .flex-block-93 {
-    margin-left: 0;
+    align-self: auto;
+    min-height: 48px;
   }
 
   .sort-list-card {
@@ -7882,6 +7901,10 @@ body {
   .container-copy.footer {
     padding-bottom: 90px;
   }
+
+  .mobile-menu-buttom-section {
+    display: block;
+  }
 }
 
 @media screen and (max-width: 479px) {
@@ -7951,7 +7974,7 @@ body {
     grid-row-gap: 15px;
   }
 
-  .top_head, .topmenuh {
+  .top_head, .bottom_head {
     padding-left: 15px;
     padding-right: 15px;
   }
@@ -9132,7 +9155,7 @@ body {
     top: 58px;
   }
 
-  .topmenub {
+  .bottom_head {
     padding-left: 15px;
     padding-right: 15px;
   }
@@ -9400,6 +9423,12 @@ body {
   #w-node-_35f55517-cbe0-9ee3-13bb-a3ed00029bba-00029ba8, #w-node-_35f55517-cbe0-9ee3-13bb-a3ed00029bc7-00029ba8 {
     justify-self: stretch;
   }
+  .button-for-mobile-menu-block {
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    width: 60px;
+    padding-bottom: 5px;
+  }
 }
 
 .flex-block-113 {