Создание прототипа главной страницы home-new, изменение стилей на остальных страницах. Требуется дальнейшее тестирование. логика выбора авто сделана

This commit is contained in:
egortriston
2025-07-04 18:51:57 +03:00
parent 5b8ff6c02e
commit d6d086299f
14 changed files with 2153 additions and 1031 deletions

View File

@ -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;
}