/* ============================================================
   style.css — ЕДИНЫЙ стиль сайта avtozapchastyny (verstka-only, cms-agnostic)
   Пересборка НА ДОНОР-КАРКАСЕ (V2 ideal): один внешний CSS, иконки = внешние .svg
   через url() (mask-image + background-color tint), внешний script.js, раскладка img/.
   Координаты Figma @1920 → внутри контейнера 1280: x_cont = x − 320.
   Иконки (C8) = класс-хук + mask-image: url("<glyph>.svg") (внешний файл, НЕ data-URI).
   Без вендор-префиксов, без своего внешнего JS сверх донор-script.js.
   ============================================================ */

/* ===== Roboto (variable woff2, cyrillic + latin) ===== */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("roboto-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== reset + база (body объявлен ОДИН раз — слияние html,body + body) ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { margin: 0; padding: 0; }

body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
  color: #ffffff;
  background: #171717;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }

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

img, svg { display: block; }

button { font: inherit; cursor: pointer; }

/* общий контейнер (центр 1280) */
.container {
  width: 1280px;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 0;
}

.head { width: 100%; }


/* ======================================================
   ИКОНКИ (C8) — глиф через CSS-mask + background-color.
   ====================================================== */
/* СОЦ-ІКОНКИ (DRY): спільні властивості слота (display/flex/22x22/#7e7e7e/
   repeat/position) винесено на контейнер-посилання .msg a / .foot-soc a (обидва
   містять лише соц-<a class="ic-*">). У варіантах .ic-* лишається mask-image
   + mask-size (розмір корелює з глифом: fb/ig 22, yt/tg 16, vb 17.6 - тому
   тримаємо на варіанті, де він і має жити, без подвоєння спільних 7 властивостей). */
.msg a, .foot-soc a {
  display: block;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  background-color: #7e7e7e;
  mask-repeat: no-repeat;
  mask-position: center;
}
/* варіант = глиф + його розмір (mask-size лишається на .ic-*, бо корелює з
   конкретним глифом; на контейнер винесено лише спільні слот/колір/repeat/position) */
.ic-fb { mask-image: url("fb.svg"); mask-size: 22px 22px; }
.ic-ig { mask-image: url("ig.svg"); mask-size: 22px 22px; }
.ic-yt { mask-image: url("yt.svg"); mask-size: 16px 16px; }
.ic-tg { mask-image: url("tg.svg"); mask-size: 16px 16px; }
.ic-vb { mask-image: url("viber.svg"); mask-size: 17px 17.6px; }

/* бургер / крестик / моб-кнопка поиска / submit-лупки поля поиска —
   бокс = размеру глифа, глиф = маска+белый bg-color.
   .ic-search (лупа артикула) и .ic-plate (лупа номера) — submit-кнопки
   внутри поля: без рамки/фона кнопки, позиц. абсолютно (правила ниже).
   Маска поиска (.ic-msearch/.ic-search) общая → группа селекторов ниже. */
.ic-burger {
  display: inline-block;
  flex: 0 0 auto;
  background-color: #ffffff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 26px; height: 26px;
  mask-image: url("burger.svg"); }
.ic-msearch {
  display: inline-block;
  flex: 0 0 auto;
  background-color: #ffffff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 22px; height: 22px;
  mask-image: url("search.svg");
}

/* ИКОНКА+ТЕКСТ: глиф через ::before/::after на классе элемента.
   телефон/VIN/корзина — ::before; аккаунт (user после текста) — ::after.
   Общий пейнтер: пустой пвседоэлемент, маска+bg-color = глиф.
   Размер/цвет/маску задаёт сам элемент-носитель ниже. */

/* ======================================================
   БАР 1 — topbar · h40 · #000
   ====================================================== */
.topbar { background: #000000; height: 40px; }
/* ПОТІК: ряд = flex, елементи зліва направо; акаунт притиснутий вправо
   через margin-left:auto. Зазори — margin/gap, не координати.
   (раніше було position:absolute з left:92/794.8 — крихко при іншій
   довжині тексту; тепер перетікає.) */
.topbar-row {
  height: 40px;
  display: flex;
  align-items: center;
}

/* мова: UA center@cont8, RU center@cont34 — крок центрів ~26px.
   Потік: UA/RU природньою шириною (~16px), зазор gap:10px дає крок
   центрів ~26 (без width-хака і без позиційних селекторів). */
.lang {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lang a {
  display: inline-block;
  font-size: 12px;
  line-height: 18px;
  color: #7e7e7e;
  text-align: center;
}
.lang li.on a { color: #ff9800; }

/* інфо-меню: зазор lang→info = 40px (cont92 − cont52) */
.info {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 50px;
}
.info a {
  font-size: 12px;
  line-height: 18px;
  color: #7e7e7e;
  white-space: nowrap;
}
.info li.on a {
  color: #ff9800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* месенджери: 22×22-слот, крок центрів 30 → gap 8.
   зазор info→msg = 51px (cont794.8 − cont743.8) */
.msg {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 50px;
}
/* кожен <a> у .msg сам = глиф (icon-only): спільні властивості соц-слота
   22×22 #7e7e7e задано на .msg a / .foot-soc a у блоці ІКОНКИ вище;
   варіант .ic-* додає лише mask-image (+ mask-size де інакший). */

/* акаунт: притиснутий до правого краю контейнера (cont1280) через auto */
.acc {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.acc > span {
  font-size: 12px;
  line-height: 18px;
  color: #7e7e7e;
  white-space: nowrap;
}
.acc .lnk { text-decoration: underline; text-underline-offset: 2px; }
/* глиф акаунта (icon+text): ::after (іконка після тексту), 22×22 сірий */
.ic-user {
  display: inline-block;
  flex: 0 0 auto;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 22px; height: 22px;
  background-color: #7e7e7e;
  mask-image: url("user.svg");
}


/* ======================================================
   БАР 2 — mainbar · h140 · #171717 · border-bottom 1px #282828
   ====================================================== */
.mainbar {
  background: #171717;
  height: 140px;
  border-bottom: 1px solid #282828;
}
/* ПОТІК: ряд = flex по центру вертикалі. Порядок зліва направо:
   лого → телефони → VIN → пошук → корзина. Зазори — margin-left на
   елементах; корзина вправо через margin-left:auto.
   (раніше — position:absolute з left:0/258/462/648; крихко.) */
.mainbar-row {
  height: 140px;
  display: flex;
  align-items: center;
}

/* логотип @cont0, 220×104 */
.logo {
  flex: 0 0 auto;
  width: 220px;
  height: 104px;
}
.logo img {
  width: 220px;
  height: 104px;
  object-fit: contain;
}

/* телефони: дві строки (flex-column). Зазор лого→телефони = 38px
   (cont258 − cont220). Рядки top≈40/78 у h140 → блок висотою 60px,
   центр-вирівняний рядом (контейнер центрує по вертикалі), gap між
   рядками 16px (38px крок baseline = 22px рядок + 16px gap). */
.phones {
  flex: 0 0 auto;
  margin-left: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.phone {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* глиф телефона (icon+text): ::before, 22×22 білий */
.ic-call {
  display: inline-block;
  flex: 0 0 auto;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 22px; height: 22px;
  background-color: #ffffff;
  mask-image: url("call.svg");
}
.phone span {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: #ffffff;
  white-space: nowrap;
}

/* кнопка VIN: 170×50, radius8, градієнт to-top.
   зазор телефони→VIN = 36px (cont462 − cont426 ширина телефонів) */
.vin {
  flex: 0 0 auto;
  margin-left: 36px;
  width: 170px;
  height: 50px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(to top, #ff860d 0%, #ffcc00 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* глиф VIN (icon+text): ::before, 22×22, колір на жовтій */
.ic-vin {
  display: inline-block;
  flex: 0 0 auto;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 22px; height: 22px;
  background-color: #1e1e1e;
  mask-image: url("vin.svg");
}
.vin span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #1e1e1e;
  text-transform: uppercase;
}

/* пошук+номер: об'єднаний бокс, обидва h50, bg #4b4b4b.
   зазор VIN→пошук = 16px (cont648 − cont632 правий край VIN) */
.search {
  flex: 0 0 auto;
  margin-left: 16px;
  display: flex;
  align-items: stretch;
  height: 50px;
}
.search .art {
  position: relative;
  height: 50px;
  background: #4b4b4b;
  display: flex;
  align-items: center;
  width: 344px;
  border-radius: 8px 0 0 8px;
  border-right: 1px solid #171717;
}
.search .plate {
  position: relative;
  height: 50px;
  background: #4b4b4b;
  display: flex;
  align-items: center;
  width: 144px;
  border-radius: 0 8px 8px 0;
}
.search input {
  flex: 1 1 auto;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  padding: 0;
}
.search .art input   { padding-left: 17px; padding-right: 47px; }
.search .plate input { padding-left: 16px; padding-right: 46px; }
.search input::placeholder { color: #ffffff; opacity: 1; }
/* submit-лупки (C8 класс+mask): кнопка без рамки/фона, глиф белый,
   позиц. абсолютно справа в поле (как раньше псевдоэлемент). */
.ic-search {
  display: inline-block;
  flex: 0 0 auto;
  background-color: #ffffff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  padding: 0;
  cursor: pointer;
  right: 13px;
  width: 22px; height: 22px;
  mask-image: url("search.svg");
}
.ic-plate {
  display: inline-block;
  flex: 0 0 auto;
  background-color: #ffffff;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  padding: 0;
  cursor: pointer;
  right: 14px;
  width: 24px; height: 24px;
  mask-image: url("search24.svg");
}

/* поиск-маска (22×22) общая: моб-кнопка .ic-msearch и submit-лупка
   поля артикула .ic-search → одна data-URI */

/* корзина: притиснута вправо через margin-left:auto.
   правий край контейнера cont1280, корзина right≈cont1274 → margin-right 6px.
   іконка 24, правий край глифа → Figma x1515 */
.cart {
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* глиф корзини (icon+text): ::before, 24×24 білий */
.ic-cart {
  display: inline-block;
  flex: 0 0 auto;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  width: 24px; height: 24px;
  background-color: #ffffff;
  mask-image: url("cart.svg");
}
.cart span {
  font-size: 16px;
  line-height: 22px;
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cart b {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: #7e7e7e;
  margin-left: -4px;
}


/* ======================================================
   БАР 3 — navbar · меню-каталог · h64 · #171717
   10 табів, 1280/10=128. Текст 14/20 SemiBold, 2 рядки, центр.
   Активний таб bg #282828.
   ====================================================== */
.navbar { background: #171717; height: 64px; }
.menu {
  display: flex;
  height: 64px;
}
.menu li {
  flex: 1 1 0;
  height: 64px;
}
.menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 8px;
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #ffffff;
}
.menu li.on { background: #282828; }

/* ======================================================
   HERO · 1920×700 · фон-фото + контент
   ====================================================== */
.hero {
  position: relative;
  height: 700px;
  background: #e0e0e0;
  overflow: hidden;
}
/* фото-підложка: full-bleed 1920, центр; затемнення 50% поверх */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}
/* контент у 1280, поверх затемнення */
.hero-inner {
  position: relative;
  z-index: 1;
  height: 700px;
}

/* заголовок: top112, Roboto Bold 56/68, білий; акцент #ff9800 */
.hero-title {
  margin: 0;
  padding-top: 112px;
  font-size: 56px;
  line-height: 68px;
  font-weight: 700;
  color: #ffffff;
}
.hero-title .hl { color: #ff9800; }

/* підзаголовок: top272 (зазор від заголовка 24), Roboto Medium 24/36 */
.hero-sub {
  margin: 24px 0 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: #ffffff;
}

/* кнопка CTA: top456 (зазор 112), 264×60, radius8, градієнт знизу-вгору.
   текст Roboto SemiBold 16/22 #1e1e1e uppercase + стрілка 22 праворуч. */
.hero-cta {
  margin-top: 112px;
  width: 264px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(to top, #d3d3d3 0%, #f6f6f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero-cta span {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #1e1e1e;
  text-transform: uppercase;
}
/* стрілка (C8): порожній елемент + клас-хук + mask, глиф 22×22 #1e1e1e */
.ic-arrow {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  background-color: #1e1e1e;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 22px 22px;
  mask-image: url("arrow.svg");
}

/* пагінація: top596 (зазор 80), активна пілюля 32×12 #ff9800 + 3 крапки
   12×12 white .5; крок-зазор 12px. */
.hero-dots {
  margin-top: 80px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-dots span {
  width: 12px;
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
}
.hero-dots span.on {
  width: 32px;
  background: #ff9800;
}


/* ======================================================
   ГАРАЖ-СЕЛЕКТОР · @1920 заголовок y1014 → сітка y1556
   контейнер 1280 (x320). Розкладка потоком.
   ====================================================== */
.garage {
  background: #ffffff;
  padding-block: 70px 0;
}

/* заголовок: Roboto SemiBold 36/48 #1e1e1e */
.garage-title {
  margin: 0;
  font-size: 36px;
  line-height: 48px;
  font-weight: 600;
  color: #1e1e1e;
}

/* режим-кнопки: зазор від заголовка 50px (y1112−1062); ряд, gap 16 */
.garage-modes {
  margin-top: 50px;
  display: flex;
  gap: 16px;
}
/* база кнопки: h60, radius8, Roboto SemiBold 16/22 uppercase, неактив #f6f6f6 */
.mode {
  flex: 0 0 290px;
  min-width: 0;
  height: 60px;
  padding-inline: 12px;
  border: none;
  border-radius: 8px;
  background: #f6f6f6;
  color: #1e1e1e;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.mode span { min-width: 0; }
/* активна: градієнт сірий зверху-вниз, білий текст */
.mode-on {
  background: linear-gradient(to bottom, #5c5c5c 0%, #282828 100%);
  color: #ffffff;
}
/* остання «підберіть мені запчастину»: ширша 362, жовтий градієнт + іконка */
.mode-pick {
  flex-basis: 362px;
  background: linear-gradient(to bottom, #ffcc00 0%, #ff860d 100%);
  color: #1e1e1e;
}
/* іконка коробки (C8): клас-хук + mask, глиф 22×22 #1e1e1e */
.ic-gear {
  display: inline-block;
  flex: 0 0 auto;
  width: 22px; height: 22px;
  background-color: #1e1e1e;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 22px 22px;
  mask-image: url("gear.svg");
}

/* панель: зазор від кнопок 24px (y1196−1172); 5 табів стик-у-стик, кожен 256 */
.garage-panel {
  margin-top: 24px;
  display: flex;
}
/* таб = поле вибору: біле, нижній бордер #e0e0e0, h60, w256 */
.gtab {
  position: relative;
  flex: 0 0 256px;
  height: 60px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}
.gtab select {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 51px 0 22px;
  font-family: inherit;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #7e7e7e;
  cursor: pointer;
  /* form-control reset: стандартный appearance:none снимает родную рамку/бевел селекта */
  appearance: none;
  outline: none;
  border-radius: 0;
}
/* доступність: видимий фокус лише з клавіатури, без родового ободка-паріння */
.gtab select:focus-visible {
  outline: 2px solid #1e1e1e;
  outline-offset: -2px;
}
/* активний таб (перший): текст темний #1e1e1e */
.gtab-on select { color: #1e1e1e; }
/* стрілка-кнопка праворуч 26×26 radius6, сірий фон #f6f6f6 + глиф 16 #1e1e1e */
.gtab-arrow {
  position: absolute;
  top: 50%;
  right: 17px;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 6px;
  background: #f6f6f6;
  pointer-events: none;
}
.ic-gnext {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  background-color: #1e1e1e;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 16px 16px;
  mask-image: url("gnext.svg");
}
/* активний таб: стрілка-кнопка жовтий градієнт, глиф білий */
.gtab-on .gtab-arrow {
  background: linear-gradient(to bottom, #ffcc00 0%, #ff860d 100%);
}
.gtab-on .ic-gnext { background-color: #ffffff; }

/* сітка марок: 6 колонок · стик до панелі (zazor 0) · кожна клітина h60 */
/* зовн. рамка 1px по всіх 4 сторонах + внутрішні роздільники бордером клітин */
/* (border-box: бордер не міняє h60 → рядки не дрейфують, висота сітки = макет 300) */
.garage-brands {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid #e0e0e0;
  border-left: 1px solid #e0e0e0;
  background: #ffffff;
}
/* клітина: текст Roboto Regular 14 #1e1e1e uppercase, ліворуч */
/* роздільники = правий+нижній бордер кожної клітини (з лівим+верхнім сітки = повна рамка) */
.garage-brands a {
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 21px;
  font-size: 14px;
  font-weight: 400;
  color: #1e1e1e;
  text-transform: uppercase;
  background: #ffffff;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
}
.garage-brands a:hover { background: #f6f6f6; }


/* ======================================================
   ПРОМО-ПОЛОСА · @1920 y1626 · смуга 1280×140 темна radius16
   контейнер 1280. Текст ліворуч, кнопка праворуч.
   ====================================================== */
.promo {
  background: #ffffff;
  padding-block: 70px 54px;
}
/* смуга: h140, #1e1e1e, radius16; вміст у внутр. падингах (x47 / x38) */
.promo-bar {
  height: 140px;
  border-radius: 16px;
  background: #1e1e1e;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 47px;
  padding-right: 38px;
}
/* текст: Roboto 30/40 білий; «Потрібна допомога?» Bold, решта Regular */
.promo-text {
  margin: 0;
  font-size: 30px;
  line-height: 40px;
  font-weight: 400;
  color: #ffffff;
}
.promo-text b { font-weight: 700; }
/* кнопка: 290×60 radius8, жовтий градієнт зверху-вниз; текст SemiBold 16/22
   #1e1e1e uppercase + стрілка 22 праворуч */
.promo-btn {
  flex: 0 0 auto;
  width: 290px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(to bottom, #ffcc00 0%, #ff860d 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.promo-btn span {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #1e1e1e;
  text-transform: uppercase;
}


/* ======================================================
   БЛОК ДОСТАВКИ · @1920 y1870-2420 · фото 550 + контент праворуч
   контейнер 1280. Фото ліворуч (x320), текст від x921 (601 у контейнері).
   ====================================================== */
.delivery {
  background: #ffffff;
  padding-block: 50px 60px;
}
/* ряд: фото + контент; зазор фото→контент = 601−550 = 51px */
.delivery-row {
  display: flex;
  align-items: flex-start;
  gap: 51px;
}
/* фото 550×550 (контент-картинка, прозорий фон) */
.delivery-img {
  flex: 0 0 550px;
  width: 550px;
  height: 550px;
  object-fit: contain;
}
/* контент-колонка: вирівняна по верху фото; внутр. відступ зверху 9px (y1879−1870) */
.delivery-body {
  padding-top: 9px;
}
/* заголовок: Roboto SemiBold 56/68 #1e1e1e; акцент * #ff9800 */
.delivery-title {
  margin: 0;
  font-size: 56px;
  line-height: 68px;
  font-weight: 600;
  color: #1e1e1e;
}
.delivery-title .hl { color: #ff9800; }
/* текст: зазор від заголовка 24px; Roboto Regular 24/36 #1e1e1e */
.delivery-text {
  margin: 24px 0 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 400;
  color: #1e1e1e;
}
/* лого Нова Пошта: зазор від тексту 36px; 158×56 (контент-картинка) */
.delivery-np {
  display: block;
  margin-top: 36px;
  width: 158px;
  height: 56px;
}
/* сноска: зазор від лого 36px; Roboto Regular 14/20 #7e7e7e; * #ff9800 */
.delivery-note {
  margin: 36px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #7e7e7e;
}
.delivery-note .hl { color: #ff9800; }
/* кнопка: зазор від сноски 60px; 230×60 radius8, сірий градієнт знизу-вгору;
   текст SemiBold 16/22 #1e1e1e uppercase + стрілка 22 праворуч */
.delivery-btn {
  margin-top: 60px;
  width: 230px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(to top, #d3d3d3 0%, #f6f6f6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.delivery-btn span {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: #1e1e1e;
  text-transform: uppercase;
}


/* ======================================================
   ЗАГ. ЗАГОЛОВОК СЕКЦІЇ · Roboto SemiBold 36/48 #1e1e1e
   (спільний для «переваги» / «категорії»; геометрія = garage-title)
   ====================================================== */
.section-title {
  margin: 0;
  font-size: 36px;
  line-height: 48px;
  font-weight: 600;
  color: #1e1e1e;
}


/* ======================================================
   ПЕРЕВАГИ · @1920 заголовок y2516 → 3 картки 410×410 y2624
   контейнер 1280. Зазор доставка→переваги = 96px (60 падинг доставки + 36 тут).
   ====================================================== */
.advantages {
  background: #ffffff;
  padding-block: 35px 0;
}
/* ряд карток: 3 × 410, зазор 25px (755−730) */
.advantage-row {
  margin-top: 60px;
  display: flex;
  gap: 25px;
}
/* картка-посилання: 410×410, radius16, фон-фото, текст поверх градієнта.
   ПОТІК: текст (h3+p) пригорнутий до низу картки через flex-column justify-end;
   фото full-bleed absolute (поза потоком), градієнт = ::after. Падинг знизу 40 +
   зазори дають макет (h3 top276 -> ~134 від низу). Без magic top-координат тексту.
   z-index на h3/p ставить текст над ::after-затемненням (інакше градієнт поверх). */
.advantage-row a {
  position: relative;
  flex: 0 0 410px;
  width: 410px;
  height: 410px;
  border-radius: 16px;
  overflow: hidden;
  background: #e0e0e0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 40px 40px;
}
/* фото на всю площу (вже скадроване під 410×410 у webp), full-bleed поза потоком */
.advantage-row img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* темний градієнт знизу: 200px, прозорий → чорний (затемнення, легіт absolute) */
.advantage-row a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
}
/* заголовок картки: течe у потоці над текстом. Roboto Medium 24/36 білий. */
.advantage-row h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: #ffffff;
}
/* текст: течe під заголовком (зазор 14px). Roboto Regular 16/22 білий, макс. 330. */
.advantage-row p {
  position: relative;
  z-index: 1;
  max-width: 330px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: #ffffff;
}


/* ======================================================
   ПОПУЛЯРНІ КАТЕГОРІЇ · @1920 заголовок y3104 → 10 карток 240×280 (5×2)
   контейнер 1280. Зазор картки переваг(низ 3034)→заголовок(3104) = 70px.
   ====================================================== */
.categories {
  background: #ffffff;
  padding-block: 70px 70px;
}
/* сітка 5 колонок × 2 ряди; зазор-кол 20px (580−560), зазор-ряд 20px (3512−3492) */
.category-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
/* картка-посилання: 240×280, біла, рамка #e0e0e0, radius16.
   ПОТІК (по-донорськи): картинка -> підпис течуть колонкою, без absolute-координат.
   Падинги дають макетні відступи (top44 над картинкою, ~31 під підписом);
   підпис центрується у залишку через margin:auto на картинці.
   min-height 280 = макетна висота картки; grid вирівнює ряди (однакові клітини). */
.category-grid a {
  min-height: 280px;
  border-radius: 16px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 44px 29px 31px;
  text-align: center;
}
.category-grid a:hover { border-color: #c8c8c8; }
/* акцентна (перша): без рамки, з тінню */
.category-grid a.on {
  border-color: transparent;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
}
/* картинка 150×150, по центру; margin-bottom:auto опускає підпис у низ картки */
.category-grid img {
  display: block;
  margin: 0 auto auto;
  width: 150px;
  height: 150px;
  object-fit: contain;
}
/* назва: течe у нижній зоні картки (img з margin-bottom:auto опускає підпис вниз).
   1-рядкова назва центрується на ~43px від низу = макет; багаторядкова росте вгору
   (донор-потік). Roboto Medium 18/24 #1e1e1e. */
.category-grid span {
  display: block;
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: #1e1e1e;
  text-align: center;
}
/* акцентна назва: підкреслення (макет 19:589) */
.category-grid a.on span { text-decoration: underline; }


/* ======================================================
   БРЕНДИ-ПАРТНЕРИ · @1920 заголовок y3862 → 2 ряди лого (по 5)
   контейнер 1280. Зазор категорії-низ(3792)→заголовок(3862) = 70px.
   Кожне лого = клітина 256×150, лого по центру (contain).
   ====================================================== */
.partners {
  background: #ffffff;
  /* categories вже дає 70px нижнього падингу → зазор категорії→заголовок = 70 (макет) */
  padding-block: 0;
}
/* ряди лого: 5 у ряд, клітина 256 (256×5=1280, зазор-кол 0), h150.
   зазор заголовок-низ(3910)→ряд1(3970) = 60px; ряд1→ряд2 = 0 (стик). */
.partner-rows {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
}
.partner-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
/* клітина-лого = посилання, лого по центру (contain), розмір з html-атрибутів */
.partner-row a {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.partner-row img {
  max-width: 100%;
  object-fit: contain;
}


/* ======================================================
   СІТКА МАРОК АВТО · @1920 заголовок y4340 → сітка 7×6 карток 170×150
   контейнер 1280. Зазор партнери-низ(4270)→заголовок(4340) = 70px.
   Картка: лого 60×60 зверху (top28), назва внизу. 7 кол × 6 рядів.
   ====================================================== */
.carbrands {
  background: #ffffff;
  padding-block: 70px 70px;
}
/* сітка: 7 колонок, картка 170 (185 крок → зазор-кол 15), зазор-ряд 15.
   зазор заголовок-низ(4388)→сітка(4448) = 60px. */
.carbrand-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
}
/* картка-посилання: 170×150, біла, radius12.
   ПОТІК (по-донорськи): лого -> назва течуть колонкою, без absolute-координат.
   padding-top28 над лого, gap19 до назви (макет: лого top28 h60 -> назва top107);
   min-height150 = макетна висота; grid вирівнює ряди. */
.carbrand-grid a {
  min-height: 150px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 25px 21px;
  gap: 19px;
  text-align: center;
}
/* акцентна (AUDI у макеті): тінь замість рамки */
.carbrand-grid a.on {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
/* лого: бокс 60×60 по центру горизонталі; лого contain усередині */
.carbrand-grid img {
  display: block;
  margin: 0 auto;
  width: 60px;
  height: 60px;
  object-fit: contain;
}
/* назва: течe під лого, по центру. Roboto Regular 16/22 #1e1e1e. */
.carbrand-grid span {
  display: block;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: #1e1e1e;
  text-align: center;
}
/* акцентна назва: підкреслення (макет AUDI) */
.carbrand-grid a.on span { text-decoration: underline; }


/* ======================================================
   ІНФО-БЛОК (SEO-текст) · @1920 y5493 h600 · bg #f6f6f6 full-bleed
   НЕ CTA-банер: у Figma це текст-стаття (заголовок + абзаци + списки).
   Зовн. смуга full-bleed #f6f6f6; контент у 1280 (x320).
   Зазор марки-низ(5423)→блок(5493) = 70px = нижній падинг carbrands.
   Заголовок y66 (рел. блока), текст y174 → зазор заголовок→текст 60px.
   ====================================================== */
.seo {
  background: #f6f6f6;
  min-height: 600px;          /* макет: блок фікс 600; текст ~y498, далі повітря до футера */
  padding-block: 66px 0;
  box-sizing: border-box;
}
/* заголовок: Roboto SemiBold 36/48 #1e1e1e */
.seo-title {
  margin: 0;
  font-size: 36px;
  line-height: 48px;
  font-weight: 600;
  color: #1e1e1e;
}
/* тіло статті: зазор від заголовка = 174−114 = 60px (66+48 заг → 174 текст) */
.seo-text {
  margin-top: 60px;
  color: #1e1e1e;
}
/* базовий абзац: Roboto Regular 16/22 */
.seo-text p {
  margin: 0;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}
/* підзаголовок-«лід» (Mercedes): Roboto Medium 24/36; пусті рядки макета = 22px зверху.
   Селектор .seo-text p.seo-lead — та сама специфічність-структура, що базовий .seo-text p,
   плюс клас → коректно перебиває базовий розмір (не оверрайд-костиль). */
.seo-text p.seo-lead {
  margin-top: 22px;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
}
/* проміжний підзаголовок: Roboto Medium 18/24 */
.seo-text p.seo-sub {
  margin-top: 22px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
/* списки: маркер/нумерація, відступ ~24px; зазор від попереднього блоку 22px */
.seo-text ul {
  margin: 14px 0 0;
  padding-left: 24px;
  list-style: disc;
}
.seo-text ol {
  margin: 14px 0 0;
  padding-left: 24px;
  list-style: decimal;
}
.seo-text li {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-top: 2px;
}


/* ======================================================
   ФУТЕР (общий блок, переиспользуется всеми страницами)
   ====================================================== */
.foot {
  background: #171717;
  /* head y60 (рел. футера) → верхній падинг 60; найглибша колонка = меню
     (низ ~295), макет-висота 360 → нижній падинг ≈ 65 */
  padding-block: 60px 65px;
}

/* ряд колонок: старти колонок з x-координат макета.
   cont0 / cont272 / cont527 / cont817 / cont1077.
   крок до наступної колонки = flex-basis колонки. */
.foot-cols {
  display: flex;
  align-items: flex-start;
}
.foot-col { flex: 0 0 auto; }
/* кроки стартів: 272 / 255 / 290 / 260 / решта */
.foot-contacts { flex-basis: 272px; }
.foot-graph { flex-basis: 255px; }
.foot-clients { flex-basis: 290px; }
.foot-pay-col { flex-basis: 260px; }
.foot-brand { flex: 1 1 auto; }

/* заголовок колонки: Roboto Medium 16/24 білий */
.foot-col h3 {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #ffffff;
}

/* ===== кол.1 — контакти ===== */
/* телефон: іконка-дзвінок 22 (C8) + текст 14/20 сірий; зазор head→phone1 = 21px */
.foot-phone {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 21px;
}
.foot-phone + .foot-phone { margin-top: 7px; }   /* крок 29px = 22 рядок + 7 */
.foot-phone .ic-call { background-color: #7e7e7e; }
.foot-phone span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #7e7e7e;
  white-space: nowrap;
}
/* адреса: зазор від phone2 = 170−134−20 = 16px; 14/22 сірий */
.foot-addr {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #7e7e7e;
}

/* ===== кол.2 — графік (та спільний рядок-текст) ===== */
/* рядок: 14/20 сірий; зазор head→line1 = 104−84 = 20px; крок 28 */
.foot-graph p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #7e7e7e;
}
/* зазор заголовок→перший рядок 20px: bottom-margin заголовка колонки (collapse з 8px рядка → 20).
   Глибина 2 (контейнер→заголовок), без позиційних псевдо/глибоких ланцюгів. */
.foot-graph h3 { margin-bottom: 20px; }

/* ===== кол.3 — клієнтам (меню) ===== */
/* список ссилок: 14/28 сірий; зазор head→menu = 99−84 = 15px */
.foot-menu {
  margin-top: 15px;
}
.foot-menu a {
  display: block;
  font-size: 14px;
  line-height: 28px;
  font-weight: 400;
  color: #7e7e7e;
}
.foot-menu a:hover { color: #ffffff; }

/* ===== кол.4 — оплата + соцмережі ===== */
/* лого оплат: 2 ряди (макет: visa+mc на y104, gpay+apple на y142).
   зазор head→ряд1 = 104−84 = 20px; крок рядів 38 → row-gap 18 (38−20).
   ряд1: visa(x1137)→mc(x1225) крок 88 → gap 88−68 = 20.
   ряд2: gpay(x1137)→apple(x1209) крок 72 → gap 72−52 = 20.
   (однаковий gap 20 в обох рядах; ширина лого різна → старти співпадають) */
.foot-pay {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 18px;
}
.foot-pay-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.foot-pay img {
  height: 20px;
  width: auto;
  object-fit: contain;
}
/* «Соцмережі»: y185 → зазор від ряд2 оплат(142+20=162) = 185−162 = 23px */
.foot-pay-col h3.soc { margin-top: 23px; }
/* соц-іконки (НЕ social): ряд C8-хуків, крок центрів 30 → gap 8.
   y239 → зазор head-соц(209)→іконки = 30px */
.foot-soc {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===== кол.5 — лого + копірайт ===== */
/* лого 170×80 (контент-картинка) */
.foot-logo {
  display: block;
  width: 170px;
  height: 80px;
}
.foot-logo img {
  width: 170px;
  height: 80px;
  object-fit: contain;
}
/* копірайт: y168 → зазор від лого(140) = 28px; 14/20 сірий */
.foot-copy {
  margin: 28px 0 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #7e7e7e;
}

/* ADAPTIVE <1920 — donor ladder 1280/1000/761/610/540/470/350 */
[data-mobile-only] { display: none; }

@media (max-width: 1280px) {
  .container { width: 100%; padding-inline: 20px; }
  .topbar  { height: auto; min-height: 40px; }
  .mainbar { height: auto; min-height: 140px; }
  .topbar-row  { height: auto; flex-wrap: wrap; gap: 6px 14px; padding-block: 8px; }
  .mainbar-row { height: auto; flex-wrap: wrap; gap: 14px 20px; padding-block: 16px; }
  .info { flex-wrap: wrap; }
  .search { flex: 1 1 320px; min-width: 0; max-width: 100%; }
  .search .art   { flex: 1 1 120px; min-width: 0; }
  .search .plate { flex: 0 1 144px; min-width: 0; }
  .search input  { min-width: 0; }
  .cart { margin-left: auto; }
  .menu li { min-width: 0; }
  .menu a { padding-inline: 4px; }
  .carbrand-grid { grid-template-columns: repeat(6, 1fr); }

  /* десктоп фікс-ширини рядів роблю гумовими, щоб влізли у контейнер з падингом (нема hScroll) */
  .garage-modes { flex-wrap: wrap; gap: 14px; }
  .mode { flex: 1 1 calc(50% - 7px); min-width: 0; }
  .mode-pick { flex-basis: 100%; }
  .garage-panel { flex-wrap: wrap; }
  .gtab { flex: 1 1 0; }
  .advantage-row a { flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1 / 1; padding: 0 36px 36px; }
  .advantage-row p { max-width: none; }
  .delivery-img { flex-basis: 480px; width: 480px; height: 480px; }

  /* футер: дозволяю перенос колонок, щоб фікс-basis (272..) не виходили за вужчий контейнер */
  .foot-cols { flex-wrap: wrap; gap: 36px 48px; }
  .foot-brand { flex: 1 1 200px; }
}

@media (max-width: 1000px) {
  .info, .msg { display: none; }
  .navbar { display: none; height: auto; }
  .msearch { display: block; background: #171717; }
  .msearch-row { display: flex; align-items: center; gap: 12px; height: 64px; }
  .burger { flex: 0 0 auto; width: 44px; height: 44px; cursor: pointer; mask-size: 26px 26px; }
  .mfield { flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: stretch; background: #4b4b4b; border-radius: 8px; }
  .mfield input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; font-family: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif; font-size: 14px; color: #ffffff; padding: 0 8px 0 16px; }
  .mfield input::placeholder { color: #7e7e7e; opacity: 1; }
  .mfield button { flex: 0 0 auto; width: 44px; height: 44px; border: 0; background-color: #ffffff; mask-size: 22px 22px; }
  .mainbar { min-height: 64px; }
  .mainbar-row { gap: 12px; padding-block: 8px; min-height: 64px; justify-content: space-between; }
  .logo { width: 170px; height: 80px; }
  .logo img { width: 170px; height: 80px; }
  .vin, .search { display: none; }
  #menu_after { background: #171717; }
  .menu_top ul { list-style: none; margin: 0; padding: 0; }
  .menu_top a { display: block; padding: 12px 16px; color: #cfcfcf; font-size: 14px; line-height: 20px; border-bottom: 1px solid #282828; }
  .menu_top li.on a { color: #ff9800; }
  .navbar .menu { display: flex; flex-direction: column; width: 100%; height: auto; padding: 0; }
  .navbar .menu li { flex: none; height: auto; background: transparent; }
  .navbar .menu a { display: block; height: auto; text-align: left; padding: 13px 16px; font-size: 15px; line-height: 20px; border-bottom: 1px solid #282828; }
  .navbar li.on a { color: #ff9800; }
  .phones { display: none; flex-direction: column; gap: 8px; flex: 1 0 100%; order: 2; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid #282828; }
  .topbar .msg { gap: 14px; flex: 1 0 100%; order: 2; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px solid #282828; }
  .open_menu .navbar { display: block; }
  .open_menu #menu_after { display: block; }
  .open_menu .phones { display: flex; }
  .open_menu .msg { display: flex; }
  .open_menu .mainbar-row { flex-wrap: wrap; }
  .open_menu .topbar-row { flex-wrap: wrap; }
  .hero { height: auto; min-height: 480px; }
  .hero-inner { height: auto; padding-block: 64px; }
  .hero-title { padding-top: 0; font-size: 44px; line-height: 54px; }
  .hero-sub { font-size: 20px; line-height: 30px; }
  .hero-cta { margin-top: 40px; }
  .hero-dots { margin-top: 48px; }
  .garage { padding-block: 48px 56px; }
  .garage-title { font-size: 30px; line-height: 40px; }
  .garage-modes { flex-wrap: wrap; }
  .mode { flex: 1 1 calc(50% - 8px); }
  .garage-panel { flex-wrap: wrap; }
  .gtab { flex: 1 1 calc(33.333% - 1px); }
  .garage-brands { grid-template-columns: repeat(4, 1fr); }
  .promo { padding-block: 48px; }
  .promo-bar { height: auto; padding: 24px 28px; gap: 24px; }
  .promo-text { font-size: 22px; line-height: 30px; }
  .delivery { padding-block: 40px 48px; }
  .delivery-row { gap: 32px; }
  .delivery-img { flex-basis: 420px; width: 420px; height: 420px; }
  .delivery-title { font-size: 40px; line-height: 50px; }
  .delivery-text { font-size: 20px; line-height: 30px; }
  .delivery-btn { margin-top: 40px; }
  .section-title { font-size: 30px; line-height: 40px; }
  .advantages { padding-block: 32px 0; }
  .advantage-row { margin-top: 48px; gap: 20px; }
  .advantage-row a { flex: 1 1 0; width: auto; height: auto; aspect-ratio: 1 / 1; padding: 0 28px 28px; }
  .advantage-row h3 { font-size: 20px; line-height: 28px; }
  .advantage-row p { max-width: none; font-size: 14px; line-height: 20px; }
  .categories { padding-block: 56px 56px; }
  .category-grid { margin-top: 48px; grid-template-columns: repeat(3, 1fr); }
  .partner-rows { margin-top: 48px; }
  .partner-row a { height: 120px; padding-inline: 12px; }
  .carbrands { padding-block: 56px 56px; }
  .carbrand-grid { margin-top: 48px; grid-template-columns: repeat(5, 1fr); }
  .seo { padding-block: 48px 48px; }
  .seo-title { font-size: 30px; line-height: 40px; }
  .seo-text { margin-top: 40px; }
  .seo-text p.seo-lead { font-size: 22px; line-height: 32px; }
  .foot { padding-block: 48px 56px; }
  .foot-cols { flex-wrap: wrap; gap: 36px 48px; }
  .foot-col, .foot-contacts, .foot-graph, .foot-clients, .foot-pay-col, .foot-brand { flex: 0 1 auto; flex-basis: auto; min-width: 200px; }
}

@media (max-width: 761px) {
  .container { padding-inline: 15px; }
  .hero { min-height: 420px; }
  .hero-inner { padding-block: 48px; }
  .hero-title { font-size: 34px; line-height: 42px; }
  .hero-sub { font-size: 18px; line-height: 26px; }
  .garage-title { font-size: 26px; line-height: 34px; }
  .garage-brands { grid-template-columns: repeat(2, 1fr); }
  .delivery-row { flex-direction: column; gap: 28px; align-items: center; }
  .delivery-img { flex: 0 0 auto; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
  .delivery-body { padding-top: 0; }
  .delivery-title { font-size: 32px; line-height: 40px; }
  .delivery-text { font-size: 18px; line-height: 26px; }
  .section-title { font-size: 26px; line-height: 34px; }
  .advantage-row { flex-wrap: wrap; gap: 16px; }
  .advantage-row a { flex: 1 1 calc(50% - 8px); }
  .advantage-row h3 { font-size: 19px; line-height: 26px; }
  .category-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .category-grid a { min-height: 240px; padding: 36px 20px 28px; }
  .category-grid img { width: 120px; height: 120px; }
  .category-grid span { font-size: 16px; line-height: 22px; }
  .partner-row { grid-template-columns: repeat(3, 1fr); }
  .partner-row a { height: 100px; padding-inline: 10px; }
  .carbrand-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .seo-title { font-size: 26px; line-height: 34px; }
  .seo-text p.seo-lead { font-size: 20px; line-height: 28px; }
  .foot-cols { flex-direction: column; gap: 32px; }
  .foot-col, .foot-contacts, .foot-graph, .foot-clients, .foot-pay-col, .foot-brand { flex: 0 0 auto; flex-basis: auto; width: 100%; }
}

@media (max-width: 610px) {
  .hero { min-height: 360px; }
  .hero-inner { padding-block: 40px; align-items: flex-start; }
  .hero-title { font-size: 30px; line-height: 38px; }
  .hero-sub { font-size: 16px; line-height: 24px; margin-top: 16px; }
  .hero-cta { margin-top: 28px; }
  .hero-dots { margin-top: 32px; }
  .garage { padding-block: 36px 44px; }
  .garage-title { font-size: 24px; line-height: 32px; }
  .garage-modes { margin-top: 28px; gap: 12px; }
  .mode { flex: 1 1 calc(50% - 6px); }
  .garage-panel { flex-direction: column; }
  .gtab { flex: 0 0 56px; height: 56px; width: 100%; }
  .promo { padding-block: 36px; }
  .promo-bar { flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; border-radius: 12px; }
  .promo-text { font-size: 20px; line-height: 28px; }
  .promo-btn { width: 100%; }
  .section-title { font-size: 24px; line-height: 32px; }
  .delivery-title { font-size: 28px; line-height: 36px; }
}

@media (max-width: 540px) {
  .advantage-row a { flex: 1 1 100%; }
  .advantage-row h3 { font-size: 22px; line-height: 30px; }
  .advantage-row p { font-size: 15px; line-height: 21px; }
  .carbrand-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 470px) {
  .cart span { display: none; }
  .cart b { margin-left: 0; }
  .hero-title { font-size: 26px; line-height: 32px; }
  .hero-sub br { display: none; }
  .mode { flex: 1 1 100%; }
  .mode-pick { order: 4; }
  .delivery-title { font-size: 24px; line-height: 32px; }
  .category-grid { grid-template-columns: repeat(1, 1fr); }
  .partner-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 350px) {
  .hero-title { font-size: 22px; line-height: 28px; }
  .garage-brands { grid-template-columns: repeat(1, 1fr); }
  .carbrand-grid { grid-template-columns: repeat(1, 1fr); }
  .partner-row { grid-template-columns: repeat(1, 1fr); }
}