@charset "UTF-8";

/* ============================================================
   STYLE.CSS — единственный CSS-файл проекта RemBaza.
   После натяжки на Allzap кладётся в /img/style.css

   Структура секций:
   1. VARIABLES   — CSS-переменные (токены дизайна)
   2. RESET       — нормализация
   3. FONTS       — @font-face (Poppins подключён через Google Fonts в head)
   4. BASE        — html, body, типографика
   5. LAYOUT      — .content, сетки
   6. COMPONENTS  — переиспользуемые блоки
   7. PAGES       — стили специфичные для одной страницы
   8. UTILITIES   — хелперы
   9. MEDIA       — адаптив (по донору parts.allzap.pro)
   ============================================================ */


/* ============================================================
   1. VARIABLES
   ============================================================ */
:root {
  /* === COLORS === */
  /* Базовые поверхности */
  --color-bg:                  #ffffff;
  --color-surface:             #f0f0f0;  /* "Потрібна допомога" банер фон */
  --color-surface-2:           #f0f0f0;  /* фон табов селектора авто */
  --color-card-soft:           #e0e0e0;  /* фон карточек "популярні категорії" (placeholder для image) */

  /* Тёмные поверхности (шапка-фундамент RemBaza) */
  --color-topbar-bg:           #171717;  /* самая тёмная полоса (top-bar) */
  --color-header-bg:           #1e1e1e;  /* основная шапка */
  --color-menu-bg:             #3c3c3c;  /* меню каталога (тёмно-серая полоса) */
  --color-footer-bg:           #1e1e1e;  /* подвал */
  --color-input-dark:          #313131;  /* инпут поиска артикула в шапке */
  --color-input-dark-2:        #3c3c3c;  /* поле "номер авто" с прапором и помощь кнопка */
  --color-divider-dark:        #484848;  /* разделитель табов каталога */
  --color-lang-active-bg:      #1e1e1e;  /* активный язык в top-bar */

  /* Текст */
  --color-text:                #1e1e1e;  /* основной */
  --color-text-muted:          #7e7e7e;  /* meta, ссылки в топ-баре/футере */
  --color-text-placeholder:    #adadad;  /* плейсхолдеры инпутов */
  --color-text-inverse:        #ffffff;  /* на тёмном фоне */

  /* Акцент (primary RemBaza) */
  --color-primary:             #f95203;
  --color-primary-hover:       #e04902;
  --color-primary-active:      #c83e02;
  --color-primary-soft:        #fff4e6;

  /* Семантические */
  --color-success:             #10b981;
  --color-warning:             #f59e0b;
  --color-error:               #ef4444;

  /* Бордеры */
  --color-border-soft:         #e0e0e0;  /* брэнд-карточки, ghost-кнопки */
  --color-border:              #d5d5d5;
  --color-border-strong:       #adadad;
  --color-divider:             #f0f0f0;

  /* Прапор UA */
  --color-flag-blue:           #0067c8;
  --color-flag-yellow:         #ffe81d;

  /* === TYPOGRAPHY === */
  --font-base:                 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-heading:              var(--font-base);

  --fs-xs:                     12px;
  --fs-sm:                     14px;
  --fs-base:                   16px;
  --fs-lg:                     18px;
  --fs-xl:                     20px;
  --fs-2xl:                    24px;
  --fs-3xl:                    32px;
  --fs-4xl:                    40px;
  --fs-5xl:                    50px;

  --fw-regular:                400;
  --fw-medium:                 500;
  --fw-semibold:               600;
  --fw-bold:                   700;

  --lh-tight:                  1.2;
  --lh-base:                   1.5;
  --lh-relaxed:                1.7;
  --lh-hero:                   1.4;       /* 70px / 50px */

  /* === SPACING === */
  --sp-0:                      0;
  --sp-1:                      4px;
  --sp-2:                      8px;
  --sp-3:                      12px;
  --sp-4:                      16px;
  --sp-5:                      20px;
  --sp-6:                      24px;
  --sp-8:                      32px;
  --sp-10:                     40px;
  --sp-12:                     48px;
  --sp-16:                     64px;
  --sp-20:                     80px;
  --sp-24:                     96px;

  /* === LAYOUT === */
  --container-width:           1280px;
  --container-padding:         16px;

  /* === RADIUS === */
  --r-xs:                      4px;        /* lang badge */
  --r-sm:                      6px;
  --r-md:                      8px;        /* мала кнопка / іконка */
  --r-lg:                      12px;
  --r-xl:                      16px;       /* інпути, CTA, картки */
  --r-full:                    9999px;     /* badge корзини */

  /* === SHADOWS === */
  --shadow-sm:                 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:                 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-submenu:            0 3px 12px rgba(0, 0, 0, 0.14);
  --shadow-card:               0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg:                 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);

  /* === TRANSITIONS === */
  --ease-base:                 cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:                  150ms;
  --dur-base:                  250ms;
  --dur-slow:                  400ms;

  /* === Z-INDEX === */
  --z-dropdown:                100;
  --z-sticky:                  200;
  --z-header:                  300;
  --z-modal-backdrop:          400;
  --z-modal:                   500;
  --z-popup:                   600;
}

/* Tablet */
@media (min-width: 768px) {
  :root { --container-padding: 20px; }
}

/* Desktop */
@media (min-width: 1024px) {
  :root { --container-padding: 24px; }
}

/* Wide desktop — точне співпадіння з Figma 1280 grid (5 tabs × 256 = 1280) */
@media (min-width: 1281px) {
  :root { --container-padding: 0px; }
}


/* ============================================================
   2. RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }


/* ============================================================
   3. FONTS
   ============================================================ */
/* Poppins подключается через Google Fonts <link> в /partials/head.html
   на этапе вёрстки. Агент-натяжитель при натяжке на Allzap заменит на
   локальные /img/Poppins-*.woff2 файлы и добавит @font-face declarations. */


/* ============================================================
   3. FONTS — local Poppins (натяжитель додав замість Google Fonts <link>,
   як handoff передбачав у коментарі секції 3 FONTS вище)
   ============================================================ */
@font-face { font-family: "Poppins"; src: url("Poppins-Regular.woff2")  format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("Poppins-Medium.woff2")   format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("Poppins-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("Poppins-Bold.woff2")     format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }


/* ============================================================
   4. BASE
   ============================================================ */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-5xl); line-height: var(--lh-hero); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-base); }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  transition: color var(--dur-fast) var(--ease-base);
}
a:hover { color: var(--color-primary); }

/* Заголовок секции — 40px Poppins Bold (общий для всех страниц) */
.section-title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-text);
  margin: 0 0 var(--sp-8);
}


/* ============================================================
   5. LAYOUT
   ============================================================ */
.content {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

main { display: block; }


/* ============================================================
   6. COMPONENTS
   ============================================================ */

/* --- 6.1 Buttons -------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 60px;
  padding: 0 var(--sp-8);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  border-radius: var(--r-xl);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-base),
              color var(--dur-fast) var(--ease-base),
              border-color var(--dur-fast) var(--ease-base);
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }
.btn--primary:active { background: var(--color-primary-active); }

.btn--ghost {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-soft);
}
.btn--ghost:hover { color: var(--color-text); border-color: var(--color-text-muted); }

.btn--sm {
  height: 40px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 20px;
  border-radius: var(--r-md);
}

.btn--block { width: 100%; display: flex; }

.btn--icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: var(--r-md);
}

/* .send — системный класс submit-кнопок Allzap.
   Базовый стиль = primary CTA (оранжевый, 60px, 16px radius). */
.send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 var(--sp-8);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border: 0;
  border-radius: var(--r-xl);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-base);
}
.send:hover { background: var(--color-primary-hover); }
.send:active { background: var(--color-primary-active); }


/* --- 6.2 Forms ---------------------------------------------- */
.inp_1 {
  display: block;
  width: 100%;
  height: 60px;
  padding: 0 var(--sp-5);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 24px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  outline: 0;
  transition: border-color var(--dur-fast) var(--ease-base);
}
.inp_1::placeholder { color: var(--color-text-placeholder); }
.inp_1:focus { border-color: var(--color-primary); }
.inp_1.error { border-color: var(--color-error); }

select.inp_1 {
  appearance: none;
  -webkit-appearance: none;
  background-image: url('/img/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  padding-right: var(--sp-10);
  cursor: pointer;
}

textarea.inp_1 {
  height: auto;
  min-height: 120px;
  padding: var(--sp-4) var(--sp-5);
  resize: vertical;
}


/* --- 6.3 Cards ---------------------------------------------- */
/* TODO: переиспользуемые карточки услуг/статей — добавятся при вёрстке articles.html */


/* --- 6.4 Header --------------------------------------------- */

/* TOP BAR (темна полоса 40px) — над .header */
.top-bar {
  background: var(--color-topbar-bg);
  height: 40px;
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--color-text-muted);
}
.top-bar > .content {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: 100%;
}

#menu_top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
  margin: 0;
  padding: 0;
}
#menu_top li { list-style: none; }
#menu_top a {
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--color-text-muted);
  text-decoration: none;
}
#menu_top a:hover { color: var(--color-text-inverse); }
#menu_top .active a,
#menu_top a[aria-current="page"] {
  color: var(--color-text-inverse);
  text-decoration: underline;
}

/* RemBaza-extra menu_top__* елементи (Round 16): phone/lang/login/soc.
   Приховані ЗАВЖДИ на desktop через базове правило #menu_top .menu_top__* { display: none }.
   На mobile @media 1000px перевизначається через .open_menu .menu_top .menu_top__* { display: block }. */
#menu_top .menu_top__soc,
#menu_top .menu_top__lang,
#menu_top .menu_top__login,
#menu_top .menu_top__phone { display: none; }

.top-bar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  margin-left: auto;
}

/* Перемикач мови */
.lang {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.lang b,
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 26px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 18px;
  color: var(--color-text-muted);
  border-radius: var(--r-xs);
  text-decoration: none;
}
.lang b {
  color: var(--color-text-inverse);
  background: var(--color-lang-active-bg);
}
.lang a:hover { color: var(--color-text-inverse); }

/* Авторизация / Кабинет */
.top-bar .login,
.login {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.top-bar .login a,
.top-bar .login .profile,
.top-bar .login .profile_ok {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: 18px;
  color: var(--color-text-muted);
  text-decoration: underline;
}
.top-bar .login a:hover { color: var(--color-text-inverse); }
.top-bar .login .login__icon {
  width: 18px;
  height: 18px;
  background: url('/img/icons/user.svg') no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: 0.5;
  display: inline-block;
}
.top-bar .login a:hover .login__icon { opacity: 1; }


/* HEADER MAIN (темна полоса 134px) */
.header {
  background: var(--color-header-bg);
  position: relative;
}
.header > .content {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 134px;
}

/* LOGO */
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 250px;
  height: 84px;
}
.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* SEARCH (артикул) */
.search {
  position: relative;
  flex: 1 1 408px;
  max-width: 408px;
}
.search form { position: relative; width: 100%; }
.search input[name="search"],
.search input[type="text"] {
  width: 100%;
  height: 60px;
  padding: 0 60px 0 var(--sp-5);
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--color-text-inverse);
  background: var(--color-input-dark);
  border: 0;
  border-radius: var(--r-xl);
  outline: 0;
}
.search input::placeholder { color: var(--color-text-placeholder); }
.search button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: var(--color-primary) url('/img/icons/search.svg') no-repeat center / 20px 20px;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-base);
}
.search button:hover { background-color: var(--color-primary-hover); }

/* search--nav: прихований на desktop, видимий тільки на ≤761px */
@media (min-width: 762px) {
  nav .search--nav { display: none; }
}

/* PLATE SEARCH (поле "номер авто") */
.plate-search {
  position: relative;
  width: 200px;
  height: 60px;
  flex-shrink: 0;
}
.plate-search form { position: relative; width: 100%; height: 100%; }
.plate-search input {
  width: 100%;
  height: 100%;
  padding: 0 60px 0 47px;
  font-family: var(--font-base);
  font-size: var(--fs-sm);
  line-height: 20px;
  color: var(--color-text-inverse);
  background: var(--color-input-dark);
  border: 0;
  border-radius: var(--r-xl);
  outline: 0;
}
.plate-search input::placeholder { color: var(--color-text-placeholder); }
.plate-search__flag {
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: var(--r-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.plate-search__flag::before,
.plate-search__flag::after {
  content: '';
  flex: 1;
  display: block;
}
.plate-search__flag::before { background: var(--color-flag-blue); }
.plate-search__flag::after { background: var(--color-flag-yellow); }
.plate-search button {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: var(--color-input-dark-2) url('/img/icons/search.svg') no-repeat center / 20px 20px;
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
}

/* PHONE block */
.phone {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-left: auto;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 22px;
  color: var(--color-text-inverse);
}
.phone a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text-inverse);
  white-space: nowrap;
}
.phone a:hover { color: var(--color-primary); }
.phone a::before {
  content: '';
  width: 20px;
  height: 20px;
  background: url('/img/icons/phone.svg') no-repeat center / contain;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}
/* Стилизация кода страны (серый) — донор использует <span> внутри ссылки */
.phone a span:first-child,
.phone a .ks,
.phone a .vf { color: var(--color-text-muted); }

/* CART mini */
.cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  color: var(--color-text-inverse);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 22px;
}
.cart > a,
.cart > div {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--color-text-inverse);
}
.cart > div { text-decoration: underline; }
.cart::before {
  content: '';
  position: relative;
  width: 40px;
  height: 40px;
  background: var(--color-topbar-bg) url('/img/icons/cart.svg') no-repeat center / 24px 24px;
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.cart span {
  position: absolute;
  top: 3px;
  left: 21px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: var(--fw-medium);
  line-height: 16px;
  text-align: center;
  text-decoration: none;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-radius: var(--r-full);
}


/* --- 6.5 Footer --------------------------------------------- */
footer {
  background: var(--color-footer-bg);
  color: var(--color-text-muted);
  padding: 60px 0 40px;
}
footer .content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  column-gap: var(--sp-8);
  row-gap: var(--sp-6);
  align-items: start;
}
.footer_logo {
  display: inline-flex;
  align-items: center;
  width: 200px;
  height: 67px;
  grid-column: 1;
  grid-row: 1;
}
.footer_logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.footer_row {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer_row:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; }
.footer_row:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; }
.footer_row:nth-of-type(3) { grid-column: 4; grid-row: 1 / span 2; }
.footer_row a,
.footer_row p,
.footer_row span,
.footer_row .ks,
.footer_row .vf {
  font-size: var(--fs-sm);
  line-height: 22px;
  color: var(--color-text-muted);
}
.footer_row a:hover { color: var(--color-text-inverse); }
.name_3 {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 24px;
  color: var(--color-text-inverse);
  margin-bottom: var(--sp-3);
}
.footer_row ul { display: flex; flex-direction: column; gap: 0; }
.footer_row ul a { line-height: 28px; }
.footer_row .active a,
.footer_row a[aria-current="page"] {
  color: var(--color-text-inverse);
  text-decoration: underline;
}
.footer_row .social { margin-top: var(--sp-3); }

.logos {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-8);
}
.logos img {
  height: 20px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}
.logos img[alt="VISA"]       { width: 68px; }
.logos img[alt="Mastercard"] { width: 33px; }
.logos img[alt="Google Pay"] { width: 52px; }
.logos img[alt="Apple Pay"]  { width: 48px; }

.copy {
  grid-column: 1 / -1;
  grid-row: 3;
  font-size: var(--fs-sm);
  line-height: 22px;
  color: var(--color-text-muted);
  margin-top: var(--sp-4);
}

.footer_line {
  grid-column: 1 / -1;
  grid-row: 3;
  height: 1px;
  background: var(--color-divider-dark);
  margin: var(--sp-6) 0;
  display: none;
}


/* --- 6.6 Navigation ----------------------------------------- */

/* Меню каталога — тёмная полоса #3c3c3c */

nav {
  background: var(--color-menu-bg);
  position: relative;
}
nav > .content {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 50px;
  padding: 0;
}
nav > .content > ul {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  flex: 1;
}
.menu_one {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-3);
  list-style: none;
  border-right: 1px solid var(--color-divider-dark);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-base);
  white-space: nowrap;
}
.menu_one:first-child { border-left: 1px solid var(--color-divider-dark); }
.menu_one > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: var(--color-text-inverse);
  white-space: nowrap;
}
.menu_one:hover { background: rgba(255, 255, 255, 0.05); }
.menu_one.menu_a { background: var(--color-header-bg); }

/* Первый пункт — "Каталог" с иконкой бургера */
.menu_one--catalog > span::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url('/img/icons/burger.svg') no-repeat center / contain;
}

/* Мега-меню (выпадающая панель) */
.menu_all {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-dropdown);
  width: max-content;
  min-width: 280px;
  max-width: 90vw;
  padding: var(--sp-6);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.menu_a .menu_all { display: block; }
.menu_row {
  display: block;
  padding: var(--sp-2) 0;
}
.menu_row strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin-bottom: var(--sp-1);
}
.menu_row a {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding: var(--sp-1) 0;
}
.menu_row a:hover { color: var(--color-primary); }

/* Бургер для мобільної версії — desktop hidden */
.menu {
  display: none;
  width: 30px;
  height: 30px;
  background: url('/img/icons/burger.svg') no-repeat center / contain;
  filter: brightness(0) invert(1);
  cursor: pointer;
  margin: auto var(--sp-3);
}

/* Submenu (друга смуга під меню каталога — біла з тінню) */
.submenu { 
  background: var(--color-bg);
  box-shadow: var(--shadow-submenu);
  position: relative;
  z-index: 2;
}
.submenu > .content {
  display: flex;
  align-items: stretch;
  height: 50px;
}
.submenu ul {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}
.submenu__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  list-style: none;
  border-bottom: 4px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-base);
}
.submenu__item > a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  height: 100%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 18px;
  color: var(--color-text);
  white-space: nowrap;
}
.submenu__item > a::after {
  content: '';
  width: 16px;
  height: 16px;
  background: url('/img/icons/chevron-down.svg') no-repeat center / contain;
  transform: rotate(90deg);
}
.submenu__item:hover,
.submenu__item--active { border-bottom-color: var(--color-primary); }
.submenu__item:hover > a,
.submenu__item--active > a { color: var(--color-text); }


/* --- 6.7 Breadcrumbs ---------------------------------------- */
.bread {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-6) 0 50px;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}
.bread a { color: var(--color-text-muted); }
.bread a:hover { color: var(--color-primary); }
.bread a::after {
  content: '/';
  margin-left: var(--sp-2);
  color: var(--color-text-muted);
}


/* --- 6.8 Help CTA ------------------------------------------- */
.help {
  position: relative;
  background: var(--color-surface);
  border-radius: 0;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  padding: 65px max(64px, calc(50vw - 640px + 64px)) 65px max(var(--sp-4), calc(50vw - 640px + 544px));
  min-height: 480px;
  overflow: hidden;
}
.help::before {
  content: '';
  position: absolute;
  top: 50%;
  left: max(-180px, calc(50vw - 640px - 180px));
  transform: translateY(-50%);
  width: 720px;
  height: 720px;
  background: url('/img/images/help-gears.png') no-repeat center center / contain;
  z-index: 1;
  pointer-events: none;
}
.help__inner { width: 624px; max-width: 100%; }
.help__inner { position: relative; z-index: 2; }
.help .name,
.help h2 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-hero);
  color: var(--color-text);
  margin-bottom: var(--sp-6);
}
.help p {
  font-size: var(--fs-2xl);
  line-height: 36px;
  color: var(--color-text);
  margin-bottom: var(--sp-8);
  font-weight: var(--fw-regular);
}
.help .help__form,
.help form {
  position: relative;
  width: 288px;
}
.help input[type="tel"],
.help input[type="text"] {
  width: 100%;
  height: 60px;
  padding: 0 60px 0 var(--sp-5);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  outline: 0;
}
.help input::placeholder { color: var(--color-text-placeholder); }
.help button[type="submit"],
.help .send {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  background: var(--color-input-dark-2) url('/img/icons/phone.svg') no-repeat center / 20px 20px;
  border-radius: var(--r-md);
  border: 0;
}
.help button[type="submit"]:hover,
.help .send:hover { background-color: var(--color-text); }
.help > a {
  display: inline-block;
  margin-top: var(--sp-4);
  font-size: var(--fs-base);
  color: var(--color-primary);
  text-decoration: underline;
}


/* --- 6.9 Social icons --------------------------------------- */
/* Иконки соцсетей реализованы через background-image на классах .icon_*.
   ВАЖНО (CLAUDE.md правило): НЕ заменять на inline <svg>. */
.social {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}
.social a {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease-base);
}
.social a:hover { opacity: 1; }

a.icon_fb    { background-image: url('/img/icons/fb.svg'); }
a.icon_in    { background-image: url('/img/icons/inst.svg'); }
a.icon_tg    { background-image: url('/img/icons/tel.svg'); }
a.icon_you   { background-image: url('/img/icons/you.svg'); }
a.icon_mes   { background-image: url('/img/icons/mes.svg'); }
a.icon_viber { background-image: url('/img/icons/viber.svg'); }
a.icon_wh    { background-image: url('/img/icons/wh.svg'); }
/* .icon_sk (Skype), .icon_tw (Twitter) — є в RESERVED.md як зарезервовані
   класи Allzap, але в макеті RemBaza НЕ використовуються. Стилі додавати
   тільки коли з'являться в макеті. */

/* В темном top-bar делаем иконки белыми через filter */
.top-bar .social a {
  filter: brightness(0) invert(1);
  opacity: 0.6;
}
.top-bar .social a:hover { opacity: 1; }


/* --- 6.10 Modals -------------------------------------------- */
#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  max-width: 90%;
  max-height: 90vh;
  overflow: auto;
}
#modal.window {
  background: var(--color-bg);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-lg);
}
.window { background: var(--color-bg); border-radius: var(--r-xl); }
#popup_shadow {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: var(--z-modal-backdrop);
}
#info_load {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.7) no-repeat center / 32px 32px;
  border-radius: var(--r-md);
  z-index: var(--z-popup);
}
.locked { overflow: hidden; }

/* ============================================================
   POPUP «додано в кошик» (глобальний AJAX add-to-cart) — reskin під RemBaza.
   Рушій core/shop/shop_cart.kiev віддає .add_cart* / .cart_fast у #window;
   ✕ .close інжектить JS artkiev_modal() (асет /img/face/close.svg на сервері є).
   Box = #modal.window (білий, padding --sp-8=32px, radius --r-xl). Кольори кнопок
   успадковуються від глобального .send (orange #f95203) — не дублюємо. Layout — порт донора. */
#modal.window .add_cart { text-align: center; }
.add_cart strong, .cart_fast strong { display: block; margin: var(--sp-2) 0; max-height: 100px; overflow: hidden; font-size: var(--fs-lg); }
.add_cart_img, .add_cart_price, .add_cart_more, .add_cart_go { display: inline-block; width: 48%; max-height: 200px; vertical-align: middle; }
.add_cart_img { min-height: 120px; }
.add_cart_img img { max-width: 180px; max-height: 180px; }
.add_cart_price { font-size: var(--fs-2xl); }
.add_cart_price input { height: 40px; width: 48px; font-size: var(--fs-xl); border: 1px solid var(--color-border); border-radius: var(--r-sm); margin: 0 var(--sp-1); text-align: center; padding: 0 5px; box-sizing: border-box; }
.add_cart_price .cart_minus, .add_cart_price .cart_plus { width: 35px; height: 40px; margin: 0; padding: 0 5px; border: 0; border-radius: var(--r-sm); background: var(--color-primary); color: var(--color-text-inverse); font-size: var(--fs-lg); cursor: pointer; }
.add_cart_price .cart_minus:hover, .add_cart_price .cart_plus:hover { background: var(--color-primary-hover); }
.add_cart_sp { display: block; text-align: center; color: var(--color-text); margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-sm); }
#add_cart_price { font-weight: var(--fw-bold); }
.add_cart_more .ajax { cursor: pointer; display: inline-block; color: var(--color-primary); border-bottom: 1px dashed var(--color-primary); }
.add_cart_more .ajax:hover { border-bottom-color: transparent; }
.add_cart_go .send { width: 100%; }

/* «Купити в 1 клік» band — bleed до країв білого боксу (нейтралізуємо padding --sp-8) */
.cart_fast { position: relative; z-index: 2; margin: var(--sp-6) calc(-1 * var(--sp-8)) calc(-1 * var(--sp-8)); padding: var(--sp-5) var(--sp-8); background: var(--color-bg-alt, #f1f1f1); border-radius: 0 0 var(--r-xl) var(--r-xl); font-size: var(--fs-base); }
.cart_fast_form { white-space: nowrap; }
.cart_fast_form .inp_1 { display: inline-block; vertical-align: top; width: 230px; height: 46px; font-size: var(--fs-base); text-align: center; border-radius: var(--r-md) 0 0 var(--r-md); margin: 0; box-sizing: border-box; }
.cart_fast_form .send { height: 46px; padding: 0 var(--sp-5); border-radius: 0 var(--r-md) var(--r-md) 0; box-sizing: border-box; }

/* ✕ закриття: правило ГОТОВЕ, але наразі НЕ працює — artkiev_modal() у script.js:340
   падає на `lang_5 is not defined` (JS-змінна lang_5 не емітиться в index.kiev head, тільки
   PHP-define) ДО рядка innerHTML+='.close' → div .close не створюється (баг engine-wide,
   на донорі parts.allzap.pro теж). Фікс = додати JS `lang_5="Закрити/Закрыть"` у index.kiev
   (.kiev/JS — поза CSS-скоупом, рішення vda/virtus1k). Інсет всередину боксу (не донор -5/-5,
   бо #modal overflow:auto кліпнув би). Глобальний на всі модалки. */
.close { position: absolute; z-index: 102; top: var(--sp-3); right: var(--sp-3); width: 34px; height: 34px; cursor: pointer; border-radius: var(--r-sm); background: #000 url('/img/face/close.svg') no-repeat 50% / 22px; }


/* --- 6.11 Slider (главная) ---------------------------------- */
.a_slider {
  position: relative;
  width: 100%;
  height: 500px;
  background: #1e1e1e linear-gradient(120deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
  overflow: hidden;
}
.a_slider_content { position: relative; height: 100%; }
.a_slider_items {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform var(--dur-slow) var(--ease-base);
}
.a_slider_item {
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.a_slider_item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.a_slider_item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  z-index: 2;
}
.a_slide_info {
  position: absolute;
  top: 89px;
  left: 0;
  right: 0;
  z-index: 3;
}
.a_slide_info > .content {
  max-width: var(--container-width);
}
.a_slide_name {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-bold);
  line-height: 70px;
  color: var(--color-text-inverse);
  margin: 0 0 var(--sp-6);
  max-width: 72%;
}
.a_slide_text {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: 36px;
  color: var(--color-text-inverse);
  margin: 0 0 var(--sp-10);
  max-width: 62%;
}
.a_slide_a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-width: 230px;
  padding: 0 var(--sp-8);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-radius: var(--r-xl);
  transition: background-color var(--dur-fast) var(--ease-base);
}
.a_slide_a:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }

/* Navigation arrows */
.a_slider_btn-prev,
.a_slider_btn-next {
  position: absolute;
  bottom: 75px;
  width: 60px;
  height: 60px;
  border: 0;
  z-index: 4;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5) url('/img/icons/arrow-right.svg') no-repeat center / 24px 24px;
  transition: background-color var(--dur-fast) var(--ease-base);
}
.a_slider_btn-prev {
  right: 380px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  transform: scaleX(-1);
}
.a_slider_btn-next {
  right: 320px;
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
}
.a_slider_btn-prev:hover,
.a_slider_btn-next:hover { background-color: rgba(0, 0, 0, 0.7); }

.a_slider_dots {
  position: absolute;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  z-index: 4;
}
.a_slider_dot {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.a_slider_dot_a { background: var(--color-text-inverse); }


/* --- 6.12 Car selector -------------------------------------- */
.car-selector { width: 100%; }
.car-selector__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--color-surface-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
.car-selector__step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 60px;
  padding: 0 var(--sp-5);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border: 0;
  border-bottom: 4px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: color var(--dur-fast) var(--ease-base),
              border-color var(--dur-fast) var(--ease-base);
}
.car-selector__step::after {
  content: '';
  width: 16px;
  height: 16px;
  background: url('/img/icons/chevron-down.svg') no-repeat center / contain;
  flex-shrink: 0;
  opacity: 0.5;
}
.car-selector__step--active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}
.car-selector__step--active::after { opacity: 1; }
.car-selector__step--disabled { pointer-events: none; }

.car-selector__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--color-border-soft);
  gap: 1px;
  border: 1px solid var(--color-border-soft);
  border-top: 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
}
.car-selector__option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
  padding: 0 21px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--color-text);
  background: var(--color-bg);
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-base),
              color var(--dur-fast) var(--ease-base);
}
.car-selector__option:hover {
  background: rgba(249, 82, 3, 0.06);
  color: var(--color-primary);
}


/* --- 6.13 Brands grid --------------------------------------- */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--color-border-soft);
  border: 1px solid var(--color-border-soft);
}
.brand-card {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  height: 86px;
  padding: 23px var(--sp-5);
  background: var(--color-bg);
  transition: background-color var(--dur-fast) var(--ease-base);
}
.brand-card:hover { background: var(--color-surface-2); }
.brand-card img {
  height: 30px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.brand-card span {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 22px;
  color: var(--color-text);
}
.brand-card::after {
  content: '';
  width: 16px;
  height: 16px;
  background: url('/img/icons/arrow-right.svg') no-repeat center / contain;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(15%);
}


/* --- 6.14 Text (WYSIWYG) ------------------------------------ */
.text {
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
}
.text p { margin-bottom: var(--sp-4); }
.text h2 { font-size: var(--fs-3xl); margin: var(--sp-8) 0 var(--sp-4); }
.text h3 { font-size: var(--fs-2xl); margin: var(--sp-6) 0 var(--sp-3); }
.text h4 { font-size: var(--fs-xl); margin: var(--sp-5) 0 var(--sp-3); }
.text ul, .text ol {
  padding-left: var(--sp-6);
  margin-bottom: var(--sp-4);
  list-style: revert;
}
.text ul li, .text ol li {
  list-style: revert;
  margin-bottom: var(--sp-2);
}
.text a { color: var(--color-primary); text-decoration: underline; }
.text a:hover { color: var(--color-primary-hover); }
.text strong { font-weight: var(--fw-semibold); }
.text em { font-style: italic; }
.text blockquote {
  border-left: 4px solid var(--color-primary);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-4) 0;
  color: var(--color-text-muted);
  font-style: italic;
}
.text img {
  border-radius: var(--r-lg);
  margin: var(--sp-4) 0;
  max-width: 100%;
  height: auto;
}
.text table { width: 100%; margin: var(--sp-4) 0; }
.text th,
.text td {
  padding: var(--sp-3);
  border: 1px solid var(--color-border-soft);
  text-align: left;
}
.text th {
  background: var(--color-surface-2);
  font-weight: var(--fw-semibold);
}

/* --- 6.12 Pagination (.pagination) — глобальний компонент ----------
   Перша поява: category-tecdoc (7/14). Планується category-shop / catalog / search.
   Figma 51:3744. Реальний CMS-клас = .pagination (НЕ .pager) — розмітка $pages
   (paginator_perelink): <div class="pagination"><b|a.p_left><span|a (сторінки)><a.p_right>.
   span = поточна (active, underline); a = інші; b.p_left = prev disabled (стор.1);
   a.p_left/a.p_right = active edge (icon-only, svg-bg). background:none скидає
   глобальний темний tag-level nav (як .bread). */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: none;
  gap: var(--sp-5);                  /* 20 */
  margin-top: 50px;
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-regular);
  line-height: 22px;
  color: var(--color-text);
}
/* номери сторінок — <a> (інші) / <span> (поточна) */
.pagination a,
.pagination span {
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-base);
}
.pagination a:hover { color: var(--color-primary); }
.pagination > span { text-decoration: underline; }   /* поточна сторінка (active) */
/* edge-стрілки (prev/next) — порожні a/b, icon-only svg-bg 24×24 */
.pagination .p_left,
.pagination .p_right {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url(/img/icons/arrow-right.svg) no-repeat center / contain;
  transition: opacity var(--dur-fast) var(--ease-base);
}
.pagination .p_left { transform: rotate(180deg); }    /* prev — дзеркало arrow-right */
.pagination a.p_left:hover,
.pagination a.p_right:hover { opacity: 0.6; }
.pagination b.p_left { opacity: 0.5; cursor: default; }  /* prev disabled на 1-й стор. (<b>) */


/* ============================================================
   7. PAGES
   ============================================================ */

/* --- 7.1 Home (index.html) ---------------------------------- */

/* Слайдер на всю ширину окна (вытаскиваем за пределы .content) */
.home__hero {
  width: 100%;
  margin-bottom: 0;
}

/* Между секциями главной */
.home__section { padding: var(--sp-10) 0; }
.home__section--tight { padding: var(--sp-12) 0; }
.home__section .section-title { margin-bottom: 60px; }

/* "Почніть з вибору автомобіля" — секция с .car-selector */

/* Популярні категорії — 3 карточки 410×500 */
.pop_cats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.pop-cat {
  position: relative;
  display: block;
  height: 500px;
  background: var(--color-card-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
}
.pop-cat img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.pop-cat::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 226px;
  background: linear-gradient(0deg, rgba(0,0,0,0.85) 26%, rgba(0,0,0,0) 100%);
  z-index: 2;
}
.pop-cat b {
  position: absolute;
  left: var(--sp-8);
  right: var(--sp-8);
  bottom: 132px;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 36px;
  color: var(--color-text-inverse);
  z-index: 3;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.pop-cat .btn {
  position: absolute;
  left: var(--sp-8);
  bottom: 50px;
  z-index: 3;
}

/* Кнопка "Показати автозапчастин для всіх марок авто" */
.home__brands-cta {
  margin-top: var(--sp-10);
  width: 100%;
}
.home__brands-cta .btn--ghost {
  width: 100%;
  height: 60px;
}

/* SEO текст + 2 фото авто */
.home__text-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  margin-top: var(--sp-10);
}
.home__text-images img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: var(--r-xl);
}



/* ============================================================
   7.5 GARAGE (donor wizard) — натягнуто з parts.allzap.pro
   garage_podbor.kiev генерує: .garage_alls > #garage_1..5, #garage_in,
   ul.tabs > li.tabs_a, .tab_info, .find_vin, .find_nomer
   Override-блок зверху щоб виглядав як RemBaza tabs.
   ============================================================ */
.garage_submenu +div, .garage_submenu +div+div, .garage_submenu +div+div+div
{
	margin:30px 20px 0;
}

.garage_alls
{
	display: flex;
	justify-content: space-between;
}

.garage_alls div
{
	
background: #E8E8E8;
border-right: 2px solid #FFF;
font-weight: bold;
font-size:16px;
color:#747474;
padding:15px 30px 15px 20px;
transition: background-color .3s;
cursor: not-allowed;
display: flex;
align-items: center;
border-bottom:2px solid transparent;
width:100%;
}

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

.garage_alls b
{
	background-color: #F4F4F4;
	width:26px;
	height:26px;
	border-radius:50%;
	line-height:30px;
	text-align: center;
	margin:0 12px 4px 0;
	font-weight: 400;
}

.garage_alls .garage_active
{
	
	cursor: pointer;
	 color: #172164;
	 border-bottom:2px solid red;
	 background: #FFF url(face/arrow.svg) no-repeat 96% 50%;
}

.garage_active b
{
	background-color: #172164;
	color:#FFF;
}

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

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

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

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

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

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

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

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

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

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

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

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

	height:61px; */
	display: flex;
	justify-content: space-between;
	align-items: center;
 }

.garage_my_name
 {
	 
	border: 1px solid #172164;
	border-radius: 10px;
	display: inline-block;
	vertical-align:top;
	padding:15px 30px 15px 20px;
	cursor: pointer;
	width:160px;
	font-weight: bold;
	font-size:16px;
	color:#172164;
	background:  url(face/arrow.svg) no-repeat 98% 50% / 20px;
	
 }

.garage_car
 {
 background-color: #FFF;
 border-radius:8px;
	flex:1;
	cursor: pointer;
	margin:0 10px;
	padding:10px 15px 6px 25px;
 }

.garage_car_name
 {
	font-weight: bold;
	 font-size: 16px;
 }

.garage_car_info
 {
	 text-transform: lowercase;
	 line-height: 18px;
	 white-space: nowrap;
	 overflow: hidden;
	 font-size: 13px;
	 color: #999;
 }

.garage_car_info span
{
	   text-transform: uppercase;
	   
}

.garage_new
{
	display: flex;
	justify-content: center;
	align-items: center;
}

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

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

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

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

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

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

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

.garage_del:hover
{
	opacity:1;
}

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

.garage_my {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;          
}

.garage_alls
{
	display:block;
}

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

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

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

.garage_my_name
{
	display:none;
}

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

.garage_my
	{
		display:block;

	}

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

.garage_new span
	{

		padding: 8px 25px 8px 30px;

	}

.garage_car
	{
		margin:0 15px;
	}

.garage_boxs, .page_rows
	{
		display:block;
	}

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

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

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

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

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

}

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

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

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

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

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

.step5 span
	{
		width:100%;
	}

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

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

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

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

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

.mod_other
{
	gap:20px;
}

.mod_other2
	{
        display:block;
		text-align: center;
    }

.mod_other2 span 
	{
		padding:12px 22px;
		margin:0 0 5px;
	}

.tab_info
{
	display:none;
}

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

.tab_info
	 {
		 margin:0 -15px;
	 }

.tabs li
{
	display:inline-block;
	vertical-align:top;
	list-style: none;
	padding:20px 40px 18px;
	cursor: pointer;
	border-left:1px solid #172164;
}

.tabs
{
	color:#172164;
	font-weight: bold;
	font-size:16px;
	text-align: center;
	border:1px solid #172164;
	border-left:0;
	border-radius:10px;
	display:inline-block;
	vertical-align:top;
	overflow: hidden;
	margin:30px auto;
}

.tabs_a
{
	background: linear-gradient(350deg, #3143C2 0%, #172164 100%);
	color:#FFF;
}

.tabs 
{
	display:block;
	width:290px;
}

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

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

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

.find_vin input
	{
		font-size:18px;
		font-weight: 400;
		width:220px;
	}

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

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

.name_4
{
	text-align: left;
}

.name_4, h4, h3, .name_3
	 {
		 text-align: center;
	 }

/* RemBaza-стиль для donor garage_alls — виглядає як .car-selector__steps з handoff макета */

/* Donor <b> бейдж номера — приховуємо, на RemBaza макеті без нумерації */
.garage_alls b {
  display: none !important;
}

/* Контейнер 5 tabs — grid як car-selector__steps */
.garage_alls {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--color-surface-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
  justify-content: stretch;
}

/* Кожен tab */
.garage_alls > div {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 60px;
  padding: 0 var(--sp-5) !important;
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  color: var(--color-text-muted);
  background: var(--color-surface-2) !important;
  border: 0 !important;
  border-right: 0 !important;
  border-bottom: 4px solid transparent !important;
  cursor: not-allowed;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  transition: all var(--dur-fast) var(--ease-base);
}

/* Chevron-down іконка справа (показуємо тільки на active) */
.garage_alls > div::after {
  content: ;
  width: 16px;
  height: 16px;
  background: url(/img/icons/chevron-down.svg) no-repeat center / contain;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-base);
}

/* Активний tab — білий фон, помаранчевий border-bottom, темний текст, видимий chevron */
.garage_alls .garage_active {
  cursor: pointer;
  color: var(--color-text) !important;
  background: var(--color-bg) !important;
  background-image: none !important;
  border-bottom-color: var(--color-primary) !important;
}
.garage_alls .garage_active::after {
  opacity: 1;
}

/* Доступний tab (data-id заповнено, JS дозволяє клік) */
.garage_alls > div:not([data-id=""]):not(.garage_active) {
  color: var(--color-text) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer;
}

/* Контейнер з результатами AJAX */
#garage_in {
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-top: 0;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  min-height: 80px;
  overflow: hidden;
}

/* Список марок/моделей (step0, step2, тощо) — grid як car-selector__grid */
.step0, .step0.step2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--color-border-soft);
}
.step0 span, .step0 a {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 21px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--color-text);
  background: var(--color-bg);
  cursor: pointer;
  text-transform: uppercase;
  transition: all var(--dur-fast) var(--ease-base);
}
.step0 span:hover, .step0 a:hover {
  background: rgba(249, 82, 3, 0.06);
  color: var(--color-primary);
}

/* Step3 (рік) — donor: ЗАГОЛОВОК + 10 років В ОДНОМУ ГОРИЗОНТАЛЬНОМУ РЯДУ.
   Round 14 fix після vda's side-by-side screenshot з donor. Декади йдуть
   зверху вниз (flex column), КОЖНА декада — 1 ряд без wrap, роки flex:1 1 0
   щоб рівномірно розтягнулись по ширині .content. */
.step3 {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background: var(--color-bg);
  padding: 0;
}
.garage_year {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
  padding: 0;
  margin: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}
.garage_year:last-child {
  border-bottom: 0;
}
/* Заголовок декади «1990-е» — жирний бейдж зліва, фіксована ширина */
.garage_year > div {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 110px;
  padding: 0 var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  white-space: nowrap;
  background: var(--color-bg);
}
/* Роки <span> (активні) і <b> (disabled) — flex:1 1 0 = рівні колонки */
.garage_year > span,
.garage_year > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 0 var(--sp-1);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  white-space: nowrap;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border-soft);
  border-radius: 0;
}
.garage_year > span {
  cursor: pointer;
  color: var(--color-text);
}
.garage_year > span:hover {
  background: rgba(249, 82, 3, 0.08);
  color: var(--color-primary);
}
.garage_year > b {
  color: var(--color-text-muted);
  opacity: 0.5;
  pointer-events: none;
}

/* Step4 (двигун) — donor pattern: .garage_motor > <strong>Тип</strong> + <span>об'єм</span>...
   Round 15 fix після vda «сверь все». Layout як step3: заголовок зліва (155px),
   об'єми рівними колонками вправо. */
.step4 {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  padding: 0;
}
.garage_motor {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  width: 100%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border-soft);
}
.garage_motor:last-child {
  border-bottom: 0;
}
.garage_motor > strong {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  width: 155px;
  padding: 0 var(--sp-4);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  white-space: nowrap;
  text-transform: none;
}
.garage_motor > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  padding: 0 var(--sp-1);
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  cursor: pointer;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border-soft);
  border-radius: 0;
}
.garage_motor > span:hover {
  background: rgba(249, 82, 3, 0.08);
  color: var(--color-primary);
}

/* Step5 (модифікація) — donor pattern: .garage_modif > <span>назва<virtus>метадані</virtus></span>...
   Картки grid auto-fill (мін 225px), <virtus> = block-text всередині картки. */
.step5 {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  padding: 0;
}
.garage_modif {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 1px;
  background: var(--color-border-soft);
  padding: 0;
}
.garage_modif > span {
  display: block;
  padding: var(--sp-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--color-text);
  cursor: pointer;
  background: var(--color-bg);
  transition: background var(--dur-fast) var(--ease-base);
}
.garage_modif > span:hover {
  background: rgba(249, 82, 3, 0.06);
  color: var(--color-primary);
}
.garage_modif > span virtus {
  display: block;
  margin-top: var(--sp-1);
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

/* .mod_other (старий блок «інші», на головній не використовується але залишаємо стиль) */
.mod_other strong {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  margin: var(--sp-3) var(--sp-6);
}
.mod_other a {
  display: block;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--color-text);
  border-top: 1px solid var(--color-border-soft);
}
.mod_other a:hover {
  background: rgba(249, 82, 3, 0.06);
  color: var(--color-primary);
}

/* Прибираємо donor 3 tabs (По марці/VIN/госномеру) — на RemBaza макеті немає */
ul.tabs { display: none !important; }
.tab_info.find_0 { display: none !important; }
/* marka/model car-flow: pokazaty wizard-panel .tab_a (RemBaza prybrav donor 3-way ul.tabs,
   tozh JS ne aktyvuje panel - pokazujemo zavzhdy). Home wizard NE v .tab_info -> ne zachipaje.
   vda 2026-05-29 Option B: donor krok 2 (Model) active + sitka modelej u #garage_in. */
.tab_info.tab_a { display: block; margin: 0; }

/* --- 7.4 VIN form (rebuild Figma — core/vin_page.kiev) ---------------
   DOM: .content_small > .vin_form > form.vin-page (donor RESERVED classes).
   Fields scoped 50px (global .inp_1 stays 60). Submit dark #3c3c3c (not orange .send).
   Marka <select> = shop_brand (donor SQL). God <select> = dynamic year, current selected (D2).
   Model = text input for now (not required); virtus1k swaps to cascade select later. */
.vin_form { margin: 0 0 64px; } /* PRAVKA3 (vin3): відбивка кнопки «Відправити запит» від full-bleed CTA-банера $help */
.vin_form__group { border: 0; margin: 0 0 var(--sp-10); padding: 0; min-width: 0; }
.vin_form__group:first-of-type { margin-bottom: 50px; }
.vin_form__label {
  display: block; width: 100%; padding: 0; margin: 0 0 var(--sp-10);
  font-family: var(--font-base); font-size: var(--fs-lg); font-weight: var(--fw-regular);
  line-height: 24px; text-transform: uppercase; color: var(--color-text);
}
.vin_rows { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.vin_form__field { height: 50px; font-size: var(--fs-sm); flex: 0 0 auto; }
.vin_form__field--vin   { flex-basis: 400px; }
.vin_form__field--marka { flex-basis: 300px; }
.vin_form__field--model { flex-basis: 300px; }
.vin_form__field--god   { flex-basis: 110px; }
.vin_rows--user .vin_form__field { flex: 0 0 400px; }
textarea.vin_form__com { flex: 1 1 100%; max-width: 820px; height: 100px; min-height: 100px; font-size: var(--fs-sm); }
.vin_form__submit { width: 250px; background: var(--color-input-dark-2); }
.vin_form__submit:hover  { background: var(--color-topbar-bg); }
.vin_form__submit:active { background: var(--color-text); }

/* PRAVKA1 (vin3): стрілка селектів Марка/Рік — сірий chevron-DOWN з макета Figma 51:1123.
   Причина: глобальний /img/icons/chevron-down.svg фактично малює '›' (вправо, #7E7E7E,
   path M6 12L10 8L6 4) → перебиваємо background ТІЛЬКИ для .vin_form__field, глобальний
   select.inp_1 не чіпаємо. appearance:none успадковано від select.inp_1. */
select.vin_form__field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: right 16px center;
  padding-right: 38px;
}

/* Mobile */
@media (max-width: 1000px) {

  .garage_alls { grid-template-columns: 1fr; }
  .garage_alls > div { border-right: 0 !important; border-bottom: 1px solid #FFF !important; }
  .step0, .step0.step2 { grid-template-columns: repeat(4, 1fr); }

  /* VIN — fields stack full width */
  .vin_form__field,
  .vin_rows--user .vin_form__field { flex: 1 1 100%; }
  .vin_form__field--god { flex-basis: 100%; }
  textarea.vin_form__com { max-width: none; }
}
@media (max-width: 761px) {
  .step0, .step0.step2 { grid-template-columns: repeat(2, 1fr); }

  /* VIN — 16px iOS-zoom guard; submit full width */
  .vin_form__field,
  textarea.vin_form__com { font-size: var(--fs-base); }
  .vin_form__submit { width: 100%; }
}


/* ============================================================
   7.6 SUBMENU dropdown (Round 10) — 2-рівнева випадайка як donor.
   ============================================================
   vda: «меню выпад 2х уровневое смотри сайт эталон»
   Donor parts.allzap.pro patrtern: .menu_all flex row, .menu_row колонки 280px,
   <strong>=дочка (1 рівень), <a>=онук (2 рівень). RemBaza submenu робить те ж саме. */

/* Anchor для випадайки = .submenu > .content (а не .submenu__item) щоб випадайка
   завжди вкладалась у ширину .content (max 1280px) і центрувалась з рештою сайту.
   z-index = var(--z-dropdown) щоб перекривати hero-банер який має власні stacking
   contexts для слайдера/оверлеїв (1..4). */
.submenu { 
  overflow: visible;
  z-index: var(--z-dropdown);
}
.submenu > .content { overflow: visible; position: relative; }
.submenu__item { position: static; }

/* Стрілка-індикатор: вниз. SVG /img/icons/chevron-down.svg за path = chevron-right
   (vertex справа), тому потрібен rotate(90deg) щоб був вниз. Round 9 помилково
   виставив 0deg → стрілка пішла направо. Round 11 повернув handoff default 90deg. */
.submenu__item > a::after {
  transform: rotate(90deg) !important;
}

/* 2-рівнева випадайка — full-width під .submenu, grid auto-fit рівними колонками */
.submenu__dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  width: auto;
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
  border-top: 4px solid var(--color-primary);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.submenu__item:hover .submenu__dropdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-5);
}

/* Колонка-блок підкатегорії: <strong> (1 рівень) + <a> (2 рівень) */
.submenu__dropdown .menu_row {
  display: block;
  padding: 0;
  min-width: 0;
}
.submenu__dropdown .menu_row strong {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
}
.submenu__dropdown .menu_row strong a {
  color: var(--color-text);
  text-decoration: none;
}
.submenu__dropdown .menu_row strong a:hover {
  color: var(--color-primary);
}
.submenu__dropdown .menu_row > a {
  display: block;
  padding: var(--sp-1) 0;
  font-size: var(--fs-sm);
  line-height: 1.35;
  color: var(--color-text-muted);
  white-space: normal;
  text-decoration: none;
}
.submenu__dropdown .menu_row > a:hover {
  color: var(--color-primary);
}

/* Mobile — випадайки приховані, submenu стає scroll */
@media (max-width: 1000px) {
  .submenu__dropdown { display: none !important; }
}


/* ============================================================
   7.7 SUBMENU layout (Round 9 — 1 ряд, multi-line label всередині пункту)
   ============================================================
   vda: «выпадает только то шо на белом фоне» — dropdown залишається.
   vda: «шрифт размер сделай як в эталоном» — повертаю font-size: var(--fs-sm) = 14px.
   vda: «не 2 ряда» — submenu в 1 ряд (flex без wrap), кожен пункт рівна колонка,
        назва пункту може wrap у 2 рядки всередині. */

.submenu ul {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0;
}
.submenu__item {
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid var(--color-border-soft);
  border-bottom-width: 4px;
}
.submenu__item:last-child {
  border-right: 0;
}
.submenu__item > a {
  white-space: normal !important;
  line-height: 1.25 !important;
  padding: 0 var(--sp-2) !important;
  font-size: var(--fs-sm) !important;
  text-align: left;
  justify-content: space-between;
}
/* Стрілка-індикатор: менша + не стискається */
.submenu__item > a::after {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0;
}

@media (max-width: 1000px) {
  .submenu ul { display: flex !important; flex-wrap: nowrap !important; }
  .submenu__item > a { white-space: nowrap !important; }
}

/* ============================================================
   7.8 NAV menu_one (Round 9 — БЕЗ випадайок, 1 ряд, multi-line label)
   ============================================================
   vda: «верх основного меню — если нет функц прось зашей текст» — прибрав
        .menu_all dropdown. Лишилось 1 Каталог + 6 категорій з handoff-назвами,
        URL з БД (car_category LIMIT 6). Клік працює як прямий <a href>.
   vda: «2 рядки я имел в виду название каждого пункта шоб меню влезло» —
        контейнер в 1 ряд, span всередині wrap-аеться при потребі. */
nav > .content > ul {
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
}
nav .menu_one {
  white-space: normal !important;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 !important;
}
/* RemBaza override: <a> всередині .menu_one замість onclick-span */
nav .menu_one > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 var(--sp-3);
  text-decoration: none;
  color: inherit;
}
nav .menu_one > a > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: normal !important;
  line-height: 1.2 !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-semibold);
  color: var(--color-text-inverse);
}
/* Бургер-іконка перед "Каталог" — у round 9 HTML span тепер всередині <a>,
   тому handoff-селектор .menu_one--catalog > span не спрацьовує. */
.menu_one--catalog > a > span::before {
  content: '';
  width: 22px;
  height: 22px;
  background: url('/img/icons/burger.svg') no-repeat center / contain;
  display: inline-block;
  flex-shrink: 0;
}
nav .menu_one:hover > a > span { color: var(--color-primary); }


/* === 7.2 Contacts page (natyazhka 2026-05-26) ====================
   Стилізація DONOR-класів (.contact_rows, .contact_row, .name_4,
   a.ks, a.vf, .time, address, .maps) під handoff макет.
   HTML розмітку рендерить core/contact.kiev (donor pattern) + pages.small_ua. */

/* H1 на сторінці contacts (donor рендерить <h1> без класу) */
main#content > .content > h1 {
  font-size: 36px;
  font-weight: var(--fw-medium);
  line-height: 48px;
  color: var(--color-text);
  margin: 0 0 60px;
}

/* 3-колоночна (auto-fit) сітка контактних блоків (donor wrapper) */
.contact_rows, .contact_rows * { text-align: left; }
.contact_rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  column-gap: 27px;
  row-gap: var(--sp-8);
  justify-content: start;
  margin-bottom: 50px;
}

/* Заголовок колонки (donor .name_4 ≈ handoff .contacts__col-title) */
.contact_rows .name_4 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 36px;
  color: var(--color-text);
  margin: 0 0 var(--sp-6);
}

/* Рядки контактів — phone (.ks/.vf), email, address, hours (.time) */
.contact_rows a.ks,
.contact_rows a.vf,
.contact_rows a[href^="mailto"],
.contact_rows address,
.contact_rows .time {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  font-style: normal;
  line-height: 24px;
  color: var(--color-text);
  text-decoration: none;
}
.contact_rows a.ks:hover,
.contact_rows a.vf:hover,
.contact_rows a[href^="mailto"]:hover { color: var(--color-primary); }

/* Іконки перед рядком (20×20 background-image) */
.contact_rows a.ks::before,
.contact_rows a.vf::before,
.contact_rows a[href^="mailto"]::before,
.contact_rows address::before,
.contact_rows .time::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}
.contact_rows a.ks::before,
.contact_rows a.vf::before     { background-image: url('/img/icons/phone.svg'); }
.contact_rows a[href^="mailto"]::before { background-image: url('/img/icons/mail.svg'); }
.contact_rows address::before  { background-image: url('/img/icons/address.svg'); }
.contact_rows .time::before    { background-image: url('/img/icons/clock.svg'); }

/* Соц-мережі — 4-та колонка (donor) */
.contact_rows .social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* .maps — full-bleed карта (donor wrapper) */
.maps {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);


  background: var(--color-surface);
}

/* RemBaza 2026-05-26: map title ПОЗА .maps контейнером — щоб не наслідувало сірий фон. */
h2.maps__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: 36px;
  color: var(--color-text);
  margin: 0 0 50px;
  text-align: left;
}

.maps iframe {
  width: 100%;
  height: 400px;
  border: 0;
  display: block;
}

/* === Mobile overrides для contacts === */
@media (max-width: 1000px) {
  .contact_rows { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .contact_rows .contact_row:nth-child(n+3) { grid-column: auto; }
  .maps iframe { height: 360px; }
  main#content > .content > h1 { font-size: 32px; line-height: 40px; margin-bottom: var(--sp-10); }
}
@media (max-width: 761px) {
  .contact_rows { grid-template-columns: 1fr; }
  .contact_rows .name_4 { font-size: var(--fs-xl); line-height: 28px; }
  .maps iframe { height: 320px; }
  .maps .name_4 { font-size: var(--fs-3xl); line-height: 1.2; padding-top: var(--sp-8); }
}
@media (max-width: 470px) {
  main#content > .content > h1 { font-size: var(--fs-2xl); line-height: 32px; }
  .contact_rows .name_4 { font-size: var(--fs-lg); line-height: 26px; margin-bottom: var(--sp-4); }
  .maps iframe { height: 240px; }
}


/* === 7.3 Info pages (article + page, natyazhka 2026-05-27) ============
   Universal template for /poleznaya-informatsiya/<slug>/.
   Renders WYSIWYG content from pages.big_ua + optional hero from pages.img.

   Donor pattern (parts.allzap.pro): <h1>Title</h1><div class="text">CONTENT</div>
   RemBaza addition: full-bleed hero banner + .help CTA after content.

   CSS for new selectors (.info__hero, .text__lead, .text__row, .text__img,
   .text__col). For donor .text container — styles already exist in § 6.14.
   ============================================================ */

/* --- HERO banner — full-bleed (100vw × 500px) --- */
.info__hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  height: 500px;
  overflow: hidden;
  background: var(--color-border);
  margin-bottom: 60px;
}
.info__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- LEAD-абзац (перший абзац статті, full-width) ---
   ВАЖЛИВО: specificity .text .text__lead (0,2,0) щоб перебити .text p { mb 16 } */
.text .text__lead,
.text__lead {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 24px;
  color: var(--color-text);
  margin: 0 0 50px;
}

/* --- 2-col blocks: image + text (donor-friendly) --- */
.text__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}
.text__row:last-child { margin-bottom: 0; }

/* Air between article body and full-bleed .help banner (макет 51:1903: тіло y1924 -> банер y2024 = 100px). Scope :has(+ .help) — тільки тіло статті; донорські .text без банера не чіпаються. */
.text:has(+ .help) { padding-bottom: 100px; }

.text .text__img,
.text__img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
  margin: 0;             /* override .text img { margin: var(--sp-4) 0 } */
}

.text__col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.text .text__col p,
.text__col p {
  margin: 0;             /* override .text p { mb 16 } */
  font-size: var(--fs-base);
  line-height: 24px;
  color: var(--color-text);
}

/* ============================================================
   8. UTILITIES
   ============================================================ */
.none           { display: none !important; }
.hidden         { visibility: hidden; }
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   9. MEDIA QUERIES (адаптив по донору — desktop-first)
   ============================================================ */

/* ≤1280px — широкий ноутбук, .content становится 996px */
@media (max-width: 1280px) {
  :root { --container-width: 996px; }
  .help { padding: 65px 64px 65px 480px; }
  .help::before { width: 540px; height: 540px; left: -60px; }
  .a_slider_btn-prev { right: 320px; }
  .a_slider_btn-next { right: 260px; }
}

/* ≤1000px — планшет landscape, .content становится 738px */
@media (max-width: 1000px) {
  :root { --container-width: 738px; }

  .top-bar { height: auto; padding: var(--sp-3) 0; }
  .top-bar > .content { flex-wrap: wrap; gap: var(--sp-3); }
  #menu_top { display: none; }
  .top-bar__right { flex-wrap: wrap; gap: var(--sp-3); }

  .header > .content {
    flex-wrap: wrap;
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
    min-height: 0;
    gap: var(--sp-4);
    row-gap: var(--sp-3);
  }
  .logo { width: 200px; height: 67px; }
  .search { order: 5; flex: 1 1 100%; max-width: none; }
  .plate-search { display: none; }
  .phone { margin-left: auto; }
  .phone a { font-size: var(--fs-sm); }

  .menu { display: block; }
  nav > .content > ul { display: none; }
  .submenu { display: none; }

  .a_slider { height: 400px; }
  .a_slide_info { top: 50px; }
  .a_slide_name { font-size: var(--fs-3xl); line-height: 40px; max-width: 80%; }
  .a_slide_text { font-size: var(--fs-base); line-height: 24px; max-width: 80%; margin-bottom: var(--sp-6); }
  .a_slider_btn-prev, .a_slider_btn-next { bottom: 30px; }
  .a_slider_btn-prev { right: 110px; }
  .a_slider_btn-next { right: 50px; }

  .car-selector__steps { grid-template-columns: repeat(2, 1fr); }
  .car-selector__step { font-size: var(--fs-sm); }
  .car-selector__grid { grid-template-columns: repeat(4, 1fr); }

  .pop_cats { grid-template-columns: repeat(2, 1fr); }
  .pop_cats .pop-cat:nth-child(3) { grid-column: 1 / -1; }

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

  footer .content {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-8);
  }
  .footer_logo { grid-column: 1 / -1; grid-row: 1; }
  .footer_row:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .footer_row:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .footer_row:nth-of-type(3) { grid-column: 1; grid-row: 3; }
  .logos { grid-column: 2; grid-row: 3; margin-top: 0; }
  .copy { grid-column: 1 / -1; grid-row: 4; }

  .help {
    padding: var(--sp-12) var(--sp-8);
    min-height: 0;
    text-align: center;
  }
  .help::before {
    position: relative;
    top: auto; left: auto;
    transform: none;
    width: 280px; height: 280px;
    margin: 0 auto var(--sp-6);
  }
  .help__inner { margin: 0 auto; }
  .help .name, .help h2 { font-size: var(--fs-3xl); }
  .help p { font-size: var(--fs-base); line-height: 24px; }
  .help .help__form { margin: 0 auto; }
}

/* ≤761px — мобільний M, .content 100% */
@media (max-width: 761px) {
  :root { --container-width: 100%; }
  .content { padding-left: 15px; padding-right: 15px; }

  .top-bar { font-size: 11px; }
  .top-bar__right { justify-content: flex-end; }

  .header > .content { gap: var(--sp-2); }
  .header .logo { width: 120px; height: 40px; }
  .header .phone {
    width: 44px;
    height: 44px;
    flex: none;
    order: 3;
    margin-left: auto;
  }
  .header .phone a { display: none; }
  .header .phone a.ks {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: url('/img/icons/phone.svg') no-repeat center / 22px 22px;
    filter: brightness(0) invert(1);
  }
  .cart > div span,
  .cart__label { display: none; }

  .a_slider { height: 320px; }
  .a_slide_name { font-size: var(--fs-2xl); line-height: 1.3; max-width: 95%; margin-bottom: var(--sp-3); }
  .a_slide_text { font-size: var(--fs-sm); line-height: 22px; max-width: 95%; margin-bottom: var(--sp-4); }
  .a_slide_a { min-width: 160px; height: 50px; font-size: var(--fs-sm); }
  .a_slider_btn-prev, .a_slider_btn-next { display: none; }

  .section-title { font-size: var(--fs-3xl); }

  .car-selector__steps { grid-template-columns: 1fr; border-radius: var(--r-xl); }
  .car-selector__grid { grid-template-columns: repeat(2, 1fr); border-radius: var(--r-xl); border-top: 1px solid var(--color-border-soft); margin-top: var(--sp-3); }

  .pop_cats { grid-template-columns: 1fr; }
  .pop_cats .pop-cat:nth-child(3) { grid-column: auto; }

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

  .home__text-images { grid-template-columns: 1fr; }
  .home__text-images img { height: 240px; }
}

/* ≤610px */
@media (max-width: 610px) {
  .pop-cat { height: 380px; }
  .pop-cat b { font-size: var(--fs-lg); bottom: 100px; line-height: 28px; }
  .pop-cat .btn { bottom: 30px; }
  footer .content { grid-template-columns: 1fr; }
  .footer_row:nth-of-type(2),
  .footer_row:nth-of-type(3),
  .logos,
  .copy { grid-column: 1; grid-row: auto; }
  .help { padding: var(--sp-8) var(--sp-4); }
  .help .name, .help h2 { font-size: var(--fs-2xl); line-height: 1.3; }
}

/* ≤470px */
@media (max-width: 470px) {
  .header > .content { gap: var(--sp-3); }
  .logo { width: 160px; height: 54px; }
  .cart::before { width: 36px; height: 36px; background-size: 20px 20px; }
  .a_slide_name { font-size: var(--fs-xl); }
  .brands-grid { grid-template-columns: 1fr; }
  .help::before { width: 220px; height: 220px; }
  /* Info (info.kiev) */
  .info__hero { height: 200px; }
  .text__img, .text .text__img { height: 180px; }
}

/* ≤350px */
@media (max-width: 350px) {
  .top-bar > .content { gap: var(--sp-2); }
  .logo { width: 140px; height: 47px; }
  .section-title { font-size: var(--fs-2xl); }
}

/* ============================================================
   10. FULL PORT MOBILE — donor parts.allzap.pro pattern 1:1
   (FULL PORT 2026-05-25, замінює стару секцію 10 MEGA-RULE 5)
   ============================================================
   Donor mobile CSS @media queries скопійовано з parts.allzap.pro/img/style.css
   (lines 3124-4028). Кольори replaced на RemBaza CSS variables.
   JS uses donor menu() / garage1..5 / artkiev_ajax — script.js identical donor.

   Donor → RemBaza token mapping:
     #FFF          → var(--color-bg)
     #f1f1f1       → var(--color-surface-2)
     #172164       → var(--color-primary) (orange)
     #1e1e1e       → var(--color-text)
     #140000       → var(--color-text)
     #e9e9e9       → var(--color-divider-dark)
     #d0d0d0       → var(--color-border-soft)
   Donor icons → RemBaza handoff:
     face/menu.svg  → /img/icons/burger.svg
     face/arrow.svg → /img/icons/chevron-down.svg (rotate(-90deg))
     face/arrow2.svg→ /img/icons/chevron-down.svg (rotate(-90deg))
   ============================================================ */

@media (max-width: 1000px) {

  /* RemBaza-only элементи приховані на mobile (vda answers) */
  .submenu          { display: none !important; }   /* answer #1 */
  .plate-search     { display: none !important; }   /* answer #4 */
  #menu_top         { display: none; }              /* показ через clone у #menu_after */
  .top-bar .social,
  .top-bar .login   { display: none; }              /* перенесено в бургер через menu_top__* */
  .top-bar .phone .vf,
  .header .phone .vf { display: none; }             /* answer #5 — другий номер ховається */

  /* HEADER mobile layout: лого + телефон + cart row1; search row2 */
  .header > .content {
    flex-wrap: wrap;
    padding: var(--sp-3) var(--sp-4);
    min-height: 0;
  }
  .header .logo { width: 160px; height: 54px; margin: 0; }
  .header .phone { margin-left: auto; margin-right: var(--sp-2); order: 3; }
  .header .phone a.ks { font-size: var(--fs-sm); }
  .header .cart  { order: 4; margin: 0; }
  .search {
    order: 2;
    flex: 1;
    margin-top: 0;
  }
  .search input {
    padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-4);
    background: var(--color-input-dark);
    color: var(--color-text-inverse);
    border: 0;
  }
  .search button { top: var(--sp-3); right: var(--sp-3); }

  /* Top-bar спрощена */
  .top-bar > .content {
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
  }
  .top-bar .lang { margin-left: auto; }

  /* Hide desktop nav megamenu by default; show via .open_menu */
  nav ul, .header ul, nav span:after { display: none; }

  /* Бургер ikona — donor pattern, RemBaza burger.svg */
  .menu {
    display: block;
    cursor: pointer;
    background: url('/img/icons/burger.svg') no-repeat 50% / 24px 24px;
    width: 44px;
    height: 50px;
    margin: auto var(--sp-2) auto 0;
  }
  html.open_menu .menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 24px 24px;
  }

  /* Wizard car-selector — donor 1:1 pattern на mobile.
     Перебиваємо !important з секції 7.5 (handoff Round 8 desktop CSS).
     FIX 2026-05-29: НЕ обнуляти padding .content (заголовок і wizard
     прилипали до краю). Donor pattern має padding 15px на .content. */
  .garage_all,
  .home__car-selector .garage_all {
    background: var(--color-bg);
  }
  .garage_alls,
  .home__car-selector .garage_alls {
    display: block !important;
    grid-template-columns: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .garage_alls > div,
  .home__car-selector .garage_alls > div {
    display: flex !important;
    height: 50px !important;
    padding: 12px 20px 8px !important;
    margin: 0 !important;
    color: var(--color-text) !important;
    background: var(--color-bg) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-divider-dark) !important;
    cursor: pointer;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-regular);
    line-height: 18px;
  }
  .garage_alls > div:last-child { border-bottom: 0 !important; }
  .garage_alls > div::after {
    display: none !important;   /* прибираю chevron з секції 7.5 — donor mobile без нього */
  }
  /* Donor показує <b> бейдж номера на mobile (1, 2, 3, 4, 5) — handoff приховав */
  .garage_alls b {
    display: inline-block !important;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-align: center;
    line-height: 24px;
  }
  /* Disabled step (data-id="") — grey bullet */
  .garage_alls > div[data-id=""]:not(.garage_active) b {
    background: var(--color-text-muted, #c9c9c9) !important;
  }
  /* Active step — bottom border accent (donor pattern) */
  .garage_alls .garage_active {
    border-bottom-color: var(--color-primary) !important;
    border-bottom-width: 2px !important;
  }

  /* #garage_in — прозорий контейнер на mobile (донор), без border/radius (handoff) */
  #garage_in {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* .step0 (brand grid) — 2 кол on mobile, white BG, без gap (donor) */
  .step0,
  .step0.step2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0 !important;
    background: var(--color-bg) !important;
    padding: 0 !important;
  }
  .step0 span,
  .step0 a {
    height: 50px !important;
    padding: 17px 15px 13px !important;
    border-bottom: 1px solid var(--color-divider-dark);
    border-right: 1px solid var(--color-divider-dark);
    font-size: var(--fs-sm) !important;
    text-transform: uppercase;
    background: var(--color-bg) !important;
  }
  .step0 span:nth-child(2n),
  .step0 a:nth-child(2n) {
    border-right: 0;
  }

  /* OPEN MENU — full accordion overlay поверх контенту */
  html.open_menu nav {
    /* BURGER SCROLL FIX (vda 2026-06-01): nav БЕЗ власного sticky/overflow-скрол-боксу.
       Раніше sticky+max-height:100vh+overflow-y:auto робило nav окремим залиплим 408px-боксом:
       7 фікс залипали всередині, а .submenu(категорії) скролились сторінкою і заїжджали ПІД nav
       (vda: «Двигун перекритий Очищенням вікон»). Тепер nav у нормальному потоці — nav(7 фікс)
       + .submenu(9 категорій) + #menu_after(utility) скролляться ЄДИНИМ списком, як донор. */
    position: static;
    top: auto;
    z-index: auto;
    background: var(--color-bg);
    max-height: none;
    overflow: visible;
  }
  html.open_menu nav > .content {
    display: flex !important;
    flex-wrap: wrap !important;
    height: auto !important;
    align-items: center;
  }
  html.open_menu nav > .content > ul {
    flex: 0 0 100%;
    order: 3;
  }
  html.open_menu nav > .content > .search--nav {
    order: 1;
  }
  html.open_menu nav ul {
    display: block;
    width: 100%;
    padding: 0;
  }

  /* .menu_one — категорія accordion ряд */
  html.open_menu .menu_one {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    border-bottom: 1px solid var(--color-divider-dark);
    border-right: 0;
    padding: 0;
    background: var(--color-bg);
  }
  html.open_menu .menu_one > span,
  html.open_menu .menu_one > a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 15px 14px var(--sp-4);
    font-size: var(--fs-base);
    line-height: 20px;
    font-weight: var(--fw-semibold);
    color: var(--color-primary);    /* orange replaces donor #172164 blue */
    background: var(--color-bg) url('/img/icons/chevron-down.svg') no-repeat 99% 50% / 16px 16px;
    cursor: pointer;
    white-space: normal;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
  }
  /* ВАРІАНТ A (vda 2026-05-29 coexist fix): hardcode 7 <li.menu_one> у бургері (mobile).
     Селектор .menu_top_hardcode — НОВИЙ wrapper-клас (vda 2026-05-29) для ізоляції
     hardcode-li від dynamic $file пунктів (другий <ul> поруч, з donor-кешу).
     Hardcode = заглушки до virtus1k (7 категорій верхнього рівня з Figma).
     Dynamic $file = donor pattern (10 категорій автозапчастин з кешу).
     ОБИДВА співіснують у <nav><div class="content">, у РІЗНИХ <ul>.

     1) <span> всередині — dark текст (#1e1e1e) замість white (читабельний на white bg)
     2) chevron-down прибраний — бо href="#" не expandable (не accordion).
     Defensive: лишаю a[href="#"] як додатковий фільтр (raw belt+suspenders). */
  html.open_menu nav > .content > ul.menu_top_hardcode > li.menu_one > a {
    background-image: none;
  }
  html.open_menu nav > .content > ul.menu_top_hardcode > li.menu_one > a > span {
    color: var(--color-text);
  }
  /* .menu_all (submenu з .menu_row) — slideToggle by jQuery on click */
  html.open_menu .menu_all {
    position: static;
    width: 100%;
    display: none;
    visibility: visible;
    box-shadow: none;
    border: 0;
    background: var(--color-surface-2);
    padding: 0 0 var(--sp-3);
  }
  /* .menu_row — 2-й рівень: <strong>HEADING</strong> + <a>links 3-го рівня */
  html.open_menu .menu_row {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 var(--sp-4);
    box-sizing: border-box;
  }
  html.open_menu .menu_row strong {
    display: block;
    padding: var(--sp-3) 0 var(--sp-1);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
  }
  html.open_menu .menu_row a {
    display: block;
    padding: var(--sp-1) 0 var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-soft);
  }
  html.open_menu .menu_row a:last-child { border-bottom: 0; }
  html.open_menu .menu_row a:hover { color: var(--color-primary); }

  /* .menu_top — clone з #menu_top + RemBaza menu_top_extra (Round 16) */
  html.open_menu .menu_top {
    display: block;
    padding: var(--sp-3) var(--sp-4) var(--sp-6);
    max-width: var(--container-width, 1280px);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border-soft);
  }
  html.open_menu .menu_top ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  html.open_menu .menu_top li {
    display: block;
    border-bottom: 1px solid var(--color-border-soft);
  }
  html.open_menu .menu_top li:last-child { border-bottom: 0; }
  html.open_menu .menu_top a {
    display: block;
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-6);
    font-size: var(--fs-base);
    text-decoration: none;
    color: var(--color-primary);     /* orange replaces donor blue */
    background: var(--color-bg) url('/img/icons/chevron-down.svg') no-repeat 0 50% / 14px 14px;
    transform: none;
  }
  html.open_menu .menu_top a:hover { color: var(--color-text); }


  html.open_menu .menu_top .menu_top__soc { display: block; padding: var(--sp-4) 0; background: none; border: 0; }
  html.open_menu .menu_top .menu_top__soc .social {
    display: flex; flex-wrap: wrap; gap: var(--sp-4); background: none;
  }
  html.open_menu .menu_top .menu_top__soc .social a {
    width: 32px; height: 32px;
    /* vda 2026-06-01 fix: .menu_top a (вище) ставить chevron-down як bg-image на
       ВСІ <a> у menu_top → перебивало per-class icon → соц виглядали як криві '>'.
       Скидаємо bg тут і вертаємо per-class svg явним повтором (specificity boost). */
    background-image: none;
    background-size: 24px 24px;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.85;
    filter: none;
  }
  html.open_menu .menu_top .menu_top__soc .social a.icon_fb    { background-image: url('/img/icons/fb.svg') !important; }
  html.open_menu .menu_top .menu_top__soc .social a.icon_in    { background-image: url('/img/icons/inst.svg') !important; }
  html.open_menu .menu_top .menu_top__soc .social a.icon_tg    { background-image: url('/img/icons/tel.svg') !important; }
  html.open_menu .menu_top .menu_top__soc .social a.icon_you   { background-image: url('/img/icons/you.svg') !important; }
  html.open_menu .menu_top .menu_top__soc .social a.icon_mes   { background-image: url('/img/icons/mes.svg') !important; }
  html.open_menu .menu_top .menu_top__soc .social a.icon_viber { background-image: url('/img/icons/viber.svg') !important; }
  html.open_menu .menu_top .menu_top__soc .social a.icon_wh    { background-image: url('/img/icons/wh.svg') !important; }
  html.open_menu .menu_top .menu_top__lang { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; background: none; }
  html.open_menu .menu_top .menu_top__lang a,
  html.open_menu .menu_top .menu_top__lang b {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    background: none;
    font-weight: var(--fw-medium);
    text-decoration: none;
    color: var(--color-text);
  }
  html.open_menu .menu_top .menu_top__lang b {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: var(--r-sm, 4px);
  }
  html.open_menu .menu_top .menu_top__login a {
    background: none;
    color: var(--color-primary);
    padding-left: 0;
  }
  html.open_menu .menu_top .menu_top__phone { display: block; padding: var(--sp-3) 0; background: none; }
  html.open_menu .menu_top .menu_top__phone a {
    display: block;
    padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
    background: url('/img/icons/phone.svg') no-repeat 0 50% / 18px 18px;
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
  }

  /* Wizard car-icon prefix (donor face/garage.svg → RemBaza /img/icons/garage.svg) */
  .garage_active::before,
  .home__car-selector .garage_alls .garage_active::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: var(--sp-2);
    background: url('/img/icons/garage.svg') no-repeat center / contain;
    color: var(--color-primary);
    vertical-align: middle;
  }
  /* Info (info.kiev) */
  .info__hero { height: 360px; margin-bottom: var(--sp-10); }
  .text__row { grid-template-columns: 1fr; gap: var(--sp-6); }
  .text:has(+ .help) { padding-bottom: 60px; }
  .text__img, .text .text__img { height: 240px; }
  .text__lead, .text .text__lead { margin-bottom: var(--sp-10); }

  /* ============================================================
     BURGER SUBMENU ACCORDION (2026-05-30) — реальні категорії з .submenu
     рендеряться у бургері як tap-accordion (donor parts.allzap.pro 1:1).
     Desktop .submenu (білий рядок + hover-dropdown) НЕ чіпається — усе тут в
     @media (max-width:1000px) і тільки під html.open_menu.

     Механізм як донор .menu_one/.menu_all:
       .submenu__item > a  = рядок-заголовок категорії з ⌄ справа (тап-таргет)
       .submenu__dropdown  = акордеон-контент (display:none, toggle тапом)
       .menu_row strong/a  = підкатегорії
     ============================================================ */

  /* Hardcode 7 пунктів (.menu_top_hardcode) — БЕЗ підкатегорій, мертві href="#".
     vda 2026-06-01: ПОКАЗУЄМО у бургері ЗВЕРХУ плоскими рядками (rembaza-розширення
     понад донор). DOM-порядок: nav(hardcode) → .submenu(категорії) → #menu_after(utility).
     Плоскі лінки: БЕЗ chevron (не expandable), темний текст #1e1e1e на white. */
  html.open_menu nav > .content > ul.menu_top_hardcode { display: block !important; }
  html.open_menu nav > .content > ul.menu_top_hardcode > li.menu_one > a {
    background-image: none !important;   /* плоский лінк, без ⌄ */
  }
  html.open_menu nav > .content > ul.menu_top_hardcode > li.menu_one > a > span {
    color: var(--color-text) !important;  /* темний текст замість orange-accordion */
  }

  /* .submenu у бургері: знімаємо display:none, показуємо повноширинним блоком
     одразу під nav (sticky-overlay). Перебиваємо display:none з рядків 2965/3122. */
  html.open_menu .submenu {
    display: block !important;
    position: static;
    z-index: auto;   /* нейтральне стекування у бургері — nav теж static, без overlay-перекриття */
    width: 100%;
    background: var(--color-bg);
    box-shadow: none;
    border: 0;
    padding: 0;
  }
  html.open_menu .submenu > .content {
    display: block;        /* перебиває global .submenu>.content{display:flex;height:50px} */
    height: auto;          /* інакше 9 категорій клампляться у 50px-рядок */
    align-items: initial;
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: visible;
  }
  html.open_menu .submenu ul {
    display: block !important;
    flex-wrap: nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Рядок категорії = .submenu__item (як donor .menu_one).
     flex:none + border-right:0 перебиває desktop flex-колонки (рядок 2626). */
  html.open_menu .submenu__item {
    display: block;
    position: static;
    flex: none;
    min-width: 0;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--color-divider-dark);
    background: var(--color-bg);
  }
  /* <a> категорії = тап-таргет з ⌄ справа (як donor .menu_one span).
     !important перебиває desktop/global .submenu__item>a (рядок 2638: padding/font
     з !important для білого quick-links бару) — інакше рядок 18px замість 51px. */
  html.open_menu .submenu__item > a {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 18px 15px 14px var(--sp-4) !important;
    font-size: var(--fs-base) !important;
    line-height: 20px !important;
    font-weight: var(--fw-semibold);
    color: var(--color-primary);   /* orange replaces donor #172164 */
    background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23f95203' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 15px center / 16px 16px !important;
    cursor: pointer;
    white-space: normal !important;
    text-align: left;
    text-decoration: none;
    box-sizing: border-box;
    justify-content: flex-start !important;
    transition: none;
  }
  /* прибрати desktop ::after underline-accent з submenu__item */
  html.open_menu .submenu__item > a::after { display: none; }
  /* розкритий стан — chevron вгору */
  html.open_menu .submenu__item.submenu__item--open > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 10l4-4 4 4' fill='none' stroke='%23f95203' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  /* .submenu__dropdown = акордеон-контент (як donor .menu_all) */
  html.open_menu .submenu__dropdown {
    display: none !important;
    position: static;
    width: 100%;
    background: var(--color-surface-2);
    box-shadow: none;
    border: 0;
    padding: 0 0 var(--sp-3);
    grid-template-columns: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  html.open_menu .submenu__item.submenu__item--open .submenu__dropdown {
    display: block !important;
  }
  /* .menu_row = група підкатегорій (як donor) */
  html.open_menu .submenu__dropdown .menu_row {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 var(--sp-4);
    box-sizing: border-box;
  }
  html.open_menu .submenu__dropdown .menu_row strong {
    display: block;
    margin: 0;
    padding: var(--sp-3) 0 var(--sp-1);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    border: 0;
  }
  html.open_menu .submenu__dropdown .menu_row strong a {
    color: var(--color-text);
    text-decoration: none;
    padding: 0;
    border: 0;
  }
  html.open_menu .submenu__dropdown .menu_row > a {
    display: block;
    padding: var(--sp-1) 0 var(--sp-2);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border-soft);
  }
  html.open_menu .submenu__dropdown .menu_row > a:last-child { border-bottom: 0; }
  html.open_menu .submenu__dropdown .menu_row > a:hover { color: var(--color-primary); }
}

/* ============================================================
   10.1 ≤761px — точна адаптація донорських breakpoints
   ============================================================ */
@media (max-width: 761px) {

  .content, .content_small {
    box-sizing: border-box;
    width: 100%;
    padding: 0 var(--sp-4);
  }

  /* Brand grid → 2 кол */
  .brands-grid { grid-template-columns: repeat(2, 1fr); }

  /* Step3 (рік) — DONOR pattern: декади ОДНА ПІД ОДНОЮ, але РОКИ в одній декаді
     горизонтально (flex: row). Round 14 vda fix був правильний.
     Попередній column-fix зламав donor pattern → повертаю row. */
  .step3 {
    display: flex !important;
    flex-direction: column !important;   /* декади 2020-е / 2010-е стек */
  }
  .garage_year {
    display: block !important;            /* donor pattern: block, не flex */
    width: 100%;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider-dark);
  }
  .garage_year:last-child { border-bottom: 0; }
  .garage_year > div {                    /* "2020-е" decade label — повний рядок */
    display: block;
    width: 100%;
    padding: 10px 8px 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--color-text);
  }
  .garage_year > span,
  .garage_year > b {
    display: inline-block !important;     /* donor pattern: 5 col */
    width: 20% !important;
    box-sizing: border-box;
    vertical-align: top;
    padding: 10px 4px;
    text-align: center;
    font-size: var(--fs-sm);
    line-height: 1.2;
    color: var(--color-text);
    cursor: pointer;
    border-right: 1px solid var(--color-border-soft);
  }
  .garage_year > span:nth-child(5n+1),
  .garage_year > b:nth-child(5n+1) { border-right: 0; }  /* 5й стовпець без правого бордеру */
  .garage_year > b {                       /* disabled рік */
    color: var(--color-text-muted, #c9c9c9);
    opacity: 0.5;
    cursor: default;
  }

  /* === variant г: search у nav, mobile header 3-rows === */

  /* ROW 1 top-bar */
  .top-bar { padding: 0; }

  /* ROW 2 header: logo(big) + phone(flat) + cart(flat) */
  .header > .content { flex-wrap: nowrap; align-items: center; padding: 8px 15px; }
  .header .logo { width: 180px; height: 60px; }
  .header .search { display: none; }
  .header .phone a.ks {
    overflow: hidden; font-size: 0; color: transparent;
    background-image: url('/img/icons/phone-light.svg');
    background-color: transparent;
    background-size: 22px 22px; background-repeat: no-repeat; background-position: center;
    width: 40px; height: 40px; display: block;
  }
  .header .cart::before { border-radius: 0 !important; background-color: transparent !important; }
  .header .cart > div { display: none; }
  .header .cart { flex: none; }

  /* ROW 3 nav: burger + search(full width) */
  nav { background: #ffffff; }
  nav > .content { flex-wrap: nowrap; align-items: center; gap: 4px; padding: 0 12px; }
  .search--nav { display: block; flex: 1; }
  .search--nav form { display: flex; align-items: center; margin: 0; }
  .search--nav input[name="search"],
  .search--nav input[type="text"] {
    height: 36px; flex: 1; min-width: 0;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    color: #1e1e1e;
    padding: 0 40px 0 14px;
  }
  .search--nav button {
    width: 24px; height: 24px; min-width: 24px;
    background-color: transparent !important;
    border-radius: 0 !important;
    background-size: 18px 18px;
    padding: 0;
  }

  /* burger × orange */
  .menu { filter: none; }
  html.open_menu .menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='%23F95203' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  }
  /* Info (info.kiev) */
  .info__hero { height: 280px; margin-bottom: var(--sp-8); }
  .text__img, .text .text__img { height: 200px; }
  .text__col { gap: var(--sp-4); }
}

/* === 7.6 MARKA (marka.html — core/shop/car_marka_linia.kiev) — car-flow 1/3 ===
   Wizard = §7.5 GARAGE (donor, синк з live). Тут — lead + сітка моделей.
   Dual-selector: .mod_other (donor) + .car-models__grid (BEM).
   Сітка моделей: донор = текст-лінки .mod_other > a; RemBaza = картки з фото. */

/* lead-підзаголовок (donor .name_s) */
.name_s,
.marka-lead {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 24px;
  color: var(--color-text);
  margin: 0 0 var(--sp-10);
}

/* секція моделей */
.car-models { padding-top: 30px; }
.car-models__title {
  font-size: 36px;
  font-weight: var(--fw-medium);
  line-height: 48px;
  color: var(--color-text);
  margin: 0 0 56px;
}

/* сітка карток моделей: 4 кол, gap 27, картка 300×220.
   .car-models__grid префікс — щоб побити донорський .mod_other a/span (0,1,1). */
.mod_other.car-models__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 27px;
}
.car-models__grid .car-models__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  height: 220px;
  padding: 18px 0 0;
  background: var(--color-bg);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-base),
              box-shadow var(--dur-fast) var(--ease-base);
}
.car-models__grid .car-models__item:hover {
  border-color: var(--color-border-soft);
  box-shadow: var(--shadow-card);
}
.car-models__grid .car-models__img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 190px;
  height: 130px;
  padding: 0;
  background: none;
  overflow: hidden;
}
.car-models__grid .car-models__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.car-models__grid .car-models__name {
  display: block;
  margin-top: 21px;
  padding: 0;
  background: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 24px;
  color: var(--color-text);
  text-align: center;
}
.car-models__item--no-photo .car-models__img img { opacity: 0.9; }

/* responsive (README §2): ≤1000 3 кол; ≤610 2 кол */
@media (max-width: 1000px) {
  .mod_other.car-models__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 610px) {
  .mod_other.car-models__grid { grid-template-columns: repeat(2, 1fr); }
}
/* === /7.6 MARKA === */

/* === 7.7 MODEL (model.html — core/shop/car_linia.kiev) — car-flow 2/3 ===
   Натяжка з handoff/06-model-handoff (Figma node 51:3098). Wizard = §7.5 GARAGE
   (donor, спільний з marka — НЕ дублюємо). Тут: акордеон категорій (donor .catalogs/
   .name_4/.pop_cats) + інші моделі марки (donor .mod_other). Dual-selector: donor-клас
   (натяжник) + BEM (site-starter). Картки .pop_cats: донор=текст+іконка; RemBaza=фото 240×200. */

/* --- 7.7 MODEL (model.html — core/car-model.kiev) — car-flow 2/3 -----
   Модель ОБРАНА → wizard крок 3 «Рік випуску» (§7.5 GARAGE, спільний блок —
   НЕ дублюємо). Тут: категорії запчастин обраної моделі (акордеон, донор
   .catalogs / .name_4 / .pop_cats) + інші моделі марки (донор .mod_other).
   Dual-selector: donor-клас (натяжник) + BEM (site-starter).
   Картки .pop_cats: донор = текст+іконка зверху; RemBaza = фото 240×200 + назва. */

/* Акордеон категорій — кожна група відділена лінією */
.car-cats { margin-top: 40px; }   /* + wizard mb 40 = відступ wizard→категорії */
.car-cats__group { border-top: 1px solid var(--color-border-soft); }
.car-cats__group:last-of-type { border-bottom: 1px solid var(--color-border-soft); }

/* Заголовок категорії (.name_4) — 24/600/36 + chevron справа */
.car-cats .name_4,
.car-cats__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin: 0;
  padding: 36px 0;                   /* Figma: рядок ≈109px (текст 36 + 36/36 паддинг) */
  font-size: var(--fs-2xl);          /* 24 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 36px;                 /* hardcode — токена lh-36 немає */
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.car-cats__head::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url(/img/icons/chevron-down.svg) no-repeat center / contain;
  transition: transform var(--dur-fast) var(--ease-base);
}
.car-cats__group--open > .car-cats__head::after { transform: rotate(180deg); }

/* Тіло розкритої категорії */
.car-cats__body { padding-bottom: 40px; }

/* Підкатегорія-рядок — 20/500/26 + chevron */
.car-cats__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 12px 0;                   /* Figma: рядки 50px один від одного (26 + 12/12) */
  font-size: var(--fs-xl);           /* 20 */
  font-weight: var(--fw-medium);     /* 500 */
  line-height: 26px;
  color: var(--color-text);
  text-decoration: none;
  border-top: 1px solid var(--color-border-soft);
}
.car-cats__row::after {
  content: "";
  flex-shrink: 0;
  width: 16px; height: 16px;
  background: url(/img/icons/chevron-down.svg) no-repeat center / contain;
}
.car-cats__row:hover { color: var(--color-primary); }
.car-cats__body > .car-cats__row:first-child { border-top: 0; }

/* Сітка карток категорій (.pop_cats) — 5 кол, gap 20 (донор-grid).
   .pop_cats базово зайнятий home (§7.1, 3-кол) — scoped .car-cats__grid (0,2,0)
   перебиває home-сітку на car-model. */
.pop_cats.car-cats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);                  /* 20 (донор .pop_cats gap) */
  margin: 20px 0;
}
/* картка = фото 240×200 зверху + назва 18/600 центр. Перебиваємо донор .pop_cats a
   (білий бокс з shadow/padding) — RemBaza-картка з повнорозмірним фото. */
.car-cats__grid .pop_cats__item {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);        /* 16 */
  box-shadow: none;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow var(--dur-fast) var(--ease-base);
}
.car-cats__grid .pop_cats__item:hover { box-shadow: var(--shadow-md); }
.car-cats__grid .pop_cats__img {
  display: block;
  height: 200px;
  background: var(--color-card-soft);
}
.car-cats__grid .pop_cats__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.car-cats__grid .pop_cats__name {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 90px;                  /* img 200 + 90 = картка 290 (Figma) */
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-lg);           /* 18 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 24px;
  color: var(--color-text);
  text-align: center;
}

/* Інші моделі марки (.mod_other) — заголовок + сітка 5-кол карток-лінків */
.car-other-models { margin: 50px 0 100px; }  /* mb 100 — Figma gap grid→help banner (hardcode, токена 100 немає) */
.car-other-models__title,
.car-other-models .name {
  margin: 0 0 30px;
  font-size: 36px;                   /* page-title рівень (Figma 36/500/48), НЕ section-title 40/700 */
  font-weight: var(--fw-medium);     /* 500 */
  line-height: 48px;
  color: var(--color-text);
}
/* префікс .car-other-models__grid — щоб побити донор .mod_other a/span (фон #F1F1F1 + arrow2.svg) */
.mod_other.car-other-models__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-6);                  /* 24 ≈ Figma 25 */
  padding: 0;
}
.car-other-models__grid .car-other-models__item {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 60px;
  padding: 0 var(--sp-10);           /* 40 — щоб текст не наїхав на arrow */
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-regular);    /* 400 */
  line-height: 24px;
  color: var(--color-text);
  text-align: center;
  text-decoration: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);        /* 16 */
  transition: box-shadow var(--dur-fast) var(--ease-base),
              border-color var(--dur-fast) var(--ease-base),
              color var(--dur-fast) var(--ease-base);
}
.car-other-models__grid .car-other-models__item::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background: url(/img/icons/arrow-right.svg) no-repeat center / contain;
}
.car-other-models__grid .car-other-models__item:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
  color: var(--color-primary);
}



/* --- натяжник: акордеон-стани + subgroup-заголовок (донор <span> над .pop_cats) --- */
/* згорнута група — body прихований (toggle JS додає/знімає --open) */
.car-cats__group:not(.car-cats__group--open) > .car-cats__body { display: none; }
/* subgroup-заголовок (донор <span>, напр. «Фільтри») — текст над сіткою карток */
.car-cats__body > span {
  display: block;
  margin: 24px 0 0;
  font-size: var(--fs-xl);          /* 20 */
  font-weight: var(--fw-medium);    /* 500 */
  line-height: 26px;
  color: var(--color-text);
}
.car-cats__body > span:first-child { margin-top: 0; }
/* ── MODEL — responsive (категорії-картки + інші моделі) ───────────── */
@media (max-width: 1000px) {
  .pop_cats.car-cats__grid { grid-template-columns: repeat(3, 1fr); }
  .mod_other.car-other-models__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 761px) {
  .car-cats .name_4, .car-cats__head { padding: 24px 0; }
  .car-cats__row { font-size: var(--fs-lg); }
  .pop_cats.car-cats__grid { grid-template-columns: repeat(2, 1fr); }
  .mod_other.car-other-models__grid { grid-template-columns: repeat(2, 1fr); }
  .car-other-models__title, .car-other-models .name { font-size: var(--fs-3xl); line-height: 1.2; }
}
@media (max-width: 470px) {
  .pop_cats.car-cats__grid { grid-template-columns: 1fr; }
}
/* === /7.7 MODEL === */

/* === 7.8 CATEGORY-TECDOC (category-tecdoc.html — core/shop/car_linia.kiev BLOCK 1) — car-flow 3/3 ===
   URL /car<id>-<marka>-<model>/catalog-<slug>/ — TECDOC reverse-picker (список запчастин
   однієї категорії для обраного авто). Wizard = §7.5 GARAGE. Пейджер = §6.12 (.pagination).
   «Інші моделі» = §7.6/7.7 .car-other-models (reuse 1:1, без page-override margin).
   Cross-sell — РІЖЕМО (CMS-слоту «обратный подбор» немає — baseline CHECK #2).
   Dual-selector: donor-клас (натяжник) + BEM (site-starter).
   ⚠ rembaza <body> без класу → handoff .category-tecdoc-scope не застосовний;
   класи cat-tecdoc/cat-mods самодостатні (category-only), scope не потрібен. */

/* Заголовок секції (donor .name_2) — 36/500/48 (Figma section title, page-title рівень).
   Перша поява .name_2 — узгоджено (handoff §9). Список товарів / модифікації. */
.name_2 {
  font-size: 36px;
  font-weight: var(--fw-medium);     /* 500 */
  line-height: 48px;
  color: var(--color-text);
  margin: 0 0 60px;
}

/* wizard → список */
.cat-tecdoc { margin-top: 40px; }

/* Сітка карток товарів — 4 кол, gap 27(col)/26(row) (Figma). */
.prods.cat-tecdoc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 27px;
}

/* Картка товару (donor .pro). DOM-порядок донора: .pro_name → .pro_img → .pro_info.
   RemBaza-візуал: фото зверху → бренд → назва → [ціна + кнопка] → термін
   (перевпорядкування flex order + grid-area; донор DOM не змінюємо). */
.pro.cat-tecdoc__card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);        /* 16 */
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-base),
              border-color var(--dur-fast) var(--ease-base);
}
.pro.cat-tecdoc__card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-submenu); /* 0 3px 12px rgba(0,0,0,.14) */
}

/* фото — квадрат (Figma 300×300), інсет 25 → зобр. 250 */
.cat-tecdoc__img {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 25px;
}
.cat-tecdoc__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-md);        /* 8 */
}

/* бренд + артикул (donor .pro_name) */
.cat-tecdoc__art {
  order: 2;
  margin: var(--sp-5) 0 0;           /* 20 */
  padding: 0 var(--sp-6);            /* 24 */
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 24px;
  color: var(--color-text);
}
.cat-tecdoc__art:hover { text-decoration: underline; }

/* інфо-блок (donor .pro_info). Grid: [title] / [price|buy] / [term]
   — кнопка поряд з ціною попри DOM-порядок (price, term, abuy). */
.cat-tecdoc__info {
  order: 3;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title title"
    "price buy"
    "term  term";
  align-items: center;
  column-gap: var(--sp-3);
  padding: 10px var(--sp-6) var(--sp-6);  /* 10/24/24 */
}
.cat-tecdoc__title {
  grid-area: title;
  font-size: var(--fs-sm);           /* 14 */
  font-weight: var(--fw-regular);
  line-height: 20px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-tecdoc__price {
  grid-area: price;
  align-self: center;
  margin-top: var(--sp-5);           /* 20 */
  font-size: 22px;
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 32px;
  color: var(--color-text);
  white-space: nowrap;
}
.cat-tecdoc__term {
  grid-area: term;
  margin-top: 12px;
  font-size: var(--fs-xs);           /* 12 */
  font-weight: var(--fw-regular);
  line-height: 18px;
  color: var(--color-text-muted);    /* «Срок поставки:» сірий */
}
.cat-tecdoc__term strong {
  font-weight: var(--fw-regular);
  color: var(--color-text);          /* значення терміну — темне */
}

/* кнопка «Купити» (donor .abuy) — 86×50, темна, hover помаранчева */
.cat-tecdoc__buy {
  grid-area: buy;
  align-self: center;
  margin-top: var(--sp-5);           /* 20 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 50px;
  border-radius: var(--r-xl);        /* 16 */
  background: var(--color-menu-bg);  /* #3c3c3c */
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);           /* 14 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 20px;
  text-align: center;
  transition: background var(--dur-fast) var(--ease-base);
}
.cat-tecdoc__buy:hover { background: var(--color-primary); }   /* #f95203 */

/* грид → пейджер */
.cat-tecdoc__pager { margin-top: 50px; }

/* --- Модифікації (donor .models/.mod_mod/.name_5) --- */
.cat-mods { margin-top: 70px; }
.models.cat-mods__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 27px;
}
.cat-mods__grid .mod_mod .name_5 {
  margin: 0 0 var(--sp-4);           /* 16 */
  font-size: var(--fs-lg);           /* 18 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 24px;
  color: var(--color-text);
}
.cat-mods__grid .mod_mod span {
  display: block;
  font-size: var(--fs-sm);           /* 14 */
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-text);
}

/* ── CATEGORY-TECDOC responsive (товари 4→3→2→1, модифікації 4→2→1) ── */
@media (max-width: 1000px) {
  .prods.cat-tecdoc__grid { grid-template-columns: repeat(3, 1fr); }
  .models.cat-mods__grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 761px) {
  .name_2 { font-size: var(--fs-3xl); line-height: 1.2; }  /* 36→32 */
  .prods.cat-tecdoc__grid { grid-template-columns: repeat(2, 1fr); }
  .cat-mods { margin-top: 50px; }
}
@media (max-width: 610px) {
  /* вузька картка: ціна/кнопка/термін стовпчиком, кнопка на всю ширину */
  .cat-tecdoc__info {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "price" "term" "buy";
    align-items: start;
  }
  .cat-tecdoc__buy { width: 100%; margin-top: var(--sp-3); }
  .pagination { gap: var(--sp-3); }
}
@media (max-width: 470px) {
  .models.cat-mods__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 18px; }
  .cat-mods__grid .mod_mod .name_5 { margin-bottom: 8px; line-height: 22px; }
  .cat-mods__grid .mod_mod span { line-height: 22px; }
}
@media (max-width: 350px) {
  .prods.cat-tecdoc__grid { grid-template-columns: 1fr; }
}
/* === /7.8 CATEGORY-TECDOC === */

/* ══════════════════════════════════════════════════════════════════
   §7.8 CROSS-SELL «Можливо вас зацікавлять інші запчастини» (.cat-cross)
   STATIC ЗАГЛУШКА під динаміку (category-tecdoc, car_linia.kiev BLOCK 1).
   virtus1k: контейнер .cat-cross, 4-кол сітка текст-лінків (CMS «обратный подбор»).
══════════════════════════════════════════════════════════════════ */
.category-tecdoc .cat-cross { margin: 70px 0 100px; }
.cat-cross__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 27px;
}
.cat-cross__col      { display: flex; flex-direction: column; gap: 14px; }
.cat-cross__link {
  font: 400 15px/1.4 var(--font);
  color: var(--color-text);
  transition: color .15s;
}
.cat-cross__link:hover { color: var(--color-primary); }

@media (max-width: 1000px) {
  .cat-cross__grid            { grid-template-columns: repeat(2, 1fr); }
  .category-tecdoc .cat-cross { margin-top: 50px; }
}
@media (max-width: 360px) {
  .cat-cross__grid            { grid-template-columns: 1fr; }
}
/* ============================================================
   CSS-DIFF — product-tecdoc.html (8/14)
   Додати до base styles/style.css у дві секції:
   • БЛОК A → §7 PAGES (після §7.8 CATEGORY-TECDOC, перед §8 UTILITIES)
   • БЛОК B → §9 MEDIA QUERIES (у кінець, після category-tecdoc media)
   Також base-зміна: .product-grid grid-template-columns: repeat(2, minmax(0,1fr))
   Dual-selector: donor-клас (натяжник на live) + BEM (site-starter).
   ============================================================ */

/* ╔══════════════════════════════════════════════════════════╗
   ║ БЛОК A — §7.10 PRODUCT (page styles)                      ║
   ╚══════════════════════════════════════════════════════════╝ */

/* --- 7.10 PRODUCT-TECDOC (product-tecdoc.html — part_tecdoc-rembaza) ---
   URL /part-<brand>-<art>/ (НЕ car-scoped). Strategy A: будуємо ПО FIGMA
   (редизайн — багата сторінка), донор = джерело даних/класів/хуків.
   Reuse: картка аналогів = §7.8 .pro/.cat-tecdoc__* (БЕЗ «В наявності»),
   кнопка тут .buy (AJAX) не .abuy. Глобальні .bread/.help/.inp_1/токени.
   Нове тут: my-garage бар, hero (фото+інфо+ціна+доставка/оплата), таблиці
   «Всі ціни»/«Характеристики»/OE, банер придатності, brand-card.
   Dual-selector: donor-клас (натяжник) + BEM (site-starter). */

/* ═══ Мій гараж (donor .garage_my) — згорнутий бар обраного авто ═══
   RemBaza-візуал scoped під .product-tecdoc (донор §7.5 .garage_my = navy wizard-стан;
   тут НЕ чіпаємо інші сторінки). bread(mb50) → garage → garage(mb70) → h1. */
.product-tecdoc .my-garage,
.product-tecdoc .garage_my,
.modif .garage_my,
.car-category .garage_my {
  display: flex;
  align-items: stretch;
  height: 60px;
  margin: 0 0 70px;                  /* garage → h1 = 70 (Figma) */
}
/* «Мій гараж» trigger (256, ліва половина пілюлі) */
.product-tecdoc .my-garage__trigger,
.product-tecdoc .garage_my_name,
.modif .garage_my_name,
.car-category .garage_my_name {
  position: relative;
  flex: 0 0 256px;
  display: flex;
  align-items: center;
  width: auto;                       /* override donor .garage_my_name width:160 */
  padding: 0 51px 0 22px;            /* місце під chevron справа */
  background: var(--color-surface);  /* #f0f0f0 */
  border: 0;
  border-radius: var(--r-xl) 0 0 var(--r-xl);
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-semibold);   /* 600 */
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}
.product-tecdoc .my-garage__trigger::after,
.product-tecdoc .garage_my_name::after,
.modif .garage_my_name::after,
.car-category .garage_my_name::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url('/img/icons/chevron-down.svg') no-repeat center / 16px;
}
/* картка обраного авто (права половина пілюлі) */
.product-tecdoc .my-garage__car,
.product-tecdoc .garage_my .garage_car,
.modif .garage_my .garage_car,
.car-category .garage_my .garage_car {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0 14px 0 0;                /* override donor .garage_car margin */
  padding: 0 51px 0 16px;
  background: var(--color-surface);  /* #f0f0f0 */
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  cursor: pointer;
}
.product-tecdoc .my-garage__car::after,
.product-tecdoc .garage_my .garage_car::after,
.modif .garage_my .garage_car::after,
.car-category .garage_my .garage_car::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 15px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%) rotate(90deg);
  background: url('/img/icons/chevron-down.svg') no-repeat center / 16px;
}
.product-tecdoc .my-garage__car-name,
.product-tecdoc .garage_car_name,
.modif .garage_car_name,
.car-category .garage_car_name {
  font-size: var(--fs-sm);           /* 14 */
  font-weight: var(--fw-medium);     /* 500 */
  line-height: 20px;
  color: var(--color-text);
}
.product-tecdoc .my-garage__car-info,
.product-tecdoc .garage_car_info,
.modif .garage_car_info,
.car-category .garage_car_info {
  font-size: var(--fs-xs);           /* 12 */
  font-weight: var(--fw-regular);
  line-height: 18px;
  color: #616161;                    /* hardcode — Figma garage info grey, токена нема */
  text-transform: none;              /* override donor lowercase */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-tecdoc .my-garage__car-info span,
.modif .garage_car_info span,
.car-category .garage_car_info span { text-transform: none; }
/* «Додати авто» (donor .garage_new) — темна кнопка 260 */
.product-tecdoc .my-garage__add,
.product-tecdoc .garage_my .garage_new,
.modif .garage_my .garage_new,
.car-category .garage_my .garage_new {
  flex: 0 0 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;                         /* override donor */
  background: var(--color-menu-bg);  /* #3c3c3c */
  border-radius: var(--r-xl);
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-semibold);   /* 600 */
  color: var(--color-text-inverse);
  transition: background var(--dur-fast) var(--ease-base);
}
.product-tecdoc .my-garage__add span,
.product-tecdoc .garage_my .garage_new span,
.modif .garage_my .garage_new span,
.car-category .garage_my .garage_new span {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
}
.product-tecdoc .my-garage__add span::before,
.modif .garage_my .garage_new span::before,
.car-category .garage_my .garage_new span::before { content: none; }   /* прибрати donor garage.svg */
.product-tecdoc .my-garage__add:hover,
.product-tecdoc .garage_my .garage_new:hover,
.product-tecdoc .garage_my .garage_new span:hover,
.modif .garage_my .garage_new:hover,
.car-category .garage_my .garage_new:hover,
.modif .garage_my .garage_new span:hover,
.car-category .garage_my .garage_new span:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ═══ HERO товару ═══
   Сітка: media 300 | banner(span 2) / buy 300 | shipping 620.
   col-gap 30 (media→buy→shipping), row-gap 40 (banner→ряд). */
.product-hero {
  display: grid;
  grid-template-columns: 300px 300px 620px;
  column-gap: 30px;
  row-gap: 40px;
  grid-template-areas:
    "media banner   banner"
    "media buy      shipping";
  align-items: start;
  margin: 0 0 50px;                  /* hero → «Всі ціни» ряд = 50 */
}

/* Фото товару — 300×300, інсет 32 → зобр. 236 (Figma 51:5460) */
.product-hero__media {
  grid-area: media;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  padding: 32px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);        /* 16 */
}
.product-hero__img {
  width: 236px;
  height: 236px;
  object-fit: contain;
}

/* Правка 2 (2026-06-01): прибрати рамку навколо фото — Figma 51:5315 = фото на чистому білому
   без контуру/фону/радіусу. Scoped .product-tecdoc щоб не зачепити інші місця.
   Інсет (padding 32) лишаємо щоб фото не торкалось країв; пропорції img не чіпаємо. */
.product-tecdoc .product-hero__media {
  border: none;
  border-radius: 0;
  background: transparent;
}

/* Банер придатності (donor .tovar_garage) — pink-border попередження.
   ⚠ #ee1e68 — НОВИЙ колір з Figma, НЕ в токенах. Узгодити з vda (token чи hardcode). */
.product-hero__banner,
.tovar_garage {
  grid-area: banner;
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 8px 18px;
  background: var(--color-bg);
  border: 1px solid #ee1e68;         /* hardcode — Figma warning pink, узгодити з vda */
  border-radius: var(--r-xl);
  color: #ee1e68;                    /* hardcode — Figma warning pink */
  font-size: var(--fs-sm);           /* 14 */
  line-height: 20px;
}

/* Інфо-колонка: метадані → ціна → кнопка → «інші пропозиції» */
.product-hero__buy {
  grid-area: buy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.product-hero__meta-row {
  display: flex;
  gap: 6px;
  font-size: var(--fs-sm);           /* 14 */
  line-height: 20px;
  margin-bottom: var(--sp-2);        /* 8 — крок рядків 28 (20 lh + 8) Figma */
}
.product-hero__meta-row:last-child { margin-bottom: 0; }
.product-hero__meta dt { color: var(--color-text-muted); font-weight: var(--fw-regular); }
.product-hero__meta dd { color: var(--color-text); }
.product-hero__price {
  margin-top: 30px;                  /* метадані → ціна = 30 (Figma) */
  font-size: var(--fs-base);         /* 16 — «грн» */
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: 1;
}
.product-hero__price-num {
  font-size: 36px;                   /* hardcode — Figma price 36, токена fs-36 нема */
  font-weight: var(--fw-medium);     /* 500 */
  line-height: 48px;
}
.product-hero__buy-btn,
.product-hero .buy {                  /* scoped: НЕ чіпати .buy в картках аналогів */
  margin-top: 30px;                  /* ціна → кнопка = 30 (Figma) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 60px;
  background: var(--color-menu-bg);  /* #3c3c3c */
  border-radius: var(--r-xl);        /* 16 */
  color: var(--color-text-inverse);
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-semibold);   /* 600 */
  transition: background var(--dur-fast) var(--ease-base);
}
.product-hero__buy-btn:hover,
.product-tecdoc .product-hero__buy-btn:hover { background: var(--color-primary); }
.product-hero__other,
.tovar_other_prices {
  margin-top: 30px;                  /* кнопка → лінк = 30 (Figma) */
  font-size: var(--fs-base);         /* 16 */
  line-height: 22px;
  color: var(--color-text);
  text-decoration: underline;
}
.product-hero__other:hover { color: var(--color-primary); }
/* форма «Хочу запчастину» (out-of-stock, не в Figma — донор-логіка) */
.product-hero__want {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-5);
}
.product-hero__want .send {
  height: 50px;
  background: var(--color-menu-bg);
  color: var(--color-text-inverse);
  border-radius: var(--r-xl);
  font-weight: var(--fw-semibold);
}
.product-hero__want .send:hover { background: var(--color-primary); }

/* доставка + оплата (2 картки 300×330) */
.product-hero__shipping {
  grid-area: shipping;
  display: grid;
  grid-template-columns: 300px 300px;
  column-gap: 20px;                  /* hardcode — Figma gap 20 між картками */
}
.ship-card {
  width: 300px;
  height: 330px;
  padding: 25px 30px;
  background: var(--color-bg);
  border-radius: var(--r-xl);        /* 16 */
  box-shadow: var(--shadow-submenu); /* 0 3px 12px rgba(0,0,0,.14) — Figma card */
}
.ship-card__title {
  margin: 0 0 30px;                  /* title top25 (lh36→61) → 1-й рядок top91 (Figma) */
  font-size: var(--fs-2xl);          /* 24 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 36px;
  color: var(--color-text);
}
.ship-card__row {
  display: flex;
  align-items: center;
  gap: 12px;                         /* іконка → текст: 62-30-20 = 12 (Figma) */
  min-height: 36px;                  /* крок рядків 36 (Figma) */
  font-size: var(--fs-sm);           /* 14 */
  line-height: 20px;
  color: var(--color-text);
}
.ship-card__row img {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ═══ Сітка 2-кол секцій (Всі ціни|Характеристики, Опис|Виробник, OE|Авто) ═══ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 620 кожна @1280, плавно вужче */
  column-gap: 40px;                  /* hardcode — Figma 40 між колонками */
}
.product-grid--prices { margin-bottom: 70px; }   /* ряд цін → Аналоги = 70 */
.product-grid--desc   { margin-bottom: 50px; }   /* Опис → OE-номери = 50 */
.product-grid--last   { margin-bottom: 100px; }  /* остання секція → help = 100 */

/* Заголовки секцій товару — 24/600/36 (Figma; ВІДМІННІ від .name_2=36 на category).
   Натяжник: уточнити donor-клас цих h2 (на category .name_2=36, тут інакше). */
.prices__title,
.specs__title,
.product-desc__title,
.maker-card__heading,
.oem__title,
.applic__title {
  font-size: var(--fs-2xl);          /* 24 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 36px;
  color: var(--color-text);
  margin: 0 0 40px;                  /* заголовок → таблиця/контент = 40 (Figma) */
}

/* ═══ Таблиця «Всі ціни» (donor .tovar_prices > table#all_price) ═══ */
.prices__table,
#all_price {
  width: 100%;
  border-collapse: collapse;
}
.prices__table thead th,
#all_price thead th {
  height: 60px;
  padding: 0 18px;
  background: var(--color-menu-bg);  /* #3c3c3c — Figma table_title */
  color: var(--color-text-inverse);
  font-size: var(--fs-sm);           /* 14 */
  font-weight: var(--fw-semibold);   /* 600 */
  line-height: 20px;
  text-align: left;
  white-space: nowrap;
}
.prices__table tbody td,
#all_price tbody td {
  height: 60px;
  padding: 0 18px;
  border-bottom: 1px solid var(--color-border);  /* #d5d5d5 ≈ Figma #d1d1d1 */
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-regular);
  line-height: 24px;
  color: var(--color-text);
  vertical-align: middle;
}
.prices__help {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  vertical-align: middle;
}
.prices__action { text-align: right; }
.prices__action .c_add {
  font-size: var(--fs-sm);           /* 14 */
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-base);
}
.prices__action .c_add:hover { color: var(--color-primary); }

/* ═══ Таблиця «Характеристики» / OE-номери (label|value) ═══
   Натяжник уточнює donor-клас (нема SSH). border-bottom soft #e0e0e0 (Figma). */
.specs__table,
.oem__table {
  width: 100%;
  border-collapse: collapse;
}
.specs__table tr,
.oem__table tr { border-bottom: 1px solid var(--color-border-soft); }  /* #e0e0e0 */
.specs__table th,
.specs__table td,
.oem__table th,
.oem__table td {
  height: 60px;
  padding: 8px 0;
  font-size: var(--fs-base);         /* 16 */
  font-weight: var(--fw-regular);
  line-height: 24px;
  text-align: left;
  vertical-align: middle;
}
.specs__table th,
.oem__table th {
  width: 310px;                      /* Figma value-колонка з left 310 */
  color: var(--color-text-muted);    /* #7e7e7e — назва атрибута */
}
.specs__table td,
.oem__table td { color: var(--color-text); }

/* ═══ Аналоги — reuse §7.8 .pro/.cat-tecdoc__card. Сітка як category (4-кол, картка 300) ═══
   Кнопка тут .buy (AJAX): reuse розмір/вид .cat-tecdoc__buy (86×50). */
.analogues { margin-bottom: 60px; }  /* Аналоги → Опис = 60 (Figma) */
.analogues__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 27px;                    /* як §7.8 — Figma row26/col27 */
}
.analogues__grid .cat-tecdoc__buy.buy {   /* кнопка-аналог = .buy, але вид як .abuy 86×50 */
  width: 86px;
  height: 50px;
  margin-top: var(--sp-5);
}

/* ═══ Опис (WYSIWYG) ═══ */
.product-desc [data-cms-html] {
  font-size: var(--fs-base);         /* 16 */
  line-height: 24px;
  color: var(--color-text);
}

/* ═══ Maker-card (Виробник) — НЕ плутати з §6.13 .brand-card (бренди home) ═══ */
.maker-card { display: block; }      /* вертикальний стек: заголовок / лого / текст */
.maker-card__logo {
  width: auto;
  height: 30px;
  margin-bottom: var(--sp-6);        /* лого → текст: 2506→2560 = 54 (мінус lh) ≈ 24 */
  object-fit: contain;
  object-position: left;
}
.maker-card__text {
  font-size: var(--fs-base);         /* 16 */
  line-height: 24px;
  color: var(--color-text);
}

/* ═══ Підійде до таких авто — теги ═══ */
.applic__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.applic__tag {
  font-size: var(--fs-base);         /* 16 */
  line-height: 24px;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-base);
}
.applic__tag:hover { color: var(--color-primary); }



/* ╔══════════════════════════════════════════════════════════╗
   ║ БЛОК B — §9 MEDIA (адаптив product-tecdoc)               ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── PRODUCT-TECDOC (§7.10) адаптив — desktop-first по донор-брейкпоінтах ──
   Hero (300|300|620) і 2-кол сітки реверсуються; таблиця цін → data-label картки. */

/* ≤1280 (.content 996): hero — фото зліва, доставка/оплата окремим рядом нижче */
@media (max-width: 1280px) {
  .product-hero {
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas:
      "media banner"
      "media buy"
      "shipping shipping";
    row-gap: 30px;
  }
  .product-hero__shipping { grid-template-columns: 300px 300px; }

  /* PAGE-SCOPED: глобальний .help full-bleed (margin:0 -95px §6.8) переповнює
     по горизонталі при viewport < ~1470 (PRE-EXISTING, на ВСІХ сторінках —
     перевірено marka@390 теж scroll). Скидаємо margin ТІЛЬКИ на .product-tecdoc
     (NEVER-4 body-scope override), щоб моб цієї сторінки був без гориз. скролу.
     Глобальний фікс .help — окремий батч (vda/натяжник, див. handoff). */
  .product-tecdoc .help { margin-left: 0; margin-right: 0; }
}

/* ≤1000 (.content 738): аналоги 4→3 */
@media (max-width: 1000px) {
  .analogues__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ≤761 (.content 100%): все в стовпчик; таблиця цін → картки data-label */
@media (max-width: 761px) {
  .product-hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "banner"
      "buy"
      "shipping";
  }
  .product-hero__media { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1 / 1; }
  .product-hero__img { width: 100%; height: 100%; }

  .product-grid { grid-template-columns: 1fr; row-gap: 40px; }
  .analogues__grid { grid-template-columns: repeat(2, 1fr); }

  /* «Всі ціни» → стопка карток (thead ховаємо, td з data-label) */
  .prices__table thead { display: none; }
  .prices__table tr {
    display: block;
    padding: 12px 16px;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--r-lg);
    margin-bottom: 12px;
  }
  .prices__table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    height: auto;
    padding: 4px 0;
    border: 0;
  }
  .prices__table td::before {
    content: attr(data-label);
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
  }
  .prices__action { justify-content: flex-end; }
  .prices__action .c_add { color: var(--color-primary); }
}

/* ≤610: доставка/оплата в стовпчик */
@media (max-width: 610px) {
  .product-hero__shipping { grid-template-columns: 1fr; row-gap: 20px; }
  .ship-card { width: 100%; }
}

/* ≤470: аналоги 2→1; гараж-бар у стовпчик */
@media (max-width: 470px) {
  .analogues__grid { grid-template-columns: 1fr; }
  .product-tecdoc .my-garage,
  .product-tecdoc .garage_my { flex-direction: column; height: auto; gap: 8px; }
  .product-tecdoc .my-garage__trigger,
  .product-tecdoc .garage_my_name { flex: 0 0 auto; width: 100%; border-radius: var(--r-xl); }
  .product-tecdoc .my-garage__car,
  .product-tecdoc .garage_my .garage_car { width: 100%; margin: 0; border-radius: var(--r-xl); padding: 10px 51px 10px 16px; }
  .product-tecdoc .my-garage__add,
  .product-tecdoc .garage_my .garage_new { flex: 0 0 auto; width: 100%; height: 50px; }
}


/* ============================================================
   §7.10b PRODUCT-TECDOC — DONOR ADAPTATION (cms-integrator натяжка 8/14)
   Рушій core/shop/car_prod.kiev віддає donor-розмітку, що відрізняється
   від handoff-припущень верстальщика. Цей блок «садить» handoff-стилі
   на РЕАЛЬНІ donor-класи (звірено на live /part-roadhouse-654810/):
   • Характеристики/OE = div .tovar_har (span/span), НЕ <table>
   • Виробник = .tovar_brand (dual з .maker-card)
   • «Дивитись інші пропозиції» = span.ajax (dual з .tovar_other_prices)
   • Банер придатності 3 стани: нейтр./tg_yes/tg_no
   • Іконки доставки/оплати = donor-спрайт .ico_* (/img/icoa.png)
     — Figma-SVG верстальщика НЕ доставлені; свопнути коли будуть.
   ============================================================ */

/* Характеристики / OE — donor div-рядки .tovar_har (НЕ table-розмітка).
   Стиль = handoff specs/oem рядок: h60, border-bottom #e0e0e0, label #7e7e7e@310, value #1e1e1e. */
.product-tecdoc .specs__list .tovar_har,
.product-tecdoc .oem__list .tovar_har {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  align-items: center;
  min-height: 60px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border-soft);   /* #e0e0e0 */
}
.product-tecdoc .specs__list .tovar_har > span:first-child,
.product-tecdoc .oem__list  .tovar_har > span:first-child {
  font-size: var(--fs-base);          /* 16 */
  line-height: 24px;
  color: var(--color-text-muted);     /* #7e7e7e — назва атрибута/OE-бренд */
}
.product-tecdoc .specs__list .tovar_har > span + span,
.product-tecdoc .oem__list  .tovar_har > span + span {
  font-size: var(--fs-base);
  line-height: 24px;
  color: var(--color-text);           /* #1e1e1e — значення */
}

/* Банер придатності — 3 стани. Нейтральний = handoff pink (#ee1e68 → токен).
   tg_yes (підходить) = success, tg_no (не підходить) = error. */
.product-tecdoc .tovar_garage.tg_yes {
  border-color: var(--color-success);  /* #10b981 */
  color: var(--color-success);
}
.product-tecdoc .tovar_garage.tg_no {
  border-color: var(--color-error);    /* #ef4444 */
  color: var(--color-error);
}

/* Іконки доставки/оплати — donor-спрайт icoa.png (RemBaza style.css скинула donor ico_ rules).
   ship-card__row показує <i class="ico_*">. Розмір 20×20 під картку (Figma). */
.product-tecdoc .ship-card__row .ico_np,
.product-tecdoc .ship-card__row .ico_me,
.product-tecdoc .ship-card__row .ico_up,
.product-tecdoc .ship-card__row .ico_cash,
.product-tecdoc .ship-card__row .ico_card,
.product-tecdoc .ship-card__row .ico_bank,
.product-tecdoc .ship-card__row .ico_on {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  background-image: url(/img/icoa.png);
  background-repeat: no-repeat;
  background-size: 20px;
  display: inline-block;
}
.product-tecdoc .ship-card__row .ico_me   { background-position: 0 0; }
.product-tecdoc .ship-card__row .ico_np   { background-position: 0 -19.3px; }
.product-tecdoc .ship-card__row .ico_up   { background-position: 0 -39.3px; }
.product-tecdoc .ship-card__row .ico_cash { background-position: 0 -59.3px; }
.product-tecdoc .ship-card__row .ico_card { background-position: 0 -79.3px; }
.product-tecdoc .ship-card__row .ico_bank { background-position: 0 -99.3px; }
.product-tecdoc .ship-card__row .ico_on   { background-position: 0 -341.3px; }

/* maker-card лого-обгортка (donor .tovar_brand виводить лого в <div>, не <img> напряму) */
.product-tecdoc .maker-card__logo img { height: 30px; width: auto; object-fit: contain; }

/* Опис-скелет порожній — ховаємо порожній блок поки virtus1k не заллє CMS-поле.
   (контейнер лишається в DOM для virtus1k-хука, але без контенту не займає зайвого) */
.product-tecdoc .product-desc [data-cms-html]:empty { display: none; }

/* ── §7.10c ICON FIX (cms-integrator) — асети доставки/оплати НЕ доставлені ──
   Ні Figma-SVG верстальщика (logo-novaposhta.svg…), ні donor-спрайт icoa.png
   на сервері НЕ існують. Прибираємо биті background-image (щоб не було 404),
   ховаємо placeholder-<i> — рядки лишаються чистим текстом (без битих картинок).
   ⚠ vda/верстальщик: дати реальні SVG-іконки доставки/оплати → свопну.
   ОВЕРРАЙД попереднього icoa.png-блоку (CSS last-wins). */
.product-tecdoc .ship-card__row .ico_np,
.product-tecdoc .ship-card__row .ico_me,
.product-tecdoc .ship-card__row .ico_up,
.product-tecdoc .ship-card__row .ico_cash,
.product-tecdoc .ship-card__row .ico_card,
.product-tecdoc .ship-card__row .ico_bank,
.product-tecdoc .ship-card__row .ico_on {
  display: none;            /* нема асета → ховаємо, без 404/битих картинок */
  background-image: none;
}
/* рядок без іконки — лишаємо вертикальний ритм (44px Figma на моб теж ок) */
.product-tecdoc .ship-card__row { gap: 12px; }

/* ── §7.10d ANALOG CARD ALIAS (cms-integrator) ──
   Рушій prod() віддає BARE .pro (донор-розмітка), а §7.8 картка стилізована на
   .pro.cat-tecdoc__card (два класи). Тому аналоги в .analogues__grid треба
   зачепити окремим alias = той самий вигляд картки 7/14, але на bare .pro. */
.analogues__grid .pro {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: box-shadow var(--dur-fast) var(--ease-base), border-color var(--dur-fast) var(--ease-base);
}
.analogues__grid .pro:hover { border-color: transparent; box-shadow: var(--shadow-submenu); }
.analogues__grid .pro .pro_img { order: 1; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; padding: 25px; }
.analogues__grid .pro .pro_img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); }
.analogues__grid .pro .pro_name { order: 2; margin: var(--sp-5) 0 0; padding: 0 var(--sp-6); font-size: var(--fs-base); font-weight: var(--fw-semibold); line-height: 24px; color: var(--color-text); }
.analogues__grid .pro .pro_name:hover { text-decoration: underline; }
.analogues__grid .pro .pro_info { order: 3; flex: 1; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title title" "price buy" "term term"; align-items: center; column-gap: var(--sp-3); padding: 10px var(--sp-6) var(--sp-6); }
.analogues__grid .pro .pro_info > a { grid-area: title; font-size: var(--fs-sm); line-height: 20px; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.analogues__grid .pro .pro_price { grid-area: price; align-self: center; margin-top: var(--sp-5); font-size: 22px; font-weight: var(--fw-semibold); line-height: 32px; color: var(--color-text); white-space: nowrap; }
.analogues__grid .pro .pro_term { grid-area: term; margin-top: 12px; font-size: var(--fs-xs); font-weight: var(--fw-regular); line-height: 18px; color: var(--color-text-muted); }
.analogues__grid .pro .pro_term strong { font-weight: var(--fw-regular); color: var(--color-text); }
.analogues__grid .pro .buy { grid-area: buy; align-self: center; margin-top: var(--sp-5); display: inline-flex; align-items: center; justify-content: center; width: 86px; height: 50px; border: 0; border-radius: var(--r-xl); background: var(--color-menu-bg); color: var(--color-text-inverse); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 20px; cursor: pointer; transition: background var(--dur-fast) var(--ease-base); }
.analogues__grid .pro .buy:hover { background: var(--color-primary); }

/* ============================================================
   §7.10e PRODUCT-TECDOC — PIXEL-QA FIXES (layout-qa 8/14, 2026-05-30)
   Page-scoped (.product-tecdoc) правки після live-QA проти Figma 51:5315.
   Усе під .product-tecdoc → 0 впливу на глобал/інші сторінки.
   ============================================================ */

/* (1) 🔴 «Підійде до таких авто» — Figma 51:5611/5628 = ТЕКСТ-теги в рядок
   (Mazda  BMW  FORD  Alfa-Romeo), 16/Poppins, БЕЗ карток/лого/стрілки.
   Рушій віддає donor `.mod_other.mod_other2 > span[onClick=ak_mod]` з <img>-лого,
   а глобальний §7.5 .mod_other2 span (рядок ~2043-2049) малює сірі картки #f1f1f1
   + arrow2.svg + radius. Скидаємо ДО плоских текст-тегів (Figma). */
.product-tecdoc .applic .applic__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;            /* Figma: теги розділені великими проміжками в рядок */
  background: none;
  padding: 0;
}
.product-tecdoc .applic .applic__tags span {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  background: none;          /* прибрати сіру плашку #f1f1f1 + arrow2.svg */
  border: 0;
  border-radius: 0;
  font-size: var(--fs-base); /* 16 */
  font-weight: var(--fw-regular);
  line-height: 24px;
  color: var(--color-text);  /* #1e1e1e */
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-base);
}
.product-tecdoc .applic .applic__tags span:hover { color: var(--color-primary); }
.product-tecdoc .applic .applic__tags span img { display: none; }  /* лого прибрати (Figma — лише текст) */

/* (2) 🔴 Ціна hero — Figma 51:5504: число 36/Poppins-Medium(500)/48 + «грн» 16.
   Рушій: <div class="tovar_price product-hero__price"><span>1164</span> грн</div>.
   CSS цілив у `.product-hero__price-num` (BEM-клас якого рушій НЕ віддає) → число
   лишалось 16px. Чіпляємо РЕАЛЬНИЙ bare <span>. Контейнер вже 16 (для «грн»-text-node). */
.product-tecdoc .product-hero__price span,
.product-tecdoc .product-hero__price-num {
  font-size: 36px;                 /* Figma price 36 */
  font-weight: var(--fw-medium);   /* 500 */
  line-height: 48px;
}

/* (3) 🔴 Заголовок «Опис» — Figma 51:5464 = 24/600/36. Рушій: section.text → глобал
   `.text h2` (рядок 1359, fs-3xl=32) бив `.product-desc__title` (0,1,0). Повертаємо 24. */
.product-tecdoc .product-desc__title {
  font-size: var(--fs-2xl);        /* 24 */
  font-weight: var(--fw-semibold); /* 600 */
  line-height: 36px;
  margin: 0 0 40px;
}

/* (4) 🔴 H1 товару — Figma 51:5459 = 36/Poppins-Medium(500)/48 (= рівень page-title,
   як на marka 5/14 прийнято). Рушій: <h1 class="page-title"> бере глобал h1
   (fs-5xl=50/700/70). Скейлимо page-scoped під .product-tecdoc. */
.product-tecdoc h1.page-title,
.product-tecdoc > h1 {
  font-size: 36px;
  font-weight: var(--fw-medium);   /* 500 */
  line-height: 48px;
  margin: 0 0 24px;                 /* H1→hero відступ: 2-рядковий H1 @390 не налазить на фото (нормальний flow, без fixed-height) */
}

/* (5) 🔴 Mobile .help overflow — page-scoped reset @≤1280 зануляв margin,
   але лишав width:100vw (>parent .bg = 358 на 390vp) → +16px гориз.скрол.
   Width:auto щоб .help поважав ширину контейнера. */
@media (max-width: 1280px) {
  .product-tecdoc .help {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
}

/* (6) 🔴 Mobile specs/OE overflow — рядок .tovar_har має фікс. label-колонку 310px,
   що НЕ влазить у 358px моб.рядок → content scrollWidth 425 (phantom гориз.скрол).
   @≤761 (1-кол стадія) колонка лейбла гнучка, мін-ширина значення 0. */
@media (max-width: 1000px) {
  .product-tecdoc .specs__list .tovar_har,
  .product-tecdoc .oem__list .tovar_har {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    column-gap: 12px;
  }
  .product-tecdoc .specs__list .tovar_har > span,
  .product-tecdoc .oem__list .tovar_har > span {
    overflow-wrap: anywhere;
  }
}

/* ============================================================
   §7.10g PRODUCT-TECDOC — MOBILE CARD FIX (layout-qa, 2026-06-01)
   ТІЛЬКИ @≤761 (моб). Desktop hero (info-колонка) + 4-кол таблиця НЕ чіпаємо.
   Розмітка (дата-шар car_prod.kiev) НЕ змінювалась — чисто CSS на donor-класах.
   ============================================================ */
@media (max-width: 761px) {

  /* (1) HERO @моб: ціна ЗЛІВА + кнопка «Купити» СПРАВА в ОДНОМУ рядку.
     `.product-hero__buy` = flex-column (meta → price → .buy).
     Робимо контейнер row-wrap: meta лишається зверху (flex:100% форсить
     перенос), price + .buy падають у НАСТУПНИЙ рядок поруч → space-between.
     CSS-only, без markup-зміни. Desktop (>761) — column як у Figma, не зачеплено. */
  .product-tecdoc .product-hero__buy {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    row-gap: 0;
  }
  .product-tecdoc .product-hero__buy .product-hero__meta {
    flex: 0 0 100%;             /* мета на всю ширину → форсить перенос price+buy на новий рядок */
    margin: 0 0 16px;
  }
  .product-tecdoc .product-hero__buy .product-hero__price {
    margin-top: 0;             /* desktop margin-top:30 не потрібен у рядку */
    flex: 0 1 auto;
  }
  .product-tecdoc .product-hero__buy .buy {
    margin-top: 0;             /* desktop ціна→кнопка 30 скидаємо для рядка */
    flex: 0 0 auto;            /* компактна кнопка справа, не на всю ширину */
    width: 140px;
  }
  /* «Дивитись інші пропозиції» (якщо є) — окремим рядком під price+buy */
  .product-tecdoc .product-hero__buy .product-hero__other {
    flex: 0 0 100%;
    margin-top: 16px;
  }

  /* (2) Таблиця «Всі ціни» #all_price — комірка «Ціна»: тримати «1164 грн» РАЗОМ.
     Donor td flex+space-between розривав ::before(лейбл) | <span>1164</span> | "грн"
     на три айтеми (дірка). Робимо: лейбл зліва (margin-right:auto), а
     <span> + текст-нод «грн» поруч справа з малим gap (як донор). */
  .product-tecdoc #all_price td[data-label="Ціна"],
  .product-tecdoc .prices__table td[data-label="Ціна"] {
    justify-content: flex-end;   /* значення вирівнюється вправо */
    gap: 4px;                    /* «1164» і «грн» поруч (не на краях) */
  }
  .product-tecdoc #all_price td[data-label="Ціна"]::before,
  .product-tecdoc .prices__table td[data-label="Ціна"]::before {
    margin-right: auto;          /* лейбл «Ціна» тримається зліва */
  }
  .product-tecdoc #all_price td[data-label="Ціна"] span,
  .product-tecdoc .prices__table td[data-label="Ціна"] span {
    font-weight: var(--fw-semibold);  /* «1164» жирне (донор), «грн» лишається regular */
  }

  /* (2b) Комірка «Купити» (.prices__action) — компактна кнопка ПО ЦЕНТРУ (донор),
     не full-width-флоат справа з порожнечею. */
  .product-tecdoc #all_price td.prices__action,
  .product-tecdoc .prices__table td.prices__action {
    justify-content: center;
  }
  .product-tecdoc #all_price td.prices__action::before,
  .product-tecdoc .prices__table td.prices__action::before {
    content: none;               /* у «Купити»-комірки немає data-label, але страхуємось */
  }
  .product-tecdoc #all_price td.prices__action .buy,
  .product-tecdoc .prices__table td.prices__action .buy {
    flex: 0 0 auto;
    display: inline-flex;        /* дарк-кнопка як донор (моб), не плоский текст */
    align-items: center;
    justify-content: center;
    width: 140px;                /* компактна кнопка, не на всю ширину рядка */
    height: 50px;
    background: var(--color-menu-bg);   /* #3c3c3c */
    border: 0;
    border-radius: var(--r-xl);  /* 16 */
    color: var(--color-text-inverse);
    font-size: var(--fs-base);   /* 16 */
    font-weight: var(--fw-semibold);  /* 600 */
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-base);
  }
  .product-tecdoc #all_price td.prices__action .buy:hover,
  .product-tecdoc .prices__table td.prices__action .buy:hover {
    background: var(--color-primary);
  }
}

/* ============================================================
   §7.9 CATALOGS (9/14) — /catalogs/<slug>/ (car_catalog.kiev)
   Натяжка handoff 09-catalogs-handoff. Scope-предок = .catalogs
   (wrapper-діви у car_catalog.kiev; body без класу). Reuse §7.8 картки
   (.cat-tecdoc__*) + §6.12 пейджер + глобал .help/.bread/.name_2.
   Нове: зелений рядок «В наявності», сітка марок .cat-brands (+toggle), SEO .cat-howto.
   ============================================================ */
.catalogs .page-title { margin-bottom: var(--sp-4); }
.catalogs .name_s { margin-bottom: 50px; }

.catalogs__brands { margin-top: 70px; }
.catalogs__howto  { margin-top: 70px; }
.catalogs__howto:last-of-type,
.catalogs__brands:last-of-type { margin-bottom: 80px; }
.catalogs__pager  { margin-top: 0; display: block; background: none; }   /* фікс: скид глобального темного nav-фону (#3c3c3c) під пейджером; ритм дає .pagination margin-top:50 (collapse) */

/* ── Зелений рядок «В наявності» у картці (Figma 51:3025) ── */
.catalogs .cat-tecdoc__info {
  grid-template-areas:
    "title title"
    "price buy"
    "stock stock"
    "term  term";
}
.cat-tecdoc__stock {
  grid-area: stock;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: 18px;
  color: var(--color-success);
}
.catalogs .cat-tecdoc__term { margin-top: var(--sp-1); }

/* силует-плейсхолдер у out-of-stock картці (Figma 51:3069) */
.cat-tecdoc__img--empty img { width: 60%; height: 60%; object-fit: contain; border-radius: 0; }

/* ── Сітка марок-моделей .cat-brands (НОВИЙ компонент) ── */
.cat-brands__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
  align-items: start;
}
.cat-brands__card {
  display: flex;
  flex-direction: column;
  padding: 23px;
  background: var(--color-bg);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  transition: box-shadow var(--dur-fast) var(--ease-base);
}
.cat-brands__card:hover { box-shadow: var(--shadow-card); }
.cat-brands__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.cat-brands__logo { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; display: block; }
.cat-brands__name {
  flex: 1;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 22px;
  color: var(--color-text);
}
.cat-brands__arrow {
  width: 16px; height: 16px; flex-shrink: 0;
  background: url(/img/icons/arrow-right.svg) no-repeat center / contain;
}
.cat-brands__models { display: flex; flex-direction: column; }
.cat-brands__model {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 30px;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease-base);
}
.cat-brands__model:hover { color: var(--color-primary); }
.cat-brands__card:not(.is-open) .cat-brands__model:nth-child(n+4) { display: none; }
.cat-brands__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  margin-top: 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 20px;
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-base);
}
.cat-brands__toggle:hover { color: var(--color-primary); }
.cat-brands__toggle-icon {
  width: 16px; height: 16px;
  background: url(/img/icons/chevron-down.svg) no-repeat center / contain;
  transition: transform var(--dur-fast) var(--ease-base);
}
.cat-brands__card.is-open .cat-brands__toggle-icon { transform: rotate(180deg); }

/* ── SEO-блок «Як правильно купити» (Strategy A — Figma 51:2936) ── */
.cat-howto__text { margin-bottom: var(--sp-10); }
.cat-howto__images { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
.cat-howto__img { width: 100%; aspect-ratio: 620 / 400; object-fit: cover; border-radius: var(--r-xl); }

/* ===== §7.9 АДАПТИВ ===== */
@media (max-width: 1280px) {
  /* page-scoped reset full-bleed .help (гориз. скрол PRE-EXISTING при vw<~1470) */
  .catalogs .help { margin-left: 0; margin-right: 0; }
}
@media (max-width: 1000px) {
  .cat-brands__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 761px) {
  .catalogs .name_2 { font-size: var(--fs-3xl); line-height: 1.2; }
  .cat-brands__grid { grid-template-columns: repeat(2, 1fr); }
  .catalogs__brands { margin-top: 50px; }
  .catalogs__howto  { margin-top: 50px; }
  .cat-howto__images { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 610px) {
  .catalogs .cat-tecdoc__info {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "price" "stock" "term" "buy";
    align-items: start;
  }
}
@media (max-width: 470px) {
  .cat-brands__grid { grid-template-columns: 1fr; }
}
/* ===== END §7.9 CATALOGS ===== */


/* ============================================================
   §7.8b MODIF (12/14) — engine page /m<N>/e<N>/ (car_tree.kiev)
   scope .content.modif. Додано integrator r12 (2026-06-01).
   Глобальні .garage_* (§above) застосовуються; тут лише modif-overrides.
   ============================================================ */

/* h1 → гараж/ТТХ; гараж → ТТХ */
.modif .page-title { margin-bottom: var(--sp-10); }       /* 40 */
.modif .garage_my,
.car-category .garage_my { margin: 0 0 var(--sp-10); }          /* garage → ТТХ = 40 */

/* ── ТТХ ДВИГУНА (донор .model_info) — плитки 620×60, лейбл + значення (Figma 51:4151).
   block→grid 4-кол (Л V | Л V), N пар ЗМІННЕ. ── */
.modif-specs { margin: 0 0 70px; }                        /* ТТХ → акордеон = 70 */
.modif-specs .model_info {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
}
.modif-specs .model_info > div {
  padding: 18px 0;
  min-height: 60px;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: var(--fs-base);
  line-height: 24px;
}
.modif-specs .model_info > div:nth-child(odd) {
  padding-left: 19px;
  padding-right: 16px;
  color: var(--color-text-muted);
}
.modif-specs .model_info > div:nth-child(even) {
  padding-right: 19px;
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
.modif-specs .model_info > div:nth-child(4n+3) { margin-left: 40px; }
.modif-specs .model_info > div span { color: inherit; }

/* ── АКОРДЕОН КАТЕГОРІЙ (.modif-cats на донор .catalogs) ── */
.modif-cats__section { border-top: 1px solid var(--color-border-soft); }
.modif-cats__section:last-child { border-bottom: 1px solid var(--color-border-soft); }
.modif-cats__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 30px 0;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: var(--color-text);
  cursor: pointer;
}
.modif-cats__head .name_4 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: 30px;
  color: inherit;
}
.modif-cats__head:hover .name_4 { color: var(--color-primary); }
.modif-cats__arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url('/img/icons/chevron-down.svg') no-repeat center / contain;
  transition: transform var(--dur-fast) var(--ease-base);
}
.modif-cats__section.is-open .modif-cats__arrow { transform: rotate(90deg); }
.modif-cats__section:not(.is-open) .modif-cats__body { display: none; }
.modif-cats__body { padding: 0 0 var(--sp-8); }
.modif-cats__group {
  display: block;
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 20px;
  color: var(--color-text-muted);
}
.modif-cats__group:first-child { margin-top: 0; }
/* [Р6] старі текст-список правила .modif-cats .pop_cats(+a) ВИДАЛЕНО — дерево=картки, governs §7.7 .pop_cats.car-cats__grid (5-кол) */

/* ── §9 MEDIA — адаптив modif (desktop-first) ── */
@media (max-width: 1280px) {
  .modif .help { margin-left: 0; margin-right: 0; }
}
@media (max-width: 1000px) {
  .modif-cats .pop_cats { grid-template-columns: repeat(3, 1fr); }   /* Р6: картки як §7.7 car-cats__grid  */
}
@media only screen and (max-width: 761px) {
  .modif-specs .model_info { grid-template-columns: auto minmax(0,1fr); }
  .modif-specs .model_info > div:nth-child(4n+3) { margin-left: 0; }
  .modif-cats .pop_cats { grid-template-columns: repeat(2, 1fr); }   /* Р6: 2-кол  (вкл ), перебиває §7.7  1fr */
  .modif-cats__head { padding: 20px 0; }
  .modif .garage_my { flex-direction: column; height: auto; gap: 8px; }
  .modif .garage_my_name { flex: 0 0 auto; width: 100%; height: 50px; border-radius: var(--r-xl); }
  .modif .garage_my .garage_car { width: 100%; margin: 0; border-radius: var(--r-xl); padding: 10px 51px 10px 16px; }
  .modif .garage_my .garage_new { flex: 0 0 auto; width: 100%; height: 50px; }
}
@media only screen and (max-width: 470px) {
  .modif-specs .model_info { grid-template-columns: 1fr; }
  .modif-specs .model_info > div { min-height: 0; padding: 0; border-bottom: 0; }
  .modif-specs .model_info > div:nth-child(odd) { padding: 12px 19px 0; }
  .modif-specs .model_info > div:nth-child(even) {
    padding: 2px 19px 12px;
    border-bottom: 1px solid var(--color-border-soft);
  }
}
/* ===== END §7.8b MODIF ===== */


/* ── §7.8b MODIF — РОЗКРИТИЙ гараж (#garage_cars AJAX, garage_ajax.kiev) — integrator r12d (2026-06-01) ──
   Розмітка рушія: .garage_boxs > .garage_box(.garage_next[картка] + .garage_del[✕ видалити, onClick garage_del]).
   Хрестик РУШІЙ ВІДДАЄ (DOM є). Глобал rembaza (style.css:1910 .garage_boxs,.page_rows{display:block})
   перебивав донорський .garage_boxs{grid} → рядок full-width 1280px, ✕ далеко справа + opacity:0.2 = невидимий.
   Scoped .modif (0,2,0 > глобал 0,1,0): відновити донор-компакт-grid + RemBaza-пілюлі + видимий круглий ✕. */
.modif .garage_boxs,
.car-category .garage_boxs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* донор: компактні картки, НЕ full-width */
  gap: 10px;
  margin-top: 10px;
  border-top: 0;
}
.modif .garage_boxs .garage_box,
.car-category .garage_boxs .garage_box {
  background: var(--color-surface);         /* RemBaza grey пілюля (як бар) */
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
}
.modif .garage_boxs .garage_del,
.car-category .garage_boxs .garage_del {
  flex: 0 0 48px;
  background-color: transparent;            /* прибрати донорський білий фон — лишити svg-✕ на пілюлі */
  opacity: .5;                              /* видніше за донор 0.2 */
}
.modif .garage_boxs .garage_del:hover,
.car-category .garage_boxs .garage_del:hover { opacity: 1; }
.modif .garage_boxs .garage_next:hover,
.car-category .garage_boxs .garage_next:hover,
.modif .garage_boxs .garage_next:hover *,
.car-category .garage_boxs .garage_next:hover * {
  background: transparent;                  /* прибрати донорський navy #081A2F hover */
  color: var(--color-text);
}
@media (max-width: 761px) {
  .modif .garage_boxs { grid-template-columns: 1fr; }   /* моб 1-кол */
}
/* ===== END §7.8b MODIF garage-expanded (r12d) ===== */
/* ════════════════════════════════════════════════════════════════════
   §7.13 SEARCH — РЕАЛЬНА натяжка (cms-integrator, 2026-06-01)
   Додано у /var/www/rembaza.allzap.pro/img/style.css.

   ⚠ РІШЕННЯ vda 2026-06-01: «натягнути на реальність (1 таблиця)».
   Рушій shop_search.kiev (/search-<art>/, mode1 «вибір бренда») віддає НЕ
   3-блочний дизайн хендофа, а ОДНУ таблицю <table class="table t_find">
   усередині <div class="content_small">. Картки категорій (.search-cats) та
   картки товарів (.cat-tecdoc__*) рушій НЕ емітить — тож НЕ застосовані.
   Лінки рушія ведуть на /search-<art>/<BRAND>/ (вибір бренда), кнопка «Поиск»/
   «открыть» (НЕ /part-<id>/ «Показати»). Дизайн-вид .search-arts (Figma 51:522)
   перенесено на реальні класи .t_find / .a_find (scope унікальний, body без класу).
   Mode2 (/search-<art>/<brand>/) = окремий .prod_* список, цією натяжкою НЕ чіпається.
   ════════════════════════════════════════════════════════════════════ */

/* таблиця на всю ширину, відступи H1→таблиця / таблиця→help */
.content .t_find {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0 80px;
}

/* темний хедер (Figma 51:821): #3c3c3c, 14/600 white, висота 60 */
.t_find th {
  height: 60px;
  padding: 0 18px;
  background: var(--color-menu-bg);          /* #3c3c3c */
  color: var(--color-text-inverse);          /* #ffffff */
  font-size: var(--fs-sm);                   /* 14 */
  font-weight: var(--fw-semibold);           /* 600 */
  line-height: 21px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

/* рядок даних: 16/400, роздільник #e0e0e0, висота ~60 */
.t_find td {
  padding: 18px;
  border-bottom: 1px solid var(--color-border-soft);   /* #e0e0e0 */
  font-size: var(--fs-base);                 /* 16 */
  line-height: 24px;
  vertical-align: middle;
}

/* колонкові ширини: Бренд / Артикул / Назва(auto) / дія(справа) */
.t_find td:nth-child(1) { width: 208px; }
.t_find td:nth-child(2) { width: 225px; }
.t_find td:nth-child(3) { width: auto; }
.t_find td:nth-child(4) { width: 160px; text-align: right; }

/* hover/zebra (vda Q2): сірий фон рядка + підкреслення лінків */
.t_find tr:hover td { background: var(--color-surface); }   /* #f0f0f0 */

/* Бренд/Артикул/Назва — лінки на товар: темні, підкреслення на hover */
.t_find td a {
  color: var(--color-text);                  /* #1e1e1e */
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-base);
}
.t_find tr:hover td a { text-decoration: underline; }

/* «Поиск»/«открыть» — помаранчевий текст-лінк (vda Q3, --color-primary), не плашка */
.t_find a.a_find {
  color: var(--color-primary);               /* #f95203 */
  font-weight: var(--fw-medium);             /* 500 */
  white-space: nowrap;
  text-decoration: none;
}
.t_find tr:hover a.a_find,
.t_find a.a_find:hover { color: var(--color-primary-hover); text-decoration: underline; }

/* ── Мобілка @≤761 → СТЕК-КАРТКИ (vda рішення A, БЕЗ гориз-скролу) ── */
@media (max-width: 761px) {
  .content .t_find { margin: 24px 0 50px; }
  .t_find, .t_find tbody, .t_find tr, .t_find td { display: block; }
  .t_find tr:first-child { display: none; }            /* хедер ховаємо */
  .t_find td {
    padding: 0;
    border: 0;
    width: auto !important;
    text-align: left !important;
  }
  .t_find tr {
    padding: 16px;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--r-lg);              /* 12 */
    margin-bottom: 12px;
  }
  .t_find tr:hover td { background: transparent; }      /* на стеку zebra не треба */
  /* [Бренд + Артикул] — один рядок зверху */
  .t_find td:nth-child(1), .t_find td:nth-child(2) { display: inline-block; }
  .t_find td:nth-child(1) a { font-weight: var(--fw-semibold); }   /* бренд = заголовок */
  .t_find td:nth-child(2) { margin-left: var(--sp-2); }
  .t_find td:nth-child(2) a { color: var(--color-text-muted); }
  /* [Назва] окремий рядок (опціональна — порожня ховається) */
  .t_find td:nth-child(3) { margin-top: var(--sp-1); }
  .t_find td:nth-child(3):empty { display: none; }
  /* [Поиск] окремий рядок знизу */
  .t_find td:nth-child(4) { margin-top: 12px; }
  /* на стеку лінки завжди читабельні (без hover-underline) */
  .t_find tr:hover td a { text-decoration: none; }
}

/* ── NO-RESULTS — engine-fallback, читабельний (cms-integrator 13/14, 2026-06-01) ──
   Рушій віддає <div class="name_3">«…ничего не нашлось»</div> усередині #content,
   але глобальний .name_3 = білий (footer-клас) → невидиме. Scope main#content
   (.name_3 лише тут + у футері поза main → 0 регресій). НЕ вигадуємо екран (vda). */
main#content .name_3 {
  color: var(--color-text);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 26px;
  margin: 6px 0 60px;
}
/* ════════════════════════════════════════════════════════════════════
   §7.13b SEARCH mode2 — список товарів /search-<art>/<BRAND>/ (cms-integrator 2026-06-01)
   Додано у /var/www/rembaza.allzap.pro/img/style.css (після §7.13 mode1).

   STRATEGY A: дизайну Figma НЕМА → еталон = ДОНОР parts.allzap.pro/search-<art>/<BRAND>/
   (table-вид .prod_tr, рушій shop_search_table.kiev). Береться донорський CSS .prod_*
   і перефарбовується в RemBaza-токени (як mode1 .t_find). Рішення vda (C).

   ⚠ Grid-вид (prod()/.pro) у пошуку РЕНДЕРИТЬ ПОРОЖНЬО (зламана echo-гілка
   shop_search.kiev) → backend-хвіст virtus1k, НЕ чіпаємо.

   SCOPE: усе під .prod_tr (mode2-унікальний; product page 8/14 юзає .prices__table/
   .product-tecdoc, catalogs — .cat-tecdoc — тож .tah0/.buy ТАМ не зачеплені).
   .kiev НЕ чіпано (рушій вже віддає .prod_tr). 0 хардкод-hex, усе var(--token).

   LAYOUT: донор юзає inline-block 728+546=1274px, АЛЕ rembaza .content inner =
   1280-2*16 = 1248px < 1274 → фікс-колонки переносились би. Тому FLEX (info flex:1,
   prices 546 fixed) — заповнює 1248, візуал ідентичний донору.
   ════════════════════════════════════════════════════════════════════ */

/* рядок = горизонтальна біла картка з рамкою (донор) */
.prod_tr {
  display: flex;
  flex-wrap: wrap;
  background: var(--color-bg);                  /* #fff */
  border: 1px solid var(--color-border-soft);   /* #e0e0e0 */
  margin: 0 0 var(--sp-5);                       /* 20 */
}

/* ЛІВО: фото + назва + спеки */
.prod_tr .prod_info {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  gap: 15px;
  padding: 20px 20px 10px;
}
.prod_tr .prod_img { flex: 0 0 180px; text-align: center; }
.prod_tr .prod_img img { max-width: 100%; max-height: 180px; }
.prod_tr .prod_img i {                          /* placeholder без фото (25/78) */
  display: block;
  width: 100%;
  height: 180px;
  background: url(/img/logo-rembaza.svg) no-repeat 50% / contain;
  filter: grayscale(100%);
  opacity: .4;
}
.prod_tr .prod_txt { flex: 1 1 auto; min-width: 0; color: var(--color-text-muted); }  /* спеки сірі */
.prod_tr .prod_txt a,
.prod_tr .prod_txt strong {                     /* назва — жирна */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);                    /* 16 */
  color: var(--color-text);                     /* #1e1e1e */
  line-height: 24px;
}
.prod_tr .prod_txt a { text-decoration: underline; }              /* донор: назва-лінк підкреслена */
.prod_tr .prod_txt a:hover { color: var(--color-primary); }
.prod_tr .prod_har {                            /* TecDoc-специфікації */
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);                      /* 14 */
  font-weight: var(--fw-regular);
  line-height: 21px;
}

/* ПРАВО: цінова таблиця АБО «Уточнить наличие» */
.prod_tr .prod_prices { flex: 0 0 546px; max-width: 100%; box-sizing: border-box; }

/* цінова таблиця .tah0 — RemBaza-хедер #3c3c3c (як mode1 th) */
.prod_tr .tah0 {
  width: 100%;
  border-collapse: collapse;
  border-left: 1px solid var(--color-border-soft);
}
.prod_tr .tah0 th {
  background: var(--color-menu-bg);             /* #3c3c3c (донор #1E1E1E) */
  color: var(--color-text-inverse);            /* #fff */
  text-align: left;
  padding: 14px 5px 10px 10px;
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);                      /* 14 */
}
.prod_tr .tah0 td {
  padding: 6px 5px 5px 10px;
  border-bottom: 1px solid var(--color-border-soft);
  background: var(--color-bg);
  font-size: var(--fs-base);                    /* 16 */
  line-height: 22px;
}
.prod_tr .tah0 td span { font-weight: var(--fw-semibold); }       /* ціна */
.prod_tr .tah1 tr:nth-child(n+4) { display: none; }               /* видно лише 2 пропозиції */
.prod_tr .tah0 td:last-child { text-align: right; padding-right: 6px; }

/* малий «Купить» з cart-іконкою (scoped .prod_tr — глобальний .buy НЕ зачеплено) */
.prod_tr .tah0 .buy {
  background: var(--color-bg) url(/img/face/cart.svg) no-repeat 5px 50% / 22px;
  border: 0;
  border-radius: var(--r-sm);                   /* 6 (донор 4) */
  cursor: pointer;
  padding: 8px 8px 8px 35px;
  color: var(--color-text);
  font-size: var(--fs-base);
  transition: background-color var(--dur-fast) var(--ease-base);
}
.prod_tr .tah0 .buy:hover { background-color: var(--color-surface); }   /* #f0f0f0 */

/* «Показать все N цен» — помаранчевий пунктир (донор синій → primary) */
.prod_tr .prod_prices_all { text-align: center; padding: 20px 0; line-height: 18px; }
.prod_tr .prod_prices_all span {
  color: var(--color-primary);                  /* #f95203 */
  border-bottom: 1px dashed;
  cursor: pointer;
}

/* «Уточнить наличие» (73/78 — ОСНОВНИЙ вид) — помаранчева КОНТУРНА кнопка (донор синій → primary) */
.prod_tr .no_price { text-align: center; }
.prod_tr .no_price button {
  padding: 16px 30px;
  color: var(--color-primary);                  /* #f95203 */
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--r-lg);                   /* 12 (донор 10) */
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  cursor: pointer;
  margin: 40px auto;
  transition: background-color var(--dur-fast) var(--ease-base), color var(--dur-fast) var(--ease-base);
}
.prod_tr .no_price button:hover { background: var(--color-primary); color: var(--color-text-inverse); }

/* ── МОБІЛКА (донор @1000 стек / @470 картки-рядки) ── */
@media (max-width: 1000px) {
  .prod_tr .prod_info,
  .prod_tr .prod_prices { flex: 1 1 100%; }     /* стек: інфо зверху, ціни знизу */
}
@media (max-width: 470px) {
  .prod_tr .prod_info { display: block; text-align: center; padding: 12px; }
  .prod_tr .prod_img { width: 100%; }
  .prod_tr .prod_txt { width: 100%; text-align: left; padding: 8px 0 0; }
  /* .tah0 → картки-рядки з data-label лейблами (донор) */
  .prod_tr .tah0 { border-left: 0; }
  .prod_tr .tah0 tr:first-child { display: none; }      /* хедер ховаємо */
  .prod_tr .tah0 tr {
    display: block;
    margin: 0 0 10px;
    border: 1px solid var(--color-border-soft);
    border-bottom: 0;
  }
  .prod_tr .tah0 td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px;
    text-align: right;
    border-bottom: 1px solid var(--color-border-soft);
  }
  .prod_tr .tah0 td:before { content: attr(data-label); color: var(--color-text-muted); text-align: left; }
  .prod_tr .tah0 td:nth-child(3),
  .prod_tr .tah0 td:nth-child(4) { display: block; text-align: center; }
  .prod_tr .tah0 .buy { display: inline-block; }
  .prod_tr .no_price button { margin: 16px auto; }
}

/* ════════════════════════════════════════════════════════════
   §7.11 SHOP-CATEGORY (/shop/<slug>/ — catalog_list.kiev) — натяжка
   Сайдбар фасетних фільтрів (donor .filters/.filter_n/.filter_b/.filter_s)
   + сітка товарів = §7.8 .cat-tecdoc REUSE (3-кол). Адаптовано під flat
   donor-DOM: BEM-хуки __text/__icon/__price-inp/.is-open відсутні у рушії →
   замінено на ::after-чеврон / донор-класи / .shop_mobile2 (donor JS).
   ════════════════════════════════════════════════════════════ */

/* ── Layout: float-колонки (donor DOM) ── */
.shop-category .shop_left { float: left; width: 300px; margin-right: 27px; }
.shop-category .shop_right { overflow: hidden; }
.shop-category .cb { clear: both; }

/* ── Заголовок сайдбара (donor .name_4) ── */
.shop-category .shop_left .name_4 {
  margin: 0 0 24px; padding: 0;
  font-size: 28px; font-weight: var(--fw-semibold); line-height: 36px;
  color: var(--color-text); text-align: left;
}

/* ── Група фільтра: заголовок-аккордеон (donor .filter_n, plain text) ── */
.shop-category .filter_n {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 18px 0; cursor: pointer;
  border-top: 1px solid var(--color-border-soft); user-select: none;
  font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 24px;
  color: var(--color-text);
}
.shop-category .filters > .filter_n:first-of-type { border-top: 0; }
.shop-category .filter_n::after {
  content: ""; flex: none; width: 16px; height: 16px;
  background: url(/img/icons/arrow-right.svg) no-repeat center / 12px;
  transform: rotate(90deg); transition: transform var(--dur-fast) var(--ease-base);
}
.shop-category .filter_n.is-collapsed::after { transform: rotate(0deg); }

/* ── Тіло групи (.filter_b) ── */
.shop-category .filter_b { padding: 0 0 18px; }
.shop-category .filter_n.is-collapsed + .filter_b { display: none; }

/* чекбокс-фасет (donor span[data-filter], механізм НЕ чіпаємо — лише вид) */
.shop-category .filter_b span[data-filter] {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 6px 0; font-size: var(--fs-base); line-height: 20px;
  color: var(--color-text); cursor: pointer;
}
.shop-category .filter_b span[data-filter]::before {
  content: ""; flex: none; width: 24px; height: 24px;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-md);
  background: var(--color-bg);
  transition: border-color var(--dur-fast) var(--ease-base), background var(--dur-fast) var(--ease-base);
}
.shop-category .filter_b span[data-filter]:hover::before { border-color: var(--color-primary); }
.shop-category .filter_b span[data-filter].active::before { border-color: var(--color-primary); background: var(--color-primary); }
.shop-category .filter_b span[data-filter].active::after {
  content: ""; position: absolute; left: 9px; top: 50%;
  width: 5px; height: 10px; border: solid var(--color-text-inverse);
  border-width: 0 2px 2px 0; transform: translateY(-65%) rotate(45deg);
}

/* ── Ціна (donor <form> + price_min/price_max + .filter_s) — input без класу ── */
.shop-category .filter_b form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.shop-category .filter_b input[type="text"] {
  flex: none; width: 100px; height: 50px; padding: 0 14px;
  font-size: var(--fs-base); color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
}
.shop-category .filter_b input[type="text"]:focus { border-color: var(--color-primary); outline: none; }
.shop-category .filter_s {
  flex: none; width: 50px; height: 50px; background: var(--color-primary);
  color: var(--color-text-inverse); border: 0; border-radius: var(--r-lg);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-base);
}
.shop-category .filter_s:hover { background: var(--color-primary-hover); }

/* ── Сітка товарів = REUSE §7.8 .cat-tecdoc, 3-кол ── */
.shop-category .shop_right .prods.cat-tecdoc__grid { grid-template-columns: repeat(3, 1fr); }
.shop-category .shop_right .pagination { margin-top: 40px; }

/* buy-обгортка donor .price → грид-діти через contents; .buy = .cat-tecdoc__buy (grid-area buy) */
.shop-category .cat-tecdoc__info > .price { display: contents; }
/* out-of-stock (.no_price «Уточнити наявність») — ghost-кнопка у грид-area buy */
.shop-category .cat-tecdoc__info > .no_price { grid-area: buy; align-self: center; margin-top: var(--sp-5); }
.shop-category .cat-tecdoc__info > .no_price button {
  width: 100%; min-height: 50px; padding: 0 12px;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-xl);
  background: var(--color-bg); color: var(--color-text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}
.shop-category .cat-tecdoc__info > .no_price button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── .shop_mobile тоггл — лише мобілка ── */
.shop-category .shop_mobile { display: none; }

/* ── §9 адаптив SHOP-CATEGORY ── */
@media (max-width: 1000px) {
  .shop-category .shop_right .prods.cat-tecdoc__grid { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 1000px) {
  .shop-category .shop_left { float: none; width: auto; margin: 0 0 var(--sp-5); display: none; }
  .shop-category #shop_left.shop_mobile2 { display: block; }     /* donor shop_mobile() → .shop_mobile2 */
  .shop-category .shop_right { overflow: visible; }
  .shop-category .shop_mobile {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; margin-bottom: var(--sp-5); padding: 14px var(--sp-5);
    background: var(--color-bg); border: 1px solid var(--color-border-soft);
    border-radius: var(--r-xl); font-size: var(--fs-base);
    font-weight: var(--fw-semibold); color: var(--color-text); cursor: pointer;
  }
  .shop-category .shop_mobile::after {
    content: ""; flex: none; width: 16px; height: 16px;
    background: url(/img/icons/arrow-right.svg) no-repeat center / 12px;
    transform: rotate(90deg);
  }
}

/* §7.9 stock-grid: .shop-category → грид-area з рядком stock (override base .cat-tecdoc__info) */
.shop-category .cat-tecdoc__info {
  grid-template-areas: "title title" "price buy" "stock stock" "term term";
}

/* ════════════════════════════════════════════════════════════
   §7.12 PRODUCT-SHOP (/shop/<cat>/<slug>-<id>.html — catalog_prod.kiev) — натяжка
   Блок товара (фото|спеки|Доставка|Оплата) + характеристики/опис (2-кол) +
   «Схожі» (§7.8 reuse). Іконки = donor .ico_* через background-image (РЕАЛЬНІ
   /img/icons/, вже на сервері). Адаптовано під live: .tovar_buy→donor .buy.c_add,
   .ico_on (live) додано, similar-wrapper → .shop-part scope. Палітра — токени.
   ════════════════════════════════════════════════════════════ */

/* ── Блок товара: фото float + .tovar_info BFC ── */
.shop-part .tovar_img {
  float: left; width: 300px; height: 300px; margin: 0 30px 0 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-card-soft); border-radius: var(--r-xl); overflow: hidden;
}
.shop-part .tovar_img img { width: 236px; height: 236px; object-fit: contain; }
.shop-part .tovar_info { overflow: hidden; }

/* .tovar_rows — 3 кол: спеки | Доставка | Оплата */
.shop-part .tovar_rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }

/* Колонка спеків (.tovar_svs = label-span : value-span) */
.shop-part .tovar_svs { display: flex; gap: 6px; margin-bottom: var(--sp-2); font-size: var(--fs-base); line-height: 20px; }
.shop-part .tovar_svs span:first-child { color: var(--color-text-muted); }
.shop-part .tovar_svs span:last-child  { color: var(--color-text); }

.shop-part .tovar_price { margin: 26px 0 20px; font-size: 40px; font-weight: var(--fw-semibold); line-height: 54px; color: var(--color-text); }

/* Кнопка «Купити» (donor .buy.c_add у .tovar_row — НЕ similar) — 140×60, темна, hover помаранчева */
.shop-part .tovar_row > .buy.c_add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 140px; height: 60px; border: 0; border-radius: var(--r-xl);
  background: var(--color-menu-bg); color: var(--color-text-inverse);
  font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-base);
}
.shop-part .tovar_row > .buy.c_add:hover { background: var(--color-primary); }
/* out-of-stock (.no_price «Уточнити наявність») у блоці товара */
.shop-part .tovar_row > .no_price button {
  min-height: 60px; padding: 0 20px; border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl); background: var(--color-bg); color: var(--color-text);
  font-size: var(--fs-base); font-weight: var(--fw-semibold); cursor: pointer;
}
.shop-part .tovar_row > .no_price button:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── Картки Доставка / Оплата (donor .tovar_row.tovar_p) ── */
.shop-part .tovar_p { padding: 30px; background: var(--color-bg); border: 1px solid var(--color-border-soft); border-radius: var(--r-xl); }
.shop-part .tovar_p .name_4 { margin: 0 0 30px; padding: 0; font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: 36px; text-align: left; }
.shop-part .tovar_p span {
  display: block; min-height: 20px; margin-bottom: 16px; padding-left: 32px;
  font-size: var(--fs-base); line-height: 20px; color: var(--color-text);
  background-repeat: no-repeat; background-position: left center; background-size: 20px 20px;
}
.shop-part .tovar_p span:last-child { margin-bottom: 0; }

/* іконки = РЕАЛЬНІ донор-асети /img/icons/ (родина .ico_*, ЖИВІ класи рушія) */
.shop-part .ico_np     { background-image: url(/img/icons/logo-novaposhta.svg); }
.shop-part .ico_up     { background-image: url(/img/icons/logo-ukrposhta.svg); }
.shop-part .ico_meest  { background-image: url(/img/icons/logo-meestposhta.png); }
.shop-part .ico_me     { background-image: url(/img/icons/icon-office.svg); }
.shop-part .ico_curier { background-image: url(/img/icons/icon-curier.svg); }
.shop-part .ico_cash   { background-image: url(/img/icons/icon-money.svg); }
.shop-part .ico_bank   { background-image: url(/img/icons/icon-bank.svg); }
.shop-part .ico_apay   { background-image: url(/img/icons/apay.svg); }
.shop-part .ico_gpay   { background-image: url(/img/icons/gpay.svg); }
.shop-part .ico_card   { background-image: url(/img/icons/mastercard.svg); }
.shop-part .ico_on     { background-image: url(/img/icons/gpay.svg); }   /* live: GPay/ApplePay/LiqPay одним спаном */

/* ── Характеристики + Опис: 2-кол grid (DOM-порядок донора цілий) ── */
.shop-part .tovar_50 { clear: both; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-top: 70px; }
.shop-part .tovar_hars .name_4, .shop-part .tovar_brand .name_4 { margin: 0 0 var(--sp-3); padding: 0; font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: 36px; text-align: left; }
.shop-part .tovar_har { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px 16px; border-bottom: 1px solid var(--color-border-soft); font-size: var(--fs-base); line-height: 24px; }
.shop-part .tovar_hars > .tovar_har:first-of-type { border-top: 1px solid var(--color-border-soft); }
.shop-part .tovar_har span:first-child { color: var(--color-text-muted); }
.shop-part .tovar_har span:last-child  { color: var(--color-text); }
.shop-part .tovar_brand p { margin: 0 0 16px; font-size: var(--fs-base); line-height: 24px; color: var(--color-text); }
.shop-part .tovar_brand p:last-child { margin-bottom: 0; }

/* ── «Схожі товари» = §7.8 reuse (donor .name_2 + .prods.cat-tecdoc__grid, scope .shop-part) ── */
.shop-part .name_2 { margin: 70px 0 40px; }
/* similar buy-обгортка donor .price → грид-діти; .no_price ghost (як §7.11) */
.shop-part .cat-tecdoc__info > .price { display: contents; }
.shop-part .cat-tecdoc__info > .no_price { grid-area: buy; align-self: center; margin-top: var(--sp-5); }
.shop-part .cat-tecdoc__info > .no_price button {
  width: 100%; min-height: 50px; padding: 0 12px; border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl); background: var(--color-bg); color: var(--color-text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}

/* ── §9 адаптив PRODUCT-SHOP ── */
@media (max-width: 1000px) {
  .shop-part .tovar_img { float: none; margin: 0 0 30px; }
  .shop-part .tovar_rows { grid-template-columns: 1fr; gap: 30px; }
  .shop-part .tovar_50 { grid-template-columns: 1fr; gap: 40px; margin-top: 50px; }
}
@media only screen and (max-width: 470px) {
  .shop-part .tovar_img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .shop-part .tovar_img img { width: 80%; height: 80%; }
  .shop-part .tovar_har { grid-template-columns: 1fr; gap: 4px; }
}

/* §7.9 stock-grid: .shop-part → грид-area з рядком stock (для «Схожі») */
.shop-part .cat-tecdoc__info { grid-template-areas: "title title" "price buy" "stock stock" "term term"; }

/* ── FIX мобілка SHOP-картка @≤610 (vda iPhone): дзеркало .catalogs стек-розкладки.
   Баг: scoped .shop-category/.shop-part .cat-tecdoc__info (desktop, без media) перебивав
   глобальний мобільний стек → ціна/кнопка лишались side-by-side на 390 → наїзд+обрізка.
   Фікс: стек "title/price/stock/buy" 1-кол (як .catalogs L5263), buy width:100% (глобал ≤610). */
@media (max-width: 610px) {
  .shop-category .cat-tecdoc__info,
  .shop-part .cat-tecdoc__info {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "price" "stock" "term" "buy";
    align-items: start;
  }
}

/* ── FIX-2 (vda QA): «Купити» картки = ПОМАРАНЧЕВА (Figma 51:4893), не сіра #3c3c3c.
   Глобал .cat-tecdoc__buy → 10b + 11-similar + catalogs 9/14 + search. Гараж .garage_new
   (var--color-menu-bg) НЕ зачеплено (інший клас). out-of-stock .no_price НЕ має .cat-tecdoc__buy. */
.cat-tecdoc__buy { background: var(--color-menu-bg); }
.cat-tecdoc__buy:hover { background: var(--color-primary); }

/* ── FIX-1 (vda QA): overflow картки 768/1280 — сайдбар звужує картку, ряд ціна+кнопка
   не влазить. Container query: стек коли САМА КАРТКА <240px (ширина не монотонна з viewport
   через repeat2→3 на 1000). Авто-scope: лише shop-картки = container. ≤610-стек лишається fallback.
   ⚠ @container НЕ додає специфічності → селектор мусить мати .shop-category/.shop-part
   (0,2,0) щоб перебити §7.9 stock-grid (0,2,0) — інакше base 0,1,0 програє (та сама
   причина що ОРИГІНАЛЬНИЙ баг side-by-side). */
.shop-category .shop_right .cat-tecdoc__card,
.shop-part .cat-tecdoc__card { container-type: inline-size; }
@container (max-width: 240px) {
  .shop-category .cat-tecdoc__info,
  .shop-part .cat-tecdoc__info {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "price" "stock" "term" "buy";
    align-items: start;
  }
  .shop-category .cat-tecdoc__buy,
  .shop-part .cat-tecdoc__buy { width: 100%; }
}

/* ── FIX-3 (vda): головна кнопка товара 11 «Купити» (140×60) сіра→ПОМАРАНЧЕВА (Figma 51:5206),
   консистентно з grid-картками. Scope .shop-part .tovar_row (НЕ зачіпає 8/14 car_prod — інший
   scope; кошик-логіка .buy.c_add data-id не змінюється — лише колір). ── */
.shop-part .tovar_row > .buy.c_add { background: var(--color-primary); }
.shop-part .tovar_row > .buy.c_add:hover { background: var(--color-primary-hover); }

/* ════════════ ПАКЕТ ФІКСІВ QA (vda, повний прохід 13 стор × 4 vp, 2026-06-02) ════════════ */

/* ── FIX-1a: «Купити» аналогів product-tecdoc (.analogues__grid .pro .buy) сіра→ПОМАРАНЧЕВА (Figma 51:5315) ── */
.analogues__grid .pro .buy { background: var(--color-menu-bg); }
.analogues__grid .pro .buy:hover { background: var(--color-primary); }


/* ── FIX-1b: «Купити» car-category (голий button.buy у raw .pro, scope=bare .prods, НЕ analogues/cat-tecdoc) →
   ПОВНОЦІННА помаранчева кнопка tap≥44 (Figma 51:4292). Виключає shop/catalogs (.cat-tecdoc__grid) + аналоги. ── */
.prods:not(.analogues__grid):not(.cat-tecdoc__grid) .pro button.buy {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 24px; margin-top: var(--sp-3);
  background: var(--color-menu-bg); color: var(--color-text-inverse);
  border: 0; border-radius: var(--r-xl);
  font-size: var(--fs-base); font-weight: var(--fw-semibold);
  cursor: pointer; transition: background var(--dur-fast) var(--ease-base);
}
.prods:not(.analogues__grid):not(.cat-tecdoc__grid) .pro button.buy:hover { background: var(--color-primary); }

/* ── FIX-2a: index @390 h-scroll +75px — .brands-grid repeat(2) (@≤761, L3648) перебивав @≤470 1fr
   (source-order, обидва матчать 390). Відновлюємо 1-кол на ≤470 (дописано пізніше → виграє). ── */
@media (max-width: 470px) { .brands-grid { grid-template-columns: 1fr; } }

/* ── FIX-2b: .help h-scroll мобільний (modif/car504 @390 +16 / @768 +35). Корінь: .help parent
   має padding (16@390/35@768), а full-bleed margin:calc(50%-50vw)=0 (parent=viewport-ширина) →
   .help стартує з content-left=padding → виходить за край на padding. Компенсуємо зсувом вліво
   на половину різниці (content-width 100% vs viewport 100vw). Scoped @≤768. ── */
@media (max-width: 768px) {
  .help {
    margin-left: 0;
    margin-right: 0;
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: calc((100% - 100vw) / 2);
  }
}

/* ════════════════════════════════════════════════════════════
   §7.14 CAR-CATEGORY (/car<>/m<>/e<>/t<>/ — car_list.kiev, spisok_zap) — натяжка
   Список товарів категорії для авто+двигуна. REUSE: гараж wizard (§7.5 глобал),
   картки .cat-tecdoc (§7.8/7.9), пейджер. НОВЕ: сорт-лінки .car-sort (Figma 51:4448).
   Append-only — scoped .car-category, 0 правок існуючих.
   ════════════════════════════════════════════════════════════ */
.car-category .page-title { margin-bottom: 60px; }

/* ── СОРТУВАННЯ .car-sort (текст-лінки, Figma 51:4448-4450) ── */
.car-sort {
  display: flex; align-items: baseline; gap: var(--sp-4);
  margin: 0 0 var(--sp-10); font-size: var(--fs-sm); line-height: 20px;
}
.car-sort__label { color: var(--color-text); }
.car-sort__link { color: var(--color-text-muted); cursor: pointer; transition: color var(--dur-fast) var(--ease-base); }
.car-sort__link:hover { color: var(--color-text); }
.car-sort__link.is-active { color: var(--color-text); text-decoration: underline; }
.car-category__pager { margin-top: 50px; }

/* ── §7.9 stock-grid + term — .car-category (reuse, той самий grid що catalogs) ── */
.car-category .cat-tecdoc__info {
  grid-template-areas: "title title" "price buy" "stock stock" "term term";
}
.car-category .cat-tecdoc__term { margin-top: var(--sp-1); }
/* buy-обгортка donor (.no_price ghost out-of-stock) — як catalogs */
.car-category .cat-tecdoc__info > .no_price { grid-area: buy; align-self: center; margin-top: var(--sp-5); }
.car-category .cat-tecdoc__info > .no_price button {
  width: 100%; min-height: 50px; padding: 0 12px; border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl); background: var(--color-bg); color: var(--color-text);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
}

/* ── §9 MEDIA ── */
.car-category .help, .modif .help { position: relative; left: calc((100% - 100vw) / 2); margin-left: 0; margin-right: 0; width: 100vw; max-width: 100vw; }
@media (max-width: 610px) {
  .car-category .cat-tecdoc__info {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "price" "stock" "term" "buy";
    align-items: start;
  }
}

/* ════ [16-доробка] 2 дефекти розкладки car-category (vda desktop ~1440) ════ */
/* ДЕФЕКТ 2: назва товару (.cat-tecdoc__title) 1-2 рядки БЕЗ min-height → ціна+«Купити»
   плаває по вертикалі. min-height 2 рядки (40px=2×20lh) → ціна+кнопка на однаковому
   offset → «Купити» на ОДНІЙ ЛІНІЇ в ряду (1 vs 2-рядкові назви). Глобал .cat-tecdoc
   (лікує й catalogs/category-tecdoc — той самий клас, vda OK). */
.cat-tecdoc__title { min-height: 40px; }
/* ДЕФЕКТ 1: відступ сітка товарів → банер .help (нижній ряд не прилипає до банера). */
.car-category .prods.cat-tecdoc__grid { margin-bottom: 60px; }

/* ════ [16-доробка2] ЛЕСЕНКА «Купити» від ВИСОТИ ФОТО (.cat-tecdoc__img варіює 298↔342) ════
   Фікс: 1fr-spacer між title і ціною → футер (ціна+кнопка+наявність+срок) ПРИТИСНУТО ДО НИЗУ
   .cat-tecdoc__info (flex:1) → «Купити» на одній Y у ряду НЕЗАЛЕЖНО від висоти фото/назви.
   Картки рівні (grid-stretch) → футери на одній лінії. Глобал (.cat-tecdoc, лікує catalogs теж).
   @≥611 — мобілка (§610 стек) окремо. */
@media (min-width: 611px) {
  .catalogs .cat-tecdoc__info,
  .car-category .cat-tecdoc__info,
  .search-page .cat-tecdoc__info,
  .shop-category .cat-tecdoc__info,
  .shop-part .cat-tecdoc__info {
    grid-template-rows: auto 1fr auto auto auto;
    grid-template-areas:
      "title title"
      ".     ."
      "price buy"
      "stock stock"
      "term  term";
  }
}

/* [16-доробка2] ФОТО вирівняти — .cat-tecdoc__img розпирався (aspect-ratio yield-ить tall-img
   339×399 у flex → бокс 342 замість 298). min-height:0 → aspect-ratio тримає квадрат;
   object-fit:contain → схема/фото влазить у бокс без розпирання (vda). Глобал. */
.cat-tecdoc__img { min-height: 0; }
.cat-tecdoc__img img { object-fit: contain; }

/* ============================================================
   §7.15 CART (14/14) — оверлей кошика #body.cart_open
   Рушій core/shop/shop_cart.kiev (ІДЕНТИЧНИЙ донору parts.allzap.pro,
   diff=0) рендерить чекаут при see=:3,4, у #body, body→#content.none,
   #body.classList.add('cart_open'). URL: будь-яка стор. + JS
   artkiev_cart_see(0) → AJAX /filter/basket-3,4-0. .kiev НЕ чіпано.
   Натяжка = ПОРТ донор-розкладки + reskin під RemBaza-токени.
   ГЛОБАЛЬНІ .send (orange CTA «Оформить заказ») і .inp_1 (поля ФИО/тел/
   email/textarea/ship) ВЖЕ застосовані — НЕ дублюємо колір/бокс.
   ПОПАП (#modal.window .add_cart*, .add_cart_price .cart_minus/.cart_plus,
   .cart_fast — §POPUP L1104+) — ОКРЕМИЙ scope, НЕ чіпаємо.
   Усе scoped під .cart_open щоб не текло у глобал/попап.
   ============================================================ */

/* ── панель-обгортка (білий rounded блок) ── */
.cart_open { max-width: 1000px;
  margin: var(--sp-12) auto;
  padding: var(--sp-5) var(--sp-8);
  background: var(--color-bg);
  border-radius: var(--r-xl);
  box-sizing: border-box;
  text-align: left; }

.cart_open h4 { margin: 0;
  padding: var(--sp-3) 0 var(--sp-5);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted); }

/* промо-плашка (artkiev_design id=47, опційно) */
.cart_open .cart_text { margin: 0 0 var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--color-primary-soft);
  color: var(--color-text);
  border-radius: var(--r-lg);
  text-align: center; }

/* ── 2 колонки: ліворуч «Данные покупателя» (300), праворуч «Корзина покупок» (580) ── */
.cart_open .cart_form { display: inline-block;
  vertical-align: top;
  width: 300px; }

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

/* select-доставки: span#ship_info стилізований глобал .inp_1, додаємо chevron+центрування (як select.inp_1) */
.cart_open #ship_info { display: flex;
  align-items: center;
  height: 60px;
  line-height: 1.3;
  cursor: pointer;
  text-align: left;
  background-image: url('/img/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  padding-right: var(--sp-10); }

/* ── «Корзина покупок»: бокс товарів ── */
.cart_open #cart_prod { padding: var(--sp-4);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg); }
.cart_open #cart_prod table { width: 100%; }

.cart_open .cart_img { width: 90px;
  height: 90px;
  padding: 0 var(--sp-5) 0 0; }
.cart_open .cart_img img { max-width: 85px;
  max-height: 85px; }

.cart_open .cart_name { position: relative;
  text-align: left;
  padding: 0 var(--sp-5) 0 0; }
.cart_open .cart_name a,
.cart_open .cart_name b { display: block;
  max-height: 70px;
  overflow: hidden;
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-decoration: none; }
.cart_open .cart_name span { display: block;
  margin-top: var(--sp-1);
  color: var(--color-text-muted);
  font-size: var(--fs-sm); }

/* ✕ видалення товару — .cart_del (чистий div у шаблоні, НЕ битий модальний .close) */
.cart_open .cart_del { position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--color-text) url('/img/face/close.svg') no-repeat 50% / 11px;
  opacity: .25;
  cursor: pointer;
  transition: opacity .15s ease; }
.cart_open .cart_del:hover { opacity: 1; }

/* ── рядок: ціна / кількість −[ ]+ / лінійна сума ── */
.cart_open .cart_price_one { width: 80px;
  text-align: left;
  color: var(--color-text); }

.cart_open .cart_price_kolvo { width: 120px;
  display: flex;
  justify-content: center;
  align-items: center; }
.cart_open .cart_price_kolvo .cart_minus,
.cart_open .cart_price_kolvo .cart_plus { width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer; }
.cart_open .cart_price_kolvo .cart_minus:hover,
.cart_open .cart_price_kolvo .cart_plus:hover { background: var(--color-primary-hover); }
.cart_open .cart_price_kolvo .kolvo { width: 40px;
  height: 34px;
  margin: 0 var(--sp-1);
  padding: 0 var(--sp-1);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  text-align: center;
  box-sizing: border-box; }

.cart_open .cart_price_sum { white-space: nowrap;
  text-align: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text); }

.cart_open .cart_tr { width: 100%;
  margin: var(--sp-5) 0;
  border-bottom: 1px solid var(--color-border-soft); }

/* ── підсумки: Доставка / К оплате ── */
.cart_open .cart_itogo { padding: 0 var(--sp-5);
  margin-top: var(--sp-4); }
.cart_open .cart_itogo table { width: 100%; }
.cart_open .cart_itogo td:nth-child(1) { width: 120px;
  padding: var(--sp-1) 0;
  color: var(--color-text-muted); }
.cart_open .cart_itogo td:nth-child(2) { text-align: right;
  padding: var(--sp-1) 0; }
.cart_open .cart_itogo tr:last-child td { font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text); }

.cart_open .cb { clear: both; }

/* ── §9 АДАПТИВ кошик (donor: 1000 stack, 610 hide img, 470 hide unit-price) ── */
@media (max-width: 1000px) {
  .cart_open .cart_form { display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto var(--sp-10); }
  .cart_open .cart_prod { display: block;
    width: 100%;
    margin: var(--sp-10) 0 0;
    padding: var(--sp-5) 0 0;
    border-top: 2px solid var(--color-border-soft); }
  .cart_open .cart_itogo { padding: 0; }
}
@media (max-width: 610px) {
  .cart_open .cart_img { display: none; }
}
@media (max-width: 470px) {
  .cart_open .cart_price_one { display: none; }
}
/* ===== END §7.15 CART ===== */

/* ============================================================
   §7.16 CART — модалка вибору доставки (#modal.window .ships)
   + select «Способ оплаты» (div.inp_1.pay_info > select)
   Рушій core/shop/ajax.kiev: клік #ship_info → artkiev_ajax(.../ship-0/,
   "window",1) рендерить у #window:
     <div class="ships"><ul>
       <li class="ship_name_one"><strong>ГРУПА</strong></li>        ← заголовок-група
       <li class="ship_name_one" onclick><div><span>ПУНКТ</span></div></li> ← клікаб. лист
       <li class="ship_name"     onclick><div><span>ПУНКТ</span></div></li> ← клікаб. дитина
     </ul></div>
     <div class="ships_info"><div id="ships_N"><strong>ціна</strong>опис</div></div>
   Після вибору доставки у #cart_after_ship інжектиться
     <div class="inp_1 pay_info"><select name="cart[pay]">…</select></div>
   (сам <select> БЕЗ .inp_1 → був нестилізований: синя/чорна рамка фокусу).
   Канон = ДОНОР parts.allzap.pro (img/style.css L1158+, адаптив L3585+),
   reskin під RemBaza-токени. .kiev/текст НЕ чіпано.
   Scope: ships → #modal.window (#modal=BFC, тримає донор-флоати; НЕ чіпає
   add-cart .add_cart* / login); pay → .cart_open .pay_info (НЕ тече у глобал).
   ============================================================ */

/* ── A. модалка-список доставки (порт донор .ships, RemBaza-акцент) ── */
#modal.window .ships { float: left; width: 300px; text-align: left; }
#modal.window .ships ul { list-style: none; margin: 0; padding: 0; }

/* заголовок-група (Самовивіз / Доставка по Україні… / Безкоштовно) */
#modal.window .ship_name_one { font-size: var(--fs-lg); margin: var(--sp-1) 0; }
#modal.window .ship_name_one strong { display: block;
  margin: var(--sp-2) 0 2px;
  font-weight: var(--fw-semibold);
  color: var(--color-text); }

/* клікабельні пункти (Нова Пошта / Автолюкс…) — донор: рядок div, текст span */
#modal.window .ship_name { margin: 0 0 2px var(--sp-5); }
#modal.window .ship_name_one div,
#modal.window .ship_name div { padding: var(--sp-1) 0 5px; cursor: pointer; }
#modal.window .ship_name_one div:hover,
#modal.window .ship_name div:hover { background: var(--color-primary-soft); }
#modal.window .ships li span { color: var(--color-primary);
  border-bottom: 1px dashed var(--color-primary); }

/* праве інфо-поле (опис/ціна доставки) */
#modal.window .ships_info { float: right; width: 310px; text-align: left; }
#modal.window .ships_info strong { display: block;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text); }

/* ── B. select «Способ оплаты» (div.inp_1.pay_info > select без .inp_1) ──
   Дублюємо вигляд .inp_1 + select.inp_1 на самому <select>, обнуляємо
   рамку/паддінг/фон обгортки (.kiev не чіпаємо — клас додати не можемо). */
.cart_open .pay_info { padding: 0; border: 0; background: transparent; }
.cart_open .pay_info select {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 0 var(--sp-10) 0 var(--sp-5);
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: 24px;
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image: url('/img/icons/chevron-down.svg');
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  outline: 0;
  cursor: pointer; }
.cart_open .pay_info select:focus { border-color: var(--color-primary); }

/* ── §9 АДАПТИВ модалки доставки (donor max-width:761 → 1 колонка) ── */
@media (max-width: 761px) {
  #modal.window .ships { float: none; width: 100%; margin: 0 0 var(--sp-5); text-align: center; }
  #modal.window .ships_info { display: none; }
  #modal.window .ship_name { margin: 0; }
}
/* ===== END §7.16 CART modal+pay ===== */


/* ============================================================
   §7.17 — МАКЕТ-фікси (vda 2026-06-03)
   1) home .brands-grid: лого марок grayscale + БЕЗ бордерів (макет 51:2126-стиль).
   2) help-банер: help-gears.png перевернуто на проді (асет був дзеркальний vs макет,
      великі шестерні зліва-вгорі) → cache-bust ?v=2 щоб підхопився flipped.
   3) shop-part опис: відступ до специфікацій (було зліплено, читалось «Унашому»).
   Усе scoped, .kiev/текст НЕ чіпано.
   ============================================================ */

/* ── ПРАВКА 1: home .brands-grid — лого ч/б + без бордерів (перебиває §6.13) ── */
.brands-grid { gap: 0; background: transparent; border: 0; }
.brand-card img { filter: grayscale(1); }

/* ── ПРАВКА 2: cache-bust перевернутого help-gears.png (асет перезалито) ── */
.help::before { background-image: url('/img/images/help-gears.png?v=2'); }

/* ── ПРАВКА 3: shop-part опис → відступ до .tovar_rows (донор .ma.text margin:0) ── */
.shop-part .ma.text { margin-bottom: var(--sp-5); }
/* ===== END §7.17 МАКЕТ-фікси ===== */


/* ============================================================
   §7.18 — product-hero out-of-stock «Уточнити наявність» (.no_price button)
   Тригер cars_un (форму полагоджено JS). Кнопка була БЕЗ класу/стилів (нативна).
   Макет 51:5315: вторинний елемент під ціною (НЕ основна dark «Купити»).
   Reuse наявного rembaza-патерну ghost-кнопки `.no_price button` з прийнятих
   сторінок (shop-part/shop-category): сіра рамка border-soft, текст, hover→accent.
   Scoped під product-hero → НЕ чіпає search-brand `.prod_tr .no_price button`
   (там помаранч-ghost, інший прийнятий вигляд) і аналоги.
   ============================================================ */
.product-hero__buy .no_price { margin-top: 30px; }   /* ритм ціна/мета → кнопка (як .buy margin-top:30) */
.product-hero__buy .no_price button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0 var(--sp-6);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-xl);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-base), color var(--dur-fast) var(--ease-base);
}
.product-hero__buy .no_price button:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* ===== END §7.18 ===== */

/* §7.19 — сховати CTA «Показати автозапчастини для всіх марок авто» під .brands-grid (vda). Унікальний wrapper, НЕ чіпає .btn--ghost деінде. */
.home__brands-cta { display: none; }

/* ============================================================
   §7.20 — QA-fixes (vda): V1 footer-заголовки left, R2 product-tecdoc help left:0
   ============================================================ */
/* V1: футер-заголовки зліва (перебиває grouped .name_4,h3,.name_3{text-align:center} 0,1,0;
   контейнер = .footer_row, НЕ .footer — тому попередній .footer .name_3 не брав). */
.footer_row .name_3 { text-align: left; }

/* R2: product-tecdoc .help = width:auto (contained), але глобал @≤768 .help{left:calc(...)}
   зсував її → ~+5px hScroll. Скид left:0 (специфічність 0,2,0 > глобал 0,1,0). */
@media (max-width: 768px) {
  .product-tecdoc .help { left: 0; }
}
/* ===== END §7.20 ===== */

/* ============================================================
   §7.21 — МОБ-пошук у шапці (.search--nav button) — лупа видима + вирівняна
   Тільки @≤761 (десктоп .search button = orange bg + white svg, НЕ чіпаємо).
   Корінь: search.svg = stroke:white; моб button bg transparent → біла лупа
   невидима на світлому інпуті #f5f5f5. + top:10 (десктоп 60px) зсував у 36px.
   ============================================================ */
@media (max-width: 761px) {
  .search--nav button {
    top: 6px;               /* vcenter у 36px інпуті: (36-24)/2 */
    right: 8px;             /* центр у 40px padding-gutter інпута */
    filter: brightness(0);  /* білий search.svg → чорний, видимий на #f5f5f5 */
  }
}
/* ===== END §7.21 ===== */

/* ============================================================
   §7.22 — NEWS-LIST /poleznaya-informatsiya/ (LIST статей) — RESKIN
   Макет 51:1364 (razdel-rembaza «Корисна інформація»). ТІЛЬКИ CSS.
   Рушій (pages.kiev else-гілка) віддає: .page_rows > a.page > img + span.
   Reskin: flat-стопка → grid фото-карток із заголовком-оверлеєм.
   SCOPE: .page_rows (унікальний на цій стор.; глобал reset display:block @1945).
   Пагінація ($pages) — глобал .pagination §6.12 (успадковує, не дублюємо).
   Картка з Figma 51:1604: 410×500, r16, img cover, градієнт 226px
   (#000 26.44%→transparent), title 20/600/26 white underline, side31/bottom36.
   Append-only, 0 правок існуючих правил. natyazhnyk 2026-06-04.
   ============================================================ */
.page_rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;                               /* Figma: col/row gap 25 */
  margin: var(--sp-10) 0 var(--sp-20);     /* 40 H1->grid / 80 grid->banner */
}
.page_rows .page {
  position: relative;
  display: block;
  aspect-ratio: 410 / 500;                 /* Figma картка 410x500 */
  border-radius: var(--r-xl);              /* 16 */
  overflow: hidden;
  background: var(--color-card-soft);      /* #e0e0e0 placeholder поки фото грузиться */
  transition: box-shadow var(--dur-base) var(--ease-base);
}
.page_rows .page img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;                       /* заповнює картку, не розтягує */
  transition: transform var(--dur-base) var(--ease-base);
}
.page_rows .page::after {                  /* градієнт-оверлей (у DOM нема -> псевдо) */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  height: 226px;
  background: linear-gradient(to top, #000 26.44%, rgba(0, 0, 0, 0));
  pointer-events: none;
}
.page_rows .page span {                    /* заголовок-оверлей */
  position: absolute;
  z-index: 2;
  left: 31px; right: 31px; bottom: 36px;   /* Figma: side 31, bottom 36, текст росте вгору */
  color: var(--color-text-inverse);        /* #fff */
  font-size: var(--fs-xl);                 /* 20 */
  font-weight: var(--fw-semibold);         /* 600 */
  line-height: 26px;
  text-decoration: underline;              /* Figma 51:1607 */
}
.page_rows .page:hover { box-shadow: var(--shadow-submenu); }
.page_rows .page:hover img { transform: scale(1.05); }   /* легкий зум, консистентно з card-hover */

/* ── responsive 3->2->1 (брейки проекту 1000/610) ── */
@media (max-width: 1000px) {
  .page_rows { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 610px) {
  .page_rows { grid-template-columns: 1fr; gap: 20px; margin: var(--sp-8) 0 var(--sp-16); }
}
/* ===== END §7.22 NEWS-LIST ===== */

/* ===== §7.23 404 PAGE (error404) ===== */
/* Рендериться через core/syst/sitemap.kiev під $error404.
   Скоуп строго .sitemaps .error404 — реальну Карту сайта (/sitemap/) НЕ зачіпає. */
.sitemaps .error404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-20) var(--sp-4) var(--sp-24);
  gap: var(--sp-4);
}
.sitemaps .error404__code {
  font-family: var(--font-heading);
  font-size: 120px;
  line-height: 1;
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  letter-spacing: 2px;
}
.sitemaps .error404__title {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: 1.2;
}
.sitemaps .error404__text {
  margin: 0;
  max-width: 420px;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.sitemaps .error404__btn {
  margin-top: var(--sp-4);
  text-decoration: none;
}
@media (max-width: 610px) {
  .sitemaps .error404 { padding: var(--sp-12) var(--sp-4) var(--sp-16); }
  .sitemaps .error404__code { font-size: 80px; }
  .sitemaps .error404__title { font-size: var(--fs-2xl); }
}
/* ===== END §7.23 404 PAGE ===== */