src/components/BestPriceCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useCart } from "@/contexts/CartContext";
 import toast from "react-hot-toast";
 
@@ -27,6 +27,11 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
   const parsedStock = parseInt(stock.replace(/[^\d]/g, ""), 10);
   const maxCount = isNaN(parsedStock) ? undefined : parsedStock;
   const [count, setCount] = useState(1);
+  const [inputValue, setInputValue] = useState("1");
+
+  useEffect(() => {
+    setInputValue(count.toString());
+  }, [count]);
 
   const handleMinus = () => setCount(prev => Math.max(1, prev - 1));
   const handlePlus = () => {
@@ -38,7 +43,13 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
   };
 
   const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let value = parseInt(e.target.value, 10);
+    const val = e.target.value;
+    setInputValue(val);
+    if (val === "") {
+      // Не обновляем count, пока не будет blur
+      return;
+    }
+    let value = parseInt(val, 10);
     if (isNaN(value) || value < 1) value = 1;
     if (maxCount !== undefined && value > maxCount) {
       toast.error(`Максимум ${maxCount} шт.`);
@@ -47,6 +58,13 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
     setCount(value);
   };
 
+  const handleInputBlur = () => {
+    if (inputValue === "") {
+      setInputValue("1");
+      setCount(1);
+    }
+  };
+
   // Функция для парсинга цены из строки
   const parsePrice = (priceStr: string): number => {
     const cleanPrice = priceStr.replace(/[^\d.,]/g, '').replace(',', '.');
@@ -144,8 +162,9 @@ const BestPriceCard: React.FC<BestPriceCardProps> = ({
                   type="number"
                   min={1}
                   max={maxCount}
-                  value={count}
+                  value={inputValue}
                   onChange={handleInput}
+                  onBlur={handleInputBlur}
                   className="text-block-26 w-full text-center outline-none"
                   aria-label="Количество"
                 />

src/components/CartItem.tsx

@@ -38,7 +38,14 @@ const CartItem: React.FC<CartItemProps> = ({
   onRemove,
   isSummaryStep = false,
   itemNumber,
-}) => (
+}) => {
+  // --- Фикс для input: можно стереть, при blur пустое = 1 ---
+  const [inputValue, setInputValue] = React.useState(count.toString());
+  React.useEffect(() => {
+    setInputValue(count.toString());
+  }, [count]);
+
+  return (
     <div className="w-layout-hflex cart-item">
       <div className="w-layout-hflex info-block-search-copy">
         {isSummaryStep ? (
@@ -124,10 +131,22 @@ const CartItem: React.FC<CartItemProps> = ({
                 <input
                   type="number"
                   min={1}
-                value={count}
+                  value={inputValue}
                   onChange={e => {
-                  const value = Math.max(1, parseInt(e.target.value, 10) || 1);
+                    const val = e.target.value;
-                  onCountChange && onCountChange(value);
+                    setInputValue(val);
+                    if (val === "") {
+                      // Не обновляем count, пока не будет blur
+                      return;
+                    }
+                    const valueNum = Math.max(1, parseInt(val, 10) || 1);
+                    onCountChange && onCountChange(valueNum);
+                  }}
+                  onBlur={() => {
+                    if (inputValue === "") {
+                      setInputValue("1");
+                      onCountChange && onCountChange(1);
+                    }
                   }}
                   className="text-block-26 w-full text-center outline-none"
                   aria-label="Количество"
@@ -193,5 +212,6 @@ const CartItem: React.FC<CartItemProps> = ({
       </div>
     </div>
   );
+};
 
 export default CartItem; 

src/components/CoreProductCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useCart } from "@/contexts/CartContext";
 import { useFavorites } from "@/contexts/FavoritesContext";
 import toast from "react-hot-toast";
@@ -52,8 +52,16 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
   const [quantities, setQuantities] = useState<{ [key: number]: number }>(
     offers.reduce((acc, _, index) => ({ ...acc, [index]: 1 }), {})
   );
+  const [inputValues, setInputValues] = useState<{ [key: number]: string }>(
+    offers.reduce((acc, _, index) => ({ ...acc, [index]: "1" }), {})
+  );
   const [quantityErrors, setQuantityErrors] = useState<{ [key: number]: string }>({});
 
+  useEffect(() => {
+    setInputValues(offers.reduce((acc, _, index) => ({ ...acc, [index]: "1" }), {}));
+    setQuantities(offers.reduce((acc, _, index) => ({ ...acc, [index]: 1 }), {}));
+  }, [offers.length]);
+
   const displayedOffers = offers.slice(0, visibleOffersCount);
   const hasMoreOffers = visibleOffersCount < offers.length;
 
@@ -83,16 +91,35 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
     return match ? parseInt(match[0]) : 0;
   };
 
-  const handleQuantityInput = (index: number, value: string) => {
+  const handleInputChange = (idx: number, val: string) => {
-    const offer = offers[index];
+    setInputValues(prev => ({ ...prev, [idx]: val }));
-    const availableStock = parseStock(offer.pcs);
+    if (val === "") return;
-    let num = parseInt(value, 10);
+    const valueNum = Math.max(1, parseInt(val, 10) || 1);
-    if (isNaN(num) || num < 1) num = 1;
+    setQuantities(prev => ({ ...prev, [idx]: valueNum }));
-    if (num > availableStock) {
+  };
-      toast.error(`Максимум ${availableStock} шт.`);
+
-      return;
+  const handleInputBlur = (idx: number) => {
+    if (inputValues[idx] === "") {
+      setInputValues(prev => ({ ...prev, [idx]: "1" }));
+      setQuantities(prev => ({ ...prev, [idx]: 1 }));
     }
-    setQuantities(prev => ({ ...prev, [index]: num }));
+  };
+
+  const handleMinus = (idx: number) => {
+    setQuantities(prev => {
+      const newVal = Math.max(1, (prev[idx] || 1) - 1);
+      setInputValues(vals => ({ ...vals, [idx]: newVal.toString() }));
+      return { ...prev, [idx]: newVal };
+    });
+  };
+
+  const handlePlus = (idx: number, maxCount?: number) => {
+    setQuantities(prev => {
+      let newVal = (prev[idx] || 1) + 1;
+      if (maxCount !== undefined) newVal = Math.min(newVal, maxCount);
+      setInputValues(vals => ({ ...vals, [idx]: newVal.toString() }));
+      return { ...prev, [idx]: newVal };
+    });
   };
 
   const handleAddToCart = (offer: CoreProductCardOffer, index: number) => {
@@ -291,6 +318,7 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
           <div className="w-layout-vflex product-list-search-s1">
             {displayedOffers.map((offer, idx) => {
               const isLast = idx === displayedOffers.length - 1;
+              const maxCount = parseStock(offer.pcs);
               return (
                 <div 
                   className="w-layout-hflex product-item-search-s1"
@@ -317,43 +345,48 @@ const CoreProductCard: React.FC<CoreProductCardProps> = ({
                   <div className="w-layout-hflex add-to-cart-block-s1">
                     <div className="w-layout-hflex flex-block-82">
                       <div className="w-layout-hflex pcs-cart-s1">
-                        <button
+                        <div
-                          type="button"
                           className="minus-plus"
-                          onClick={() => handleQuantityInput(idx, ((quantities[idx] || 1) - 1).toString())}
+                          onClick={() => handleMinus(idx)}
                           style={{ cursor: 'pointer' }}
                           aria-label="Уменьшить количество"
+                          tabIndex={0}
+                          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleMinus(idx)}
+                          role="button"
                         >
                           <div className="pluspcs w-embed">
                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                               <path d="M6 10.5V9.5H14V10.5H6Z" fill="currentColor" />
                             </svg>
                           </div>
-                        </button>
+                        </div>
                         <div className="input-pcs">
                           <input
                             type="number"
                             min={1}
-                            max={parseStock(offer.pcs)}
+                            max={maxCount}
-                            value={quantities[idx] || 1}
+                            value={inputValues[idx]}
-                            onChange={e => handleQuantityInput(idx, e.target.value)}
+                            onChange={e => handleInputChange(idx, e.target.value)}
+                            onBlur={() => handleInputBlur(idx)}
                             className="text-block-26 w-full text-center outline-none"
                             aria-label="Количество"
                           />
                         </div>
-                        <button
+                        <div
-                          type="button"
                           className="minus-plus"
-                          onClick={() => handleQuantityInput(idx, ((quantities[idx] || 1) + 1).toString())}
+                          onClick={() => handlePlus(idx, maxCount)}
                           style={{ cursor: 'pointer' }}
                           aria-label="Увеличить количество"
+                          tabIndex={0}
+                          onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handlePlus(idx, maxCount)}
+                          role="button"
                         >
                           <div className="pluspcs w-embed">
                             <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                               <path d="M6 10.5V9.5H14V10.5H6ZM9.5 6H10.5V14H9.5V6Z" fill="currentColor" />
                             </svg>
                           </div>
-                        </button>
+                        </div>
                       </div>
                       <button
                         type="button"

src/components/VehicleSearchResults.tsx

@@ -68,26 +68,26 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
         Найдено автомобилей: {results.length}
       </h3>
       
-      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+      <div className="flex flex-wrap flex-1 gap-5 size-full max-md:max-w-full">
         {results.map((vehicle, index) => (
           <div
             key={`${vehicle.vehicleid}-${index}`}
-            className="bg-white rounded-lg shadow-md border border-gray-200 p-4 hover:shadow-lg transition-shadow cursor-pointer"
+           className="flex flex-col flex-1 shrink p-8 bg-white rounded-lg border border-solid basis-0 border-stone-300 max-w-[504px] md:min-w-[370px] sm:min-w-[340px] min-w-[200px] max-md:px-5 cursor-pointer transition-shadow hover:shadow-lg"
             onClick={() => handleSelectVehicle(vehicle)}
           >
             {/* Заголовок автомобиля */}
-            <div className="mb-3">
+            <div className="">
-              <h4 className="text-lg font-semibold text-blue-600 mb-1">
+              <h4 className="text-lg font-semibold text-red-600 mb-1 truncate">
                 {vehicle.name || `${vehicle.brand} ${vehicle.model}`}
               </h4>
-              <p className="text-sm text-gray-500">
+              {/* <p className="text-sm text-gray-500 truncate">
                 {vehicle.modification} ({vehicle.year})
-              </p>
+              </p> */}
             </div>
 
             {/* Основные характеристики */}
             <div className="space-y-1 mb-4">
-              <h5 className="text-sm font-semibold text-gray-700 mb-2">Основные характеристики</h5>
+              <h5 className="text-base font-semibold text-gray-900 mb-2">Основные характеристики</h5>
               {renderAttribute('Марка', vehicle.brand)}
               {renderAttribute('Модель', vehicle.model)}
               {renderAttribute('Двигатель', vehicle.engine)}
@@ -96,7 +96,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
             {/* Все атрибуты из API */}
             {vehicle.attributes && vehicle.attributes.length > 0 && (
               <div className="space-y-1 mb-4">
-                <h5 className="text-sm font-semibold text-gray-700 mb-2">Дополнительные характеристики</h5>
+                <h5 className="text-base font-semibold text-gray-900 mb-2">Дополнительные характеристики</h5>
                 {vehicle.attributes.map((attr, attrIndex) => (
                   <div key={attrIndex} className="flex justify-between py-1 border-b border-gray-100">
                     <span className="text-sm text-gray-600 font-medium">{attr.name || attr.key}:</span>
@@ -110,7 +110,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
             {(!vehicle.attributes || vehicle.attributes.length === 0) && (
               <>
                 <div className="space-y-1 mb-4">
-                  <h5 className="text-sm font-semibold text-gray-700 mb-2">Дополнительные характеристики</h5>
+                  <h5 className="text-base font-semibold text-gray-900 mb-2">Дополнительные характеристики</h5>
                   {renderAttribute('Год', vehicle.year)}
                   {renderAttribute('Кузов', vehicle.bodytype)}
                   {renderAttribute('Трансмиссия', vehicle.transmission)}
@@ -123,7 +123,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
                 </div>
 
                 <div className="space-y-1 mb-4">
-                  <h5 className="text-sm font-semibold text-gray-700 mb-2">Технические характеристики</h5>
+                  <h5 className="text-base font-semibold text-gray-900 mb-2">Технические характеристики</h5>
                   {renderAttribute('Информация о двигателе', vehicle.engine_info)}
                   {renderAttribute('Номер двигателя', vehicle.engineno)}
                   {renderAttribute('Дата производства', vehicle.date)}
@@ -133,7 +133,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
                 </div>
 
                 <div className="space-y-1 mb-4">
-                  <h5 className="text-sm font-semibold text-gray-700 mb-2">Даты и периоды</h5>
+                  <h5 className="text-base font-semibold text-gray-900 mb-2">Даты и периоды</h5>
                   {renderAttribute('Дата с', vehicle.datefrom)}
                   {renderAttribute('Дата по', vehicle.dateto)}
                   {renderAttribute('Модельный год с', vehicle.modelyearfrom)}
@@ -143,7 +143,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
                 {/* Опции и описание */}
                 {(vehicle.options || vehicle.description || vehicle.notes) && (
                   <div className="space-y-1 mb-4">
-                    <h5 className="text-sm font-semibold text-gray-700 mb-2">Опции и описание</h5>
+                    <h5 className="text-base font-semibold text-gray-900 mb-2">Опции и описание</h5>
                     {renderAttribute('Опции', vehicle.options)}
                     {renderAttribute('Описание', vehicle.description)}
                     {renderAttribute('Примечания', vehicle.notes)}
@@ -153,25 +153,7 @@ const VehicleSearchResults: React.FC<VehicleSearchResultsProps> = ({
             )}
 
             {/* Системная информация */}
-            <div className="mt-4 pt-3 border-t border-gray-200">
-              <div className="text-xs text-gray-400 space-y-1">
-                <div>ID: {vehicle.vehicleid}</div>
-                {vehicle.catalog && <div>Каталог: {vehicle.catalog}</div>}
-                {vehicle.ssd && (
-                  <div>SSD: {vehicle.ssd.length > 50 ? `${vehicle.ssd.substring(0, 50)}...` : vehicle.ssd}</div>
-                )}
-              </div>
-            </div>
 
-            {/* Debug информация (только в development) */}
-            {process.env.NODE_ENV === 'development' && (
-              <div className="mt-4 p-2 bg-gray-100 rounded text-xs">
-                <div className="font-semibold text-gray-700 mb-1">Debug Info:</div>
-                <pre className="text-gray-600 whitespace-pre-wrap">
-                  {JSON.stringify(vehicle, null, 2)}
-                </pre>
-              </div>
-            )}
           </div>
         ))}
       </div>

src/components/WizardSearchForm.tsx

@@ -325,34 +325,34 @@ const WizardSearchForm: React.FC<WizardSearchFormProps> = ({
         </div>
       )}
 
-      {/* Кнопка поиска автомобилей */}
+      {/* Информация о недостаточности параметров и кнопка поиска */}
-      {!isLoading && canListVehicles && showSearchButton && (
+      {!isLoading && wizardSteps.length > 0 && (
-        <div className="pt-4 border-t">
+        <div className="flex flex-row gap-4 items-center w-full mx-auto max-sm:flex-col max-sm:items-stretch">
           <button
             onClick={() => {
               handleFindVehicles();
               setShowSearchButton(false);
             }}
-            disabled={isLoading}
+            disabled={!canListVehicles || isLoading}
-            className="w-full sm:w-auto px-8 py-3 bg-red-600 !text-white font-medium rounded-lg shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+            className="w-full sm:w-auto px-8 py-3 bg-red-600 !text-white font-medium rounded-lg shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center max-sm:w-full"
+            style={{ minWidth: 180 }}
           >
-            <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            Найти
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-            Найти автомобили
           </button>
-          <div className="mt-3 text-sm text-gray-600">
+          <div
-            Определено параметров: {wizardSteps.filter(s => s.determined).length} из {wizardSteps.length}
+            layer-name="Выберите больше параметров для поиска автомобилей"
+            className="box-border inline-flex gap-5 items-center px-10 py-4 rounded-xl bg-slate-50 h-[52px] max-md:px-8 max-md:py-3.5 max-md:w-full max-md:h-auto max-md:max-w-[524px] max-md:min-h-[52px] max-sm:gap-3 max-sm:px-5 max-sm:py-3 max-sm:w-full max-sm:rounded-lg max-sm:justify-center"
+          >
+            <div>
+              <img src="/images/info.svg" alt="info" style={{ width: 18, height: 20, flexShrink: 0 }} />
             </div>
-        </div>
+            <div
-      )}
+              layer-name="Выберите больше параметров для поиска автомобилей"
-
+              className="relative text-base font-medium leading-5 text-center text-gray-950 max-md:text-sm max-sm:text-sm max-sm:leading-4 max-sm:text-center"
-      {/* Информация о недостаточности параметров */}
+            >
-      {!isLoading && !canListVehicles && wizardSteps.length > 0 && (
-        <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg">
-          <p className="text-blue-800 text-sm">
               Выберите больше параметров для поиска автомобилей
-          </p>
+            </div>
+          </div>
         </div>
       )}
     </div>

src/components/filters/FilterRange.tsx

@@ -15,8 +15,10 @@ const DEFAULT_MAX = 32000;
 const clamp = (v: number, min: number, max: number) => Math.max(min, Math.min(v, max));
 
 const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max = DEFAULT_MAX, isMobile = false, value = null, onChange }) => {
-  const [from, setFrom] = useState(value ? value[0] : min);
+  const [from, setFrom] = useState<string>(value ? String(value[0]) : String(min));
-  const [to, setTo] = useState(value ? value[1] : max);
+  const [to, setTo] = useState<string>(value ? String(value[1]) : String(max));
+  const [confirmedFrom, setConfirmedFrom] = useState<number>(value ? value[0] : min);
+  const [confirmedTo, setConfirmedTo] = useState<number>(value ? value[1] : max);
   const [dragging, setDragging] = useState<null | "from" | "to">(null);
   const [trackWidth, setTrackWidth] = useState(0);
   const [open, setOpen] = useState(true);
@@ -25,11 +27,15 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
   // Обновляем локальное состояние при изменении внешнего значения
   useEffect(() => {
     if (value) {
-      setFrom(value[0]);
+      setFrom(String(value[0]));
-      setTo(value[1]);
+      setTo(String(value[1]));
+      setConfirmedFrom(value[0]);
+      setConfirmedTo(value[1]);
     } else {
-      setFrom(min);
+      setFrom(String(min));
-      setTo(max);
+      setTo(String(max));
+      setConfirmedFrom(min);
+      setConfirmedTo(max);
     }
   }, [value, min, max]);
 
@@ -61,15 +67,15 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
       x = clamp(x, 0, trackWidth);
       const value = clamp(pxToValue(x), min, max);
       if (dragging === "from") {
-        setFrom(v => clamp(Math.min(value, to), min, to));
+        setFrom(v => String(clamp(Math.min(value, Number(to)), min, Number(to))));
       } else {
-        setTo(v => clamp(Math.max(value, from), from, max));
+        setTo(v => String(clamp(Math.max(value, Number(from)), Number(from), max)));
       }
     };
     const onUp = () => {
       setDragging(null);
       if (onChange) {
-        onChange([from, to]);
+        onChange([Number(from), Number(to)]);
       }
     };
     window.addEventListener("mousemove", onMove);
@@ -82,25 +88,48 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
 
   // Input handlers
   const handleFromInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let v = Number(e.target.value.replace(/\D/g, ""));
+    let v = e.target.value.replace(/\D/g, "");
-    if (isNaN(v)) v = min;
+    setFrom(v);
-    setFrom(clamp(Math.min(v, to), min, to));
   };
   const handleToInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let v = Number(e.target.value.replace(/\D/g, ""));
+    let v = e.target.value.replace(/\D/g, "");
-    if (isNaN(v)) v = max;
+    setTo(v);
-    setTo(clamp(Math.max(v, from), from, max));
   };
 
-  const handleInputBlur = () => {
+  const handleFromBlur = () => {
-    if (onChange) {
+    let v = Number(from);
-      onChange([from, to]);
+    if (isNaN(v) || v < min) v = min;
+    // если больше max — оставлять как есть
+    setFrom(String(v));
+    if (onChange) onChange([v, to === "" ? max : Number(to)]);
+    setConfirmedFrom(v);
+  };
+
+  const handleToBlur = () => {
+    let v = Number(to);
+    if (isNaN(v) || v < min) v = min;
+    if (v > max) v = max;
+    setTo(String(v));
+    if (onChange) onChange([from === "" ? min : Number(from), v]);
+    setConfirmedTo(v);
+  };
+
+  const handleFromKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleFromBlur();
+      (e.target as HTMLInputElement).blur();
+    }
+  };
+  const handleToKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleToBlur();
+      (e.target as HTMLInputElement).blur();
     }
   };
 
   // px позиции для точек
-  const pxFrom = valueToPx(from);
+  const pxFrom = valueToPx(dragging ? Number(from) : confirmedFrom);
-  const pxTo = valueToPx(to);
+  const pxTo = valueToPx(dragging ? Number(to) : confirmedTo);
 
   // Мобильная версия - без dropdown
   if (isMobile) {
@@ -124,7 +153,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
                     id="from"
                     value={from}
                     onChange={handleFromInput}
-                    onBlur={handleInputBlur}
+                    onBlur={handleFromBlur}
+                    onKeyDown={handleFromKeyDown}
                     style={{ padding: '8px 10px 8px 36px', fontSize: 16, width: '100%' }}
                   />
                 </div>
@@ -139,7 +169,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
                     id="to"
                     value={to}
                     onChange={handleToInput}
-                    onBlur={handleInputBlur}
+                    onBlur={handleToBlur}
+                    onKeyDown={handleToKeyDown}
                     style={{ padding: '8px 10px 8px 36px', fontSize: 16, width: '100%' }}
                   />
                 </div>
@@ -214,7 +245,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
                   id="from"
                   value={from}
                   onChange={handleFromInput}
-                  onBlur={handleInputBlur}
+                  onBlur={handleFromBlur}
+                  onKeyDown={handleFromKeyDown}
                 />
               </div>
               <div className="div-block-5">
@@ -228,7 +260,8 @@ const FilterRange: React.FC<FilterRangeProps> = ({ title, min = DEFAULT_MIN, max
                   id="to"
                   value={to}
                   onChange={handleToInput}
-                  onBlur={handleInputBlur}
+                  onBlur={handleToBlur}
+                  onKeyDown={handleToKeyDown}
                 />
               </div>
             </form>

src/components/index/BestPriceSection.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+const BestPriceSection: React.FC = () => (
+  <section className="main">
+    <div className="w-layout-blockcontainer container w-container">
+      <div className="w-layout-hflex flex-block-118">
+        <div className="w-layout-vflex flex-block-119">
+          <h1 className="heading-20">ЛУЧШАЯ ЦЕНА!</h1>
+          <div className="text-block-58">Подборка лучших предложенийпо цене</div>
+          <a href="#" className="button-24 w-button">Показать все</a>
+        </div>
+        <div className="w-layout-hflex flex-block-121">
+          {[...Array(8)].map((_, i) => (
+            <div className="w-layout-vflex bestpriceitem" key={i}>
+              <div className="favcardcat">
+                <div className="icon-setting w-embed"><svg width="currenWidth" height="currentHeight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" stroke="currentColor"></path></svg></div>
+              </div>
+              <div className="imgitembp"><img width="auto" height="auto" alt="" src="images/162615.webp" loading="lazy" srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5" />
+                <div className="saletagbp">-35%</div>
+              </div>
+              <div className="div-block-3">
+                <div className="w-layout-hflex pricecartbp">
+                  <div className="actualprice">от 17 087 ₽</div>
+                  <div className="oldpricebp">22 347 ₽</div>
+                </div>
+                <div className="w-layout-hflex flex-block-120">
+                  <div className="nameitembp">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
+                  <a href="#" className="button-icon w-inline-block">
+                    <div className="div-block-26">
+                      <div className="icon-setting w-embed"><svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path></svg></div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default BestPriceSection; 

src/components/index/BrandSelectionSection.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { useQuery } from "@apollo/client";
+import { GET_LAXIMO_BRANDS } from "@/lib/graphql";
+import { LaximoBrand } from "@/types/laximo";
+
+const tabs = [
+  "Техническое обслуживание",
+  "Легковые",
+  "Грузовые",
+  "Коммерческие",
+];
+
+type Brand = { name: string; code?: string };
+
+const BrandSelectionSection: React.FC = () => {
+  const [activeTab, setActiveTab] = useState(0);
+  const [selectedBrand, setSelectedBrand] = useState<string>("");
+  const router = useRouter();
+
+  const { data, loading, error } = useQuery<{ laximoBrands: LaximoBrand[] }>(GET_LAXIMO_BRANDS, {
+    errorPolicy: 'all'
+  });
+
+  const staticBrands: Brand[] = [
+    { name: "Audi" },
+    { name: "BMW" },
+    { name: "Cadillac" },
+    { name: "Chevrolet" },
+    { name: "Citroen" },
+    { name: "Fiat" },
+    { name: "Mazda" }
+  ];
+
+  let brands: Brand[] = staticBrands;
+  if (data?.laximoBrands && data.laximoBrands.length > 0) {
+    brands = data.laximoBrands.map(brand => ({
+      name: brand.name,
+      code: brand.code
+    }));
+  } else if (error) {
+    console.warn('Laximo API недоступен, используются статические данные:', error.message);
+  }
+
+  const handleBrandClick = (brand: Brand) => {
+    if (brand.code) {
+      router.push(`/brands?selected=${brand.code}`);
+    } else {
+      console.warn('Brand code not available for', brand.name);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (selectedBrand) {
+      const found = brands.find(b => b.code === selectedBrand || b.name === selectedBrand);
+      if (found && found.code) {
+        router.push(`/brands?selected=${found.code}`);
+        return;
+      }
+    }
+    router.push("/brands");
+  };
+
+  if (loading) {
+    return (
+      <section>
+        <div className="w-layout-blockcontainer container w-container">
+          <div className="w-layout-vflex inbt">
+            <h2 className="heading-4">Подбор по маркам</h2>
+            <div className="text-center">Загрузка брендов...</div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section className="main">
+      <div className="w-layout-blockcontainer container w-container">
+        <div className="w-layout-vflex inbt">
+          <h2 className="heading-4">Подбор по маркам</h2>
+          <div className="w-layout-hflex flex-block-6-copy">
+            <div className="w-layout-hflex brandsortb">
+              <div className="w-layout-hflex tabson">
+                {tabs.map((tab, idx) => (
+                  <div
+                    className={activeTab === idx ? "tab_c tab_card-activ" : "tab_c tab_card"}
+                    key={idx}
+                    onClick={() => setActiveTab(idx)}
+                    style={{ cursor: "pointer" }}
+                  >
+                    {tab}
+                  </div>
+                ))}
+              </div>
+              <div className="w-layout-hflex brandsort">
+                {[...Array(5)].map((_, colIdx) => (
+                  <div className="w-layout-vflex flex-block-26" key={colIdx}>
+                    {brands.slice(colIdx * Math.ceil(brands.length / 5), (colIdx + 1) * Math.ceil(brands.length / 5)).map((brand, idx) => (
+                      <button
+                        onClick={() => handleBrandClick(brand)}
+                        className="link-block-6 w-inline-block text-left"
+                        key={idx}
+                        style={{ background: 'none', border: 'none', padding: 0 }}
+                      >
+                        <div className="indexbrandblock">{brand.name}</div>
+                      </button>
+                    ))}
+                  </div>
+                ))}
+              </div>
+              <button
+                onClick={() => router.push('/brands')}
+                className="w-layout-hflex flex-block-29 cursor-pointer hover:opacity-80 transition-opacity"
+                style={{ background: 'none', border: 'none', padding: 0 }}
+              >
+                <div className="text-block-18">Все марки</div>
+                <img src="/images/Arrow_right.svg" loading="lazy" alt="Стрелка вправо" />
+              </button>
+            </div>
+            <div className="w-layout-vflex flex-block-124">
+              <h1 className="heading-21">ПОДБОР АВТОЗАПЧАСТЕЙ ПО МАРКЕ АВТО</h1>
+              <div className="form-block-4 w-form">
+                <form id="email-form" name="email-form" data-name="Email Form" method="post" data-wf-page-id="685be6dfd87db2e01cbdb7a2" data-wf-element-id="e673036c-0caf-d251-3b66-9ba9cb85064c" onSubmit={handleSubmit}>
+                  <select
+                    id="field-7"
+                    name="field-7"
+                    data-name="Field 7"
+                    className="select-copy w-select"
+                    value={selectedBrand}
+                    onChange={e => setSelectedBrand(e.target.value)}
+                  >
+                    <option value="">Марка</option>
+                    {brands.map((brand, idx) => (
+                      <option value={brand.code || brand.name} key={idx}>{brand.name}</option>
+                    ))}
+                  </select>
+                  <div className="div-block-10-copy">
+                    <input type="submit" data-wait="Please wait..." className="button-3-copy w-button" value="Далее" />
+                  </div>
+                </form>
+                <div className="w-form-done">
+                  <div>Thank you! Your submission has been received!</div>
+                </div>
+                <div className="w-form-fail">
+                  <div>Oops! Something went wrong while submitting the form.</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default BrandSelectionSection; 

src/components/index/CategoryNavSection.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+const CategoryNavSection: React.FC = () => (
+  <section className="catnav">
+    <div className="w-layout-blockcontainer batd w-container">
+      <div className="w-layout-hflex flex-block-108-copy">
+        <div className="ci1">
+          <div className="text-block-54-copy">Детали для ТО</div>
+        </div>
+        <div className="ci2">
+          <div className="text-block-54">Шины</div>
+        </div>
+        <div className="ci3">
+          <div className="text-block-54">Диски</div>
+        </div>
+        <div className="ci4">
+          <div className="text-block-54">Масла и жидкости</div>
+        </div>
+        <div className="ci5">
+          <div className="text-block-54">Инструменты</div>
+        </div>
+        <div className="ci6">
+          <div className="text-block-54">Автохимия</div>
+        </div>
+        <div className="ci7">
+          <div className="text-block-54">Аксессуары</div>
+        </div>
+        <div className="ci8">
+          <div className="text-block-54">Электрика</div>
+        </div>
+        <div className="ci9">
+          <div className="text-block-54">АКБ</div>
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default CategoryNavSection; 

src/components/index/IndexTopMenuNav.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const IndexTopMenuNav = () => (
+  <section className="topmenub">
+    <div className="w-layout-blockcontainer tb nav w-container">
+      <div className="w-layout-hflex flex-block-107">
+        <a href="#" className="link-block-8 w-inline-block">
+          <div>О компании</div>
+        </a>
+        <a href="#" className="link-block-8 w-inline-block">
+          <div>Оплата и доставка</div>
+        </a>
+        <a href="#" className="link-block-8 w-inline-block">
+          <div>Гарантия и возврат</div>
+        </a>
+        <a href="#" className="link-block-8 w-inline-block">
+          <div>Покупателям</div>
+        </a>
+        <a href="#" className="link-block-8 w-inline-block">
+          <div>Оптовым клиентам</div>
+        </a>
+        <a href="#" className="link-block-8 w-inline-block">
+          <div>Контакты</div>
+        </a>
+        <a href="#" className="link-block-8 green w-inline-block">
+          <div>Новые поступления товаров</div>
+        </a>
+        <a href="#" className="link-block-8 orange w-inline-block">
+          <div>Распродажа</div>
+        </a>
+      </div>
+    </div>
+  </section>
+);
+
+export default IndexTopMenuNav; 

src/components/index/NewArrivalsSection.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+
+const NewArrivalsSection: React.FC = () => (
+  <section className="main">
+    <div className="w-layout-blockcontainer container w-container">
+      <div className="w-layout-vflex inbt">
+        <div className="w-layout-hflex flex-block-31">
+          <h2 className="heading-4">Новое поступление</h2>
+        </div>
+        <div className="w-layout-hflex core-product-search">
+          {[...Array(8)].map((_, i) => (
+            <div className="w-layout-vflex flex-block-15-copy" key={i}>
+              <div className="favcardcat">
+                <div className="icon-setting w-embed"><svg width="currenWidth" height="currentHeight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" stroke="currentColor"></path></svg></div>
+              </div>
+              <div className="div-block-4">
+                <img 
+                  src="images/162615.webp" 
+                  loading="lazy" 
+                  width="auto" 
+                  height="auto" 
+                  alt="Новое поступление: Аккумуляторная батарея TYUMEN BATTERY" 
+                  srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" 
+                  sizes="(max-width: 600px) 100vw, 600px" 
+                  className="image-5" 
+                />
+                <div className="text-block-7">-35%</div>
+              </div>
+              <div className="div-block-3">
+                <div className="w-layout-hflex flex-block-16">
+                  <div className="text-block-8">от 17 087 ₽</div>
+                  <div className="text-block-9">22 347 ₽</div>
+                </div>
+                <div className="w-layout-hflex flex-block-122">
+                  <div className="w-layout-vflex">
+                    <div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
+                    <div className="text-block-11">Borsehung</div>
+                  </div>
+                  <a href="#" className="button-icon w-inline-block">
+                    <div className="div-block-26">
+                      <div className="icon-setting w-embed"><svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path></svg></div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default NewArrivalsSection; 

src/components/index/NewsAndPromos.tsx

@@ -3,7 +3,7 @@ import NewsCard from "@/components/news/NewsCard";
 import Link from "next/link";
 
 const NewsAndPromos = () => (
-  <section>
+  <section className="main">
     <div className="w-layout-blockcontainer container w-container">
       <div className="w-layout-vflex news-index-block">
         <div className="w-layout-hflex flex-block-31">

src/components/index/ProductOfDaySection.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+const ProductOfDaySection: React.FC = () => (
+  <section className="main">
+    <div className="w-layout-blockcontainer batd w-container">
+      <div className="w-layout-hflex flex-block-108">
+        <div data-delay="4000" data-animation="slide" className="slider w-slider" data-autoplay="false" data-easing="ease" data-hide-arrows="false" data-disable-swipe="false" data-autoplay-limit="0" data-nav-spacing="3" data-duration="500" data-infinite="true">
+          <div className="mask w-slider-mask">
+            <div className="slide w-slide">
+              <div className="div-block-128"></div>
+            </div>
+            <div className="w-slide"></div>
+            <div className="w-slide"></div>
+          </div>
+          <div className="left-arrow w-slider-arrow-left">
+            <div className="div-block-34">
+              <div className="code-embed-14 w-embed"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+                </svg></div>
+            </div>
+          </div>
+          <div className="right-arrow w-slider-arrow-right">
+            <div className="div-block-34 right">
+              <div className="code-embed-14 w-embed"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+                </svg></div>
+            </div>
+          </div>
+          <div className="slide-nav w-slider-nav w-slider-nav-invert w-round"></div>
+        </div>
+        <div className="div-block-129">
+          <div className="w-layout-hflex flex-block-109">
+            <h1 className="heading-18">ТОВАРЫ ДНЯ</h1>
+            <div className="saletag">-35%</div>
+          </div>
+          <div className="w-layout-hflex flex-block-110">
+            <div className="w-layout-vflex flex-block-111">
+              <div className="w-layout-hflex flex-block-16">
+                <div className="text-block-8">от 17 087 ₽</div>
+                <div className="text-block-9">22 347 ₽</div>
+              </div>
+              <div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY &quot;STANDARD&quot;, 6CT-60L, 60</div>
+            </div><img width="Auto" height="Auto" alt="" src="/images/162615.webp" loading="lazy" srcSet="/images/162615-p-500.webp 500w, /images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5-copy" />
+          </div>
+          <div className="w-layout-hflex flex-block-125">
+            <div className="div-block-134">
+              <div className="code-embed-17 w-embed"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" stroke="currentcolor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+                </svg></div>
+            </div>
+            <div className="div-block-134-copy">
+              <div className="code-embed-17 w-embed"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M16.6673 10H3.33398M3.33398 10L8.33398 5M3.33398 10L8.33398 15" stroke="currentcolor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
+                </svg></div>
+            </div>
+            <div className="w-layout-hflex flex-block-126">
+              <div className="div-block-135"></div>
+              <div className="div-block-135"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+        </div>
+    </section>
+);
+
+export default ProductOfDaySection; 

src/components/index/PromoImagesSection.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const PromoImagesSection: React.FC = () => (
+  <section className="main">
+    <div className="w-layout-blockcontainer container w-container">
+      <div className="w-layout-hflex flex-block-123">
+        <div className="div-block-132">
+          <img src="images/Group-602.png" loading="lazy" alt="Промо 1" />
+        </div>
+        <div className="div-block-132">
+          <img src="images/Group-603.png" loading="lazy" alt="Промо 2" />
+        </div>
+        <div className="div-block-132">
+          <img src="images/Group-604.png" loading="lazy" alt="Промо 3" />
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default PromoImagesSection; 

src/components/index/SupportVinSection.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+const SupportVinSection: React.FC = () => (
+  <section className="main">
+    <div className="w-layout-blockcontainer container-copy w-container">
+      <img 
+        src="images/support_img.png" 
+        loading="lazy" 
+        alt="Поддержка: помощь с VIN-запросом" 
+        className="image-27" 
+      />
+      <div className="div-block-11">
+        <div className="w-layout-vflex flex-block-30">
+          <h3 className="supportheading">МЫ ВСЕГДА РАДЫ ПОМОЧЬ</h3>
+          <div className="text-block-19">
+            Если вам нужна помощь с подбором автозапчастей, то воспользуйтесь формой VIN-запроса. Введите идентификационный номер (VIN) вашего автомобиля — и мы найдём нужную деталь.
+          </div>
+        </div>
+        <a href="#" className="submit-button-copy w-button">Отправить VIN-запрос</a>
+      </div>
+    </div>
+  </section>
+);
+
+export default SupportVinSection; 

src/components/index/TopSalesSection.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+const TopSalesSection: React.FC = () => (
+  <section className="main">
+    <div className="w-layout-blockcontainer container w-container">
+      <div className="w-layout-vflex inbt">
+        <div className="w-layout-hflex flex-block-31">
+          <h2 className="heading-4">Топ продаж</h2>
+        </div>
+        <div className="w-layout-hflex core-product-search">
+          {[...Array(8)].map((_, i) => (
+            <div className="w-layout-vflex flex-block-15-copy" key={i}>
+              <div className="favcardcat">
+                <div className="icon-setting w-embed"><svg width="currenWidth" height="currentHeight" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5996 3.5C15.8107 3.5 17.5 5.1376 17.5 7.19629C17.5 8.46211 16.9057 9.65758 15.7451 11.0117C14.8712 12.0314 13.7092 13.1034 12.3096 14.3311L10.833 15.6143L10.832 15.6152L10 16.3369L9.16797 15.6152L9.16699 15.6143L7.69043 14.3311C6.29084 13.1034 5.12883 12.0314 4.25488 11.0117C3.09428 9.65758 2.50003 8.46211 2.5 7.19629C2.5 5.1376 4.18931 3.5 6.40039 3.5C7.6497 3.50012 8.85029 4.05779 9.62793 4.92188L10 5.33398L10.3721 4.92188C11.1497 4.05779 12.3503 3.50012 13.5996 3.5Z" fill="currentColor" stroke="currentColor"></path></svg></div>
+              </div>
+              <div className="div-block-4"><img src="images/162615.webp" loading="lazy" width="auto" height="auto" alt="" srcSet="images/162615-p-500.webp 500w, images/162615.webp 600w" sizes="(max-width: 600px) 100vw, 600px" className="image-5" />
+                <div className="text-block-7">-35%</div>
+              </div>
+              <div className="div-block-3">
+                <div className="w-layout-hflex flex-block-16">
+                  <div className="text-block-8">от 17 087 ₽</div>
+                  <div className="text-block-9">22 347 ₽</div>
+                </div>
+                <div className="w-layout-hflex flex-block-122">
+                  <div className="w-layout-vflex">
+                    <div className="text-block-10">Аккумуляторная батарея TYUMEN BATTERY "STANDARD", 6CT-60L, 60</div>
+                    <div className="text-block-11">Borsehung</div>
+                  </div>
+                  <a href="#" className="button-icon w-inline-block">
+                    <div className="div-block-26">
+                      <div className="icon-setting w-embed"><svg width="currentWidht" height="currentHeight" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.1998 22.2C8.8798 22.2 7.81184 23.28 7.81184 24.6C7.81184 25.92 8.8798 27 10.1998 27C11.5197 27 12.5997 25.92 12.5997 24.6C12.5997 23.28 11.5197 22.2 10.1998 22.2ZM3 3V5.4H5.39992L9.71977 14.508L8.09982 17.448C7.90783 17.784 7.79984 18.18 7.79984 18.6C7.79984 19.92 8.8798 21 10.1998 21H24.5993V18.6H10.7037C10.5357 18.6 10.4037 18.468 10.4037 18.3L10.4397 18.156L11.5197 16.2H20.4594C21.3594 16.2 22.1513 15.708 22.5593 14.964L26.8552 7.176C26.9542 6.99286 27.004 6.78718 26.9997 6.57904C26.9955 6.37089 26.9373 6.16741 26.8309 5.98847C26.7245 5.80952 26.5736 5.66124 26.3927 5.55809C26.2119 5.45495 26.0074 5.40048 25.7992 5.4H8.05183L6.92387 3H3ZM22.1993 22.2C20.8794 22.2 19.8114 23.28 19.8114 24.6C19.8114 25.92 20.8794 27 22.1993 27C23.5193 27 24.5993 25.92 24.5993 24.6C24.5993 23.28 23.5193 22.2 22.1993 22.2Z" fill="currentColor"></path></svg></div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default TopSalesSection; 

src/components/vin/KnotIn.tsx

@@ -137,10 +137,10 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
         />
         {/* Точки/области */}
         {coordinates.map((coord: any, idx: number) => {
-          const scaledX = coord.x * imageScale.x;
+          // Кружки всегда 32x32px, центрируем по координате
-          const scaledY = coord.y * imageScale.y;
+          const size = 22;
-          const scaledWidth = coord.width * imageScale.x;
+          const scaledX = coord.x * imageScale.x - size / 2;
-          const scaledHeight = coord.height * imageScale.y;
+          const scaledY = coord.y * imageScale.y - size / 2;
           return (
             <div
               key={`coord-${unitId}-${idx}-${coord.x}-${coord.y}`}
@@ -149,19 +149,29 @@ const KnotIn: React.FC<KnotInProps> = ({ catalogCode, vehicleId, ssd, unitId, un
               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"
+              className="absolute flex items-center justify-center cursor-pointer transition-colors"
               style={{
                 left: scaledX,
                 top: scaledY,
-                width: scaledWidth,
+                width: size,
-                height: scaledHeight,
+                height: size,
+                background: '#B7CAE2',
                 borderRadius: '50%',
+                
                 pointerEvents: 'auto',
               }}
               title={coord.codeonimage}
               onClick={() => handlePointClick(coord.codeonimage)}
+              onMouseEnter={e => {
+                (e.currentTarget as HTMLDivElement).style.background = '#EC1C24';
+                (e.currentTarget.querySelector('span') as HTMLSpanElement).style.color = '#fff';
+              }}
+              onMouseLeave={e => {
+                (e.currentTarget as HTMLDivElement).style.background = '#B7CAE2';
+                (e.currentTarget.querySelector('span') as HTMLSpanElement).style.color = '#000';
+              }}
             >
-              <span className="flex items-center justify-center w-full h-full text-black text-sm font-bold select-none pointer-events-none">
+              <span className="flex items-center justify-center w-full h-full text-black text-sm font-bold select-none pointer-events-none" style={{color: '#000'}}>
                 {coord.codeonimage}
               </span>
             </div>

src/components/vin/VinCategory.tsx

@@ -10,18 +10,14 @@ interface VinCategoryProps {
   activeTab?: 'uzly' | 'manufacturer';
   onQuickGroupSelect?: (group: any) => void;
   onCategoryClick?: (e?: React.MouseEvent) => void;
+  openedPath?: string[];
+  setOpenedPath?: (path: string[]) => void;
 }
 
-const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick }) => {
+const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd, onNodeSelect, activeTab = 'uzly', onQuickGroupSelect, onCategoryClick, openedPath = [], setOpenedPath = () => {} }) => {
-  const [selectedCategory, setSelectedCategory] = useState<any>(null);
   const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({});
   const lastCategoryIdRef = useRef<string | null>(null);
 
-  // Сброс выбранной категории при смене вкладки
-  useEffect(() => {
-    setSelectedCategory(null);
-  }, [activeTab]);
-
   // Запрос для "Общие" (QuickGroups)
   const { data: quickGroupsData, loading: quickGroupsLoading, error: quickGroupsError } = useQuery(GET_LAXIMO_QUICK_GROUPS, {
     variables: { catalogCode: catalogCode || '', vehicleId: vehicleId || '', ssd: ssd || '' },
@@ -51,51 +47,42 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
     }
   });
 
-  const categories = activeTab === 'uzly' ? (quickGroupsData?.laximoQuickGroups || []) : (categoriesData?.laximoCategories || []);
+  // categories теперь зависят от activeTab
+  let categories = activeTab === 'uzly' ? (quickGroupsData?.laximoQuickGroups || []) : (categoriesData?.laximoCategories || []);
+  let selectedCategory: any = null;
+  let currentLevel = 0;
+  let currentList = categories;
+  while (openedPath[currentLevel]) {
+    const found = currentList.find((cat: any) => (cat.quickgroupid || cat.categoryid || cat.id) === openedPath[currentLevel]);
+    if (!found) break;
+    selectedCategory = found;
+    currentList = found.children || [];
+    currentLevel++;
+  }
+
   const loading = activeTab === 'uzly' ? quickGroupsLoading : categoriesLoading;
   const error = activeTab === 'uzly' ? quickGroupsError : categoriesError;
 
   const handleBack = () => {
-    setSelectedCategory(null);
+    setOpenedPath(openedPath.slice(0, openedPath.length - 1));
   };
 
-  const handleCategoryClick = (category: any) => {
+  const handleCategoryClick = (category: any, level: number) => {
-    // Если передан onCategoryClick, используем его
     if (onCategoryClick) {
       onCategoryClick();
       return;
     }
-
-    if (activeTab === 'uzly') {
-      // Логика для вкладки "Общие" (QuickGroups)
     if (category.children && category.children.length > 0) {
-        setSelectedCategory(category);
+      if (openedPath[level] === (category.quickgroupid || category.categoryid || category.id)) {
+        setOpenedPath(openedPath.slice(0, level));
+      } else {
+        setOpenedPath([...openedPath.slice(0, level), (category.quickgroupid || category.categoryid || category.id)]);
+      }
     } else if (category.link && onQuickGroupSelect) {
       onQuickGroupSelect(category);
     } else if (onNodeSelect) {
       onNodeSelect(category);
     }
-    } else {
-      // Логика для вкладки "От производителя" (Categories)
-      if (category.children && category.children.length > 0) {
-        setSelectedCategory(category);
-      } else {
-        // Если нет children, грузим units (подкатегории)
-        const categoryId = category.categoryid || category.quickgroupid || category.id;
-        if (!unitsByCategory[categoryId] && catalogCode && vehicleId) {
-          lastCategoryIdRef.current = categoryId;
-          getUnits({ 
-            variables: { 
-              catalogCode, 
-              vehicleId, 
-              ssd: ssd || '', 
-              categoryId 
-            } 
-          });
-        }
-        setSelectedCategory(category);
-      }
-    }
   };
 
   const handleSubcategoryClick = (subcat: any) => {
@@ -106,7 +93,7 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
         unitid: subcat.unitid || subcat.categoryid || subcat.quickgroupid || subcat.id
       });
     } else {
-      handleCategoryClick(subcat);
+      handleCategoryClick(subcat, 0);
     }
   };
 
@@ -150,7 +137,7 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
           <div
             className="div-block-131"
             key={cat.quickgroupid || cat.categoryid || cat.id || idx}
-            onClick={() => handleCategoryClick(cat)}
+            onClick={() => handleCategoryClick(cat, 0)}
             style={{ cursor: "pointer" }}
           >
             <div className="text-block-57">{cat.name}</div>
@@ -165,21 +152,25 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
       ) : (
         // Список подкатегорий
         <>
-          {/* <div className="div-block-131" onClick={handleBack} style={{ cursor: "pointer", fontWeight: 500 }}>
+          {(() => {
-            <div className="text-block-57">← Назад</div>
+            // Найти текущий уровень вложенности для selectedCategory
-            <div className="w-embed">
+            let level = 0;
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            let list = categories;
-                <rect x="24" width="24" height="24" rx="12" transform="rotate(90 24 0)" fill="currentcolor"></rect>
+            while (openedPath[level] && list) {
-                <path fillRule="evenodd" clipRule="evenodd" d="M10.9303 17L10 16.0825L14.1395 12L10 7.91747L10.9303 7L16 12L10.9303 17Z" fill="white"></path>
+              const found = list.find((cat: any) => (cat.quickgroupid || cat.categoryid || cat.id) === openedPath[level]);
-              </svg>
+              if (!found) break;
-            </div>
+              if (found === selectedCategory) break;
-          </div> */}
+              list = found.children || [];
-          {subcategories.length === 0 && <div style={{ color: "#888", padding: 8 }}>Нет подкатегорий</div>}
+              level++;
-          {subcategories.map((subcat: any, idx: number) => (
+            }
+            // Теперь level - это уровень selectedCategory, подкатегории будут на level+1
+            const subcategories = selectedCategory.children || [];
+            if (subcategories.length === 0) return <div style={{ color: "#888", padding: 8 }}>Нет подкатегорий</div>;
+            return subcategories.map((subcat: any, idx: number) => (
               <div
                 className="div-block-131"
                 key={subcat.quickgroupid || subcat.categoryid || subcat.unitid || subcat.id || idx}
-              onClick={() => handleSubcategoryClick(subcat)}
+                onClick={() => handleCategoryClick(subcat, level + 1)}
                 style={{ cursor: "pointer" }}
               >
                 <div className="text-block-57">{subcat.name}</div>
@@ -190,7 +181,8 @@ const VinCategory: React.FC<VinCategoryProps> = ({ catalogCode, vehicleId, ssd,
                   </svg>
                 </div>
               </div>
-          ))}
+            ));
+          })()}
         </>
       )}
     </div>

src/components/vin/VinLeftbar.tsx

@@ -19,6 +19,9 @@ interface VinLeftbarProps {
   onNodeSelect?: (node: any) => void;
   onActiveTabChange?: (tab: 'uzly' | 'manufacturer') => void;
   onQuickGroupSelect?: (group: any) => void;
+  activeTab?: 'uzly' | 'manufacturer';
+  openedPath?: string[];
+  setOpenedPath?: (path: string[]) => void;
 }
 
 interface QuickGroup {
@@ -28,13 +31,11 @@ interface QuickGroup {
   children?: QuickGroup[];
 }
 
-const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect }) => {
+const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, onNodeSelect, onActiveTabChange, onQuickGroupSelect, activeTab: activeTabProp, openedPath = [], setOpenedPath = () => {} }) => {
   const catalogCode = vehicleInfo?.catalog || '';
   const vehicleId = vehicleInfo?.vehicleid || '';
   const ssd = vehicleInfo?.ssd || '';
-  const [openIndex, setOpenIndex] = useState<number | null>(null);
   const [searchQuery, setSearchQuery] = useState('');
-  const [activeTab, setActiveTab] = useState<'uzly' | 'manufacturer'>('uzly');
   const [executeSearch, { data, loading, error }] = useLazyQuery(GET_LAXIMO_FULLTEXT_SEARCH, { errorPolicy: 'all' });
 
   const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, {
@@ -58,11 +59,11 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
 
   const lastCategoryIdRef = React.useRef<string | null>(null);
 
-  const handleToggle = (idx: number, categoryId: string) => {
+  const handleToggle = (categoryId: string, level: number) => {
-    setOpenIndex(openIndex === idx ? null : idx);
+    if (openedPath[level] === categoryId) {
-    if (openIndex !== idx && !unitsByCategory[categoryId]) {
+      setOpenedPath(openedPath.slice(0, level));
-      lastCategoryIdRef.current = categoryId;
+    } else {
-      getUnits({ variables: { catalogCode, vehicleId, ssd, categoryId } });
+      setOpenedPath([...openedPath.slice(0, level), categoryId]);
     }
   };
 
@@ -117,26 +118,11 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
   });
   const quickGroups = quickGroupsData?.laximoQuickGroups || [];
 
-  const [expandedQuickGroup, setExpandedQuickGroup] = useState<string | null>(null);
+  const handleQuickGroupToggle = (groupId: string, level: number) => {
-  const [expandedSubQuickGroup, setExpandedSubQuickGroup] = useState<string | null>(null);
+    if (openedPath[level] === groupId) {
-
+      setOpenedPath(openedPath.slice(0, level));
-  const handleQuickGroupToggle = (groupId: string) => {
-    setExpandedQuickGroup(prev => (prev === groupId ? null : groupId));
-    setExpandedSubQuickGroup(null);
-  };
-
-  const handleSubQuickGroupToggle = (groupId: string) => {
-    setExpandedSubQuickGroup(prev => (prev === groupId ? null : groupId));
-  };
-
-  const handleQuickGroupClick = (group: any) => {
-    if (group.link) {
-      // Передаем выбранную группу в родительский компонент для отображения справа
-      if (onQuickGroupSelect) {
-        onQuickGroupSelect(group);
-      }
     } else {
-      handleQuickGroupToggle(group.quickgroupid);
+      setOpenedPath([...openedPath.slice(0, level), groupId]);
     }
   };
 
@@ -207,12 +193,6 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
 
   const fulltextResults = fulltextData?.laximoFulltextSearch?.details || [];
 
-  useEffect(() => {
-    if (onActiveTabChange) {
-      onActiveTabChange(activeTab);
-    }
-  }, [activeTab]);
-
   // Если нет данных о транспортном средстве, показываем заглушку
   if (!vehicleInfo) {
     return (
@@ -281,18 +261,15 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
             className={
               searchQuery
                 ? 'button-23 w-button'
-                : activeTab === 'uzly'
+                : activeTabProp === 'uzly'
                   ? 'button-3 w-button'
                   : 'button-23 w-button'
             }
             onClick={e => {
               e.preventDefault();
               if (searchQuery) setSearchQuery('');
-              setActiveTab('uzly');
+              if (onActiveTabChange) onActiveTabChange('uzly');
-              // Очищаем выбранную группу при смене таба
+              if (onQuickGroupSelect) onQuickGroupSelect(null);
-              if (onQuickGroupSelect) {
-                onQuickGroupSelect(null);
-              }
             }}
           >
             Узлы
@@ -302,25 +279,22 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
             className={
               searchQuery
                 ? 'button-23 w-button'
-                : activeTab === 'manufacturer'
+                : activeTabProp === 'manufacturer'
                   ? 'button-3 w-button'
                   : 'button-23 w-button'
             }
             onClick={e => {
               e.preventDefault();
               if (searchQuery) setSearchQuery('');
-              setActiveTab('manufacturer');
+              if (onActiveTabChange) onActiveTabChange('manufacturer');
-              // Очищаем выбранную группу при смене таба
+              if (onQuickGroupSelect) onQuickGroupSelect(null);
-              if (onQuickGroupSelect) {
-                onQuickGroupSelect(null);
-              }
             }}
           >
             От производителя
           </a>
         </div>
         {/* Tab content start */}
-        {activeTab === 'uzly' ? (
+        {activeTabProp === 'uzly' ? (
           // Общие (QuickGroups - бывшие "От производителя")
           quickGroupsLoading ? (
             <div style={{ padding: 16, textAlign: 'center' }}>Загружаем группы быстрого поиска...</div>
@@ -330,7 +304,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
             <>
               {(quickGroups as QuickGroup[]).map((group: QuickGroup) => {
                 const hasChildren = group.children && group.children.length > 0;
-                const isOpen = expandedQuickGroup === group.quickgroupid;
+                const isOpen = openedPath.includes(group.quickgroupid);
 
                 if (!hasChildren) {
                   return (
@@ -340,7 +314,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                       className="dropdown-link-3 w-dropdown-link"
                       onClick={(e) => {
                         e.preventDefault();
-                        handleQuickGroupClick(group);
+                        handleQuickGroupToggle(group.quickgroupid, 0);
                       }}
                     >
                       {group.name}
@@ -357,7 +331,10 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                   >
                     <div
                       className={`dropdown-toggle-3 w-dropdown-toggle${isOpen ? " w--open active" : ""}`}
-                      onClick={() => handleQuickGroupToggle(group.quickgroupid)}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleQuickGroupToggle(group.quickgroupid, 0);
+                      }}
                       style={{ cursor: "pointer" }}
                     >
                       <div className="w-icon-dropdown-toggle"></div>
@@ -366,7 +343,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                     <nav className={`dropdown-list-4 w-dropdown-list${isOpen ? " w--open" : ""}`}>
                       {group.children?.map((child: QuickGroup) => {
                         const hasSubChildren = child.children && child.children.length > 0;
-                        const isChildOpen = expandedSubQuickGroup === child.quickgroupid;
+                        const isChildOpen = openedPath.includes(child.quickgroupid);
 
                         if (!hasSubChildren) {
                           return (
@@ -376,7 +353,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                               className="dropdown-link-3 w-dropdown-link"
                               onClick={(e) => {
                                 e.preventDefault();
-                                handleQuickGroupClick(child);
+                                handleQuickGroupToggle(child.quickgroupid, 1);
                               }}
                             >
                               {child.name}
@@ -393,7 +370,10 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                           >
                             <div
                               className={`dropdown-toggle-card w-dropdown-toggle pl-0${isChildOpen ? " w--open active" : ""}`}
-                              onClick={() => handleSubQuickGroupToggle(child.quickgroupid)}
+                              onClick={(e) => {
+                                e.preventDefault();
+                                handleQuickGroupToggle(child.quickgroupid, 2);
+                              }}
                               style={{ cursor: "pointer" }}
                             >
                               <div className="w-icon-dropdown-toggle"></div>
@@ -407,7 +387,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                                   className="dropdown-link-3 w-dropdown-link"
                                   onClick={(e) => {
                                     e.preventDefault();
-                                    handleQuickGroupClick(subChild);
+                                    handleQuickGroupToggle(subChild.quickgroupid, 3);
                                   }}
                                 >
                                   {subChild.name}
@@ -434,7 +414,7 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
           ) : (
             <>
               {categories.map((category: any, idx: number) => {
-                const isOpen = openIndex === idx;
+                const isOpen = openedPath.includes(category.quickgroupid);
                 const subcategories = category.children && category.children.length > 0
                   ? category.children
                   : unitsByCategory[category.quickgroupid] || [];
@@ -447,7 +427,10 @@ const VinLeftbar: React.FC<VinLeftbarProps> = ({ vehicleInfo, onSearchResults, o
                   >
                     <div
                       className={`dropdown-toggle-3 w-dropdown-toggle${isOpen ? " w--open" : ""}`}
-                      onClick={() => handleToggle(idx, category.quickgroupid)}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleToggle(category.quickgroupid, 0);
+                      }}
                       style={{ cursor: "pointer" }}
                     >
                       <div className="w-icon-dropdown-toggle"></div>

src/pages/home-new.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Head from 'next/head';
+import CatalogSubscribe from "@/components/CatalogSubscribe";
+import MobileMenuBottomSection from "@/components/MobileMenuBottomSection";
+import NewsAndPromos from "@/components/index/NewsAndPromos";
+import Footer from "@/components/Footer";
+import IndexTopMenuNav from "@/components/index/IndexTopMenuNav";
+import ProductOfDaySection from "@/components/index/ProductOfDaySection";
+import CategoryNavSection from "@/components/index/CategoryNavSection";
+import BrandSelectionSection from "@/components/index/BrandSelectionSection";
+import BestPriceSection from "@/components/index/BestPriceSection";
+import TopSalesSection from "@/components/index/TopSalesSection";
+import PromoImagesSection from "@/components/index/PromoImagesSection";
+import NewArrivalsSection from '@/components/index/NewArrivalsSection';
+import SupportVinSection from '@/components/index/SupportVinSection';
+
+export default function HomeNew () {
+  return (
+  <>
+    <Head>
+      <title>Home New</title>
+      <link href="https://fonts.googleapis.com" rel="preconnect" />
+        <link href="https://fonts.gstatic.com" rel="preconnect" crossOrigin="anonymous" />
+        <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon" />
+        <link href="images/webclip.png" rel="apple-touch-icon" />
+    </Head>
+    <IndexTopMenuNav />
+    <ProductOfDaySection />
+    <CategoryNavSection />
+    <BrandSelectionSection />
+    <BestPriceSection />
+    <TopSalesSection />
+    <PromoImagesSection />
+    <NewArrivalsSection />
+    <SupportVinSection />
+    <NewsAndPromos />
+      <section className="section-3">
+        <CatalogSubscribe />
+      </section>
+      <Footer />
+      <MobileMenuBottomSection />
+  </>
+  );
+}

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

@@ -58,6 +58,7 @@ const VehicleDetailsPage = () => {
   const [showKnot, setShowKnot] = useState(false);
   const [foundParts, setFoundParts] = useState<any[]>([]);
   const [activeTab, setActiveTab] = useState<'uzly' | 'manufacturer'>('uzly');
+  const [openedPath, setOpenedPath] = useState<string[]>([]);
   const [searchState, setSearchState] = useState<{
     loading: boolean;
     error: any;
@@ -329,6 +330,9 @@ const VehicleDetailsPage = () => {
                       onNodeSelect={setSelectedNode}
                       onActiveTabChange={(tab) => setActiveTab(tab)}
                       onQuickGroupSelect={setSelectedQuickGroup}
+                      activeTab={activeTab}
+                      openedPath={openedPath}
+                      setOpenedPath={setOpenedPath}
                     />
                     {searchState.isSearching ? (
                       <div className="knot-parts">
@@ -399,6 +403,8 @@ const VehicleDetailsPage = () => {
                         onNodeSelect={setSelectedNode}
                         activeTab={activeTab}
                         onQuickGroupSelect={setSelectedQuickGroup}
+                        openedPath={openedPath}
+                        setOpenedPath={setOpenedPath}
                       />
                     )}
                   </>

src/styles/my.css

@@ -469,7 +469,13 @@ input#VinSearchInput {
 
 
 .dropdown-toggle-card {
+  align-self: stretch;
+  margin-bottom: 5px;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 6px 15px;
   padding-left: 0 !important;
+  margin-left: 0 !important;
 }
 
 .dropdown-link-3 {
@@ -482,7 +488,7 @@ input#VinSearchInput {
 
 .dropdown-toggle-3.active, .dropdown-toggle-card.active {
   background-color: var(--background);
-  
+  font-weight: 700;
 }
 
 .dropdown-toggle-3.active {
@@ -490,3 +496,227 @@ input#VinSearchInput {
   
 }
 
+
+.news-index-block-copy {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  flex: 1;
+  max-width: 100%;
+  margin-top: 0;
+  margin-bottom: 60px;
+}
+.news-index-block {
+  grid-column-gap: 40px;
+  grid-row-gap: 40px;
+  flex: 1;
+  max-width: 100%;
+  margin-bottom: 100px;
+}
+
+@media screen and (max-width: 767px) {
+  .news-index-block {
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+  }
+  .inbt, .news-index-block-copy {
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+  }
+}
+
+.news-index-block-copy {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  flex: 1;
+  max-width: 100%;
+  margin-top: 0;
+  margin-bottom: 60px;
+}
+.bottom_head {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+@media screen and (max-width: 479px) {
+  .bottom_head {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+}
+
+.bottom_head {
+  background-color: var(--back);
+  flex-flow: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+  margin-top: -15px;
+  padding-left: 60px;
+  padding-right: 60px;
+  display: flex;
+}
+body {
+  background-color: var(--background);
+  --_fonts---font-family: Onest, sans-serif;
+  --_fonts---color--dark-blue: #0d336c;
+  --_fonts---font-size--core: 14px;
+  --_fonts---font-size--small-font-size: 14px;
+  --_fonts---color--black: #000;
+  --_fonts---font-size--bigger: 18px;
+  --_fonts---color--white: white;
+  --_fonts---color--light-blue-grey: #8e9aac;
+  --_fonts---h1: 36px;
+  --_fonts---color--light-blue: #b7cae2;
+  --_fonts---color--grey: #747474;
+  --_fonts---font-size--heading-3: 24px;
+  --_fonts---font-size--heading-2: 30px;
+  --_fonts---color--green: #4db45e;
+  --_fonts---font-size--supersmall: 12px;
+  font-family: Onest, sans-serif;
+}
+
+
+.menu-button.w--open {
+  z-index: 2000;
+  background-color: var(--red);
+  color: var(--white);
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  left: auto;
+}
+.heading-7 {
+  z-index: 999;
+  color: var(--_fonts---color--black);
+  font-size: var(--_fonts---font-size--heading-3);
+  width: 200px;
+  margin-top: 30px;
+  margin-bottom: 0;
+  margin-left: 30px;
+  line-height: 130%;
+  position: absolute;
+}
+.heading-7-white {
+  z-index: 999;
+  color: var(--_fonts---color--white);
+  font-size: var(--_fonts---font-size--heading-3);
+  width: 200px;
+  margin-top: 30px;
+  margin-bottom: 0;
+  margin-left: 30px;
+  line-height: 130%;
+  position: absolute;
+}
+.mobile-menu-buttom-section {
+  z-index: 1900;
+  background-color: var(--white);
+  display: none;
+  position: fixed;
+  inset: auto 0% 0%;
+}
+
+.nav-menu-3 {
+  z-index: 1900;
+  background-color: #0000;
+  width: 100%;
+  height: auto;
+  display: none;
+  position: relative;
+  left: auto;
+}
+
+.dropdown-toggle-2 {
+  z-index: 999;
+  display: flex;
+}
+
+.dropdown-toggle-2.w--open {
+  z-index: 999998;
+}
+
+.div-block-28 {
+  background-color: var(--background);
+  height: auto;
+  margin-top: 60px;
+  padding-bottom: 60px;
+  padding-left: 60px;
+  position: relative;
+  bottom: auto;
+  left: 0%;
+  right: 0%;
+}
+
+@media screen and (max-width: 991px) {
+  .nav-menu-2 {
+    float: none;
+    flex-flow: row;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+    display: block;
+    position: relative;
+    top: 20px;
+    left: -30px;
+    right: 0;
+  }
+
+  .div-block-28 {
+    padding-left: 30px;
+  }
+}
+
+.heading-8-copy {
+  height: 40px;
+}
+
+
+.flex-block-108 , .flex-block-108-copy, .w-layout-hflex.flex-block-121, .core-product-search{
+  overflow-x: scroll;
+  overflow-y: hidden;
+
+  
+}
+/* .flex-block-108-copy::-webkit-scrollbar {
+  display: none;
+}
+.flex-block-121::-webkit-scrollbar {
+  display: none;
+} */
+
+
+.flex-block-108 , .flex-block-108-copy, .w-layout-hflex.flex-block-121, .core-product-search {
+  overflow-x: scroll;
+  
+  overflow-y: hidden;
+  scrollbar-width: none; /* Firefox */
+}
+.flex-block-108::-webkit-scrollbar, .flex-block-108-copy::-webkit-scrollbar, .w-layout-hflex.flex-block-121::-webkit-scrollbar, .core-product-search::-webkit-scrollbar {
+  display: none; /* Chrome, Safari */
+}
+
+
+.flex-block-44 {
+ max-width: 33%;
+}
+
+.text-block-21 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flex-block-45 {
+  width: 80%;
+}
+
+.flex-block-39 {
+  max-width: 100%;
+}
+
+.heading-9-copy {
+  min-width: 100px;
+  
+}

src/styles/protekproject.webflow.css

@@ -3,7 +3,7 @@
   --back: #0d336c;
   --_fonts---font-family: Onest, sans-serif;
   --_fonts---color--dark-blue: #0d336c;
-  --_fonts---font-size--core: 14px;
+  --_fonts---font-size--core: 16px;
   --_fonts---font-size--small-font-size: 14px;
   --_fonts---color--black: #000;
   --_fonts---font-size--bigger: 18px;
@@ -17,7 +17,6 @@
   --_button---dark_blue: #0d336c;
   --_fonts---color--white: white;
   --_button---hover-dark_blue: #00245b;
-  --_button---black: #000;
   --_button---color: white;
   --_round---big-20: 20px;
   --_fonts---color--light-blue-grey: #8e9aac;
@@ -34,6 +33,7 @@
   --_fonts---font-size--heading-2: 30px;
   --light-grey: #ececec;
   --_button---light-blue: #e6edf6;
+  --_button---black: #000;
   --_fonts---color--green: #4db45e;
   --_fonts---font-size--supersmall: 12px;
   --light-blue: #dae5ef;
@@ -787,8 +787,6 @@
   .w-layout-blockcontainer {
     max-width: 728px;
   }
-
-
 }
 
 @media screen and (max-width: 767px) {
@@ -796,8 +794,6 @@
     max-width: none;
   }
 
-
-
   .w-commerce-commercelayoutcontainer {
     flex-direction: column;
     align-items: stretch;
@@ -828,8 +824,8 @@
 }
 
 body {
-  background-color: var(--background);
+  color: #333;
-  --_fonts---font-family: Onest, sans-serif;
+  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
   font-size: 14px;
   line-height: 20px;
 }
@@ -937,7 +933,7 @@ body {
 .flex-block {
   grid-column-gap: 15px;
   grid-row-gap: 15px;
-  display: flex;
+  display: none;
 }
 
 .flex-block-2 {
@@ -968,14 +964,14 @@ body {
   display: flex;
 }
 
-.bottom_head {
+.topmenuh {
   background-color: var(--back);
   flex-flow: column;
   justify-content: center;
   align-items: flex-start;
   width: 100%;
   height: auto;
-  margin-top: -15px;
+  margin-top: 0;
   padding-left: 60px;
   padding-right: 60px;
   display: flex;
@@ -995,7 +991,9 @@ body {
   background-color: #fff;
   justify-content: center;
   align-items: center;
-  padding: 12px 16px 13px;
+  width: 50px;
+  height: 44px;
+  padding: 13px 12px;
   display: flex;
 }
 
@@ -1005,7 +1003,7 @@ body {
 }
 
 .menu-button.w--open {
-  z-index: 2000;
+  z-index: 9999999;
   background-color: var(--red);
   color: var(--white);
   justify-content: center;
@@ -1114,6 +1112,7 @@ body {
   cursor: pointer;
   justify-content: flex-start;
   align-items: center;
+  height: 44px;
   padding: 6px 15px;
   text-decoration: none;
   display: flex;
@@ -1142,18 +1141,22 @@ body {
 .left-arrow {
   justify-content: space-between;
   align-items: center;
-  margin-left: -40px;
+  margin-left: 0;
+  padding-left: 40px;
   display: flex;
   position: absolute;
 }
 
+.left-arrow:hover {
+  display: flex;
+}
+
 .icon-2 {
-  color: var(--_button---black);
   justify-content: center;
   align-items: center;
-  width: 100%;
+  width: 18px;
-  height: 100%;
+  height: 18px;
-  margin: 0;
+  margin: auto;
   font-size: 24px;
   font-weight: 700;
   display: flex;
@@ -1168,28 +1171,28 @@ body {
   background-color: var(--back);
   border: 1px #000;
   flex: 1;
-  min-width: 100%;
   max-width: 100%;
-  height: 480px;
+  height: 220px;
   margin-left: 0;
   margin-right: 0;
+  overflow: hidden;
 }
 
 .flex-block-5 {
-  grid-column-gap: 40px;
+  grid-column-gap: 20px;
-  grid-row-gap: 40px;
+  grid-row-gap: 20px;
   flex: 1;
   max-width: 100%;
+  margin-top: 20px;
 }
 
 .flex-block-6 {
   grid-column-gap: 20px;
   grid-row-gap: 20px;
   flex-flow: wrap;
-  grid-template: ". ."
+  grid-template: "."
-                 ". ."
+                 "."
-                 "Area Area"
+                 / 1fr 1fr 1fr 1fr;
-                 / 1fr 1fr;
   grid-auto-columns: 1fr;
   align-self: stretch;
   display: grid;
@@ -1514,7 +1517,7 @@ body {
   padding: 5px;
   font-weight: 600;
   position: relative;
-  top: -45px;
+  top: -35px;
 }
 
 .text-block-8 {
@@ -1557,7 +1560,7 @@ body {
   box-sizing: content-box;
   object-fit: contain;
   width: 100%;
-  height: 100%;
+  height: 180px;
   overflow: hidden;
 }
 
@@ -1885,9 +1888,11 @@ body {
 .flex-block-24 {
   grid-column-gap: 40px;
   grid-row-gap: 40px;
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
   flex-flow: column;
   flex: 1;
-  padding-top: 30px;
+  padding: 30px 40px;
 }
 
 .flex-block-25 {
@@ -1901,9 +1906,13 @@ body {
   text-decoration: none;
 }
 
+.link-block-6:hover {
+  color: var(--_button---primary);
+}
+
 .flex-block-26 {
-  grid-column-gap: 26px;
+  grid-column-gap: 22px;
-  grid-row-gap: 26px;
+  grid-row-gap: 22px;
   flex: 1;
   min-width: 140px;
 }
@@ -1942,8 +1951,8 @@ body {
   border-radius: var(--_round---supersmall-4);
   background-color: var(--white);
   color: var(--_fonts---color--grey);
-  height: 52px;
+  height: 46px;
-  margin-bottom: 18px;
+  margin-bottom: 12px;
   padding: 12px 24px;
 }
 
@@ -2009,7 +2018,7 @@ body {
   align-self: stretch;
   align-items: center;
   max-width: 100%;
-  padding: 30px 40px;
+  padding: 60px 40px;
   display: flex;
 }
 
@@ -2031,7 +2040,7 @@ body {
 .flex-block-30 {
   grid-column-gap: 10px;
   grid-row-gap: 10px;
-  max-width: 840px;
+  max-width: 540px;
 }
 
 .flex-block-31 {
@@ -2046,22 +2055,23 @@ body {
   flex: 1;
   justify-content: flex-start;
   align-items: flex-start;
-  min-width: 480px;
+  min-width: 240px;
-  height: 260px;
+  height: 140px;
   padding-top: 0;
   padding-left: 0;
   display: flex;
+  overflow: hidden;
 }
 
 .div-block-12.small {
-  min-width: 300px;
+  min-width: 240px;
 }
 
 .heading-7 {
   z-index: 999;
   color: var(--_fonts---color--black);
-  font-size: var(--_fonts---font-size--heading-3);
+  font-size: var(--_fonts---font-size--bigger);
-  width: 200px;
+  width: 160px;
   margin-top: 30px;
   margin-bottom: 0;
   margin-left: 30px;
@@ -2088,13 +2098,15 @@ body {
 }
 
 .heading_news {
-  font-size: var(--_fonts---font-size--heading-3);
+  font-size: var(--_fonts---font-size--bigger);
   margin-top: 0;
   margin-bottom: 0;
+  line-height: 130%;
 }
 
 .text-block-20 {
   color: var(--_fonts---color--grey);
+  font-size: var(--_fonts---font-size--small-font-size);
 }
 
 .div-block-13 {
@@ -2158,12 +2170,18 @@ body {
 
 .slide-nav {
   margin-bottom: -55px;
+  display: none;
 }
 
 .right-arrow {
   justify-content: flex-end;
   align-items: center;
-  margin-right: -40px;
+  margin-right: 0;
+  padding-right: 40px;
+  display: flex;
+}
+
+.right-arrow:hover {
   display: flex;
 }
 
@@ -2465,7 +2483,7 @@ body {
 
 .delivery-time-search {
   font-size: var(--_fonts---font-size--core);
-  width: 160px;
+  width: 120px;
   max-height: 40px;
   overflow: hidden;
 }
@@ -2478,7 +2496,7 @@ body {
 }
 
 .price.opencard {
-  width: 170px;
+  width: 70px;
 }
 
 .add-to-cart-block {
@@ -2619,7 +2637,7 @@ body {
   color: var(--_fonts---color--black);
   font-size: var(--_fonts---font-size--core);
   text-align: left;
-  width: 200px;
+  width: 60px;
   max-height: 40px;
   overflow: hidden;
 }
@@ -2848,7 +2866,6 @@ body {
   flex-flow: column;
   flex: 1;
   display: flex;
-  
 }
 
 .text-field-copy {
@@ -2867,7 +2884,7 @@ body {
   color: var(--_fonts---color--black);
   font-size: var(--_fonts---font-size--bigger);
   text-align: right;
-
+  width: 100px;
   margin-top: 0;
   margin-bottom: 0;
   font-weight: 700;
@@ -3115,7 +3132,6 @@ body {
 }
 
 .block-name {
-  max-width: 300px;
   flex-flow: column;
   flex: 1;
   display: flex;
@@ -3149,7 +3165,7 @@ body {
 .sort-item-brand {
   color: var(--_fonts---color--light-blue-grey);
   font-size: var(--_fonts---font-size--small-font-size);
-  width: 120px;
+  width: 100px;
 }
 
 .sort-item-brand.first {
@@ -3201,7 +3217,7 @@ body {
   align-items: center;
   margin-bottom: 20px;
   padding-left: 10px;
-  padding-right: 15px;
+  padding-right: 10px;
 }
 
 .flex-block-62 {
@@ -3609,7 +3625,7 @@ body {
 }
 
 .code-embed-5 {
-  width: 30px;
+  width: 26px;
   height: 20px;
 }
 
@@ -3914,7 +3930,6 @@ body {
   font-size: var(--_fonts---font-size--small-font-size);
   height: 20px;
   margin-top: 0;
-  max-width: 100%;
   margin-bottom: 0;
   font-weight: 700;
 }
@@ -3997,7 +4012,7 @@ body {
 }
 
 .mobile-menu-buttom-section {
-  z-index: 1900;
+  z-index: 9999999;
   background-color: var(--white);
   display: none;
   position: fixed;
@@ -4031,7 +4046,6 @@ body {
   position: relative;
 }
 
-
 .button-for-mobile-menu-block:hover {
   background-color: var(--_button---hover-dark_blue);
 }
@@ -4108,7 +4122,7 @@ body {
   margin-top: 60px;
   padding-bottom: 60px;
   padding-left: 60px;
-  position: relative;
+  position: absolute;
   bottom: auto;
   left: 0%;
   right: 0%;
@@ -4222,12 +4236,12 @@ body {
 }
 
 .nav-menu-3 {
-  z-index: 1900;
+  z-index: 99999999;
   background-color: #0000;
   width: 100%;
   height: auto;
   display: none;
-  position: relative;
+  position: absolute;
   left: auto;
 }
 
@@ -4337,7 +4351,7 @@ body {
   color: var(--_fonts---color--black);
   font-size: var(--_fonts---font-size--bigger);
   text-align: right;
-  max-width: 200px;
+  max-width: 100px;
   margin-top: 0;
   margin-bottom: 0;
   font-weight: 700;
@@ -4587,7 +4601,6 @@ body {
   justify-content: flex-start;
   align-self: auto;
   align-items: flex-start;
-  margin-bottom: 80px;
   display: flex;
 }
 
@@ -4875,9 +4888,10 @@ body {
   flex: 0 auto;
   justify-content: space-between;
   align-self: stretch;
-  align-items: flex-start;
+  align-items: center;
   margin: -20px;
-  padding: 20px 20px 40px;
+  padding: 20px;
+  overflow: hidden;
 }
 
 .mask {
@@ -4887,14 +4901,25 @@ body {
 .div-block-34 {
   border: 1px solid var(--light-blue);
   background-color: var(--white);
+  opacity: 0;
+  color: var(--back);
   border-radius: 100px;
-  width: 60px;
+  flex: none;
-  height: 60px;
+  justify-content: center;
-  position: absolute;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  display: flex;
 }
 
 .div-block-34:hover {
   background-color: var(--_button---primary);
+  color: var(--white);
+  border-style: none;
+}
+
+.div-block-34.right {
+  transform: rotate(180deg);
 }
 
 .heading-17 {
@@ -5015,9 +5040,10 @@ body {
   flex: 1;
   justify-content: flex-start;
   align-items: flex-start;
-  min-width: 480px;
+  min-width: 240px;
-  height: 260px;
+  height: 140px;
   display: flex;
+  overflow: hidden;
 }
 
 .div-block-12-copy.small {
@@ -5030,8 +5056,9 @@ body {
   flex: 1;
   justify-content: flex-start;
   align-items: flex-start;
-  height: 260px;
+  height: 140px;
   display: flex;
+  overflow: hidden;
 }
 
 .div-block-123.small {
@@ -5041,7 +5068,7 @@ body {
 .heading-7-white {
   z-index: 999;
   color: var(--_fonts---color--white);
-  font-size: var(--_fonts---font-size--heading-3);
+  font-size: var(--_fonts---font-size--bigger);
   width: 200px;
   margin-top: 30px;
   margin-bottom: 0;
@@ -5070,18 +5097,28 @@ body {
   background-image: none;
   justify-content: flex-start;
   align-items: flex-start;
-  min-width: 340px;
+  min-width: 240px;
+  height: 140px;
   padding-top: 0;
   padding-left: 0;
   display: flex;
+  overflow: hidden;
 }
 
 .image-22 {
+  box-sizing: border-box;
   object-fit: contain;
+  object-position: 100% 100%;
+  max-width: 80%;
   height: 100%;
   margin-left: auto;
   margin-right: 0;
+  display: block;
   position: relative;
+  top: auto;
+  bottom: 0;
+  right: 0;
+  overflow: clip;
 }
 
 .section-5 {
@@ -5206,11 +5243,12 @@ body {
 }
 
 .news-index-block {
-  grid-column-gap: 40px;
+  grid-column-gap: 20px;
-  grid-row-gap: 40px;
+  grid-row-gap: 20px;
   flex: 1;
   max-width: 100%;
-  margin-bottom: 100px;
+  margin-top: 20px;
+  margin-bottom: 60px;
 }
 
 .section-6 {
@@ -5286,6 +5324,7 @@ body {
 }
 
 .div-block-127 {
+  border: 1px solid var(--_icon---light-blue-grey);
   color: var(--_icon---light-blue-grey);
   border-radius: 50px;
   flex: none;
@@ -5299,7 +5338,7 @@ body {
 }
 
 .div-block-127:hover {
-  
+  border-color: var(--_button---primary);
   color: var(--_button---primary);
 }
 
@@ -5364,8 +5403,9 @@ body {
 }
 
 .favcardcat {
+  border: 1px none var(--_icon---light-blue-grey);
   background-color: var(--white);
-  color: var(--_icon---light-blue-grey);
+  color: var(--_fonts---color--white);
   border-radius: 50px;
   flex: none;
   justify-content: center;
@@ -5380,6 +5420,7 @@ body {
 }
 
 .favcardcat:hover {
+  border-color: var(--_button---primary);
   color: var(--_button---primary);
 }
 
@@ -5387,6 +5428,1118 @@ body {
   flex: none;
 }
 
+.tabson {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  display: none;
+}
+
+.code-embed-14 {
+  width: 28px;
+  height: 28px;
+  margin: auto;
+}
+
+.code-embed-15 {
+  margin-top: 20px;
+  position: absolute;
+}
+
+.topnav {
+  background-color: #0000;
+  flex-flow: column;
+  margin-left: 220px;
+  margin-right: 0;
+  display: block;
+  position: static;
+}
+
+.searcj {
+  border-radius: var(--_round---small-8);
+  flex: 1;
+  align-self: stretch;
+  height: 44px;
+  margin-bottom: 0;
+  padding: 0;
+}
+
+.searcj.big {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.topmenub {
+  flex-flow: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  height: auto;
+  margin-top: 0;
+  padding-left: 60px;
+  padding-right: 60px;
+  display: flex;
+}
+
+.tb {
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: auto;
+  max-width: 1580px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 40px;
+  display: block;
+}
+
+.tb.nav {
+  height: auto;
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+.tb.info {
+  width: 100%;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.tb.subscribe {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.tb.footer {
+  background-color: var(--back);
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.link-block-8 {
+  border-radius: var(--_round---supersmall-4);
+  background-color: var(--white);
+  color: #000;
+  font-size: var(--_fonts---font-size--core);
+  flex: none;
+  padding: 4px 8px;
+  text-decoration: none;
+}
+
+.link-block-8.green {
+  background-color: var(--green);
+  color: var(--_fonts---color--white);
+}
+
+.link-block-8.orange {
+  color: var(--_fonts---color--white);
+  background-color: #ff5f00;
+}
+
+.flex-block-107 {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  overflow: hidden;
+}
+
+.batd {
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: auto;
+  max-width: 1580px;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+.batd.nav {
+  height: auto;
+  padding-top: 0;
+}
+
+.batd.info {
+  width: 100%;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.batd.subscribe {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.batd.footer {
+  background-color: var(--back);
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.div-block-128 {
+  background-image: url('/images/bannertop.jpg');
+  background-position: 0%;
+  background-repeat: no-repeat;
+  background-size: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.div-block-129 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  flex-flow: column;
+  flex: none;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 330px;
+  height: 220px;
+  padding: 30px;
+  display: flex;
+}
+
+.flex-block-108 {
+  grid-column-gap: 18px;
+  grid-row-gap: 18px;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: scroll;
+}
+
+.heading-18 {
+  font-size: var(--_fonts---font-size--core);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 900;
+}
+
+.flex-block-109 {
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+  flex: 0 auto;
+  grid-template-rows: auto auto;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-columns: 1fr;
+  justify-content: space-between;
+  align-self: stretch;
+  align-items: center;
+  height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: flex;
+}
+
+.saletag {
+  border-radius: var(--_round---small-8);
+  background-color: var(--green);
+  color: var(--_fonts---color--white);
+  padding: 4px 5px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.flex-block-110 {
+  justify-content: flex-start;
+  align-self: stretch;
+  align-items: center;
+}
+
+.flex-block-111 {
+  grid-column-gap: 6px;
+  grid-row-gap: 6px;
+}
+
+.arbd {
+  border: 1px solid var(--light-blue);
+  background-color: var(--white);
+  opacity: 0;
+  color: var(--back);
+  border-radius: 100px;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  display: flex;
+}
+
+.arbd:hover {
+  background-color: var(--_button---primary);
+  color: var(--white);
+  border-style: none;
+}
+
+.arbd.right {
+  transform: rotate(180deg);
+}
+
+.catnav {
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  padding-top: 40px;
+  padding-left: 60px;
+  padding-right: 60px;
+  display: flex;
+}
+
+.ci1 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.text-block-54 {
+  color: var(--_fonts---color--black);
+  flex: 1;
+  padding-top: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.image-25 {
+  margin: auto 0 0 auto;
+  display: block;
+  position: relative;
+  bottom: 0;
+  right: 36px;
+}
+
+.text-block-55 {
+  color: var(--_fonts---color--light-blue-grey);
+}
+
+.flex-block-112 {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  color: var(--red);
+  margin-top: 10px;
+}
+
+.flex-block-113 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  flex: 0 auto;
+  align-self: stretch;
+  padding: 20px;
+}
+
+.button-3 {
+  border-radius: var(--_button---round-12px);
+  background-color: var(--_button---primary);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 15px;
+  display: flex;
+}
+
+.button-3:hover {
+  background-color: var(--_button---hover-red);
+}
+
+.button-23 {
+  border-radius: var(--_button---round-12px);
+  background-color: var(--_button---light-blue);
+  color: var(--_fonts---color--black);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  padding: 10px 25px;
+  display: flex;
+}
+
+.button-23:hover {
+  background-color: var(--_button---primary);
+  color: var(--_fonts---color--white);
+}
+
+.flex-block-114 {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  align-self: stretch;
+  margin-bottom: 30px;
+}
+
+.dropdown-4 {
+  flex-flow: column;
+  justify-content: space-between;
+  align-self: stretch;
+  align-items: center;
+  margin-left: 0;
+  margin-right: 0;
+  display: flex;
+}
+
+.dropdown-toggle-3 {
+  border-top-right-radius: var(--_round---normal);
+  border-bottom-right-radius: var(--_round---normal);
+  border-left: 2px solid #0000;
+  flex: 1;
+  align-self: stretch;
+  margin-bottom: 5px;
+  margin-left: 0;
+  margin-right: 0;
+  padding: 6px 15px;
+}
+
+.dropdown-toggle-3:hover {
+  border-left: 2px solid var(--red);
+}
+
+.dropdown-toggle-3:active {
+  background-color: var(--background);
+}
+
+.dropdown-list-4 {
+  background-color: #0000;
+  flex: 1;
+  align-self: stretch;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  padding-left: 25px;
+  display: none;
+  position: static;
+  top: 40px;
+}
+
+.dropdown-link-3 {
+  color: var(--_fonts---color--black);
+  padding: 5px 0;
+}
+
+.dropdown-link-3:hover {
+  color: var(--red);
+}
+
+.text-block-56 {
+  color: var(--_fonts---color--black);
+}
+
+.div-block-131 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  color: var(--red);
+  flex-flow: column;
+  flex: 1;
+  justify-content: space-between;
+  align-items: flex-start;
+  min-width: 230px;
+  min-height: 180px;
+  padding: 20px;
+  display: flex;
+}
+
+.div-block-131:hover {
+  background-color: var(--light-blue);
+  color: var(--_button---hover-red);
+}
+
+.text-block-57 {
+  color: var(--_fonts---color--black);
+  font-size: var(--_fonts---font-size--core);
+  word-break: break-all;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+  font-weight: 600;
+}
+
+.vinleftbar {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  flex: none;
+  width: 320px;
+}
+
+.container-vin {
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: auto;
+  max-width: 1580px;
+  margin-bottom: 60px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 40px;
+  display: block;
+}
+
+.container-vin.nav {
+  height: auto;
+  padding-top: 0;
+}
+
+.container-vin.info {
+  width: 100%;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.container-vin.subscribe {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.container-vin.footer {
+  background-color: var(--back);
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.knot-img {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  color: var(--black);
+  flex-flow: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: flex-start;
+  min-width: 320px;
+  min-height: 180px;
+  padding: 40px;
+  display: flex;
+}
+
+.knotinfo {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  color: var(--red);
+  flex-flow: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-width: 240px;
+  padding: 20px;
+  display: flex;
+}
+
+.heading-19 {
+  color: var(--_fonts---color--black);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 24px;
+  font-weight: 600;
+  line-height: 36px;
+}
+
+.partsname {
+  flex: 1;
+  max-width: 240px;
+  max-height: 40px;
+  overflow: hidden;
+}
+
+.oemnuber {
+  width: 100px;
+}
+
+.flex-block-115 {
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  justify-content: space-between;
+  align-self: stretch;
+  align-items: flex-start;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding: 5px 20px;
+}
+
+.showallparts {
+  border-radius: var(--_button---round-12px);
+  background-color: var(--_button---light-blue);
+  color: var(--_fonts---color--black);
+  flex: none;
+  justify-content: center;
+  align-self: stretch;
+  align-items: center;
+  padding: 10px 25px;
+  display: flex;
+}
+
+.showallparts:hover {
+  background-color: var(--_button---primary);
+  color: var(--_fonts---color--white);
+}
+
+.image-26 {
+  object-fit: contain;
+  flex: 0 auto;
+  align-self: auto;
+  min-width: 200px;
+}
+
+.knotin {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  color: var(--red);
+  flex-flow: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  max-width: 480px;
+  padding: 20px;
+  display: flex;
+}
+
+.knot-parts {
+  grid-column-gap: 5px;
+  grid-row-gap: 5px;
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  color: var(--black);
+  flex-flow: column;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: flex-start;
+  min-width: 320px;
+  min-height: 180px;
+  padding: 40px;
+  display: flex;
+}
+
+.nuberlist {
+  justify-content: center;
+  align-items: center;
+  width: 20px;
+  display: flex;
+}
+
+.knotlistitem {
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  justify-content: space-between;
+  align-self: stretch;
+  align-items: center;
+  margin-left: -20px;
+  margin-right: -20px;
+  padding: 5px 20px;
+}
+
+.code-embed-16 {
+  color: var(--_fonts---color--light-blue-grey);
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+
+.code-embed-16:hover {
+  color: var(--_button---primary);
+}
+
+.flex-block-116 {
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+}
+
+.flex-block-117 {
+  grid-column-gap: 15px;
+  grid-row-gap: 15px;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.brandsort {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  flex-flow: wrap;
+  align-self: stretch;
+  height: 148px;
+  overflow: hidden;
+}
+
+.brandsortb {
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  flex-flow: column;
+  flex: 1;
+  padding: 40px;
+}
+
+.flex-block-118 {
+  grid-column-gap: 40px;
+  grid-row-gap: 40px;
+  border-radius: var(--_round---big-20);
+  background-image: url('/images/Group-601.png'), linear-gradient(13deg, #0d336c, #182334);
+  background-position: 100px, 0 0;
+  background-repeat: no-repeat, repeat;
+  background-size: cover, auto;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 30px;
+}
+
+.heading-20 {
+  color: var(--_fonts---color--white);
+  font-size: var(--_fonts---h1);
+  margin-top: 0;
+  margin-bottom: 0;
+  font-weight: 900;
+}
+
+.text-block-58 {
+  color: var(--_fonts---color--white);
+  font-size: var(--_fonts---font-size--core);
+  margin-bottom: 10px;
+}
+
+.button-24 {
+  border-radius: var(--_round---normal);
+  background-color: var(--_button---color);
+  color: var(--_fonts---color--black);
+  padding: 14px 30px;
+}
+
+.button-24:hover {
+  background-color: var(--_button---primary);
+  color: var(--_fonts---color--white);
+}
+
+.flex-block-119 {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  width: 560px;
+}
+
+.bestpriceitem {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+  border-radius: var(--_round---normal);
+  background-color: var(--white);
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  min-width: 196px;
+  max-width: 196px;
+  padding: 15px;
+}
+
+.bestpriceitem:hover {
+  box-shadow: 0 0 15px #0000004d;
+}
+
+.bestpriceitem.end {
+  display: none;
+}
+
+.pricecartbp {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+}
+
+.actualprice {
+  font-size: var(--_fonts---font-size--bigger);
+  font-weight: 800;
+}
+
+.oldpricebp {
+  color: var(--_fonts---color--light-blue-grey);
+  font-size: var(--_fonts---font-size--supersmall);
+  text-decoration: line-through;
+}
+
+.flex-block-120 {
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.nameitembp {
+  flex: 0 auto;
+  align-self: auto;
+  max-height: 60px;
+  overflow: hidden;
+}
+
+.saletagbp {
+  border-radius: var(--_round---small-8);
+  background-color: var(--green);
+  color: var(--_fonts---color--white);
+  font-size: var(--_fonts---font-size--supersmall);
+  padding: 3px 5px;
+  font-weight: 600;
+  position: relative;
+  top: -30px;
+}
+
+.imgitembp {
+  flex-flow: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  max-height: 160px;
+  padding: 0;
+  display: flex;
+}
+
+.flex-block-121 {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  overflow: scroll;
+}
+
+.flex-block-122 {
+  justify-content: flex-start;
+  align-items: flex-end;
+}
+
+.inbt {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  flex: 1;
+  max-width: 100%;
+  margin-top: 0;
+}
+
+.div-block-132 {
+  border-radius: var(--_round---big-20);
+  flex: 1;
+}
+
+.flex-block-123 {
+  grid-column-gap: 40px;
+  grid-row-gap: 40px;
+}
+
+.submit-button-copy {
+  border-radius: var(--_round---normal);
+  background-color: var(--_button---primary);
+  font-size: var(--_fonts---font-size--bigger);
+  padding: 16px 30px;
+}
+
+.submit-button-copy.fill {
+  font-size: var(--_fonts---font-size--core);
+  justify-content: center;
+  align-self: stretch;
+  align-items: center;
+  padding-top: 15px;
+  padding-bottom: 15px;
+  display: flex;
+}
+
+.supportheading {
+  color: var(--_fonts---color--white);
+  font-size: var(--_fonts---h1);
+  margin-top: 0;
+  margin-bottom: 0;
+  line-height: 120%;
+}
+
+.div-block-133 {
+  box-sizing: content-box;
+  object-fit: contain;
+  position: relative;
+}
+
+.text-block-54-copy {
+  color: var(--_fonts---color--black);
+  flex: 1;
+  padding-top: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  font-weight: 700;
+}
+
+.ci2 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item2.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.ci3 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item3.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.ci4 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item4.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.ci5 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item5.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.ci6 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item6.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.ci7 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item7.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.ci8 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item8.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.ci9 {
+  border-radius: var(--_round---big-20);
+  background-color: var(--white);
+  background-image: url('/images/catalog_item9.png');
+  background-position: 100% 100%;
+  background-repeat: no-repeat;
+  background-size: auto;
+  flex: 1;
+  min-width: 160px;
+  height: 180px;
+  display: flex;
+}
+
+.image-5-copy {
+  box-sizing: content-box;
+  object-fit: contain;
+  width: 100%;
+  overflow: hidden;
+}
+
+.flex-block-124 {
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  border-radius: var(--_round---big-20);
+  background-image: url('/images/carvin.png'), linear-gradient(45deg, #1b283b, #0d336c);
+  background-position: 150px, 0 0;
+  background-repeat: no-repeat, repeat;
+  background-size: auto, auto;
+  justify-content: center;
+  align-self: stretch;
+  align-items: flex-start;
+  width: 440px;
+  padding: 30px;
+}
+
+.heading-21 {
+  color: var(--_fonts---color--white);
+  flex: 0 auto;
+  align-self: stretch;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 24px;
+  line-height: 34px;
+}
+
+.button-3-copy {
+  border-radius: var(--_button---round-12px);
+  background-color: var(--_button---primary);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 25px;
+  display: flex;
+}
+
+.button-3-copy:hover {
+  background-color: var(--_button---hover-red);
+}
+
+.select-copy {
+  border: 1px solid var(--grey);
+  border-radius: var(--_round---supersmall-4);
+  background-color: var(--white);
+  color: var(--_fonts---color--grey);
+  width: 180px;
+  height: 46px;
+  margin-bottom: 0;
+  padding: 12px 24px;
+}
+
+.div-block-10-copy {
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20px;
+  display: flex;
+}
+
+.image-27 {
+  width: 160px;
+  margin-bottom: -232px;
+  margin-left: 600px;
+}
+
+.news-index-block-copy {
+  grid-column-gap: 20px;
+  grid-row-gap: 20px;
+  flex: 1;
+  max-width: 100%;
+  margin-top: 0;
+  margin-bottom: 60px;
+}
+
+.container-copy {
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: auto;
+  max-width: 1580px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: 20px;
+  display: block;
+}
+
+.container-copy.nav {
+  height: auto;
+  padding-top: 0;
+}
+
+.container-copy.info {
+  width: 100%;
+  padding-top: 30px;
+  padding-bottom: 30px;
+}
+
+.container-copy.subscribe {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.container-copy.footer {
+  background-color: var(--back);
+  padding-top: 50px;
+  padding-bottom: 50px;
+}
+
+.div-block-134 {
+  border: 1px solid var(--_fonts---color--light-blue);
+  color: var(--_fonts---color--black);
+  border-radius: 40px;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  transform: rotate(0);
+}
+
+.div-block-134:hover {
+  background-color: var(--red);
+  color: var(--white);
+  border-style: none;
+}
+
+.code-embed-17 {
+  width: 20px;
+  height: 20px;
+}
+
+.div-block-134-copy {
+  border: 1px solid var(--_fonts---color--light-blue);
+  color: var(--_fonts---color--black);
+  border-radius: 40px;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  display: flex;
+  transform: rotate(180deg);
+}
+
+.div-block-134-copy:hover {
+  background-color: var(--red);
+  color: var(--white);
+  border-style: none;
+}
+
+.flex-block-125 {
+  grid-column-gap: 10px;
+  grid-row-gap: 10px;
+}
+
+.div-block-135 {
+  background-color: var(--light-blue);
+  border-radius: 40px;
+  width: 8px;
+  height: 8px;
+}
+
+.div-block-135:hover {
+  background-color: var(--red);
+}
+
+.flex-block-126 {
+  grid-column-gap: 4px;
+  grid-row-gap: 4px;
+  justify-content: flex-start;
+  align-self: stretch;
+  align-items: center;
+  margin-left: 30px;
+}
+
+.flex-block-108-copy {
+  grid-column-gap: 18px;
+  grid-row-gap: 18px;
+  justify-content: space-between;
+  align-items: flex-start;
+  overflow: scroll;
+}
+
 @media screen and (min-width: 1440px) {
   .body {
     --_fonts---font-family: Onest, sans-serif;
@@ -5434,10 +6587,10 @@ body {
     margin-left: 0;
     margin-right: 0;
   }
-/* 
+
-   .bottom_head {
+  .topmenuh {
     margin-top: 0;
-  } */
+  }
 
   .flex-block-4 {
     grid-column-gap: 40px;
@@ -5527,7 +6680,7 @@ body {
   }
 
   .flex-block-39-copy {
-    width: 150px;
+    width: 200px;
   }
 
   .cart-ditail {
@@ -5587,8 +6740,6 @@ body {
     background-color: var(--white);
   }
 
-
-
   .button-for-mobile-menu-block {
     padding-left: 20px;
     padding-right: 20px;
@@ -5690,9 +6841,13 @@ body {
     margin-top: 12px;
   }
 
-  /* .bottom_head {
+  .topmenub {
     margin-top: 0;
-  } */
+  }
+
+  .ci1:hover {
+    background-color: var(--light-blue);
+  }
 
   .vinleftbar {
     width: 320px;
@@ -5711,18 +6866,32 @@ body {
     max-width: none;
   }
 
+  .flex-block-118 {
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+  }
+
   .heading-20 {
     font-size: 48px;
   }
 
   .flex-block-119 {
-    width: 520px;
+    width: 480px;
   }
 
   .bestpriceitem.end {
     display: flex;
   }
 
+  .flex-block-121 {
+    grid-column-gap: 15px;
+    grid-row-gap: 15px;
+  }
+
+  .ci2:hover, .ci3:hover, .ci4:hover, .ci5:hover, .ci6:hover, .ci7:hover, .ci8:hover, .ci9:hover {
+    background-color: var(--light-blue);
+  }
+
   .flex-block-124 {
     width: 540px;
   }
@@ -6092,7 +7261,7 @@ body {
     padding-bottom: 40px;
   }
 
-  .top_head, .bottom_head {
+  .top_head, .topmenuh {
     padding-left: 30px;
     padding-right: 30px;
   }
@@ -6107,6 +7276,7 @@ body {
   }
 
   .slider {
+    align-self: stretch;
     height: auto;
     display: flex;
   }
@@ -6204,6 +7374,8 @@ body {
     flex-flow: column;
     justify-content: space-between;
     align-items: flex-start;
+    padding-top: 40px;
+    padding-bottom: 40px;
   }
 
   .div-block-12, .div-block-12.small {
@@ -6888,11 +8060,15 @@ body {
     margin-top: 0;
   }
 
-  .topnav {
+  .code-embed-15 {
-    margin-left: 0;
+    width: 160px;
   }
 
-  .bottom_head {
+  .topnav {
+    margin-left: 190px;
+  }
+
+  .topmenub {
     padding-left: 30px;
     padding-right: 30px;
   }
@@ -6917,6 +8093,10 @@ body {
     padding-bottom: 40px;
   }
 
+  .div-block-128 {
+    background-position: 0%;
+  }
+
   .catnav {
     padding-left: 30px;
     padding-right: 30px;
@@ -6945,10 +8125,19 @@ body {
     flex-flow: row;
   }
 
+  .supportheading {
+    font-size: 30px;
+  }
+
   .image-5-copy {
     object-fit: contain;
   }
 
+  .image-27 {
+    margin-bottom: -280px;
+    margin-left: 530px;
+  }
+
   .container-copy, .container-copy.nav, .container-copy.info {
     padding-left: 0;
     padding-right: 0;
@@ -7180,6 +8369,10 @@ body {
     align-items: center;
   }
 
+  .flex-block-26 {
+    min-width: 120px;
+  }
+
   .container2 {
     padding: 20px 30px;
   }
@@ -7339,7 +8532,7 @@ body {
   }
 
   .flex-block-39-copy {
-    width: 150px;
+    width: 200px;
   }
 
   .heading-9-copy-copy {
@@ -7468,43 +8661,31 @@ body {
   }
 
   .flex-block-78 {
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .flex-block-81 {
-    grid-column-gap: 5px;
-    grid-row-gap: 5px;
     flex-flow: row;
     justify-content: space-between;
-    align-items: center;
-  }
-
-  .core-product-copy {
-    flex-flow: column;
-    justify-content: flex-start;
     align-items: flex-start;
-  }
-
-  .core-product-search-copy {
-    flex-flow: row;
-    align-self: stretch;
-    max-width: 100%;
-    height: 340px;
-    display: flex;
-    overflow: scroll;
-  }
-
-  .raiting-copy, .pcs-copy {
     display: none;
   }
 
-  .item-recommend-copy {
+  .flex-block-80 {
-    display: block;
+    display: none;
   }
 
-  .flex-block-83 {
+  .flex-block-81 {
-    flex-flow: column;
+    justify-content: space-between;
+    align-self: stretch;
+    align-items: center;
+  }
+
+  .flex-block-82 {
+    grid-column-gap: 30px;
+    grid-row-gap: 30px;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .sort-item-brand-copy {
+    width: 50px;
   }
 
   .flex-block-84 {
@@ -7518,38 +8699,23 @@ body {
   .flex-block-85 {
     grid-column-gap: 5px;
     grid-row-gap: 5px;
-    border-radius: var(--_round---small-8);
+    border-radius: var(--_round---normal);
     background-color: var(--white);
     justify-content: flex-start;
     align-items: center;
-    padding: 8px 12px;
+    padding: 10px 20px;
     display: flex;
   }
 
   .code-embed-9 {
     color: var(--_button---primary);
-    width: 16px;
+    width: 18px;
-    height: 16px;
+    height: 18px;
   }
 
-  .image-15 {
+  .flex-block-77-copy {
-    max-width: 200px;
-  }
-
-  .code-embed-10 {
-    color: var(--white);
-    width: 12px;
-    height: 16px;
-  }
-
-  .flex-block-86 {
-    grid-column-gap: 5px;
-    grid-row-gap: 5px;
-    border-radius: var(--_round---small-8);
-    background-color: var(--_button---hover-dark_blue);
     justify-content: flex-start;
     align-items: center;
-    padding: 10px 15px;
   }
 
   .flex-block-18-copy-copy {
@@ -7558,16 +8724,15 @@ body {
     flex-flow: column;
   }
 
-  .link-block-4-copy {
-    flex: 0 auto;
-  }
-
   .heading-8-copy {
-    color: var(--_fonts---color--light-blue-grey);
     font-size: var(--_fonts---font-size--small-font-size);
-    margin-left: 0;
+    align-self: stretch;
-    margin-right: 0;
+    padding-left: 0;
+    padding-right: 0;
     font-weight: 400;
+    line-height: 20px;
+    display: block;
+    overflow: hidden;
   }
 
   .dropdown-2 {
@@ -7575,41 +8740,18 @@ body {
     margin-right: 0;
   }
 
-  .dropdown-list-2 {
-    background-color: var(--white);
-    box-shadow: 0 2px 5px #0003;
-  }
-
-  .dropdown-list-2.w--open {
-    border-radius: var(--_round---small-8);
-  }
-
   .heading-9-copy {
-    margin-top: 0;
+    font-size: var(--_fonts---font-size--bigger);
   }
 
   .info-block-search-copy {
-    grid-column-gap: 10px;
-    grid-row-gap: 10px;
-    flex-flow: column;
     justify-content: space-between;
     align-self: stretch;
-    align-items: flex-start;
+    align-items: center;
-  }
-
-  .heading-9-copy-copy {
-    font-size: var(--_fonts---font-size--small-font-size);
-    line-height: 18px;
-  }
-
-  .section-2 {
-    padding-left: 15px;
-    padding-right: 15px;
   }
 
   .mobile-block {
-    flex: 0 auto;
+    display: flex;
-    width: auto;
   }
 
   .flex-block-87 {
@@ -7619,23 +8761,24 @@ body {
   }
 
   .mobile-menu-bottom {
-    margin-left: 0;
+    padding-top: 0;
-    margin-right: 0;
+    padding-bottom: 0;
-    padding-left: 15px;
+    box-shadow: 0 0 5px #0003;
-    padding-right: 15px;
   }
 
-  .mobile-menu-bottom.nav, .mobile-menu-bottom.info {
+  .mobile-menu-bottom.info {
-    padding-left: 15px;
+    padding-top: 20px;
-    padding-right: 15px;
+    padding-bottom: 20px;
   }
 
-  .mobile-menu-bottom.subscribe, .mobile-menu-bottom.footer {
+  .mobile-menu-buttom-section {
-    padding: 40px 15px;
+    display: block;
   }
 
   .name-mobile-menu-item {
-    display: block;
+    color: var(--black);
+    font-size: var(--_fonts---font-size--small-font-size);
+    font-weight: 400;
   }
 
   .button-for-mobile-menu-block {
@@ -7651,13 +8794,26 @@ body {
     background-color: var(--_button---light-blue);
   }
 
-  .section-3 {
+  .icon_favorite {
-    padding-left: 15px;
+    color: var(--_button---light-blue-grey);
-    padding-right: 15px;
   }
 
-  .nav-menu-3 {
+  .block-for-moble-menu-icon {
-    display: none;
+    width: 30px;
+    height: 30px;
+  }
+
+  .div-block-25 {
+    width: 20px;
+    height: 20px;
+    display: block;
+  }
+
+  .info-satus {
+    background-color: var(--green);
+    color: var(--_fonts---color--white);
+    font-size: 10px;
+    font-weight: 400;
   }
 
   .flex-block-93 {
@@ -7666,15 +8822,13 @@ body {
   }
 
   .sort-list-card {
-    grid-column-gap: 0px;
+    padding-right: 30px;
-    grid-row-gap: 0px;
+    display: none;
-    padding-left: 18px;
-    padding-right: 18px;
   }
 
   .flex-block-49-copy {
-    grid-column-gap: 28px;
+    grid-column-gap: 30px;
-    grid-row-gap: 28px;
+    grid-row-gap: 30px;
   }
 
   .price-in-cart-s1 {
@@ -7871,6 +9025,18 @@ body {
     padding-bottom: 90px;
   }
 
+  .div-block-129 {
+    justify-content: flex-start;
+    align-self: stretch;
+    align-items: center;
+  }
+
+  .flex-block-108 {
+    flex-flow: column;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   .container-vin {
     padding-top: 20px;
   }
@@ -7884,7 +9050,24 @@ body {
     padding-bottom: 90px;
   }
 
-  .inbt, .news-index-block-copy {
+  .inbt {
+    grid-column-gap: 20px;
+    grid-row-gap: 20px;
+  }
+
+  .flex-block-123 {
+    flex-flow: column;
+  }
+
+  .flex-block-124 {
+    flex: 1;
+  }
+
+  .image-27 {
+    margin-left: 330px;
+  }
+
+  .news-index-block-copy {
     grid-column-gap: 20px;
     grid-row-gap: 20px;
   }
@@ -7901,10 +9084,6 @@ body {
   .container-copy.footer {
     padding-bottom: 90px;
   }
-
-  .mobile-menu-buttom-section {
-    display: block;
-  }
 }
 
 @media screen and (max-width: 479px) {
@@ -7974,7 +9153,7 @@ body {
     grid-row-gap: 15px;
   }
 
-  .top_head, .bottom_head {
+  .top_head, .topmenuh {
     padding-left: 15px;
     padding-right: 15px;
   }
@@ -8248,7 +9427,7 @@ body {
   }
 
   .heading_news {
-    line-height: 28px;
+    line-height: 20px;
   }
 
   .text-block-20 {
@@ -8780,6 +9959,10 @@ body {
     padding-bottom: 5px;
   }
 
+  .icon-setting {
+    border: 0 #000;
+  }
+
   .section-3 {
     padding-left: 15px;
     padding-right: 15px;
@@ -9145,17 +10328,22 @@ body {
   }
 
   .favcardcat {
+    border-style: none;
     width: 30px;
     height: 30px;
     margin-top: 0;
   }
 
+  .code-embed-15 {
+    display: none;
+  }
+
   .topnav {
     margin-left: 0;
     top: 58px;
   }
 
-  .bottom_head {
+  .topmenub {
     padding-left: 15px;
     padding-right: 15px;
   }
@@ -9218,6 +10406,17 @@ body {
     padding: 40px 0 90px;
   }
 
+  .div-block-129 {
+    justify-content: flex-start;
+    align-items: flex-start;
+    width: 100%;
+    height: auto;
+  }
+
+  .flex-block-109 {
+    margin-bottom: 10px;
+  }
+
   .saletag {
     padding-top: 3px;
     padding-bottom: 3px;
@@ -9225,6 +10424,15 @@ body {
     top: -15px;
   }
 
+  .flex-block-110 {
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    flex-flow: column-reverse;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 20px;
+  }
+
   .catnav {
     padding-left: 15px;
     padding-right: 15px;
@@ -9351,16 +10559,17 @@ body {
   }
 
   .submit-button-copy {
-    align-self: stretch;
+    align-self: auto;
-    padding: 15px 30px;
+    padding: 15px 25px;
   }
 
   .supportheading {
     font-size: var(--_fonts---font-size--heading-2);
+    width: 220px;
   }
 
   .image-5-copy {
-    width: 100%;
+    width: 60%;
     height: 100%;
     min-height: auto;
   }
@@ -9369,6 +10578,10 @@ body {
     margin-bottom: 10px;
   }
 
+  .image-27 {
+    display: none;
+  }
+
   .container-copy {
     max-width: 100%;
     margin-left: 0;
@@ -9399,20 +10612,10 @@ body {
   }
 }
 
-#w-node-bc394713-4b8e-44e3-8ddf-3edc1c31a743-3b3232bc {
+#w-node-_5428604d-3026-96c9-8306-ab3c3dd9acb7-3b3232bc {
   justify-self: stretch;
 }
 
-#w-node-_8908a890-8c8f-e12c-999f-08d5da3bcc01-3b3232bc {
-  grid-area: Area;
-}
-
-@media screen and (min-width: 1920px) {
-  #w-node-_8908a890-8c8f-e12c-999f-08d5da3bcc01-3b3232bc {
-    grid-area: Area;
-  }
-}
-
 @media screen and (max-width: 991px) {
   #w-node-_2eb32dc9-d3cb-cbbb-db81-4205d4e11f12-659ca3b9 {
     grid-area: span 1 / span 3 / span 1 / span 3;
@@ -9423,818 +10626,6 @@ 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 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  flex: 0 auto;
-  align-self: stretch;
-  padding: 20px;
-}
-
-.button-3 {
-  border-radius: var(--_button---round-12px);
-  background-color: var(--_button---primary);
-  flex: none;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 15px;
-  display: flex;
-}
-
-.button-3:hover {
-  background-color: var(--_button---hover-red);
-}
-
-.button-23 {
-  border-radius: var(--_button---round-12px);
-  background-color: var(--_button---light-blue);
-  color: var(--_fonts---color--black);
-  flex: none;
-  justify-content: center;
-  align-items: center;
-  padding: 10px 25px;
-  display: flex;
-}
-
-.button-23:hover {
-  background-color: var(--_button---primary);
-  color: var(--_fonts---color--white);
-}
-
-.flex-block-114 {
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-  align-self: stretch;
-  margin-bottom: 30px;
-}
-
-.dropdown-4 {
-  flex-flow: column;
-  justify-content: space-between;
-  align-self: stretch;
-  align-items: center;
-  margin-left: 0;
-  margin-right: 0;
-  display: flex;
-}
-
-.dropdown-toggle-3, .dropdown-toggle-card {
-  border-top-right-radius: var(--_round---normal);
-  border-bottom-right-radius: var(--_round---normal);
-  border-left: 2px solid #0000;
-  flex: 1;
-  align-self: stretch;
-  margin-bottom: 5px;
-  margin-left: 0;
-  margin-right: 0;
-  padding: 6px 15px;
-}
-
-.dropdown-toggle-3:hover {
-  border-left: 2px solid var(--red);
-}
-
-.dropdown-toggle-3:active {
-  background-color: var(--background);
-}
-
-.dropdown-list-4 {
-  background-color: #0000;
-  flex: 1;
-  align-self: stretch;
-  margin-top: 5px;
-  margin-bottom: 10px;
-  padding-left: 25px;
-  display: none;
-  position: static;
-  top: 40px;
-}
-
-.dropdown-link-3 {
-  color: var(--_fonts---color--black);
-  padding: 5px 0;
 }
 
-.dropdown-link-3:hover {
-  color: var(--red);
-}
-
-.text-block-56 {
-  color: var(--_fonts---color--black);
-}
-
-.div-block-131 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  color: var(--red);
-  flex-flow: column;
-  flex: 1;
-  justify-content: space-between;
-  align-items: flex-start;
-  min-width: 230px;
-  min-height: 180px;
-  padding: 20px;
-  display: flex;
-}
-
-.div-block-131:hover {
-  background-color: var(--light-blue);
-  color: var(--_button---hover-red);
-}
-
-.text-block-57 {
-  color: var(--_fonts---color--black);
-  font-size: var(--_fonts---font-size--core);
-  word-break: break-all;
-  -webkit-hyphens: auto;
-  hyphens: auto;
-  font-weight: 600;
-}
-
-.vinleftbar {
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  flex: none;
-  width: 320px;
-}
-
-.container-vin {
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  min-width: auto;
-  max-width: 1580px;
-  margin-bottom: 60px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-top: 40px;
-  display: block;
-}
-
-.container-vin.nav {
-  height: auto;
-  padding-top: 0;
-}
-
-.container-vin.info {
-  width: 100%;
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-
-.container-vin.subscribe {
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-
-.container-vin.footer {
-  background-color: var(--back);
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-
-.knot-img {
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  color: var(--black);
-  flex-flow: column;
-  flex: 1;
-  justify-content: flex-start;
-  align-items: flex-start;
-  min-width: 320px;
-  min-height: 180px;
-  padding: 40px;
-  display: flex;
-}
-
-.knotinfo {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  color: var(--red);
-  flex-flow: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  max-width: 240px;
-  padding: 20px;
-  display: flex;
-}
 
-.heading-19 {
-  color: var(--_fonts---color--black);
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 36px;
-}
-
-.partsname {
-  flex: 1;
-  max-width: 240px;
-  max-height: 40px;
-  overflow: hidden;
-}
-
-.oemnuber {
-  width: 100px;
-}
-
-.flex-block-115 {
-  grid-column-gap: 15px;
-  grid-row-gap: 15px;
-  justify-content: space-between;
-  align-self: stretch;
-  align-items: flex-start;
-  margin-left: -20px;
-  margin-right: -20px;
-  padding: 5px 20px;
-}
-
-.showallparts {
-  border-radius: var(--_button---round-12px);
-  background-color: var(--_button---light-blue);
-  color: var(--_fonts---color--black);
-  flex: none;
-  justify-content: center;
-  align-self: stretch;
-  align-items: center;
-  padding: 10px 25px;
-  display: flex;
-}
-
-.showallparts:hover {
-  background-color: var(--_button---primary);
-  color: var(--_fonts---color--white);
-}
-
-.image-26 {
-  object-fit: contain;
-  flex: 0 auto;
-  align-self: auto;
-  min-width: 200px;
-}
-
-.knotin {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  color: var(--red);
-  flex-flow: column;
-  justify-content: space-between;
-  align-items: flex-start;
-  max-width: 480px;
-  padding: 20px;
-  display: flex;
-}
-
-.knot-parts {
-  grid-column-gap: 5px;
-  grid-row-gap: 5px;
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  color: var(--black);
-  flex-flow: column;
-  flex: 1;
-  justify-content: flex-start;
-  align-items: flex-start;
-  min-width: 320px;
-  min-height: 180px;
-  padding: 40px;
-  display: flex;
-}
-
-.nuberlist {
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  display: flex;
-}
-
-.knotlistitem {
-  grid-column-gap: 15px;
-  grid-row-gap: 15px;
-  justify-content: space-between;
-  align-self: stretch;
-  align-items: center;
-  margin-left: -20px;
-  margin-right: -20px;
-  padding: 5px 20px;
-}
-
-.code-embed-16 {
-  color: var(--_fonts---color--light-blue-grey);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-}
-
-.code-embed-16:hover {
-  color: var(--_button---primary);
-}
-
-.flex-block-116 {
-  grid-column-gap: 15px;
-  grid-row-gap: 15px;
-}
-
-.flex-block-117 {
-  grid-column-gap: 15px;
-  grid-row-gap: 15px;
-  justify-content: flex-start;
-  align-items: center;
-}
-
-.brandsort {
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  flex-flow: wrap;
-  align-self: stretch;
-  height: 148px;
-  overflow: hidden;
-}
-
-.brandsortb {
-  grid-column-gap: 30px;
-  grid-row-gap: 30px;
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  flex-flow: column;
-  flex: 1;
-  padding: 40px;
-}
-
-.flex-block-118 {
-  grid-column-gap: 40px;
-  grid-row-gap: 40px;
-  border-radius: var(--_round---big-20);
-  background-image: url('/images/Group-601.png'), linear-gradient(13deg, #0d336c, #182334);
-  background-position: 100px, 0 0;
-  background-repeat: no-repeat, repeat;
-  background-size: cover, auto;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 30px;
-}
-
-.heading-20 {
-  color: var(--_fonts---color--white);
-  font-size: var(--_fonts---h1);
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 900;
-}
-
-.text-block-58 {
-  color: var(--_fonts---color--white);
-  font-size: var(--_fonts---font-size--core);
-  margin-bottom: 10px;
-}
-
-.button-24 {
-  border-radius: var(--_round---normal);
-  background-color: var(--_button---color);
-  color: var(--_fonts---color--black);
-  padding: 14px 30px;
-}
-
-.button-24:hover {
-  background-color: var(--_button---primary);
-  color: var(--_fonts---color--white);
-}
-
-.flex-block-119 {
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  width: 560px;
-}
-
-.bestpriceitem {
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-  border-radius: var(--_round---normal);
-  background-color: var(--white);
-  flex: 1;
-  justify-content: flex-start;
-  align-items: center;
-  min-width: 196px;
-  max-width: 196px;
-  padding: 15px;
-}
-
-.bestpriceitem:hover {
-  box-shadow: 0 0 15px #0000004d;
-}
-
-.bestpriceitem.end {
-  display: none;
-}
-
-.pricecartbp {
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-}
-
-.actualprice {
-  font-size: var(--_fonts---font-size--bigger);
-  font-weight: 800;
-}
-
-.oldpricebp {
-  color: var(--_fonts---color--light-blue-grey);
-  font-size: var(--_fonts---font-size--supersmall);
-  text-decoration: line-through;
-}
-
-.flex-block-120 {
-  justify-content: flex-start;
-  align-items: flex-end;
-}
-
-.nameitembp {
-  flex: 0 auto;
-  align-self: auto;
-  max-height: 60px;
-  overflow: hidden;
-}
-
-.saletagbp {
-  border-radius: var(--_round---small-8);
-  background-color: var(--green);
-  color: var(--_fonts---color--white);
-  font-size: var(--_fonts---font-size--supersmall);
-  padding: 3px 5px;
-  font-weight: 600;
-  position: relative;
-  top: -30px;
-}
-
-.imgitembp {
-  flex-flow: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  width: 100%;
-  max-height: 160px;
-  padding: 0;
-  display: flex;
-}
-
-.flex-block-121 {
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  overflow: scroll;
-}
-
-.flex-block-122 {
-  justify-content: flex-start;
-  align-items: flex-end;
-}
-
-.inbt {
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  flex: 1;
-  max-width: 100%;
-  margin-top: 0;
-}
-
-.div-block-132 {
-  border-radius: var(--_round---big-20);
-  flex: 1;
-}
-
-.flex-block-123 {
-  grid-column-gap: 40px;
-  grid-row-gap: 40px;
-}
-
-.submit-button-copy {
-  border-radius: var(--_round---normal);
-  background-color: var(--_button---primary);
-  font-size: var(--_fonts---font-size--bigger);
-  padding: 16px 30px;
-}
-
-.submit-button-copy.fill {
-  font-size: var(--_fonts---font-size--core);
-  justify-content: center;
-  align-self: stretch;
-  align-items: center;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  display: flex;
-}
-
-.supportheading {
-  color: var(--_fonts---color--white);
-  font-size: var(--_fonts---h1);
-  margin-top: 0;
-  margin-bottom: 0;
-  line-height: 120%;
-}
-
-.div-block-133 {
-  box-sizing: content-box;
-  object-fit: contain;
-  position: relative;
-}
-
-.text-block-54-copy {
-  color: var(--_fonts---color--black);
-  flex: 1;
-  padding-top: 20px;
-  padding-left: 20px;
-  padding-right: 20px;
-  font-weight: 700;
-}
-
-.ci2 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item2.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.ci3 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item3.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.ci4 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item4.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.ci5 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item5.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.ci6 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item6.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.ci7 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item7.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.ci8 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item8.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.ci9 {
-  border-radius: var(--_round---big-20);
-  background-color: var(--white);
-  background-image: url('/images/catalog_item9.png');
-  background-position: 100% 100%;
-  background-repeat: no-repeat;
-  background-size: auto;
-  flex: 1;
-  min-width: 160px;
-  height: 180px;
-  display: flex;
-}
-
-.image-5-copy {
-  box-sizing: content-box;
-  object-fit: contain;
-  width: 100%;
-  overflow: hidden;
-}
-
-.flex-block-124 {
-  grid-column-gap: 30px;
-  grid-row-gap: 30px;
-  border-radius: var(--_round---big-20);
-  /* background-image: url('/images/carvin.png'), linear-gradient(45deg, #1b283b, #0d336c);
-  background-position: 150px, 0 0; */
-  background-repeat: no-repeat, repeat;
-  background-size: auto, auto;
-  justify-content: center;
-  align-self: stretch;
-  align-items: flex-start;
-  width: 440px;
-  padding: 30px;
-}
-
-.heading-21 {
-  color: var(--_fonts---color--white);
-  flex: 0 auto;
-  align-self: stretch;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 24px;
-  line-height: 34px;
-}
-
-.button-3-copy {
-  border-radius: var(--_button---round-12px);
-  background-color: var(--_button---primary);
-  flex: none;
-  justify-content: center;
-  align-items: center;
-  padding: 12px 25px;
-  display: flex;
-}
-
-.button-3-copy:hover {
-  background-color: var(--_button---hover-red);
-}
-
-.select-copy {
-  border: 1px solid var(--grey);
-  border-radius: var(--_round---supersmall-4);
-  background-color: var(--white);
-  color: var(--_fonts---color--grey);
-  width: 180px;
-  height: 46px;
-  margin-bottom: 0;
-  padding: 12px 24px;
-}
-
-.div-block-10-copy {
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-  display: flex;
-}
-
-.image-27 {
-  width: 160px;
-  margin-bottom: -232px;
-  margin-left: 600px;
-}
-
-.news-index-block-copy {
-  grid-column-gap: 20px;
-  grid-row-gap: 20px;
-  flex: 1;
-  max-width: 100%;
-  margin-top: 0;
-  margin-bottom: 60px;
-}
-
-.container-copy {
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  min-width: auto;
-  max-width: 1580px;
-  margin-left: auto;
-  margin-right: auto;
-  padding-top: 20px;
-  display: block;
-}
-
-.container-copy.nav {
-  height: auto;
-  padding-top: 0;
-}
-
-.container-copy.info {
-  width: 100%;
-  padding-top: 30px;
-  padding-bottom: 30px;
-}
-
-.container-copy.subscribe {
-  padding-top: 40px;
-  padding-bottom: 40px;
-}
-
-.container-copy.footer {
-  background-color: var(--back);
-  padding-top: 50px;
-  padding-bottom: 50px;
-}
-
-.div-block-134 {
-  border: 1px solid var(--_fonts---color--light-blue);
-  color: var(--_fonts---color--black);
-  border-radius: 40px;
-  justify-content: center;
-  align-items: center;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  transform: rotate(0);
-}
-
-.div-block-134:hover {
-  background-color: var(--red);
-  color: var(--white);
-  border-style: none;
-}
-
-.code-embed-17 {
-  width: 20px;
-  height: 20px;
-}
-
-.div-block-134-copy {
-  border: 1px solid var(--_fonts---color--light-blue);
-  color: var(--_fonts---color--black);
-  border-radius: 40px;
-  justify-content: center;
-  align-items: center;
-  width: 36px;
-  height: 36px;
-  display: flex;
-  transform: rotate(180deg);
-}
-
-.div-block-134-copy:hover {
-  background-color: var(--red);
-  color: var(--white);
-  border-style: none;
-}
-
-.flex-block-125 {
-  grid-column-gap: 10px;
-  grid-row-gap: 10px;
-}
-
-.div-block-135 {
-  background-color: var(--light-blue);
-  border-radius: 40px;
-  width: 8px;
-  height: 8px;
-}
-
-.div-block-135:hover {
-  background-color: var(--red);
-}
-
-.flex-block-126 {
-  grid-column-gap: 4px;
-  grid-row-gap: 4px;
-  justify-content: flex-start;
-  align-self: stretch;
-  align-items: center;
-  margin-left: 30px;
-}