Создание прототипа главной страницы home-new, изменение стилей на остальных страницах. Требуется дальнейшее тестирование. логика выбора авто сделана
This commit is contained in:
egortriston
43
src/components/index/BestPriceSection.tsx
Normal file
43
src/components/index/BestPriceSection.tsx
Normal file
@ -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;
|
||||
158
src/components/index/BrandSelectionSection.tsx
Normal file
158
src/components/index/BrandSelectionSection.tsx
Normal file
@ -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;
|
||||
39
src/components/index/CategoryNavSection.tsx
Normal file
39
src/components/index/CategoryNavSection.tsx
Normal file
@ -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;
|
||||
36
src/components/index/IndexTopMenuNav.tsx
Normal file
36
src/components/index/IndexTopMenuNav.tsx
Normal file
@ -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;
|
||||
54
src/components/index/NewArrivalsSection.tsx
Normal file
54
src/components/index/NewArrivalsSection.tsx
Normal file
@ -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;
|
||||
@ -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">
|
||||
|
||||
67
src/components/index/ProductOfDaySection.tsx
Normal file
67
src/components/index/ProductOfDaySection.tsx
Normal file
@ -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 "STANDARD", 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;
|
||||
21
src/components/index/PromoImagesSection.tsx
Normal file
21
src/components/index/PromoImagesSection.tsx
Normal file
@ -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;
|
||||
25
src/components/index/SupportVinSection.tsx
Normal file
25
src/components/index/SupportVinSection.tsx
Normal file
@ -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;
|
||||
44
src/components/index/TopSalesSection.tsx
Normal file
44
src/components/index/TopSalesSection.tsx
Normal file
@ -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;
|
||||
44
src/pages/home-new.tsx
Normal file
44
src/pages/home-new.tsx
Normal file
@ -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 />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -490,3 +490,203 @@ 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 */
|
||||
}
|
||||
@ -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);
|
||||
--_fonts---font-family: Onest, sans-serif;
|
||||
color: #333;
|
||||
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%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
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-row-gap: 40px;
|
||||
grid-column-gap: 20px;
|
||||
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: ". ."
|
||||
". ."
|
||||
"Area Area"
|
||||
/ 1fr 1fr;
|
||||
grid-template: "."
|
||||
"."
|
||||
/ 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-row-gap: 26px;
|
||||
grid-column-gap: 22px;
|
||||
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;
|
||||
margin-bottom: 18px;
|
||||
height: 46px;
|
||||
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;
|
||||
height: 260px;
|
||||
min-width: 240px;
|
||||
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);
|
||||
width: 200px;
|
||||
font-size: var(--_fonts---font-size--bigger);
|
||||
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;
|
||||
height: 60px;
|
||||
position: absolute;
|
||||
flex: none;
|
||||
justify-content: center;
|
||||
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;
|
||||
height: 260px;
|
||||
min-width: 240px;
|
||||
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-row-gap: 40px;
|
||||
grid-column-gap: 20px;
|
||||
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 {
|
||||
margin-left: 0;
|
||||
.code-embed-15 {
|
||||
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 {
|
||||
display: block;
|
||||
.flex-block-80 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-block-83 {
|
||||
flex-flow: column;
|
||||
.flex-block-81 {
|
||||
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;
|
||||
height: 16px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.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);
|
||||
.flex-block-77-copy {
|
||||
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;
|
||||
margin-right: 0;
|
||||
align-self: stretch;
|
||||
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;
|
||||
}
|
||||
|
||||
.heading-9-copy-copy {
|
||||
font-size: var(--_fonts---font-size--small-font-size);
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.section-2 {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-block {
|
||||
flex: 0 auto;
|
||||
width: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-block-87 {
|
||||
@ -7619,23 +8761,24 @@ body {
|
||||
}
|
||||
|
||||
.mobile-menu-bottom {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
box-shadow: 0 0 5px #0003;
|
||||
}
|
||||
|
||||
.mobile-menu-bottom.nav, .mobile-menu-bottom.info {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.mobile-menu-bottom.info {
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.mobile-menu-bottom.subscribe, .mobile-menu-bottom.footer {
|
||||
padding: 40px 15px;
|
||||
.mobile-menu-buttom-section {
|
||||
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 {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.icon_favorite {
|
||||
color: var(--_button---light-blue-grey);
|
||||
}
|
||||
|
||||
.nav-menu-3 {
|
||||
display: none;
|
||||
.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;
|
||||
}
|
||||
|
||||
.flex-block-93 {
|
||||
@ -7666,15 +8822,13 @@ body {
|
||||
}
|
||||
|
||||
.sort-list-card {
|
||||
grid-column-gap: 0px;
|
||||
grid-row-gap: 0px;
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
padding-right: 30px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-block-49-copy {
|
||||
grid-column-gap: 28px;
|
||||
grid-row-gap: 28px;
|
||||
grid-column-gap: 30px;
|
||||
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;
|
||||
padding: 15px 30px;
|
||||
align-self: auto;
|
||||
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user