/* VETRO token body bg — контент-фон/текст от активной темы */
body{ background-color:var(--bg); color:var(--fg); }

/* VETRO btn tokens — кнопки берут форму/кейс из активной темы (различие тем) */
.btn{ border-radius:var(--btn-radius); text-transform:var(--btn-transform); letter-spacing:var(--btn-tracking); font-weight:var(--btn-weight); }

/* VETRO hero overlay — родной .hero--overlay-layer заливает фоном ТЕМЫ (на светлой = осветляет).
   Здесь переопределяем на затемнение; силу можно менять токеном --hero-overlay-alpha. */
.hero--overlay-layer::after{ background-color: rgba(0,0,0, var(--hero-overlay-alpha, .55)); }

/* VETRO map embed — .google-maps держит пропорцию через padding-bottom при height:0,
   поэтому вставленный Яндекс-конструктор позиционируем абсолютно, чтобы он заполнил блок. */
.google-maps{ position:relative; }
.google-maps iframe,.google-maps ymaps{ position:absolute; top:0; left:0; width:100% !important; height:100% !important; border:0; }
.google-maps.height-auto\@md iframe{ min-height:320px; }

/* VETRO hero-video overlay — слой видео у .hero-video-bg лежит на z-index:1,
   поднимаем затемнение над ним, контент блока и так на z-index:2. */
.hero-video-bg.hero--overlay-layer::after{ z-index:1; }

/* VETRO sticky-hero overlay — родной слой кита заливается цветом фона темы (на светлой осветляет)
   и включается только при прокрутке. Перекрашиваем в тёмный и даём базовое затемнение сразу,
   сохраняя усиление на скролле, как задумано в компоненте. */
.sticky-hero--overlay-layer .sticky-hero__media::after{
  background-color:#000;
  opacity: var(--hero-overlay-alpha, .55);
}
.sticky-hero--media-is-fixed.sticky-hero--overlay-layer .sticky-hero__media::after{
  opacity: calc(var(--hero-overlay-alpha, .55) + .1);
}

/* VETRO looping-slideshow-v2 — кит объявляет иконку кнопки как --size: inherit,
   то есть размер должен прийти с самой кнопки. Но переменную на кнопке кит нигде не задаёт,
   и иконка схлопывается в 1em (~15px) при кнопке 48px. Задаём размер явно. */
.loop-slideshow-v2__control{ --size: 48px; }

/* VETRO slide dim — слайд затемняется ТОЛЬКО когда на нём есть контент из components,
   иначе картинка показывается как есть. Слой кладём под контент (у контента z-index 1). */
.vetro-slide-dim::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background-color: rgba(0,0,0, var(--slide-overlay-alpha, .45));
  pointer-events:none; z-index:1;   /* над медиа-элементом (figure/video/img), но под контентом */
}

/* VETRO slideshow: режим «на весь экран». Высота слайда в ките берётся из --slideshow-height,
   поэтому переопределяем именно её, а не height у элемента. */
.vetro-slideshow-full{ --slideshow-height: 100vh; }

/* VETRO slideshow: видеофон слайда. Лежит под затемнением (z-index 1) и контентом (2). */
.vetro-slide-video{ position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:0; margin:0; }
.vetro-slide-video video{ display:block; width:100%; height:100%; object-fit:cover; }

/* VETRO: TT Wellingtons — лицензионный шрифт клиента, файлы в site/templates/fonts */
@font-face{
  font-family:'TT-Wellingtons';
  src:url('../fonts/TTWellingtons-Light.otf') format('opentype');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT-Wellingtons';
  src:url('../fonts/TTWellingtons-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT-Wellingtons';
  src:url('../fonts/TTWellingtons-Medium.otf') format('opentype');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT-Wellingtons';
  src:url('../fonts/TTWellingtons-DemiBold.otf') format('opentype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT-Wellingtons';
  src:url('../fonts/TTWellingtons-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'TT-Wellingtons';
  src:url('../fonts/TTWellingtons-Black.otf') format('opentype');
  font-weight:900; font-style:normal; font-display:swap;
}

/* TT Wellingtons по умолчанию рисует старостильные цифры (разной высоты).
   На оригинале цифры обычные, поэтому включаем lining figures. */
body{ font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "onum" 0; }

/* Кит ставит --heading-font-weight:300 прямо на h1..h4, и это перебивает токен темы из :root.
   Возвращаем управление теме. Заодно применяем регистр заголовков из темы. */
h1,h2,h3,h4{ --heading-font-weight: var(--heading-weight, 700); }
.text-component h1,.text-component h2,.text-component h3{ text-transform: var(--display-transform, none); }

/* СЛОЙ ДВИЖЕНИЯ — скорость и плавность появления берутся из темы,
   поэтому характер анимации меняется вместе с арт-направлением. */
:root{
  --reveal-fx-duration: var(--dur-slow, 700ms);
  --reveal-fx-timing-function: var(--ease, cubic-bezier(.16,1,.3,1));
}
/* каскад: карточки и слайды внутри появившейся секции выезжают по очереди */
.reveal-fx .grid > *,
.reveal-fx .carousel__item,
.reveal-fx .hiw-list__item{
  opacity:0; transform: translateY(var(--reveal-y, 16px));
  transition: opacity var(--dur-base,300ms) var(--ease), transform var(--dur-base,300ms) var(--ease);
}
.reveal-fx--is-visible .grid > *,
.reveal-fx--is-visible .carousel__item,
.reveal-fx--is-visible .hiw-list__item{ opacity:1; transform:none; }
.reveal-fx--is-visible .grid > *:nth-child(1){ transition-delay: 0ms; }
.reveal-fx--is-visible .grid > *:nth-child(2){ transition-delay: 70ms; }
.reveal-fx--is-visible .grid > *:nth-child(3){ transition-delay: 140ms; }
.reveal-fx--is-visible .grid > *:nth-child(4){ transition-delay: 210ms; }
.reveal-fx--is-visible .grid > *:nth-child(n+5){ transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce){
  .reveal-fx, .reveal-fx .grid > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ПОДГОНКА ПОД ЭТАЛОН (haval) — значения сняты замером с aaamotors-haval.ru.
   Держим отдельным блоком, чтобы правки конкретного сайта не смешивались с библиотекой. */
body{ letter-spacing: var(--body-tracking, 0.2px); }
h1,h2,h3,h4{ letter-spacing: var(--display-tracking, -0.4px); }
/* кнопка у них — прозрачная с тонкой обводкой, без скругления */
.btn--primary{
  background-color: transparent;
  border: 1px solid currentColor;
  color: inherit;
}
[data-theme="dark"] .btn--primary{ color:#fff; border-color:#fff; }

/* ШКАЛА ЭТАЛОНА — размеры берём ИЗ ТОКЕНОВ темы, а не пишем числами,
   поэтому другая тема даст другую шкалу без правки этого файла. */
.text-component h2{ font-size:var(--h2); line-height:var(--heading-lh,1.12); font-weight:var(--heading-weight); text-transform:var(--display-transform); letter-spacing:var(--display-tracking); }
.text-component h3{ font-size:var(--h3); font-weight:var(--display-weight); text-transform:var(--display-transform); }
.slideshow__item h1,.slideshow__item h2,.hero h1,.hero h2{ font-size:var(--h1); line-height:var(--display-lh); font-weight:var(--display-weight); letter-spacing:var(--display-tracking); }
.vetro-card h4,.card-v2 h4,.carousel__item h4{ font-size:var(--h3); line-height:1.1; font-weight:var(--display-weight); text-transform:var(--display-transform); letter-spacing:-0.2px; }
body,p{ font-size:var(--body-size); line-height:var(--body-lh); font-weight:var(--body-weight); }

/* ГЕОМЕТРИЯ ЭТАЛОНА: боковое поле страницы 64px (замер), цвет текста ровно #121314.
   Цвет задаём и через контрастный токен кита, иначе он пересчитывает его со сдвигом. */
:root{ --color-contrast-higher: #121314; --color-contrast-high: #121314; }
/* .container кита считает ширину от --component-padding, поэтому задаём переменную,
   а не дописываем padding — иначе отступ складывается и получается двойной. */
:root, *{ --component-padding: 64px; }   /* кит объявляет её на «:root, *», поэтому перекрываем так же */
@media (max-width: 768px){ :root, *{ --component-padding: 16px; } }
/* заголовки разделов у них с трекингом -0.4, а не -0.8 как у героя */
.text-component h2{ letter-spacing:-0.4px; }

/* ШАПКА ЭТАЛОНА: телефон у них 16px весом 600, меню — 16px обычным. */
.header__link{ font-size:var(--body-size); line-height:21.33px; }
.header__item a[href^="tel:"]{ font-weight:600; }

/* ДОВОДКА ПО ЗАМЕРУ ЭТАЛОНА */
/* трекинг героя отдельный от разделов: у них -0.8 против -0.4 */
.slideshow__item h1,.slideshow__item h2,.hero h1,.hero h2{ letter-spacing:var(--display-tracking,-0.8px); }
/* текст поверх фото у них чисто белый, а не приглушённый контрастный токен */
.slideshow__item,.slideshow__item h1,.slideshow__item h2,.slideshow__item p,
.hero--overlay-layer,.hero--overlay-layer h1,.hero--overlay-layer h2,.hero--overlay-layer p{ color:#fff; }
/* надзаголовок слайда у них капсом */
.slideshow__item .text-component p,.hero--overlay-layer .text-component p{ text-transform:var(--slide-sub-transform,uppercase); }
/* мелкая кнопка героя: у них 11px, кит даёт 12.8 */
.slideshow__item .btn,.hero--overlay-layer .btn{
  /* размер задаём ОТБИВКАМИ КИТА, а не min-width/min-height:
     у него для этого есть свои переменные, и кнопка тогда живёт по содержимому */
  --btn-padding-x: var(--space-sm);
  --btn-padding-y: var(--space-xxs);
  font-size:var(--slide-btn-size,11px); line-height:1; letter-spacing:.2px; text-transform:uppercase;
}

/* кнопки у них набраны заголовочной гарнитурой, а не текстовой */
.btn{ font-family:var(--btn-font, var(--font-display)); }

/* ГАРНИТУРА HAVAL — заголовки и названия моделей (Light/Regular/Medium + наклонный) */
@font-face{font-family:'Haval';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/Haval-Light.woff2') format('woff2'),url('../fonts/Haval-Light.woff') format('woff');}
@font-face{font-family:'Haval';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/Haval-Regular.woff2') format('woff2'),url('../fonts/Haval-Regular.woff') format('woff');}
@font-face{font-family:'Haval';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/Haval-Medium.woff2') format('woff2'),url('../fonts/Haval-Medium.woff') format('woff');}
@font-face{font-family:'Haval';font-weight:500;font-style:italic;font-display:swap;src:url('../fonts/Haval-MediumSlanted.woff2') format('woff2'),url('../fonts/Haval-MediumSlanted.woff') format('woff');}
@font-face{font-family:'Haval';font-weight:600 900;font-style:normal;font-display:swap;src:url('../fonts/Haval-Medium.woff2') format('woff2'),url('../fonts/Haval-Medium.woff') format('woff');}

/* ПОВЕДЕНИЕ КНОПОК ПРИ НАВЕДЕНИИ
   Кит на :hover переписывает кнопку целиком — скругляет в таблетку, заливает тёмным,
   возвращает текстовую гарнитуру и снимает капс. Гасим это и повторяем эталон:
   рамка подсвечивается фирменным бирюзовым СЛЕВА НАПРАВО, сама кнопка гаснет до 0.8.
   У них это нарисовано двумя svg-прямоугольниками со шторкой; здесь то же самое,
   но без svg и без js — одной псевдорамкой с обрезкой. */
.btn{ position:relative; }
.btn::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:var(--btn-border-w,1px) solid var(--btn-hover-color, var(--color-btn-hover, #00cabf));
  border-radius:inherit;
  clip-path:inset(0 100% 0 0);
  transition:clip-path var(--btn-hover-dur,.3s) var(--ease-out, ease);
}
.btn:hover::before{ clip-path:inset(0 0 0 0); }

/* всё, что кит меняет на hover, возвращаем к исходному состоянию кнопки */
.btn:hover,.btn--primary:hover,.btn--secondary:hover,.btn--subtle:hover,.btn--accent:hover{
  background:inherit; background-color:transparent;
  color:inherit;
  border-color:currentColor;
  border-radius:var(--btn-radius);
  font-family:var(--btn-font, var(--font-display));
  font-weight:var(--btn-weight);
  text-transform:var(--btn-transform);
  opacity:var(--btn-hover-opacity,.8);
  transition:opacity var(--btn-hover-dur,.3s) var(--ease-out, ease);
}
/* у эталона кнопка не «проваливается» при нажатии */
.btn:active{ transform:none; }
/* рамку от кита не подсвечиваем тенью на мышь — только на клавиатуру, для доступности */
.btn:focus{ box-shadow:none; }
.btn:focus-visible{ outline:2px solid var(--btn-hover-color,#00cabf); outline-offset:2px; }

/* НАДСТРОЧНАЯ СТРОКА В ЗАГОЛОВКЕ (у эталона «Обновленный» над «HAVAL F7») */
.heading-eyebrow{
  display:block;
  font-size:var(--heading-eyebrow-size,16px);
  line-height:var(--heading-eyebrow-lh,20px);
  font-weight:var(--heading-eyebrow-weight,500);
  letter-spacing:0;
}

/* ПРИВЯЗКА ТЕКСТА ГЕРОЯ ПО ВЕРТИКАЛИ.
   Кит центрирует, у эталона блок стоит в верхней трети. Правим токеном, не жёстко. */
.slideshow__item > .position-absolute,.hero--overlay-layer .container{
  align-items:var(--hero-anchor, center);
}
.slideshow__item > .position-absolute{
  padding-top:var(--hero-anchor-offset, 0);
}

/* ЗНАЧЕНИЯ ЭТАЛОНА для этого сайта — одним местом, чтобы правились здесь, а не по файлу */
:root{
  --heading-eyebrow-size:16px; --heading-eyebrow-lh:20px; --heading-eyebrow-weight:500;
  /* блок героя у них не по центру, а в верхней трети: текст начинается на 247px из 900 */
  --hero-anchor:flex-start; --hero-anchor-offset:20vh;
  /* отбивка над кнопкой героя: у них 75px от подзаголовка, кит даёт 40 */
  --hero-cta-gap:36px;
}
.slideshow__item .flex.flex-wrap.items-center{ margin-top:var(--hero-cta-gap,0); }

/* МОБИЛЬНАЯ АРТ-ДИРЕКЦИЯ ГЕРОЯ.
   У эталона на узком экране слайд перестраивается: фото уходит вверх,
   текст прижимается к низу на тёмной подложке, шкала мельче.
   Меняем ТОЛЬКО значения токенов — правила выше остаются те же. */
@media (max-width: 64rem){
  :root{
    --hero-anchor:flex-end;          /* текст вниз, а не в верхнюю треть */
    --hero-anchor-offset:0;
    --hero-cta-gap:24px;
    --heading-eyebrow-size:14px; --heading-eyebrow-lh:18px;
    --slide-btn-w:100%;              /* кнопка во всю ширину, как у них */
    --component-padding:24px;        /* боковое поле на мобильной у них 24px */
  }
  .slideshow__item h1,.slideshow__item h2,.hero h1,.hero h2{
    font-size:var(--h1-mobile,24px); line-height:var(--h1-mobile-lh,26px);
  }
  /* подложка под текстом: у них низ слайда — сплошной тёмный, а не фото */
  .slideshow__item{ background-position:top center; }
  .slideshow__item > .position-absolute{ padding-bottom:40px; }
  .vetro-slide-dim::before{
    background:linear-gradient(to bottom,
      rgba(0,0,0,var(--slide-overlay-alpha,.25)) 0%,
      rgba(0,0,0,var(--slide-overlay-alpha,.25)) 45%,
      var(--slide-base, #121314) 78%);
  }
}

/* ================= КАРТОЧКИ =================
   Две подачи, обе сняты замером с эталона.
   Все размеры — переменными, чтобы другая тема давала другую карточку. */
:root{
  /* тёмная карточка (сетка): фото 416x478, плашка снизу, всего 416x624 */
  --card-ratio: 13 / 16; --card-media-ratio: 416/478;
  --card-bg: #121314; --card-pad: 32px;
  --card-title-size: 20px; --card-title-lh: 24px;
  --card-text-size: 16px; --card-btn-h: 42px; --card-btn-size: 11px;
  /* светлая карточка (карусели): фото 416x278 (3:2), тело белое, всего 416x524 */
  --ncard-media-ratio: 3/2; --ncard-bg: #fff; --ncard-pad: 32px;
  --ncard-title-size: 16px; --ncard-title-lh: 20px;
  --ncard-meta-size: 14px;
}

/* --- тёмная карточка: фото сверху, текст на плашке снизу --- */
.vetro-card{
  position:relative; background:var(--card-bg); color:#fff;
  display:flex; flex-direction:column; height:100%;
  border-radius:var(--card-radius,0); overflow:hidden;
}
/* фото заполняет ВСЮ карточку, текст лежит ПОВЕРХ него —
   у эталона именно так: 416x624 фото и затемнение снизу, а не отдельная плашка */
.vetro-card{ aspect-ratio:var(--card-ratio); }
.vetro-card__media{ position:absolute; inset:0; }
.vetro-card__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vetro-card__body{
  position:relative; z-index:2; margin-top:auto;
  padding:var(--card-pad); display:flex; flex-direction:column; gap:var(--space-sm);
}
/* заголовок с подписью — одна группа, между ними отбивка мельче */
.vetro-card__head{ display:flex; flex-direction:column; gap:var(--space-xxs); }
/* затемнение снизу: плавно из прозрачного в тёмный, чтобы текст читался */
.vetro-card__body::before{
  content:''; position:absolute; left:0; right:0; bottom:0;
  top:calc(-1 * var(--card-scrim-fade, 120px)); z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--card-bg) 70%, transparent) 45%,
    var(--card-bg) 100%);
}
.vetro-card__label{
  font-size:var(--card-btn-size); font-weight:500; text-transform:uppercase;
  font-family:var(--font-display); color:rgba(255,255,255,.7); margin:0;
}
.vetro-card__title{
  font-size:var(--card-title-size); line-height:var(--card-title-lh); font-weight:500;
  text-transform:uppercase; font-family:var(--font-display); color:#fff; margin:0;
}
.vetro-card__text{
  font-size:var(--card-text-size); font-weight:450; font-family:var(--font-body);
  color:rgba(247,252,255,.8); margin:0;
}
/* кнопка во всю ширину плашки, стрелка прижата вправо — как у них */
.vetro-card__cta{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  min-height:var(--card-btn-h); padding:0 20px; border:1px solid #fff;
  font-family:var(--font-display); font-size:var(--card-btn-size);
  font-weight:400; text-transform:uppercase; letter-spacing:.2px; color:#fff;
  transition:opacity var(--btn-hover-dur,.3s) var(--ease-out,ease);
}
.vetro-card:hover .vetro-card__cta{ opacity:.8; }

/* --- светлая карточка каруселей: фото сверху, белое тело, ссылка со стрелкой --- */
.vetro-ncard{
  display:flex; flex-direction:column; height:100%;
  background:var(--ncard-bg); color:var(--color-contrast-higher,#121314);
  border-radius:var(--card-radius,0); overflow:hidden;
}
.vetro-ncard__media{ aspect-ratio:var(--ncard-media-ratio); overflow:hidden; }
.vetro-ncard__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.vetro-ncard__body{ padding:var(--ncard-pad); display:flex; flex-direction:column; gap:12px; flex:1; }
.vetro-ncard__title{
  font-size:var(--ncard-title-size); line-height:var(--ncard-title-lh); font-weight:500;
  text-transform:uppercase; font-family:var(--font-display); margin:0;
}
.vetro-ncard__meta{
  font-size:var(--ncard-meta-size); font-weight:450; font-family:var(--font-body);
  color:rgba(16,19,22,.6); margin:0;
}
.vetro-ncard__cta{
  margin-top:auto; display:inline-flex; align-items:center; gap:10px;
  font-size:var(--ncard-meta-size); font-weight:450; font-family:var(--font-body);
  transition:gap var(--btn-hover-dur,.3s) var(--ease-out,ease);
}
.vetro-ncard:hover .vetro-ncard__cta{ gap:16px; }   /* стрелка отъезжает — вместо смены цвета */

/* ================= ШАПКА (перенос с sigma.vetro.team) =================
   Структура та же: верхняя строка-утилиты, нижняя строка-меню, мегапанели,
   мобильная шторка с уровнями. Визуально подгоняется ниже под HAVAL. */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:50; padding-bottom:44px; pointer-events:none; transition:background .45s ease, box-shadow .45s ease, color .45s ease, padding .45s ease; color:var(--color-white); }

.modal{ z-index:400; }

.hdr__util, .hdr__bar, .hdr__logo, .hdr__mega, .hdr__drawer{ pointer-events:auto; }
.hdr__accent{ display:none; }

.hdr__util{ overflow:hidden; max-height:46px; background:var(--color-primary-darker); transition:max-height .45s ease, opacity .35s ease; }
.hdr__util-in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--space-md); height:42px; padding-top:3px; }
.hdr__util-in > :nth-child(1){ justify-self:start; }
.hdr__util-in > :nth-child(2){ justify-self:center; }
.hdr__util-in > :nth-child(3){ justify-self:end; }
.hdr__util-item{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--text-sm); font-weight:500; letter-spacing:.01em; color:var(--color-white); white-space:nowrap; transition:color .4s; }
.hdr__util-item svg{ width:15px; height:15px; opacity:.85; flex:none; }
.hdr__util-phone{ font-weight:700; color:var(--color-white); }
.hdr__util-phone:hover{ color:var(--color-accent-light); }
.hdr.is-solid .hdr__util{ max-height:0; opacity:0; }
@media(max-width:63.99rem){ .hdr__util-item:not(.hdr__util-badge){ display:none; } .hdr__util-in{ display:flex; justify-content:center; } .hdr__util-badge{ font-size:var(--text-xs); white-space:normal; text-align:center; line-height:1.25; } }
.hdr__bar{ position:relative; display:flex; align-items:center; gap:var(--space-lg); min-height:64px; --bar-pad-b:16px; padding:16px 0; padding-bottom:var(--bar-pad-b); }
.hdr__nav{ display:none; }
.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:var(--space-md); }
.hdr__phone{ display:none; font-weight:700; font-size:var(--text-sm); letter-spacing:.01em; white-space:nowrap; }
.hdr__cta{ display:inline-flex; align-items:center; color:var(--color-white); background:transparent; border:1px solid hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), .5); cursor:pointer; white-space:nowrap; transition:background .3s, color .3s, border-color .3s, transform .3s; }
.hdr__cta:hover{ background:var(--color-white); color:var(--color-primary); border-color:var(--color-white); transform:translateY(-1px); }

.hdr__call{ display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; flex:none; color:var(--color-white); background:transparent; border:1.5px solid hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), .5); cursor:pointer; transition:background .3s, color .3s, border-color .3s, transform .3s; }
.hdr__call svg{ width:21px; height:21px; }
.hdr__call:hover{ background:var(--color-white); color:var(--color-primary); border-color:var(--color-white); transform:translateY(-1px); }
.hdr.is-solid .hdr__call{ background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary); }
.hdr.is-solid .hdr__call:hover{ background:var(--color-primary-darker); border-color:var(--color-primary-darker); }
@media(max-width:63.99rem){ .hdr__cta{ display:none; } .hdr__call{ display:inline-flex; } }
.hdr__burger{ width:44px; height:44px; display:flex; flex-direction:column; justify-content:center; gap:5px; background:none; border:0; cursor:pointer; color:#fff; }
.hdr__burger span{ height:2px; background:#fff; border-radius:2px; transition:background .35s, transform .35s, opacity .35s; }
/* Явный цвет полосок бургера в обоих состояниях шапки — currentColor не разрешается на старых Safari (иконка сливалась с фоном). */
.hdr.is-solid .hdr__burger span{ background:var(--color-primary); }

@media(max-width:63.99rem){
  .hdr__burger{ order:-2; margin-right:auto; }
  .hdr__right{ margin-left:0; gap:var(--space-sm); }
  .hdr__bar{ gap:var(--space-sm); }
}

.hdr__logo{ position:absolute; left:68%; bottom:44px; transform:translate(-50%,50%); z-index:4; display:grid; place-items:center; }
.hdr__logoimg{ grid-area:1/1; height:54px; width:auto; display:block; filter:brightness(0) invert(1); opacity:0; transform:translateY(4px) scale(.96); transition:filter .4s, opacity .55s ease, transform .6s cubic-bezier(.16,.7,.2,1); }
.hdr__logoimg.is-shown{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .hdr__logoimg{ transition:filter .4s, opacity .35s ease; transform:none; } .hdr__logoimg.is-shown{ transform:none; } }
@media(min-width:64rem){ .hdr__logoimg{ height:64px; } }

.hdr__rule{ position:absolute; left:0; right:0; bottom:44px; display:flex; align-items:center; z-index:2; }
.hdr__rule span{ height:1px; background:var(--color-white); transition:background .4s; }
.hdr__rule span:first-child{ flex:0 0 calc(68% - 45px); }
.hdr__rule span:last-child{ flex:1; }
.hdr__rule i{ flex:0 0 90px; }

@media(max-width:63.99rem){
  .hdr__logo{ left:50%; }
  .hdr__rule span:first-child{ flex:0 0 calc(50% - 42px); }
  .hdr__rule i{ flex:0 0 84px; }
}
.hdr__nav a{ position:relative; display:inline-flex; align-items:center; height:100%; padding:0; font-weight:600; font-size:var(--text-base-size); opacity:.9; transition:opacity .3s; }
.hdr__nav a.hdr__brandmark{ padding:0; }
.hdr__nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:calc(-1 * var(--bar-pad-b)); height:2px; background:var(--color-accent); transition:right .35s cubic-bezier(.16,.7,.2,1); }
.hdr__nav a:hover{ opacity:1; }
.hdr__nav a:hover::after{ right:0; }
@media(min-width:64rem){
  .hdr__nav{ display:flex; gap:var(--space-lg); align-items:center; align-self:stretch; }
  .hdr__phone{ display:block; }
  .hdr__burger{ display:none; }
}

.hdr__brandmark{ position:relative; flex:none; width:96px; height:30px; padding:0!important; margin-right:.5rem; }
.hdr__brandmark::after{ display:none!important; }
.hdr__brandmark img{ position:absolute; left:0; top:50%; transform:translateY(-50%); height:26px; width:auto; transition:opacity .4s; }
.hdr__brandmark-d{ opacity:0; }
.hdr.is-solid .hdr__brandmark-w{ opacity:0; }
.hdr.is-solid .hdr__brandmark-d{ opacity:1; }

.hdr.is-solid{ background:hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), .8); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); color:var(--color-primary); }
.hdr.is-solid .hdr__bar{ min-height:56px; padding:14px 0; --bar-pad-b:14px; }
.hdr.is-solid .hdr__accent{ background:var(--color-primary); }
.hdr.is-solid .hdr__rule span{ background:var(--color-primary); }
.hdr.is-solid .hdr__nav a::after{ background:var(--color-primary); }
.hdr.is-solid .hdr__logoimg{ filter:none; }
.hdr.is-solid .hdr__cta{ background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary); }
.hdr.is-solid .hdr__cta:hover{ background:var(--color-primary-darker); border-color:var(--color-primary-darker); }

.hdr__logo{ transition:opacity .4s ease, visibility .4s, transform .4s cubic-bezier(.16,.7,.2,1); }
.hdr__rule{ transition:opacity .4s ease; }
.hdr.is-compact{ padding-bottom:0; }
.hdr.is-compact .hdr__logo{ opacity:0; visibility:hidden; transform:translate(-50%,-14px); }
.hdr.is-compact .hdr__rule{ opacity:0; }

.hdr.is-mega{ background:var(--color-white); -webkit-backdrop-filter:none; backdrop-filter:none; color:var(--color-primary); box-shadow:none; }
.hdr.is-mega .hdr__rule span{ background:var(--color-primary); }
.hdr.is-mega .hdr__logoimg{ filter:none; }
.hdr.is-mega .hdr__brandmark-w{ opacity:0; }
.hdr.is-mega .hdr__brandmark-d{ opacity:1; }
.hdr.is-mega .hdr__cta{ background:var(--color-primary); color:var(--color-white); border-color:var(--color-primary); }
.hdr.is-mega .hdr__nav a::after{ background:var(--color-primary); }
.hdr__nav a[data-mega]{ position:relative; }
.hdr__nav a[data-mega].is-open{ opacity:1; }
.hdr__nav a[data-mega].is-open::after{ right:0; }

.hdr__mega{ position:absolute; left:0; right:0; top:100%; z-index:40; background:var(--color-white); color:var(--color-contrast-higher); border-top:0; box-shadow:0 40px 60px -34px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .3); opacity:0; visibility:hidden; transform:translateY(-14px); transition:opacity .35s ease, transform .4s cubic-bezier(.16,.7,.2,1), visibility .35s; max-height:78vh; overflow:auto; }
.hdr__mega.is-open{ opacity:1; visibility:visible; transform:none; }
.hdr__mega-in{ display:grid; grid-template-columns:1fr; gap:var(--space-lg); padding:var(--space-md) 0 var(--space-lg) 0; }
@media(min-width:64rem){ .hdr__mega-in{ grid-template-columns:1fr; gap:var(--space-xxl); } }

.mega__rail{ display:flex; flex-direction:column; }
.mega__cat{ display:flex; align-items:center; gap:.6em; padding:.55em 0; font-size:var(--text-md); font-weight:600; color:var(--color-contrast-medium); cursor:pointer; border:0; background:none; text-align:left; transition:color .35s, padding-left .3s; }
.mega__cat::before{ content:""; width:0; height:2px; flex:none; background:var(--color-primary); transition:width .35s cubic-bezier(.16,.7,.2,1); }
.mega__cat:hover{ color:var(--color-contrast-higher); }
.mega__cat.is-active{ color:var(--color-primary); font-weight:700; }
.mega__cat.is-active::before{ width:1.6em; }
.mega__rail-sep{ height:1px; background:var(--color-contrast-lower); margin:var(--space-md) 0; }
.mega__link{ display:inline-flex; align-items:center; gap:.5em; font-size:var(--text-sm); font-weight:700; color:var(--color-primary); padding:.45em 0; }
.mega__link svg{ width:18px; height:18px; transition:transform .35s; }
.mega__link:hover svg{ transform:translateX(5px); }
.mega__dealer{ display:inline-flex; align-items:center; gap:.55em; font-size:var(--text-sm); font-weight:600; color:var(--color-contrast-medium); padding:.45em 0; transition:color .3s; }
.mega__dealer:hover{ color:var(--color-accent-darker); }
.mega__dealer svg{ width:18px; height:18px; color:var(--color-accent-darker); }

.mega__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-sm); }
@media(min-width:48rem){ .mega__grid{ grid-template-columns:repeat(3,1fr); gap:var(--space-md); } }
.mmodel{ position:relative; display:block; aspect-ratio:16/9; padding:var(--space-md); overflow:hidden; background:var(--color-contrast-lower); transition:box-shadow .45s, transform .45s; }
.mmodel:hover{ transform:translateY(-4px); }
.mmodel__shot{ position:absolute; inset:0; z-index:0; background: white; transition:transform .6s cubic-bezier(.16,.7,.2,1); }
.mmodel__name{ position:relative; z-index:2; font-size:var(--text-xl); font-weight:700; letter-spacing:-.02em; color:var(--color-white); }
.mmodel__description{ color: white;position: relative;font-weight: 700;z-index: 2; }
.mmodel__badge{ position:absolute; left:var(--space-md); bottom:var(--space-md); z-index:2; width:32px; height:32px; border-radius:50%; background:var(--color-white); color:var(--color-primary); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px -6px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .5); }
.mmodel__more{ position:absolute; right:var(--space-md); bottom:var(--space-md); z-index:2; color:var(--color-primary); opacity:0; transform:translateX(-6px); transition:opacity .35s, transform .35s; }
.mmodel:hover .mmodel__more{ opacity:1; transform:none; }

.hdr__mega--feature .hdr__mega-in{ grid-template-columns:1fr; }
@media(min-width:64rem){ .hdr__mega--feature .hdr__mega-in{ grid-template-columns:280px 1fr; } }
.mega__feature{ grid-template-columns:1fr; gap:var(--space-lg); align-items:start; display:none; opacity:0; transition:opacity .35s ease; }
.mega__feature.is-active{ display:grid; opacity:1; animation:megaFadeIn .35s ease both; }
@keyframes megaFadeIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
@media(min-width:64rem){ .mega__feature{ grid-template-columns:1.05fr .95fr; gap:var(--space-xl); } }
.mega__feature-title{ font-size:var(--text-xl); font-weight:700; color:var(--color-contrast-higher); margin-bottom:var(--space-xs); }
.mega__lead{ font-size:var(--text-md); font-weight:300; line-height:1.4; letter-spacing:-.01em; color:var(--color-contrast-higher); max-width:var(--max-width-xs); }
.mega__lead b{ font-weight:700; }
.mega__feature .mega__link{ margin-top:var(--space-md); font-size:var(--text-md); }
.mega__feature-img{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.mega__feature-img .shot{ position:absolute; inset:0; transition:transform .7s cubic-bezier(.16,.7,.2,1); }
.mega__feature-img:hover .shot{ transform:scale(1.05); }
.mega__cat[href]{ text-decoration:none; }

.hdr__drawer{ position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:300; visibility:hidden; }
.hdr__drawer.is-open{ visibility:visible; }
.hdr__drawer-scrim{ position:absolute; inset:0; background:hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), .55); opacity:0; transition:opacity .4s ease; }
.hdr__drawer.is-open .hdr__drawer-scrim{ opacity:1; }
.hdr__drawer-panel{ position:absolute; top:0; left:0; bottom:0; width:100%; height:100dvh; max-width:100vw; background:var(--color-white); transform:translateX(-100%); transition:transform .45s cubic-bezier(.16,.7,.2,1); display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
.hdr__drawer.is-open .hdr__drawer-panel{ transform:none; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:var(--space-md); border-bottom:1px solid var(--color-contrast-lower); }
.drawer__logo{ height:22px; width:auto; }
.drawer__close{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:none; border:0; color:var(--color-contrast-higher); cursor:pointer; }
.drawer__close svg{ width:22px; height:22px; }

.drawer__stage{ position:relative; flex:1; overflow:hidden; }
.drawer__level{ position:absolute; inset:0; overflow-y:auto; background:var(--color-white); -webkit-overflow-scrolling:touch; }
.drawer__level--sub{ transform:translateX(100%); visibility:hidden; transition:transform .42s cubic-bezier(.16,.7,.2,1), visibility .42s; box-shadow:-20px 0 40px -28px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .4); }
.drawer__level--sub.is-active{ transform:translateX(0); visibility:visible; }
.drawer__row{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.5em; padding:var(--space-md); font-family:var(--font-secondary); font-size:var(--text-md); font-weight:700; color:var(--color-contrast-higher); background:none; border:0; border-bottom:1px solid var(--color-contrast-lower); text-align:left; cursor:pointer; transition:background .25s; }
.drawer__row:hover, .drawer__row:active{ background:var(--color-contrast-lower); }
.drawer__row svg{ width:18px; height:18px; color:var(--color-primary); flex:none; }
.drawer__row--link{ text-decoration:none; }
.drawer__back{ position:sticky; top:0; z-index:2; width:100%; display:flex; align-items:center; gap:.6em; padding:var(--space-md); font-family:var(--font-secondary); font-size:var(--text-sm); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-white); background:var(--color-primary-darker); border:0; border-bottom:1px solid var(--color-contrast-lower); cursor:pointer; }
.drawer__back svg{ width:18px; height:18px; flex:none; }
.drawer__link{ display:block; padding:var(--space-md); font-size:var(--text-md); color:var(--color-contrast-high); border-bottom:1px solid var(--color-contrast-lower); transition:color .25s, background .25s; }
.drawer__link:hover{ color:var(--color-primary); background:var(--color-contrast-lower); }
.drawer__all{ display:flex; align-items:center; gap:.5em; padding:var(--space-md); font-weight:700; font-size:var(--text-sm); color:var(--color-primary); }
.drawer__all svg{ width:18px; height:18px; }
.drawer__cards{ display:grid; gap:var(--space-lg); padding:var(--space-md); }
.dcard{ position:relative; aspect-ratio:16/9; overflow:hidden; display:flex; padding:var(--space-sm); background:var(--color-contrast-lower); }
.dcard__shot{ position:absolute; inset:0; background:
    repeating-linear-gradient(135deg, hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .04) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--color-contrast-lower), var(--color-contrast-low)); }
.dcard__name{ position:relative; font-family:var(--font-secondary); font-weight:700; font-size:var(--text-sm); letter-spacing:-.01em; color:var(--color-white); }
.drawer__foot{ padding:var(--space-md); align-items: center; border-top:1px solid var(--color-contrast-lower); display:flex; flex-direction:column; gap:var(--space-sm); overflow:hidden; max-height:340px; transition:max-height .42s cubic-bezier(.16,.7,.2,1), opacity .3s ease, padding .42s cubic-bezier(.16,.7,.2,1), border-color .42s; }
.hdr__drawer.is-drilled .drawer__foot{ max-height:0; opacity:0; padding-top:0; padding-bottom:0; border-top-color:transparent; pointer-events:none; }
.drawer__phone{ font-family:var(--font-secondary); font-size:var(--text-lg); font-weight:700; color:var(--color-primary); }
.drawer__hours{ font-size:var(--text-sm); color:var(--color-contrast-medium); }
.drawer__social{ display:flex; gap:.5rem; margin-top:.3rem; }
.drawer__social a{ width:40px; height:40px; border:1px solid var(--color-contrast-low); color:var(--color-primary); font-size:var(--text-xs); font-weight:700; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:.3s; }
.drawer__social a:hover{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-white); }
@media(min-width:64rem){ .hdr__drawer{ display:none; } }

/* ================= ШАПКА HAVAL =================
   Перебиваем перенесённые стили sigma: там шапка тёмная и лежит ПОВЕРХ героя,
   у нас — светлая и СТОИТ НАД контентом. Всё на токенах темы. */
.hdr{
  /* relative, а НЕ static: мегапанели лежат absolute top:100% и без опоры уезжают вниз страницы */
  position:relative; z-index:50; padding-bottom:0; pointer-events:auto;
  background:var(--color-bg,#fff); color:var(--color-contrast-higher,#121314);
  box-shadow:none;
}
.hdr__accent,.hdr__logo,.hdr__rule,.hdr__brandmark,.hdr__cta,.hdr__call{ display:none !important; }

/* верхняя строка */
.hdr__util{ max-height:none; background:transparent; overflow:visible; }
.hdr__util-in{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); height:auto; padding:20px 0 16px; }
.hdr__util-left,.hdr__util-right{ display:flex; align-items:center; gap:var(--space-sm); }
.hdr__util-right{ gap:14px; }
.hdr__phone{
  font-family:var(--font-body); font-size:18px; font-weight:700; letter-spacing:.2px;
  color:inherit; white-space:nowrap;
}
.hdr__addr{
  display:inline-flex; align-items:center; gap:8px; margin-left:22px;
  font-size:var(--body-size,16px); font-weight:450; color:inherit; white-space:nowrap;
}
.hdr__addr svg{ flex:none; opacity:.85; }
.hdr__company{ font-size:var(--body-size,16px); font-weight:450; color:inherit; white-space:nowrap; }
.hdr__badge{
  display:inline-flex; align-items:center; height:20px; padding:0 8px;
  background:var(--color-badge); color:#fff;
  font-family:var(--font-display); font-size:10px; font-weight:500;
  text-transform:uppercase; letter-spacing:.4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.hdr__brand{ height:22px; width:auto; display:block; }
.hdr__brand--badge{ height:14px; }
.hdr__brand-sep{ width:1px; height:22px; background:currentColor; opacity:.25; display:block; }

/* нижняя строка */
.hdr__bar{ border-top:1px solid var(--color-contrast-lower,rgba(18,19,20,.12)); min-height:0; padding:0; }
.hdr__bar-in{ display:flex; align-items:center; gap:var(--space-md); min-height:64px; padding:0; }
.hdr__nav{ display:flex; align-items:center; gap:4px; }
/* кит подчёркивает все ссылки — в шапке подчёркивания нет */
.hdr a,.hdr__nav a,.hdr__util-link,.hdr__phone,.hdr__company{ text-decoration:none; }
.hdr__nav a{
  padding:10px 16px; border-radius:var(--nav-radius,4px);
  font-size:var(--body-size,16px); font-weight:450; color:inherit; white-space:nowrap;
  transition:background var(--btn-hover-dur,.25s) var(--ease-out,ease);
}
.hdr__nav a:hover,.hdr__nav a.is-active,.hdr__nav a[aria-expanded="true"]{
  background:var(--nav-active-bg,#f2f3f4);
}
.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:var(--space-md); }
.hdr__util-link{
  display:inline-flex; align-items:center; gap:10px;
  font-size:var(--body-size,16px); font-weight:450; color:inherit; white-space:nowrap;
  transition:opacity var(--btn-hover-dur,.25s) var(--ease-out,ease);
}
.hdr__util-link:hover{ opacity:.7; }
/* кит задаёт svg квадрат 20x20 и плющит рисунок — держим пропорцию из viewBox */
/* кит задаёт svg квадрат 20x20 и плющит рисунок; width:auto он не отдаёт,
   поэтому ширину считаем от пропорции viewBox 32:18 */
.hdr__util-link svg{ flex:none; height:16px; width:28px; }
/* кнопка обратного звонка в правом краю нижней строки */
/* кнопка обратного звонка: те же отбивки кита, своих размеров не задаём */
.hdr__right .btn{
  --btn-padding-x: var(--space-sm);
  --btn-padding-y: var(--space-xxs);
  margin-left:4px; white-space:nowrap;
}

/* мегапанели — светлые, под нижней строкой */
.hdr__mega{ background:var(--color-bg,#fff); color:var(--color-contrast-higher,#121314); border-top:1px solid var(--color-contrast-lower,rgba(18,19,20,.12)); }

/* МОБИЛЬНАЯ: бургер слева, логотипы справа, ниже строка с названием */
@media (max-width:63.99rem){
  .hdr__util-in{ flex-direction:column; align-items:stretch; gap:0; padding:0; }
  .hdr__util-left{ display:none; }
  .hdr__util-right{
    order:2; justify-content:flex-start; gap:10px;
    padding:14px 0; border-top:1px solid var(--color-contrast-lower,rgba(18,19,20,.12));
  }
  .hdr__bar{ border-top:0; order:1; }
  .hdr__bar-in{ min-height:56px; }
  .hdr__nav,.hdr__right{ display:none; }
  .hdr__burger{ order:-1; margin-right:auto; color:inherit; }
  .hdr__burger span{ background:currentColor; }
  /* логотипы уезжают в первую строку, к бургеру */
  .hdr__util{ display:contents; }
  /* длинная плашка распирала страницу вбок на 169px — держим в пределах экрана */
  .hdr__util-right{ flex-wrap:wrap; min-width:0; }
  .hdr__badge{ max-width:calc(100vw - var(--component-padding) * 2); }
  .hdr__drawer,.hdr__drawer-scrim{ max-width:100vw; }
}

/* мегапанель колонками — как на скринах эталона */
.hdr__mega-in{ padding-top:40px; padding-bottom:48px; }
.mega__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-lg); }
.mega__col-title{
  margin:0 0 var(--space-sm); font-family:var(--font-display);
  font-size:var(--h3,20px); font-weight:500; text-transform:uppercase; letter-spacing:-.2px;
}
.mega__col-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.mega__col-list a{
  font-size:var(--body-size,16px); font-weight:450; color:inherit; text-decoration:none;
  transition:opacity var(--btn-hover-dur,.25s) var(--ease-out,ease);
}
.mega__col-list a:hover{ opacity:.6; }

/* КАРТОЧКИ МОДЕЛЕЙ в мегапанели.
   У sigma шапка тёмная, поэтому текст карточек белый — на нашей светлой
   панели он был белым по белому: текст есть, но не виден. Красим от панели. */
.hdr__mega .mmodel{ color:inherit; }
.hdr__mega .mmodel__name{
  color:inherit; font-family:var(--font-display);
  font-size:var(--h3,20px); font-weight:500; text-transform:uppercase; letter-spacing:-.2px;
}
.hdr__mega .mmodel__description{
  color:var(--color-contrast-medium,rgba(18,19,20,.6));
  font-family:var(--font-body); font-size:var(--body-size,16px); font-weight:450; text-transform:none;
}
/* У sigma текст лежит ПОВЕРХ фото. У эталона иначе: фото сверху, подпись под ним.
   Поэтому вынимаем shot из-под текста и ставим в поток. */
.hdr__mega .mmodel{
  position:static; display:flex; flex-direction:column; gap:10px;
  padding:0; background:none; overflow:visible;
}
.hdr__mega .mmodel__shot{
  position:static; inset:auto; width:100%; height:auto; min-height:0;
  aspect-ratio:16/10; background-color:var(--color-contrast-lowest,#f5f6f7);
  background-size:contain; background-position:center bottom; background-repeat:no-repeat;
}
.hdr__mega .mmodel > div{ gap:4px; }
.hdr__mega .mega__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--space-md) var(--space-sm);
}