@charset "UTF-8";

* {
margin: 0;
padding: 0;
}

@font-face {
    font-family: 'Poppins';
    src: url('Poppins-Bold.eot');
    src: local('Poppins Bold'), local('Poppins-Bold'),
        url('Poppins-Bold.eot?#iefix') format('embedded-opentype'),
        url('Poppins-Bold.woff2') format('woff2'),
        url('Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Poppins';
    src: url('Poppins-Regular.eot');
    src: local('Poppins Regular'), local('Poppins-Regular'),
        url('Poppins-Regular.eot?#iefix') format('embedded-opentype'),
        url('Poppins-Regular.woff2') format('woff2'),
        url('Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body {
font: 14px/20px 'Roboto', Arial, Tahoma, Verdana, sans-serif;
width: 100%;
background: #F1F1F1;
color: #1E1E1E;
overflow-y: scroll;
overflow-x: hidden;
}

input, textarea, select, button  {
outline: none;
font: 14px/20px 'Roboto', Arial, Tahoma, Verdana, sans-serif;
}

input[type='submit'], select
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;  
}

a {
color: #171c27;
text-decoration: none;
font: 14px/20px 'Roboto', Arial, Tahoma, Verdana, sans-serif;
outline: none;
transition: color .3s linear;
}

a:hover
{
color: #000878;
}

.ajax
{
	color: #EE3124;
	border-bottom:1px dashed;
	cursor: pointer;
	font-size: 14px;
}

p {
margin: 15px 0 20px;
} 

img, button { border: 0; }

.cb { clear: both; }
 
.none, .menu_top, .m_button, .shop_mobile { display: none; }

.c { text-align: center; }
.pr { position: relative; }


.content
{
margin: 0px auto;
width:1280px;
}

.content_small
{
margin:0 auto;
width:990px;
}


header
{
width:100%;
display: block;
background-color: #FFF;
padding:0 0 20px;
}


.header
{
	background-color: #1e1e1e;
	color:#7e7e7e;
	font-size:12px;
	line-height:16px;
	margin:0 0 16px;
}

/* white header row (logo/search/phone/vin/cart): 2nd .content child of dark .header.
   donor wraps it inside dark plate, so paint it white to match Figma white header.
   Figma: white background is FULL-BLEED (viewport width); content stays in band 1280. */
.header > .content:last-child
{
	background:#ffffff;
	position:relative;
	z-index:2;
	/* hdrgeo: middle band layout per Figma 56:457 — logo|phones (left), search centered (460), vin before cart, cart at right */
	justify-content:flex-start;
	gap:24px;
}
.header > .content:last-child .vin_btn{ margin-left:0; }
.header > .content:last-child .cart{ margin-left:24px; }
/* PIXFIX-7 ПУНКТ-1 2026-06-15: ГОРИЗОНТАЛЬНЫЕ ЗАЗОРЫ ШАПКИ по Figma 56:457 (асимметричные).
   База (gap:24 + search margin:auto) даёт РОВНЫЕ зазоры ≠ макет. Только на ПОЛНОМ десктопе
   (band=1280 @≥1281) задаём явное РАСПРЕДЕЛЕНИЕ: суммарные зазоры 44+36+36+107=223 = 1280−(logo220+phones163+search460+vin164+cart50).
   Ширины элементов НЕ трогаем. ≤1280 (band 996, узкие bp) — оставляем гибкую базу (h-scroll уже =0, не ломаем). */
/* Порог 1300 (не 1281): при viewport 1281..1299 фикс-band 1280 + суб-пиксельное округление :before-fullbleed
   давало 2px h-scroll; 1300+ — запас, у Figma-цели (1440) гэпы точны. 1281..1299 = гибкая база (h-scroll 0). */
@media screen and (min-width:1300px){
	.header > .content:last-child{ gap:0; justify-content:flex-start; }
	.header > .content:last-child .phone{ margin-left:44px; }      /* logo→phones=44 */
	.header > .content:last-child .search{ margin:0 0 0 36px; flex:0 0 460px; width:460px; max-width:460px; }     /* PIXFIX-9: phones→search=36 + ширина ровно 460 (снят shrink → не 453; полный десктоп band=1280 вмещает) */
	.header > .content:last-child .vin_btn{ margin-left:36px; }     /* search→vin=36 */
	.header > .content:last-child .cart{ margin-left:107px; }       /* vin→cart=107 */
}
.header > .content:last-child:before
{
	content:"";
	position:absolute;
	top:0; bottom:0;
	left:50%;
	margin-left:-50vw;
	width:100vw;
	background:#ffffff;
	z-index:-1;
}
/* PIXFIX-8 ПУНКТ-2 2026-06-15: ВЕРТИКАЛЬНЫЙ РИТМ ШАПКИ по Figma (header_top 56:440=44px,
   header 56:457=130px, итого ~174px; логотип центрирован с воздухом ~27/28). Было: плашка 30,
   белый ряд 75, зазор плашка→лого 0 (всё сжато). Высоты ТОЛЬКО на десктопе ≥1001 — на моб ≤1000
   ряд оборачивается (flex-wrap), там min-height растянул бы пустоту → не трогаем мобильную логику.
   Лого 75px центрируется в ряду 130px → воздух (130-75)/2≈27.5 сверху/снизу = зазор плашка→лого≈27. */
@media screen and (min-width:1001px){
	/* тёмная верхняя плашка (htop: соц/меню/расписание/вход) → 44px, контент по центру */
	.header > .content:not(:last-child){
		min-height:44px;
		align-items:center;
	}
	/* белый ряд (лого/поиск/телефоны/VIN/корзина) → 130px, элементы вертикально по центру */
	.header > .content:last-child{
		min-height:130px;
		align-items:center;
	}
}

header .content
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

header li
{
	list-style: none;
	display:inline-block;
	margin:0 15px 0 0;
}

header a
{
	color:#7e7e7e;
	text-decoration: none;
	font-size:12px;
}

header a:hover,
#menu_top li a:hover
{
	color:#ffffff;
	text-decoration: underline;
}

/* skin */
.login a.profile,
.login a.profile_ok
{
	color:#ffffff;
	text-decoration: underline;
	background:none;
	padding:0;
	display:inline-block;
}
/* PIXFIX-3 2026-06-15: user icon before login link (Figma 56:448, 16px mono on dark bar) */
.login a.profile, .login a.profile_ok{ position:relative; padding-left:22px; }
.login a.profile:before, .login a.profile_ok:before{
	content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
	width:16px; height:16px;
	background-color:#7e7e7e;
	-webkit-mask:url(face/user.svg) no-repeat center / 16px 16px; mask:url(face/user.svg) no-repeat center / 16px 16px;
}


a.profile
{
	background-color: #172164;
	padding:11px 20px 13px;
	display:block;
}

a.profile_ok
{
	background-color: #172164;
	padding:6px 20px 6px;
	display:block;
	text-align: center;
}
a.profile_ok+a.profile_ok
{
background-color: #424242;	
	padding:4px 20px 4px;
	margin:4px 0 0 ;
}

.lang
{
	display:inline-flex;
	align-items:center;
	gap:4px;
	font-size:12px;
	line-height:16px;
	color:#7e7e7e;
	white-space:nowrap;
}
.lang a,
.lang b
{
	display:inline-block;
	padding:0;
	font-weight:400;
	font-size:12px;
	color:#7e7e7e;
	text-decoration:none;
}
.lang::after
{
	content:"";
	width:16px;
	height:16px;
	flex:0 0 auto;
	background:url(face/arrow.svg) no-repeat center / 12px 12px;
	opacity:.7;
}

a.ks, a.vf
{
background:url(face/phone_d.svg?v=1) no-repeat 0 50% / 20px 20px;
padding:0 0 0 30px;
display:block;
margin:0 0 11px 0;
text-decoration: none;
color:#1e1e1e;
font-size:16px;
line-height:22px;
}
.phone a:last-child{ margin-bottom:0; }
.phone{ flex:0 0 auto; }

a.vf
{
	background-image: url(face/phone_d.svg?v=1);
}


a.logo
{
width: 220px;
height:75px;
text-decoration: none;
display: block;
background: url(face/logo_lider.png?v=1) no-repeat left center;
background-size: contain;
flex:0 0 auto;
}


.search
{
	position: relative;
	/* hdrgeo: Figma 56:458 — 460px field (no grow), shrinkable so narrow .content(996) has no h-scroll; centered via auto margins */
	flex:0 1 460px;
	width:460px;
	max-width:460px;
	min-width:0;
	margin:0 auto;
}

.search input
{
padding:15px 50px 15px 21px;
background: #f4f4f4;
border:0;
border-radius: 100px;
	width:100%;
	height:50px;
	box-sizing: border-box;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
}
.search input::placeholder{ color:#adadad; font-size:14px; }

.search input:focus
{
	 background:#f4f4f4;
}

.search button
{
	background: url(face/search.svg) no-repeat center;
	background-size:20px 20px;
	position: absolute;
	right: 17px;
	top: 15px;
	cursor: pointer;
	width:20px;
	height:20px;
}

.cart div
{
	width:50px;
	height:50px;
	border-radius:100px;
	border:2px solid #ffffff;
	background:linear-gradient(180deg,#ffffff 0%,#f4f4f4 100%) ;
	box-shadow:0 8px 16px rgba(0,0,0,.12);
	box-sizing:border-box;
	font-size:0;
	line-height:0;
	color:transparent;
	position:relative;
	cursor:pointer;
	/* PIXFIX-8 ПУНКТ-3 2026-06-15: текст-подпись «Корзина (N)» (донор-лейбл/счётчик shop_cart.kiev,
	   механика НЕ тронута) скрыт ЧИСТО — Figma 56:476 = ТОЛЬКО иконка-тележка (:before выше).
	   text-indent выносит текст за пределы кнопки (надёжнее, чем только color:transparent → не «белый-на-белом»);
	   иконка-:before на position:absolute от text-indent не зависит. */
	text-indent:-9999px;
	overflow:hidden;
	white-space:nowrap;
}
.cart div:before
{
	content:"";
	position:absolute;
	left:50%; top:50%;
	width:22px; height:22px;
	transform:translate(-50%,-50%);
	/* PIXFIX-5: макет-иконка ТЕЛЕЖКА (Figma 56:476) — C8 mask+background-color, не <img>-фон.
	   Ассет cart.svg перезалит Figma-экспортом; цвет глифа #fff (на свето-серой круг-кнопке). */
	background-color:#1e1e1e;
	-webkit-mask:url(face/cart.svg) no-repeat center / 22px 22px;
	mask:url(face/cart.svg) no-repeat center / 22px 22px;
}
.cart div span
{
	font-size:0;
	color:transparent;
}

.cart .cart_a
{
	cursor: pointer;
	background-image: url(face/cart_a.svg);
}

/* Figma 56:470 - accent VIN button (red gradient pill) */
.vin_btn
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	flex:0 0 auto;
	box-sizing:border-box;
	width:164px;
	height:50px;
	padding:0 20px;
	border-radius:100px;
	border:2px solid #f40000;
	background:linear-gradient(180deg,#ff7171 0%,#f40000 100%);
	box-shadow:0 8px 16px rgba(244,0,0,.24);
	font-family:Roboto, sans-serif;
	font-weight:600;
	font-size:14px;
	line-height:20px;
	color:#ffffff;
	text-decoration:none;
	white-space:nowrap;
}
.vin_btn span{ color:#ffffff; }
/* PIXFIX-3 2026-06-15: scan icon on VIN button (Figma 56:473, WHITE) — mask glyph #ffffff */
.vin_btn:before{
	content:""; flex:0 0 20px; width:20px; height:20px; display:inline-block;
	background-color:#ffffff;
	-webkit-mask:url(face/scan.svg) no-repeat center / 20px 20px; mask:url(face/scan.svg) no-repeat center / 20px 20px;
}

.vin_btn:hover{ color:#ffffff; text-decoration:none; opacity:.95; }


/* skin */
.htop_time
{
	font-size:12px;
	line-height:16px;
	color:#7e7e7e;
	display:flex;
	gap:10px;
	flex-wrap:wrap;
	align-items:center;
}

/* ===== PIXFIX-4 2026-06-15 — icon_time в шапке-расписании (Figma 56:450, 16x16, СЛЕВА от блока) ===== */
/* C8-конвенция (как footer .time:before): ОДНА иконка-часы у блока .htop_time (не на каждой .time). */
/* mask существующего face/time.svg, моно #7e7e7e (Roboto 12 рядом). ::before = первый flex-item, gap:10px к тексту. */
.htop_time:before{
	content:""; display:block; flex:0 0 16px; width:16px; height:16px;
	background-color:#7e7e7e;
	-webkit-mask:url(face/time.svg) no-repeat center / 16px 16px; mask:url(face/time.svg) no-repeat center / 16px 16px;
}
.htop_time .time
{
	padding:0;
	background:none;
	line-height:16px;
	font-size:12px;
}
/* socials: far-left of header_top band (Figma 56:452 x320) */
.htop_soc
{
	display:flex;
	gap:0;
	align-items:center;
	order:-2;
}
/* language selector: left group, right after socials (Figma 56:444 "Укр") */
.lang
{
	order:-1;
	margin-left:24px;
}
/* lang + login grouped right (Figma: Авторизація right edge) */
.htop_right
{
	display:flex;
	align-items:center;
	gap:16px;
}
.htop_soc a
{
	width:30px;
	height:30px;
	border-radius:50%;
	background-color:#1e1e1e;
	background-position:center;
	background-repeat:no-repeat;
	background-size:16px 16px;
	display:inline-block;
	opacity:.85;
	transition:opacity .3s;
}
.htop_soc a:hover{ opacity:1; }

nav
{
	display:block;
	background-color: #FFF;
	/* PIXFIX-5 #8: header→меню 10px (Figma-Δ, было 0), меню→hero/крошки 30px (было 40). Глобально шапка/меню. */
	margin:10px 0 30px;
}
nav .content
{
	background:#f4f4f4;
	border-radius:100px;
	display:flex;
	align-items:center;
}


nav ul {
list-style:none;
display:flex;
flex-wrap:nowrap;
margin:0px;
padding:0px;
width:100%;
justify-content: flex-start;
position: relative;
/* pills natural size (Figma 56:532), row scrolls horizontally inside band — no page h-scroll */
overflow-x:auto;
overflow-y:visible;
scrollbar-width:none;
-ms-overflow-style:none;
}
nav ul::-webkit-scrollbar { display:none; }
/* when a mega-menu is open (.menu_a), let the absolute dropdown escape the scroll clip */
nav ul:has(.menu_a) { overflow:visible; }

/* catalog tabs natural width (DB may exceed Figma 8); row scrolls, pills not crushed */
nav ul .menu_one
{
	flex:0 0 auto;
}

nav span {
font-size:16px;
line-height:20px;
position:relative;
display:flex;
align-items: center;
justify-content:center;
z-index:20;
height:100%;
font-weight: 600;
color:#1e1e1e;
padding:18px 16px;
text-align:center;
white-space:nowrap;
box-sizing: border-box;
cursor: pointer;
filter: drop-shadow(0 8px 8px rgba(0,0,0,.24));
border-radius:100px;
}
/* skin */
nav ul .menu_one:first-child span
{
	background:linear-gradient(180deg,#494949 0%,#1e1e1e 100%);
	border:2px solid #1e1e1e;
	color:#ffffff;
	box-shadow:0 8px 16px rgba(0,0,0,.24);
	filter:none;
	text-transform:uppercase;
	padding:16px 20px;
}
nav ul .menu_one:first-child span:hover{ background:linear-gradient(180deg,#494949 0%,#1e1e1e 100%); }

nav span:after
{
display:none;
}

.menu_one
{
	position: relative;
}

nav li:hover span
{
background-color: transparent;
}

.menu_all {
position: absolute;
background: #F1F1F1;
z-index: 21;
/* flex-wrap: wrap; */
display: flex;
top:100%;
box-shadow: 4px 5px 6px 0px rgba(0, 0, 0, .18);
padding:0 0 15px;
border: 1px solid #c5c5c5;
border-top:0;
top:-999999px; 
left:-999999px;
visibility: hidden;

}


.menu_a .menu_all {
top:100%;
visibility:visible;
animation: nav .2s;
left:0;
}

@keyframes nav {
0%{opacity:0; transform:translateY(10px)}
100%{opacity:1;transform:translateY(0)}
}

.menu_row {
width:280px;
margin:0px 20px;
}


.garage_submenu +div, .garage_submenu +div+div, .garage_submenu +div+div+div
{
	margin:30px 20px 0;
}

.menu_all a {
display:block;
color:#140000;
margin:0 0 6px 0;

}

.menu_all a:hover {
text-decoration:none;
color:#CC0000;
}

nav strong
{
font-size:15px;
line-height:21px;
display:block;
color:#140000;
padding:20px 0 6px 0;
}

.name, h1
{
	font-weight: bold;
	font-size:40px;
	line-height:44px;
	margin: 20px 0 50px;
}

.name_2, h2
{
	font-weight: bold;
	font-size:34px;
	line-height:38px;
	padding: 40px 0 40px;
}

.name_3, h3
{
	font-weight: bold;
	font-size:28px;
	line-height:32px;
	padding: 30px 0;
}

.name_4, h4
{
	font-size:22px;
	line-height:26px;
	padding: 20px 0;
}

.name_5
{
	font-size:18px;
	line-height:22px;
	padding: 20px 0 5px;
	font-weight: bold;
}

.name_s
{
	font-size:16px;
	line-height:24px;
	color:#7e7e7e;
	margin:-20px 0 0;
	text-align: left;
}

.bread+h1
{
	font-size:36px;
	line-height:48px;
	font-weight:500;
	color:#1e1e1e;
	text-align: left;
}

a.send_2
{
padding:16px;
width:100%;
max-width: 730px;
text-align: center;
color:#172164;
margin:40px auto;
text-decoration: none;
border: 1px solid #172164;
border-radius: 10px;
display:block;
font-weight: bold;
font-size:16px;
transition: background-color .3s linear;
	box-sizing: border-box;
}

a.send, .send
{
padding:15px 30px;
/* background: linear-gradient(350deg, #3143C2 0%, #172164 100%); */
background-color: #050C3A;
color: #FFF;
text-decoration: none;
border:0;
border-radius: 10px;
display:inline-block;
cursor: pointer;
/* font-weight: bold; */
font-size:16px;
}


a.send_2:hover, .help a:hover, .no_price button:hover, .send:hover
{
	background: #172164;
	color:#FFF;
}


.bread
{
font-size: 14px;
line-height: 20px;
color: #747474;
padding:0 0 20px;
}

.bread a:after
{
font-size: 14px;
content: "/";
display: inline-block;
padding: 0 8px;
text-decoration: none;
}

.bread a
{
font-size: 14px;
line-height: 20px;
color: #747474;
text-decoration: none;
}

/* первый сегмент крошек (Головна) — подчёркнут (Figma 56:2043) */
.bread a:first-child
{
text-decoration: underline;
}

.bread a:hover {
    color:#000;
}



.tabs
{
	color:#1e1e1e;
	font-weight: 600;
	font-size:16px;
	text-align: center;
	display:flex;
	gap:10px;
	margin:30px 0;
}
.tabs li
{
	list-style: none;
	flex:1;
	padding:22px 20px;
	cursor: pointer;
	border-radius:100px;
	background:#f4f4f4;
	color:#1e1e1e;
	text-transform:uppercase;
	box-sizing:border-box;
	/* PIXFIX-5 #11: flex-центрирование иконки таба влито в base (было 3-е плоское объявление .tabs li
	   на 5632, перекрывавшее @media .tabs li{display:block}). Моб-стек @media≤761 (display:block) сохранён. */
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
}
.tabs li.tabs_a
{
	background: linear-gradient(180deg,#494949 0%,#1e1e1e 100%);
	border:2px solid #1e1e1e;
	color:#FFF;
	box-shadow:0 8px 8px rgba(0,0,0,.24);
}

.tab_info
{
	display:none;
}

.tab_a
{
	display:block;
}

/* garage outer block (Figma 56:596): white radius44 shadow */
.garage_my, .tab_info.tab_a, .section-select
{
	background:#ffffff;
	border-radius:44px;
	box-shadow:0 8px 16px rgba(0,0,0,.12);
	box-sizing:border-box;
}
.tab_info.tab_a{ padding:20px; }

/* cascade dropdowns: pill strip #f4f4f4 radius100 */
.garage_alls
{
	display: flex;
	justify-content: space-between;
	background:#f4f4f4;
	border-radius:100px;
	padding:4px;
}

.garage_alls div
{
background:transparent;
border:0;
font-weight: 600;
font-size:16px;
color:#1e1e1e;
padding:18px 20px;
transition: background-color .3s;
cursor: pointer;
display: flex;
align-items: center;
border-radius:100px;
box-sizing:border-box;
width:100%;
filter:drop-shadow(0 8px 8px rgba(0,0,0,.12));
}

.garage_alls div:last-child
{
	border-right:0;
}

/* donor number badges (1..5) not in Figma -> hidden, keep pill-dropdown look (markup/mechanic kept) */
.garage_alls b
{
	display:none;
}

.garage_alls .garage_active
{
	cursor: pointer;
	color:#1e1e1e;
	background:linear-gradient(180deg,#ffffff 0%,#f4f4f4 100%);
	border:2px solid #ffffff;
	box-shadow:0 8px 16px rgba(0,0,0,.12);
	filter:none;
}
/* chevron arrow right on each dropdown.
   PIXFIX-7 ПУНКТ-2 2026-06-15: шеврон был navy (arrow.svg stroke #172164 ≠ Figma 56:601/606/611/616/620 тёмно-серый).
   РЕЮЗ механизма пагинатора model_op (M3): mask + background-color #7e7e7e (тот же ассет arrow.svg,
   точный серый glyph, НЕ navy stroke). Scoped .garage_alls (глобальный гараж → шевроны серые везде). */
.garage_alls div:after
{
	content:"";
	margin-left:auto;
	width:16px; height:16px;
	background-color:#7e7e7e;
	-webkit-mask:url(face/arrow.svg) no-repeat center / 16px 16px;
	mask:url(face/arrow.svg) no-repeat center / 16px 16px;
	flex:0 0 16px;
}
.garage_active b
{
	background-color: #1e1e1e;
	color:#FFF;
}


.step0
{
	display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.garage_year
{
	background: #FFF;
	display: grid;
  grid-template-columns: repeat(11, 1fr);
}

.step3, .step4, .step0, .step5
{
	box-shadow: 0 0 40px 0 rgba(0,0,0,.11);
	background: #FFF;
}

.garage_all
{
	width:100%;
	margin:0 0 40px;
}


.garage_alls div:not([data-id=""])
{
	font-weight: 500;
	color:#000;
	font-weight: bold;
	background-color: #dedede;
	cursor: pointer;
}

.step0 span, .step3 span, .step3 b, .garage_year div, .step4 strong
{
	cursor: pointer;
padding: 16px 12px 12px;
text-decoration: none;
border-right: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
white-space: nowrap;
font-size: 15px;
color: #000;
}

.step3 b, .garage_year div, .step3 strong
{
	font-weight: 400;
	color:#c9c9c9;
	background: #f7f7f8;
	cursor: not-allowed;
}

.garage_year div, .garage_motor strong
{
	background-color: #E8E8E8;
	color:#172164;
	font-weight: bold;
}

.garage_all span:hover
{
	color: #172164;
	background:#F1F1F1;
}

.garage_motor strong
{
	display:inline-block;
	vertical-align:top;
	width:155px;
	padding: 16px 12px 12px;
}

.step4 span
{
	width:75px;
border-right: 1px solid #DADADA;
border-bottom: 1px solid #DADADA;
	display:inline-block;
	vertical-align:top;
	cursor: pointer;
	padding: 16px 12px 12px;

}

.garage_modif_name
{
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	padding: 15px 0 10px;
	background: #F4F4F4;
}

.step5 span
{
    display: inline-block;
    vertical-align: top;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #DADADA;
    padding: 15px;
    cursor: pointer;
    width: 225px;
	font-size:16px;
}


.garage_modif virtus
{
	font-size: 12px;
	line-height: 19px;
	display: block;
	font-weight: 400;
}



.garage_submenu
{
	font-weight: bold;
	width:100%;
	position: absolute;
	background: #E5E5E5;
	padding:10px 20px;
	box-sizing: border-box;
/* 	font-family: garagefont_1; */
	text-transform: uppercase;
	text-align: left;
}

.garage_my
{
/* 	box-shadow: 0 0 20px 6px rgba(228, 224, 224, 0.5);
background-color: #fff;

	height:61px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
 }
 
 .garage_my_name
 {
	 
	border: 1px solid #172164;
	border-radius: 10px;
	display: inline-block;
	vertical-align:top;
	padding:15px 30px 15px 20px;
	cursor: pointer;
	width:160px;
	font-weight: bold;
	font-size:16px;
	color:#172164;
	background:  url(face/arrow.svg) no-repeat 98% 50% / 20px;
	
 }
 
 .garage_car
 {
 background-color: #FFF;
 border-radius:8px;
	flex:1;
	cursor: pointer;
	margin:0 10px;
	padding:10px 15px 6px 25px;
 }

 .garage_car_name
 {
	font-weight: bold;
	 font-size: 16px;
 }
 
 .garage_car_info
 {
	 text-transform: lowercase;
	 line-height: 18px;
	 white-space: nowrap;
	 overflow: hidden;
	 font-size: 13px;
	 color: #999;
 }
 
.garage_car_info span
{
	   text-transform: uppercase;
	   
}
 
.garage_new
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.garage_new span
{
		padding:13px 25px 13px 30px;
		cursor: pointer;
		background: linear-gradient(350deg, #3143C2 0%, #172164 100%);
		border: 1px solid #172164;
		border-radius: 10px;
		color:#FFF;
	justify-content: center;
	align-items: center;
		display: flex;
}

.garage_new span:before
{
	content: "";
	background:  url(face/garage.svg) no-repeat 90% 50% / 26px;
	width:26px;
	height:26px;
	margin:0 10px 0 0;
}


.garage_new span:hover, .garage_a, .garage_a span
{
	background:#172164;
	color: #FFF;
}

.garage_boxs
{
	border-top:2px solid #E5E5E5;
	display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.garage_box
{
background-color: #FFF;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.garage_next
{
	flex:1;
	padding: 14px 10px 14px 14px;
	height:69px;
	box-sizing: border-box;
}

.garage_del
{
	background: #FFF url(images/garage_del.svg) no-repeat 50% 50% / 26px;
	display: inline-block;
	vertical-align:top;
	width:48px;
	height:69px;
	opacity:.2;
	transition: opacity .5s linear;
}

.garage_del:hover
{
	opacity:1;
}

.garage_next:hover, .garage_next:hover *
{
	background:#081A2F;
	color: #FFF;
}

.find_nomer input
{
	background: #FFF url(face/nomer.svg) no-repeat;
    background-size: contain;
    padding: 0 0 0 44px;
    text-transform: uppercase;
	height: 50px;
    border: 1px solid #CFCFCF;
    box-sizing: border-box;
    border-radius: 10px 0 0 10px;
    width: 190px;
    font-size: 22px;
	font-weight: bold;
    line-height:22px;
    color: #111;
}

.find_vin input
{
	background-color: #FFF;
    background-size: contain;
    padding: 0 15px;
    text-transform: uppercase;
	height: 50px;
    border: 1px solid #CFCFCF;
    box-sizing: border-box;
    border-radius: 10px 0 0 10px;
    width: 260px;
    font-size: 20px;
	font-weight: bold;
    line-height:20px;
    color: #111;
}

.find_0 b
{
	display:inline-block;
	vertical-align:top;
	height:50px;
	line-height:50px;
	    background: linear-gradient(350deg, #3143C2 0%, #172164 100%);
    color: #FFF;
	border-radius:0 10px 10px 0;
	padding:0 18px;
	cursor: pointer;
}

.find_0
{
	text-align: center;
	background-color: #FFF;
	padding:10px 0 30px;
	border-radius:8px;
	margin:0 0 20px;
}



/****************************/
/****************************/
/****************************/





.add_cart {
text-align: center
}

.add_cart strong, .cart_fast strong
{
display: block;
margin: 8px 0;
max-height: 100px;
overflow: hidden
}

.add_cart_img, .add_cart_price, .add_cart_more, .add_cart_go 
{
display: inline-block;
width: 48%;
max-height: 200px;
vertical-align: middle;
}

.add_cart_img {
min-height: 120px
}

.ajax
{
	cursor: pointer;
	display: inline-block;
	border-bottom:1px dashed #2837A0;
	color: #2837A0;
}

.ajax:hover {
border-bottom:1px dashed #fff;
}

.add_cart_img IMG 
{
max-width: 180px;
max-height: 180px
}

.add_cart_price 
{
font-size: 28px
}

.add_cart_price .cart_minus, .add_cart_price .cart_plus 
{
margin:0px;
border: 0px;
background:#2837A0;
color: #fff;
height: 40px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
padding: 0 5px;
font-size:18px;
}

.add_cart_sp 
{
display: block;
color: #333;
text-align: center;
margin:20px 0 10px;
font-size:14px;
}


.add_cart_price input {
 height: 40px;
 font-size:22px;
 border: 1px #e9e9e9 solid;
 margin:0 5px;
 text-align:center;
 padding:0 5px;
}

.cart_minus, .cart_plus {
width:35px;
cursor: pointer;
 }



.cart_fast 
{
padding: 25px 0;
background: #efefef;
margin: 30px -50px -35px;
transition: box-shadow .5s ease;
font-size: 16px;
position: relative;
z-index: 2
}



.cart_fast_form .inp_1
{
display: inline-block;
vertical-align:top;
width: 230px;
font-size: 17px;
text-align: center;
border-radius: 8px 0 0 8px;
margin:0px;
height:46px;
box-sizing: border-box;
}

.cart_fast_form .send 
{
height:46px;
line-height:46px;
border-radius:0 8px 8px 0;
padding:0 20px;
font-weight: 400;
box-sizing: border-box;
border:1px solid #1E1E1E;
background: #1E1E1E;
}


.cart_open
{
	padding: 20px 30px;
	background-color: #FFF;
	border-radius:8px;
	box-sizing: border-box;
	margin:50px auto;
}










.cart_text {
background: #D8E4BA;
color: #3A4719;
padding: 20px 30px;
border-radius: 10px;
margin: 30px 0 0;
text-align: center
}

.cart_form 
{
width: 300px;
display:inline-block;
vertical-align:top;
/* background: #fff;
padding: 10px; */
/* box-shadow: 0px 0px 30px rgba(0,0,0,.09); */
/* border-radius: 10px;
margin:0px 0 0 0; */
}

#ship_info
{
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center/8px 10px;
	cursor: pointer;
	text-align: left;
}


/* 
#cart_form input, .inp_1 {
width: 100%;
border: 0px;
height: 40px;
border-radius: 10px;
padding: 0 25px;
font-size: 16px;
margin: 0 0 20px 0;
box-shadow: 0px 0px 20px rgba(0,0,0,.10);
background: #fff;
}

#cart_form textarea {
width: 100%;
border: 0px;
height: 100px;
border-radius: 10px;
padding: 10px 25px;
font-size: 16px;
margin: 0 0 20px 0;
box-shadow: 0px 0px 20px rgba(0,0,0,.10);
background: #fff;
} */

.vin_form textarea.inp_1
{
	max-width:100%;
	max-height: 220px;
}

.inp_1 select {
width: 100%;
border: 0px;
height: auto;
display:block;
border-radius: 10px;
font-size: 16px;
cursor: pointer;
background: #FFF url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right center / 8px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
 overflow:hidden; 
white-space:nowrap; 
text-overflow:ellipsis;
}

.pay_info 
{
padding:0px;
}

.ships {
float: left;
width: 300px;
text-align: left
}

.ships ul {
list-style: none;
margin:0px;
padding:0px;
}

.ship_name_one div:hover,.ship_name div:hover {
background: #f1f1f1
}

.ships li span {
color: #CC0000;
border-bottom: 1px dashed #CC0000
}

.ship_name_one strong {
font-weight: 400;
margin: 8px 0 2px;
display: block
}

.ship_name_one {
font-size: 18px;
margin: 4px 0
}

.ship_name_one div,.ship_name div {
padding: 4px 0 5px;
cursor: pointer
}

.ship_name {
margin: 0 0 2px 20px
}

.ships_info {
float: right;
width: 310px
}

.ships_info strong {
display: block;
font-size: 16px;
margin: 0 0 15px
}

.cart_prod 
{
display:inline-block;
vertical-align:top;
width:580px;
margin:0 0 0 50px;
}

.cart_open h4 {
padding:10px 0 20px;
margin:0px;
font-size:18px;
color:#676464;
font-weight: 400;
}

#cart_prod {
border: 1px solid #e7e7e7;
border-radius: 8px;
padding:15px;
/* 	box-shadow: 0px 0px 13px rgba(0,0,0,.13); */
}


.cart_tr {
width: 100%;
border-bottom: 1px solid #e7e7e7;
margin: 20px 0
}

.cart_del {
position: absolute;
background: #000 url(face/close.svg) no-repeat 50% / 16px;
/* background-size: 16px 16px; */
width: 24px;
height: 24px;
top: -5px;
right: -5px;
cursor: pointer;
border-radius: 50%;
opacity:.15;
}

.cart_del:hover 
{
opacity:1;
}

.cart_img {
width: 90px;
height: 90px;
padding:0 20px 0 0;
}

.cart_name {
position: relative;
text-align: left;
padding:0 20px 0 0;
}

.cart_name span {
display: block;
color: #333
}

.cart_name a, .cart_name b
{
max-height: 70px;
overflow: hidden;
display:block;
text-decoration: none;
font-weight: bold;
}

.cart_img IMG 
{
max-width: 85px;
max-height: 85px
}

.cart_price_one {
width: 80px;
text-align: left;
  }

.cart_price_kolvo {
width: 120px;
text-align: center;
display:flex;
}

.kolvo {
text-align: center;
font-size: 16px;
padding:3px 5px;
width: 34px;
border: 1px solid #D3D3D4
}



.cart_price_kolvo .cart_minus, .cart_price_kolvo .cart_plus {
margin: 0px;
border: 0px;
height: 34px;
border-radius: 8px;
cursor: pointer;
padding: 0 5px;
font-size:20px;
}


.cart_price_sum {
white-space: nowrap;
text-align: center;
font-size: 20px
}

.cart_itogo 
{
padding: 0 20px
}

.cart_itogo table 
{
width: 100%
}

.cart_itogo td:nth-child(1) {
width: 120px;
padding: 5px 0
}

.cart_itogo td:nth-child(2) {
text-align: right;
padding: 5px 0
}

.cart_itogo tr:last-child td:nth-child(2) {
font-size: 20px;
font-weight: bold;
}

.catalogs .name_4
{
	text-align: left;
}

.catalogs span
{
	text-align: left;
	display:block;
	font-weight: bold;
	font-size:16px;
	margin:0 0 20px;
}

.catalogs .pop_cats
{
	margin:0 0 40px;
}

.oops {
background: #FFBFC3;
color: #000;
font-size: 18px;
padding: 5px 10px;
margin:0 0 5px 0;
}
/* 
.users_page {
padding: 20px 0;
display:flex;
flex-wrap: wrap;
}

.users_page .info {
width:100%;
margin:0 0 20px 0;
}

.row_50 {
width: 50%;
vertical-align: top;
text-align: center
}

.user_form_name {
font-size: 20px;
margin: 20px 0
}
 */


/****************************/
/****************************/
/****************************/

.vin_form
{
padding:25px;
background: #E8E8E8;
border-radius: 10px;
}

.vin_rows, .page_rows
{
			display: grid;
    grid-template-columns: repeat(3, 1fr);
		gap: 40px;
}

.page_rows a
{
background: #FFFFFF;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
}

.page_rows span
{
	display:block;
	font-size:18px;
	padding:20px;
}

.page_rows img
{
	max-width:100%;
}

.maps iframe {
width:100%;
height:350px;
border:0;
}


.contact_rows
{
			display: grid;
    grid-template-columns: repeat(4, 1fr);
		gap: 50px;
		margin:0 0 40px;
}

.contact_rows a
{
	display:block;
	margin:0 0 10px;
}

a[href^="mailto:"]
{
	display:inline-block;
	padding:0 0 0 26px;
	background: url(face/mail.svg) no-repeat 0 50% / 20px;
}

.whys
{
		border-bottom:1px solid #CACACA;
		padding: 30px 0 50px;
		margin:0 0 80px;
}

.why
{
	display:inline-block;
	vertical-align:top;
	width:33%;
	padding:0 20px;
	box-sizing: border-box;
	font-size:16px;
	text-align: center;
	
}

.why:nth-child(even)
{
	border-left:1px solid #CACACA;
	border-right:1px solid #CACACA;
}

.why_name
{
	font-weight: bold;
	font-size:24px;
	line-height:26px;
	margin: 30px 0 18px;
}


/* pop_cats grid + card: Figma 56:488 skin lives HERE (donor source rule, single owner).
   Card = a.pop_cat; element details (name/btn/mask) below in body-skin block. */
.pop_cats
{
	display:grid;
	grid-template-columns:repeat(4, 300px);
	justify-content:space-between;
	gap:27px;
	margin:0 0 60px;
}
.pop_cats a
{
	position:relative;
	display:block;
	width:300px;
	height:450px;
	padding:0;
	border-radius:30px;
	overflow:hidden;
	background:#7e7e7e;
	box-shadow:none;
	text-align:left;
	text-decoration:none;
}
.pop_cats img
{
	position:absolute; inset:0;
	width:100%; height:100%;
	margin:0;
	object-fit:cover;
	display:block;
}
.pop_cats a:hover
{
	box-shadow:none;
}

/* help banner: Figma 56:592 skin lives HERE (donor source rule, single owner). */
.help
{
	position:relative;
	box-sizing:border-box;
	min-height:174px;
	margin:0 0 60px;
	padding:41px 47px;
	border-radius:30px;
	overflow:hidden;
	background:linear-gradient(-30.98deg,#000000 72.49%,#666666 108.29%);
	color:#fff;
	text-align:left;
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:20px;
	line-height:30px;
}
.help .name
{
	font-weight:700;
	font-size:36px;
	line-height:48px;
	margin:0 0 10px;
}
.help a
{
	display:inline;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;
	color:#f40000;
	text-decoration:underline;
	font-weight:400;
	font-size:20px;
	line-height:30px;
	transition:none;
}
.help a:hover{ background:none; color:#f40000; }

/* body bg wrapper: layout bg is light/transparent, not white */
.bg
{
	background-color:transparent;
}

/* brands grid: Figma 56:638 skin lives HERE (donor source rule, single owner). */
.marki
{
	display:grid;
	grid-template-columns:repeat(7, 170px);
	justify-content:space-between;
	gap:15px;
	margin:0 0 60px;
}
.marki a
{
	display:flex;
	flex-direction:column;
	width:170px;
	height:150px;
	padding:0;
	border-radius:18px;
	border:1px solid #e0e0e0;
	background:#f4f4f4;
	overflow:hidden;
	font-size:16px;
	text-decoration:none;
}
.marki a img
{
	box-sizing:border-box;
	width:100%;
	height:100px;
	margin:0;
	padding:20px;
	object-fit:contain;
	background:#fff;
	border-bottom:1px solid #e0e0e0;
	display:block;
}
.marki a span
{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0 12px;
	font-family:Roboto, sans-serif;
	font-weight:600;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
	text-align:center;
}
.marki a:hover
{
	box-shadow:none;
	background-color:#f4f4f4;
}
.marki a:hover span
{
	border:0;
}




.text h2, .text h3, .text h4
{
	margin:40px 0 30px;
}



.text blockquote
{

    margin: 40px auto;
    padding: 1em 30px .9em 65px;
    border:1px solid #FF7C00;
	border-left: 4px solid #FF7C00;
    position: relative;
    background: linear-gradient(to right, #f4f4f4 0%,#f4f4f4 310px,#ffffff 460px,#ffffff 100%);
}

.text blockquote::before {
content: "�";
    font-size:40px;
	font-weight: bold;
	 color: #FF7C00;
    position: absolute;
    left: 20px;
    top: 14px;
}

 


.text
{
	line-height: 28px;
	color:#000;
	
}


.text embed
{
width:100%!important;
/* height: auto; */
}

.iframe_block
{
max-width:1172px;
display: block;
    width: 100%;
    margin: 0px auto;
}

 .text .iframe
{
    padding: 0 0 56.25%;
    position: relative;
    display: block;
    height: 0;
    overflow: hidden;
}

.text iframe
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.text IMG
{
max-width: 100%;
width: auto !important;
height: auto !important;
}

.text UL, .text OL
{
margin: 10px 0 10px 30px;
/* line-height: 22px; */
font-weight: 400;
}

.text OL 
{
	counter-reset: item
}

.text OL LI
{
margin:7px 0;
padding: 0 0 0 28px;
list-style:none;
}

.text OL LI:before { content: counter(item) ") "; counter-increment: item; color: #000; background: #fff2e6;  border-radius:50%;  margin: 0 10px 0 -28px }

.text UL LI
{
margin:7px 0;
padding: 0 0 0 24px;
line-height:24px;
list-style: none;
background: url(face/arrow1.svg) no-repeat 0 5px / 12px;
	/* background-size: 12px; */
}



.text a[name]
{
text-decoration: none;
cursor: default;
}
.text a[name]:hover
{
color: #a73692;
}


footer
{
	background-color: #FFF;
	padding:40px 0 10px;
	margin:40px 0 0;
	border-top:1px solid #DADADA;
	color:#747474;
}

footer .name_3
{
	font-weight: bold;
	font-size:16px;
	margin:0 0 18px;
	padding:0px;
	text-align: left;
}

.footer_row
{
	display:inline-block;
	vertical-align:top;
	width:24%;
	box-sizing:border-box;
}

.time
{
	padding:0 0 10px 30px;
	background: url(face/time.svg) no-repeat;
	line-height:22px;
}

.footer_row ul {
list-style:none;
}

footer li a
{
	color:#747474;
	display:block;
	margin:0 0 4px;
}

address
{
	display:block;
	padding:0 0 6px 30px;
	background: url(face/address.svg) no-repeat;
	font-style: normal
}

footer a[href^="tel:"]
{
	display:block;
	text-decoration: none;
	margin:0 0 14px;
}

.footer_line
{
	margin:20px 0 30px;
	border-bottom:1px solid #DADADA;
	
}

.logos
{
	background: url(face/logos.svg) no-repeat;
	width:49%;
	height:40px;
	display:inline-block;
	vertical-align:top;
}

.copy
{
	text-align: right;
	display:inline-block;
	vertical-align:top;
	width:50%;
}



.social a 
{
/* background-color: rgba(255,255,255,.9); */
margin: 0 10px 0 0;
background-size: 70% 70%;
opacity: .6;
display:inline-block;
}


 .social a 
{
margin:0 10px 0 0px;
width:22px;
height:22px;
display:inline-block;
background-size: contain  !important;
opacity: .6;
}

.social a:hover
{
	opacity: 1;
}

/* PIXFIX FIX-1: соц-иконки МОНО (Figma 56:452 header / 56:897 footer).
   Тёмный круг #1e1e1e уже на .htop_soc a / .footer_bottom .social a. Глиф — БЕЛЫЙ
   моно-силуэт через CSS mask существующего ассета (donor-класс остаётся хуком C8,
   markup не тронут → общий блок header+footer, propagation на все страницы). */
a.icon_tw, a.icon_in, a.icon_tg, a.icon_sk,
a.icon_fb, a.icon_you, a.icon_viber, a.icon_wh, a.icon_mes
{
	background-image:none;
	position:relative;
}
a.icon_tw::before, a.icon_in::before, a.icon_tg::before, a.icon_sk::before,
a.icon_fb::before, a.icon_you::before, a.icon_viber::before, a.icon_wh::before, a.icon_mes::before
{
	content:"";
	position:absolute;
	inset:25%;
	background-color:#fff;
	-webkit-mask-repeat:no-repeat;
	mask-repeat:no-repeat;
	-webkit-mask-position:center;
	mask-position:center;
	-webkit-mask-size:contain;
	mask-size:contain;
}
a.icon_tw::before    { -webkit-mask-image:url(icons/tw.svg);    mask-image:url(icons/tw.svg); }
a.icon_in::before    { -webkit-mask-image:url(icons/inst.svg);  mask-image:url(icons/inst.svg); }
a.icon_tg::before    { -webkit-mask-image:url(icons/tel.svg);   mask-image:url(icons/tel.svg); }
a.icon_sk::before    { -webkit-mask-image:url(icons/sky.svg);   mask-image:url(icons/sky.svg); }
a.icon_fb::before    { -webkit-mask-image:url(icons/fb.svg);    mask-image:url(icons/fb.svg); }
a.icon_you::before   { -webkit-mask-image:url(icons/you.svg);   mask-image:url(icons/you.svg); }
a.icon_viber::before { -webkit-mask-image:url(icons/viber.svg); mask-image:url(icons/viber.svg); }
a.icon_wh::before    { -webkit-mask-image:url(icons/wh.svg);    mask-image:url(icons/wh.svg); }
a.icon_mes::before   { -webkit-mask-image:url(icons/mes.svg);   mask-image:url(icons/mes.svg); }

/* PIXFIX-5 FIX-5: соц-иконки ШАПКИ (header_top) — серый глиф #7e7e7e (Figma 56:452/56:453,
   gray_on_dark). Футер-соцсети остаются БЕЛЫМИ (#fff, визуал-критик принял) — НЕ тронуты. */
.htop_soc a::before{ background-color:#7e7e7e; }

.error
{
border-color:  red !important;
transition: all 0.3s ease-in-out;
}

 .inp_1:focus
 {
	 box-shadow: 0 0 2px 2px rgba(0,0,0,.1);  
  }
 
 .inp_1
 {
 color: #000;
 padding:12px 20px;
 display: block;
 width: 100%;
 font-size:16px;
 box-sizing: border-box;
 margin:3px auto 14px;
 max-width: 310px;
 border-radius: 8px;
 background-color: #FFF;
 border: solid 1px #dcdcdc;
 }


.send, a.send, .pagination, .tab_info , .garage_my {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

 

#loader, .loader
{
display: none;

    position: fixed;
    z-index: 2000;
	width: 120px;
    height: 120px;
	border-radius:50%;
    top: 50%;
    right: 50%;
    background:  #000 url(tmp/load.gif) no-repeat 50% / 60px;
   /*  background-size: 60px; */
}



.window
{
  position: fixed;
  z-index: 103;
  top: -8%;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  -webkit-overflow-scrolling: touch;
  }

 
.window:after {
  display: inline-block;
  height: 100%;
  margin: 0 0 0 -0.05em;
  content: "";
  vertical-align: middle;
}

#window 
{
  position: relative;
  outline: none;
  display: inline-block;
  box-sizing: border-box;
  border-radius:8px;
  
 /*  width: 100%; */

  padding: 35px 50px;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
background: #FFF;
  max-width: 830px;
  vertical-align: middle;
  /* box-shadow: 0px 0px 20px 10px  rgba(0,0,0,.3); */
}
 
 .window  .name, .window h1
 {
	 font-size:34px;
	 line-height:40px;
	 margin:30px 0;
 }

.locked
{
overflow: hidden;
/* margin:0 18px 0 0; */
}
  
.close
{
position: absolute;
z-index: 102;
top: -5px;
right: -5px;
width: 34px;
height: 34px;
cursor: pointer;
border-radius:4px;
background:  #000 url(face/close.svg) no-repeat 50% / 22px;
/* background-size: 22px; */
}

#popup_shadow 
{ 
background: rgba(0,0,0,.7); 
position:fixed; left:0; top:0; bottom:0; right:0;  height:100%; width:100%; z-index:100; 
 }


.admin {
    padding: 20px;
    background: #FFF;
    border: 10px solid #000;
    border-right: 0;
    position: fixed;
    z-index: 999999999999;
    top: 0;
    right: 0
}

.admin span {
    display: inline-block;
    margin: 0 0 0 30px;
    font-size: 14px
}

.admin td {
    border-bottom: 1px solid #c9c9c9;
    padding: 3px 5px
}

.admin .close {
    right: 0px
}

TABLE.details_list, TABLE.table, .tah0
 {
width: 100%;
border-collapse: collapse;
color: #000
}


TABLE.details_list td, .table td {
border-bottom: 1px solid #f1f1f1;
padding: 5px 10px;
font-size:13px;
}

TABLE.details_list td  a
{
	font-weight: bold;
	line-height:22px;
}

TABLE.details_list tbody TR:hover
 {
background: #F1F1F1
}

.table TH {
background:#1E1E1E;
color: #FFF;
border-left: 2px solid #FFF;
padding: 10px;
text-align: left;
}

.t_find TH
{
	padding:15px 10px;
}

.t_find td
{
	background-color: #FFF;
	padding:10px;
}

.t_find td:nth-child(4)
{
	text-align: right;
}

a.a_find
{
		background: url(face/search.svg) no-repeat;	
		display:inline-block;
		vertical-align:top;
		padding:0 0 0 30px;
}

.prod_tr
{
background-color: #FFF;	
border:1px solid #E0E0E0;

margin:0 0 20px;
}

.prod_info
{
width:728px;	
display:inline-block;
vertical-align:top;
box-sizing: border-box;
padding:20px 20px 10px 20px;
}

.prod_prices
{
	display:inline-block;
	vertical-align:top;
	width:546px;
}

.prod_img, .prod_txt
{
	display:inline-block;
	vertical-align:top;
}

.prod_txt
{
	color:#747474;
	padding:0 15px;
	width:474px;
}

.prod_info .prod_img 
{
width:180px;
}

.prod_img 
{
/* 	width:180px; */
width:100%;
	text-align: center;
}

.prod_img i, .pro_img i, .tovar_img i
{
	display:block;
	width:100%;
	height:180px;
	background: url(img/logo.svg) no-repeat 50%;
	filter: grayscale(100%);
	opacity:.4;
}

.prod_img img
{
	max-width:100%;
	max-height: 180px;
}

.prod_txt a, .prod_txt strong
{
	font-weight: bold;
	font-size:16px;
	color:#000;
	display:block;
	margin:0 0 8px;
}

/* .sort base/.sort span/.sort_a — reskined under CATEGORY LISTING (scoped) */



/*******/
/*******/


.tovar_img
{
	display:inline-block;
	vertical-align:top;
	width:300px;
}

.tovar_img img
{
	max-width:100%;
}

.tovar_info
{
	display:inline-block;
	vertical-align:top;
	width:936px;
	margin:0 0 0 40px;
}

.tovar_garage
{
padding:15px 15px 15px 45px;
border: 1px dashed #0d0d00;
border-radius: 10px;
font-weight: bold;
background: url(face/garage_u.svg) no-repeat 10px 50% / 24px;
margin: 0 0 18px;
}

.tg_no
{
border: 1px dashed #E81021;
background-image: url(face/garage_no.svg);
}

.tg_yes
{
	border:1px dashed #65c856;
	background-image: url(face/garage_yes.svg);
}

.tovar_row
{
	display:inline-block;
	vertical-align:top;
	width:260px;
	margin:0 28px 0 0;
}

.tovar_svs
{
	margin:0 0 8px;
}

.tovar_har span:nth-child(2)
{
	font-weight: bold;
}
.tovar_svs span:nth-child(2)
{
	color:#747474;
}

.tovar_har:nth-child(odd)
{
		background-color: #f4f4f4;
}


.tovar_har
{
	background-color: #FFF;
	padding:6px 5px 6px 10px;
}


.tovar_price span
{
	font-weight: bold;
	font-size:34px;
	display:inline-block;
	margin:25px 0 25px 10px;
}


.tovar_row  .buy
{
	margin:10px 0 20px  !important;
}

.tovar_p
{
padding:0px 20px 14px 30px;
background: #E8E8E8;
border-radius: 10px;
box-sizing: border-box;
margin:0 0 0 20px;
width:300px;
}

.tovar_p span
{
	display:block;
	margin: 0 0 14px;
	background-repeat: no-repeat;
	background-size: 20px;
	padding:0 0 0 30px;
	
}

.ico_np
{
	background-image: url(face/ico_np.svg);
}

.ico_up
{
	background-image: url(face/ico_up.svg);
}

.ico_me
{
	background-image: url(face/ico_me.svg);
}

.ico_bank
{
	background-image: url(face/ico_bank.svg);
}

.ico_card
{
	background-image: url(face/ico_card.svg);
}

.ico_cash
{
	background-image: url(face/ico_cash.svg);
}
.ico_on
{
	background-image: url(face/ico_on.svg);
}

.tovar_50
{
	display: grid;
    grid-template-columns: repeat(2, 1fr);
	gap: 50px;
	margin:40px 0 0;
}

.win_pro_pr0
{
	max-height: 300px;
	overflow-y: auto;
	text-align: left;
}


/*******/
/*******/




.tah0 th
{
	background-color: #1E1E1E;
	color:#FFF;
	text-align: left;
	padding:14px 5px 10px 10px;
	font-weight: 400;
}

.tah0
{
	border-left:1px solid #DADADA;
}

.tah0 td
{
	padding:6px 5px 5px 10px;
	border-bottom:1px solid #DADADA;
	background-color: #FFF;
}

.tah1 tr:nth-child(n+4)
{
	display: none;
}

a.abuy, .pro .buy, .tovar_row .buy
{
background: linear-gradient(350deg, #3143C2 0%, #172164 100%);
border: 1px solid #172164;
border-radius: 10px;
text-decoration: none;
display: flex;
align-items: center;
color:#FFF;
height:46px;
justify-content: center;
font-weight: bold;
font-size:16px;
margin:20px auto 0;
width:100%;
cursor: pointer;
}

.abuy:hover, .pro .buy:hover, .tovar_row .buy:hover
{
	background:#172164;
}

a.abuy:before, .pro .buy:before, .tovar_row .buy:before
{
	content: "";
	background:  url(face/cartw.svg) no-repeat 0  / 24px;
/* 	background-size: 24px 24px; */
	width:34px;
	height:24px;
}


.tah0 .buy
{
	    background: #FFF url(face/cart.svg) no-repeat 5px 50% / 22px;
/* 		background-size: 22px 22px; */
		cursor: pointer;
		display:inline-block;
		vertical-align:top;
		text-decoration: none;
		border:0;
		border-radius:4px;
		padding: 8px 8px 8px 35px;
		transition: background-color .3s linear;
}

.tah0 .buy:hover
{
	background-color: #e9e9e9;
}

.tah0 td:last-child
{
	text-align: right;
	padding-right: 6px;
}

.prod_prices_all
{
	text-align: center;
	padding:20px 0;
	line-height:18px;
}


.prod_prices_all span
{
	color:#172164;
	border-bottom:1px dashed;
	cursor: pointer;
}

.no_price
{
	text-align: center;
}

.no_price button
{
	cursor: pointer;
	padding: 16px 30px;
    display:inline-block;
	vertical-align:top;
    color: #172164;
    margin: 40px auto;
    text-decoration: none;
    border: 1px solid #172164;
    border-radius: 10px;
    font-weight: bold;
	background-color: #FFF;
    font-size: 16px;
    transition: background-color .3s linear;
}

.pro_info .no_price button
{
	margin:15px 0 0;
}

.prods, .models
{
	display: grid;
    grid-template-columns: repeat(4, 1fr);
	gap: 30px;
}

.models_a
{
	position: relative;
}

.models_a .mod_rows 
{
	 position: absolute;
}

.mod_rows a
{
	display:block;
	text-decoration: none;
	margin:0 0 5px 60px;
	font-size:16px;
}

.marka
{
	display: flex;
	align-items: center;
	font-weight: bold;
	font-size:18px;
}

.marka img
{
	max-width: 50px;
	margin:0 8px 0 0;
}

.mod_mod span
{
	display:block;
}

.mod_other
{
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
	padding:0 0 30px;
}

.models
{
	margin:0 0 50px;
}

.mod_other a, .mod_other span
{
	    display: flex;
    align-items: center;
    padding: 22px;
    text-decoration: none;
    font-size:16px;
    border-radius: 8px;
    background: #F1F1F1 url(face/arrow2.svg) no-repeat calc(100% - 10px) 50%;
    transition: border-color .3s linear;
	cursor: pointer;
}

.mod_other img
{
	max-width:30px;
	max-height:30px;
	margin:0 10px 0 0;
}

.pro
{
background: #FFFFFF;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.12);
border-radius: 10px;
}


a.pro_img,
span.pro_img
{
	padding:0 15px 15px;
	height:200px;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
    align-items: center;
}

a.pro_name, .pro_name
{
	font-weight: bold;
	font-size:16px;
	text-decoration: none;
	display:block;
	padding:24px;
	height:40px;
	overflow: hidden;
	 word-break: break-word;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.pro_img img
{
	max-width:100%;
	max-height: 100%;
}

.pro_info
{
	padding:24px;
	border-top:1px solid #DADADA;
}

.pro_info a:first-child
{
	text-decoration: none;
	display:block;
	height:40px;
	overflow: hidden;
	text-overflow:ellipsis;
}

.pro_price
{
margin:20px 0 14px;	
}

.pro_price span
{
	font-size: 24px;
	font-weight: bold;
}

.pro_term
{
	color:#747474;
}


.shop_left
{
	display:inline-block;
	vertical-align:top;
width: 280px;
    background: #E8E8E8;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 10px 10px 0 25px;

}

.shop_right
{
	width:960px;
	display:inline-block;
	vertical-align:top;
	margin:0 0 0 40px;
}

.shop_right .prods
{
	gap: 20px;
}

.filter_b
{
	max-height: 164px;
	overflow-y: auto;
	margin:10px 0 30px;
}

.filter_n
{
	font-weight: bold;
}

.filters span
{
	display:block;
	cursor: pointer;
	background: url(face/filter.svg) no-repeat 0 / 20px;
	padding:3px 3px 3px 26px;
	margin:0 0 2px;
}

.filters span.s1
{
	background-image: url(face/filter_a.svg);
}

.filter_b span.s2
{
	cursor: not-allowed;
	opacity:.4;
}

.filter_b input
{
    color: #000;
    padding: 12px 10px;
   display:inline-block;
    width: 80px;
    font-size: 16px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    background-color: #FFF;
    border: solid 1px #dcdcdc;
	
}

.filter_s
{
	padding: 12px 14px; 
    background: linear-gradient(350deg, #3143C2 0%, #172164 100%);
    color: #FFF;
       border: 0;
    border-radius: 10px;
    display: inline-block;
    margin:0 0 0 5px;
    cursor: pointer;
    font-size: 14px;
}

.filter_result
{
margin:0 0 30px;
padding:0 0 20px;
border-bottom: 2px solid #FFF;
}

.filter_result a
{
	display:block;
	margin:5px 0 0;
}

.ma
{
	margin:0 0 20px 0;
}

/* MODIF .model_info — Figma 56:3151: 2 колонки по 620px (gap 40), 4 строки/колонка, строка 50px, white, border-bottom #e0e0e0. */
.model_info
{
	display:grid;
	grid-template-columns:minmax(0,322fr) minmax(0,298fr) 40px minmax(0,322fr) minmax(0,298fr); /* L|V | gutter40 | L|V — флюид, fit в .content 996/1280 без h-scroll (Figma 620/620@1280) */
	grid-template-rows:repeat(4, 50px);
	margin:0 0 40px;
	background:transparent;
	border-radius:0;
}
/* строка-ячейка: white, нижняя линия #e0e0e0, Roboto 14, ink */
.model_info div
{
	display:flex;
	align-items:center;
	box-sizing:border-box;
	background:#fff;
	border-bottom:1px solid #e0e0e0;
	font-family:'Roboto',sans-serif;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
	text-align:left;
	overflow:hidden;
}
/* label (нечётные): слева, padding-left 19px */
.model_info div:nth-child(odd){ padding:0 8px 0 19px; }
/* value (чётные): Roboto Medium */
.model_info div:nth-child(even){ font-weight:500; padding:0 19px 0 4px; }
/* левая колонка пар 1..4 (дети 1..8) */
.model_info div:nth-child(1),.model_info div:nth-child(3),.model_info div:nth-child(5),.model_info div:nth-child(7){ grid-column:1; }
.model_info div:nth-child(2),.model_info div:nth-child(4),.model_info div:nth-child(6),.model_info div:nth-child(8){ grid-column:2; }
.model_info div:nth-child(1),.model_info div:nth-child(2){ grid-row:1; }
.model_info div:nth-child(3),.model_info div:nth-child(4){ grid-row:2; }
.model_info div:nth-child(5),.model_info div:nth-child(6){ grid-row:3; }
.model_info div:nth-child(7),.model_info div:nth-child(8){ grid-row:4; }
/* правая колонка пар 5..8 (дети 9..16) → col 4|5 */
.model_info div:nth-child(9),.model_info div:nth-child(11),.model_info div:nth-child(13),.model_info div:nth-child(15){ grid-column:4; }
.model_info div:nth-child(10),.model_info div:nth-child(12),.model_info div:nth-child(14),.model_info div:nth-child(16){ grid-column:5; }
.model_info div:nth-child(9),.model_info div:nth-child(10){ grid-row:1; }
.model_info div:nth-child(11),.model_info div:nth-child(12){ grid-row:2; }
.model_info div:nth-child(13),.model_info div:nth-child(14){ grid-row:3; }
.model_info div:nth-child(15),.model_info div:nth-child(16){ grid-row:4; }


/* ПАГИНАТОР — Figma-скин IN-PLACE (model_op 56:3936): без кружков, номера Roboto16 серые, активная #1e1e1e underline, стрелки 50x50 круг border2 #7e7e7e chevron face/arrow.svg */
.pagination {
display:flex;
align-items:center;
justify-content: center;
gap:8px;
padding:45px 0 65px 0;
}

/* НОМЕРА: простой текст, без рамок/фона/кружков. Roboto 16/22 серый #7e7e7e */
.pagination a,
.pagination span,
.pagination strong
{
font-family:Roboto, sans-serif;
font-weight:400;
text-decoration:none;
font-size:16px;
line-height:22px;
color:#7e7e7e;
min-width:24px;
text-align:center;
border:0;
background:none;
border-radius:0;
padding:0 6px;
}

/* активная страница: тёмная + underline */
.pagination span {
color:#1e1e1e;
text-decoration:underline;
text-decoration-skip-ink:none;
}

.pagination a:hover { color:#1e1e1e; }

/* ellipsis */
.pagination strong { letter-spacing:2px; cursor:default; }

/* СТРЕЛКИ prev/next: 50x50 круг border2 #7e7e7e, chevron 16 (реюз face/arrow.svg) */
.pagination .p_right, .pagination .p_left
{
	box-sizing:border-box;
	width:50px;
	height:50px;
	min-width:50px;
	border:2px solid #7e7e7e;
	border-radius:100px;
	/* M3 (FIX-CIRCLE 2): chevron перекрашен в #7e7e7e (Figma 56:3936 серый под бордер).
	   arrow.svg = background-image (stroke #172164 navy) → mask + background-color = ТОЧНЫЙ #7e7e7e,
	   scoped .pagination (сам arrow.svg/др.иконки не тронуты). */
	background:#7e7e7e;
	-webkit-mask:url(face/arrow.svg) no-repeat 50% / 16px;
	mask:url(face/arrow.svg) no-repeat 50% / 16px;
	padding:0;
	color:transparent;
	font-size:0;
}
/* arrow.svg = chevron-down → поворот: next(право) -90deg, prev(лево) +90deg */
.pagination .p_right { transform:rotate(-90deg); margin:0 0 0 16px; }
.pagination .p_left  { transform:rotate(90deg);  margin:0 16px 0 0; }
/* disabled-стрелка (<b> когда нет prev/next): тот же круг, приглушён */
.pagination b.p_left, .pagination b.p_right { cursor:not-allowed; opacity:.4; }
.pagination .p_right:hover, .pagination .p_left:hover { border-color:#1e1e1e; }













/*************************/
/*************************/
/*************************/
/*************************/
/*************************/
/*************************/
/*************************/
/*************************/




.a_slider {
  position: relative;
 margin:0 0 50px;
}

.a_slider_content{
  overflow: hidden;

  background-color: #d5d5d5;
}

.a_slider_items {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  height:650px;
}

.a_slider_transition-none {
  transition: none;
}

.a_slider_item
{
  flex: 0 0 100%;
  max-width: 100%;
  user-select: none;
  will-change: transform;
  position: relative;
  background-size:cover !important;
  background-position:50% 50% !important;
}
.a_slider_item:before
{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(120deg, rgba(0,0,0,.2) 24%, rgba(0,0,0,0) 65%); /* PIXFIX-11: hero gradient per Figma 56:478 */
	z-index:1;
}

.a_slide_info
{
	position: absolute;
	left:50%;
	transform:translateX(-50%);
	width:1280px;
	max-width:100%;
	bottom:auto;
	top:111px;
	right:auto;
	padding:0;
	background:none;
	text-align:left;
	color:#fff;
	z-index:2;
}

.a_slide_name
{
	font-family:Roboto, sans-serif;
	font-weight:700;
	font-size:54px;
	line-height:66px;
	margin:0 0 90px;
	max-width:560px;
}

.a_slide_text
{
	font-family:Roboto, sans-serif;
	font-weight:500;
	font-size:30px;
	line-height:48px;
	margin:0;
	max-width:560px;
}

.a_slide_a{ display:none; }
/* slider nav arrows (Figma 56:482/485) — donor JS a_slider_btn-prev/next */
.a_slider_btn
{
	position:absolute;
	top:429px; /* PIXFIX-11: arrows mid-hero per Figma 56:482 (was bottom:60px, collided with garage) */
	width:50px;
	height:50px;
	border:0;
	border-radius:100px;
	cursor:pointer;
	z-index:3;
	background-color:rgba(0,0,0,.5);
	background-image:url(face/arrow.svg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:18px;
	filter:brightness(0) invert(1);
}
.a_slider_btn-prev{ left:calc(50% - 640px + 0px); background-color:rgba(0,0,0,.9); transform:rotate(90deg); }  /* PIXFIX-11 down chevron -> point left, x80 content-left */
.a_slider_btn-next{ left:calc(50% - 640px + 70px); transform:rotate(-90deg); }  /* PIXFIX-11 down chevron -> point right, x150 */

.a_slider_dots {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  z-index: 15;
  display: none;
  justify-content: center;
  margin: 0 15px;
  padding: 0;
  list-style: none;
}

.a_slider_dot {
  flex: 0 1 auto;
  box-sizing: content-box;
  margin: 0 6px;
  text-indent: -999px;
  background-clip: padding-box;
  cursor: pointer;
width: 16px;
border-radius:50%;
height: 16px;
background: rgba(255, 255, 255, 0.3);
}

.a_slider_dot_a {
  background-color: rgb(255 255 255 / 90%);
}


.an, .error {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@keyframes pulse{10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}
30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}
40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}
100%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}
}
.an {-webkit-animation-name:pulse;animation-name:pulse}
 
.user_login
{
	background-color: #FFF;
	border-radius:8px;
	padding:25px;
	width:310px;
	display:inline-block;
	vertical-align:top;
	text-align: center;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
		margin:0 30px 0 0;
}

.user_registration
{
	display:inline-block;
	vertical-align:top;
	width:450px;
	padding:25px;
	background-color: #e9e9e9;
	text-align: center;
	border-radius:8px;

}

a.login_lost
{
	position: absolute;
	right:10px;
	top: 12px;
	background-color: #FFF;
}

.user_info
{
	background-color: #FFF;
	padding:15px 20px;
	border-radius:8px;
	border:1px solid #ddd;
	margin:0 0 16px;
}

.tab_user
{
	padding:25px;
	background-color: #FFF;
	border-radius:8px;
	margin: -30px auto 0;
}

.table_zakaz
{
	display:none;
}

.table_zakaz TH {
background: #F1F1F1;
padding: 5px 0
}

.table_zakaz TABLE {
border: 1px solid #ddd;
width: 100%;
border-collapse: collapse
}

.table_zakaz TABLE TD {
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd
}


@media screen and (max-width:1280px) 
{

* {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.content
{
width:996px;
}

.window
{
	top: -4%;
}

/* .cart
{
	width:215px;
}
 */
.phone
{
	width:180px;
}

.tovar_info
{
	width:672px;
	margin:0 0 0 30px;
}

.tovar_img
{
	width:290px;
}

.tovar_row
{
	width:205px;
}

.tovar_p
{
	width:215px;
	margin:0px;
	padding: 0px 15px 14px;
}

.tovar_50
{
	gap: 30px;
}

.prod_prices 
{
	width:400px;
}

.prod_info
{
	width:592px;
}

.prod_txt
{
	width:338px;
}	

.contact_rows
{
	gap: 30px;
}

.shop_right
{
		width:676px;
}

.shop_right .prods
{
	grid-template-columns: repeat(3, 1fr);
}

/* body skin @1280 (folded from appended) */
.a_slide_info{ width:100%; padding:0 15px; box-sizing:border-box; }
.a_slider_btn-prev{ left:50px; }
.a_slider_btn-next{ left:120px; }
.pop_cats{ grid-template-columns:repeat(4, 1fr); }
.pop_cats a{ width:100%; }
.marki{ grid-template-columns:repeat(7, 1fr); }
.marki a{ width:100%; }

}

@media screen and (max-width:1000px)
{

	
.content, .content_small
{
width:738px;
}

.locked
{
margin:0px;
}

.content .content_small, .content .content
{
padding:0px;
}

.window
{
top:0;
}

nav ul, .header ul, nav span:after
{
	display:none;
}

.garage_alls
{
	display:block;
}

.garage_alls div
{
	padding:6px 20px;
	box-sizing: border-box;
	border:0;
	border-bottom: 1px solid #FFF;
}

.step0, .marki, .mod_other
 {
    grid-template-columns: repeat(4, 1fr);
}

.prods, .models
{
	 grid-template-columns: repeat(3, 1fr);
}
.pop_cats
{
	grid-template-columns:repeat(2, 1fr);
}


.a_slider_items
{
	height:480px;
}

/* PIXFIX-11: arrows mid-hero on mobile (hero=480px) + content-left padding */
.a_slider_btn{ top:215px; }
.a_slider_btn-prev{ left:15px; }
.a_slider_btn-next{ left:85px; }

.a_slide_name
{
	font-size:42px;
	line-height:52px;
	margin:0 0 40px;
}

.a_slide_text
{
	font-size:24px;
	line-height:34px;
}

.a_slide_info
{
	padding:35px 15px;
}

.footer_row
{
	display:inline-block;
	width:48%;
	margin:0 0 24px;
}
.footer_bottom
{
	flex-direction:column;
	align-items:flex-start;
}

.logos, .copy
{
	display:block;
	width:100%;
	margin:0 auto 30px;
	text-align: center;
	background-position: 50%;
}

.garage_year, .garage_motor strong
{
	display:block;
	width:100%;
	box-sizing: border-box;
}

.step3 span, .step3 b, .step4 span
{
	display:inline-block;
	vertical-align:top;
	width:20%;
	box-sizing: border-box;
}

.step5 span
{
	width:50%;
	box-sizing: border-box;
}

.garage_modif_name
{
	text-align: left;
	padding: 16px 12px 12px;
}

.header+.content
{
	position: relative;
}

.search
{
	position: absolute;
	top:88px;
	right:0px;
	width: calc(100% - 100px);
	margin:0px;
}

.search input {
    padding: 10px 50px 10px 25px;
}

.search button
{
	top: 8px;
}


.menu
{
cursor: pointer;
background: url(face/menu.svg) no-repeat 50%;
width:30px;
height:50px;
background-size: 30px 30px;  
}

.menu_one
{
	border-bottom:1px solid #e9e9e9;
}

.menu_one span
{
	background: #FFF url(face/arrow.svg) no-repeat 99% 50%;
	color:#172164;
	font-size:18px;
	padding:18px 15px 14px 0px;
}

nav li:hover span
{
	background-color: #FFF;
}

.open_menu .menu
{
	background-size: 34px 34px;  
}

.menu_all a
{
	text-decoration: none;
	border-bottom:1px solid #d0d0d0;
	padding:2px 0 4px;
	box-sizing: border-box;
}

.menu_top
{
	padding:10px 15px 30px;
	display:block;
	max-width:738px;
	width:100%;
	margin:0px auto;
	box-sizing: border-box;
}

.menu_top a
{
	        color: #172164;
        font-size: 18px;
		text-decoration: none;
			display:block;
	border-bottom:1px solid #d0d0d0;
	padding: 10px 0 10px 25px;
	background: #FFF url(face/arrow2.svg) no-repeat 0 50%;
}

.menu_top li:last-child a
{
	border:0;
}

.open_menu nav ul
{
	display: block ;
	width: 100%;
  -webkit-overflow-scrolling: touch;
}

.open_menu .menu_all
{
	position: static;
	width:100%;
	display:none;
	visibility: visible;
	box-shadow: none;
	border:0;
}


.menu_row
{
	width:100%;
	margin:0px;
	padding:0 30px;
	box-sizing: border-box;
}

.cart_form
{
	margin:0px auto 40px;
	display:block;
	text-align: center;
	
}

.cart_prod
{
	display:block;
	text-align: center;
	margin:60px 0 0;
	padding:20px 0 20px;
	width:100%;
	border-top: 2px solid #e9e9e9;
}

.cart_itogo
{
	padding:0px;
	text-align: left;
}

.tovar_img
{
	max-height: 450px;
	text-align: center;
	width:100%;
	display:block;
}

.tovar_info
{
	width:100%;
	margin:0px;
}

.tovar_row, .tovar_p
{
	width:234px;
}

.tovar_50, .vin_rows
{
	display:block;
}

.vin_form
{
	text-align: center;
	padding:20px 10px;
}

.prod_info
{
	display: flex;
	width:100%;
}

.prod_txt
{
	flex:1
}

.prod_prices
{
	display:block;
	width:100%;
}

.no_price button
{
	margin:0 auto 20px;
}

.contact_rows, .page_rows
{
	grid-template-columns: repeat(2, 1fr);
    
}

.shop_left
{
	display:none;
}

.shop_right
{
	display:block;
	width:100%;
	margin:0px;
}

.shop_mobile
{
padding:16px 30px;
background-color: #050C3A;
color: #FFF;
text-decoration: none;
border:0;
border-radius: 10px;
display:inline-block;
cursor: pointer;
font-weight: bold;
font-size:16px;
max-width: 290px;
float:right;
text-align: center;
margin:-10px 0 20px;
}

.shop_mobile2
{
	display:block;
	margin:0px auto;
}

.user_login, .user_registration
{
	width:300px;
}


}

 
 @media only screen and (max-width: 761px)
  {

.content, .content_small
{
box-sizing: border-box;
width:100%;
padding:0 15px;
}

.garage_my_name
{
	display:none;
}

#window
{
	border-radius:0px;
/* 	height:100%; */
	padding:30px 25px;
	width:100%;
	box-sizing: border-box;
}

.close
{
	top:0;
	right:0;
}

.name, h1, .a_slide_name, .help .name
{
	font-size:36px;
	line-height:40px;
}

.name_2, h2
{
	font-size:30px;
	line-height:34px;
}


.help
{
	padding: 35px 15px 10px;
}

.a_slide_text, .help
{
	font-size:18px;
}

    .step0, .marki , .pop_cats, .prods, .models, .mod_other
	{
        grid-template-columns: repeat(2, 1fr);
    }
.pop_cats a{ height:380px; }

.mod_other
{
	gap:20px;
}

.whys
{
	padding:0 0 40px;
	border:0;
	margin: 0 0 30px;
}

.why
{
	width:100%;
	display:block;
	padding:0 0 20px;
	margin:0 0 30px;
	border:0  !important;
	border-bottom:3px solid #FFF  !important;
}

.tabs 
{
	display:block;
	width:290px;
}
.tabs li
{
	display:block;
	padding:12px 0;
}

.tabs li:nth-child(2)
{
	border-bottom:1px solid #172164 ;
	border-top:1px solid #172164 ;
}

.search
{
	right:15px;
}

.ships
{
	float:none;
	width:100%;
	margin:0 0 20px;
	text-align: center;
}

.ships_info
{
	display:none;
}

.ship_name
{
	margin:0px;
}



.tovar_row, .tovar_p
{
	width:290px;
	display:block;
	margin:0px auto;
}

.tovar_row
{
	margin:30px auto 0;
}

.garage_car
{
	margin:0 10px 0 0;
	background: #FFF  url(face/arrow.svg) no-repeat 98% 50% / 20px;
}

.user_login, .user_registration
{
	width:100%;
	box-sizing: border-box;
	margin:0px -15px 30px;
}

  }
  
  
 @media only screen and (max-width: 610px)
 {

/* white header row wraps so nothing overflows viewport (logo/cart row + full-width search + phone/vin) */
header .content
{
	flex-wrap:wrap;
	row-gap:10px;
}
header .content .logo{ order:1; }
header .content .cart{ order:2; margin-left:auto; }
header .content .search{ order:3; flex:0 0 100%; width:100%; margin:0; }
header .content .phone{ order:4; }
header .content .vin_btn{ order:5; margin-left:auto; }

.win_pro_pr0
{
	padding:0 10px 0 0;
}

.win_pro_pr0 table tr:first-child {
display:none;
}
	
.win_pro_pr0 table td:before {
content: attr(data-label);
display:block;
margin:0 10px 0 0;
/* flex:1; */
text-align:left;
}
	
.win_pro_pr0 table tr {
display:block;
margin:0 0 10px 0;
border: 1px #d9d9d9 solid;
border-bottom:0;
}	
	


.win_pro_pr0 table td {
display:flex;
align-items:center;
justify-content: space-between;
padding:5px;
/* font-size:13px; */
text-align:right;
}	

.window .name, .window h1
{
	margin:20px 0;
	font-size:30px;
	line-height:32px;
}

.name, h1
{
	margin:20px 0 30px;
}

	.cart_img
	{
		display:none;
	}
	
	.help
	{
		margin:40px 0;
	}
	
	.pagination
	{
		padding:30px 0;
	}
	
	.model_info div
	{
		/* width управляется грид-треками .model_info (MODIF reskin); правило-ноп */
	}
	
	.garage_my
	{
		display:block;

	}
	
	.garage_new
	{
		display:block;
		margin:0 0 5px;
	}
	
	.garage_new span
	{

		padding: 8px 25px 8px 30px;

	}
	
	.garage_car
	{
		margin:0 15px;
	}
	
	.garage_boxs, .page_rows
	{
		display:block;
	}
	
	.page_rows a
	{
		display:block;
		max-width: 390px;
		width:100%;
		margin:0 auto 20px;
	}

	 
.t_find  tr:first-child {
display:none;
}
	
.t_find  td:before {
content: attr(data-label);
display:block;
margin:0 10px 0 0;
/* flex:1;  */
font-weight: bold;
text-align:left;
}
	
.t_find  tr {
display:block;
margin:0 0 10px 0;
border: 1px #d9d9d9 solid;
border-bottom:0;
}	

.t_find  td {
display:flex;
align-items:center;
justify-content: center;
padding:5px;
/* font-size:13px; */
text-align:right;
}	

.t_find  td:nth-child(4)
{
	display:block;
	text-align: center;
}	

.t_find a
{
	text-decoration: none;
}
	
.t_find a.a_find
{
text-decoration: underline;
}	
	
 }
 
 @media only screen and (max-width: 540px)
 {
	.add_cart_img, .add_cart_more
	{
	display:none;
	}		
	
	.add_cart_price, .add_cart_go
	{
		display:block;
		margin:0px auto;
		width:100%;
	}
	
	.cart_fast
	{
		display:none;
	}

	/* body skin @540 (folded from appended) */
	.pop_cats{ grid-template-columns:1fr; }
	.pop_cats a{ height:420px; }
	.marki{ grid-template-columns:repeat(2, 1fr); }
	.footer_row{ width:100%; }

 }
 @media only screen and (max-width: 470px)
 {
	 
	 .cart
	 {
		 width: 50px;
		text-indent: -111111px;
	 }
	 
	  .name, h1, .a_slide_name, .help .name {
        font-size: 32px;
        line-height: 35px;
		text-align: center;
    }
	 
	 
.name_2, h2
{
	font-size:26px;
	line-height:30px;
	padding:30px 0;
	text-align: center;
}

	 .name_4, h4, h3, .name_3
	 {
		 text-align: center;
	 }
	 
	 .name_s
	 {
		 font-size:17px;
		 line-height:20px;
	 }
	 
	 .tab_info
	 {
		 margin:0 -15px;
	 }
	 
	 .prods, .models
	 {
	       display:block;
	 }

	 .prods
	 {
		 text-align: center;
	 }
	 
	 .pro
	 {
		 margin:0 0 30px;
	 }
	 
	 a.pro_img
	 {
		 height:150px;
	 }
	 
	 .pro_info a:first-child
	 {
		 height:auto;
	 }
	 
	 .pro_price
	 {
		 margin:12px 0;
	 }
	 
	 .pop_cats a
	 {
		padding:0;
		margin:0;
	 }

	 .footer_row
	 {
		 width:100%;
	 }
	 
	 .phone a:first-child
	 {
		 background: #1e1e1e url(face/phone.svg) no-repeat 50% / 22px;
		 border-radius:100px;
		 display:block;
		 width:50px;
		 height:50px;
		 box-sizing:border-box;
		 padding:0;
		 margin:0;
		 text-indent:-1111px;
	 }

	 .phone
	 {
		 width:50px;
		 flex:0 0 auto;
	 }
	 
	  .phone a, .cart_price_one
	  {
		  display:none;
	  }
	 /* model_op: номера пагинатора видимы на моб (parity), стрелки 50x50 — компактим gap */
	 .pagination { gap:4px; }
	 .pagination a, .pagination span, .pagination strong { padding:0 3px; font-size:15px; }
	 .pagination .p_right { margin:0 0 0 8px; }
	 .pagination .p_left { margin:0 8px 0 0; }
	 
	 
	 
.tah0  tr:first-child {
display:none;
}
	
.tah0  td:before {
content: attr(data-label);
display:block;
margin:0 10px 0 0;
flex:1; 
text-align:left;
}
	
.tah0  tr {
display:block;
margin:0 0 10px 0;
border: 1px #d9d9d9 solid;
border-bottom:0;
}	

.tah0  td span
{

	font-size:18px;
	font-weight: bold;
}

.tah0 .buy
{
	background-color: #050C3A;
	color:#FFF;
}

.tah0  td {
display:flex;
align-items:center;
justify-content: space-between;
padding:5px;
/* font-size:13px; */
text-align:right;
}	

.tah0  td:nth-child(4)
{
	display:block;
	text-align: center;
}	
	 
    .mod_other2
	{
        display:block;
		text-align: center;
    }	 
	 
	.mod_other2 span 
	{
		padding:12px 22px;
		margin:0 0 5px;
	}
	 
	 /* .sort span media — reskined under CATEGORY LISTING */
	 
	 .prod_info
	 {
		 display:block;
		 text-align: center;
		 padding:10px;
	 }
	 .prod_txt
	 {
		 width:100%;
		 padding:0px;
	 }
	 
	 .tah0  td:nth-child(3)
{
	display:block;
	text-align: center;
}	

.contact_rows
{
	display:block; 
}


	 
 }
 
  @media only screen and (max-width: 350px)
  {
	  
	.find_vin input
	{
		font-size:18px;
		font-weight: 400;
		width:220px;
	}
	
	.step5 span
	{
		width:100%;
	}
	
	.logos
	{
		background-size: contain;
	}
	
  }

/* =========================================================================
   LIDER BODY + FOOTER SKIN (Figma 56:439 telo + 56:858 footer) — natyazhka 2026-06-14c
   accent #f40000 (grad #ff7171->#f40000), ink #1e1e1e, light #f4f4f4,
   gray #7e7e7e, border #e0e0e0, footer #000, Roboto. r100 / r30 / r18.
   ========================================================================= */

/* DRY accent button "Перейти" (pop-cats x4, banners B4 x2) — Figma 56:494/578 */
.btn_accent
{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	box-sizing:border-box;
	width:124px;
	height:50px;
	border-radius:100px;
	border:2px solid #f40000;
	background:linear-gradient(180deg,#ff7171 0%,#f40000 100%);
	box-shadow:0 8px 16px rgba(244,0,0,.24);
	font-family:Roboto, sans-serif;
	font-weight:600;
	font-size:14px;
	line-height:20px;
	color:#fff;
	text-decoration:none;
	white-space:nowrap;
	cursor:pointer;
}
.btn_accent:hover{ color:#fff; opacity:.95; }
.ic_arr
{
	width:16px;
	height:16px;
	flex:0 0 16px;
	/* CAROUSEL-T1 2026-06-16: Figma 56:497 = ПРЯМАЯ стрелка вправо (icon_arrow path).
	   arrow_r.svg = точный Figma-экспорт. C8-конвенция: mask + background-color #fff
	   (белая стрелка на красной кнопке). НЕ вращать (ассет уже указывает вправо). */
	-webkit-mask:url(face/arrow_r.svg) no-repeat center / contain;
	        mask:url(face/arrow_r.svg) no-repeat center / contain;
	background-color:#fff;
}

/* ---- section headings (Roboto Medium 36/48) ---- */
.content > .name.c, .bg .name.c
{
	font-family:Roboto, sans-serif;
	font-weight:500;
	font-size:36px;
	line-height:48px;
	color:#1e1e1e;
	text-align:center;
	margin:0 0 32px;
}

/* B1 HERO (a_slider) — Figma skin merged into donor source rules above (single owner). */

/* B2 HELP — owned by donor source rule .help above (single owner). */

/* =========================== B3 POP-CATS ================================== */
/* grid + card + img owned by donor source rule .pop_cats / .pop_cats a / .pop_cats img above.
   Here: only NEW element details (mask / name / button). */
.pop_cat:after
{
	content:"";
	position:absolute; left:0; right:0; bottom:0;
	height:202px;
	background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
.pop_cat_name
{
	position:absolute;
	left:30px; right:30px;
	bottom:99px;
	z-index:2;
	font-family:Roboto, sans-serif;
	font-weight:600;
	font-size:20px;
	line-height:30px;
	color:#fff;
	text-decoration:underline;   /* PIXFIX FIX-3: Figma 56:499 имя карточки подчёркнуто */
}
.pop_cat_btn
{
	position:absolute;
	left:30px;
	bottom:29px;
	z-index:2;
}
.pop_cat:hover{ box-shadow:none; }
/* "Other categories" — not in Figma -> hidden (layout=law, donor markup kept) */
a.send_2{ display:none; }

/* B5 BRANDS (marki) — owned by donor source rule .marki / .marki a above (single owner). */

/* =========================== B6 SEO text ================================= */
.text
{
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:24px;
	color:#1e1e1e;
}

/* =========================== FOOTER (Figma 56:858) ======================= */
footer
{
	background-color:#000;
	border-top:0;
	margin:60px 0 0;
	padding:60px 0 40px;
	color:#7e7e7e;
}
footer .name_3
{
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:18px;
	line-height:24px;
	color:#fff;
	margin:0 0 18px;
	text-align:left;
}
/* .footer_row width/box-sizing skin merged into donor source rule above (single owner). */
footer .footer_row,
footer .footer_row a,
footer .footer_row li a,
footer .time
{
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:14px;
	line-height:24px;
	color:#7e7e7e;
}
footer li a:hover, footer a[href^="tel:"]:hover{ color:#fff; text-decoration:underline; }
footer a[href^="tel:"]{ color:#7e7e7e; margin:0 0 6px; }
.footer_row.footer_pay .logos
{
	/* PIXFIX-5 FIX-4: макет=4 лого (visa/mc/gpay/applepay, Figma 56:862/869/874/880). Донор-strip
	   logos.svg (378×20) содержит 5-й (LIQPAY, x≈302-378). Скрываем LIQPAY КРОПОМ контейнера
	   (donor-элемент .logos НЕ удалён из .kiev): 4 лого занимают x0-300 из 378 → масштабируем strip
	   до 126% ширины бокса (378/300), overflow:hidden обрезает правые ~21% (LIQPAY) при любой ширине. */
	display:block;
	width:100%;
	max-width:276px;
	height:20px;
	background-position:left center;
	background-size:137% 20px;
	background-repeat:no-repeat;
	overflow:hidden;
}
.footer_line
{
	margin:36px 0 24px;
	border-bottom:1px solid #1e1e1e;
}
.footer_bottom
{
	/* PIXFIX-5 FIX-3: копірайт + соц-ряд СПРАВА (Figma 56:859 x1217 копірайт сверху, 56:897 соц снизу).
	   Стек справа: копірайт над соц-рядом, оба right-aligned под колонкой «Оплата». */
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:14px;
}
.footer_bottom .copy
{
	width:auto;
	text-align:right;
	font-size:14px;
	line-height:20px;
	color:#7e7e7e;
}
.footer_bottom .social
{
	display:flex;
	gap:12px;
}
.footer_bottom .social a
{
	width:30px;
	height:30px;
	margin:0;
	border-radius:50%;
	background-color:#1e1e1e;
	background-size:50% 50%;
	opacity:1;
}
.footer_bottom .social a:hover{ opacity:.8; }
.footer_logo{ display:none; }

/* responsive body/footer: folded into donor media blocks above (1280/1000/761/540).
   One width = one @media (no parallel skin media). */
/* END LIDER BODY + FOOTER SKIN */

/* ===== LIDER MARKA (каталог по марке) SKIN — Figma 56:1960. Реюз на каталожных стр. ===== */
/* модель-интро заголовок (.name без .c) — Roboto Medium 36/48 #1e1e1e слева */
.bg .content > .name:not(.c)
{
	font-weight:500;
	font-size:36px;
	line-height:48px;
	color:#1e1e1e;
	text-align:left;
	margin:20px 0 30px;
}

/* ГРИД-ТАБЛИЦА имён моделей (Figma 56:2071/brand 56:2072): сплошная таблица белых ячеек,
   гридлайны #e0e0e0 через фон-подложку (gap:1px), внешняя рамка #e0e0e0, БЕЗ радиуса,
   текст Roboto Regular 14 слева, capitalize. 6 колонок на десктопе. */
.mod_chips
{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:1px;
	background:#e0e0e0;          /* подложка = гридлайны между ячейками */
	border:1px solid #e0e0e0;    /* внешняя рамка таблицы */
	margin:0 0 40px;
}
.mod_chips a
{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	height:50px;
	padding:0 16px;
	box-sizing:border-box;
	background:#fff;
	border-radius:0;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
	text-align:left;
	text-transform:capitalize;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-decoration:none;
	transition:background-color .2s linear;
}
.mod_chips a:hover{ background:#f4f4f4; }
/* M2 (FIX-CIRCLE 2): ТЕКУЩАЯ модель в чип-таблице model_op (Figma 56:3746/3747): bg #f4f4f4 + underline.
   Класс .chip_a ставит PHP (car_linia.kiev model_op-ветка) только текущей модели; marka не задета. */
.mod_chips a.chip_a{ background:#f4f4f4; text-decoration:underline; text-decoration-skip-ink:none; }

/* ФОТО-КАРТОЧКИ моделей: 4 колонки gap27, карточка 300x220 white border r16 */
.mod_cards
{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:27px;
	margin:0 0 50px;
}
.mod_card
{
	display:flex;
	flex-direction:column;
	align-items:center;
	height:220px;
	box-sizing:border-box;
	padding:17px 10px;
	background:#fff;
	border:1px solid #e0e0e0;
	border-radius:16px;
	text-decoration:none;
	transition:border-color .2s linear;
}
.mod_card img
{
	width:190px;
	height:130px;
	object-fit:contain;
	margin:0 0 21px;
}
.mod_card span
{
	font-weight:600;
	font-size:18px;
	line-height:24px;
	color:#1e1e1e;
	text-align:center;
}
/* hover: только цвет рамки (без скачка ширины) */
.mod_card:hover{ border-color:#1e1e1e; }
/* текущая/выбранная карточка модели (донор-механика на стр. модели): border 2px ink + underline */
.mod_card.mod_card_a{ border:2px solid #1e1e1e; }
.mod_card.mod_card_a span{ text-decoration:underline; }

/* ── responsive ── */
@media screen and (max-width:1000px)
{
		.mod_chips{ grid-template-columns:repeat(4,minmax(0,1fr)); }  /* gap:1px сохранён */
	.mod_cards{ grid-template-columns:repeat(3,1fr); gap:20px; }
}
@media only screen and (max-width:761px)
{
	.mod_chips{ grid-template-columns:repeat(3,minmax(0,1fr)); }
	.mod_cards{ grid-template-columns:repeat(2,1fr); }
	.bg .content > .name:not(.c){ font-size:28px; line-height:36px; }
}
@media only screen and (max-width:470px)
{
	.mod_chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.mod_card img{ width:100%; height:120px; }
}
/* END LIDER MARKA SKIN */

/* ====================== LIDER MODEL SKIN (Figma 56:2812) ====================== */
/* Тело страницы модели: B2 чип-грид модификаций / B3 аккордеон разделов /
   B4 грид category-кнопок / B6 SEO. B1 фильтр-band и B5 help — реюз (garage_selector / $help). */

/* --- B2: ЧИП-ГРИД модификаций (реюз вида mod_chips: бордер-грид-таблица) --- */
/* донор: .models > .mod_mod(.name_5 + span...). Каждая .mod_mod = ячейка таблицы. */
/* ЗАСКОУПЛЕНО под .md_grid (марк branch2 car_linia): донор .models/car_catalog .models не задеты */
.models.md_grid
{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	gap:1px;
	background:#e0e0e0;          /* подложка = гридлайны */
	border:1px solid #e0e0e0;    /* внешняя рамка таблицы */
	margin:0 0 40px;
}
.models.md_grid .mod_mod
{
	display:block;
	min-height:50px;
	box-sizing:border-box;
	padding:12px 16px;
	background:#fff;
	overflow:hidden;
}
.models.md_grid .mod_mod .name_5
{
	margin:0;
	padding:0;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
	text-transform:capitalize;
	text-align:left;
}
.models.md_grid .mod_mod span
{
	display:inline;
	margin:0 6px 0 0;
	font-weight:400;
	font-size:12px;
	line-height:18px;
	color:#7e7e7e;
	white-space:nowrap;
}

/* --- P3: ТАБЛИЦА МОДИФИКАЦИЙ model_op (Figma 56:3944): 4 БЕЗБОРДЕРНЫЕ колонки.
   Каждая .mod_mod = жирный заголовок-кузов (.name_5) + ВЕРТИКАЛЬНЫЙ список моторов (span block).
   SCOPED под .mop_mods (только model_op-ветка) — донор .models / .md_grid (model/marka) НЕ задеты.
   Убирает клиппинг: моторы — block-список (wrap/stack), НЕ инлайн-span с обрезкой. --- */
.models.mop_mods
{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:30px;
	background:none;
	border:0;
	margin:0 0 50px;
}
.models.mop_mods .mod_mod
{
	display:block;
	min-height:0;
	padding:0;
	background:none;
	border:0;
	overflow:visible;
	min-width:0;
}
.models.mop_mods .mod_mod .name_5
{
	display:block;
	margin:0 0 12px;
	padding:0;
	font-weight:600;
	font-size:16px;
	line-height:22px;
	color:#1e1e1e;
	text-transform:none;
	text-align:left;
	word-break:break-word;
}
.models.mop_mods .mod_mod span
{
	display:block;
	margin:0 0 6px;
	padding:0;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#7e7e7e;
	white-space:normal;
	word-break:break-word;
}

/* --- B3: АККОРДЕОН разделов каталога --- */
/* .catalogs.model_acc → JS оборачивает в .acc_sec(.acc_head[.name_4] + .acc_body). */
.catalogs.model_acc{ margin:0 0 40px; }
.acc_sec{ position:relative; }
.acc_head
{
	display:flex;
	align-items:center;
	gap:20px;
	padding:24px 0;
	border-top:1px solid #e0e0e0;   /* separator 1280×1 #e0e0e0 */
	cursor:pointer;
	user-select:none;
}
.acc_sec:last-child .acc_head{ border-bottom:1px solid #e0e0e0; }
/* icon_open (закрыт) — стрелка вниз; реюз face/arrow.svg (точный Figma-экспорт = backend-долг) */
.acc_head:before
{
	content:"";
	flex:0 0 16px;
	width:16px; height:16px;
	background:url(face/arrow.svg) no-repeat center / 16px 16px;
	transition:transform .2s linear;
}
.acc_open > .acc_head:before{ transform:rotate(180deg); }  /* icon_close (открыт) */
.acc_head .name_4
{
	margin:0;
	padding:0;
	font-weight:500;
	font-size:24px;
	line-height:34px;
	color:#1e1e1e;
	text-align:left;
}
.acc_body{ display:none; padding:0 0 12px; }
.acc_open > .acc_body{ display:block; }

/* подгруппа-подпункт раскрытой секции: SemiBold20/30 + icon_arrow */
.acc_body > span
{
	display:flex;
	align-items:center;
	gap:20px;
	margin:0 0 16px;
	padding:0 0 0 16px;
	font-weight:600;
	font-size:20px;
	line-height:30px;
	color:#1e1e1e;
	text-align:left;
	font-style:normal;
}
.acc_body > span:before
{
	content:"";
	flex:0 0 16px;
	width:16px; height:16px;
	background:url(face/arrow.svg) no-repeat center / 16px 16px;
	transform:rotate(-90deg);
}

/* ряд prod-плиток 200×200 r30 (донор .pop_cats внутри .catalogs) */
.catalogs.model_acc .pop_cats
{
	display:grid;
	grid-template-columns:repeat(6, 1fr);
	gap:16px;
	margin:0 0 24px;
	justify-content:start;
}
.catalogs.model_acc .pop_cats a
{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	align-items:flex-start;
	width:auto;
	aspect-ratio:1 / 1;
	height:auto;
	min-height:0;
	padding:0 30px 30px;
	box-sizing:border-box;
	border-radius:30px;
	overflow:hidden;
	background:#7e7e7e;
	box-shadow:none;
	text-decoration:none;
	color:#fff;
	font-weight:600;
	font-size:16px;
	line-height:24px;
	isolation:isolate;   /* собственный stacking-context: img(-2)/маска(-1) над gray-bg, под текстом(0) */
}
/* img и маска — отрицательный z (под in-flow текстовым узлом имени); порядок: bg<img<маска<текст */
.catalogs.model_acc .pop_cats img
{
	position:absolute; inset:0;
	z-index:-2;
	width:100%; height:100%;
	margin:0; padding:0;
	object-fit:cover;
	display:block;
	pointer-events:none;
}
/* маска снизу: grad black→transparent h134 (над img, под текстом) */
.catalogs.model_acc .pop_cats a:before
{
	content:"";
	position:absolute; left:0; right:0; bottom:0;
	z-index:-1;
	height:134px;
	background:linear-gradient(to top, #000 0%, rgba(0,0,0,0) 100%);
	pointer-events:none;
}

/* --- B4: грид category-кнопок «інші моделі» (.mod_other.md_btns reskin) --- */
/* ЗАСКОУПЛЕНО под .md_btns (марк branch2 car_linia): донор .mod_other (branch1) не задет */
.bg .name_h
{
	font-weight:500;
	font-size:36px;
	line-height:48px;
	color:#1e1e1e;
	text-align:left;
	margin:0 0 24px;
}
.mod_other.md_btns
{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:25px;
	padding:0 0 30px;
}
.mod_other.md_btns a
{
	display:flex;
	align-items:center;
	justify-content:center;
	height:60px;
	box-sizing:border-box;
	padding:0 12px;
	background:#fff;
	border:1px solid #e0e0e0;
	border-radius:10px;
	font-weight:600;
	font-size:16px;
	line-height:24px;
	color:#1e1e1e;
	text-align:center;
	text-decoration:none;
	transition:border-color .2s linear;
}
.mod_other.md_btns a:hover{ border-color:#1e1e1e; }

/* --- B12: «інші запчастини» 4-кол текст-ссылки part-типів (Figma 56:3953-3956) --- */
.part_links
{
	display:grid;
	grid-template-columns:repeat(4, minmax(0,1fr));
	gap:16px 27px;
	margin:0 0 50px;
}
.part_links a
{
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:16px;
	line-height:28px;
	color:#1e1e1e;
	text-decoration:none;
}
.part_links a:hover{ text-decoration:underline; }
@media only screen and (max-width: 1000px){ .part_links{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media only screen and (max-width: 768px){ .part_links{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media only screen and (max-width: 470px){ .part_links{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 16px; } }

/* --- B6: SEO-блок — H1 + 2 фото 620×400 r16 gap40 + текст --- */
.content > .seo_h
{
	font-weight:500;
	font-size:36px;
	line-height:48px;
	color:#1e1e1e;
	text-align:left;
	margin:40px 0 24px;
}
.seo_imgs
{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:40px;
	margin:0 0 40px;
}
.seo_imgs .seo_img
{
	display:block;
	width:100%;
	aspect-ratio:620 / 400;
	border-radius:16px;
	background:#f4f4f4;   /* плейсхолдер: фото = контент-долг (нет в БД) */
	overflow:hidden;
}

/* --- responsive MODEL --- */
@media screen and (max-width:1000px)
{
	.models.md_grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
	.catalogs.model_acc .pop_cats{ grid-template-columns:repeat(4, 1fr); }
	.mod_other.md_btns{ grid-template-columns:repeat(4, 1fr); }
	/* MODIF model_info: на узких — одна колонка label|value, 8 строк подряд (no h-scroll) */
	.model_info{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(8, 50px); }
	.model_info div:nth-child(n){ grid-column:auto; grid-row:auto; }
	.model_info div:nth-child(odd){ grid-column:1; }
	.model_info div:nth-child(even){ grid-column:2; }
}
@media only screen and (max-width:761px)
{
	.models.md_grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
	.models.mop_mods{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }   /* P3: model_op модиф 4→2 */
	.catalogs.model_acc .pop_cats{ grid-template-columns:repeat(3, 1fr); }
	.mod_other.md_btns{ grid-template-columns:repeat(3, 1fr); gap:16px; }
	.acc_head .name_4{ font-size:20px; line-height:28px; }
	.acc_body > span{ font-size:18px; line-height:26px; }
	.seo_imgs{ grid-template-columns:1fr; gap:20px; }
	.content > .seo_h, .bg .name_h{ font-size:28px; line-height:36px; }
}
@media only screen and (max-width:470px)
{
	.models.md_grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
	.models.mop_mods{ grid-template-columns:1fr; gap:24px; }   /* P3: model_op модиф 2→1 */
	.catalogs.model_acc .pop_cats{ grid-template-columns:repeat(2, 1fr); }
	.mod_other.md_btns{ grid-template-columns:repeat(2, 1fr); }
}
/* END LIDER MODEL SKIN */


/* ============================================================
   CATEGORY LISTING (car_list.kiev, ветка tree) — Figma 56:2261 / карточка 61:768
   SCOPED под .prods_cat (контейнер листинга) + .sort reskin.
   НЕ трогает общие .prods/.models (model/marka), .pro в shop, общую .buy/.abuy.
   Плитка товара = ЭТАЛОН (реюз на shop_categoria/spisok_zap/art_brand/search).
   ============================================================ */

/* --- СОРТ / ВИД (Figma 56:2343 заголовок + 56:2806/2809 икон-табы 44×44) --- */
.sort
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	margin:0 0 30px;
	flex-wrap:wrap;
}
.sort .sort_head
{
	font-family:Roboto, sans-serif;
	font-weight:500;
	font-size:36px;
	line-height:48px;
	color:#1e1e1e;
	margin:0;
	flex:1 1 auto;
	min-width:0;
}
.sort .sort_ctrl
{
	display:flex;
	align-items:center;
	gap:16px;
	flex:0 0 auto;
}
.sort .sort_by
{
	display:flex;
	align-items:center;
	gap:8px;
	font-family:Roboto, sans-serif;
	font-size:14px;
	color:#616161;
}
/* живые донор-кнопки сортировки (car_sorting) — причёсаны под чип, БЕЗ донор-фона/рамки белой */
.sort .sort_by span
{
	cursor:pointer;
	margin:0;
	padding:8px 14px;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
	background:#f4f4f4;
	border:1px solid #e0e0e0;
	border-radius:100px;
}
.sort .sort_by span.sort_a
{
	background:#1e1e1e;
	color:#fff;
	border-color:#1e1e1e;
}
/* вид-табы список/грид (косметика; донор не переключает раскладку — флаг backend) */
/* P5 (Figma 56:3977/3974): порядок СПИСОК-лево / ГРИД-право; активный (грид) = WHITE bg + RED иконка 2×2; неактив = серый */
.sort .view_tabs
{
	display:flex;
	flex-direction:row;
	align-items:center;
	gap:8px;
}
.sort .view_tabs .vt_list{ order:0; }   /* список слева */
.sort .view_tabs .vt_grid{ order:1; }   /* грид справа */
.sort .view_tabs .vt
{
	position:relative;
	width:44px;
	height:44px;
	border:1px solid #e0e0e0;
	border-radius:12px;
	background:#fff;
	cursor:pointer;
	box-sizing:border-box;
}
/* неактивная иконка = серый #7e7e7e */
.sort .view_tabs .vt_grid:before
{
	content:"";
	position:absolute;
	left:50%; top:50%;
	width:20px; height:20px;
	transform:translate(-50%,-50%);
	background:
		linear-gradient(#7e7e7e,#7e7e7e) 0 0 / 8px 8px no-repeat,
		linear-gradient(#7e7e7e,#7e7e7e) 12px 0 / 8px 8px no-repeat,
		linear-gradient(#7e7e7e,#7e7e7e) 0 12px / 8px 8px no-repeat,
		linear-gradient(#7e7e7e,#7e7e7e) 12px 12px / 8px 8px no-repeat;
}
.sort .view_tabs .vt_list:before
{
	content:"";
	position:absolute;
	left:50%; top:50%;
	width:20px; height:14px;
	transform:translate(-50%,-50%);
	background:
		linear-gradient(#7e7e7e,#7e7e7e) 0 0 / 20px 3px no-repeat,
		linear-gradient(#7e7e7e,#7e7e7e) 0 6px / 20px 3px no-repeat,
		linear-gradient(#7e7e7e,#7e7e7e) 0 12px / 20px 3px no-repeat;
}
/* активный таб = БЕЛАЯ кнопка + КРАСНАЯ иконка (#f40000) */
.sort .view_tabs .vt_a
{
	background-color:#fff;
	border-color:#e0e0e0;
}
.sort .view_tabs .vt_a.vt_grid:before
{
	background:
		linear-gradient(#f40000,#f40000) 0 0 / 8px 8px no-repeat,
		linear-gradient(#f40000,#f40000) 12px 0 / 8px 8px no-repeat,
		linear-gradient(#f40000,#f40000) 0 12px / 8px 8px no-repeat,
		linear-gradient(#f40000,#f40000) 12px 12px / 8px 8px no-repeat;
}
.sort .view_tabs .vt_a.vt_list:before
{
	background:
		linear-gradient(#f40000,#f40000) 0 0 / 20px 3px no-repeat,
		linear-gradient(#f40000,#f40000) 0 6px / 20px 3px no-repeat,
		linear-gradient(#f40000,#f40000) 0 12px / 20px 3px no-repeat;
}

/* --- ГРИД ЛИСТИНГА (scoped, НЕ задевает .models) --- */
.prods_cat
{
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:27px;
	margin:0 0 50px;
}

/* --- КАРТОЧКА ТОВАРА .pro (scoped эталон, Figma 61:768) --- */
.prods_cat .pro
{
	position:relative;
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid #e0e0e0;
	border-radius:16px;
	box-shadow:none;
	overflow:hidden;
	box-sizing:border-box;
}

/* img-area 300×300 ФИКС-КВАДРАТ (P4: aspect 1:1, портретные фото НЕ растягивают зону → имена ряда выровнены).
   display:block + position:relative: aspect-ratio даёт definite height, img absolute-center НЕ может раздуть бокс. */
.prods_cat .pro .pro_img
{
	display:block;
	position:relative;
	aspect-ratio:1 / 1;
	width:100%;
	height:auto;
	padding:0;
	background:#fff;
	overflow:hidden;
	box-sizing:border-box;
}
.prods_cat .pro .pro_img img
{
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%,-50%);
	max-width:83.3%;   /* 250/300 анти-апскейл */
	max-height:83.3%;
	width:auto;
	height:auto;
	object-fit:contain;
}
.prods_cat .pro .pro_img i
{
	position:absolute;
	left:50%; top:50%;
	transform:translate(-50%,-50%);
	width:83.3%;
	height:83.3%;
	background:#f4f4f4;
	filter:grayscale(100%);
	opacity:.3;
}

/* info-область низа карточки */
.prods_cat .pro .pro_info
{
	display:flex;
	flex-direction:column;
	flex:1 1 auto;
	padding:22px 25px 25px;
	border-top:0;
	box-sizing:border-box;
}

/* бренд + номер «BOSCH 0 451 103 079» — SemiBold 16 #1e1e1e (верх info, y322) */
.prods_cat .pro .pro_info .pro_name
{
	display:block;
	font-family:Roboto, sans-serif;
	font-weight:600;
	font-size:16px;
	line-height:22px;
	color:#1e1e1e;
	text-decoration:none;
	padding:0;
	height:auto;
	margin:0;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* название товара «Оливний фільтр» — Regular 14 #1e1e1e (под брендом, y350) */
.prods_cat .pro .pro_info > a:not(.pro_name)
{
	display:block;
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
	text-decoration:none;
	margin:6px 0 0;
	height:auto;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

/* мета-строка низа: бейдж цены (лево) + круг-кнопка (право) */
.prods_cat .pro .pro_meta
{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:auto 0 0;
	padding:18px 0 0;
}

/* бейдж цены — пилюля 132×44, зелёная точка + «124 грн» */
.prods_cat .pro .pro_price
{
	display:inline-flex;
	align-items:center;
	gap:8px;
	min-width:132px;
	height:44px;
	margin:0;
	padding:0 16px 0 18px;
	background:#f4f4f4;
	border-radius:12px;
	box-sizing:border-box;
}
.prods_cat .pro .pro_price:before
{
	content:"";
	flex:0 0 auto;
	width:8px;
	height:8px;
	border-radius:50%;
	background:#34c759;   /* наличие; точный hex Figma 61:780 = backend-todo */
}
.prods_cat .pro .pro_price span
{
	font-family:Roboto, sans-serif;
	font-weight:600;
	font-size:24px;
	line-height:30px;
	color:#1e1e1e;
}

/* круг-кнопка КУПИТЬ 70×70 — синий градиент + иконка корзины 40 белая.
   спец 0-3-0 (.prods_cat .pro .buy) перебивает общий .pro .buy (0-2-0). */
/* .abuy = донор «Купить» (model_op, link→товар): тот же circle-skin что .buy, текст скрыт, механика-ссылка 1:1 */
.prods_cat .pro .buy,
.prods_cat .pro .abuy
{
	flex:0 0 auto;
	width:70px;
	height:70px;
	margin:0;
	padding:0;
	border:2px solid #3c83ff;
	border-radius:100px;
	background:linear-gradient(180deg, #05bfee 0%, #0555e2 100%);
	box-shadow:0 8px 16px rgba(60,131,255,0.44);
	font-size:0;
	color:transparent;
	cursor:pointer;
	box-sizing:border-box;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	transition:filter .2s linear;
}
.prods_cat .pro .buy:before,
.prods_cat .pro .abuy:before
{
	content:"";
	width:40px;
	height:40px;
	margin:0;
	background:url(face/cartw.svg) no-repeat 50% / 28px;
}
.prods_cat .pro .buy:hover,
.prods_cat .pro .abuy:hover
{
	filter:brightness(1.06);
	background:linear-gradient(180deg, #05bfee 0%, #0555e2 100%);
}

/* доставка «Доставка: 2 дні» — Regular 12, label #616161 + значение #1e1e1e (низ, y478) */
.prods_cat .pro .pro_term
{
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:12px;
	line-height:18px;
	color:#616161;
	margin:10px 0 0;
	/* M4 (FIX-CIRCLE 2): резерв под 2 строки срока (18×2) — 1-строчный и 2-строчный
	   срок дают одинаковый Y для .pro_meta выше (margin-top:auto) → лесенка цена/кнопка в ряду @350 устранена. */
	min-height:36px;
}
.prods_cat .pro .pro_term strong
{
	font-weight:400;
	color:#1e1e1e;
}

/* вариант БЕЗ цены — таб «Уточнити наявність» (донор .no_price > button cars_un) причёсан */
.prods_cat .pro .pro_info .no_price
{
	margin:auto 0 0;
	text-align:left;
}
.prods_cat .pro .pro_info .no_price button
{
	margin:18px 0 0;
	width:100%;
	height:50px;
	padding:0 16px;
	font-family:Roboto, sans-serif;
	font-weight:500;
	font-size:14px;
	line-height:20px;
	color:#1e1e1e;
	background:#f4f4f4;
	border:1px solid #e0e0e0;
	border-radius:12px;
	cursor:pointer;
	transition:border-color .2s linear;
}
.prods_cat .pro .pro_info .no_price button:hover
{
	border-color:#1e1e1e;
	background:#f4f4f4;
}

/* --- RESPONSIVE листинга (scoped, в духе донор-bp) --- */
@media screen and (max-width:1000px)
{
	.prods_cat{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
	.sort .sort_head{ font-size:28px; line-height:38px; }
}
@media screen and (max-width:761px)
{
	.prods_cat{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media screen and (max-width:470px)
{
	.prods_cat{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
	.sort .sort_head{ font-size:22px; line-height:30px; }
	.sort .view_tabs{ display:none; }   /* вид-тоглы косметика, на узком прячем */
	.prods_cat .pro .pro_info{ padding:16px 14px 14px; }
	.prods_cat .pro .pro_price{ min-width:0; height:40px; padding:0 12px; }
	.prods_cat .pro .pro_price span{ font-size:20px; }
	.prods_cat .pro .buy, .prods_cat .pro .abuy{ width:56px; height:56px; }
	.prods_cat .pro .buy:before, .prods_cat .pro .abuy:before{ width:32px; height:32px; background-size:22px; }
}
/* /CATEGORY LISTING */


/* ════════════════════════════════════════════════════════════════════
   HOME-REORDER 2026-06-14 — порядок тела по Figma 56:439
   hero → гараж-карточка(компакт, на hero) → help → pop_cats → B4(2) → brands → seo
   Всё scoped (.home_garage / .promo_banners) — не клоббер принятых правил.
   ════════════════════════════════════════════════════════════════════ */

/* ── 2. ГАРАЖ-КАРТОЧКА компакт, перекрывает низ hero (Figma 56:596 y835, на hero 278-928) ── */
.home_garage
{
	position:relative;
	z-index:5;
	/* PIXFIX-5 #7: накладка hero↔garage = 93px (измерено: -93 давал лишь 43 факт. overlap → -143). */
	margin-top:-143px;
	/* PIXFIX-5 #8: garage→help = 60px (было 50). */
	margin-bottom:60px;
}
/* скрыть донор-заголовок «Начните с выбора авто» + подзаголовок ВНУТРИ гаража (scoped, не задевает pop_cats/brands .name c) */
.home_garage .name.c,
.home_garage .name_s
{
	display:none;
}
/* компакт-карточка: убрать верхний отступ табов (был margin:30px 0) — карточка компактнее */
.home_garage .tabs{ margin:0 0 16px; }

/* ── 5. B4 — ДВА ПРОМО-БАННЕРА (Figma 56:574 + 56:583, 2×620×500 gap40) ── */
.promo_banners
{
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:40px;
	/* PIXFIX-5 #6: promo→brands («Ми продаємо») = 60px (был зазор 0). */
	margin:50px 0 60px;
}
.promo_banner
{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	min-height:500px;
	padding:50px;
	border-radius:30px;
	box-sizing:border-box;
	overflow:hidden;
	/* PIXFIX-5 FIX-2: тёмный плейсхолдер-фон (#1e1e1e) — макет=тёмный оверлей + БЕЛЫЙ текст.
	   Реальное фон-ФОТО = контент-долг наполнителя; здесь тёмная подложка под белый текст. */
	background:#1e1e1e;
	text-decoration:none;
	isolation:isolate;
}
.promo_banner:before          /* тёмный градиент-оверлей: читабельность белого текста на всех bp */
{
	content:"";
	position:absolute; inset:0;
	background:linear-gradient(180deg, rgba(30,30,30,.35) 0%, rgba(30,30,30,.85) 100%);
	z-index:0;
}
.promo_banner > *{ position:relative; z-index:1; }
/* B4: фон-фото статьи — cover, ПОЗАДИ тёмного оверлея :before(z:0); ниже text(z:1).
   z-index:-1 в собственном stacking-context (.promo_banner isolation:isolate):
   фон #1e1e1e (фолбэк) < фото < оверлей < текст. */
.promo_banner > .promo_banner_bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.promo_banner_name
{
	font-family:Roboto, sans-serif;
	font-weight:500;
	font-size:36px;
	line-height:48px;
	color:#fff;
	text-decoration:underline;
	margin:0 0 16px;
	max-width:420px;
}
.promo_banner_text
{
	font-family:Roboto, sans-serif;
	font-weight:400;
	font-size:20px;
	line-height:30px;
	color:#fff;
	margin:0 0 30px;
	max-width:420px;
}
.promo_banner_btn{ align-self:flex-start; }

/* ── RESPONSIVE HOME-REORDER ── */
@media screen and (max-width:1000px)
{
	.promo_banners{ gap:24px; }
	.promo_banner{ min-height:380px; padding:32px; }
	.promo_banner_name{ font-size:28px; line-height:38px; }
}
@media screen and (max-width:761px)
{
	.home_garage{ margin-top:-60px; }
	.promo_banners{ grid-template-columns:1fr; gap:20px; }
	.promo_banner{ min-height:300px; padding:28px; }
	.promo_banner_name{ font-size:24px; line-height:32px; }
	.promo_banner_text{ font-size:18px; line-height:26px; }
}
@media screen and (max-width:470px)
{
	.home_garage{ margin-top:-40px; }
	.promo_banner{ min-height:240px; padding:22px; }
	.promo_banner_name{ font-size:22px; line-height:30px; margin-bottom:12px; }
	.promo_banner_text{ font-size:16px; line-height:24px; margin-bottom:20px; }
}
/* /HOME-REORDER */

/* ========================= PIXFIX (HOME Слой-2) ========================= */
/* FIX-2: POP_CATS — тёмный full-bleed баннер (Figma 56:488/56:489) + белый заголовок 56:490.
   Scoped под .pop_cats_band → НЕ задевает brands .bg .name.c (остаётся тёмным на белом). */
.pop_cats_band
{
	/* CONTENT-DOWN 2026-06-16: тёмная размытая фото-подложка (Figma 56:488/56:489) full-bleed.
	   #1e1e1e = фолбэк-база (background-color); gradient-слой поверх фото для читабельности
	   белого заголовка/карточек. Цвет в shorthand можно ТОЛЬКО в последнем слое → даём отдельно. */
	background-color:#1e1e1e;
	background-image:linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)), url(/img/pop_cats_bg.jpg);
	background-repeat:no-repeat, no-repeat;
	background-position:center, center;
	background-size:cover, cover;
	width:100%;
	padding:60px 0;
	margin:0 0 60px;
}
.pop_cats_band .content > .name.c
{
	color:#ffffff;   /* Figma 56:490: заголовок белый на тёмном баннере */
	margin-bottom:50px;  /* PIXFIX gap заголовок-секции→карточки 32→50 (Figma) */
}
/* баннер сам даёт нижний отступ → снимаем дублирующий margin грида внутри банда */
.pop_cats_band .pop_cats{ margin-bottom:40px; }

/* FIX-4: SEO-блок на HOME — заголовок ПО ЦЕНТРУ (Figma 56:854 center).
   .content > .seo_h глобально left (marka/category) → центрируем ТОЛЬКО в .seo_band (home). */
.seo_band.content > .seo_h
{
	text-align:center;
}
/* /PIXFIX */

/* ===== PIXFIX-2 2026-06-15 — BLOCK A: тёмное меню каталога (Figma 56:532), СТАТИКА в #menu (virtus подключит к админ-выводу позже; vda) ===== */
/* R11: макет=ОДИН ряд тёмного pill-меню. Донор рендерит #menu(пуст)+$file(живая лента). Блок A наполняет #menu статикой 8 табов по макету. */
/* Видимость живой $file-ленты vs статичный #menu — РЕШЕНИЕ vda (см. comm-log #pixfix2-menu-A). НЕ скрываю принятый menu_catalog вслепую. */
#menu{ width:100%; }
#menu .cat_menu{
	display:flex;
	width:100%;
	background:#f4f4f4;
	border-radius:100px;
	padding:4px;
	box-sizing:border-box;
}
#menu .cat_tab{
	flex:0 1 auto;
	min-width:0;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	height:56px;
	padding:18px 16px;
	box-sizing:border-box;
	border-radius:100px;
	color:#1e1e1e;
	font-weight:600;
	font-size:16px;
	line-height:20px;
	white-space:nowrap;
	text-decoration:none;
	cursor:pointer;
	/* PIXFIX-10 ПУНКТ-1 2026-06-15: убран drop-shadow с .cat_tab (табы 2-8 ПЛОСКИЕ, Figma 56:532).
	   Таб прозрачный → drop-shadow падал на текст+иконку (грязная тень под названиями). Тень ТОЛЬКО
	   у активной пилюли .cat_tab_a (box-shadow ниже, цел). */
	filter:none;
}
#menu .cat_tab span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; filter:none; }
#menu .cat_tab_a{
	flex:0 0 auto;
	background:linear-gradient(180deg,#494949 0%,#1e1e1e 100%);
	border:2px solid #1e1e1e;
	color:#ffffff;
	font-size:14px;
	box-shadow:0 8px 16px rgba(0,0,0,.24);
	filter:none;
	text-transform:uppercase;
}
/* PIXFIX-8 ПУНКТ-1 2026-06-15: текст «КАТАЛОГ» активного таба — БЕЛЫЙ (Figma 56:535).
   Корень дефекта: донор-правило `nav span{color:#1e1e1e}` (0-0-2) красило <span>КАТАЛОГ</span>
   напрямую, перебивая наследование color:#fff с .cat_tab_a → тёмный текст на тёмном градиенте (1.33:1).
   Фикс: правило выше специфичностью (#menu .cat_tab_a span = 0-2-1 > nav span 0-0-2). */
#menu .cat_tab_a span{ color:#ffffff; }
/* category icon 20x20 — donor-conv class hook (C8), mask = monochrome glyph; color current ink/white */
#menu .cat_ic{
	flex:0 0 20px; width:20px; height:20px; display:inline-block;
	background-color:transparent;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:20px 20px; mask-size:20px 20px;
}
/* icon_menu present on server (face/menu.svg) — only wired icon gets color */
#menu .ic_menu{ -webkit-mask-image:url(face/menu.svg); mask-image:url(face/menu.svg); background-color:#1e1e1e; }
#menu .cat_tab_a .ic_menu{ background-color:#ffffff; }
/* PIXFIX-3 2026-06-15: 7 categorial icons exported from Figma (56:541..572), wired as mono mask glyphs (#1e1e1e) */
#menu .ic_droplets   { -webkit-mask-image:url(face/droplets.svg);    mask-image:url(face/droplets.svg);    background-color:#1e1e1e; }
#menu .ic_chemistry  { -webkit-mask-image:url(face/chemistry.svg);   mask-image:url(face/chemistry.svg);   background-color:#1e1e1e; }
#menu .ic_accessories{ -webkit-mask-image:url(face/accessories.svg); mask-image:url(face/accessories.svg); background-color:#1e1e1e; }
#menu .ic_wheel      { -webkit-mask-image:url(face/wheel.svg);       mask-image:url(face/wheel.svg);       background-color:#1e1e1e; }
#menu .ic_lightning  { -webkit-mask-image:url(face/lightning.svg);   mask-image:url(face/lightning.svg);   background-color:#1e1e1e; }
#menu .ic_electronics{ -webkit-mask-image:url(face/electronics.svg); mask-image:url(face/electronics.svg); background-color:#1e1e1e; }
#menu .ic_tools      { -webkit-mask-image:url(face/tools.svg);       mask-image:url(face/tools.svg);       background-color:#1e1e1e; }

/* categorial icons NOT on server yet (Figma 56:541/546/551/556/562/567/572) — slot kept (20px gap), mask wired on asset export */

/* mobile: menu row scrolls horizontally inside band, no page h-scroll */
@media (max-width:1000px){
	#menu .cat_menu{ overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
	#menu .cat_menu::-webkit-scrollbar{ display:none; }
	#menu .cat_tab{ flex:0 0 auto; }
}
/* ===== END BLOCK A ===== */

/* ===== PIXFIX-2 2026-06-15 — BLOCK B: иконки режим-табов гаража (Figma 56:596) ===== */
/* 3 режим-таба .tabs li: icon_car/icon_scan/icon_number 20x20 слева. mask-glyph, цвет = ink / white(active). */
/* PIXFIX-5 #11: плоское объявление .tabs li{display:flex...} удалено — влито в base .tabs li (см. выше). */
.tabs li:before{
	content:""; flex:0 0 20px; width:20px; height:20px; display:inline-block;
	background-color:#1e1e1e;
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:20px 20px; mask-size:20px 20px;
}
.tabs li.tabs_a:before{ background-color:#ffffff; }
/* icon_car present on server (face/garage.svg, monochrome silhouette) */
.tabs li:nth-child(1):before{ -webkit-mask-image:url(face/garage.svg); mask-image:url(face/garage.svg); }
/* icon_scan (56:630) NOT on server — slot kept, no glyph (no surrogate); wired on export */
/* icon_number (56:635) — donor nomer.svg is MULTICOLOR plate (not mono) — slot kept, wired on mono export */
/* PIXFIX-3 2026-06-15: icon_scan (56:630) + icon_number (56:635) exported from Figma — wired as mono mask glyphs */
.tabs li:nth-child(2):before{ -webkit-mask-image:url(face/scan.svg);   mask-image:url(face/scan.svg); }
.tabs li:nth-child(3):before{ -webkit-mask-image:url(face/number.svg); mask-image:url(face/number.svg); }
/* ===== END BLOCK B ===== */

/* ===== PIXFIX-2 2026-06-15 — BLOCK C: мелкие иконки футера (Figma) ===== */
/* icon_time ×3 (Время работи, 56:886/888/890) + address — донор рисовал navy #172164 как background; Figma=моно #7e7e7e. */
/* Заменяем background-glyph на ::before mask-glyph (текст не трогаем), цвет #7e7e7e (виден на тёмном футере). */
footer .time{ background:none; position:relative; padding-left:30px; }
footer .time:before{
	content:""; position:absolute; left:0; top:1px; width:20px; height:20px;
	background-color:#7e7e7e;
	-webkit-mask:url(face/time.svg) no-repeat center / 20px 20px; mask:url(face/time.svg) no-repeat center / 20px 20px;
}
footer address{ background:none; position:relative; padding-left:30px; }
footer address:before{
	content:""; position:absolute; left:0; top:2px; width:20px; height:20px;
	background-color:#7e7e7e;
	-webkit-mask:url(face/address.svg) no-repeat center / 20px 20px; mask:url(face/address.svg) no-repeat center / 20px 20px;
}
/* icon_phone ×2 (Связь, 56:893/895) — донор телефоны БЕЗ иконки; добавляем ::before icon_phone (face/phone.svg mono #7e7e7e) */
footer .footer_row a[href^="tel:"]{ position:relative; padding-left:30px; }
footer .footer_row a[href^="tel:"]:before{
	content:""; position:absolute; left:0; top:3px; width:18px; height:18px;
	background-color:#7e7e7e;
	-webkit-mask:url(face/phone.svg) no-repeat center / 18px 18px; mask:url(face/phone.svg) no-repeat center / 18px 18px;
}
/* ===== END BLOCK C ===== */


/* ===== PIXFIX-3 2026-06-15 — CATALOG DROPDOWN (vda: 1 ряд + выпадающее мегаменю, Figma 56:5304) ===== */
/* ===== PIXFIX-3 DROPDOWN START ===== */
/* Основная навигация = тёмный .cat_menu (#menu). Живая лента $file (<ul>.menu_one) превращается в */
/* выпадающую панель КАТАЛОГ: скрыта по умолчанию, появляется белой панелью под баром при hover КАТАЛОГ. */
/* Донор-механика мегаменю (.menu_a hover на .menu_one -> .menu_all) сохранена 1:1 внутри панели. */

/* 1) nav .content больше НЕ серая пилюля (это был фон ленты $file) — теперь просто relative-обёртка под дропдаун */
nav .content{ background:none; border-radius:0; display:block; position:relative; }

/* 2) #menu = единственный видимый ряд (тёмный 8-таб бар уже стилизован BLOCK A) */
nav #menu{ position:relative; z-index:30; }

/* 3) $file <ul> = выпадающая панель: скрыта по умолчанию */
nav .content > ul{
	position:absolute;
	top:100%; left:0; right:0;
	z-index:25;
	display:flex;
	flex-direction:column;     /* категории вертикальным списком СЛЕВА */
	width:auto;
	max-width:none;
	margin:6px 0 0;
	padding:16px 0;
	background:#ffffff;
	border:1px solid #e0e0e0;
	border-radius:16px;
	box-shadow:0 12px 32px rgba(0,0,0,.16);
	/* PIXFIX-5 #9: resting overflow:hidden (закрытая панель не расширяет документ). Открытая → visible
	   через :has-правила ниже. Слито в ОДНО объявление (убран дубль nav .content > ul). */
	overflow:hidden;
	opacity:0;
	visibility:hidden;
	transform:translateY(6px);
	transition:opacity .18s ease, transform .18s ease, visibility .18s;
	pointer-events:none;
}
/* открытие: hover КАТАЛОГ (.cat_tab_a) ИЛИ удержание курсора на самой панели */
nav .content:has(.cat_tab_a:hover) > ul,
nav .content:has(> ul:hover) > ul{
	opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
/* :has fallback (старые браузеры) — оставляем доступным через клавиатуру/focus */
nav .content > ul:focus-within{ opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }

/* 4) категория-строка слева: li.menu_one в столбец, БЕЗ серого pill-скина шапки */
nav .content > ul .menu_one{
	flex:0 0 auto;
	width:300px;            /* левая колонка списка категорий */
	position:relative;
}
nav .content > ul .menu_one span{
	display:block;
	height:auto;
	padding:11px 24px;
	font-size:15px;
	line-height:20px;
	font-weight:400;
	color:#1e1e1e;
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
	filter:none;
	text-transform:none;
	text-align:left;
	white-space:normal;
	cursor:pointer;
}
nav .content > ul .menu_one span:after{ display:none; }
/* активная/наведённая категория слева подсвечивается */
nav .content > ul .menu_one:hover > span,
nav .content > ul .menu_one.menu_a > span{
	background:#f4f4f4;
	color:#1e1e1e;
}
nav .content > ul .menu_one:first-child span{
	background:none; color:#1e1e1e; border:0; box-shadow:none; padding:11px 24px; text-transform:none;
}

/* 5) .menu_all = правая зона колонок подкатегорий (донор .menu_a hover показывает её, top:100% left:0 от li) */
/* Перепозиционируем: появляется СПРАВА от списка категорий, во всю остальную ширину панели */
nav .content > ul .menu_all{
	background:#ffffff;
	border:0;
	border-left:1px solid #f0f0f0;
	border-radius:0;
	box-shadow:none;
	padding:8px 24px 16px;
	min-height:100%;
}
nav .content > ul .menu_a .menu_all{
	top:0;
	left:300px;                /* справа от 300px списка категорий */
	right:0;
	width:auto;
	min-width:calc(100% - 300px);
	display:flex;
	flex-wrap:wrap;
	align-content:flex-start;
}
/* колонка подкатегорий */
nav .content > ul .menu_row{
	width:auto;
	min-width:230px;
	max-width:280px;
	margin:0 16px 8px 0;
}
nav .content > ul .menu_all a{
	color:#1e1e1e;
	font-size:13px;
	line-height:20px;
	margin:0 0 4px;
}
nav .content > ul .menu_all a:hover{ color:#f40000; }
nav .content > ul strong{
	color:#1e1e1e;
	font-size:14px;
	line-height:20px;
	padding:8px 0 6px;
}
/* первый li раскрыт по умолчанию — ТОЛЬКО когда панель открыта (КАТАЛОГ hover / панель hover), чтобы правая зона не пустовала */
nav .content:has(.cat_tab_a:hover) > ul .menu_one:first-child:not(.menu_a) .menu_all,
nav .content:has(> ul:hover) > ul .menu_one:first-child:not(.menu_a) .menu_all{
	top:0; left:300px; right:0; visibility:visible;
}
/* при наведении на ЛЮБУЮ другую категорию — первый перестаёт быть раскрытым */
nav .content:has(.menu_one:nth-child(n+2):hover) > ul .menu_one:first-child:not(.menu_a) .menu_all{ visibility:hidden; }

/* открытая панель → overflow:visible (закрытая overflow:hidden задан в base nav .content > ul выше, дубль убран) */
nav .content:has(.cat_tab_a:hover) > ul,
nav .content:has(> ul:hover) > ul,
nav .content > ul:focus-within{ overflow:visible; }

/* МОБАЙЛ ≤1000: дропдаун = вертикальный список БЕЗ absolute-правой зоны (донор-мобильный паттерн position:static) */
@media (max-width:1000px){
	nav .content > ul .menu_one{ width:100%; }
	nav .content > ul .menu_all{ border-left:0; }
	nav .content > ul .menu_a .menu_all{
		position:static; left:auto; right:auto; top:auto;
		width:100%; min-width:0; max-width:none;
	}
	nav .content:has(.cat_tab_a:hover) > ul .menu_one:first-child:not(.menu_a) .menu_all,
	nav .content:has(> ul:hover) > ul .menu_one:first-child:not(.menu_a) .menu_all{
		position:static; left:auto; right:auto; top:auto; width:100%;
	}
	nav .content > ul .menu_row{ width:100%; min-width:0; max-width:none; margin:0; }
	/* панель открыта — скроллим вертикально внутри, не наружу */
	nav .content:has(.cat_tab_a:hover) > ul,
	nav .content:has(> ul:hover) > ul{ overflow-y:auto; overflow-x:hidden; max-height:70vh; }
}
/* ===== PIXFIX-3 DROPDOWN END ===== */


/* ===== PIXFIX-6 2026-06-15 — МОБИЛЬНАЯ НАВИГАЦИЯ (бургер-тоггл) ===== */
/* Макета моб НЕТ → эталон = ДОНОР (parts.allzap.pro): #menu-бургер + html.open_menu + клон #menu_top→#menu_after. */
/* Донор-механика menu() (script.js, глобальная функция) РЕЮЗ 1:1. Наш #menu занят статичным .cat_menu (8 табов), */
/* поэтому добавлен ОТДЕЛЬНЫЙ видимый бургер .navtog в шапке (onclick="menu()"), а .cat_menu на моб скрыт — */
/* каталог на моб = ЖИВАЯ лента $file (nav .content>ul), как у донора (он показывает nav ul на open). */
/* DRAWER: весь <nav> = fixed full-screen оверлей (z высокий). Внутри ОДНИМ скроллом: */
/*   живая лента $file (nav .content>ul) + клон #menu_after (.menu_top, 6 ссылок шапки, оба ДЕТИ <nav>). */
/* Оверлей изолирует тач: без fixed тап «проваливался» сквозь in-flow панель на hero VIN-CTA → уход на /vin/. */
/* Аккордеон подкатегорий = донор slideToggle 1:1 (в fixed-drawer работает как у донора). */
/* ВСЁ scoped @media ≤1000 → десктоп ≥1024 НЕ затронут. */
/* ===== PIXFIX-6 START ===== */

/* бургер-кнопка: по умолчанию (десктоп) СКРЫТА */
.navtog{ display:none; }
.nav_phones{ display:none; }   /* видны только в открытом бургере (≤1000) */

@media screen and (max-width:1000px){

	/* 1) БУРГЕР ВВЕРХУ ШАПКИ, СПРАВА, очевидный, кликабельный (open И close) */
	.header+.content{ position:relative; }
	.navtog{
		display:block;
		position:absolute;
		top:18px; right:78px;          /* слева от круга-корзины */
		width:44px; height:44px;
		z-index:60;                    /* выше drawer, чтобы X всегда кликался */
		cursor:pointer; border-radius:12px; background:#f4f4f4;
	}
	.navtog:before{
		content:""; position:absolute; inset:0;
		background-color:#1e1e1e;
		-webkit-mask:url(face/menu.svg) no-repeat center / 24px 24px;
		        mask:url(face/menu.svg) no-repeat center / 24px 24px;
	}
	/* открыто → X (close.svg). Бургер живёт в шапке (z-context z-index:2) → drawer(z50) перекрывал бы X. */
	/* Поднимаем ВСЮ шапку над drawer при open → бургер-X кликабелен, шапка видна сверху меню. */
	.open_menu header{ position:relative; z-index:55; }
	.open_menu .header > .content:last-child{ z-index:56; }
	.open_menu .navtog{ background:#1e1e1e; position:absolute; top:18px; right:78px; }
	.open_menu .navtog:before{
		background-color:#ffffff;
		-webkit-mask:url(face/close.svg) no-repeat center / 22px 22px;
		        mask:url(face/close.svg) no-repeat center / 22px 22px;
	}

	/* 2) СТАТИЧНЫЙ 8-таб .cat_menu — на моб СКРЫТ (десктоп-декор; каталог=живая лента в бургере) */
	#menu .cat_menu{ display:none; }
	#menu{ width:0; height:0; padding:0; margin:0; overflow:hidden; }

	/* 3) DRAWER = весь <nav>, fixed full-screen, ЗАКРЫТ по умолчанию */
	nav{ position:static; }
	nav .content{ display:block; position:static; }
	.open_menu nav{
		position:fixed; left:0; right:0; top:0; bottom:0;
		z-index:50; background:#fff;
		overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
		padding:270px 0 40px;          /* верх под шапку (≤610 высокая шапка) */
	}

	/* лента $file: в drawer — обычный блок (НЕ absolute/hover-дропдаун). Закрыта вне open_menu. */
	nav .content > ul{
		position:static; display:none;
		visibility:visible; opacity:1; transform:none; pointer-events:auto;
		width:100%; max-width:none; min-width:0;
		background:#fff; box-shadow:none; border:0; border-radius:0;
		max-height:none; overflow:visible; margin:0; padding:0;
	}
	nav .content:has(.cat_tab_a:hover) > ul,
	nav .content:has(> ul:hover) > ul,
	nav .content > ul:focus-within{ display:none; }
	.open_menu nav .content > ul{ display:block; }
	.open_menu nav .content:has(.cat_tab_a:hover) > ul,
	.open_menu nav .content:has(> ul:hover) > ul{ display:block; }

	/* категория-строка: вся ширина, кликабельна (донор .menu_one click→.menu_all slideToggle) */
	.open_menu nav .content > ul .menu_one{ width:100%; display:block; border-bottom:1px solid #e9e9e9; }
	.open_menu nav .content > ul .menu_one span{
		display:block; width:100%; padding:16px 20px; box-sizing:border-box;
		font-size:16px; line-height:22px; color:#1e1e1e;
		background:#fff; border-radius:0; cursor:pointer;
	}
	.open_menu nav .content > ul .menu_one span:after{
		content:""; display:inline-block; float:right;
		width:14px; height:14px; margin-top:4px;
		background-color:#7e7e7e;
		-webkit-mask:url(face/arrow.svg) no-repeat center / 14px 14px;
		        mask:url(face/arrow.svg) no-repeat center / 14px 14px;
	}
	/* подменю .menu_all — донор slideToggle. Нейтрализуем десктоп absolute/flex-геометрию полностью. */
	.open_menu nav .content > ul .menu_one .menu_all,
	.open_menu nav .content > ul .menu_one.menu_a .menu_all{
		position:static; left:auto !important; right:auto; top:auto !important;
		width:100%; min-width:0; max-width:none;
		visibility:visible; opacity:1; transform:none; animation:none;
		box-shadow:none; border:0; border-radius:0;
		background:#fafafa; padding:0 20px; flex-direction:column;
	}
	.open_menu nav .content > ul .menu_one .menu_all{ display:none; }
	.open_menu nav .content > ul .menu_one.menu_a .menu_all{ display:block; }
	.open_menu nav .content > ul .menu_one:first-child:not(.menu_a) .menu_all{ display:none; }
	.open_menu nav .content > ul .menu_row{ display:block; width:100%; min-width:0; max-width:none; margin:0; padding:0; }
	.open_menu nav .content > ul .menu_all a{
		display:block; padding:10px 0; font-size:15px; line-height:20px;
		color:#1e1e1e; border-bottom:1px solid #ececec;
	}

	/* 4) КЛОН header_top (#menu_after .menu_top, ДИТЯ <nav>) — в потоке drawer ПОД лентой, один скролл */
	#menu_after{ width:100%; }
	.open_menu #menu_after{ display:block; background:#fff; border-top:8px solid #f4f4f4; }
	.open_menu #menu_after .menu_top{ max-width:none; padding:10px 20px 24px; margin:0; }
}
	/* 5) ТЕЛЕФОНЫ В БУРГЕРЕ (parity #11): .phone на моб = 1 икон-кнопка (донор скрывает 2-й номер). */
	/*    .nav_phones = ОБА номера ($site_phone, та же живая переменная = DRY) в drawer, кликабельны. */
	.open_menu .nav_phones{
		display:block; padding:18px 20px 8px; border-top:8px solid #f4f4f4;
	}
	.open_menu .nav_phones a{
		display:block; padding:8px 0 8px 30px; position:relative;
		font-size:16px; line-height:22px; color:#1e1e1e; text-decoration:none;
	}
	.open_menu .nav_phones a:before{
		content:""; position:absolute; left:0; top:50%; margin-top:-9px; width:18px; height:18px;
		background-color:#1e1e1e;
		-webkit-mask:url(face/phone.svg) no-repeat center / 18px 18px; mask:url(face/phone.svg) no-repeat center / 18px 18px;
	}
/* tablet 611-1000: шапка ниже (~120px) → меньше верхний отступ drawer */
@media screen and (min-width:611px) and (max-width:1000px){
	.open_menu nav{ padding-top:120px; }
}
/* ===== PIXFIX-6 END ===== */

/* ===== PIXFIX-9 2026-06-15 — ОТСТУП SEO→ФУТЕР 60→120 (Figma 56:857→56:858). HOME-only (.seo_band), scoped. ===== */
/* margin-bottom .seo_band коллапсировал через MAIN; padding-bottom уходил ВНУТРЬ банда (стык-метрика оставалась 60).
   Стык .seo_band(низ)→footer(верх) задаёт footer{margin-top:60}. HOME-only через :has(.seo_band) (band есть ТОЛЬКО на home;
   на каталожных стр класса нет → их стык к футеру не тронут). 60→120. */
body:has(.seo_band) footer{ margin-top:120px; }


/* ===== PIXFIX-10 ПУНКТ-2 2026-06-15 — БЕЛЫЙ ФОН ЗОНЫ ШАПКА-МЕНЮ (Figma 56:532: пилюля #f4f4f4 на БЕЛОМ). =====
   Корень: body-bg донор-дефолт #f1f1f1 (серый) проступает в МАРЖИНАХ блоков шапки —
   .header{margin:0 0 16px} + nav{margin:10px 0 30px} → серые полосы вокруг/под тёмным меню и в
   зазоре меню→hero. Глобально body-bg НЕ трогаем (каталожные секции зависят). HOME-only через
   :has(.seo_band) (.seo_band есть ТОЛЬКО на home, тот же скоуп-приём что PIXFIX-9).
   Full-bleed белый pseudo ПОЗАДИ nav (z-index:-1): покрывает зазор header→nav (10px сверху) и
   зазор nav→hero (30px снизу). Тёмная плашка .header (#1e1e1e) и пилюля .cat_menu (#f4f4f4)
   опакны и лежат ПОВЕРХ — белый виден ТОЛЬКО в серых зазорах. Зазор menu→hero=30 (PIXFIX-7) ЦЕЛ. */
body:has(.seo_band) nav{ position:relative; z-index:1; }
body:has(.seo_band) nav:before{
	content:"";
	position:absolute;
	top:-26px;          /* перекрыть зазор header→nav (nav margin-top 10 + header margin-bottom 16) */
	bottom:-30px;       /* перекрыть зазор nav→hero (nav margin-bottom 30) */
	left:50%;
	margin-left:-50vw;
	width:100vw;
	background:#ffffff;
	z-index:-1;
	pointer-events:none;
}

/* ===== SEOFIX 2026-06-15 — B6 SEO-блок HOME-only (.seo_band), scoped. НЕ глобально (каталожные seo_img r16 / seo_h gap24 НЕ трогать). ===== */
/* FIX-1: радиус фото 16→30 (Figma 56:855/856). Спецификность 0,3,0 > глоб .seo_imgs .seo_img (0,2,0). */
.seo_band .seo_imgs .seo_img{ border-radius:30px; }
/* FIX-2: зазор заголовок→фото 24→50 (Figma низ y3856 → верх y3906 = 50). Спецификность 0,2,1 > глоб .content>.seo_h (0,1,1). Верх (40) НЕ трогаем. */
.seo_band.content > .seo_h{ margin-bottom:50px; }
/* CONTENT-DOWN 2026-06-16: FIX-3 — 2 реальных макетных фото (Figma 56:855/856) вместо серых плейсхолдеров.
   Дизайн-фото макета (источника в БД нет, как hero ferrari) → статикой. Scoped .seo_band (home-only):
   каталожные .seo_img (marka/category) НЕ задеты — у них нет .seo_band, остаются #f4f4f4. */
.seo_band .seo_imgs .seo_img:nth-child(1){ background:#f4f4f4 url(/img/seo_1.jpg) center/cover no-repeat; }
.seo_band .seo_imgs .seo_img:nth-child(2){ background:#f4f4f4 url(/img/seo_2.jpg) center/cover no-repeat; }

/* ===================== CAROUSEL-T2 2026-06-16 — POP_CATS карусель (Figma 56:488/56:527) =====================
   vda: 4 карточки в ряд + точки-пагинация. Прогрессив-обёртка над донор-выводом car_category (15 карточек .pop_cat
   не тронуты). Scoped СТРОГО под .pop_cats_band (есть только на home) → НЕ задевает .catalogs .pop_cats /
   .catalogs.model_acc .pop_cats. Без JS: трек скроллится (scroll-snap), карточки видны. */
.pop_cats_band .pop_cats
{
	display:flex;
	flex-wrap:nowrap;
	grid-template-columns:none;       /* погасить донор-грид в этом скоупе */
	justify-content:flex-start;
	gap:27px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	-ms-overflow-style:none;          /* скрыть нативный скроллбар (десктоп — листаем точками) */
	scrollbar-width:none;
}
.pop_cats_band .pop_cats::-webkit-scrollbar{ display:none; }
.pop_cats_band .pop_cats .pop_cat
{
	flex:0 0 300px;
	width:300px;
	scroll-snap-align:start;
}
/* точки-пагинация (Figma 56:527): центр, ~12px круги, активная — акцент */
.pop_cats_dots
{
	display:flex;
	justify-content:center;
	align-items:center;
	gap:12px;
	margin:0 0 40px;
	padding:0;
	list-style:none;
}
.pop_cats_dot
{
	width:12px; height:12px;
	border-radius:50%;
	background:#7e7e7e;
	border:0;
	padding:0;
	cursor:pointer;
	transition:background .2s, transform .2s;
}
.pop_cats_dot:hover{ background:#bdbdbd; }
.pop_cats_dot.is_active{ background:#f40000; transform:scale(1.15); }
/* JS активен → трек не показывает нативный скролл-хвост, нижний отступ держат точки */
.pop_cats_band.has_carousel .pop_cats{ margin-bottom:40px; } /* PIXFIX gap карточки→точки 24→40 (Figma) */

/* ════════════════════════════════════════════════════════════════════
   HERO-GAR FIX 2026-06-16 — сверка с Figma 56:596 (гараж) + 56:479 (hero)
   CSS-only, scoped home (.home_garage / .a_slider_item). Ядро не тронуто.
   ════════════════════════════════════════════════════════════════════ */

/* FIX-1: ОДНА белая карточка (Figma 56:596: white, radius44, shadow 0 8 16/.12)
   оборачивает И мод-табы (.c>ul.tabs) И каскад (.tab_info.tab_a).
   Раньше белый держал только .tab_info.tab_a → табы стояли на тёмном hero. */
.home_garage
{
	background:#ffffff;
	border-radius:44px;
	box-shadow:0 8px 16px rgba(0,0,0,.12);
	padding:20px;
	box-sizing:border-box;
}
/* снять отдельную белую карточку с каскада ВНУТРИ home (двойной карточки нет);
   на каталожных (.tab_info.tab_a БЕЗ .home_garage) базовый белый сохранён. */
.home_garage .tab_info.tab_a
{
	background:transparent;
	box-shadow:none;
	border-radius:0;
	padding:0;
}
/* мод-табы теперь лежат на общей белой карточке: убрать нижний отступ-двойник,
   оставить компакт-зазор табы→каскад как был (16px). */
.home_garage .c{ margin:0; }

/* FIX-2: КРОП ФОТО HERO — Figma 56:479 показывает яркую красную полосу (~58% по верт.),
   а live 50% 50% ловил тёмный край. Сдвиг по вертикали к 58%. Только CSS, JS/БД не тронуты. */
.a_slider_item
{
	background-position:50% 58% !important;
}
/* /HERO-GAR FIX */