/* ====== RemBaza — головна. Один чистий CSS. Візуал = Figma 51:2, стиль коду = donor ====== */

:root{
  --ink:#1e1e1e;      /* основний темний */
  --ink2:#171717;     /* найтемніший (верх. панель, кошик) */
  --gray:#7e7e7e;     /* сірий текст */
  --gray2:#adadad;    /* плейсхолдер */
  --line:#e0e0e0;     /* світла лінія */
  --field:#313131;    /* поле пошуку */
  --field2:#3c3c3c;   /* меню-смуга / темна кнопка */
  --div:#484848;      /* роздільник у меню */
  --orange:#f95203;   /* акцент */
  --light:#f0f0f0;    /* світлий фон (підбір, cta) */
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:Poppins,Arial,sans-serif;color:var(--ink);background:#fff;font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
input{font-family:inherit}

.content{max-width:1280px;margin:0 auto;padding:0 20px}

/* секційний заголовок (донорський .name) */
.name{font-size:36px;line-height:48px;font-weight:500;color:var(--ink);margin:60px 0 24px}

/* ============ ВЕРХНЯ ПАНЕЛЬ ============ */
.top{background:var(--ink2);font-size:12px;line-height:18px}
.top .content{display:flex;align-items:center;height:40px}
.top_menu{display:flex;gap:24px}
.top_menu a{color:var(--gray)}
.top_menu a:hover{color:#fff}
.top_lang{display:flex;align-items:center;gap:0;margin-left:46px}
.top_lang b,.top_lang a{display:flex;align-items:center;justify-content:center;width:36px;height:26px;border-radius:4px;font-weight:400}
.top_lang b{background:#1e1e1e;color:#fff}
.top_lang a{color:var(--gray)}
.top_soc{display:flex;align-items:center;gap:10px;margin-left:36px}
/* іконки соцмереж: резинг сірий #7E7E7E (mask), при наведенні — фірмовий колір кожної */
.top_soc a{display:inline-block;width:18px;height:18px;background:#7E7E7E;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;transition:background .15s ease}
.top_soc img{display:none}
.top_soc a[title="Facebook"]{-webkit-mask-image:url(/img/ic-fb.svg);mask-image:url(/img/ic-fb.svg)}
.top_soc a[title="Instagram"]{-webkit-mask-image:url(/img/ic-ig.svg);mask-image:url(/img/ic-ig.svg)}
.top_soc a[title="Youtube"]{-webkit-mask-image:url(/img/ic-yt.svg);mask-image:url(/img/ic-yt.svg)}
.top_soc a[title="Telegram"]{-webkit-mask-image:url(/img/ic-tg.svg);mask-image:url(/img/ic-tg.svg)}
.top_soc a[title="Viber"]{-webkit-mask-image:url(/img/ic-viber.svg);mask-image:url(/img/ic-viber.svg)}
.top_soc a[title="Messenger"]{-webkit-mask-image:url(/img/ic-mes.svg);mask-image:url(/img/ic-mes.svg)}
.top_soc a[title="Whatsapp"]{-webkit-mask-image:url(/img/ic-wa.svg);mask-image:url(/img/ic-wa.svg)}
.top_soc a[title="Facebook"]:hover{background:#1877F2}
.top_soc a[title="Instagram"]:hover{background:#E1306C}
.top_soc a[title="Youtube"]:hover{background:#FF0000}
.top_soc a[title="Telegram"]:hover{background:#229ED9}
.top_soc a[title="Viber"]:hover{background:#7360F2}
.top_soc a[title="Messenger"]:hover{background:#0084FF}
.top_soc a[title="Whatsapp"]:hover{background:#25D366}
.top_login{display:flex;align-items:center;gap:8px;margin-left:auto;color:var(--gray);text-decoration:underline}
.top_login:hover{color:#fff}

/* ============ ШАПКА ============ */
.head{background:var(--ink)}
.head .content{display:flex;align-items:center;height:134px}
.logo img{width:250px;height:84px}
.search,.nomer{position:relative;height:60px;background:var(--field);border-radius:16px;display:flex;align-items:center}
.search{width:408px;margin-left:46px}
.nomer{width:200px;margin-left:14px;padding-left:41px}
.search input,.nomer input{flex:1;min-width:0;height:100%;border:0;background:none;color:#fff;font-size:14px;padding:0 58px 0 20px;text-overflow:ellipsis}
.nomer input{padding-left:14px} /* відступ від прапора, щоб текст/плейсхолдер не липли */
.search input:focus,.nomer input:focus{outline:none;box-shadow:none}
.search input::placeholder,.nomer input::placeholder{color:var(--gray2)}
.search button,.nomer button{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.search button{background:var(--orange)}
.nomer button{background:var(--field2)}
.nomer_flag{position:absolute;left:17px;top:50%;transform:translateY(-50%);width:24px;height:24px}

.phones{margin-left:auto;display:flex;flex-direction:column;gap:12px}
.phones a{display:flex;align-items:center;gap:7px;color:#fff;font-size:16px;font-weight:500;line-height:22px}
.phones a::before{content:"";width:20px;height:20px;flex:0 0 20px;background:url(/img/ic-phone.svg) center/contain no-repeat}
.phones .ph38{color:var(--gray);font-weight:400}
.phones b{color:#fff;font-weight:700}
.phones img{width:20px;height:20px}

/* КОШИК = донорський markup (shop_cart.kiev: <div>/<div class="cart_a"> Корзина <span>(N)</span>) + донорський JS.
   Markup/JS НЕ чіпаємо — лише стиль під макет: біла підпис + іконка-кнопка + рахунок. */
.cart{display:flex;align-items:center;margin-left:32px}
.cart>div{position:relative;display:flex;align-items:center;gap:14px;color:#fff;font-size:16px;font-weight:500;text-decoration:underline;cursor:pointer;white-space:nowrap}
.cart>div::after{content:"";order:3;width:40px;height:40px;flex:0 0 40px;border-radius:8px;background:var(--ink2) url(/img/ic-cart.svg?v=d) center/24px no-repeat}
.cart>div span{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--orange);color:#fff;font-size:10px;font-weight:600;line-height:16px;display:flex;align-items:center;justify-content:center;text-decoration:none}

/* ============ МЕНЮ-КАТАЛОГ (темна смуга) ============ */
.nav{background:var(--field2)}
.nav_list{display:flex;align-items:stretch}
.nav_burger{display:none}
.nav a{display:flex;align-items:center;gap:8px;height:50px;padding:0 17px;color:#fff;font-size:14px;font-weight:600;white-space:nowrap;border-right:1px solid var(--div)}
.nav a:first-child{padding-left:0}
.nav a.is-active{background:var(--ink2)}
.nav a:hover{background:var(--ink2)}
.nav_cat img{width:22px;height:22px}

/* ============ ПІД-МЕНЮ = МЕГАМЕНЮ (донор $file: ul>li.menu_one>span + .menu_all). Біла смуга ============
   Випадайку вмикає донорський script.js (клас .menu_a на .menu_one) + :hover. Свій JS не пишемо. */
.subnav{background:#fff;box-shadow:0 3px 12px rgba(0,0,0,.14);position:relative;z-index:5}
.subnav .content{position:relative}
.subnav #menu{display:none}
/* ДОНОР 1:1: ul space-between, menu_one relative, роздільник border-right (БЕЗ chevron), menu_a top:100%/left:0 → донорський JS сам позиціонує. Тільки наші токени-кольори. */
.subnav ul{list-style:none;display:flex;justify-content:space-between;align-items:stretch;position:relative;margin:0;padding:0;width:100%}
.subnav .menu_one{position:relative}
.subnav .menu_one>span{font-size:14px;line-height:18px;position:relative;display:flex;align-items:center;height:100%;font-weight:bold;padding:16px 8px 14px;text-align:center;box-sizing:border-box;cursor:pointer;color:var(--ink)}
.subnav .menu_one>span::before{content:"";position:absolute;right:1px;top:50%;transform:translateY(-50%) rotate(90deg);width:8px;height:8px;background:url(/img/chevron-nav.svg) center/8px no-repeat;pointer-events:none}
.subnav .menu_one:hover>span::before,.subnav .menu_one.menu_a>span::before{background-image:url(/img/chevron-nav-active.svg)}
.subnav .menu_one:hover>span,.subnav .menu_one.menu_a>span{background-color:var(--light);color:var(--orange)}
.subnav .menu_all{position:absolute;background:#fff;z-index:21;display:flex;top:-999999px;left:-999999px;box-shadow:0 14px 28px rgba(0,0,0,.16);padding:20px 0 15px;border:1px solid var(--line);border-top:0;visibility:hidden}
.subnav .menu_one.menu_a .menu_all{top:100%;left:0;visibility:visible;animation:nav .2s}
/* menuc-20260612: донорський якір широких панелей мегаменю. Донорський script.js пише inline left=m+10,
   де m рахує jQuery width() контейнера БЕЗ padding; у донора .content без padding, у нас padding:0 20px →
   панель їде на 40px лівіше за донора. Компенсація margin-left ТІЛЬКИ коли JS записав inline left
   ([style*="left"], кейс m<0 — широкі панелі); вузькі панелі (CSS left:0 від li, як у донора) не чіпаємо.
   1001-1303px: 28px замість 40, щоб right панелі ≤ viewport (h-scroll 0). JS/DOM донора не чіпали; моб ≤1000 не задіто (panel static). */
@media (min-width:1304px){
.subnav .menu_one.menu_a .menu_all[style*="left"]{margin-left:40px}
}
@media (min-width:1001px) and (max-width:1303px){
.subnav .menu_one.menu_a .menu_all[style*="left"]{margin-left:28px}
}
@keyframes nav{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}
.subnav .menu_row{width:280px;margin:0 20px}
.subnav .menu_all strong{display:block;font-weight:600;color:var(--ink);margin:0 0 8px}
.subnav .menu_all strong a{color:inherit}
.subnav .menu_all a{display:block;color:var(--gray);margin:0 0 6px}
.subnav .menu_all a:hover{color:var(--orange)}

/* ============ HERO / СЛАЙДЕР (механіка донорська — крутить core.js) ============ */
.a_slider{position:relative}
.a_slider_content{overflow:hidden}
.a_slider_items{display:flex;transition:transform .5s ease;will-change:transform}
.a_slider_item{position:relative;flex:0 0 100%;max-width:100%;height:500px;display:flex;align-items:center;user-select:none}
.a_slider_item>.content{width:100%}
.a_slide_info{max-width:560px}
.a_slide_name{font-size:50px;line-height:70px;font-weight:700;color:#fff}
.a_slide_text{font-size:24px;line-height:36px;font-weight:500;color:#fff;margin-top:20px}
.a_slide_a{display:flex;align-items:center;justify-content:center;width:230px;height:60px;margin-top:80px;border-radius:16px;background:var(--orange);color:#fff;font-size:16px;font-weight:600}
/* крапки навігації (видимі), класи донорські — core.js вмикає активну .a_slider_dot_a */
.a_slider_dots{position:absolute;left:0;right:0;bottom:30px;z-index:15;display:flex;justify-content:center;margin:0 15px;padding:0}
.a_slider_dot{flex:0 1 auto;width:14px;height:14px;margin:0 6px;border-radius:50%;background:rgba(255,255,255,.4);text-indent:-999px;cursor:pointer}
.a_slider_dot_a{background:#fff}

/* ============ ПІДБІР АВТО = донорський гараж (garage1..5), дизайн макета .pick ============
   DOM/id донора (.garage_alls / #garage_1..5 / #garage_in / .stepN) НЕ перейменовувати — на них висить script.js. */
.garage_all{border-radius:16px}
.garage_alls{display:flex}
.garage_alls>div{flex:1;min-width:0;height:60px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 15px 0 22px;background:var(--light);font-size:16px;font-weight:600;color:var(--gray);cursor:pointer}
.garage_alls>div:first-child{border-radius:16px 0 0 0}
.garage_alls>div:last-child{border-radius:0 16px 0 0}
.garage_alls>div b{display:none}
.garage_alls>div::after{content:"";width:16px;height:16px;flex:0 0 16px;background:url(/img/chevron.svg) center/16px no-repeat}
.garage_alls .garage_active{color:var(--ink);box-shadow:inset 0 -4px 0 var(--orange)}
.garage_alls .garage_active::after{background-image:url(/img/chevron-active.svg)}
/* БРЕНДИ/МОДЕЛІ (плоский список span) — .step0 / .step0.step2 */
#garage_in .step0{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
#garage_in .step0 span{display:flex;align-items:center;height:60px;min-width:0;padding:0 21px;font-size:14px;color:var(--ink);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff;cursor:pointer}
#garage_in .step0 span:hover{color:var(--orange)}
/* РІК ВИПУСКУ — .step3 > .garage_year: ДОНОРСЬКА сітка 11-кол; декада-заголовок(<div>) + роки span(є)/b(нема). Палітра наша. */
#garage_in .step3{padding:0;background:#fff;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.garage_year{display:grid;grid-template-columns:repeat(11,1fr);background:#fff}
.garage_year div,.garage_year span,.garage_year b{padding:16px 12px 12px;font-size:15px;line-height:1.2;text-align:center;white-space:nowrap;border-right:1px solid var(--line);border-bottom:1px solid var(--line);box-sizing:border-box}
.garage_year div{background:var(--light);color:var(--ink);font-weight:700}
.garage_year span{color:var(--ink);cursor:pointer}
.garage_year span:hover{color:var(--orange)}
.garage_year b{color:var(--gray2);font-weight:400;cursor:not-allowed}
/* ДВИГУН — .step4 > .garage_motor: ДОНОРСЬКА раскладка паливо(strong 155) + значення(span 75). Палітра наша. */
#garage_in .step4{padding:0;background:#fff;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.garage_motor{display:flex;flex-wrap:wrap}
.garage_motor strong,.garage_motor span{padding:16px 12px 12px;font-size:15px;line-height:1.2;border-right:1px solid var(--line);border-bottom:1px solid var(--line);box-sizing:border-box}
.garage_motor strong{flex:0 0 155px;background:var(--light);color:var(--ink);font-weight:700}
.garage_motor span{flex:0 0 75px;text-align:center;color:var(--ink);cursor:pointer}
.garage_motor span:hover{color:var(--orange)}
/* МОДИФІКАЦІЯ — .step5 > .garage_modif: ДОНОРСЬКІ картки span 225 + .garage_modif_name заголовок групи. Палітра наша. */
#garage_in .step5{padding:0;background:#fff;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.garage_modif{display:flex;flex-wrap:wrap}
.garage_modif_name{flex:0 0 100%;width:100%;font-size:16px;font-weight:700;text-align:center;padding:15px 0 10px;background:var(--light);color:var(--ink);border-bottom:1px solid var(--line)}
.garage_modif span{flex:0 0 225px;padding:15px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);cursor:pointer;border-right:1px solid var(--line);border-bottom:1px solid var(--line);box-sizing:border-box}
.garage_modif span:hover{color:var(--orange)}
.garage_modif virtus{display:block;margin-top:4px;font-size:12px;line-height:19px;font-weight:400;color:var(--gray)}
.subnav .garage_submenu{position:absolute;left:0;top:0;width:100%;box-sizing:border-box;padding:12px 21px;font-weight:700;text-transform:uppercase;color:var(--ink);background:var(--light);border-bottom:1px solid var(--line)}
.subnav .garage_submenu ~ .menu_row{margin-top:32px}
#garage_to,.none{display:none}

/* ============ ПОПУЛЯРНІ КАТЕГОРІЇ ============ */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.cat{position:relative;height:500px;border-radius:16px;overflow:hidden;background:#e0e0e0 center/cover no-repeat}
.cat::after{content:"";position:absolute;left:0;right:0;bottom:0;height:226px;background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 100%)}
.cat_name{position:absolute;left:31px;right:31px;bottom:94px;z-index:1;font-size:24px;line-height:36px;font-weight:600;color:#fff}
.cat_a{position:absolute;left:31px;bottom:30px;z-index:1;display:flex;align-items:center;justify-content:center;width:94px;height:40px;border-radius:8px;background:var(--field2);color:#fff;font-size:14px;font-weight:600;transition:background .15s ease}
.cat_a.is-orange{background:var(--orange)}
.cat:hover .cat_a{background:var(--orange)}

/* ============ МАРКИ АВТО ============ */
.marki{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.marki a{display:flex;align-items:center;gap:18px;height:86px;min-width:0;padding:0 17px 0 23px;background:#fff}
.marki a>img:first-child{width:40px;height:40px;object-fit:contain;flex:0 0 40px}
.marki span{flex:1;min-width:0;font-size:16px;color:var(--ink);overflow-wrap:break-word;word-break:normal;hyphens:none}
.mk_a{width:16px;height:16px;flex:0 0 16px}
.marki a::after{content:"";flex:0 0 16px;width:16px;height:16px;background:url(/img/arrow-card.svg) center/contain no-repeat}
.marki a{transition:box-shadow .15s ease,border-radius .15s ease}
.marki a img{filter:grayscale(100%);transition:filter .15s ease}
.marki a:hover{box-shadow:0 3px 6px rgba(0,0,0,.14);border-radius:16px}
.marki a:hover img{filter:none}
.marki a:hover span{text-decoration:underline}

.allmarks{display:flex;align-items:center;justify-content:center;height:60px;margin-top:30px;border:1px solid var(--line);border-radius:16px;font-size:16px;font-weight:500;color:var(--ink)}
.allmarks:hover{border-color:var(--orange);color:var(--orange)}

/* ============ SEO ============ */
.seo_text{font-size:16px;line-height:26px;color:var(--ink)}
.seo_text p{margin:0 0 16px}
.seo_text ul{list-style:disc;padding-left:22px}
.seo_text li{margin-bottom:8px}
.seo_imgs{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:40px}
.seo_imgs img{width:100%;height:400px;object-fit:cover;border-radius:16px}

/* ============ CTA ============ */
.cta{background:var(--light);margin-top:80px;overflow:hidden}
.cta_in{position:relative;display:flex;align-items:center;min-height:480px}
.cta_img{flex:0 0 50%;min-width:0;display:flex;justify-content:center;align-items:center}
.cta_img img{width:720px;max-width:none;height:720px;object-fit:contain;transform:scaleX(-1)} /* ассет дзеркальний — фліп під орієнтацію Figma */
.cta_body{flex:1;padding-left:20px}
.cta_name{font-size:50px;line-height:70px;font-weight:700;color:var(--ink)}
.cta_text{font-size:24px;line-height:36px;color:var(--ink);margin-top:20px;max-width:580px}
.cta_text a{text-decoration:underline}
.cta_form{position:relative;width:288px;height:60px;margin-top:40px;background:#fff;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center}
.cta_form input{flex:1;min-width:0;height:100%;border:0;background:none;font-size:16px;font-weight:500;color:var(--ink);padding:0 56px 0 19px}
.cta_form input::placeholder{color:var(--gray2)}
.cta_form button{position:absolute;right:9px;top:10px;width:40px;height:40px;border-radius:8px;background:var(--field2);display:flex;align-items:center;justify-content:center}
/* ctah1 (Figma 51:275): банер 480px — шестерні 720×720 КЛІПАЮТЬСЯ рамкою (верх -99, низ -141 під обріз .cta overflow:hidden);
   вертикаль img виведена з потоку негативними маржинами (flow-висота 720-99-141=480 = min-height, горизонталь не чіпано);
   текст-група top=65 від верху банера (Figma), замість флекс-центрування. Скоуп desktop — моб стек ≤1000 не зачеплено */
@media (min-width:1001px){
  .cta_img img{margin-top:-99px;margin-bottom:-141px}
  .cta_in{align-items:flex-start}
  .cta_body{padding-top:65px;padding-bottom:65px} /* низ 65 симетрично: на 1440 не впливає (контент 462<480), на 1001-1280 контент вищий 480 → форма не прилипає до низу банера */
}

/* ============ ПІДВАЛ ============ */
footer{background:var(--ink2)}
.foot{display:flex;justify-content:space-between;gap:40px;padding:60px 20px}
.foot_col{display:flex;flex-direction:column}
.foot_brand{flex:0 0 360px}
.foot_logo img{width:200px;height:67px}
.copy{margin-top:24px;font-size:14px;line-height:22px;color:var(--gray)}
.pays{display:flex;align-items:center;gap:18px;margin-top:24px}
.pays img{height:20px}
.name_3{font-size:16px;line-height:24px;color:#fff;margin-bottom:20px}
.foot_col a,.foot_col span,.foot_col address,.foot_col .time{font-size:14px;line-height:28px;color:var(--gray);font-style:normal}
.foot_col a:hover{color:#fff}
.foot_col address{margin-top:6px;line-height:22px}
.foot_col a.is-active{color:#fff;text-decoration:underline}

/* =================================================================
   §9 АДАПТИВ — desktop-first, брейкпоінти ДОНОРА (1280/1000/761/610/540/470/350).
   РОЗКЛАДКА за підходом донора (donor_style.css), кольори/шрифти — з Figma.
   Контейнер лишаємо плинним (max-width:1280), щоб десктоп 1280 == Figma.
   ================================================================= */

/* ---- min-width:1001 десктоп: h-scroll@1024 фікс (круг 1) живе ТІЛЬКИ на десктопі,
        щоб на ≤1000px бургер-дропдаун .nav_list (position:absolute;top:50px) НЕ кліпався. ---- */
@media (min-width:1001px){
  .nav{overflow:hidden}
}

/* ---- 1280: десктоп → ноутбук. Контейнер плинний (Figma 1280 збережено). ---- */
@media (max-width:1280px){
  .nav a{padding:0 14px}
}

/* navfix: маркетинг-таби .nav_list не вміщуються в один ряд @1001-1248 → перенос (Figma 51:163 = 1 ряд тільки ≥1280). Слой-1: 0 кліпу/h-scroll, всі табы видимі. */
@media (min-width:1001px) and (max-width:1280px){
  .nav_list{flex-wrap:wrap}
}

/* ---- 1000: планшет. Як у донора: ховаємо десктоп-меню → бургер, сітки 4/3 кол,
        слайдер нижчий, футер у стовпчик по центру, пошук на всю ширину. ---- */
@media (max-width:1000px){
  .content{width:auto}
  header{position:relative}  /* toggle607: контекст для абсолютного #menu вгорі */

  /* верхня панель: ховаємо меню+соцмережі (донор ховає .header ul), лишаємо мову/логін */
  .top_menu,.top_soc{display:none}
  .top_lang{margin-left:0}

  /* шапка: лого + телефони + кошик у ряд; пошук і держномер — окремими рядками на всю ширину */
  .head .content{flex-wrap:wrap;height:auto;padding-top:16px;padding-bottom:16px;gap:14px;row-gap:14px}
  .logo{order:1}
  .phones{order:2;margin-left:auto;gap:4px}
  .cart{order:3;margin-left:20px}
  .search{order:4;margin-left:0;width:100%}
  .nomer{order:5;margin-left:0;width:100%}

  /* ===== МОБІЛЬНЕ МЕНЮ = ДОНОРСЬКА МЕХАНІКА 1:1 (наші кольори) =====
     Донор: бургер #menu (.menu) у nav, клік → html.open_menu (script.js menu()):
       показує дерево .subnav ul, акордеон 2-го рівня .menu_all slideToggle,
       клонує #menu_top → #menu_after .menu_top (сервіс-лінки).
     Десктоп (>1000) НЕ чіпаємо: dark-таби .nav + білий мегаменю .subnav як є.
     На мобайлі: ховаємо dead-таби .nav (плейсхолдери href="#" + дубль-бургер),
     показуємо .subnav як бургер-бар з єдиним тригером #menu. */
  /* МАРКЕТИНГ-ТАБИ .nav на мобайлі: показуємо існуючий .nav_list стопкою РАЗОМ з відкритим
     бургером (html.open_menu). Без дубль-DOM, без JS — переюз єдиного .nav_list. */
  .nav{display:none}                 /* закрито: схований; дубль-тригер .nav_burger лишається схований */
  .nav .nav_burger,.nav .nav_tog{display:none}   /* один тригер #menu, цей бургер геть */
  .open_menu .nav{display:block;background:var(--field2);overflow:visible}
  .open_menu .nav .content{padding:0 15px}
  .open_menu .nav_list{display:block;width:100%}
  .open_menu .nav_list a{display:flex;align-items:center;gap:10px;height:auto;min-height:0;padding:14px 0;color:#fff;font-size:16px;font-weight:600;border-right:0;border-bottom:1px solid var(--div)}
  .open_menu .nav_list a:first-child{padding-left:0}
  .open_menu .nav_list a:last-child{border-bottom:0}
  .open_menu .nav_list a:hover,.open_menu .nav_list a:active{background:transparent;color:var(--orange)}
  .open_menu .nav_list a.nav_cat{color:var(--orange)}
  .open_menu .nav_list a.nav_cat img{display:none}  /* toggle607: прибрати дубль-☰ у маркетинг-табі, текст лишається */

  /* toggle607: закрито — порожню смугу .subnav схлопуємо (0px), #menu лишається видимим (absolute, overflow visible) */
  .subnav{display:block;background:transparent;box-shadow:none;position:static;z-index:20;height:0;overflow:visible}
  .subnav .content{padding:0;position:static}
  .open_menu .subnav{background:var(--field2);height:auto;overflow:visible}
  .open_menu .subnav .content{padding:0 15px}
  /* toggle607: ЄДИНИЙ тригер-бургер #menu — у ВЕРХНЮ зону шапки (біля лого), завжди видимий і клікабельний.
     Біндинг script.js menu() по id #menu збережено (позиція змінена, не DOM/JS). */
  .subnav #menu{display:block;cursor:pointer;position:absolute;top:56px;right:15px;width:44px;height:44px;background:url(/img/ic-menu.svg) no-repeat 50%;background-size:30px 30px;z-index:30}
  .open_menu .subnav #menu{background-size:34px 34px}
  /* дерево категорій сховане доки бургер не відкритий (донор: nav ul display:none) */
  .subnav ul{display:none;flex-direction:column;width:100%}
  .open_menu .subnav ul{display:block}
  .subnav .menu_one{position:static;display:block;border-bottom:1px solid var(--div)}
  .subnav .menu_one>span{display:block;min-height:0;margin:0 -15px;padding:16px 15px 14px 15px;border-bottom:0;color:#fff;font-size:18px;font-weight:600;text-align:left;background:url(/img/chevron-nav.svg) no-repeat calc(100% - 15px) 50%;background-size:14px 14px}
  .subnav .menu_one>span::after{display:none}
  .subnav .menu_one>span::before{display:none}
  .subnav .menu_one:hover>span,.subnav .menu_one.menu_a>span{color:var(--orange);border-bottom-color:transparent}
  /* акордеон 2-го рівня: статичний блок, slideToggle донорським JS */
  .subnav .menu_all,.subnav .menu_one.menu_a .menu_all{position:static;top:auto;left:auto;display:none;flex-direction:column;width:auto;min-width:0;max-width:none;visibility:visible;background:#fff;border:0;border-radius:0;box-shadow:none;margin:0 -15px;padding:8px 0 14px}
  .subnav .menu_row{width:auto;margin:0;padding:0 15px 0 18px}
  .subnav .menu_all strong{color:var(--ink);margin:10px 0 6px}
  .subnav .menu_all a{display:block;font-size:15px;line-height:1.5;color:var(--gray);border-bottom:1px solid var(--line);padding:6px 0}
  .subnav .menu_all a:hover{color:var(--orange)}
  /* клоновані сервіс-лінки (#menu_top → #menu_after .menu_top, донорський menu()) */
  #menu_after .menu_top{display:block;width:100%;background:#fff;padding:0;margin:0}
  #menu_after .menu_top ul{display:block;list-style:none;margin:0;padding:0}
  #menu_after .menu_top li{border-bottom:1px solid var(--line)}
  #menu_after .menu_top li:last-child{border-bottom:0}
  #menu_after .menu_top a{display:block;color:var(--ink);font-size:17px;font-weight:600;text-decoration:none;padding:14px 15px}
  #menu_after .menu_top a:hover{color:var(--orange)}

  /* hero нижчий + менший шрифт (донор: 400px / 42 / 22) */
  .a_slider_item{height:400px}
  .a_slide_name{font-size:42px;line-height:50px}
  .a_slide_text{font-size:22px}

  /* сітки: бренди 4 кол, категорії 3, дропдаун марок 4 (як step0/marki/pop_cats у донора) */
  .marki{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  #garage_in .step0{grid-template-columns:repeat(4,minmax(0,1fr))}
  .garage_alls>div{padding:0 12px;font-size:14px}

  .seo_imgs{gap:20px}

  /* CTA у стовпчик: картинка зверху, форма під нею */
  .cta_in{flex-direction:column;align-items:flex-start;min-height:0;padding-top:40px;padding-bottom:40px}
  .cta_img{flex:none;width:100%;justify-content:center;margin-bottom:24px}
  .cta_img img{width:380px;height:380px}
  .cta_body{padding-left:0;width:100%}

  /* футер у стовпчик по центру (донор: footer_row block 410 center) */
  .foot{display:block;padding:40px 20px}
  .foot_col,.foot_brand{display:block;flex:none;width:100%;max-width:410px;margin:0 auto 30px;text-align:center}
  .foot_logo img{margin:0 auto}
  .pays{justify-content:center}
  .foot_col address{margin-left:auto;margin-right:auto}
}

/* ---- 761: ГОЛОВНИЙ перелом планшет→мобайл. Контейнер плинний, сітки в 2 кол. ---- */
@media (max-width:761px){
  .content{padding:0 15px}
  /* foot607: .content скидає верт.padding → повертаємо донорський моб.відступ футера (donor footer pt40). h-padding не чіпаємо */
  .content.foot{padding-top:40px;padding-bottom:40px}

  .name{font-size:36px;line-height:40px}
  .a_slide_name{font-size:36px;line-height:40px}
  .a_slide_text{font-size:18px}

  /* бренди/категорії/марки → 2 колонки (донор: marki, pop_cats → 2) */
  .marki{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  #garage_in .step0{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* дропдауни гаража: роки 6-кол, паливо на всю ширину, модиф-заголовок зліва (як донор на вузьких) */
  .garage_year{grid-template-columns:repeat(6,1fr)}
  .garage_motor strong{flex-basis:100%}
  .garage_modif_name{text-align:left;padding:16px 12px 12px}

  /* селектор-вкладки гаража у стовпчик (донор .tabs → block) */
  .garage_alls{flex-direction:column}
  .garage_alls>div{flex:none;width:100%;border-bottom:1px solid var(--line)}
  .garage_alls>div:first-child{border-radius:16px 16px 0 0}
  .garage_alls>div:last-child{border-radius:0;border-bottom:0}
  .garage_alls .garage_active{box-shadow:inset 4px 0 0 var(--orange)}

  .seo_imgs{grid-template-columns:1fr}
  .seo_imgs img{height:auto;aspect-ratio:62/40}
}

/* ---- 610: великий телефон. Прибираємо важку картинку CTA (донор ховає cart_img). ---- */
@media (max-width:610px){
  .cta_img{display:none}
  /* ctaair607: на моб картинка-распорка прибрана → .cta схлопувався (.content шорткат на ≤761 обнуляв верт.padding .cta_in). Повертаємо явний верт.воздух 40px на .cta (НЕ .content) = проектний моб-air зі стек-CTA блоку 1000px */
  .cta{padding-top:40px;padding-bottom:40px}
  .cta_name{font-size:34px;line-height:42px}
  .cta_text{font-size:18px;line-height:26px}
}

/* ---- 540: телефон. ---- */
@media (max-width:540px){
  .head .content{gap:12px}
  .phones a{font-size:15px}
}

/* ---- 470: вузький. Заголовки по центру, категорії в 1 кол, кошик-іконка (донор). ---- */
@media (max-width:470px){
  .name{font-size:32px;line-height:35px}
  .a_slide_name{font-size:32px;line-height:35px}
  .cats{grid-template-columns:1fr}
  .cart>div{font-size:0;gap:0}  /* лише іконка кошика на вузьких */
  .cart>div span{display:none}
  .a_slider_item{height:360px}
  .a_slide_a{margin-top:30px}
  .cta_name{font-size:28px;line-height:36px}
  .cta_form{width:100%}
  /* дропдауни гаража на телефоні: роки 4-кол, картки модиф на всю ширину */
  .garage_year{grid-template-columns:repeat(4,1fr)}
  .garage_modif span{flex-basis:100%}
  /* marki: вузький телефон 2-кол — тіснимо хром картки, щоб назва бренда не рвалась посеред слова */
  .marki a{gap:8px;padding:0 10px;height:72px}
  .marki span{font-size:12px;line-height:1.15;overflow-wrap:break-word;word-break:normal;hyphens:none}
  .marki a::after{flex:0 0 12px;width:12px;height:12px}
  .marki a>img:first-child{width:34px;height:34px;flex:0 0 34px}
}

/* ---- 350: міні. ---- */
@media (max-width:350px){
  .content{padding:0 12px}
  .content.foot{padding-top:40px;padding-bottom:40px}
  .marki{grid-template-columns:1fr}
  #garage_in .step0{grid-template-columns:1fr}
  .name{font-size:28px;line-height:32px}
}

/* =================================================================
   §10 КАРТКА ТОВАРУ (car_prod.kiev) — СТРУКТУРА = верстка rembaza3/card (Figma 51:5315).
   DOM емітить donor-класи (.tovar_*/.bread/.garage_my/.tah0/.prods/.pro/.mod_other/.tovar_p/.ico_*) —
   на них кладемо Figma-розкладку (порядок/2-колонки/3-зони/Доставка|Оплата side-by-side/аналоги 3-сітка).
   Токени remb3: --ink/--gray/--line/--light/--field2/--orange. Плашка #ee1e68, темна кнопка #3c3c3c, radius16.
   Механіка донорська (купити #basket, #all_price, artkiev_to, ak_mod, $garage_print) — лише стилі.
   Мобайл одразу: h-scroll=0 на всіх bp (1280/1024/768/610/470/390/350), таблиці→стопка, колонки→стопка.
   ================================================================= */

/* ---- спільне ---- */
.tovar_top,.tovar_50,.prods,.mod_other,.tah0,.tovar_har,.tovar_p,.bread,.garage_my{font-family:Poppins,Arial,sans-serif}

/* ---- 1. ХЛІБНІ КРОШКИ 51:5458 (емітить art.kiev перед include) ---- */
/* FIX1 geom-20260608: відступ крошки→гараж 50px (Figma bread 51:5458 bottom 334 → garage 51:5492 top 384). margin-bottom працює в обох станах гаража (.garage_all wizard / .garage_my selected) */
.bread{font-size:14px;line-height:20px;color:#989898;padding:24px 0 0;margin:0 0 50px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.bread a{font-size:14px;color:#989898;text-decoration:underline;text-underline-offset:2px}
.bread a:after{content:"/";display:inline-block;padding:0 8px;color:#989898;text-decoration:none;font-size:14px}
.bread a:hover{color:var(--orange)}

/* ---- 2. ГАРАЖ-ПАНЕЛЬ .garage_my (стан АВТО ВИБРАНО) — Figma 51:5492 ----
   FIX9 geom-20260608 (verified live DOM 1440). РЕАЛЬНИЙ markup (garage_podbor.kiev:69 + garage.kiev:129): .garage_my > .garage_my_name("Гараж") + .garage_car(.garage_car_name + .garage_car_info) + .garage_new>span + .cb. (.garage_car_info закривається sibling'ом всередині .garage_car бо $garage_html має </div> після імені.)
   Figma 51:5492 = 3 зони: сірий таб «Мій гараж» 256w (radius 16 0 0 16) | сірий таб авто 750w→flex:1 (radius 0 16 16 0, стек ім'я14+підпис12) | темна кнопка «Додати авто» 260×60 r16 #3c3c3c.
   MARKUP-ОБМЕЖЕННЯ: (а) текст таба = «Гараж» (донор), НЕ «Мій гараж» — змінити не можна без правки kiev. (б) сірий таб авто = САМ .garage_car (column-стек), бо підпис .garage_car_info — sibling імені, обоє мусять бути на одному сірому фоні. .garage_new — окремий flex-sibling .garage_car. */
.garage_my{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;background:transparent;border-radius:0;padding:0;min-height:60px;margin:0 0 40px}
/* зона 1: сірий таб «Мій гараж» (256w, radius лівий) + chevron */
.garage_my_name{flex:0 0 auto;width:256px;display:inline-flex;align-items:center;height:60px;padding:0 44px 0 22px;background:#f0f0f0 url(/img/chevron.svg) no-repeat right 15px center/16px 16px;border-radius:16px 0 0 16px;font-size:16px;font-weight:600;color:var(--ink);box-sizing:border-box;cursor:pointer}
/* FIX9 geom/type-20260608: РЕАЛЬНИЙ DOM (verified live 1440): .garage_my > .garage_my_name + .garage_car(.garage_car_name + .garage_car_info) + .garage_new + .cb.
   .garage_car_info = sibling .garage_car_name ВСЕРЕДИНІ .garage_car (garage.kiev:129 закриває </div> name рано). Тому СІРИЙ ТАБ авто = САМ .garage_car (flex:1, стек ім'я+підпис на сірому), а не .garage_car_name. */
/* зона 2: сірий таб авто per Figma 51:5497 (w750→flex:1, radius правий, стек, chevron ⌄ 51:5498) */
.garage_my .garage_car{flex:1 1 auto;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;min-width:0;height:60px;padding:0 44px 0 16px;background:#f0f0f0;border-radius:0 16px 16px 0;color:var(--ink);cursor:pointer;box-sizing:border-box}
.garage_my .garage_car:after{content:"";position:absolute;right:15px;top:50%;width:16px;height:16px;margin-top:-8px;background:url(/img/chevron.svg) no-repeat 50%/16px;transform:rotate(90deg);pointer-events:none}
/* ім'я авто 14/Medium #1e1e1e (51:5500) — БЕЗ власного сірого фону/пілюлі (фон тепер на .garage_car), просто рядок */
.garage_my .garage_car .garage_car_name{display:block;width:100%;min-width:0;padding:0;background:none;border-radius:0;font-size:14px;font-weight:500;line-height:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.garage_my .garage_car .garage_car_name:after{content:none}
/* підпис авто 12/Regular #616161 (51:5501) — ВСЕРЕДИНІ сірого, під іменем стеком */
.garage_my .garage_car_info{display:block;width:100%;min-width:0;font-size:12px;font-weight:400;line-height:normal;color:#616161;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* зона 3: темна кнопка «Додати авто» 260×60 r16 16/600 #3c3c3c (51:5502) — sibling .garage_car під .garage_my */
.garage_my .garage_new{flex:0 0 auto;display:flex;align-items:stretch;margin-left:20px}
.garage_my .garage_my_add,.garage_my a.add,.garage_new span{display:inline-flex;align-items:center;justify-content:center;width:260px;height:60px;padding:0 22px;border-radius:16px;background:var(--field2);color:#fff;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;box-sizing:border-box}
.garage_my .garage_my_add:hover,.garage_my a.add:hover,.garage_new span:hover{background:var(--orange)}
.garage_my .cb{display:none}

/* #garage_cars/#garage_0 = AJAX-цілі dropdown гаража (garage() їх наповнює) — НЕ ховаємо display:none (зламає JS-розкривайку); вони порожні→0px, на flex-розкладку не впливають (full-width drop під рядком при відкритті) */
.garage_my>#garage_cars,.garage_my>#garage_0{flex-basis:100%;order:9}

/* ---- 2b. ГАРАЖ DROPDOWN .garage_boxs (стан АВТО ВИБРАНО, розкритий список) — donor img/style.css 823-866, перефарбовано під токени remb3 ----
   AJAX-розмітка garage_ajax.kiev see==my: .garage_boxs > .garage_box#garage_box_N > (.garage_next > .garage_car_name + .garage_car_info) + .garage_del(порожній div, хрестик = CSS-фон garage_del.svg).
   Хрестик невидимий доти, доки немає цих правил. Скоуп #garage_cars — щоб НЕ перетекло на принятые страницы (.garage_my .garage_car стан тут НЕ зачіпається: тут .garage_box .garage_car_name — інший контекст). garage_del.svg вже на сервері /img/images/. */
#garage_cars .garage_boxs{border-top:2px solid var(--line);border-left:1px solid var(--line);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:#fff;border-radius:0 0 16px 16px;overflow:hidden}
#garage_cars .garage_box{background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:0}
#garage_cars .garage_next{flex:1;min-width:0;padding:14px 10px 14px 14px;height:69px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:2px;transition:background .2s linear,color .2s linear}
#garage_cars .garage_box .garage_car_name{display:block;min-width:0;font-size:14px;font-weight:500;line-height:20px;color:var(--ink);white-space:normal;overflow-wrap:anywhere;word-break:break-word}
#garage_cars .garage_box .garage_car_info{display:block;min-width:0;font-size:12px;font-weight:400;line-height:normal;color:#616161;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
#garage_cars .garage_del{flex:0 0 48px;width:48px;height:69px;background:#fff url(/img/images/garage_del.svg) no-repeat 50% 50%/26px;cursor:pointer;opacity:.2;transition:opacity .5s linear}
#garage_cars .garage_del:hover{opacity:1}
#garage_cars .garage_next:hover,#garage_cars .garage_next:hover *{background:var(--orange);color:#fff}

/* ---- 3. H1 51:5459 ---- */
/* FIX2 geom-20260608: відступ гараж→H1 70px (Figma garage bottom 444 → H1 514). margin-top на H1 = працює в обох станах гаража (collapse з .garage_my mb40 → max=70; .garage_all mb0 → 70) */
.content h1,.tovar_info h1{font-size:36px;line-height:48px;font-weight:500;color:var(--ink);margin:70px 0 60px;text-align:left}
/* A6 strict-20260609: крошки→H1=50 (Figma y314→y384; contacts/vin/listing/info — h1 СУМІЖНИЙ з .bread). Картку НЕ чіпає: між .bread і h1 гараж → h1 не суміжний → лишається 70. Рівна спец з .content h1 АЛЕ фізично НИЖЧЕ → десктоп виграє 50; на мобайлі media .content h1{margin:40} ще нижче → лишається 40. */
.bread + h1{margin-top:50px}

/* ---- секційні заголовки .name_4 51:5466 ---- */
.name_4{font-size:24px;line-height:36px;font-weight:600;color:var(--ink);margin:0 0 18px}

/* =================================================================
   4. ТОВАРНИЙ БЛОК .tovar_top — 3 зони (Figma):
   [фото 300px (2 ряди)] | [інфо-колонка] | [правий стек: плашка(на всю ширину стека) + Доставка|Оплата]
   ================================================================= */
.tovar_top{display:grid;grid-template-columns:300px minmax(0,300px) minmax(0,620px);gap:30px;align-items:start;margin:0 0 70px}
.tovar_img{grid-row:1 / span 2;width:300px;height:300px;border:1px solid var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:32px;text-align:center}
.tovar_img img{max-width:236px;max-height:236px;width:auto;height:auto;object-fit:contain}
/* §part-noimg START — заглушка-лого на ПУСТОЙ фото-области карточки товара (vda: лого як на drilldown).
   <i> рендериться ТІЛЬКИ коли picture=='' (catalog_prod/car_prod: $img). Товар з фото = <img> → не зачеплено.
   Лого 250:84 (3:1), bg-size з auto → пропорція збережена (ratio 2.976), НЕ розтягнуто. CSS-only, scoped. */
.tovar_img i{display:block;width:100%;height:100%;background:#f5f5f5 url(/img/logo-dark.svg?v2) no-repeat 50%;background-size:200px 67px;border-radius:8px}
/* §part-noimg END */
.tovar_top>.tovar_garage{grid-column:2 / 4;grid-row:1;align-self:start}
.tovar_info{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-width:0}
.tovar_side{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:30px;min-width:0}

/* інфо-колонка: специфікації, ціна, кнопка, «дивитись інші» */
.tovar_rows{display:block}
.tovar_row{display:block}
.tovar_svs{margin:0 0 8px;font-size:14px;line-height:20px}
.tovar_svs span:nth-child(1){color:var(--gray)}
.tovar_svs span:nth-child(2){color:var(--ink)}
.tovar_price{margin:26px 0 0;font-size:14px;color:var(--gray)}
/* FIX6 geom-20260608: вага числа hero-ціни 500 (Figma 51:5504 = Poppins Medium = wght 500, було 600). size 36px незмінний */
.tovar_price span,.tovar_info .tovar_price>span{display:inline-block;font-size:36px;line-height:54px;font-weight:500;color:var(--ink);margin:0}
/* FIX3+FIX4 geom-20260608: hero «Купити» ширина 140px (Figma 51:5562 w140) + відступ ціна→Купити 30px (margin-top 26→30). НЕ зачіпає .tah0/#all_price .buy (текст-лінк) та .pro .buy (88×50) — вони мають власні правила нижче з вищою специфічністю */
.tovar_row .buy,.tovar_info .buy{display:inline-flex;align-items:center;justify-content:center;width:140px;height:60px;padding:0;margin:30px 0 0;border:0;border-radius:16px;background:var(--field2);color:#fff;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .2s}
.tovar_row .buy:hover,.tovar_info .buy:hover{background:var(--orange)}
.tovar_price .ajax,.tovar_info .ajax,span.ajax{display:block;margin:30px 0 0;font-size:16px;line-height:22px;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.tovar_price .ajax:hover,span.ajax:hover{color:var(--orange)}
.tovar_info .text,.tovar_info .ma{font-size:14px;line-height:20px;color:var(--gray);margin:0 0 14px}

/* плашка застосовності .tovar_garage 51:5608 (біла, рамка #ee1e68; warning=рожевий, ок=зелений) */
.tovar_garage{display:flex;align-items:center;min-height:50px;padding:14px 18px;border:1px solid #ee1e68;border-radius:16px;font-size:14px;line-height:20px;font-weight:400;color:#ee1e68;background:#fff;margin:0}
.tg_no{border-color:#ee1e68;color:#ee1e68}
.tg_yes{border-color:#65c856;color:#65c856}

/* Доставка|Оплата side-by-side .tovar_pays > .tovar_p (artkiev_design id=77) 51:5509|5539 */
.tovar_pays{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.tovar_p{box-sizing:border-box;margin:0;padding:25px 30px;background:#fff;border-radius:16px;box-shadow:0 3px 12px rgba(0,0,0,.14)}
.tovar_p .name_4{font-size:24px;line-height:36px;margin:0 0 16px}
.tovar_p span{display:block;position:relative;margin:0 0 16px;padding:0 0 0 32px;font-size:14px;line-height:20px;color:var(--ink);background-repeat:no-repeat;background-size:20px;background-position:0 50%}
.tovar_p span:last-child{margin-bottom:0}
.ico_np{background-image:url(/img/face/ico_np.svg)}
.ico_up{background-image:url(/img/face/ico_up.svg)}
.ico_me{background-image:url(/img/face/ico_me.svg)}
.ico_bank{background-image:url(/img/face/ico_bank.svg)}
.ico_card{background-image:url(/img/face/ico_card.svg)}
.ico_cash{background-image:url(/img/face/ico_cash.svg)}
.ico_on{background-image:url(/img/face/ico_on.svg)}

/* =================================================================
   2-КОЛОНКОВІ ПАРИ .tovar_50 (Всі ціни|Характеристики, Опис|Виробник, Оригінальні|Підійде)
   ================================================================= */
.tovar_50{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin:70px 0 0}
.tovar_50>*{min-width:0}

/* 6a. ТАБЛИЦЯ «ВСІ ЦІНИ» #all_price/.tah0 51:5564 (дані донор) */
.tah0{width:100%;border-collapse:collapse;font-size:16px;line-height:24px;color:var(--ink)}
.tah0 th{background:var(--field2);color:#fff;text-align:left;height:60px;padding:0 16px;font-size:14px;font-weight:600;white-space:nowrap}
.tah0 tr:first-child th:first-child{border-radius:16px 0 0 0}
.tah0 tr:first-child th:last-child{border-radius:0 16px 0 0}
.tah0 td{height:60px;padding:0 16px;border-bottom:1px solid #d1d1d1;background:#fff;font-weight:400;vertical-align:middle}
.tah0 td:last-child{text-align:right}
.tah0 td span{font-weight:400}
/* FIX1 mock3: «Купити» в таблиці цін = текст-лінк (Figma 51:5569) — без рамки/фону/іконки, onClick живий */
.tah0 .buy,#all_price .buy{display:inline;height:auto;width:auto;background:none;border:0;border-radius:0;padding:0;margin:0;font-family:Poppins,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:400;color:var(--ink);cursor:pointer;text-decoration:none}
.tah0 .buy:hover,#all_price .buy:hover{background:none;color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.tah1 tr:nth-child(n+4){display:none}
.prod_prices_all{text-align:center;padding:20px 0;line-height:18px}
.prod_prices_all span{color:var(--orange);border-bottom:1px dashed;cursor:pointer}
.no_price{text-align:center}

/* 6b. ХАРАКТЕРИСТИКИ / 9a. ОРИГ.НОМЕРИ .tovar_har 51:5465 (label|value рядок) */
/* FIX2 mock3: значення у ЛІВІЙ колонці ~x310 (Figma 51:5465/51:5612), НЕ flush-right */
.tovar_har{display:flex;justify-content:flex-start;align-items:center;gap:16px;min-height:60px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:16px;line-height:24px;color:var(--ink)}
.tovar_har span:nth-child(1){flex:0 0 auto;width:278px;max-width:50%;color:var(--gray)}
.tovar_har span:nth-child(2){flex:1 1 auto;color:var(--ink);text-align:left}
.tovar_number .tovar_har span:nth-child(2){font-weight:400}

/* 8a. ОПИС / 8b. ВИРОБНИК */
.tovar_desc .text,.tovar_brand .text{font-size:16px;line-height:24px;color:var(--ink)}
.text h2{font-size:24px;line-height:36px;font-weight:600;color:var(--ink);margin:24px 0 12px}
.tovar_brand img{max-width:200px;max-height:40px;height:auto;margin:0 0 20px}

/* 9b. ПІДІЙДЕ ДО АВТО .mod_other (теги-посилання) 51:5628 */
.tovar_fits .mod_other,.mod_other{display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:0}
.mod_other a,.mod_other span{display:inline;align-items:center;gap:0;padding:0;font-family:Poppins,Arial,sans-serif;font-weight:400;font-size:16px;line-height:24px;color:var(--ink);text-decoration:none;background:none;cursor:pointer;white-space:nowrap}
.mod_other a:hover,.mod_other span:hover,.mod_other a:active,.mod_other span:active{text-decoration:underline;color:var(--orange)}
.mod_other2 span img,.mod_other2 a img{display:none}

/* =================================================================
   7. АНАЛОГИ .prods > .pro 53:752 (донор prod()) — 3-сітка
   ================================================================= */
#analogs{margin-top:70px}
.prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:24px 0 0}
/* VIRTUS gold-standard: ЧИСТИЙ ПОТІК, 0 absolute. DOM-порядок із ядра prod(): img→name→info(desc→price→term→buy). */
.pro{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 25px 25px;transition:box-shadow .2s}
.pro:hover{box-shadow:0 8px 20px rgba(0,0,0,.08)}
.pro .pro_img{display:flex;align-items:center;justify-content:center;height:280px;padding:25px;box-sizing:border-box;overflow:hidden}
.pro .pro_img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.pro a.pro_name,.pro .pro_name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:48px;font-size:16px;font-weight:600;line-height:24px;color:var(--ink);text-decoration:none;word-break:break-word}
.pro a.pro_name:hover{color:var(--orange)}
.pro .pro_info{display:flex;flex-direction:column;flex:1 1 auto;padding:6px 0 0}
.pro .pro_info>a:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}
.pro .pro_info>a,.pro .pro_info>span{font-size:14px;line-height:20px;color:var(--ink)}
.pro .pro_price{margin:30px 0 0;font-size:22px;font-weight:600;color:var(--ink)}
.pro .pro_price span{font-size:22px;font-weight:600;color:var(--ink)}
.pro .pro_term{margin:14px 0 0;font-size:12px;line-height:18px;color:var(--ink)}
.pro .pro_term strong{color:var(--ink);font-weight:400}
.pro .buy,.pro a.abuy{align-self:flex-end;margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-width:86px;height:50px;padding:0 16px;border:0;border-radius:16px;background:var(--field2);color:#fff;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .2s}
.pro .buy:hover,.pro a.abuy:hover{background:var(--orange)}

/* =================================================================
   МОБАЙЛ — h-scroll=0 на ВСІХ bp. Брейки 1280/1024/768/610/470/390/350.
   ================================================================= */

/* ≤1280: товарний → фото+інфо ряд, плашка над, Доставка|Оплата під ними */
@media (max-width:1280px){
  .tovar_top{grid-template-columns:300px minmax(0,1fr);gap:30px}
  .tovar_top>.tovar_garage{grid-column:1 / -1;grid-row:1}
  .tovar_img{grid-column:1;grid-row:2}
  .tovar_info{grid-column:2;grid-row:2}
  .tovar_side{grid-column:1 / -1;grid-row:3}
  .tovar_pays{grid-template-columns:1fr 1fr}
}

/* ≤1024: аналоги лишаємо 3, картки тягнуться під контейнер; фото-картки квадрат */
@media (max-width:1024px){
  .prods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pro .pro_img{height:auto;aspect-ratio:1/1}
}

/* ≤768: всі 2-колонки → стопка; товарний → стопка; Доставка|Оплата → стопка; аналоги 2 кол */
@media (max-width:768px){
  .content h1,.tovar_info h1{font-size:30px;line-height:38px;margin:40px 0 40px}
  .name_4{font-size:22px;line-height:30px}
  .tovar_top{grid-template-columns:1fr;gap:24px}
  .tovar_img,.tovar_info,.tovar_side,.tovar_top>.tovar_garage{grid-column:1}
  .tovar_img{grid-row:1}
  .tovar_top>.tovar_garage{grid-row:2}
  .tovar_info{grid-row:3}
  .tovar_side{grid-row:4}
  .tovar_img{width:300px;max-width:100%;margin:0}
  .tovar_side{gap:24px}
  .tovar_pays{grid-template-columns:1fr;gap:20px}
  .tovar_p{width:100%}
  .tovar_50{grid-template-columns:1fr;gap:40px;margin:50px 0 0}
  .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  /* FIX9 моб: garage_my селект-стан стопкою (256+flex+260 не влазить) — таб «Гараж» зверху, сірий таб авто (стек ім'я+підпис), кнопка знизу; БЕЗ h-scroll */
  .garage_my{flex-direction:column;align-items:stretch;gap:12px}
  .garage_my_name{width:100%;border-radius:16px}
  .garage_my .garage_car{width:100%;border-radius:16px;height:auto;min-height:56px;padding:10px 44px 10px 16px}
  .garage_my .garage_new{margin-left:0}
  /* dropdown гаража на моб: стопка 1 колонка (donor mobile display:block); хрестик лишається видимим/клікабельним */
  #garage_cars .garage_boxs{grid-template-columns:1fr}
  #garage_cars .garage_box{border-right:0}
  .garage_my .garage_my_add,.garage_my a.add,.garage_new span{width:100%}
}

/* ≤610: заголовки менші, фото на всю ширину, гараж у стовпчик */
@media (max-width:610px){
  .content h1,.tovar_info h1{font-size:28px;line-height:38px}
  .name_4{font-size:20px;line-height:28px}
  .tovar_img{width:100%;height:auto;aspect-ratio:1/1}
  .tovar_price span,.tovar_info .tovar_price>span{font-size:30px;line-height:44px}
  /* garage_my вже стопкою з ≤768; тут лише дрібний поліш таба «Гараж» */
  .garage_my_name{padding:0 44px 0 16px}
}

/* ≤470: аналоги 2→1; «Всі ціни» → картки label/value БЕЗ h-scroll; .tovar_har стопка */
@media (max-width:470px){
  .prods{grid-template-columns:1fr}
  /* таблиця цін → стопка карток (рядок-шапку ховаємо, td = flex label|value) */
  .tah0,.tah0 tbody,.tah0 tr,.tah0 td{display:block;width:100%;box-sizing:border-box}
  .tah0 tr:first-child{display:none}
  .tah0 tr{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:6px 12px;background:#fff;overflow:hidden}
  .tah0 td{display:flex;align-items:center;gap:6px;height:auto;min-height:0;padding:8px 0;border-bottom:1px solid var(--line);text-align:right}
  .tah0 td:last-child{border-bottom:0;justify-content:flex-end}
  .tah0 td:before{content:attr(data-label);color:var(--gray);font-weight:400;text-align:left;margin-right:auto}
  .tah0 .buy{width:100%;justify-content:center;background:var(--field2);color:#fff;border:0}
  .tah0 .buy:hover{background:var(--orange);color:#fff}
  /* характеристики/оригінальні → label над value */
  .tovar_har{flex-wrap:wrap;gap:2px;min-height:0;padding:10px 0}
  .tovar_har span:nth-child(1),.tovar_har span:nth-child(2){width:100%;text-align:left}
}

/* ≤390: дрібний поліш */
@media (max-width:390px){
  .content h1,.tovar_info h1{font-size:24px;line-height:32px}
  .tovar_price span,.tovar_info .tovar_price>span{font-size:30px;line-height:44px}
  .tovar_img{padding:24px}
  .tovar_row .buy,.tovar_info .buy{width:100%}
}

/* ≤350: міні + guard довгих токенів (PHP-warning шляхи/артикули) проти h-scroll */
@media (max-width:350px){
  .content h1,.tovar_info h1{font-size:22px;line-height:30px}
  .tovar_p{padding:20px}
  .content b,.tovar_number,.tovar_har,.text,.pro a.pro_name,.pro .pro_name{overflow-wrap:anywhere;word-break:break-word}
}


/* =================================================================
   §11 ЛІСТИНГ КАТЕГОРІЇ (car_catalog.kiev) — СТРУКТУРА = верстка rembaza3/listing (Figma 51:2512).
   DOM донора: .prods.cat_prods > .pro (.pro_name/.pro_img/.pro_info{.pro_desc/.pro_price/.pro_stock/.pro_term/.abuy}),
   .pro.pro--oos>.no_price>.abuy--oos, .pagination, .models#models>.mod_rows.
   СКОУП під .cat_prods / #models / .pagination — НЕ зачіпає §10 .prods .pro (аналоги картки 3-кол).
   Картка #fff r16 shadow; кнопка #f95203 86×50; OOS border --line; бренд-картка 256×240; пагінація underline #1e1e1e.
   Мобайл одразу: h-scroll=0 на всіх bp (1280/1024/768/610/470/350), картка→потік на вузьких.
   ================================================================= */

/* хлібні крошки листинга (донор .bread вже стилізований у §10/глоб — листинг не дублює) */

/* ---- ПІДЗАГОЛОВОК-ПОМІЧНИК (51:2658) над гаражом ---- */
.lead{font-size:16px;line-height:24px;color:var(--ink);margin:0 0 24px}

/* ДОНОР-ЕМІТ ЗАГОЛОВКІВ ЛІСТИНГУ: car_catalog кладе .name_2 (заголовки секцій «Популярні товари…» / «Ми продаємо…»)
   та .name_s (підзаголовок-помічник під H1). Канон-класи .models_title/.lead донор НЕ емітить → хук на реальні класи.
   .name_2/.name_s існують ТІЛЬКИ на листингу (на home/card 0) → голий клас безпечний. */
.name_2{font-size:36px;line-height:48px;font-weight:500;color:var(--ink);margin:60px 0 24px}
.name_2:first-of-type{margin-top:40px}
.name_s{font-size:16px;line-height:24px;font-weight:400;color:var(--ink);margin:12px 0 24px}

/* ============ СІТКА ТОВАРІВ .prods.cat_prods — 4 колонки ============ */
.cat_prods{display:grid !important;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:26px 27px;margin-top:40px}

/* ============================================================
   КАРТКА .cat_prods .pro — VIRTUS GOLD-STANDARD: ЧИСТИЙ ПОТІК, 0 position:absolute.
   DOM із ядра prod(): pro_img → pro_name(бренд+артикул) → pro_info(опис → ціна → термін → кнопка).
   Висота з вмісту (НЕ фікс 530); фікс-зони тексту (імʼя 2р/48, опис 2р/40) тримають елементи на одному Y.
   Figma 51:3019: фото 300, імʼя y320, опис y354, ціна y420, наявність y460, термін y482, кнопка y423.
   ============================================================ */
.cat_prods .pro{display:flex;flex-direction:column;background:#fff;border:0;border-radius:16px;overflow:hidden;padding:0;
     box-shadow:0 3px 12px rgba(0,0,0,.14);transition:box-shadow .15s ease}
.cat_prods .pro:hover{box-shadow:0 8px 20px rgba(0,0,0,.16)}

/* ФОТО квадратна зона = ширині картки (Figma 300×300@300); картинка вписана object-fit (різні форми) */
.cat_prods .pro .pro_img{width:100%;aspect-ratio:1/1;height:auto;display:flex;align-items:center;justify-content:center;padding:25px;box-sizing:border-box}

/* НАЗВА (51:3022) бренд+артикул 16/24 600, фікс 2 рядки (артикул видно), бок.поле 25, gap від фото 20 */
.cat_prods .pro .pro_name,.cat_prods .pro a.pro_name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
          min-height:48px;line-height:24px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;
          padding:0 25px;margin:20px 0 0;word-break:normal}
.cat_prods .pro .pro_name:hover,.cat_prods .pro a.pro_name:hover{color:var(--orange)}

/* .pro_info — потік, бок.поле 25, низ 25, тягнеться (flex:1) щоб кнопка прижалась донизу */
.cat_prods .pro .pro_info{display:flex;flex-direction:column;flex:1 1 auto;position:static;padding:10px 25px 25px}

/* ОПИС (51:3023) донор кладе як .pro_info > a БЕЗ класу — перший <a>. 14/20 фікс 2 рядки */
.cat_prods .pro .pro_info>a:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
          min-height:40px;line-height:20px;font-size:14px;font-weight:400;color:var(--ink);text-decoration:none}
.cat_prods .pro .pro_info>a:first-child:hover{color:var(--orange)}

/* ЦІНА (51:3024) 22/32 600 — у потоці, gap від опису ~30 (y354+40опис→y420) */
.cat_prods .pro .pro_price{margin:30px 0 0;font-size:22px;line-height:32px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat_prods .pro .pro_price span{font-size:22px;font-weight:600;color:var(--ink)}

/* «В наявності» (51:3025) — prod() НЕ емітить окремий елемент (ядро не чіпаємо).
   Дефолт-візуал через ::before на .pro_term (рядок НАД «Срок поставки», у потоці). Реальне значення → BACKEND-TODO. */
.cat_prods .pro .pro_term::before{content:"В наявності";display:block;margin-bottom:2px;
  font-size:12px;line-height:18px;font-weight:400;color:#16a34a;white-space:nowrap}
.cat_prods .pro--oos .pro_term::before{content:none}

/* «Срок поставки:» (51:3026) 12/18 — у потоці, gap від ціни ~10 (y420+32→y460наявність→y482термін) */
.cat_prods .pro .pro_term{margin:10px 0 0;font-size:12px;line-height:18px;font-weight:400;color:var(--gray);white-space:nowrap}
.cat_prods .pro .pro_term strong{font-weight:400;color:var(--ink)}

/* КНОПКА «Купити» (51:3027) #3c3c3c 86×50 r16, hover --orange. У потоці, прижата ДОНИЗУ (margin-top:auto), справа */
.cat_prods .pro .abuy,.cat_prods .pro a.abuy{align-self:flex-end;margin-top:auto;width:86px;min-width:86px;height:50px;padding:0;display:inline-flex;align-items:center;justify-content:center;
      background:#3c3c3c;color:#fff;font-size:14px;line-height:20px;font-weight:600;border-radius:16px;border:0;transition:background .15s ease}
.cat_prods .pro .abuy:hover,.cat_prods .pro a.abuy:hover{background:var(--orange)}

/* ---- OOS-картка (51:3069): рамка замість тіні, кнопка «Уточнити наявність» (теж у потоці) ---- */
.cat_prods .pro--oos,.cat_prods .pro:has(.no_price){box-shadow:none;border:1px solid var(--line)}
.cat_prods .pro:has(.no_price) .pro_term::before{content:none}
.cat_prods .pro:has(.no_price) .pro_price,.cat_prods .pro:has(.no_price) .pro_term{display:none}
.cat_prods .pro:has(.no_price) .no_price,.cat_prods .pro--oos .no_price{margin-top:auto;display:flex;justify-content:center}
/* OOS-кнопка (донор: .no_price>button[cars_un], БЕЗ класу) = bordered pill (Figma 51:4587: 250x50/#fff/border1px--line/r16/--gray/SemiBold14 lh20/центр; bottom24 = padding-bottom .pro_info 25). width:100% = повна ширина контенту картки (як прийняті .shop_right/.shop_part_sim) */
/* OOS-pill базова основа (DRY: спільні 8 властивостей 5 скоупів cat_prods/shop_right/shop_part_sim/l-find/tovar_info) */
.no_price button{background:#fff;border:1px solid var(--line);border-radius:16px;color:var(--gray);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s}
.no_price button:hover{border-color:var(--orange);color:var(--orange)}
.cat_prods .pro .no_price button{width:100%;min-width:0;height:50px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-family:Poppins,Arial,sans-serif;line-height:20px}
/* FIX2 spisokoos: §11 кнопка «Купити» fs 16->14 (Figma §11). Scoped .cat_prods — generic .pro .buy лишається 16 */
.cat_prods .pro .buy{font-size:14px}

/* ============ ПАГІНАЦІЯ (51:3012, донор .pagination) ============ */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;margin-top:48px;
            font-size:16px;line-height:22px;color:var(--ink)}
.pagination a,.pagination span,.pagination strong{display:flex;align-items:center;justify-content:center;min-width:22px;height:24px;font-weight:400}
.pagination a{color:var(--ink);text-decoration:none}
.pagination a:hover{color:var(--orange)}
.pagination span{color:var(--ink);text-decoration:underline;text-underline-offset:3px} /* активна сторінка */
.pagination strong{color:var(--ink);font-weight:400}
/* стрілки prev/next з ТЕКСТ-ЛЕЙБЛАМИ (Figma 51:3012/3013): ← Попередня сторінка … числа … Наступна сторінка →
   Маркап донора: <b class=p_left></b> (disabled стр.1) / <a class=p_right></a> — порожні → лейбл+стрілка через ::before/::after */
.pagination .p_left,.pagination .p_right{width:auto;height:24px;flex:0 0 auto;display:flex;align-items:center;gap:8px;cursor:pointer;background:none;font-size:16px;line-height:22px;font-weight:400;text-decoration:none}
.pagination .p_left::before,.pagination .p_right::after{content:"";width:24px;height:24px;flex:0 0 24px;
  -webkit-mask:url(/img/arrow-pag.svg) center/24px no-repeat;mask:url(/img/arrow-pag.svg) center/24px no-repeat;background:currentColor}
/* prev: стрілка ← (rotate180) ПЕРЕД текстом. На стр.1 .p_left=<b> disabled #e0e0e0 */
.pagination .p_left::before{transform:rotate(180deg)}
.pagination .p_left::after{content:"Попередня сторінка"}
.pagination .p_left{color:var(--ink);margin-right:auto}
.pagination b.p_left{color:var(--line);cursor:default} /* стр.1 prev disabled */
/* next: текст ПОТІМ стрілка → */
.pagination .p_right::before{content:"Наступна сторінка"}
.pagination .p_right{color:var(--ink);margin-left:auto}
.pagination .p_right:hover,.pagination a.p_left:hover{color:var(--orange)}
.pagination{justify-content:flex-start}

/* ============ БРЕНД-КАРТКИ #models (51:2741, донор .models > .mod_rows) — 256×240 ============ */
#models.models{position:relative}
.models_title{font-size:36px;line-height:48px;font-weight:500;color:var(--ink);margin:60px 0 24px}

/* .mod_rows = тайл MiniMasonry (position:absolute, left/top — inline від JS, ДОНОР-механіка, НЕ чіпати).
   height:240 + overflow:hidden → донор емітить N моделей (Audi=21), зайві КЛІПАЮТЬСЯ за 240px (видно ~4-5),
   БЕЗ наїзду. padding під .marka(top23,h40) → моделі стартують ~top85 у ПОТОЦІ (НЕ per-slot absolute). */
#models .mod_rows{position:absolute;height:240px;padding:23px 41px 0 23px;background:#fff;overflow:hidden}
/* .marka у потоці зверху (НЕ absolute) — моделі йдуть ПІД нею */
#models .mod_rows .marka{display:flex;align-items:flex-start;gap:26px;margin-bottom:22px}
#models .mod_rows .marka img{width:40px;height:40px;flex:0 0 40px;object-fit:contain}
#models .mod_rows .marka span{font-size:16px;line-height:22px;font-weight:400;color:var(--ink);overflow-wrap:anywhere}
/* шеврон › (51:2745) right17 top35 — лишається абсолютом до тайла */
#models .mod_rows::after{content:"";position:absolute;right:17px;top:35px;width:16px;height:16px;
  background:url(/img/arrow-card.svg) center/16px no-repeat}
/* список моделей (51:2747) 14/30 — НОРМАЛЬНИЙ ПОТІК (block), ПІД .marka. Зайві клипаються overflow:hidden тайла */
#models .mod_rows>a:not(.mod_all){display:block;font-size:14px;line-height:30px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
#models .mod_rows>a:not(.mod_all):hover{color:var(--orange)}
/* «Показати всі» (51:2751) 14/20 #1e1e1e + шеврон ∨ 16×16 (Figma top191).
   ЗАКРИТО: тайл height:240 overflow:hidden, .mod_all абсолютом унизу (top191 у Figma) над клипом, фон-плашка ховає обрізані рядки.
   ВІДКРИТО (.mod_open): тайл height:auto, .mod_all у ПОТОЦІ в кінці, шеврон ∨→∧ (rotate -90). JS зве masonry.layout() → перетил без наїзду. */
#models .mod_rows .mod_all{position:absolute;left:0;right:0;bottom:0;padding:16px 23px 29px;width:auto;display:flex;align-items:center;gap:8px;
                   font-size:14px;line-height:20px;color:var(--ink);white-space:nowrap;text-decoration:none;cursor:pointer;
                   background:#fff}
#models .mod_rows .mod_all::after{content:"";width:16px;height:16px;flex:0 0 16px;
  background:url(/img/chevron.svg) center/16px no-repeat;transform:rotate(90deg);transition:transform .15s ease}
#models .mod_rows .mod_all:hover{color:var(--orange)}
/* ВІДКРИТО: тайл росте, шеврон ∧, лінк у потоці */
#models .mod_rows.mod_open{height:auto;overflow:visible;padding-bottom:23px;z-index:10;box-shadow:0 8px 24px rgba(0,0,0,.15);border-radius:16px;background:#fff}
#models .mod_rows.mod_open .mod_all{position:static;left:auto;right:auto;bottom:auto;padding:14px 0 0;background:none}
#models .mod_rows.mod_open .mod_all::after{transform:rotate(-90deg)}

/* ============ §11 АДАПТИВ (1280/1024/768/610/470/350) ============ */
@media (max-width:1280px){
}
@media (max-width:1024px){
  .cat_prods{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media (max-width:768px){
  .cat_prods{grid-template-columns:repeat(2,1fr);gap:20px}
  .pagination{gap:12px}
}
@media (max-width:610px){
  .cat_prods{grid-template-columns:repeat(2,1fr);gap:14px}
  /* МОБ-ПАГІНАЦІЯ (донор-патерн allzap-template:3903): лейбли стрілок не влазять (180+168px) →
     ховаємо CSS-тексти стрілок + номери-лінки + "...", лишаємо ← [тек.стор.] → по центру 1 рядком */
  .pagination{flex-wrap:nowrap;justify-content:center;gap:24px}
  .pagination .p_left::after{content:""}
  .pagination .p_right::before{content:""}
  .pagination a:not(.p_left):not(.p_right){display:none}
  .pagination strong{display:none}
  .pagination .p_left{margin-right:0}
  .pagination .p_right{margin-left:0}
}
@media (max-width:470px){
  /* СТРУКТУРА ТА Ж (потік із десктопа); моб = лише менші паддинги + кнопка full-width */
  .cat_prods .pro .pro_img{padding:16px}
  .cat_prods .pro .pro_name,.cat_prods .pro a.pro_name{padding:0 16px}
  .cat_prods .pro .pro_info{padding:10px 16px 16px}
  .cat_prods .pro .abuy,.cat_prods .pro a.abuy{align-self:stretch;width:100%;min-width:0;margin-top:12px}
}
@media (max-width:350px){
  .cat_prods{grid-template-columns:1fr}
}
/* §11 END */
/* =================================================================
   §7.3 INFO (стаття / інфо-сторінка) — core/pages.kiev (Figma 51:1903).
   Нові класи: info__hero / text__lead / text__row|col|img / списки.
   .bread / .content h1 / .text h2 / .text p — ВЖЕ на live, не дублюються.
   Токени: --ink --orange --line --gray (live: --gray=#7e7e7e). Hero-підложка --line.
   Скоуп info: правила інтервалу h1/CTA через .info__hero (є тільки на info).
   ================================================================= */
.info__hero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:500px;overflow:hidden;background:var(--line);margin-bottom:60px}
.info__hero-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:var(--line)} /* C6: broken 404 photo = clean --line fill (reuse .pop_cats img pattern), alt empty -> no glyph; real asset = BACKEND-TODO */

/* hero є → h1 не подвоює верт.зазор (live .content h1 margin-top 70 → 0): hero(mb60)→h1 = 60 (Figma) */
.info__hero + .content h1{margin-top:0}

.text .text__lead{font-size:16px;font-weight:400;line-height:24px;color:var(--ink);margin:0 0 50px}

.text__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;margin-bottom:50px}
.text__row:last-child{margin-bottom:0}
.text .text__img{width:100%;height:340px;object-fit:cover;border-radius:16px;display:block;margin:0}
.text__col{display:flex;flex-direction:column;gap:24px}
.text .text__col p{margin:0;font-size:16px;font-weight:400;line-height:24px;color:var(--ink)}

/* списки статті (немає в ноді — числа з токенів): 16/24 --ink, маркер --orange */
.text ul,.text ol{margin:0 0 24px;padding-left:24px}
.text ul li,.text ol li{font-size:16px;font-weight:400;line-height:24px;color:var(--ink);margin-bottom:8px}
.text ul li::marker{color:var(--orange)}
.text ul li:last-child,.text ol li:last-child{margin-bottom:0}

/* повітря тіло статті → full-bleed CTA (Figma 120). Скоуп: тільки info (hero перед .content) */
.info__hero + .content .text{padding-bottom:120px}

@media (max-width:1280px){.text .text__img{height:300px}}
@media (max-width:1024px){.text .text__img{height:260px}}
@media (max-width:768px){
  .info__hero{height:280px;margin-bottom:40px}
  .text .text__lead{margin-bottom:36px}
  .text__row{grid-template-columns:1fr;gap:20px;margin-bottom:36px}
  .text .text__img{height:240px}
  .info__hero + .content .text{padding-bottom:60px}
}
@media (max-width:610px){.info__hero{height:240px}}
@media (max-width:470px){
  .info__hero{height:200px;margin-bottom:30px}
  .text .text__img{height:200px}
  .text__row{margin-bottom:30px}
  .text .text__lead{margin-bottom:30px}
}
@media (max-width:350px){.info__hero{height:180px}.text .text__img{height:180px}}

/* ============================================================
   КОНТАКТИ (CSS-скін донорського DOM, Figma 51:1622)
   3 колонки → іконки рядків → карта full-bleed
   PRAVKA-4: §contacts ПЕРЕВІШЕНО на ФАКТИЧНІ класи донор-DOM
   (.contact_rows > .item > .name + .city/.phone/.mail), бо $rowpage['small']
   емітить саме їх; старий скін бив у неіснуючі .contact_row/.ks/address/.time.
   Геометрія Figma 51:1622: 3 рівні колонки крок ~327, заголовок 24/36 SemiBold,
   рядки 16/24 Regular, іконка 20×20 + текст +30, крок рядків 34, заголовок→рядки 60.
   ============================================================ */
.contact_rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:27px;row-gap:40px;margin:0 0 50px;align-items:start}
/* блок соцмереж не у макеті → ховаємо (оборотно, donor DOM не чіпаємо) */
.contact_rows .contact_row:has(.social){display:none}
/* колонка контакту */
.contact_rows .item{min-width:0}
/* заголовок колонки (label .name) — 24/36 Poppins SemiBold #1e1e1e, зазор до рядків 60 */
.contact_rows .item .name{font-family:Poppins,Arial,sans-serif;font-size:24px;line-height:36px;font-weight:600;color:#1e1e1e;margin:0 0 60px}
/* рядки контенту: іконка 20×20 ліворуч, текст +30, крок рядків 34 (16/24 Regular #1e1e1e) */
.contact_rows .item .city,
.contact_rows .item .phone a,
.contact_rows .item .mail a{
  position:relative;display:block;
  padding-left:30px;min-height:20px;
  font-family:Poppins,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#1e1e1e;
  text-decoration:none;font-style:normal;
  margin:0 0 10px}
.contact_rows .item .phone a,
.contact_rows .item .mail a{margin-bottom:10px}
.contact_rows .item .city + *,
.contact_rows .item .phone a + a,
.contact_rows .item .mail a + a{margin-top:0}
.contact_rows .item .phone a:hover,
.contact_rows .item .mail a:hover{color:var(--orange)}
/* крок рядків 34px = 24 line-height + 10 margin */
.contact_rows .item .city::before,
.contact_rows .item .phone a::before,
.contact_rows .item .mail a::before{
  content:"";position:absolute;left:0;top:2px;
  width:20px;height:20px;background:center/20px no-repeat}
/* адреса → pin, телефон → phone, пошта → mail (скоуп value-класом) */
.contact_rows .item .city::before{background-image:url(/img/ic-pin.svg?v=figicon)}
.contact_rows .item .phone a::before{background-image:url(/img/ic-phone.svg?v=figicon)}
.contact_rows .item .mail a::before{background-image:url(/img/ic-mail.svg?v=figicon)}

/* карта full-bleed на всю ширину вікна, h:400 */
.maps{margin:0}
.maps .name_4{font-size:24px;line-height:36px;margin:0 0 50px}
.maps iframe{display:block;width:100vw;height:400px;border:0;margin-left:calc(50% - 50vw)}
/* contacts-scoped: карта full-bleed → CTA встик (Figma 51:1622, 0px). Б'є ТІЛЬКИ contacts (.maps лише тут); глоб .cta margin-top:80 НЕ зачеплено */
.content:has(.maps) + .cta{margin-top:0}
/* запобіжник h-scroll від скролбару при 100vw */
body{overflow-x:clip}

/* ---- мобайл: 3 колонки → стопка ---- */
@media (max-width:768px){
  .contact_rows{grid-template-columns:1fr;row-gap:32px;margin-bottom:40px}
  .contact_rows .item .name{font-size:22px;line-height:30px;margin-bottom:24px}
  .maps iframe{height:320px}
}
@media (max-width:470px){
  .contact_rows{row-gap:26px}
  .maps iframe{height:260px}
}

/* ===== §vin — сторінка запиту по VIN (Figma 51:1123). Скоуп .vin-page/.vin_form ===== */
.vin_form{margin-bottom:80px}
/* секційні заголовки форми (перебивають глобальний .name_4 ТІЛЬКИ всередині форми) */
.vin-page .name_4{font-size:18px;line-height:24px;font-weight:600;color:var(--ink);text-transform:uppercase;margin:40px 0 24px}
.vin-page .name_4:first-child{margin-top:0}
/* ряди полів */
.vin-page .vin_rows{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
/* базовий вигляд поля: input/textarea з class inp_1 + span.inp_1 (обгортка select) */
.vin-page .inp_1{box-sizing:border-box;height:50px;background:#fff;border:1px solid var(--line);border-radius:16px;font-size:14px;color:var(--ink);font-family:inherit}
.vin-page input.inp_1{padding:0 15px}
.vin-page textarea.inp_1{width:100%;max-width:820px;height:100px;padding:12px 15px;line-height:1.4;resize:vertical;display:block}
/* span.inp_1 = обгортка select: сам бордер на span, select прозорий усередині */
.vin-page span.inp_1{padding:0;display:flex;align-items:center;overflow:hidden}
.vin-page span.inp_1 select{width:100%;height:48px;border:0;background:transparent;padding:0 15px;font-size:14px;color:var(--ink);font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
/* placeholder сірий */
.vin-page input.inp_1::placeholder,.vin-page textarea.inp_1::placeholder{color:#9f9f9f;opacity:1}
/* focus — помаранчевий бордер */
.vin-page input.inp_1:focus,.vin-page textarea.inp_1:focus,.vin-page span.inp_1:focus-within{border-color:var(--orange);outline:0}
/* ширини полів авто-ряду — фікс-ширини (Figma 51:1123): VIN 400 | Марка 300 | Модель 300 | Рік 110.
   Ряд justify-flex-start (трейлінг-зазор справа, НЕ на всю ширину контенту); БЕЗ flex-grow на VIN. */
.vin-page .vin_rows_auto{justify-content:flex-start}
.vin-page .vin_vin{flex:0 1 400px;min-width:0}
.vin-page .vin_marka{flex:0 1 300px;min-width:0}
.vin-page .vin_model{flex:0 1 300px;min-width:0}
.vin-page .vin_god{flex:0 0 110px;min-width:0}
/* особистий ряд: 3 поля по ~400 */
.vin-page .vin_rows_user .inp_1{flex:1 1 400px;min-width:0}
/* кнопка */
.vin-page .c{margin-top:24px}
.vin-page .send{box-sizing:border-box;height:60px;min-width:250px;padding:0 32px;background:#3c3c3c;color:#fff;border:0;border-radius:16px;font-size:16px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}
.vin-page .send:hover{background:var(--orange)}
/* ---- мобайл: ряди → стопка ---- */
@media (max-width:768px){
  .vin-page .vin_rows{flex-direction:column;gap:16px}
  .vin-page .vin_rows .inp_1{flex:1 1 auto;width:100%}
  .vin-page .vin_god{flex:1 1 auto;width:100%}
  .vin-page textarea.inp_1{max-width:none}
  .vin-page .name_4{font-size:17px;margin:32px 0 20px}
  .vin_form{margin-bottom:48px}
}
@media (max-width:470px){
  .vin-page .send{width:100%;min-width:0}
}

/* ============================================================
   §MARKA (марка → моделі, Figma 51:2126) — НОВІ блоки.
   Селектор = ДОНОРСЬКИЙ $garage_print (.garage_all/.garage_alls, та сама функцiя, що home).
   Стан = як HOME: таб «Марка» активний, #garage_in = грид брендів (донор garage_marki/.step0).
   Грид брендів = САМА панель гаража #garage_in .step0 (донор-функція, скін §garage CSS 124-162,
   Figma 51:2334/51:2273) — окремого статичного гриду нема (дубль .brands_tbl прибрано).
   Каскад живий: клік по бренду → garage2 → моделі → каскад (core.js AJAX).
   H1/.name_s/.bread = РЕЮЗ глоб; H2 = .name + скоуп .marka_h2 (зазори).
   .marka_models/.model_card — карточки моделей нижче (marka-специфіка).
   Скоуп .marka_models (НЕ .models — той матчить #models листинга 51:2741 → регресія).
   0 absolute — лише потік. Токени --ink/--orange/--line/--light.
   ============================================================ */

/* зазор .name_s→селектор = 40. Скін табів + активний таб (garage_active) + грид брендів
   (#garage_in .step0) = §garage CSS 124-162 (НЕ дублюємо). Донор-функцію не підмінюємо. */
.car_select{margin-top:40px}

/* H2 (.name) — скоуп зазорів marka: панель брендів(bottom)→H2 = 70, H2→грид = (margin .marka_models) */
.marka_h2{margin:70px 0 0}

/* грид моделей (51:2355 / hover 51:2437): 4 колонки gap27 X+Y, карточка 300x220 r16 фон #fff (без тіні/бордера).
   потік-колонка: фото-зона 190x130 центр-гориз top18 object-fit:cover + назва SemiBold18 center фікс-зона знизу.
   .marka_models (НЕ .models — щоб не зачепити #models листинга). H2→грид = 56. */
.marka_models{display:grid;grid-template-columns:repeat(4,1fr);gap:27px;margin-top:56px}
.model_card{display:flex;flex-direction:column;align-items:center;height:220px;background:#fff;border-radius:16px;overflow:hidden;padding-top:18px;text-decoration:none}
.model_img{width:190px;max-width:100%;height:130px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.model_img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.model_name{flex:1;width:100%;display:flex;align-items:center;justify-content:center;padding:7px 12px 0;font-size:18px;line-height:24px;font-weight:600;color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.model_card:hover{box-shadow:0 3px 12px 0 rgba(0,0,0,.14)}
.model_card:hover .model_name{text-decoration:underline}

/* зазор грид моделей→CTA = 100 (CTA $help має власний margin-top:80 → +20 padding = 100) */
.marka_bg{padding-bottom:20px}

/* §marka мобайл (моб-макета нема — Слой-1: gap>0, фікс-зона імені, h-scroll=0) */
@media (max-width:1024px){
  .marka_models{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  .marka_models{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:470px){
  .marka_models{gap:16px}
  .model_name{font-size:16px;line-height:22px;padding-left:6px;padding-right:6px}
}

/* ============================================================
   §shop — УНІВЕРСАЛЬНІ КАТАЛОГИ (catalog_cat.kiev, Figma 51:873)
   Грид категорій .pop_cats + текст-блок .text (реюз §7.3 WYSIWYG).
   .pop_cats = СПІЛЬНИЙ грид (shop + model car_linia): 5 кол, картка 240×290.
   Розмітка донора <a><img>name</a> НЕ змінена — скін через .pop_cats>a (grid 200/90).
   Зазори Figma: bread→H1=50(глоб .bread+h1), H1→грид=60(глоб h1 mb), грид→H2=70, H2→body=60.
   ============================================================ */
.pop_cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;margin:0 0 70px}
/* картка: grid 2 ряди (фото 200 / ім'я-зона 90), ім'я = анонім текст-вузол центр у 2-му ряду */
/* текст-вузол імені (нема елемента) → 2-й ряд: центр через align-items картки + padding на a (фото bleeds -23 до рамки) */
.pop_cats>a{display:grid;grid-template-rows:200px 90px;height:290px;background:#fff;border-radius:16px;box-shadow:0 3px 12px rgba(0,0,0,.14);overflow:hidden;text-decoration:underline;text-align:center;align-items:center;color:#1e1e1e;font-family:Poppins,Arial,sans-serif;font-size:18px;line-height:24px;font-weight:600;transition:box-shadow .15s ease}
.pop_cats>a>img{grid-row:1;align-self:center;justify-self:center;max-width:100%;max-height:180px;width:auto;height:auto;object-fit:contain;display:block}
.pop_cats>a:hover{box-shadow:0 6px 18px rgba(0,0,0,.18);text-decoration:underline}

/* текст-блок shop: грид→H2=70 (.pop_cats mb70), H2→body=60 */
main .content .text>h2:first-child{margin-top:0;margin-bottom:60px}

/* §shop адаптив (моб-макета нема — Слой-1: рівна висота карток, фікс-зона імені, gap>0, h-scroll=0) */
@media (max-width:1280px){.pop_cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){.pop_cats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:768px){.pop_cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:470px){.pop_cats{gap:16px}.pop_cats>a{font-size:16px;line-height:22px}}
/* §shop END */

/* ==========================================================================
   §model — стор. MODEL (car_linia.kiev else-гілка, Figma 51:3098)
   Скоуп: .model_acc (акордеон + грид карток-категорій) та body:has(.model_acc)
   (приховання донор-блоків поза макетом) + .bg .mod_other (блоки інших моделей).
   Донор-DOM не змінено: a_category(.catalogs>.name_4/span/.pop_cats), mod_other.
   ========================================================================== */

/* --- зазори Слой-2 (скоуп model, НЕ глоб) --- */
/* subtitle .name_s → селектор .garage_all = 40 (Figma 51:3290→3291). Глоб .name_s mb=24 → +16 у контексті model.
   Скоуп body:has(.model_acc) → не чіпає home/marka (там .name_s інша / car_select). */
body:has(.model_acc) .name_s{margin-bottom:40px}
/* грид «інші моделі» → CTA = 100 (Figma грид low→CTA 51:3369). CTA $help власний margin-top:80 → +20 padding-bottom
   на .bg-обгортці. Паттерн marka .marka_bg. Скоуп .bg:has(.mod_other) → лише model. */
.bg:has(.mod_other){padding-bottom:20px}

/* --- приховати донор-блоки, яких НЕМАЄ в макеті (display:none, donor DOM цілий) --- */
body:has(.model_acc) .content>.models{display:none}      /* list_modifications (модифікації) — не в Figma */
body:has(.model_acc) .catalogs+.text:empty,
body:has(.model_acc) .text+.name:empty{display:none}     /* порожні seo text_footer-заголовок між catalogs і models — не в Figma (H2 .bg .name НЕ чіпаємо) */

/* --- АКОРДЕОН розділів (51:3327): .name_4 = ряд-заголовок, контент = .acc_body (JS-обгортка) --- */
.model_acc{margin-top:37px}                              /* separator(926)→1-й розділ(963)=37 */
.model_acc .name_4{position:relative;margin:0;padding:14px 40px 14px 0;
  font-family:Poppins,Arial,sans-serif;font-size:20px;line-height:26px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.model_acc .name_4::after{content:"";position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;
  background:url(/img/chevron-nav.svg) center/16px 16px no-repeat;transform:rotate(90deg);
  transition:transform .2s ease}                         /* > повернуто на 90 = вниз (згорнуто) */
.model_acc .name_4.open::after{transform:rotate(-90deg)} /* розгорнуто = вгору */
.model_acc .acc_body{overflow:hidden}
.model_acc .acc_body[hidden]{display:none}
.model_acc .acc_body>span{display:block;margin:24px 0 16px;
  font-family:Poppins,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:600;color:var(--ink)} /* підкатегорія */
.model_acc .acc_body>span:first-child{margin-top:24px}

/* --- грид карток-категорій .pop_cats (51:3517) — model-варіант: картка ФІКС 240 (фото-зона 240×200,
   Figma 51:3517), gap20, LEFT-align (4 в ряд на 1240, трейлинг справа = по макету), border дефолт, тінь hover --- */
.model_acc .pop_cats{grid-template-columns:repeat(auto-fill,240px);justify-content:flex-start;gap:20px;margin:0 0 30px}
.model_acc .pop_cats>a{border:1px solid var(--line);box-shadow:none;text-decoration:none}
.model_acc .pop_cats>a:hover{box-shadow:0 3px 12px rgba(0,0,0,.14);text-decoration:underline}
/* PRAVKA-3 (vda санкц., відхилення від Figma 51:3517 full-bleed): товарна фото-вирізка НЕ прилягає до рамки —
   внутрішній відступ фото-зони ~14px. Скоуп СТРОГО .model_acc (база .pop_cats>a НЕ зачеплена → /shop/,search,listing цілі).
   Картка лишається h290 (grid-rows 200/90 з бази), зона імені 90 не кліпається, центрування збережено. Число — стартове, фінал vda/visual-QA. */
.model_acc .pop_cats>a>img{all:unset;display:block;object-fit:contain;width:auto;height:auto;max-width:100%;max-height:100%;align-self:center;justify-self:center}

/* --- H2 «Запчастини на інші моделі» (.bg .name = text_z1, 51:3330) --- */
.bg:has(.mod_other) .name{font-family:Poppins,Arial,sans-serif;font-size:36px;line-height:48px;font-weight:500;
  color:var(--ink);margin:0 0 60px}                      /* заголовок(2673)→грид(2733)=60; Poppins Medium 500 Figma 51:3330 */
.bg:has(.mod_other) .name:empty{display:none}            /* порожній text_z1 → без фантомного зазору */

/* --- грид «інші моделі» .bg .mod_other (51:3440) — блоки 236×60, 5 кол gap25 --- */
.bg .mod_other{display:grid;grid-template-columns:repeat(5,minmax(0,236px));gap:25px;
  justify-content:start;padding:0;margin:0}
.bg .mod_other a{position:relative;display:flex;align-items:center;height:60px;
  padding:0 40px 0 23px;background:#fff;border-radius:16px;overflow:hidden;
  font-family:Poppins,Arial,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:var(--ink);
  text-decoration:none;white-space:nowrap;transition:box-shadow .15s ease}
.bg .mod_other a::after{content:"";position:absolute;right:17px;top:50%;width:16px;height:16px;margin-top:-8px;
  background:url(/img/chevron-nav.svg) center/16px 16px no-repeat}
.bg .mod_other a:hover{box-shadow:0 3px 12px rgba(0,0,0,.14);text-decoration:underline}

/* --- §model адаптив (моб-макета нема — Слой-1: рівні висоти, gap>0, h-scroll=0) --- */
/* mod_other = ФОРС 5 кол на ≥1280 (Figma 51:3439 — 5 кол; блок ~228 через глоб-дельту .content 1240↔1280 = NEEDS_HUMAN_EYE).
   pop_cats — фікс 240 (auto-fill), на 1280-контейнері = 4 в ряд (без медіа-перевизначення). */
@media (max-width:1024px){
  .model_acc .pop_cats{grid-template-columns:repeat(3,240px)}
  .bg .mod_other{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .model_acc .pop_cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bg .mod_other{grid-template-columns:repeat(2,minmax(0,1fr))}
  .model_acc .name_4{font-size:18px;line-height:24px}
  .bg:has(.mod_other) .name{font-size:28px;line-height:38px;margin-bottom:32px}
}
@media (max-width:470px){
  .model_acc .pop_cats{gap:16px}
  .bg .mod_other{grid-template-columns:1fr;gap:16px}
}
/* §model END */

/* §shop — фото-ряд текст-блока (Figma 51:1062/1063). Реюз .text__row (grid 620/620 gap40 radius16 cover).
   Shop-зона фото 620×400; body→img=50 (margin-top, бо ol last-child margin-bottom:0); img→CTA=80 (.cta margin-top). */
.text__row--shop{margin-top:50px}
.text__row--shop .text__img{height:400px}
@media (max-width:1280px){.text__row--shop .text__img{height:360px}}
@media (max-width:1024px){.text__row--shop .text__img{height:300px}}
@media (max-width:768px){.text__row--shop{margin-top:36px}.text__row--shop .text__img{height:240px}}
/* §shop END */

/* ============================================================
   §shopcat — КАТЕГОРІЯ МАГАЗИНУ /shop/<cat>/ (Figma 51:4609)
   CSS-скін донорського DOM catalog_list.kiev (сайдбар .shop_left + грид .shop_right).
   Скоуп ЖОРСТКИЙ: .shop_left / .shop_right — НЕ протікає на §10 .pro / §11 .cat_prods.
   0 absolute у нових віджетах (крім шеврона/чекбокса ::after/::before нульової ширини).
   ============================================================ */

/* ── ПІДЗАГОЛОВОК-ОПИС (51:4754): 1280 шир, 16/24 #7e7e7e, зазор H1→intro 60, intro→секція 60 ── */
.content .cat_intro{max-width:1280px;margin:60px 0;font-size:16px;line-height:24px;color:var(--gray)}

/* ── LAYOUT [сайдбар 300 | грид] — float-потік (DOM: .shop_left + .shop_right соседи в .content) ── */
.shop_left{float:left;width:300px;box-sizing:border-box}
.shop_right{margin-left:327px}                 /* 300 + 27 gap = ліве поле гриду */
.content>.text{clear:both}                       /* текст-блок під обома колонками */

/* Заголовок сайдбару «Фільтрація» (51:4803) НАД картою (.shop_left без фону) */
.shop_left .name_4{font-size:28px;line-height:36px;font-weight:600;color:var(--ink);margin:0 0 24px}

/* ── ФІЛЬТР-КАРТА .filters (bg #fff r16 тінь, групи розділені лінією) ── */
.shop_left .filters{overflow:hidden}

/* Заголовок групи .filter_n (Poppins SemiBold 16/22) + chevron-аккордеон справа */
.shop_left .filter_n{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:27px 0 12px;font-size:16px;line-height:22px;font-weight:600;
    color:var(--ink);cursor:pointer;border-top:1px solid var(--line)}
.shop_left .filter_n:first-child{border-top:0;padding-left:0;padding-right:0;padding-bottom:18px}
/* FIX-5 shopcatfix3: chevron = flex-елемент ПІСЛЯ тексту (хагає заголовок, ~10px), НЕ absolute right (Figma 51:4755/4765 x≈83-93) */
.shop_left .filter_n::after{content:"";flex:0 0 16px;width:16px;height:16px;
    background:url(/img/chevron-nav.svg) center/16px no-repeat;transform:rotate(-90deg);transition:transform .15s ease}
.shop_left .filter_n.collapsed::after{transform:rotate(90deg)}

/* Тіло групи .filter_b (паддинг; ховається при .collapsed) */
.shop_left .filter_b{padding:0 0 22px}
.shop_left .filter_n.collapsed + .filter_b{display:none}

/* ── Ціна-форма (донор form price_min/price_max + .filter_s OK) ──
   Зона цены = повна ширина карти 300 (без бок.паддингу .filter_b) щоб 114+10+114+10+50=298 влізли (51:4757) */
.shop_left .filter_b:has(form){padding-left:0;padding-right:0}
.shop_left .filter_b form{display:flex;align-items:center;gap:10px;font-size:0}
.shop_left .filter_b input[name^="price"]{flex:0 0 114px;width:114px;height:50px;box-sizing:border-box;border:1px solid var(--line);
    border-radius:16px;background:#fff;padding:0 13px;font-size:14px;line-height:20px;font-weight:600;color:var(--ink)}
.shop_left .filter_b input[name^="price"]::placeholder{color:var(--gray2)}
.shop_left .filter_b form input[name="price_max"]{margin-left:-10px}  /* FIX okclip: донор кладе текст-вузол en-dash МІЖ price_min/price_max → анонімний flex-айтем дає 2-й gap (i1↔i2=20). -10 скасовує дубль → i1↔i2 рівно 10. Тепер 114+10+114+10+50=298<300, OK не кліпається картою overflow:hidden (51:4757) */
.shop_left .filter_b form .filter_s{width:50px;height:50px;min-width:50px;padding:0;border:0;border-radius:16px;
    background:var(--field2);color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;
    align-items:center;justify-content:center;transition:background .15s ease}
.shop_left .filter_b form .filter_s:hover{background:var(--orange)}

/* ── Чекбокси .filter_b span (донор-скін, ::before квадрат-ассет) ── */
.shop_left .filter_b span{position:relative;display:block;padding:8px 0 8px 38px;min-height:24px;
    font-size:14px;line-height:20px;font-weight:400;color:var(--ink);cursor:pointer}
.shop_left .filter_b span::before{content:"";position:absolute;left:0;top:6px;width:24px;height:24px;
    background:url(/img/cb-unchecked.svg) center/24px 24px no-repeat}
.shop_left .filter_b span:hover{color:var(--orange)}
/* вибраний (донор-клас s1): помаранчевий чек + сірий текст */
.shop_left .filter_b span.s1{color:var(--gray)}
.shop_left .filter_b span.s1::before{background:url(/img/cb-checked.svg) center/24px 24px no-repeat}
/* disabled (донор-клас s2) */
.shop_left .filter_b span.s2{color:var(--gray2);cursor:default;pointer-events:none}
.shop_left .filter_b span.s2:hover{color:var(--gray2)}

/* «Показати всі» — collapse довгих груп (>5 опцій). Кнопка генерує JS (.filter_more). */
.shop_left .filter_b.has-more span:nth-of-type(n+6){display:none}
.shop_left .filter_b.has-more.show-all span:nth-of-type(n+6){display:block}
.shop_left .filter_more{display:flex;align-items:center;gap:8px;margin-top:8px;padding:0;
    font-size:14px;line-height:20px;font-weight:400;color:var(--ink);cursor:pointer;background:none;border:0}
.shop_left .filter_more::after{content:"";width:16px;height:16px;flex:0 0 16px;
    background:url(/img/chevron-nav.svg) center/16px no-repeat;transform:rotate(90deg);transition:transform .15s ease}
.shop_left .filter_b.has-more.show-all + .filter_more::after,
.shop_left .filter_more.open::after{transform:rotate(-90deg)}

/* ── ГРИД ТОВАРІВ .shop_right .prods (3 кол; скоуп перебиває §10 .pro) ── */
.shop_right .prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:27px;margin:0}
.shop_right .prods .pro{display:flex;flex-direction:column;background:#fff;border:0;border-radius:16px;
    padding:0;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.14);transition:box-shadow .15s ease;min-height:530px}
.shop_right .prods .pro:hover{box-shadow:0 8px 20px rgba(0,0,0,.16)}

/* ФОТО-зона: a.prod_img обгортка 100%×квадрат, img вписана contain */
.shop_right .prods .pro .prod_img{display:flex;align-items:center;justify-content:center;width:100%;
    aspect-ratio:1/1;padding:25px;box-sizing:border-box;overflow:hidden}
.shop_right .prods .pro .prod_img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* FIX-2 shopcatfix2: 404/клон-фото (тест-БД) → чиста зона --light, без broken-glyph; реальне фото — inset 25px (object-fit:contain). Зона = ширині картки (§11). */
.shop_right .prods .pro .prod_img img{color:transparent;font-size:0}
.shop_right .prods .pro .prod_img{background:#fff}
.shop_right .prods .pro .prod_img i{display:block;width:100%;height:100%;background:var(--light)}
/* §shop-noimg START — заглушка-лого RemBaza на ПУСТОЙ фото-области карточки КАТАЛОГА-категории (vda).
   <i> рендериться ТІЛЬКИ при picture== (товар з фото = <img> → не зачеплено). Scoped .l-shop (drilldown .l-find_12345 цілий).
   Лого 250:83.98 (ratio 2.977). bg-size 75% auto: 75% ширини квадрат-боксу, height=auto → пропорція з intrinsic SVG, НЕ розтягнуто. */
.l-shop .shop_right .prods .pro .prod_img i{background:#f5f5f5 url(/img/logo-dark.svg?v2) no-repeat 50%;background-size:75% auto;border-radius:8px}
/* §shop-noimg END */


/* АРТИКУЛ a.pro_name (бренд+partid) Bold 16/24, фікс 1 рядок */
.shop_right .prods .pro a.pro_name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:1;
    line-height:24px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:underline;padding:0 25px;margin:20px 0 0}
.shop_right .prods .pro a.pro_name:hover{color:var(--orange)}

/* .pro_info — потік, бок.поле 25, низ 25, тягнеться (кнопка донизу) */
.shop_right .prods .pro .pro_info{display:flex;flex-direction:column;flex:1 1 auto;padding:10px 25px 25px}

/* НАЗВА — перший <a> у .pro_info, Regular 16/20 фікс 2 рядки */
.shop_right .prods .pro .pro_info>a:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:40px;line-height:20px;font-size:14px;font-weight:400;color:var(--ink);text-decoration:none}
.shop_right .prods .pro .pro_info>a:first-child:hover{color:var(--orange)}

/* НИЖНІЙ РЯД (51:4885): ціна СЛІВА ↔ кнопка СПРАВА на одному рівні (top цена≈кнопка).
   .pro_buyrow flex: ліва колонка .pro_pricecol (ціна + «В наявності» + «Доставка») | права .price (кнопка).
   margin-top:auto прижимає весь ряд донизу картки → рівна висота ряду. */
.shop_right .prods .pro .pro_buyrow{display:flex;justify-content:space-between;align-items:flex-start;
    margin-top:auto;padding-top:26px;gap:12px}
.shop_right .prods .pro .pro_pricecol{flex:1 1 auto;min-width:0}
/* ЦІНА Bold 22/32 (51:4890) — margin:0 перебиває §10 .pro .pro_price{margin:30px} */
.shop_right .prods .pro .pro_price{margin:0;font-size:22px;line-height:32px;font-weight:600;color:var(--ink);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop_right .prods .pro .pro_price span{font-size:22px;font-weight:600;color:var(--ink)}
/* «В наявності» (51:4891) зел. — під ціною (донор не емітить, дефолт-лейбл) */
.shop_right .prods .pro .pro_price::after{content:"В наявності";display:block;margin-top:8px;
    font-size:12px;line-height:18px;font-weight:400;color:#16a34a;white-space:nowrap}
/* «Доставка: N днів» (51:4892) — під «В наявності» (дефолт-лейбл) */
.shop_right .prods .pro .pro_pricecol::after{content:"Доставка: 1-3 дні";display:block;margin-top:4px;
    font-size:12px;line-height:18px;font-weight:400;color:var(--gray);white-space:nowrap}

/* КНОПКА .price > button.buy.c_add «Купити» 86×50 #3c3c3c → hover --orange, справа, на рівні ціни */
.shop_right .prods .pro .price{flex:0 0 auto;display:flex}
.shop_right .prods .pro .price .buy{width:86px;min-width:86px;height:50px;padding:0;border:0;border-radius:16px;
    background:var(--field2);color:#fff;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease}
.shop_right .prods .pro .price .buy:hover{background:var(--orange)}

/* OOS (catalog_list artkiev_cart2 → .no_price): рамка замість тіні, кнопка full-width outline, без ціни */
.shop_right .prods .pro:has(.no_price){box-shadow:none;border:1px solid var(--line)}
.shop_right .prods .pro:has(.no_price) .pro_price{display:none}
.shop_right .prods .pro .no_price{margin-top:auto;display:flex}
.shop_right .prods .pro .no_price button{width:100%;height:50px;padding:0}

/* ── §shopcat АДАПТИВ ── */
@media (max-width:1024px){
  .shop_right .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
}
@media (max-width:768px){
  /* сайдбар над гридом (стопка): скидаємо float, повна ширина */
  .shop_left{float:none;width:auto;margin-bottom:32px}
  .shop_right{margin-left:0}
  .shop_right .prods{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
}
@media (max-width:610px){
  .shop_right .prods{gap:14px}
}
@media (max-width:470px){
  .shop_right .prods .pro .prod_img{padding:16px}
  .shop_right .prods .pro a.pro_name{padding:0 16px}
  .shop_right .prods .pro .pro_info{padding:10px 16px 16px}
  /* FIX-4 shopcatfix3: вузька 2-кол карта — ряд цена+кнопка не влазить → стопка: ціна full-width зверху (не клипається), кнопка full-width знизу (Figma 86×50 → full-width на моб, текст з паддингом) */
  .shop_right .prods .pro .pro_buyrow{flex-direction:column;align-items:stretch;gap:12px}
  .shop_right .prods .pro .pro_pricecol{flex:0 0 auto}
  .shop_right .prods .pro .pro_price{white-space:normal;overflow:visible;text-overflow:clip}
  .shop_right .prods .pro .price{justify-content:stretch}
  .shop_right .prods .pro .price .buy{width:100%;min-width:0}
}
@media (max-width:350px){
  .shop_right .prods{grid-template-columns:1fr}
}
/* FIX-1 shopcatfix2: зазор пагінація(.shop_right низ)->текст-блок .text = 70px (Figma 51:4879->51:4805). Скоуп .shop_right + .text — НЕ зачіпає /shop/ лендинг (.pop_cats + .text) та info. */
.shop_right + .text{margin-top:70px}
/* §shopcat END */

/* ==========================================================================
   §modif — стор. МОДИФІКАЦІЯ (car_tree.kiev, Figma 51:3995)
   Скоуп: .model_info (ТТХ-таблиця). Решта блоків = реюз (§7.3 .text /
   §shop .text__row--shop / $help CTA / §model .model_acc акордеон).
   .model_info > .mi_row (8 пар) — кожен .mi_row = рядок 620×60 (label+value).
   Розкладка ПОТОКОМ (grid, 0 absolute): 2 кол × 4 рядки, auto-flow column
   (ліва кол = рядки 1-4, права = 5-8 = порядок Figma), gap 0 40.
   ========================================================================== */
.model_info{display:grid;grid-template-columns:minmax(0,620px) minmax(0,620px);grid-template-rows:repeat(4,60px);
  grid-auto-flow:column;column-gap:40px;row-gap:0;margin:40px 0 0;justify-content:start}
.model_info .mi_row{display:flex;align-items:center;height:60px;background:#fff;
  border-bottom:1px solid var(--line);font-family:Poppins,Arial,sans-serif;
  font-size:16px;line-height:24px;font-weight:400}
.model_info .mi_row>div:first-child{flex:0 0 322px;padding-left:19px;color:#7e7e7e}  /* комірка-лейбл 322w: текст лейбла @left19, value старт @322 (=права межа комірки, Figma 51:4153) */
.model_info .mi_row>div:last-child{flex:1 1 auto;color:var(--ink)}                   /* значення #1e1e1e */

/* §modif адаптив — 2 кол → 1 кол на вузьких (моб-макета нема; Слой-1: рядки потоком, не наїжджають) */
@media (max-width:1024px){
  .model_info{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;column-gap:0}
}
@media (max-width:470px){
  .model_info .mi_row>div:first-child{flex:0 0 50%;padding-left:0}
}
/* §modif зазори Слой-2 (скоуп body:has(.model_info) → лише car_tree) */
body:has(.model_info) .model_acc{margin-top:70px}          /* ТТХ→акордеон=70 (Figma 51:3995); переоприділяє §model 37px */
body:has(.model_info) .model_acc+.text{margin-top:70px}    /* акордеон→H2(.text перший)=70 */
/* H2 «Як правильно купити» (Figma 51:4218) = Poppins Medium 36/48 (база .text h2 = 24/36 на shop) */
body:has(.model_info) .text>h2:first-child{font-size:36px;line-height:48px;font-weight:500;margin:0 0 60px}
/* §modif END */

/* §shopcat ФІКС: .shop_mobile = моб-тригер сайдбару (донор shop_mobile() toggle .shop_mobile2).
   На десктопі (>768) ПРИХОВАНИЙ — заголовок «Фільтрація» дає .name_4. На ≤768 видимий над гридом. */
.shop_mobile{display:none}
@media (max-width:768px){
  .shop_mobile{display:block;margin:0 0 16px;padding:14px 20px;background:#fff;border-radius:16px;
    box-shadow:0 3px 12px rgba(0,0,0,.14);font-size:16px;font-weight:600;color:var(--ink);cursor:pointer}
  /* на ≤768 .shop_left прихований за замовч., відкривається донор-класом .shop_mobile2 */
  #shop_left{display:none}
  #shop_left.shop_mobile2{display:block}
  #shop_left .name_4{display:none}    /* дубль-заголовок ховаємо на моб (є тригер) */
}
/* §shopcat-mobtrig END */

/* §shopcat ФІКС filter_result: блок активних фільтрів (catalog_podbor.kiev:246, рендер при $final!='').
   DOM: <div class="filter_result"><span class="s1">Бренд: ATELIE</span><a>Cбросити...</a></div>.
   Скоуп .shop_left — рендериться ЛИШЕ в #shop_left .filters (моб: ховається з #shop_left, донор-механіка ціла).
   Два РЯДИ: чипи активних фільтрів (ink, не сірий — вибрані) зверху + ссилка «Сбросити» окремим рядком підкреслена. */
.shop_left .filter_result{margin:0 0 24px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.shop_left .filter_result .s1{display:block;color:var(--ink);font-size:16px;line-height:24px;font-weight:600;margin:0 0 6px}
.shop_left .filter_result .s1::before{content:none}   /* НЕ чекбокс-чип (.filter_b span.s1 має ::before) — це підпис активного фільтра */
.shop_left .filter_result .s1:last-of-type{margin-bottom:0}
.shop_left .filter_result a{display:block;margin:14px 0 0;color:var(--orange);font-size:14px;line-height:20px;
    text-decoration:underline;cursor:pointer}
.shop_left .filter_result a:hover{color:var(--orange);text-decoration:none}
/* §shopcat-filterresult END */

/* ═══════════════════════════════════════════════════════════════════════
   §search — РЕЗУЛЬТАТИ ПОШУКУ ПО АРТИКУЛУ (shop_search.kiev, $brand=='', Figma 51:522)
   3 секції потоком: категорії (РЕЮЗ §shop .pop_cats) / товари (РЕЮЗ §11 .cat_prods .pro) /
   таблиця артикулів (.t_find НОВИЙ віджет). Скоуп під .find_res — НЕ протікає на §11/§shop/§10.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── зазори заголовків секцій (РЕЮЗ глоб .name_2 36/48; лише відступи скоупнуто) ── */
.find_res .name_2{margin:60px 0 50px;font-size:18px;font-weight:400;line-height:24px;text-transform:uppercase;color:var(--ink)}
.find_res .name_2:first-of-type{margin-top:60px}     /* H1→секція1 = 60 (Figma) */
.find_res .pop_cats,.find_res .cat_prods,.find_res .t_find{margin-bottom:0}

/* ── СЕКЦІЯ 1: категорії = РЕЮЗ §shop .pop_cats + search-override (resting БЕЗ underline) ── */
.find_cats{grid-template-columns:repeat(auto-fill,240px);justify-content:start;margin:0}
.find_cats>a{width:240px;border:1px solid var(--line);text-decoration:none;box-shadow:none}
.find_cats>a:hover{border-color:transparent;box-shadow:0 3px 12px rgba(0,0,0,.14);text-decoration:underline}
.find_cats>a>img{background:var(--light)}

/* ── СЕКЦІЯ 3: таблиця артикулів .t_find (НОВИЙ §search віджет, потік) ── */
.t_find{width:100%;border-collapse:collapse;table-layout:fixed;font-family:Poppins,Arial,sans-serif}
.t_find tr{display:grid;grid-template-columns:226px 225px 1fr 110px;align-items:center;min-height:60px}
.t_find th,.t_find td{padding:0;text-align:left;overflow:hidden}
.t_find tr:first-child{background:var(--field2);min-height:60px;border-radius:0}
.t_find th{font-size:14px;font-weight:600;line-height:20px;color:#fff;padding:0 0 0 18px}    /* Бренд @18 */
.t_find th:nth-child(2),.t_find th:nth-child(3){padding-left:0}    /* Артикул @226 / Назва @451 */
.t_find tbody tr,.t_find tr+tr{background:#fff;border-bottom:1px solid var(--line)}
.t_find td{font-size:16px;line-height:24px;font-weight:400;color:var(--ink)}
.t_find td>a{color:var(--ink);text-decoration:none;display:block;padding:0 12px 0 18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t_find td:nth-child(2)>a,.t_find td:nth-child(3)>a{padding-left:0}   /* Артикул @226 / Назва @451 = старт колонки (Figma) */
.t_find td:nth-child(3)>a{white-space:normal}
.t_find td:nth-child(4){text-align:right}
.t_find td:nth-child(4)>a{padding:0 21px 0 0;text-align:right;white-space:nowrap}
.t_find tr:not(:first-child):hover{background:var(--light)}
.t_find tr:not(:first-child):hover td>a{text-decoration:underline}

/* not-found стан (.name_3 на білому фоні контенту — перебиваємо білий-на-темному глоб) */
.find_nf{color:var(--ink);font-size:24px;line-height:32px;margin:40px 0 60px}

/* ── §search АДАПТИВ ── */
@media (max-width:1024px){
  .find_cats{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .find_cats>a{width:auto}
}
@media (max-width:768px){
  .find_cats{grid-template-columns:repeat(2,1fr)}
  /* таблиця → card-stack (донорські data-label) */
  .t_find,.t_find tbody{display:block}
  .t_find tr{display:block;border:1px solid var(--line);border-radius:16px;background:#fff;
    margin:0 0 12px;padding:14px 18px;min-height:0}
  .t_find tr:first-child{display:none}      /* head-row ховаємо на card-режимі */
  .t_find td{display:flex;border:0;padding:6px 0;font-size:15px}
  .t_find td>a{padding:0;white-space:normal}
  .t_find td[data-label]::before{content:attr(data-label) ": ";font-weight:600;flex:0 0 90px;color:var(--gray)}
  .t_find td:nth-child(4){justify-content:flex-start}
  .t_find td:nth-child(4)>a{padding:0;text-align:left;color:var(--orange)}
}
@media (max-width:470px){
  .find_cats{gap:16px}
}
/* §search END */

/* §razdel «Корисна інформація» (розділ статей) — CSS-скін ЖИВОЇ донор-функції .page_rows (core/pages.kiev).
   Донор-цикл (a.page з БД pages) НЕ чіпаємо — скінимо ВИВІД під Figma 51:1364/51:1580. Спека docs/razdel-spec.md.
   Скоуп body:has(.page_rows) → лише сторінка-список (одиночна стаття info_article БЕЗ .page_rows → не протече). */
body:has(.page_rows) .page_rows{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;                         /* X та Y між картками = 25 (спека §3) */
}
/* картка-стаття = a.page (grid-stack БЕЗ absolute — закон #models) */
body:has(.page_rows) a.page{
  position:relative;                /* контекст ::before-градієнта */
  display:grid;
  grid-template:1fr / 1fr;          /* одна комірка-стек: фото+заголовок */
  height:500px;                     /* ФІКС-висота — усі картки рівні (спека §3/§4) */
  border-radius:16px;
  overflow:hidden;
  background:var(--line);           /* #e0e0e0 — фон-заглушка під фото */
  text-decoration:none;
}
/* фото та заголовок — в ОДНІЙ grid-комірці = стек */
body:has(.page_rows) a.page>img,
body:has(.page_rows) a.page>span,
body:has(.page_rows) a.page>i{ grid-area:1 / 1; }
body:has(.page_rows) a.page>img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
body:has(.page_rows) a.page>i{ display:block; }  /* заглушка-фото порожня (фон --line) */
/* затемнення знизу: 226px, лінійний градієнт знизу вгору (спека §4.2) */
body:has(.page_rows) a.page::before{
  content:"";
  grid-area:1 / 1;
  align-self:end;
  height:226px;
  pointer-events:none;z-index:1;
  background:linear-gradient(to top,#000 0%,#000 26.442%,rgba(0,0,0,0) 100%);
}
/* заголовок статті (span): фікс-зона знизу (align-self:end) → 1-3 рядки не міняють висоту */
body:has(.page_rows) a.page>span{
  position:relative;z-index:2;
  align-self:end;
  margin:0 31px 36px;               /* left/right 31, низ 36 (спека §4.3) */
  font-weight:600;font-size:20px;line-height:26px;color:#fff;
  display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
}
/* H1 розділу: зазор крихти→H1=50, H1→грид=60 (спека §1.2). H1 = глоб .name (Poppins 500 36/48). */
body:has(.page_rows) h1{margin:50px 0 60px}
/* зазор грид→пагінація=50 (глоб .pagination не чіпаємо) */
body:has(.page_rows) .page_rows + .pagination{margin-top:50px}
/* §razdel зазор грид/пагінація→CTA=100: .cta має глоб margin-top:80 → +20 padding-bottom на .content-обгортці
   гриду (паттерн marka .marka_bg padding-bottom:20). 80+20=100. Скоуп :has(.page_rows) → не протече. */
body:has(.page_rows) .content:has(.page_rows){padding-bottom:20px}
/* донорський порожній .text після гриду (без контенту) не дає зайвого повітря — скидаємо */
body:has(.page_rows) .page_rows ~ .text:empty{margin:0}

/* ---- МОБАЙЛ розділу: 3 → 2 (768) → 1 (470). Слой-1 строгий (моб-ноди немає, спека §7). ---- */
@media (max-width:768px){
  body:has(.page_rows) .page_rows{grid-template-columns:repeat(2,1fr);gap:20px}
}
@media (max-width:470px){
  body:has(.page_rows) .page_rows{grid-template-columns:1fr;gap:16px}
}
/* §razdel END */


/* ============================================================
   §spisok — СТОРІНКА СПИСКУ ЗАПЧАСТИН (car_list.kiev, Figma 51:4292)
   Скоуп СТРОГО body:has(.sort) / .sort — .sort є ТІЛЬКИ на car_list.
   НОВЕ: §sort бар. РЕЮЗ: §11 .cat_prods картка, §garage селектор, $help CTA.
   ============================================================ */
/* СОРТ-БАР: голий текст у потоці (Figma 51:4448) — БЕЗ контейнера/фону/рамки/радіуса.
   Лейбл «Сортувати за:» + опції «Доставка»/«Ціна», gap 16. Poppins 400 14/20.
   Активна (.sort_a) = --ink + underline; неактивна = --gray без underline. */
.sort{display:flex;align-items:baseline;gap:16px;margin-top:40px;font-size:14px;line-height:20px;font-weight:400}
.sort .sort_l{color:var(--ink)}
.sort span[id^="sort"]{color:var(--gray);cursor:pointer;text-decoration:none}
.sort span[id^="sort"]:hover{color:var(--orange)}
.sort span.sort_a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
/* зазор гараж→сорт = 40 (margin-top:40 на .sort вище). сорт→грид = 40 (.cat_prods margin-top:40 §11). */
/* §spisok мобайл — Слой-1 (моб-макета немає): сорт у рядок, gap>0, не наїжджає. */
@media (max-width:470px){
  .sort{flex-wrap:wrap;gap:12px;margin-top:28px}
}
/* §spisok END */

/* ==========================================================================
   §shop_part — ДЕТАЛЬ ТОВАРУ КАТАЛОГУ (catalog_prod.kiev, Figma 51:4974)
   CSS-СКІН donor-identical шаблону. Скоуп ЖОРСТКИЙ під .shop_part / .shop_part_seo —
   НЕ протікає на §10 car_prod (.tovar_top без .shop_part) / §11 listing / §shop / §shopcat.
   РЕЮЗ: §10 (.tovar_top grid / .tovar_img / .tovar_info / .tovar_pays>.tovar_p design77 /
   .tovar_50 / .tovar_har / .tovar_brand / .prods>.pro) застосовується АВТОМАТИЧНО (глоб, без body-scope).
   §7.3 (.text / .text__row / .text__img) — РЕЮЗ для SEO-блоку.
   Тут — лише ДЕЛЬТИ під Figma, яких §10/§7.3 не дають. Токени remb3 (--ink/--gray/--line/--orange).
   ========================================================================== */

/* ---- FAIL-1/2 Топ-зона (Figma 4 зони [фото300 | мета | Доставка300×330 | Оплата300×330]):
   §10 grid дає 300|300|580 (контент 1240<1310) + pays 280×230. ДЕЛЬТА під shop_part:
   зона3 фікс 620 (=2×300+gap20), мета = remaining 1fr. Pays-карти 300×330 side-by-side. ---- */
.shop_part.tovar_top{grid-template-columns:300px minmax(0,1fr) 620px;gap:30px}
.shop_part .tovar_side{grid-column:3}
/* Доставка|Оплата: 2 фікс-карти 300 кожна, gap20 (=620), вирівняні ліворуч; кожна 300×330 (Figma 51:5126/5156) */
.shop_part .tovar_pays{grid-template-columns:repeat(2,300px);gap:20px;justify-content:start}
.shop_part .tovar_pays .tovar_p{width:300px;min-height:330px}

.shop_part.tovar_top{margin-bottom:50px}   /* B8: топ-зона shop_part низ -> Характеристики = 50 (Figma; глоб .tovar_top mb70 для §10 не чіпаємо) */
.shop_part.tovar_top + .tovar_50{margin-top:50px}   /* B8: обидва кінці margin-collapse = 50 (глоб .tovar_50 mt70 §10 не чіпаємо) */
/* FAIL-1: сірий абзац-опис .ma/.text (seoinfo text_small) НЕ в Figma топ-зоні (мета=строго 4 рядки+ціна+Купити) → scoped hide */
.shop_part .tovar_info>.ma,.shop_part .tovar_info>.text{display:none}

/* ---- Ціна «1142 грн» (Figma 51:5119): число Poppins Medium 36/48 (span); «грн» Poppins Regular 16/46 (текст-вузол) → font-size на контейнері 16, на span 36 ---- */
.shop_part .tovar_price{font-size:16px;line-height:46px;font-weight:400;color:var(--ink)}
.shop_part .tovar_price span{font-size:36px;line-height:48px;font-weight:500;vertical-align:baseline}

/* ==========================================================================
   FAIL-3 СХОЖІ ТОВАРИ .prods.shop_part_sim — donor DOM (.pro>.pro_name+.prod_img+.pro_info(>a+.pro_price+.price)).
   §10 стилізує .pro .pro_img (інший клас!), §shopcat — .shop_right .prods .pro .prod_img (інший скоуп) →
   на shop_part .prod_img без CSS = height 0, картка half-height, без лейблів.
   РЕЮЗ техніки §shopcat (фото-зона aspect 1/1, name underline, ціна Bold, ::before/::after дефолт-лейбли,
   кнопка 86×50). Скоуп .shop_part_sim — 0 протікання на §10/§11/§shopcat. Картки equalH ~530.
   ========================================================================== */
.prods.shop_part_sim{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:60px 0 0;align-items:stretch}
.shop_part_sim .pro{display:flex;flex-direction:column;background:#fff;border:0;border-radius:16px;padding:0;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.14);transition:box-shadow .15s ease;min-height:530px}
/* DOM донора catalog_prod: pro_name ПЕРЕД prod_img (інакше ніж §shopcat catalog_list, де фото перше).
   Figma 51:5285 = фото СВЕРХУ → ім'я. Виправляємо order у flex-column (markup донора 1:1 НЕ чіпаємо). */
.shop_part_sim .pro .prod_img{order:0}
.shop_part_sim .pro a.pro_name{order:1}
.shop_part_sim .pro .pro_info{order:2}
.shop_part_sim .pro:hover{box-shadow:0 8px 20px rgba(0,0,0,.16)}
/* ФОТО-зона .prod_img: 100%×квадрат (фікс h>0), img contain; 404/клон-фото → чиста зона --light (НЕ схлоп) */
.shop_part_sim .pro .prod_img{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;padding:25px;box-sizing:border-box;overflow:hidden;background:#fff}
.shop_part_sim .pro .prod_img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;color:transparent;font-size:0}
.shop_part_sim .pro .prod_img i{display:block;width:100%;height:100%;background:var(--light)}
/* АРТИКУЛ a.pro_name (бренд+partid) underline 16/24, 1 рядок */
.shop_part_sim .pro a.pro_name{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:24px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;padding:0 25px;margin:20px 0 0}
.shop_part_sim .pro a.pro_name:hover{color:var(--orange)}
/* .pro_info потік, бок.поле 25, низ 25, тягнеться (кнопка донизу) */
.shop_part_sim .pro .pro_info{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;column-gap:12px;flex:1 1 auto;padding:10px 25px 25px}
.shop_part_sim .pro .pro_info>a:first-child{grid-column:1 / -1}
/* НАЗВА (перший <a>) Regular 14/20, 2 рядки */
.shop_part_sim .pro .pro_info>a:first-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;line-height:20px;font-size:14px;font-weight:400;color:var(--ink);text-decoration:none}
.shop_part_sim .pro .pro_info>a:first-child:hover{color:var(--orange)}
/* ЦІНА Bold 24/32 (Figma 51:5285) — прижата донизу; flex-column щоб дефолт-лейбли (::before/::after) керувались order.
   Порядок візуально: ціна(span, order0) → «В наявності»(::after order1) → «Доставка»(::before order2). */
.shop_part_sim .pro .pro_price{grid-column:1;grid-row:2;align-self:start;margin:0;display:flex;flex-flow:row wrap;align-items:baseline;font-size:24px;line-height:32px;font-weight:600;color:var(--ink)}
.shop_part_sim .pro .pro_price span{font-size:24px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* «В наявності» #16a34a — дефолт-лейбл (донор per-product не емітить; прецедент §shopcat ::after) */
.shop_part_sim .pro .pro_price::after{content:"В наявності";order:1;flex-basis:100%;margin-top:8px;font-size:12px;line-height:18px;font-weight:400;color:#16a34a;white-space:nowrap}
/* «Доставка: N днів» #7e7e7e — дефолт-лейбл під «В наявності» (донор не емітить) */
.shop_part_sim .pro .pro_price::before{content:"Доставка: 1-3 дні";order:2;flex-basis:100%;margin-top:4px;font-size:12px;line-height:18px;font-weight:400;color:var(--gray);white-space:nowrap}
/* КНОПКА .price>button.buy «Купити» 86×50 #3c3c3c→orange r16, справа під ціною */
.shop_part_sim .pro .price{grid-column:2;align-self:start;display:flex}
.shop_part_sim .pro .price .buy{width:86px;min-width:86px;height:50px;padding:0;border:0;border-radius:16px;background:var(--field2);color:#fff;font-size:14px;line-height:20px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease}
.shop_part_sim .pro .price .buy:hover{background:var(--orange)}
/* OOS (artkiev_cart2 → .no_price): рамка, кнопка full-width outline */
.shop_part_sim .pro:has(.no_price){box-shadow:none;border:1px solid var(--line)}
.shop_part_sim .pro .no_price{margin-top:auto;display:flex}
.shop_part_sim .pro .no_price button{width:100%;height:50px;padding:0}

/* FAIL-4: «Опис» заголовок (Figma 51:5179, права колонка .tovar_50 ряду) — name_4 над .tovar_brand (парний «Характеристики» зліва) */
.shop_part_desc .name_4{font-size:24px;line-height:36px;font-weight:600;color:var(--ink);margin:0 0 18px}
.shop_part_desc .tovar_brand{margin:0}

/* ---- SEO-блок «Як правильно купити запчастини?» (Figma 51:5210) — повна ширина, після Схожих, перед CTA ---- */
.shop_part_seo{margin-top:70px}                 /* Схожі-грид → SEO heading */
.shop_part_seo h2{font-size:36px;line-height:48px;font-weight:500;color:var(--ink);margin:0 0 24px}  /* heading 36/48 (НЕ §10/§7.3 24px) */
.shop_part_seo p{font-size:16px;line-height:24px;color:var(--ink);margin:0 0 16px}
.shop_part_seo .text__row{margin-top:40px;margin-bottom:0}     /* body → 2 фото = 40 */
.shop_part_seo .text__img{height:400px}          /* Figma 51:5223/5224 = 620×400 (§7.3 дефолт 340) */

/* ---- §shop_part АДАПТИВ (моб-макета нема — Слой-1: gap>0, фікс-зони, h-scroll=0).
   ⚠️ .shop_part.tovar_top (спец 0,2,0) перебиває §10-моб .tovar_top (0,1,0) → ОБОВ'ЯЗКОВО дублюємо моб-стопку тут,
   інакше зона3 620px на 470 → h-scroll. Те саме для .tovar_pays/.tovar_side. ---- */
@media (max-width:1280px){
  .shop_part_seo .text__img{height:340px}
  /* топ: фото+мета ряд, pays під ними 2-кол на повну (Figma-пропорції тримає §10) */
  .shop_part.tovar_top{grid-template-columns:300px minmax(0,1fr);gap:30px}
  .shop_part .tovar_side{grid-column:1 / -1}
  .shop_part .tovar_pays{grid-template-columns:1fr 1fr;justify-content:stretch}
  .shop_part .tovar_pays .tovar_p{width:auto;min-height:330px}
}
@media (max-width:1024px){
  .shop_part_seo h2{font-size:30px;line-height:40px}
  .shop_part_seo .text__img{height:300px}
  .prods.shop_part_sim{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:768px){
  .shop_part_seo{margin-top:50px}
  .shop_part_seo h2{font-size:24px;line-height:34px}
  .shop_part_seo .text__row{grid-template-columns:1fr;gap:20px;margin-top:36px}
  .shop_part_seo .text__img{height:240px}
  /* топ → стопка (фото/мета/pays вертикально); pays-карти стопкою */
  .shop_part.tovar_top{grid-template-columns:1fr;gap:24px}
  .shop_part .tovar_img,.shop_part .tovar_info,.shop_part .tovar_side{grid-column:1}
  .shop_part .tovar_pays{grid-template-columns:1fr;gap:20px}
  .shop_part .tovar_pays .tovar_p{width:100%;min-height:0}
  .prods.shop_part_sim{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .shop_part_sim .pro{min-height:0}
}
@media (max-width:610px){
  .prods.shop_part_sim{gap:14px}
}
@media (max-width:470px){
  .shop_part_seo .text__img{height:200px}
  .prods.shop_part_sim{grid-template-columns:1fr}
  .shop_part_sim .pro .prod_img{padding:16px}
  .shop_part_sim .pro a.pro_name{padding:0 16px}
  .shop_part_sim .pro .pro_info{padding:10px 16px 16px}
}
@media (max-width:350px){
  .shop_part_seo h2{font-size:22px;line-height:30px}
  .shop_part_seo .text__img{height:180px}
  .shop_part_sim .pro a.pro_name,.shop_part_sim .pro .pro_info>a:first-child{white-space:normal;overflow-wrap:anywhere;word-break:break-word}
}
/* §shop_part END */

/* =================================================================
   §model_op — СТОРІНКА МОДЕЛЬ+ЗАПЧАСТИНА (car_linia.kiev op-гілка $tree_sql!='',
   Figma 51:3529). НОВЕ: ТТХ-модифікацій (51:3902) + SEO-категорії (51:3911-3914).
   РЕЮЗ: §11 .prods/.pro листинг-картка, §пагінація, .bg .mod_other, $help CTA,
   $garage_print селектор, .name_2 H2 — НЕ дублюються тут.
   СКОУП op-сторінки = body:has(.seo_cats) (унікальний маркер op-гілки; .model_acc/
   листинг #models/marka .marka_models НЕ зачіпаються). Токени remb3 (--ink/--orange).
   ================================================================= */

/* ── зазори секцій op-сторінки §6 спеки (пагінація→H2=70 / H2→контент=60 /
      контент→H2=70 / SEO→CTA=100). Скоуп body:has(.seo_cats) — лише op. ── */
body:has(.seo_cats) .name_2{margin:70px 0 60px}          /* контент→H2=70 (top) ; H2→контент=60 (bottom) */
/* зазор subtitle .name_s → SEO-SELECT = 40 (FIX-B; глоб .name_s mb=24, +16 у op-контексті; .model_acc-скоуп не ловить op) */
body:has(.seo_cats) .name_s{margin-bottom:40px}

/* ── ТТХ-модифікацій (51:3902): донор-потік .models>.mod_mod>(.name_5+span) у 4 кол ── */
body:has(.seo_cats) .content>.models{display:grid;grid-template-columns:repeat(4,1fr);
  gap:0 27px;align-items:start;margin:0;padding:0}
body:has(.seo_cats) .models .mod_mod{display:block;margin:0}
body:has(.seo_cats) .models .name_5{font-family:Poppins,Arial,sans-serif;font-weight:600;
  font-size:18px;line-height:24px;color:var(--ink);margin:0 0 16px}     /* загол.→список=16 */
body:has(.seo_cats) .models .mod_mod span{display:block;font-family:Poppins,Arial,sans-serif;
  font-weight:400;font-size:14px;line-height:30px;color:var(--ink)}

/* ── SEO-категорії (51:3911-3914): 4 колонки посилань потоком (column-major як макет) ── */
.seo_cats{column-count:4;column-gap:27px;margin:0;padding:0}
.seo_cats a{display:block;break-inside:avoid;font-family:Poppins,Arial,sans-serif;
  font-weight:400;font-size:16px;line-height:36px;color:var(--ink);text-decoration:none}
.seo_cats a:hover{color:var(--orange);text-decoration:underline}

/* ── mod_other(.bg pb:20)→H2«Можливо»=70: H2 після .bg отримує margin-top:50 (20+50=70) ── */
body:has(.seo_cats) .bg + .content > .name_2{margin-top:50px}

/* ── text_footer .text+<br><br> НЕ в макеті op (SEO-cats→CTA напряму, §6) → сховати (макет=закон) ── */
body:has(.seo_cats) .content:has(.seo_cats) .text,
body:has(.seo_cats) .content:has(.seo_cats) br{display:none}

/* ── зазор SEO-категорії → CTA = 100 (.text схований; padding-bottom на .content) ── */
body:has(.seo_cats) .cta{margin-top:0}
body:has(.seo_cats) .content:has(.seo_cats){padding-bottom:100px}

/* ── §model_op АДАПТИВ (моб-макета немає — Слой-1: 4→2→1, gap>0, h-scroll=0) ── */
@media (max-width:1024px){
  body:has(.seo_cats) .content>.models{grid-template-columns:repeat(2,1fr);gap:0 24px}
  .seo_cats{column-count:3}
}
@media (max-width:768px){
  body:has(.seo_cats) .name_2{margin:50px 0 40px}
  body:has(.seo_cats) .bg + .content > .name_2{margin-top:30px}  /* bg pb:20 + 30 = 50 (моб-узгоджено) */
  body:has(.seo_cats) .content>.models{gap:0 20px}
  .seo_cats{column-count:2}
  body:has(.seo_cats) .content:has(.seo_cats){padding-bottom:60px}
}
@media (max-width:470px){
  body:has(.seo_cats) .content>.models{grid-template-columns:1fr}
  .seo_cats{column-count:1}
}
@media (max-width:350px){
  body:has(.seo_cats) .name_2{font-size:24px;line-height:32px;margin:40px 0 32px}
}
/* §model_op END */

/* §account START — служебный комплект АККАУНТ (донор-reskin под remb3, Figma НЕТ).
   Скоуп .user-page (wrapper shop_user.kiev:3). Цвета=токены remb3, radius16, Poppins, кнопка #3c3c3c→orange.
   Донор-механику (JS-toggle tab_info/tab_a/table_zakaz, login_lost absolute в .pr) НЕ ломаем. */

/* раскладка: login+registration — flex row, на ≤768 стопка full-width */
.user-page{display:flex;flex-wrap:wrap;gap:30px;align-items:flex-start}
/* нотисы/табы/профиль занимают всю ширину (не в ряд с карточками) */
.user-page .user_info,
.user-page>.info,
.user-page .tabs,
.user-page .tab_info{flex:1 1 100%;width:100%}

/* --- заголовки карточек (перебивают глобальный .name_4 только внутри .user-page) --- */
.user-page .name_4{font-size:18px;line-height:24px;font-weight:600;color:var(--ink);margin:0 0 20px}

/* --- карточка ВХОД --- */
.user-page .user_login{box-sizing:border-box;flex:0 1 360px;min-width:0;
  background:#fff;border-radius:16px;padding:28px;text-align:left;
  box-shadow:0 3px 12px rgba(0,0,0,.14);margin:0}

/* --- карточка РЕГИСТРАЦИЯ / восстановление (амнезия) --- */
.user-page .user_registration{box-sizing:border-box;flex:1 1 420px;min-width:0;
  background:var(--light);border-radius:16px;padding:28px;text-align:left;margin:0}

/* --- поля .inp_1 (реюз вид vin: h50 radius16 border--line focus--orange), width:100% в карточке --- */
.user-page .inp_1{box-sizing:border-box;width:100%;height:50px;background:#fff;
  border:1px solid var(--line);border-radius:16px;font-size:14px;color:var(--ink);
  font-family:inherit;margin:0 0 12px}
.user-page input.inp_1{padding:0 15px}
.user-page textarea.inp_1{height:90px;padding:12px 15px;line-height:1.4;resize:vertical;display:block}
.user-page .inp_1::placeholder{color:#9f9f9f;opacity:1}
.user-page .inp_1:focus{border-color:var(--orange);outline:0}
.user-page input.inp_1:disabled{background:var(--light);color:var(--gray);cursor:not-allowed}

/* --- кнопка .send (реюз vin): тёмная #3c3c3c → hover orange, width:100% в карточке --- */
.user-page .send{box-sizing:border-box;width:100%;height:50px;padding:0 24px;
  background:#3c3c3c;color:#fff;border:0;border-radius:16px;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:background .15s;margin:4px 0 0;-webkit-appearance:none}
.user-page .send:hover{background:var(--orange)}

/* --- «забыли?» — донор-паттерн absolute в relative .pr (механика сохранена) --- */
.user-page .pr{position:relative}
.user-page a.login_lost{position:absolute;right:14px;top:14px;background:transparent;
  color:var(--gray);font-size:13px;text-decoration:none;line-height:22px;transition:color .15s}
.user-page a.login_lost:hover{color:var(--orange)}
/* поле под кнопкой "забыли?" получает правый отступ чтоб текст не вылазил на ссылку */
.user-page .pr .inp_1{padding-right:70px}

/* --- нотис .user_info (save=1/11/12) --- */
.user-page .user_info{box-sizing:border-box;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:14px 18px;margin:0 0 16px;font-size:14px;color:var(--ink)}

/* --- ошибка .info .oops (error=0) — без донор-pulse, текст orange --- */
.user-page .info{box-sizing:border-box}
.user-page .oops{background:#fff3ee;color:var(--orange);font-weight:600;font-size:14px;
  border-radius:12px;padding:10px 16px;margin:0 0 8px}

/* --- ТАБЫ профиля (.tabs/.tabs li/.tabs_a) — реюз актив-вида сайта: ink + inset orange (как garage-таб) --- */
.user-page .tabs{display:inline-flex;list-style:none;margin:24px 0;padding:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;font-size:15px;font-weight:600;
  color:var(--gray)}
.user-page .tabs li{display:block;padding:16px 28px;cursor:pointer;border-left:1px solid var(--line);
  transition:color .15s,box-shadow .15s}
.user-page .tabs li:first-child{border-left:0}
.user-page .tabs li:hover{color:var(--ink)}
.user-page .tabs li.tabs_a{color:var(--ink);box-shadow:inset 0 -4px 0 var(--orange)}

/* --- карточка профиля .tab_user (внутри tab_info JS-toggle: none/block НЕ трогаем) --- */
.user-page .tab_user{box-sizing:border-box;background:#fff;border-radius:16px;padding:28px;margin:0}
.user-page .user_in_tab{width:100%}

/* --- таблица заказов .table_zakaz (display:none = JS-toggle сохранён) --- */
.user-page .table_zakaz{display:none;margin:12px 0 0}
.user-page .table_zakaz table{border:1px solid var(--line);width:100%;border-collapse:collapse;
  border-radius:16px;overflow:hidden;font-size:14px}
.user-page .table_zakaz th{background:var(--light);color:var(--ink);font-weight:600;
  padding:10px 12px;text-align:left}
.user-page .table_zakaz td{border-left:1px solid var(--line);border-top:1px solid var(--line);
  padding:10px 12px;color:var(--ink)}

/* --- адаптив 7 bp --- */
@media (max-width:1440px){
  .user-page .user_registration{flex:1 1 400px}
}
@media (max-width:1280px){
  .user-page{gap:24px}
}
@media (max-width:1024px){
  .user-page .user_login{flex:0 1 320px}
}
@media (max-width:768px){
  .user-page{gap:20px}
  .user-page .user_login,
  .user-page .user_registration{flex:1 1 100%;width:100%}
  .user-page .tabs{display:flex;width:100%}
  .user-page .tabs li{flex:1 1 0;padding:14px 8px;text-align:center}
}
@media (max-width:470px){
  .user-page .user_login,
  .user-page .user_registration,
  .user-page .tab_user{padding:20px}
  .user-page .tabs li{padding:12px 4px;font-size:14px}
  .user-page .table_zakaz th,
  .user-page .table_zakaz td{padding:8px 8px;font-size:13px}
}
@media (max-width:390px){
  .user-page .tabs li{font-size:13px}
}
@media (max-width:350px){
  .user-page .user_login,
  .user-page .user_registration,
  .user-page .tab_user{padding:16px}
  .user-page .pr .inp_1{padding-right:64px}
}
/* §account END */
/* §cart START — служебный комплект КОРЗИНА/ЧЕКАУТ (донор-reskin под remb3, Figma НЕТ).
   ДВА контекста рендера: (1) ADD-CART (see=1) инжектится в #window (модалка);
   (2) CHECKOUT (see=3,4) инжектится в #body.content_small.cart_open (НЕ #window) — JS вешает .cart_open;
   (3) CART-FINISH /cart-finish/ — page_cart.kiev: при живом заказе big оборачивается в .c (центр).
   Скоуп cart-уникальных классов = ГОЛЫЙ селектор (матчит #window И .cart_open, нигде вне корзины не встречается).
   Shared (.inp_1/.send) = скоуп-список (#window/.cart_open/.cart_fast_form/#cart_form), НЕ голый (account/vin реюз).
   .cart_open = белая центрированная карточка (донор .content_small+.cart_open). .content_small голый НЕ трогаем (account).
   Цвета=токены remb3, radius16 (контролы 8), Poppins, кнопка #3c3c3c→orange. Механику/JS/AJAX НЕ трогаем. */

/* === popup-chrome (shared: cart/search/vin модалки) === */
#modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px;box-sizing:border-box}
#modal.none{display:none}
#window{position:relative;box-sizing:border-box;background:#fff;border-radius:16px;
  padding:32px 40px;max-width:840px;width:100%;margin:auto;
  box-shadow:0 8px 40px rgba(0,0,0,.18);text-align:left}
.close{position:absolute;z-index:102;top:14px;right:14px;width:36px;height:36px;cursor:pointer;
  border-radius:12px;background:var(--light) url(face/close.svg) no-repeat 50%/16px;transition:background .15s}
.close:hover{background-color:var(--orange)}

/* === FIX1: обёртка ЧЕКАУТА (#body.cart_open) — центрированная белая карточка (донор .content_small+.cart_open).
   Скоуп .cart_open (класс есть ТОЛЬКО в состоянии чекаута); .content_small голый НЕ трогаем (используют account). === */
.cart_open{box-sizing:border-box;max-width:1040px;margin:40px auto;
  background:#fff;border-radius:16px;padding:30px 40px}

/* === 2.2 add_cart (добавлено в корзину) === */
#window .add_cart{text-align:center;color:var(--ink)}
#window .add_cart strong,#window .cart_fast strong{display:block;margin:8px 0;
  max-height:100px;overflow:hidden;color:var(--ink);font-weight:600}
#window .add_cart_img,#window .add_cart_price,#window .add_cart_more,#window .add_cart_go{
  display:inline-block;width:48%;max-height:200px;vertical-align:middle;box-sizing:border-box}
#window .add_cart_img{min-height:120px}
#window .add_cart_img IMG{max-width:180px;max-height:180px;object-fit:contain}
#window .add_cart_price{font-size:24px}
#window .add_cart_price .cart_minus,#window .add_cart_price .cart_plus{
  margin:0;border:1px solid var(--line);background:var(--light);color:var(--ink);
  height:40px;border-radius:8px;cursor:pointer;font-size:18px;padding:0 5px;
  transition:background .15s,color .15s,border-color .15s}
#window .add_cart_price .cart_minus:hover,#window .add_cart_price .cart_plus:hover{
  background:var(--orange);color:#fff;border-color:var(--orange)}
#window .add_cart_price input,#window #kolvo{height:40px;font-size:20px;
  border:1px solid var(--line);border-radius:8px;margin:0 5px;text-align:center;padding:0 5px;
  color:var(--ink);font-family:inherit;box-sizing:border-box}
#window .add_cart_price input:focus,#window #kolvo:focus{border-color:var(--orange);outline:0}
#window #add_cart_price{font-size:24px;font-weight:700;color:var(--ink)}
#window .add_cart_sp{display:block;color:var(--gray);text-align:center;margin:20px 0 10px;font-size:14px}
.cart_minus,.cart_plus{width:35px;cursor:pointer}
/* кнопка Оформить — реюз account-вида .send тёмная→orange, скоуп под обёртки cart */
#window .add_cart_go .send,#window .add_cart .send{box-sizing:border-box;width:100%;height:50px;
  padding:0 24px;background:#3c3c3c;color:#fff;border:0;border-radius:16px;font-size:15px;
  font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s;-webkit-appearance:none}
#window .add_cart_go .send:hover,#window .add_cart .send:hover{background:var(--orange)}

/* === 2.6 cart_fast (купить в 1 клик) — bleed к краям #window, слитный pill === */
#window .cart_fast{padding:24px;background:var(--light);margin:30px -40px -32px;
  border-radius:0 0 16px 16px;font-size:15px;position:relative;z-index:2;box-sizing:border-box}
#window .cart_fast strong{text-align:center}
#window .cart_fast_form{display:flex;justify-content:center;max-width:480px;margin:0 auto}
.cart_fast_form .inp_1{box-sizing:border-box;flex:1 1 auto;min-width:0;height:50px;
  background:#fff;border:1px solid var(--line);border-right:0;border-radius:16px 0 0 16px;
  font-size:14px;text-align:center;color:var(--ink);font-family:inherit;margin:0;padding:0 15px}
.cart_fast_form .inp_1:focus{border-color:var(--orange);outline:0}
.cart_fast_form .inp_1::placeholder{color:#9f9f9f;opacity:1}
.cart_fast_form .send{box-sizing:border-box;flex:0 0 auto;height:50px;padding:0 24px;
  border:0;border-radius:0 16px 16px 0;background:#3c3c3c;color:#fff;font-weight:600;font-size:15px;
  font-family:inherit;cursor:pointer;transition:background .15s;-webkit-appearance:none}
.cart_fast_form .send:hover{background:var(--orange)}

/* === 2.4 чекаут: форма «Данные покупателя» (#window И .cart_open) === */
.cart_form,#cart_form.cart_form{box-sizing:border-box;display:inline-block;vertical-align:top}
.cart_form h4,#cart_form h4,.cart_prod h4{font-size:18px;line-height:24px;
  font-weight:600;color:var(--ink);margin:0 0 20px;padding:0}
/* поля чекаута — реюз account-вида inp_1, скоуп-список под cart-обёртки (НЕ голый: account/vin) */
#window .cart_form .inp_1,.cart_open .cart_form .inp_1,#cart_form .inp_1,.cart_open #cart_form .inp_1,
#window .pay_info .inp_1,.cart_open .pay_info .inp_1,#window .add_cart .inp_1{
  box-sizing:border-box;width:100%;height:50px;background:#fff;border:1px solid var(--line);
  border-radius:16px;font-size:14px;color:var(--ink);font-family:inherit;margin:0 0 12px;padding:0 15px}
#window .cart_form textarea.inp_1,.cart_open .cart_form textarea.inp_1,#cart_form textarea.inp_1,
.cart_open #cart_form textarea.inp_1,#window .pay_info textarea.inp_1,.cart_open .pay_info textarea.inp_1{
  height:90px;padding:12px 15px;line-height:1.4;resize:vertical;display:block;max-width:100%}
#window .cart_form .inp_1:focus,.cart_open .cart_form .inp_1:focus,#cart_form .inp_1:focus,
.cart_open #cart_form .inp_1:focus,#window .pay_info .inp_1:focus,.cart_open .pay_info .inp_1:focus{
  border-color:var(--orange);outline:0}
#window .cart_form .inp_1::placeholder,.cart_open .cart_form .inp_1::placeholder,
#cart_form .inp_1::placeholder,.cart_open #cart_form .inp_1::placeholder{color:#9f9f9f;opacity:1}
/* #ship_info — триггер выбора доставки: вид inp_1 + шеврон right */
#ship_info{box-sizing:border-box;width:100%;min-height:50px;
  display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;
  font-size:14px;color:var(--ink);font-family:inherit;margin:0 0 12px;padding:0 40px 0 15px;
  cursor:pointer;text-align:left;line-height:1.3;position:relative}
#ship_info::after{content:"";position:absolute;right:15px;top:50%;
  width:12px;height:8px;transform:translateY(-50%);
  background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%231e1e1e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
#ship_info:hover{border-color:var(--orange)}
/* кнопка Оформить заказ — скоуп-список под cart (НЕ голый .send) */
#window .cart_form .send,.cart_open .cart_form .send,#cart_form .send,.cart_open #cart_form .send{
  box-sizing:border-box;width:100%;height:50px;padding:0 24px;
  background:#3c3c3c;color:#fff;border:0;border-radius:16px;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;transition:background .15s;margin:4px 0 0;-webkit-appearance:none}
#window .cart_form .send:hover,.cart_open .cart_form .send:hover,#cart_form .send:hover,
.cart_open #cart_form .send:hover{background:var(--orange)}
/* нотис .cart_text — мягкий remb3 (НЕ зелёный донора) */
.cart_text{background:#fff3ee;color:var(--ink);padding:14px 18px;
  border-radius:16px;margin:18px 0 0;text-align:center;font-size:14px}

/* === 2.3 таблица корзины === */
.cart_prod{box-sizing:border-box;display:inline-block;vertical-align:top}
#cart_prod{border:1px solid var(--line);border-radius:16px;padding:16px;box-sizing:border-box}
#cart_prod table{width:100%;border-collapse:collapse}
.cart_tr{width:100%;border-bottom:1px solid var(--line);margin:16px 0}
.cart_img{width:90px;height:90px;padding:0 16px 0 0;vertical-align:middle}
.cart_img IMG{max-width:85px;max-height:85px;object-fit:contain}
.cart_name{position:relative;text-align:left;padding:0 24px 0 0;vertical-align:middle}
.cart_name a,.cart_name b{max-height:70px;overflow:hidden;
  display:block;text-decoration:none;font-weight:600;color:var(--ink);transition:color .15s}
.cart_name a:hover{color:var(--orange);text-decoration:underline}
.cart_name span{display:block;color:var(--gray);font-size:13px}
/* кнопка удалить × — донор-паттерн absolute в relative .cart_name, в bounds */
.cart_del{position:absolute;top:0;right:0;width:24px;height:24px;cursor:pointer;
  border-radius:50%;background:var(--light) url(face/close.svg) no-repeat 50%/13px;opacity:.6;
  transition:opacity .15s,background-color .15s}
.cart_del:hover{opacity:1;background-color:var(--orange)}
.cart_price_one{text-align:left;color:var(--ink);white-space:nowrap;vertical-align:middle}
.cart_price_sum{white-space:nowrap;text-align:center;font-size:18px;
  font-weight:700;color:var(--ink);vertical-align:middle}
.cart_price_kolvo{width:120px;text-align:center;display:flex;
  align-items:center;justify-content:center;vertical-align:middle}
.cart_price_kolvo .cart_minus,.cart_price_kolvo .cart_plus{margin:0;border:1px solid var(--line);
  background:var(--light);color:var(--ink);height:34px;border-radius:8px;cursor:pointer;padding:0 8px;
  font-size:18px;transition:background .15s,color .15s,border-color .15s}
.cart_price_kolvo .cart_minus:hover,.cart_price_kolvo .cart_plus:hover{
  background:var(--orange);color:#fff;border-color:var(--orange)}
.kolvo{text-align:center;font-size:14px;padding:0 5px;width:36px;height:34px;
  border:1px solid var(--line);border-radius:8px;margin:0 4px;color:var(--ink);
  font-family:inherit;box-sizing:border-box}
.kolvo:focus{border-color:var(--orange);outline:0}

/* === 2.5 итого === */
.cart_itogo,#cart_itogo.cart_itogo{box-sizing:border-box;padding:0 16px}
.cart_itogo table{width:100%}
.cart_itogo td:nth-child(1){width:120px;padding:5px 0;color:var(--gray)}
.cart_itogo td:nth-child(2){text-align:right;padding:5px 0;color:var(--ink)}
.cart_itogo tr:last-child td:nth-child(2){font-size:18px;font-weight:700;color:var(--ink)}

/* === layout :3,4, форма(лево) + таблица(право) 2 колонки (#window И .cart_open) === */
#window .cart_form,#window #cart_form.cart_form,.cart_open .cart_form,.cart_open #cart_form.cart_form{width:320px}
#window .cart_prod,.cart_open .cart_prod{width:420px;margin:0 0 0 32px}
.cb{clear:both}

/* === 2.7 выбор доставки === */
.ships{box-sizing:border-box;display:flex;flex-direction:column;text-align:left;float:none;width:auto}
.ships ul{list-style:none;margin:0;padding:0}
.ships li span{color:var(--orange);border-bottom:1px dashed var(--orange);cursor:pointer}
.ship_name_one{font-size:16px;margin:4px 0;color:var(--ink)}
.ship_name_one strong{font-weight:600;margin:8px 0 2px;display:block}
.ship_name_one div,.ship_name div{
  padding:6px 10px;cursor:pointer;border-radius:8px;transition:background .15s}
.ship_name_one div:hover,.ship_name div:hover{background:var(--light)}
.ship_name{margin:0 0 2px 20px}
.ships_info{box-sizing:border-box}
.ships_info strong{display:block;font-size:15px;margin:0 0 15px;color:var(--ink)}
/* pay_info select — вид inp_1 + шеврон */
.pay_info{padding:0}
.pay_info select{box-sizing:border-box;width:100%;height:50px;
  border:1px solid var(--line);border-radius:16px;padding:0 40px 0 15px;font-size:14px;color:var(--ink);
  font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%231e1e1e' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center/12px 8px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pay_info select:focus{border-color:var(--orange);outline:0}

/* === 2.7-np Нова Пошта (DORMANT — закомментирован в shop_cart, не на live; defensive reskin) === */
.a_select{position:relative}
.a_select .an,#np_city,#np_otd{
  box-sizing:border-box;width:100%;height:50px;background:#fff;border:1px solid var(--line);
  border-radius:16px;padding:0 15px;font-size:14px;color:var(--ink);font-family:inherit;margin:0 0 12px}
.a_select .an:focus,#np_city:focus,#np_otd:focus{border-color:var(--orange);outline:0}
.a_sa,.a_select_n{box-sizing:border-box;background:#fff;
  border:1px solid var(--line);border-radius:16px;padding:6px 0;font-size:14px;color:var(--ink)}
.a_sa div,.a_select_n div{padding:8px 15px;cursor:pointer;
  transition:background .15s}
.a_sa div:hover,.a_select_n div:hover{background:var(--light)}

/* === 2.9 страница «заказ принят» /cart-finish/ — big оборачивается в .c при живом заказе (page_cart.kiev).
   FIX3: центрируем как донор (.c{text-align:center}), скоуп .content>.c — прямой потомок content
   (cart-finish .c = прямой child .content; vin .c = внутри .vin-page>form, НЕ заденет). === */
.content>.c{text-align:center}
.content .c{color:var(--ink);font-size:15px;line-height:1.6}
.content .c b{font-weight:600}
.content .c table{border:1px solid var(--line);border-collapse:collapse;border-radius:16px;
  overflow:hidden;width:100%;font-size:14px;margin:16px 0;text-align:left}
.content .c th{background:var(--light);color:var(--ink);font-weight:600;padding:10px 12px;text-align:left}
.content .c td{border-left:1px solid var(--line);border-top:1px solid var(--line);padding:10px 12px;color:var(--ink)}

/* === адаптив 7 bp (Слой-1: #window/.cart_open в bounds, на ≤768 модалка/карточка стопкой) === */
@media (max-width:1440px){
  #window .cart_prod,.cart_open .cart_prod{width:380px}
}
@media (max-width:1280px){
  #window{padding:28px 32px}
  #window .cart_fast{margin:30px -32px -28px}
}
@media (max-width:1100px){
  .cart_open{max-width:calc(100% - 32px);margin:24px auto;padding:24px}
}
@media (max-width:1024px){
  #window .cart_form,#window #cart_form.cart_form,.cart_open .cart_form,.cart_open #cart_form.cart_form{width:300px}
  #window .cart_prod,.cart_open .cart_prod{width:340px;margin:0 0 0 24px}
}
@media (max-width:768px){
  #modal{padding:14px;align-items:flex-start}
  #window{padding:24px;max-width:100%}
  #window .cart_fast{margin:24px -24px -24px}
  /* чекаут: форма+таблица в колонку, full-width (#window И .cart_open) */
  #window .cart_form,#window #cart_form.cart_form,#window .cart_prod,
  .cart_open .cart_form,.cart_open #cart_form.cart_form,.cart_open .cart_prod{display:block;width:100%;margin:0 0 20px}
  #window .add_cart_img,#window .add_cart_price,#window .add_cart_more,#window .add_cart_go{
    display:block;width:100%;margin:0 0 12px}
  /* доставка — правая инфо скрывается (донор-паттерн) */
  .ships{width:auto}
  .ships_info{display:none}
}
@media (max-width:470px){
  #window{padding:20px}
  #window .cart_fast{margin:20px -20px -20px;padding:20px}
  /* 1-клик: стопка full-width radius16 */
  #window .cart_fast_form{flex-direction:column;max-width:100%}
  .cart_fast_form .inp_1{border-right:1px solid var(--line);border-radius:16px;margin:0 0 10px}
  .cart_fast_form .send{border-radius:16px;width:100%}
  .cart_img{width:64px;height:64px;padding:0 10px 0 0}
  .cart_img IMG{max-width:60px;max-height:60px}
  .cart_price_one,.cart_price_sum{font-size:14px}
}
@media (max-width:390px){
  #window{padding:16px}
  #window .cart_fast{margin:16px -16px -16px}
  .cart_price_kolvo{width:96px}
  .kolvo{width:30px;margin:0 2px}
}
@media (max-width:350px){
  #window .add_cart_price .cart_minus,#window .add_cart_price .cart_plus{padding:0 3px}
  .kolvo{width:28px}
}
/* CART-FINISH H1 center (donor .bread+h1{text-align:center} style.css:423; remb3 H1 left for 16 accepted, scope .l-page-cart = ONLY /cart-finish/) */
.l-page-cart>.content>h1{text-align:center}
/* §cart END */

/* ═══════════════════════════════════════════════════════════════════════
   §drilldown START — brand-drilldown /search-<ART>/<BRAND>/ (гілка $brand!='')
   CSS-скін донора (allzap-template .prod_* 2096-2165) у токени remb3. Механіку
   (tecdoc-SQL/prod()/cart/a_price) НЕ чіпаємо. Скоуп: .prod_tr-сімейство під
   .l-find_12345 (на старт-пошуку prod_tr=0 → коллізії нема); h2 «Аналоги» =
   .l-find_12345 .content>h2 (прямий нащадок; старт-пошук h2=0 → 0 матчів).
   .tah0/.tah1/.prod_prices_all/.buy/.find_nf вже заскінені — НЕ переписуємо.
   ═══════════════════════════════════════════════════════════════════════ */
/* картка-рядок аналога (донор bg#FFF;border#E0E0E0;margin0 0 20 → токени+radius16) */
.l-find_12345 .prod_tr{display:flex;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-radius:16px;margin:0 0 20px;overflow:hidden}
/* ліво: фото+текст (донор 728px фікс → пропорція донора 728:546≈57:43, плине в .content 1240) */
.l-find_12345 .prod_info{flex:0 1 57%;box-sizing:border-box;padding:20px 20px 10px;
  display:flex;align-items:center}
/* фото-колонка (донор .prod_info .prod_img{180px}) */
.l-find_12345 .prod_img{flex:0 0 180px;text-align:center}
.l-find_12345 .prod_img a{display:block;text-align:center}
.l-find_12345 .prod_img img{max-width:100%;max-height:180px;width:auto;height:auto;display:block;margin:0 auto}
/* плейсхолдер-лого при відсутньому фото — повний кольоровий лого RemBaza (як у шапці),
   contain щоб увесь лого влазив, центр (vda «нормальний лого рембази») */
.l-find_12345 .prod_img i{display:block;width:100%;height:180px;box-sizing:border-box;
  background:#f5f5f5 url(/img/logo-dark.svg?v2) no-repeat 50%;background-size:150px 50px;border-radius:12px}
/* назва+ТТХ (донор color#747474;width:474;padding 0 15 → токен gray) */
.l-find_12345 .prod_txt{flex:1 1 auto;min-width:0;color:var(--gray);padding:0 0 0 15px}
/* назва-посилання (донор bold 16 #000 → 600 ink + hover orange) */
.l-find_12345 .prod_txt a,.l-find_12345 .prod_txt strong{display:block;
  font-weight:600;font-size:16px;line-height:24px;color:var(--ink);margin:0 0 8px;text-decoration:none}
.l-find_12345 .prod_txt a:hover{color:var(--orange);text-decoration:underline}
/* ТТХ-рядки (донор-CSS нема → наслідує prod_txt; читабельний блок токеном gray) */
.l-find_12345 .prod_har{color:var(--gray);font-size:13px;line-height:18px}
/* право: таблиця цін (донор 546px фікс → пропорція 43%, .tah0 card-stack всередині) */
.l-find_12345 .prod_prices{flex:0 1 43%;box-sizing:border-box;min-width:0}
/* h2 «Аналоги для…» — стиль як H2 прийнятих; ПРЯМИЙ нащадок .content (НЕ .find_res .name_2) */
.l-find_12345 .content>h2{font-size:18px;font-weight:600;line-height:24px;
  color:var(--ink);margin:40px 0 24px}

/* ── §drilldown АДАПТИВ (моб-макета нема → Слой-1 строго, потік стопкою) ── */
@media (max-width:768px){
  /* інфо+ціни стопкою (донор ≤1000 робить .prod_info flex/100% + .prod_prices block/100%) */
  .l-find_12345 .prod_tr{flex-direction:column}
  .l-find_12345 .prod_info{flex:1 1 auto;width:100%;padding:16px 16px 8px}
  .l-find_12345 .prod_prices{flex:1 1 auto;width:100%;padding:0 16px 16px}
  .l-find_12345 .content>h2{margin:32px 0 16px}
}
@media (max-width:470px){
  /* кнопка «Купити» = full-width рядок (моб-стопка td block), filled з height збережено */
  .l-find_12345 .tah0 .buy{width:100%;min-width:0}
  /* фото зверху, текст під ним (донор ≤470 .prod_info{display:block;text-align:center}) */
  .l-find_12345 .prod_info{flex-direction:column;align-items:center;text-align:center}
  .l-find_12345 .prod_img{flex:0 0 auto;width:100%}
  .l-find_12345 .prod_txt{padding:12px 0 0;text-align:center}
}
/* ── Слой-1 h-scroll=0 гард: PHP-warning друкує СИРИЙ серверний шлях
   /var/www/.../shop_search_table.kiev у <b> всередині .content (нерозривний
   довгий токен) → @390 переповнює вьюпорт (h-scroll 34px). Донор стримує
   body{overflow-x:auto}, у remb3 нема. Скоуп під .l-find_12345 .content —
   anywhere ламає ЛИШЕ те, що інакше переповнює (норм.текст невидимо).
   Сам warning = backend/display_errors (зона vda, є й у донора) → BACKEND-TODO. */
.l-find_12345 .content{overflow-wrap:anywhere}

/* ── §drilldown FIX (vda «уебська»): .no_price button НЕ був заскінений під .l-find_12345
   (pill-стиль існував ТІЛЬКИ під .cat_prods .pro .no_price button:759 → на drilldown гола
   дефолтна кнопка браузера w124 h17 висіла сиротою зверху колонки, prod_prices h=20).
   РЕЮЗ прийнятого OOS-pill каталога (759) у токени remb3 + центрування в колонці як у донора
   (донор .no_price{text-align:center}+button margin:40px auto, центр колонки h134). НЕ донор-синій. */
/* картка з no_price: розтягнути праву колонку на всю висоту, щоб кнопка центрувалась (донор) */
.l-find_12345 .prod_tr:has(.no_price){align-items:stretch}
.l-find_12345 .prod_prices:has(.no_price){display:flex}
/* колонка .no_price = flex-центр (верт+гор), воздух зверху/знизу як донор (≈40px) */
.l-find_12345 .prod_prices .no_price{display:flex;flex-direction:column;
  align-items:center;justify-content:center;flex:1 1 auto;text-align:center;padding:40px 20px;min-height:114px}
/* кнопка-pill = РЕЮЗ .cat_prods .pro .no_price button:759 (bg#fff/border1px--line/r16/--gray/Poppins SemiBold14 lh20/hover orange); ширина авто (колонка вузька 43%), НЕ full-width */
.l-find_12345 .prod_prices .no_price button{width:auto;min-width:0;height:auto;padding:14px 30px;display:inline-flex;align-items:center;justify-content:center;font-family:Poppins,Arial,sans-serif;line-height:20px}
/* моб (≤768): колонка вже block/width100% — кнопка центр, воздух менше */
/* ── §drilldown FIX2 (vda «кнопка Купити вузька»; фото-центрування злито в base .prod_info align-items:center :2066):
   КНОПКА «Купити» в .tah0 (drilldown) була ГОЛИЙ текст-лінк w44 h20 (глоб :546
      .tah0 .buy{display:inline;background:none;border:0} — попап «всі ціни» на ПРИЙНЯТІЙ
      картці). РЕЮЗ прийнятого filled-buy патерну (.tovar_row/.pro .buy = bg var(--field2)/
      #fff/r16/Poppins SemiBold/hover orange), компакт під вузьку колонку таблиці (4 ряди).
      СТРОГО scoped .l-find_12345 — глоб :546 (попап) НЕ чіпаємо. */
.l-find_12345 .tah0 .buy{display:inline-flex;align-items:center;justify-content:center;
  min-width:104px;height:44px;padding:0 18px;margin:0;border:0;border-radius:16px;
  background:var(--field2);color:#fff;font-family:Poppins,Arial,sans-serif;font-size:14px;
  line-height:20px;font-weight:600;text-decoration:none;cursor:pointer;
  transition:background-color .2s;white-space:nowrap}
.l-find_12345 .tah0 .buy:hover{background:var(--orange);color:#fff;text-decoration:none}
/* ячейка кнопки: текст-align:right прижимав вузький лінк до краю → центр у своїй td */
.l-find_12345 .tah0 td:last-child{text-align:center;vertical-align:middle}
/* §drilldown END */

/* ═══════════════════════════════════════════════════════════════════════
   §sitemap START — /sitemap/ + 404 (обидва через core/syst/sitemap.kiev)
   CSS-скін донора (донор-розмітка гола → скромний скін у токени remb3).
   Механіку (artkiev_pages_tree/pid=8 .block-brands/404-хедер) НЕ чіпаємо.
   Скоуп: все під .l-sitemap (унікальний для sitemap/404). .block-brands —
   вже заскінений (pid=8) → НЕ ТРОГАЄМО. .bread — глоб → НЕ переписуємо.
   ═══════════════════════════════════════════════════════════════════════ */
/* контейнер-блок карти/404 — верт.відступи (як прийняті контент-блоки) */
.l-sitemap .sitemaps{margin:40px 0 60px;color:var(--ink)}
/* h2 «Страница не найдена» (ТІЛЬКИ 404) — єдиний службовий стиль заголовка (як .find_nf) */
.l-sitemap .title-section{font-size:24px;font-weight:600;line-height:32px;
  color:var(--ink);margin:0 0 24px}
/* дерево розділів: прибрати дефолт-буллети+відступи браузера */
.l-sitemap .sitemaps ul{list-style:none;margin:0;padding:0}
.l-sitemap .sitemaps>ul{display:flex;flex-wrap:wrap;gap:32px 40px}
.l-sitemap .sitemaps>ul>li{flex:0 1 280px;min-width:0}
/* топ-посилання розділу (донор гола <a> → заголовок гілки ink/600 → hover orange) */
.l-sitemap .sitemap_name{display:inline-block;font-weight:600;font-size:16px;
  line-height:24px;color:var(--ink);text-decoration:none;margin:0 0 8px}
.l-sitemap .sitemap_name:hover{color:var(--orange)}
/* вкладене дерево (діти розділу) — indent, gap, типографіка gray→hover orange */
.l-sitemap .sitemaps>ul>li ul{padding:0 0 0 4px}
.l-sitemap .sitemaps li li{margin:0 0 6px}
.l-sitemap .sitemaps li li a{font-size:14px;line-height:20px;color:var(--gray);text-decoration:none}
.l-sitemap .sitemaps li li a:hover{color:var(--orange)}

/* ── .block-brands (pid=8) — РІЗНИЙ клас від home .marki; у remb3 НІКОЛИ
   не скінився → глоб img{display:block} (style.css:19) робив <img> блочним
   → кожен бренд у свій рядок → башта 3184px. Донор .block-brands CSS НЕ має
   → його <a> inline → компактний wrap ~260px. Скін: компактна решітка,
   img width+flex ПЕРЕБИВАЄ глоб display:block. Inner=<a><img><span>текст</span></a>. */
.l-sitemap .block-brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 16px;margin:0 0 32px}
.l-sitemap .block-brands a{display:flex;align-items:center;gap:10px;min-width:0;color:var(--ink);text-decoration:none}
.l-sitemap .block-brands img{width:28px;height:28px;object-fit:contain;flex:0 0 28px;filter:grayscale(100%);transition:filter .15s}
.l-sitemap .block-brands span{min-width:0;font-size:14px;line-height:18px;overflow-wrap:break-word}
.l-sitemap .block-brands a:hover img{filter:none}
.l-sitemap .block-brands a:hover span{color:var(--orange);text-decoration:underline}

/* ── §sitemap АДАПТИВ (моб: одна колонка, читабельне дерево) ── */
@media (max-width:768px){
  .l-sitemap .sitemaps{margin:24px 0 40px}
  .l-sitemap .sitemaps>ul{flex-direction:column;gap:24px}
  .l-sitemap .sitemaps>ul>li{flex:1 1 auto}
  .l-sitemap .block-brands{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
/* §sitemap END */

/* §shop_part delivery/pay icons (Figma 51:5126/5156) START */
.ico_meest{background-image:url(/img/face/ico_meest.png)}
.ico_curier{background-image:url(/img/face/ico_curier.svg)}
.ico_apple{background-image:url(/img/face/ico_apple.svg)}
.ico_gpay{background-image:url(/img/face/ico_gpay.svg)}
/* §shop_part delivery/pay icons END */

/* ============================================================
   VIRTUS-FIX (2026-06-12) — 3 точечні CSS-правки, аддитивно, scoped.
   ============================================================ */

/* virtus-fix #4 — порожній кошик: некликабельний <div> без .cart_a → cursor:default.
   Кликабельний стан .cart>div.cart_a зберігає cursor:pointer (правило вище). */
.cart>div:not(.cart_a){cursor:default}

/* virtus-fix #10 — /vin/ селектори марка/модель/рік: повернути стрілку випадання.
   Донорський підхід 1:1 — data-URI вертикальна стрілка (parts.allzap.pro .inp_1 select),
   right center / 8px 10px. appearance:none НЕ чіпаємо, нативну НЕ повертаємо. */
.vin-page span.inp_1 select{background:transparent 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 12px center;background-size:8px 10px;padding-right:30px}

/* virtus-fix #9 — «Підійде до авто» .mod_other2: resting-підкреслення (affordance).
   Колір у спокої лишається --ink; hover (orange+underline) НЕ чіпаємо. */
.mod_other2 span{text-decoration:underline;text-underline-offset:2px}

/* virtus-fix #2b (vda: shrink logo+search) — відступи блоку телефонів .phones у шапці (Figma 51:110).
   Ціль Figma на 1440: зазор nomer.right→phones.left ~42px, phones.right→cart.left ~41px.
   При донорських ширинах (logo 250, search 408) вільного місця бракує (~37px на два зазори).
   vda дозволив СТИСНУТИ logo+search (CTA/nomer/phones/cart НЕ чіпаємо), щоб звільнити ~46px:
   logo 250->230 (висота 84->77, аспект збережено ~2.99), search 408->382.
   .phones розводимо симетрично двома auto-margin → ~42/41px без стиснення сусідів. */
@media(min-width:1360px){
  .head .logo img{width:230px;height:77px}
  .head .search{width:382px}
  .head .phones{margin-left:auto;margin-right:auto}
  .head .cart{margin-left:0}
}

/* virtus-fix #8 — заглушка ЛОГО RemBaza для товару без фото.
   При порожньому art_img рендериться порожній <i></i> у .pro .pro_img (зона 280px) — порожнеча.
   Показуємо приглушене лого (logo-dark.svg — тёмний текст, читається на білій картці) по центру.
   Покриває аналоги І картки лістингу (той самий .pro .pro_img i). Картки з фото (<img>) НЕ чіпає. */
.pro .pro_img i{display:block;width:100%;height:100%;background:url(/img/logo-dark.svg) center/auto 56px no-repeat;opacity:.35}

/* §noprice-card START (virtus, vda: кнопка «Уточнить наличие» на картці товару була ГОЛА —
   скоуп .no_price button існував лише під .cat_prods/.shop_right/.shop_part_sim/.l-find_12345,
   до картки не діставав. DOM: .tovar_info>.tovar_rows>.tovar_row>.no_price>button[cars_un] (донор-механіка).
   .no_price тут — СУСІД .tovar_svs (спец-рядки), обидва діти .tovar_row → правильний скоуп .tovar_info .no_price.
   РЕЮЗ прийнятого OOS-pill (.cat_prods .pro .no_price button:792, токени remb3): bg#fff/border1px--line/r16/
   --gray/Poppins SemiBold14 lh20/hover orange. Ширина АВТО (по тексту, НЕ full-width — як донор margin:40px auto
   та drilldown-фікс:2187). Воздух верт. як донор (≈32px) — кнопка не липне до «Артикул» зверху / «Доставка» знизу. */
.tovar_info .no_price{text-align:center;margin:32px 0}
.tovar_info .no_price button{width:auto;min-width:0;height:auto;display:inline-flex;align-items:center;justify-content:center;font-family:Poppins,Arial,sans-serif;line-height:20px;padding:14px 30px}
/* §noprice-card END */