From f6cc95e71424298bd167d7106a8b4948e6f42335 Mon Sep 17 00:00:00 2001 From: egortriston Date: Sun, 29 Jun 2025 00:39:17 +0300 Subject: [PATCH] pravki 29.06 --- src/components/vin/InfoVin.tsx | 15 +- src/components/vin/KnotIn.tsx | 37 ++- src/components/vin/KnotParts.tsx | 81 +++--- src/components/vin/VinCategory.tsx | 156 +++++++++--- src/components/vin/VinLeftbar.tsx | 241 +++++++++++++----- src/components/vin/VinPartCard.tsx | 38 +++ .../vehicle-search/[brand]/[vehicleId].tsx | 144 ++++++++++- src/pages/vin.tsx | 4 - src/styles/my.css | 16 ++ src/styles/protekproject.webflow.css | 198 ++++++++------ 10 files changed, 693 insertions(+), 237 deletions(-) create mode 100644 src/components/vin/VinPartCard.tsx diff --git a/src/components/vin/InfoVin.tsx b/src/components/vin/InfoVin.tsx index 13c1955..6e84a34 100644 --- a/src/components/vin/InfoVin.tsx +++ b/src/components/vin/InfoVin.tsx @@ -1,6 +1,11 @@ import React from "react"; -const InfoVin = () => ( +interface InfoVinProps { + vehicleName: string; + vehicleInfo: string; +} + +const InfoVin: React.FC = ({ vehicleName, vehicleInfo }) => (
@@ -9,22 +14,22 @@ const InfoVin = () => (
Главная
→
- +
Оригинальный каталог
→
-
Audi Q7
+
{vehicleName}
-

Audi Q7

+

{vehicleName}

-
WAUZZZ4M6JD010702 · 2018 · SUQ(8A) · CVMD · 3000CC / 249hp / 183kW TDI CR
+
{vehicleInfo}
{/* SVG icon */} diff --git a/src/components/vin/KnotIn.tsx b/src/components/vin/KnotIn.tsx index 940a7c7..c579cad 100644 --- a/src/components/vin/KnotIn.tsx +++ b/src/components/vin/KnotIn.tsx @@ -1,9 +1,36 @@ import React from "react"; -const KnotIn = () => ( -
- -
-); +// Функция для корректного формирования URL изображения +const getImageUrl = (baseUrl: string, size: string) => { + if (!baseUrl) return ''; + return baseUrl + .replace(/&/g, '&') + .replace(/</g, '<') + .replace(/>/g, '>') + .replace(/"/g, '"') + .replace('%size%', size); +}; + +const KnotIn = ({ node }: { node: any }) => { + if (!node) return null; + let imageUrl = ''; + if (node.imageurl) { + imageUrl = getImageUrl(node.imageurl, '250'); + } else if (node.largeimageurl) { + imageUrl = node.largeimageurl; + } + return ( +
+ {imageUrl ? ( + {node.name + ) : ( +
+ Нет изображения +
+ )} + {/*
{node.name}
*/} +
+ ); +}; export default KnotIn; \ No newline at end of file diff --git a/src/components/vin/KnotParts.tsx b/src/components/vin/KnotParts.tsx index e5e30f4..1d0dffb 100644 --- a/src/components/vin/KnotParts.tsx +++ b/src/components/vin/KnotParts.tsx @@ -1,43 +1,52 @@ import React from "react"; +import { useRouter } from "next/router"; -const parts = [ - { n: 1, oem: "059198405B", name: "Фильтрующий элемент с проклад." }, - { n: 2, oem: "N 10196103", name: "Винт с цилиндр. скруглённой головкой Torx" }, - { n: 3, oem: "059117070J", name: "Уплотнитель" }, - { n: 4, oem: "N 10124306", name: "Винт с плоской головкой и внутренним Torx" }, - { n: 5, oem: "059117015K", name: "Масляный радиатор" }, - { n: 6, oem: "059117015K", name: "Масляный радиатор" }, - { n: 7, oem: "059117015K", name: "Масляный радиатор" }, - { n: 8, oem: "059117015K", name: "Масляный радиатор" }, - { n: 9, oem: "059117015K", name: "Масляный радиатор" }, - { n: 10, oem: "059117015K", name: "Масляный радиатор" }, - { n: 11, oem: "059117015K", name: "Масляный радиатор" }, - { n: 12, oem: "059117015K", name: "Масляный радиатор" }, - { n: 13, oem: "059117015K", name: "Масляный радиатор" }, - { n: 14, oem: "059117015K", name: "Масляный радиатор" }, - { n: 15, oem: "059117015K", name: "Масляный радиатор" }, -]; +interface KnotPartsProps { + parts: Array<{ + detailid?: string; + codeonimage?: string | number; + oem?: string; + name?: string; + price?: string | number; + brand?: string; + availability?: string; + note?: string; + attributes?: Array<{ key: string; name?: string; value: string }>; + }>; +} -const KnotParts = () => ( -
- {parts.map((part, idx) => ( -
-
-
{part.n}
-
{part.oem}
-
-
{part.name}
-
- Цена -
- - - +const KnotParts: React.FC = ({ parts }) => { + const router = useRouter(); + return ( +
+ {parts.map((part, idx) => ( +
+
+
{part.codeonimage || idx + 1}
+
{part.oem}
+
+
{part.name}
+
+ +
+ + + +
-
- ))} -
-); + ))} +
+ ); +}; export default KnotParts; \ No newline at end of file diff --git a/src/components/vin/VinCategory.tsx b/src/components/vin/VinCategory.tsx index 32c9c72..2686210 100644 --- a/src/components/vin/VinCategory.tsx +++ b/src/components/vin/VinCategory.tsx @@ -1,40 +1,128 @@ -import React from "react"; - -const categories = [ - "Детали для ТО", - "Двигатель", - "Топливная система", - "Система охлаждения", - "Система выпуска", - "Трансмиссия", - "Ходовая часть", - "Рулевое управление", - "Тормозная система", - "Электрооборудование", - "Отопление / кондиционирование", - "Детали салона", - "Детали кузова", - "Дополнительное оборудование" -]; +import React, { useState, useRef } from "react"; +import { useQuery, useLazyQuery } from "@apollo/client"; +import { GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS } from "@/lib/graphql/laximo"; interface VinCategoryProps { - onCategoryClick?: (e: React.MouseEvent) => void; + catalogCode: string; + vehicleId: string; + ssd?: string; + onNodeSelect?: (node: any) => void; } -const VinCategory: React.FC = ({ onCategoryClick }) => ( -
- {categories.map((cat, idx) => ( -
-
{cat}
-
- - - - -
-
- ))} -
-); +const VinCategory: React.FC = ({ catalogCode, vehicleId, ssd, onNodeSelect }) => { + const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, { + variables: { catalogCode, vehicleId, ssd }, + skip: !catalogCode || !vehicleId, + errorPolicy: "all", + }); + const categories = categoriesData?.laximoCategories || []; + + const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({}); + const [getUnits] = useLazyQuery(GET_LAXIMO_UNITS, { + onCompleted: (data) => { + if (data && data.laximoUnits && lastCategoryIdRef.current) { + setUnitsByCategory((prev) => ({ + ...prev, + [lastCategoryIdRef.current!]: data.laximoUnits || [], + })); + } + }, + }); + const [selectedCategory, setSelectedCategory] = useState(null); + const lastCategoryIdRef = useRef(null); + + // Если выбрана категория — показываем подкатегории (children или units) + let subcategories: any[] = []; + if (selectedCategory) { + if (selectedCategory.children && selectedCategory.children.length > 0) { + subcategories = selectedCategory.children; + } else { + subcategories = unitsByCategory[selectedCategory.quickgroupid] || []; + } + } + + const handleCategoryClick = (cat: any) => { + if (cat.children && cat.children.length > 0) { + setSelectedCategory(cat); + } else { + // Если нет children, грузим units (подкатегории) + if (!unitsByCategory[cat.quickgroupid]) { + lastCategoryIdRef.current = cat.quickgroupid; + getUnits({ variables: { catalogCode, vehicleId, ssd, categoryId: cat.quickgroupid } }); + } + setSelectedCategory(cat); + } + }; + + const handleBack = () => { + setSelectedCategory(null); + }; + + const handleSubcategoryClick = (subcat: any) => { + if (onNodeSelect) { + onNodeSelect({ + ...subcat, + unitid: subcat.unitid || subcat.quickgroupid || subcat.id, + }); + } + }; + + if (categoriesLoading) return
Загрузка категорий...
; + if (categoriesError) return
Ошибка: {categoriesError.message}
; + + return ( +
+ {!selectedCategory ? ( + // Список категорий + categories.map((cat: any, idx: number) => ( +
handleCategoryClick(cat)} + style={{ cursor: "pointer" }} + > +
{cat.name}
+
+ + + + +
+
+ )) + ) : ( + // Список подкатегорий (children или units) + <> +
+
← Назад
+
+ + + + +
+
+ {subcategories.length === 0 &&
Нет подкатегорий
} + {subcategories.map((subcat: any, idx: number) => ( +
handleSubcategoryClick(subcat)} + style={{ cursor: "pointer" }} + > +
{subcat.name}
+
+ + + + +
+
+ ))} + + )} +
+ ); +}; export default VinCategory; \ No newline at end of file diff --git a/src/components/vin/VinLeftbar.tsx b/src/components/vin/VinLeftbar.tsx index 734c79f..f45a63f 100644 --- a/src/components/vin/VinLeftbar.tsx +++ b/src/components/vin/VinLeftbar.tsx @@ -1,35 +1,86 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; +import { useLazyQuery, useQuery } from '@apollo/client'; +import { SEARCH_LAXIMO_FULLTEXT, GET_LAXIMO_CATEGORIES, GET_LAXIMO_UNITS } from '@/lib/graphql/laximo'; -const dropdownTitles = [ - "Детали для ТО", - "Двигатель", - "Топливная система", - "Система охлаждения", - "Система выпуска", - "Трансмиссия", - "Ходовая часть", - "Рулевое управление", - "Тормозная система", - "Электрооборудование", - "Отопление / кондиционирование", - "Детали салона", - "Детали кузова", - "Дополнительное оборудование" -]; +interface VinLeftbarProps { + catalogCode?: string; + vehicleId?: string; + ssd?: string; + onSearchResults?: (results: any[]) => void; + onNodeSelect?: (node: any) => void; +} -const VinLeftbar = () => { +const VinLeftbar: React.FC = ({ catalogCode, vehicleId, ssd, onSearchResults, onNodeSelect }) => { const [openIndex, setOpenIndex] = useState(null); + const [searchQuery, setSearchQuery] = useState(''); + const [activeTab, setActiveTab] = useState<'uzly' | 'manufacturer'>('uzly'); + const [executeSearch, { data, loading, error }] = useLazyQuery(SEARCH_LAXIMO_FULLTEXT, { errorPolicy: 'all' }); - const handleToggle = (idx: number) => { + const { data: categoriesData, loading: categoriesLoading, error: categoriesError } = useQuery(GET_LAXIMO_CATEGORIES, { + variables: { catalogCode, vehicleId, ssd }, + skip: !catalogCode || !vehicleId, + errorPolicy: 'all' + }); + const categories = categoriesData?.laximoCategories || []; + + const [unitsByCategory, setUnitsByCategory] = useState<{ [key: string]: any[] }>({}); + const [getUnits] = useLazyQuery(GET_LAXIMO_UNITS, { + onCompleted: (data) => { + if (data && data.laximoUnits && lastCategoryIdRef.current) { + setUnitsByCategory(prev => ({ + ...prev, + [lastCategoryIdRef.current!]: data.laximoUnits || [] + })); + } + } + }); + + const lastCategoryIdRef = React.useRef(null); + + const handleToggle = (idx: number, categoryId: string) => { setOpenIndex(openIndex === idx ? null : idx); + if (openIndex !== idx && !unitsByCategory[categoryId]) { + lastCategoryIdRef.current = categoryId; + getUnits({ variables: { catalogCode, vehicleId, ssd, categoryId } }); + } }; + const handleSearch = () => { + if (!searchQuery.trim() || !catalogCode || !vehicleId || !ssd) return; + executeSearch({ + variables: { + catalogCode, + vehicleId, + searchQuery: searchQuery.trim(), + ssd + } + }); + }; + + const handleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + e.preventDefault(); + handleSearch(); + } + }; + + const searchResults = data?.laximoFulltextSearch; + + useEffect(() => { + if (searchResults && onSearchResults) { + onSearchResults(searchResults.details || []); + } + if (!searchQuery.trim() && onSearchResults) { + onSearchResults([]); + } + }, [searchResults, searchQuery, onSearchResults]); + return (
- -
-
Thank you! Your submission has been received!
-
-
-
Oops! Something went wrong while submitting the form.
-
+ {error &&
Ошибка поиска: {error.message}
}
- {/* Dropdowns start */} - {dropdownTitles.map((title, idx) => { - const isOpen = openIndex === idx; - return ( -
-
handleToggle(idx)} - style={{ cursor: "pointer" }} - > -
-
{title}
-
- -
- ); - })} - {/* Dropdowns end */} + {/* Tab content start */} + {activeTab === 'uzly' ? ( + categoriesLoading ? ( +
Загружаем категории...
+ ) : categoriesError ? ( +
Ошибка загрузки категорий: {categoriesError.message}
+ ) : ( + <> + {categories.map((category: any, idx: number) => { + const isOpen = openIndex === idx; + // Подкатегории: сначала children, если нет — unitsByCategory + const subcategories = category.children && category.children.length > 0 + ? category.children + : unitsByCategory[category.quickgroupid] || []; + return ( +
+
handleToggle(idx, category.quickgroupid)} + style={{ cursor: "pointer" }} + > +
+
{category.name}
+
+ +
+ ); + })} + + ) + ) : ( + // Manufacturer tab content (заглушка) +
Здесь будет контент "От производителя"
+ )} + {/* Tab content end */}
); diff --git a/src/components/vin/VinPartCard.tsx b/src/components/vin/VinPartCard.tsx new file mode 100644 index 0000000..1af1cae --- /dev/null +++ b/src/components/vin/VinPartCard.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import { useRouter } from 'next/router'; + +interface VinPartCardProps { + n?: number; + oem: string; + name: string; + onPriceClick?: () => void; +} + +const VinPartCard: React.FC = ({ n, oem, name, onPriceClick }) => { + const router = useRouter(); + const handlePriceClick = (e: React.MouseEvent) => { + e.preventDefault(); + if (onPriceClick) onPriceClick(); + if (oem) router.push(`/search?q=${encodeURIComponent(oem)}&mode=parts`); + }; + + return ( +
+
+ {n !== undefined &&
{n}
} +
{oem}
+
+
{name}
+
+ Цена +
+ + + +
+
+
+ ); +}; + +export default VinPartCard; \ No newline at end of file diff --git a/src/pages/vehicle-search/[brand]/[vehicleId].tsx b/src/pages/vehicle-search/[brand]/[vehicleId].tsx index a12d0a5..532a032 100644 --- a/src/pages/vehicle-search/[brand]/[vehicleId].tsx +++ b/src/pages/vehicle-search/[brand]/[vehicleId].tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; import { useQuery } from '@apollo/client'; import Head from 'next/head'; @@ -6,8 +6,16 @@ import Footer from '@/components/Footer'; import Layout from '@/components/Layout'; import VehiclePartsSearchSection from '@/components/VehiclePartsSearchSection'; import LaximoDiagnostic from '@/components/LaximoDiagnostic'; -import { GET_LAXIMO_VEHICLE_INFO, GET_LAXIMO_CATALOG_INFO } from '@/lib/graphql'; +import { GET_LAXIMO_VEHICLE_INFO, GET_LAXIMO_CATALOG_INFO, GET_LAXIMO_UNIT_DETAILS } from '@/lib/graphql'; import { LaximoCatalogInfo } from '@/types/laximo'; +import InfoVin from '@/components/vin/InfoVin'; +import VinLeftbar from '@/components/vin/VinLeftbar'; +import VinKnot from '@/components/vin/VinKnot'; +import VinCategory from '@/components/vin/VinCategory'; +import PartDetailCard from '@/components/PartDetailCard'; +import VinPartCard from '@/components/vin/VinPartCard'; +import KnotIn from '@/components/vin/KnotIn'; +import KnotParts from '@/components/vin/KnotParts'; interface LaximoVehicleInfo { vehicleid: string; @@ -41,7 +49,27 @@ const VehicleDetailsPage = () => { defaultSearchType = 'fulltext'; } + // ====== ВСЕ ХУКИ В НАЧАЛЕ КОМПОНЕНТА ====== const [searchType, setSearchType] = useState<'quickgroups' | 'categories' | 'fulltext'>(defaultSearchType); + const [showKnot, setShowKnot] = useState(false); + const [foundParts, setFoundParts] = useState([]); + const [selectedNode, setSelectedNode] = useState(null); + const handleCategoryClick = (e?: React.MouseEvent) => { + if (e) e.preventDefault(); + setShowKnot(true); + }; + useEffect(() => { + const handler = (e: Event) => { + const target = e.target as HTMLElement; + if (target.classList.contains('link-2')) { + e.preventDefault(); + setShowKnot(true); + } + }; + document.addEventListener('click', handler); + return () => document.removeEventListener('click', handler); + }, []); + // ====== КОНЕЦ ХУКОВ ====== // Получаем информацию о каталоге const { data: catalogData } = useQuery<{ laximoCatalogInfo: LaximoCatalogInfo }>( @@ -100,6 +128,28 @@ const VehicleDetailsPage = () => { } ); + // Получаем детали выбранного узла, если он выбран + const { + data: unitDetailsData, + loading: unitDetailsLoading, + error: unitDetailsError + } = useQuery( + GET_LAXIMO_UNIT_DETAILS, + { + variables: selectedNode + ? { + catalogCode: selectedNode.catalogCode || selectedNode.catalog || brand, + vehicleId: selectedNode.vehicleId || vehicleId, + unitId: selectedNode.unitid || selectedNode.unitId, + ssd: selectedNode.ssd || finalSsd || '', + } + : { catalogCode: '', vehicleId: '', unitId: '', ssd: '' }, + skip: !selectedNode, + errorPolicy: 'all', + } + ); + const unitDetails = unitDetailsData?.laximoUnitDetails || []; + // Логируем ошибки if (vehicleError) { console.error('Vehicle GraphQL error:', vehicleError); @@ -107,7 +157,7 @@ const VehicleDetailsPage = () => { if (vehicleLoading) { return ( - +<> Загрузка автомобиля... @@ -117,14 +167,14 @@ const VehicleDetailsPage = () => {

Загружаем информацию об автомобиле...

- + ); } // Если информация о каталоге недоступна, показываем ошибку if (!catalogData?.laximoCatalogInfo) { return ( - + <> Каталог не найден @@ -140,7 +190,7 @@ const VehicleDetailsPage = () => {
- + ); } @@ -159,13 +209,84 @@ const VehicleDetailsPage = () => { const catalogInfo = catalogData.laximoCatalogInfo; return ( - + <> - {vehicleInfo.name} - Поиск запчастей - + VIN + + + + + -
+ {/* ====== ВРЕМЕННЫЙ МАКЕТ ДЛЯ ВЕРСТКИ (начало) ====== */} + 0 + ? vehicleInfo.attributes.map(attr => attr.value).join(' · ') + : '' + } + /> + +
+ {!selectedNode ? ( +
+ + {/* Категории или Knot или карточки */} + {foundParts.length > 0 ? ( +
+ {foundParts.map((detail, idx) => ( + + ))} +
+ ) : showKnot ? ( + + ) : ( + + )} +
+ ) : ( +
+
+ + + {unitDetailsLoading ? ( +
Загружаем детали узла...
+ ) : unitDetailsError ? ( +
Ошибка загрузки деталей: {unitDetailsError.message}
+ ) : unitDetails.length > 0 ? ( + + ) : ( +
Детали не найдены
+ )} +
+
+ )} +
+ + {/* ====== ВРЕМЕННЫЙ МАКЕТ ДЛЯ ВЕРСТКИ (конец) ====== */} + {/* Навигация */}
- + ); }; diff --git a/src/pages/vin.tsx b/src/pages/vin.tsx index f69445b..ba85fe8 100644 --- a/src/pages/vin.tsx +++ b/src/pages/vin.tsx @@ -38,10 +38,6 @@ export default function Vin() { - - - - diff --git a/src/styles/my.css b/src/styles/my.css index c51cc50..293c0ea 100644 --- a/src/styles/my.css +++ b/src/styles/my.css @@ -403,4 +403,20 @@ input.input-receiver:focus { } .tabs-menu.w-tab-menu::-webkit-scrollbar { display: none; +} + + +input.text-field, +input.w-input, +input#VinSearchInput { + background: #fff !important; +} + + +.text-block-56, .dropdown-link-3 { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; + max-width: 90%; } \ No newline at end of file diff --git a/src/styles/protekproject.webflow.css b/src/styles/protekproject.webflow.css index 54e91b1..d16faf3 100644 --- a/src/styles/protekproject.webflow.css +++ b/src/styles/protekproject.webflow.css @@ -7458,31 +7458,43 @@ body { } .flex-block-78 { - flex-flow: row; justify-content: space-between; - align-items: flex-start; - display: none; - } - - .flex-block-80 { - display: none; + align-items: center; } .flex-block-81 { + grid-column-gap: 5px; + grid-row-gap: 5px; + flex-flow: row; justify-content: space-between; - align-self: stretch; align-items: center; } - .flex-block-82 { - grid-column-gap: 30px; - grid-row-gap: 30px; + .core-product-copy { + flex-flow: column; justify-content: flex-start; - align-items: center; + align-items: flex-start; } - .sort-item-brand-copy { - width: 50px; + .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 { + display: block; + } + + .flex-block-83 { + flex-flow: column; } .flex-block-84 { @@ -7496,40 +7508,55 @@ body { .flex-block-85 { grid-column-gap: 5px; grid-row-gap: 5px; - border-radius: var(--_round---normal); + border-radius: var(--_round---small-8); background-color: var(--white); justify-content: flex-start; align-items: center; - padding: 10px 20px; + padding: 8px 12px; display: flex; } .code-embed-9 { color: var(--_button---primary); - width: 18px; - height: 18px; + width: 16px; + height: 16px; } - .flex-block-77-copy { + .image-15 { + 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 { - grid-column-gap: 40px; - grid-row-gap: 40px; - flex-flow: column; + grid-column-gap: 10px; + grid-row-gap: 10px; + } + + .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); - align-self: stretch; - padding-left: 0; - padding-right: 0; + margin-left: 0; + margin-right: 0; font-weight: 400; - line-height: 20px; - display: block; - overflow: hidden; } .dropdown-2 { @@ -7537,95 +7564,98 @@ 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 { - font-size: var(--_fonts---font-size--bigger); + margin-top: 0; } .info-block-search-copy { + grid-column-gap: 10px; + grid-row-gap: 10px; + flex-flow: column; justify-content: space-between; align-self: stretch; - align-items: center; + align-items: flex-start; + } + + .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 { - display: flex; + flex: 0 auto; + width: auto; } .flex-block-87 { - grid-column-gap: 10px; - grid-row-gap: 10px; - flex: 1; + grid-column-gap: 0px; + grid-row-gap: 0px; } .mobile-menu-bottom { - padding-top: 0; - padding-bottom: 0; - box-shadow: 0 0 5px #0003; + margin-left: 0; + margin-right: 0; + padding-left: 15px; + padding-right: 15px; } - .mobile-menu-bottom.info { - padding-top: 20px; - padding-bottom: 20px; + .mobile-menu-bottom.nav, .mobile-menu-bottom.info { + padding-left: 15px; + padding-right: 15px; } - .mobile-menu-buttom-section { - display: block; + .mobile-menu-bottom.subscribe, .mobile-menu-bottom.footer { + padding: 40px 15px; } .name-mobile-menu-item { - color: var(--black); - font-size: var(--_fonts---font-size--small-font-size); - font-weight: 400; - } - - .button-for-mobile-menu-block { - grid-column-gap: 2px; - grid-row-gap: 2px; - background-color: var(--_fonts---color--white); - color: var(--_button---light-blue-grey); - flex-flow: column; - width: 70px; - } - - .button-for-mobile-menu-block:hover { - background-color: var(--_button---light-blue); - } - - .icon_favorite { - color: var(--_button---light-blue-grey); - } - - .block-for-moble-menu-icon { - 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; + .button-for-mobile-menu-block { + grid-column-gap: 0px; + grid-row-gap: 0px; + width: 60px; + padding-bottom: 5px; } - .flex-block-93 { - align-self: auto; - min-height: 48px; + .section-3 { + padding-left: 15px; + padding-right: 15px; } - .sort-list-card { - padding-right: 30px; + .nav-menu-3 { display: none; } + .flex-block-93 { + margin-left: 0; + } + + .sort-list-card { + grid-column-gap: 0px; + grid-row-gap: 0px; + padding-left: 18px; + padding-right: 18px; + } + .flex-block-49-copy { - grid-column-gap: 30px; - grid-row-gap: 30px; + grid-column-gap: 28px; + grid-row-gap: 28px; } .price-in-cart-s1 {