/* NFS catalog CSS bundle — catalog-bundle-20260710-filter-scope */

/* === css/design-tokens.css === */
/**
 * @file: design-tokens.css
 * @description: Единый файл дизайн-токенов NFS AUTO.
 * Подключается ПЕРВЫМ во всех шаблонах. Все CSS-файлы проекта
 * должны ссылаться на эти переменные вместо собственных :root.
 */

:root {
    /* === Бренд-цвета NFS AUTO (базовый синий #2253BC + яркий синий для акцентов/линий) === */
    --nfs-blue: #2253bc;
    --nfs-blue-hover: #1a4299;
    --nfs-blue-light: #3d6fd4;
    /* Тот же синий, но ярче — линии hover, второй стоп градиента */
    --nfs-blue-bright: #4f8cff;
    --nfs-purple: #7c3aed;
    --nfs-purple-hover: #6d28d9;
    --nfs-purple-light: #8b5cf6;
    --nfs-green: #10b981;
    --nfs-green-hover: #059669;
    --nfs-green-light: #22c55e;
    --nfs-orange: #f59e0b;
    --nfs-orange-hover: #d97706;
    /* Семантический красный (ошибки, опасные действия), не бренд-акцент */
    --nfs-red: #ef4444;
    --nfs-red-hover: #dc2626;
    /* Совместимость: раньше линия была «красной», теперь — яркий синий */
    --nfs-red-line: var(--nfs-blue-bright);
    --nfs-pink: #ec4899;
    --nfs-cyan: #06b6d4;
    --nfs-indigo: #6366f1;

    /* === Серая шкала === */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Единый фон полос и крупных блоков главной страницы (index) */
    --nfs-home-section-bg: #F2F5FC;

    /* === Синяя шкала (для фонов/градиентов) === */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;

    /* === Пурпурная шкала === */
    --purple-50: #faf5ff;
    --purple-100: #f3e8ff;

    /* === Зелёная шкала === */
    --green-50: #f0fdf4;
    --green-100: #dcfce7;

    /* === Красная шкала === */
    --red-50: #fef2f2;
    --red-100: #fee2e2;

    /* === Жёлтая/янтарная шкала === */
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;

    /* === Типографика === */
    --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.8125rem;   /* 13px */
    --text-base: 0.875rem;  /* 14px */
    --text-md: 1rem;        /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 2rem;       /* 32px */
    --text-4xl: 2.5rem;     /* 40px */
    --text-5xl: 3rem;       /* 48px */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* === Отступы (spacing) === */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* === Тени === */
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

    /* === Скругления === */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;

    /* === Переходы === */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    /* === Контейнер: верхняя граница как в каталоге (1536px), отступы 1rem как в catalog_new.css === */
    --container-max: 1536px;
    --container-padding: 1rem;

    /* === Подчёркивание текстовых кнопок: линия яркий синий, текст при hover — основной синий === */
    --nfs-text-hover-line-height: 3px;
    --nfs-text-hover-line-color: var(--nfs-blue-bright);
    --nfs-text-hover-text-color: var(--nfs-blue);
    --nfs-text-hover-text-color-strong: var(--nfs-blue-hover);
    --nfs-text-hover-line-duration: 0.22s;
    --nfs-text-hover-line-ease: ease;

    /* === Z-index === */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;
    --z-tooltip: 1300;

    /* === Градиенты (ключевые): базовый синий → яркий синий === */
    --gradient-brand: linear-gradient(135deg, var(--nfs-blue), var(--nfs-blue-bright));
    --gradient-brand-hover: linear-gradient(135deg, var(--nfs-blue-hover), var(--nfs-blue-light));
    --gradient-success: linear-gradient(135deg, var(--nfs-green), var(--nfs-green-light));
    --gradient-hero-bg: linear-gradient(135deg, var(--gray-50) 0%, var(--blue-50) 50%, var(--purple-50) 100%);
}

/* === Единый контейнер (та же сетка max-width, что .catalog-page-wrapper .container в каталоге) === */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: var(--container-max);
    }
}

/* === css/nfs-design-system.css === */
/**
 * NFS AUTO Design System v3 — Light Theme
 * Из ДНК логотипа: три полосы → три роли цвета
 * Хромовые градиенты + анимированные шиммеры + неоновые ховеры
 */

:root {
  /* === CORE PALETTE === */
  --nfs-white: #FFFFFF;
  --nfs-bg: #F0F3F8;
  --nfs-bg2: #E6EAF3;
  --nfs-surface: #FFFFFF;

  /* === BRAND: три полосы логотипа === */
  /* M-Синий — Primary (только для акцентов!) */
  --nfs-blue: #1A5FD9;
  --nfs-blue2: #2B6FE8;
  --nfs-blue3: #3B7FFF;
  --nfs-blue-dark: #1248B0;
  --nfs-blue-g: linear-gradient(150deg, #3B7FFF 0%, #1A5FD9 50%, #1248B0 100%);
  --nfs-blue-light: rgba(26, 95, 217, 0.08);
  --nfs-blue-glow: rgba(26, 95, 217, 0.22);

  /* NFS-Красный — Danger, внимание */
  --nfs-red: #C92222;
  --nfs-red-bright: #E03030;
  --nfs-red-dark: #A01818;
  --nfs-red-g: linear-gradient(150deg, #E03030 0%, #C92222 60%, #A01818 100%);
  --nfs-red-glow: rgba(201, 34, 34, 0.22);

  /* Зелёный — Success, электро */
  --nfs-green: #14A34A;
  --nfs-green-bright: #22C55E;
  --nfs-green-dark: #0A6A30;
  --nfs-green-light: rgba(20, 163, 74, 0.08);
  --nfs-green-glow: rgba(20, 163, 74, 0.22);

  /* Нитро — Warning, AI */
  --nfs-amber: #F59E0B;
  --nfs-amber-bright: #FBBF24;
  --nfs-amber-dark: #D97706;

  /* === CHROME RAMP (хромовая шкала) === */
  --nfs-ch0: #FFFFFF;
  --nfs-ch1: #F4F6FA;
  --nfs-ch2: #E0E5F0;
  --nfs-ch3: #B8C0D4;
  --nfs-ch4: #7A86A0;
  --nfs-ch5: #3A4260;
  --nfs-ch-g: linear-gradient(150deg, #FFFFFF 0%, #E8ECF5 30%, #D0D6E8 60%, #B8C0D4 100%);

  /* Кокпит — тёмный режим для nav/AI */
  --nfs-cockpit: #0D1117;
  --nfs-cockpit-mid: #1A2035;

  /* === TEXT === */
  --nfs-t1: #0D1117;
  --nfs-t2: #2A3450;
  --nfs-t3: #5A6480;
  --nfs-t4: #9AA0B8;

  /* === BORDERS === */
  --nfs-b1: rgba(58, 66, 96, 0.07);
  --nfs-b2: rgba(58, 66, 96, 0.12);
  --nfs-b3: rgba(26, 95, 217, 0.30);

  /* === TYPOGRAPHY === */
  --nfs-ff: 'Montserrat', system-ui, sans-serif;
  --nfs-ff-mono: 'Courier New', 'SF Mono', monospace;

  /* === RADII === */
  --nfs-r: 10px;
  --nfs-rl: 14px;
}

/* ══════════════════════════════════════════════════════════
   KEYFRAMES — анимации хромового блеска
   ══════════════════════════════════════════════════════════ */

@keyframes nfs-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nfs-shimmer-slow {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nfs-shimmer-vertical {
  0% { background-position: center 200%; }
  100% { background-position: center -200%; }
}

/* ══════════════════════════════════════════════════════════
   SECTION LABEL
   ══════════════════════════════════════════════════════════ */

.nfs-sec-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nfs-t4);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nfs-sec-label::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--nfs-blue) 33%, var(--nfs-red) 33% 66%, var(--nfs-ch3) 66%);
}

/* ══════════════════════════════════════════════════════════
   CHROME TEXT — градиентный текст с анимацией
   ══════════════════════════════════════════════════════════ */

.nfs-ch-text {
  background: linear-gradient(135deg, var(--nfs-ch5) 0%, var(--nfs-blue) 35%, var(--nfs-ch5) 55%, var(--nfs-ch4) 75%, var(--nfs-ch5) 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer-slow 5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════
   LOGO STRIPES — с анимированным блеском
   ══════════════════════════════════════════════════════════ */

.nfs-logo-stripes {
  display: flex;
  gap: 2.5px;
  align-items: flex-end;
  height: 17px;
}

.nfs-logo-stripes span {
  width: 4px;
  border-radius: 1px;
  transform: skewX(-12deg);
}

.nfs-logo-stripes span:nth-child(1) {
  background: linear-gradient(180deg, #3B7FFF, #1A5FD9, #0A2A80, #1A5FD9, #3B7FFF);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite;
  height: 17px;
}

.nfs-logo-stripes span:nth-child(2) {
  background: linear-gradient(180deg, #E03030, #C92222, #801010, #C92222, #E03030);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite 0.5s;
  height: 13px;
}

.nfs-logo-stripes span:nth-child(3) {
  background: linear-gradient(180deg, #FFFFFF, #D8DCE8, #909AAE, #D8DCE8, #FFFFFF);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite 1s;
  height: 9px;
}

/* ══════════════════════════════════════════════════════════
   CHROME DECORATIVE STRIPS — анимированные полосы
   ══════════════════════════════════════════════════════════ */

.nfs-chrome-strip {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--nfs-ch3) 10%,
    var(--nfs-white) 20%, var(--nfs-ch2) 28%,
    var(--nfs-ch3) 35%, var(--nfs-white) 42%,
    var(--nfs-ch2) 50%, var(--nfs-ch3) 58%,
    var(--nfs-white) 65%, var(--nfs-ch2) 72%,
    var(--nfs-ch3) 80%, var(--nfs-white) 88%,
    var(--nfs-ch3) 95%, transparent 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3s linear infinite;
}

.nfs-brand-strip {
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--nfs-blue) 5%, var(--nfs-blue3) 12%, var(--nfs-white) 18%, var(--nfs-blue3) 24%, var(--nfs-blue) 30%,
    var(--nfs-red) 35%, #ff8888 42%, var(--nfs-white) 48%, #ff8888 54%, var(--nfs-red) 60%,
    var(--nfs-ch3) 65%, var(--nfs-white) 72%, var(--nfs-ch3) 78%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 4s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — градиенты + хромовый шиммер на ховере
   ══════════════════════════════════════════════════════════ */

.nfs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--nfs-ff);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.03em;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  padding: 10px 20px;
  transition: transform 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* Shimmer overlay на ховере для всех кнопок */
.nfs-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.4s;
  pointer-events: none;
}

.nfs-btn:hover::after {
  background-position: -200% center;
}

/* Primary — синий градиент от светлого к тёмному */
.nfs-btn-primary {
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue2) 40%, var(--nfs-blue) 70%, #1248B0 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 2px 10px rgba(26,95,217,0.3),
    0 0 0 0.5px rgba(26,95,217,0.4);
}

.nfs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(59,127,255,0.6),
    0 0 14px rgba(59,127,255,0.3),
    0 4px 14px rgba(26,95,217,0.35),
    0 1px 0 rgba(255,255,255,0.2) inset;
}

/* Chrome — хромовый градиент */
.nfs-btn-chrome {
  background: linear-gradient(150deg, var(--nfs-white) 0%, var(--nfs-ch1) 40%, var(--nfs-ch2) 80%, var(--nfs-ch3) 100%);
  color: var(--nfs-ch5);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 -1px 0 rgba(0,0,0,0.07) inset,
    0 1px 5px rgba(0,0,0,0.08),
    0 0 0 0.5px var(--nfs-b2);
}

.nfs-btn-chrome:hover {
  color: var(--nfs-blue);
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(26,95,217,0.4),
    0 0 12px rgba(26,95,217,0.18),
    0 2px 8px rgba(0,0,0,0.07),
    0 1px 0 rgba(255,255,255,0.95) inset;
}

/* Ghost — прозрачный с неоновым ховером */
.nfs-btn-ghost {
  background: transparent;
  color: var(--nfs-t2);
  border: 0.5px solid var(--nfs-b2);
  box-shadow: none;
}

.nfs-btn-ghost:hover {
  border-color: rgba(26,95,217,0.4);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

/* Danger — красный градиент */
.nfs-btn-danger {
  background: linear-gradient(150deg, #E03030 0%, var(--nfs-red) 50%, #A01818 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 2px 10px rgba(201,34,34,0.25),
    0 0 0 0.5px rgba(201,34,34,0.4);
}

.nfs-btn-danger:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(201,34,34,0.5),
    0 0 14px var(--nfs-red-glow);
}

/* Icon button — хромовый градиент */
.nfs-ibtn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--nfs-t3);
  transition: all 0.2s;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.05),
    0 1px 0 rgba(255,255,255,0.8) inset;
}

.nfs-ibtn:hover {
  border-color: rgba(26,95,217,0.4);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-ibtn.active {
  background: linear-gradient(150deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.25);
  color: var(--nfs-blue);
}

/* ══════════════════════════════════════════════════════════
   INPUTS — хромовые градиенты
   ══════════════════════════════════════════════════════════ */

.nfs-input {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--nfs-ff);
  font-size: 12px;
  font-weight: 500;
  color: var(--nfs-t1);
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  outline: none;
  background: linear-gradient(180deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-input::placeholder {
  color: var(--nfs-t4);
}

.nfs-input:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow), 0 1px 4px rgba(0,0,0,0.05) inset;
}

/* ══════════════════════════════════════════════════════════
   BADGES — градиентные фоны вместо сплошных
   ══════════════════════════════════════════════════════════ */

.nfs-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 20px;
}

.nfs-badge-blue {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  color: var(--nfs-blue);
  border: 0.5px solid rgba(26,95,217,0.22);
}

.nfs-badge-red {
  background: linear-gradient(135deg, rgba(201,34,34,0.1), rgba(201,34,34,0.04));
  color: var(--nfs-red);
  border: 0.5px solid rgba(201,34,34,0.2);
}

.nfs-badge-green {
  background: linear-gradient(135deg, rgba(20,163,74,0.1), rgba(20,163,74,0.04));
  color: var(--nfs-green);
  border: 0.5px solid rgba(20,163,74,0.2);
}

.nfs-badge-chrome {
  background: linear-gradient(135deg, var(--nfs-ch1), var(--nfs-ch2));
  color: var(--nfs-ch5);
  border: 0.5px solid var(--nfs-ch2);
}

.nfs-badge-ai {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 2px 6px rgba(26,95,217,0.28);
}

/* ══════════════════════════════════════════════════════════
   TAGS — хромовые с градиентом
   ══════════════════════════════════════════════════════════ */

.nfs-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nfs-ff);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 13px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.8) inset;
}

.nfs-tag:hover,
.nfs-tag.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.32);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

/* ══════════════════════════════════════════════════════════
   HUD NUMBERS — моноширинный с градиентным фоном
   ══════════════════════════════════════════════════════════ */

.nfs-hud {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--nfs-ff-mono);
  color: var(--nfs-blue);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(59,127,255,0.08), rgba(26,95,217,0.04));
  border: 0.5px solid rgba(26,95,217,0.15);
  padding: 1px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════
   CARD BASE — хромовый градиент
   ══════════════════════════════════════════════════════════ */

.nfs-card {
  background: linear-gradient(170deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* ══════════════════════════════════════════════════════════
   STAT PILL — с анимированным шиммером
   ══════════════════════════════════════════════════════════ */

.nfs-stat {
  background: linear-gradient(150deg, var(--nfs-white) 0%, var(--nfs-ch1) 50%, var(--nfs-ch2) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 2px 6px rgba(0,0,0,0.05);
}

.nfs-stat::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: nfs-shimmer 4s linear infinite;
}

.nfs-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--nfs-t1);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nfs-stat-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--nfs-t4);
  text-transform: uppercase;
  margin-top: 3px;
}

/* ══════════════════════════════════════════════════════════
   MOTIF CARDS — анимированные полосы
   ══════════════════════════════════════════════════════════ */

.nfs-motif-card {
  border-radius: var(--nfs-rl);
  padding: 18px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* Animated top stripe */
.nfs-motif-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--nfs-blue) 0% 28%,
    var(--nfs-white) 28%, var(--nfs-white) 32%,
    var(--nfs-red) 32%, var(--nfs-red) 60%,
    var(--nfs-white) 60%, var(--nfs-white) 64%,
    var(--nfs-ch3) 64%, var(--nfs-ch3) 88%,
    var(--nfs-white) 88%, var(--nfs-white) 92%,
    var(--nfs-ch3) 92%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
}

/* Animated left stripe */
.nfs-motif-left::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--nfs-blue) 0% 28%,
    var(--nfs-white) 28%, var(--nfs-white) 32%,
    var(--nfs-red) 32%, var(--nfs-red) 60%,
    var(--nfs-white) 60%, var(--nfs-white) 64%,
    var(--nfs-ch3) 64%, var(--nfs-ch3) 88%,
    var(--nfs-white) 88%, var(--nfs-white) 92%,
    var(--nfs-ch3) 92%
  );
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3.5s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   AI BLOCK — тёмный кокпит с анимированной полосой
   ══════════════════════════════════════════════════════════ */

.nfs-ai-block {
  background: linear-gradient(155deg, #0C1630 0%, #0A1020 60%, #101828 100%);
  border-radius: var(--nfs-rl);
  border: 0.5px solid rgba(26,95,217,0.22);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(26,95,217,0.18);
}

.nfs-ai-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--nfs-blue) 0%, var(--nfs-blue3) 15%, #fff 25%, var(--nfs-blue3) 35%,
    var(--nfs-red) 50%, #ff9999 62%, var(--nfs-red) 72%,
    var(--nfs-ch3) 82%, #fff 90%, var(--nfs-ch3) 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
}

/* ══════════════════════════════════════════════════════════
   GRADIENT PRICES — по сегментам
   ══════════════════════════════════════════════════════════ */

.nfs-price-blue {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-price-green {
  background: linear-gradient(135deg, var(--nfs-green-bright), var(--nfs-green-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-price-bronze {
  background: linear-gradient(135deg, #92400E, #C97020);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════
   DARK NAV (Кокпит)
   ══════════════════════════════════════════════════════════ */

.nfs-nav-dark {
  background: linear-gradient(180deg, var(--nfs-cockpit-mid) 0%, var(--nfs-cockpit) 100%);
  padding: 0 22px;
  height: 52px;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 16px rgba(0,0,0,0.2);
}

/* Animated stripe at bottom */
.nfs-nav-dark::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--nfs-blue) 15%, var(--nfs-blue3) 25%, #fff 35%, var(--nfs-blue3) 45%,
    var(--nfs-red) 60%, #ffaaaa 68%, var(--nfs-red) 75%,
    var(--nfs-ch3) 85%, var(--nfs-white) 90%, var(--nfs-ch3) 95%,
    transparent 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 4s linear infinite;
}

.nfs-nav-dark .nfs-nav-link {
  color: rgba(255,255,255,0.6);
  font-size: 11px;
  font-weight: 600;
  padding: 0 14px;
  height: 52px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  letter-spacing: 0.03em;
}

.nfs-nav-dark .nfs-nav-link:hover {
  color: rgba(255,255,255,0.9);
}

.nfs-nav-dark .nfs-nav-link.active {
  color: var(--nfs-blue3);
  border-bottom-color: var(--nfs-blue3);
}

.nfs-nav-dark .nfs-logo-word {
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.nfs-nav-dark .nfs-nav-search {
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  height: 32px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: rgba(255,255,255,0.4);
  font-size: 11px;
}

.nfs-nav-dark .nfs-nav-search:hover {
  border-color: rgba(59,127,255,0.4);
  box-shadow: 0 0 0 3px rgba(59,127,255,0.15);
}

/* ══════════════════════════════════════════════════════════
   FILTER CARD
   ══════════════════════════════════════════════════════════ */

.nfs-filter-card {
  background: linear-gradient(170deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.nfs-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.nfs-filter-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-filter-reset {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-blue);
  cursor: pointer;
  transition: opacity 0.2s;
}

.nfs-filter-reset:hover {
  opacity: 0.7;
}

.nfs-filter-group {
  margin-bottom: 16px;
}

.nfs-filter-group-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nfs-t3);
  margin-bottom: 10px;
}

/* Checkbox */
.nfs-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
}

.nfs-checkbox-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 1.5px solid var(--nfs-ch3);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nfs-checkbox.checked .nfs-checkbox-box {
  background: linear-gradient(150deg, #3B7FFF, var(--nfs-blue));
  border-color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-checkbox-box svg {
  width: 9px;
  height: 7px;
  opacity: 0;
}

.nfs-checkbox.checked .nfs-checkbox-box svg {
  opacity: 1;
}

.nfs-checkbox-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--nfs-t2);
  flex: 1;
}

.nfs-checkbox-count {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--nfs-ff-mono);
  color: var(--nfs-blue);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(59,127,255,0.08), rgba(26,95,217,0.04));
  border: 0.5px solid rgba(26,95,217,0.15);
  padding: 2px 8px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* Tag buttons for КПП */
.nfs-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nfs-filter-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
}

.nfs-filter-tag:hover,
.nfs-filter-tag.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.32);
  color: var(--nfs-blue);
}

.nfs-filter-tag.active {
  box-shadow: 0 0 0 2px var(--nfs-blue-glow);
}

/* Submit button */
.nfs-filter-submit {
  width: 100%;
  margin-top: 16px;
}

/* ══════════════════════════════════════════════════════════
   CORNER ACCENT (угловой мотив)
   ══════════════════════════════════════════════════════════ */

.nfs-motif-corner {
  position: relative;
  overflow: hidden;
}

.nfs-motif-corner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  background: 
    linear-gradient(135deg, 
      var(--nfs-blue) 0%, var(--nfs-blue) 20%,
      transparent 20%, transparent 25%,
      var(--nfs-red) 25%, var(--nfs-red) 45%,
      transparent 45%, transparent 50%,
      var(--nfs-ch3) 50%, var(--nfs-ch3) 70%,
      transparent 70%
    );
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* ══════════════════════════════════════════════════════════
   CARD WITH BUTTONS (alternative car card style)
   ══════════════════════════════════════════════════════════ */

.nfs-cc-alt .nfs-cc-body {
  padding: 14px;
}

.nfs-cc-alt .nfs-cc-meta-inline {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--nfs-t3);
  margin-bottom: 12px;
}

.nfs-cc-alt .nfs-cc-meta-inline span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nfs-cc-alt .nfs-cc-buttons {
  display: flex;
  gap: 8px;
}

.nfs-cc-alt .nfs-cc-btn-details {
  flex: 1;
}

.nfs-cc-alt .nfs-cc-btn-compare {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ══════════════════════════════════════════════════════════
   A. BREADCRUMB
   ══════════════════════════════════════════════════════════ */

.nfs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nfs-bc-item {
  font-size: 11px;
  font-weight: 500;
  color: var(--nfs-t3);
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
}

.nfs-bc-item:hover {
  color: var(--nfs-blue);
}

.nfs-bc-item.active {
  color: var(--nfs-t1);
  font-weight: 600;
  cursor: default;
}

.nfs-bc-sep {
  color: var(--nfs-ch3);
  font-size: 10px;
  user-select: none;
}

/* ══════════════════════════════════════════════════════════
   B. FEATURE CARDS (top of catalog)
   ══════════════════════════════════════════════════════════ */

.nfs-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 992px) {
  .nfs-feat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .nfs-feat-grid { grid-template-columns: 1fr; }
}

.nfs-feat-card {
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.nfs-feat-card:hover {
  border-color: var(--nfs-b3);
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(26,95,217,0.15), 0 0 16px rgba(26,95,217,0.1), 0 4px 14px rgba(0,0,0,0.08);
}

.nfs-feat-card:hover .nfs-feat-icon {
  box-shadow: 0 0 0 4px var(--nfs-blue-glow);
}

.nfs-feat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s;
}

.nfs-feat-icon--purple { background: linear-gradient(135deg, #2B1F6E, #1A1248); box-shadow: 0 2px 8px rgba(91,33,182,0.25); }
.nfs-feat-icon--blue { background: linear-gradient(135deg, #1a3a80, #1248B0); box-shadow: 0 2px 8px rgba(26,95,217,0.25); }
.nfs-feat-icon--green { background: linear-gradient(135deg, #0A5C30, #14A34A); box-shadow: 0 2px 8px rgba(20,163,74,0.25); }
.nfs-feat-icon--amber { background: linear-gradient(135deg, #923800, #D97706); box-shadow: 0 2px 8px rgba(217,119,6,0.25); }

.nfs-feat-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
  margin-bottom: 2px;
}

.nfs-feat-desc {
  font-size: 10px;
  color: var(--nfs-t3);
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════
   C. CATALOG TOOLBAR
   ══════════════════════════════════════════════════════════ */

.nfs-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.nfs-count-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-count-badge span {
  color: var(--nfs-blue);
}

.nfs-sort-select {
  padding: 7px 28px 7px 11px;
  font-family: var(--nfs-ff);
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t2);
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236B7590' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-sort-select:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-view-btns {
  display: flex;
  gap: 4px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  padding: 3px;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
}

.nfs-view-btn {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nfs-t4);
  background: transparent;
  transition: all 0.15s;
  font-family: var(--nfs-ff);
}

.nfs-view-btn.active {
  background: linear-gradient(150deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 1px 5px rgba(26,95,217,0.3);
}

.nfs-cmp-btn-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(59,127,255,0.1), rgba(26,95,217,0.05));
  border: 0.5px solid rgba(26,95,217,0.25);
  color: var(--nfs-blue);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}

.nfs-cmp-btn-inline:hover {
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
  background: linear-gradient(150deg, rgba(59,127,255,0.15), rgba(26,95,217,0.08));
}

/* ══════════════════════════════════════════════════════════
   D. FILTER SIDEBAR (Extended)
   ══════════════════════════════════════════════════════════ */

.nfs-filter-sidebar {
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.nfs-fg {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--nfs-b1);
}

.nfs-fg:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.nfs-fg-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nfs-t3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.nfs-fg-label svg {
  transition: transform 0.2s;
  color: var(--nfs-ch4);
}

.nfs-fg-label.open svg {
  transform: rotate(180deg);
}

.nfs-search-inp {
  width: 100%;
  padding: 7px 10px 7px 28px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 7px;
  font-family: var(--nfs-ff);
  font-size: 11px;
  color: var(--nfs-t1);
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-search-inp:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow), 0 1px 3px rgba(0,0,0,0.04) inset;
}

.nfs-range-row {
  display: flex;
  gap: 7px;
  align-items: center;
}

.nfs-range-input {
  flex: 1;
  padding: 7px 9px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 7px;
  text-align: center;
  font-family: var(--nfs-ff);
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-range-input:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-fuel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.nfs-fuel-tag {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: all 0.2s;
}

.nfs-fuel-tag:hover,
.nfs-fuel-tag.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.3);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

/* ══════════════════════════════════════════════════════════
   E. LOAD MORE BUTTON
   ══════════════════════════════════════════════════════════ */

.nfs-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  font-family: var(--nfs-ff);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(160deg, var(--nfs-white) 0%, var(--nfs-ch1) 50%, var(--nfs-ch2) 100%);
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-ch5);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 2px 8px rgba(0,0,0,0.06), 0 0 0 0.5px var(--nfs-b1);
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.nfs-load-more::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  pointer-events: none;
  transition: background-position 0.4s;
}

.nfs-load-more:hover::after {
  background-position: -200% center;
}

.nfs-load-more:hover {
  color: var(--nfs-blue);
  border-color: rgba(26,95,217,0.35);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(26,95,217,0.2), 0 0 14px rgba(26,95,217,0.1), 0 4px 10px rgba(0,0,0,0.08);
}

.nfs-load-more-count {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border: 0.5px solid rgba(26,95,217,0.2);
  color: var(--nfs-blue);
  border-radius: 4px;
  padding: 1px 7px;
  font-family: var(--nfs-ff-mono);
  font-size: 11px;
}

.nfs-progress-bar {
  width: 100%;
  height: 3px;
  background: var(--nfs-ch2);
  border-radius: 2px;
  overflow: hidden;
}

.nfs-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--nfs-blue), var(--nfs-blue3));
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ══════════════════════════════════════════════════════════
   F. PRICE TREND MINI CHART
   ══════════════════════════════════════════════════════════ */

.nfs-trend-wrap {
  padding: 14px;
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

.nfs-trend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.nfs-trend-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-trend-delta {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-green);
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20,163,74,0.2);
  border-radius: 5px;
  padding: 2px 7px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nfs-trend-delta.down {
  color: var(--nfs-red);
  background: rgba(201,34,34,0.07);
  border-color: rgba(201,34,34,0.2);
}

.nfs-trend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--nfs-t4);
  font-weight: 600;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════
   G. PHOTO GALLERY
   ══════════════════════════════════════════════════════════ */

.nfs-gallery-wrap {
  border-radius: var(--nfs-rl);
  overflow: hidden;
  position: relative;
}

.nfs-gallery-main {
  width: 100%;
  height: 300px;
  background: linear-gradient(155deg, #0C1830 0%, #0A1020 60%, #101828 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.nfs-gallery-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--nfs-blue) 15%, var(--nfs-blue3) 25%, #fff 33%, var(--nfs-blue3) 41%, var(--nfs-red) 55%, #ffaaaa 63%, var(--nfs-red) 71%, var(--nfs-ch3) 80%, #fff 87%, var(--nfs-ch3) 93%, transparent 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
  z-index: 2;
}

.nfs-gallery-nav {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(10,15,35,0.75);
  backdrop-filter: blur(6px);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  padding: 4px 10px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 700;
  z-index: 3;
  font-family: var(--nfs-ff-mono);
  letter-spacing: 0.05em;
}

.nfs-gallery-badge-row {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  z-index: 3;
}

.nfs-g-badge {
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
}

.nfs-g-badge--blue {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,95,217,0.35);
}

.nfs-g-badge--green {
  background: linear-gradient(135deg, #16A34A, #14A34A);
  color: #fff;
  box-shadow: 0 2px 8px rgba(20,163,74,0.3);
}

.nfs-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px;
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
  border-top: 0.5px solid var(--nfs-b1);
}

.nfs-thumb {
  width: 64px;
  height: 44px;
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  background: linear-gradient(155deg, #1a2535, #0a1020);
}

.nfs-thumb.active {
  border-color: var(--nfs-blue);
  box-shadow: 0 0 0 2px var(--nfs-blue-glow);
}

.nfs-thumb:hover:not(.active) {
  border-color: var(--nfs-ch3);
}

/* ══════════════════════════════════════════════════════════
   H. PRICE BLOCK + ACTIONS
   ══════════════════════════════════════════════════════════ */

.nfs-price-block {
  background: linear-gradient(160deg, var(--nfs-white) 0%, var(--nfs-ch1) 60%, var(--nfs-ch2) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
  position: relative;
  overflow: hidden;
}

.nfs-price-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, var(--nfs-blue) 0% 33%, #fff 33% 35%, var(--nfs-red) 35% 68%, #fff 68% 70%, var(--nfs-ch3) 70% 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer 3s linear infinite;
}

/* Без верхней анимированной полоски (страница лота и др.) */
.nfs-price-block--no-shimmer::before {
  display: none;
}

.nfs-price-main {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--nfs-blue2) 0%, var(--nfs-blue) 50%, #1248B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}

.nfs-price-byn {
  font-size: 16px;
  font-weight: 700;
  -webkit-text-fill-color: var(--nfs-t3);
  color: var(--nfs-t3);
  margin-left: 4px;
}

.nfs-price-fair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-green);
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20,163,74,0.2);
  border-radius: 5px;
  padding: 4px 9px;
  margin-bottom: 14px;
}

.nfs-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.nfs-act-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--nfs-ff);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  border: 0.5px solid var(--nfs-b2);
  transition: all 0.2s;
  letter-spacing: 0.02em;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  color: var(--nfs-t2);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.8) inset;
}

.nfs-act-btn:hover,
.nfs-act-btn:focus {
  border-color: rgba(26,95,217,0.35);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
  transform: translateY(-1px);
  text-decoration: none;
}

.nfs-act-btn.primary {
  background: var(--nfs-blue-g);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(26,95,217,0.28), 0 1px 0 rgba(255,255,255,0.15) inset;
}

.nfs-act-btn.primary:hover {
  box-shadow: 0 0 0 1px rgba(59,127,255,0.5), 0 0 14px rgba(59,127,255,0.25);
}

.nfs-act-btn.ai {
  background: linear-gradient(135deg, #0C1830, #0A1020);
  color: #7AB3FF;
  border-color: rgba(26,95,217,0.25);
  box-shadow: 0 0 0 0.5px rgba(26,95,217,0.2);
}

.nfs-act-btn.ai:hover {
  box-shadow: 0 0 0 1px rgba(59,127,255,0.4), 0 0 12px rgba(59,127,255,0.2);
}

/* ══════════════════════════════════════════════════════════
   I. QUICK SPECS BAR
   ══════════════════════════════════════════════════════════ */

.nfs-specs-bar {
  display: flex;
  gap: 0;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-r);
  overflow: hidden;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.nfs-spec-item {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 0.5px solid var(--nfs-b1);
  transition: background 0.15s;
  cursor: default;
}

.nfs-spec-item:last-child {
  border-right: none;
}

.nfs-spec-item:hover {
  background: rgba(26,95,217,0.03);
}

.nfs-spec-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nfs-t4);
}

.nfs-spec-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
}

/* ══════════════════════════════════════════════════════════
   J. CHARACTERISTICS TABLE
   ══════════════════════════════════════════════════════════ */

.nfs-char-section {
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.nfs-char-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  border-bottom: 0.5px solid var(--nfs-b1);
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background 0.15s;
  position: relative;
  overflow: hidden;
}

.nfs-char-group-head::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--nfs-blue) 33%, var(--nfs-red) 33% 66%, var(--nfs-ch3) 66%);
}

.nfs-char-group-head:hover {
  background: linear-gradient(160deg, var(--nfs-ch2), var(--nfs-ch3));
}

.nfs-char-row {
  display: flex;
  padding: 9px 16px;
  border-bottom: 0.5px solid var(--nfs-b1);
  transition: background 0.15s;
}

.nfs-char-row:hover {
  background: rgba(26,95,217,0.03);
}

.nfs-char-row:last-child {
  border-bottom: none;
}

.nfs-char-key {
  font-size: 11px;
  color: var(--nfs-t3);
  font-weight: 500;
  width: 50%;
  flex-shrink: 0;
}

.nfs-char-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t1);
  text-align: right;
  flex: 1;
}

/* ══════════════════════════════════════════════════════════
   K. AI ANALYSIS TABS + DONUT
   ══════════════════════════════════════════════════════════ */

.nfs-ai-tabs {
  display: flex;
  gap: 2px;
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  border-radius: 8px;
  padding: 3px;
  margin-bottom: 14px;
}

.nfs-ai-tab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  color: var(--nfs-t3);
  transition: all 0.2s;
  border: none;
  background: transparent;
  font-family: var(--nfs-ff);
}

.nfs-ai-tab.active {
  background: linear-gradient(150deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,95,217,0.3);
}

.nfs-donut-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto 16px;
}

.nfs-donut-bg {
  fill: none;
  stroke: var(--nfs-ch2);
  stroke-width: 12;
}

.nfs-donut-fg {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 283;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: nfs-dash 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes nfs-dash {
  to { stroke-dashoffset: var(--nfs-donut-offset, 70); }
}

.nfs-donut-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nfs-donut-score {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--nfs-blue2), #1248B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-donut-score--green {
  background: linear-gradient(135deg, #22C55E, #14A34A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-donut-max {
  font-size: 10px;
  color: var(--nfs-t4);
  font-weight: 600;
}

.nfs-ai-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20,163,74,0.2);
  margin-bottom: 10px;
}

.nfs-ai-verdict-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22C55E, #14A34A);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(20,163,74,0.3);
}

.nfs-ai-verdict-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-green);
}

.nfs-ai-verdict-sub {
  font-size: 10px;
  color: var(--nfs-t3);
  margin-top: 1px;
}

/* Risk items */
.nfs-risk-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--nfs-b1);
}

.nfs-risk-item:last-child {
  border-bottom: none;
}

.nfs-risk-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 3px;
}

.nfs-risk-dot--green {
  background: #22C55E;
  box-shadow: 0 0 5px rgba(34,197,94,0.4);
}

.nfs-risk-dot--amber {
  background: #F59E0B;
  box-shadow: 0 0 5px rgba(245,158,11,0.4);
}

.nfs-risk-dot--red {
  background: var(--nfs-red);
  box-shadow: 0 0 5px rgba(201,34,34,0.4);
}

.nfs-risk-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t2);
}

.nfs-risk-sub {
  font-size: 10px;
  color: var(--nfs-t3);
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════
   L. HISTORY TIMELINE
   ══════════════════════════════════════════════════════════ */

.nfs-timeline {
  position: relative;
  padding-left: 22px;
}

.nfs-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: linear-gradient(180deg, var(--nfs-blue) 0%, var(--nfs-ch2) 100%);
}

.nfs-tl-item {
  position: relative;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 0.5px solid var(--nfs-b1);
}

.nfs-tl-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.nfs-tl-dot {
  position: absolute;
  left: -22px;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  border: 2px solid var(--nfs-white);
  box-shadow: 0 0 0 2px var(--nfs-blue), 0 0 8px var(--nfs-blue-glow);
}

.nfs-tl-dot--warn {
  background: linear-gradient(135deg, #FBBF24, #D97706);
  box-shadow: 0 0 0 2px #D97706;
}

.nfs-tl-dot--gray {
  background: linear-gradient(135deg, var(--nfs-ch3), var(--nfs-ch4));
  box-shadow: 0 0 0 2px var(--nfs-ch3);
}

.nfs-tl-date {
  font-size: 9px;
  font-weight: 700;
  color: var(--nfs-t4);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.nfs-tl-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-tl-sub {
  font-size: 10px;
  color: var(--nfs-t3);
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   M. EQUIPMENT TABS
   ══════════════════════════════════════════════════════════ */

.nfs-equip-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.nfs-eq-tab {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  color: var(--nfs-t3);
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.nfs-eq-tab.active {
  background: var(--nfs-blue-g);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(26,95,217,0.3);
}

.nfs-eq-tab:not(.active):hover {
  border-color: rgba(26,95,217,0.3);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-equip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.nfs-eq-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.nfs-eq-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #22C55E, #14A34A);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(20,163,74,0.3);
}

.nfs-eq-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t2);
}

/* ══════════════════════════════════════════════════════════
   N. SIMILAR CARS ROW
   ══════════════════════════════════════════════════════════ */

.nfs-similar-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.nfs-similar-row::-webkit-scrollbar {
  height: 3px;
}

.nfs-similar-row::-webkit-scrollbar-track {
  background: var(--nfs-ch2);
  border-radius: 2px;
}

.nfs-similar-row::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--nfs-blue), var(--nfs-blue3));
  border-radius: 2px;
}

.nfs-sim-card {
  flex-shrink: 0;
  width: 180px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: all 0.2s;
}

.nfs-sim-card:hover {
  transform: translateY(-2px);
  border-color: rgba(26,95,217,0.3);
  box-shadow: 0 0 0 1px rgba(26,95,217,0.12), 0 6px 16px rgba(0,0,0,0.1);
}

.nfs-sim-img {
  width: 100%;
  height: 100px;
  background: linear-gradient(155deg, #1a2535, #0a1020);
  position: relative;
  overflow: hidden;
}

.nfs-sim-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,15,35,0.35) 100%);
}

.nfs-sim-body {
  padding: 9px 11px 11px;
}

.nfs-sim-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--nfs-t1);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfs-sim-price {
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--nfs-blue2), #1248B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-variant-numeric: tabular-nums;
}

.nfs-sim-price--green {
  background: linear-gradient(135deg, #14A34A, #0A6A30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-sim-byn {
  font-size: 10px;
  font-weight: 600;
  -webkit-text-fill-color: var(--nfs-t3);
  color: var(--nfs-t3);
}

/* === css/nfs-icons.css === */
/**
 * NFS AUTO — единый набор линейных иконок (обводка, скругления)
 * Использование: class="nfs-ico nfs-ico--md" + stroke="currentColor"
 */

.nfs-ico {
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
  color: inherit;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nfs-ico use {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.nfs-ico--xs { width: 10px; height: 10px; }
.nfs-ico--sm { width: 12px; height: 12px; }
.nfs-ico--md { width: 14px; height: 14px; }
.nfs-ico--lg { width: 18px; height: 18px; }
.nfs-ico--xl { width: 20px; height: 20px; }
.nfs-ico--xxl { width: 24px; height: 24px; }
.nfs-ico--3xl { width: 32px; height: 32px; }
.nfs-ico--4xl { width: 48px; height: 48px; }
.nfs-ico--5xl { width: 64px; height: 64px; }
.nfs-ico--6xl { width: 80px; height: 80px; }

/* Иконки на тёмных градиентных подложках карточек возможностей */
.nfs-feat-icon .nfs-ico {
  color: #fff;
}

/* Кнопки действий карточки авто — чуть крупнее */
.nfs-act-btn .nfs-ico {
  width: 13px;
  height: 13px;
}

.nfs-act-btn.ai .nfs-ico {
  color: #7ab3ff;
}

.nfs-ico--spin {
  animation: nfs-ico-spin 1s linear infinite;
  transform-origin: center;
}

@keyframes nfs-ico-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === css/nfs-sections.css === */
/**
 * NFS AUTO — Стили секций согласно дизайн-системе v3
 * Features, Import, AI Assistant, Footer
 */

/* ══════════════════════════════════════════════════════════
   ОБЩИЕ СТИЛИ СЕКЦИЙ
   ══════════════════════════════════════════════════════════ */

.nfs-section {
  padding: 5rem 0;
  background: var(--nfs-bg);
  position: relative;
}

.nfs-section--alt {
  background: var(--nfs-surface);
}

/* Заголовок секции */
.nfs-section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.nfs-section-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-family: var(--nfs-ff);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--nfs-t1);
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.nfs-accent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Внутри обёртки акцент остаётся инлайновым, иначе ломается строка заголовка */
.nfs-section-title-inner .nfs-accent {
  display: inline;
  flex-direction: unset;
  justify-content: unset;
  align-items: unset;
}

.nfs-section-title .nfs-accent {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue-dark));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-section-subtitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-family: var(--nfs-ff);
  font-size: 1.125rem;
  color: var(--nfs-t3);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   FEATURES SECTION
   ══════════════════════════════════════════════════════════ */

.nfs-features {
  padding: 5rem 0;
  background: var(--nfs-bg);
}

.nfs-features-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 520px) {
  .nfs-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .nfs-features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Карточка возможности — использует nfs-motif-card */
.nfs-feature-card {
  border-radius: var(--nfs-rl);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04), 0 1px 0 rgba(255,255,255,0.9) inset;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}

/* Анимированная полоса слева */
.nfs-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg,
    var(--nfs-blue) 0% 28%,
    var(--nfs-white) 28%, var(--nfs-white) 32%,
    var(--nfs-red) 32%, var(--nfs-red) 60%,
    var(--nfs-white) 60%, var(--nfs-white) 64%,
    var(--nfs-ch3) 64%, var(--nfs-ch3) 88%,
    var(--nfs-white) 88%, var(--nfs-white) 92%,
    var(--nfs-ch3) 92%
  );
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3.5s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nfs-feature-card:hover::before {
  opacity: 1;
}

.nfs-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 95, 217, 0.25);
  box-shadow: 
    0 0 0 3px var(--nfs-blue-glow),
    0 8px 24px rgba(0,0,0,0.08);
}

.nfs-feature-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.nfs-feature-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--nfs-r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Shimmer overlay на иконках */
.nfs-feature-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.4s;
}

.nfs-feature-card:hover .nfs-feature-icon::after {
  background-position: -200% center;
}

/* Градиенты иконок */
.nfs-feature-icon--blue {
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue) 50%, #1248B0 100%);
  box-shadow: 0 2px 10px rgba(26, 95, 217, 0.3);
}

.nfs-feature-icon--red {
  background: linear-gradient(150deg, #E03030 0%, var(--nfs-red) 50%, #A01818 100%);
  box-shadow: 0 2px 10px rgba(201, 34, 34, 0.25);
}

.nfs-feature-icon--purple {
  background: linear-gradient(150deg, #8B5CF6 0%, #7C3AED 50%, #5B21B6 100%);
  box-shadow: 0 2px 10px rgba(139, 92, 246, 0.3);
}

.nfs-feature-icon--green {
  background: linear-gradient(150deg, var(--nfs-green-bright) 0%, var(--nfs-green) 50%, var(--nfs-green-dark) 100%);
  box-shadow: 0 2px 10px rgba(20, 163, 74, 0.25);
}

.nfs-feature-icon--orange {
  background: linear-gradient(150deg, var(--nfs-amber-bright) 0%, var(--nfs-amber) 50%, var(--nfs-amber-dark) 100%);
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
}

.nfs-feature-icon--cyan {
  background: linear-gradient(150deg, #22D3EE 0%, #06B6D4 50%, #0891B2 100%);
  box-shadow: 0 2px 10px rgba(6, 182, 212, 0.3);
}

.nfs-feature-icon--indigo {
  background: linear-gradient(150deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
  box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

.nfs-feature-icon--rose {
  background: linear-gradient(150deg, #FB7185 0%, #F43F5E 50%, #E11D48 100%);
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.3);
}

.nfs-feature-icon--teal {
  background: linear-gradient(150deg, #2DD4BF 0%, #14B8A6 50%, #0D9488 100%);
  box-shadow: 0 2px 10px rgba(20, 184, 166, 0.3);
}

.nfs-feature-title {
  font-family: var(--nfs-ff);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--nfs-t1);
  margin: 0;
  line-height: 1.3;
}

.nfs-feature-desc {
  font-family: var(--nfs-ff);
  font-size: 0.9375rem;
  color: var(--nfs-t3);
  line-height: 1.55;
  margin: 0;
}

/* CTA кнопка секции */
.nfs-section-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ══════════════════════════════════════════════════════════
   IMPORT SECTION
   ══════════════════════════════════════════════════════════ */

/* Секция импорта: как в референсе dizich — фон страницы, не белая «простыня» */
.nfs-import,
.import-section {
  padding: 52px 0;
  background: var(--nfs-bg);
}

/* Обёртка контента как в референсе (section-inner вместо .container) */
.section-inner {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Табы стран */
.nfs-import-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.nfs-import-tab {
  font-family: var(--nfs-ff);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  cursor: pointer;
  border: 0.5px solid var(--nfs-b2);
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  color: var(--nfs-t3);
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nfs-import-tab:hover {
  border-color: rgba(26, 95, 217, 0.4);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-import-tab.active {
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue2) 40%, var(--nfs-blue) 70%, #1248B0 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 2px 10px rgba(26, 95, 217, 0.3);
}

/* Калькулятор */
.nfs-calculator {
  background: linear-gradient(170deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.9) inset;
  position: relative;
  overflow: hidden;
}

/* Анимированная полоса сверху */
.nfs-calculator::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--nfs-blue) 0% 28%,
    var(--nfs-white) 28%, var(--nfs-white) 32%,
    var(--nfs-red) 32%, var(--nfs-red) 60%,
    var(--nfs-white) 60%, var(--nfs-white) 64%,
    var(--nfs-ch3) 64%, var(--nfs-ch3) 88%,
    var(--nfs-white) 88%, var(--nfs-white) 92%,
    var(--nfs-ch3) 92%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
}

.nfs-calculator-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.nfs-calculator-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--nfs-r);
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue) 50%, #1248B0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  box-shadow: 0 2px 10px rgba(26, 95, 217, 0.3);
}

.nfs-calculator-title {
  font-family: var(--nfs-ff);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--nfs-t1);
  margin: 0 0 0.25rem 0;
}

.nfs-calculator-subtitle {
  font-family: var(--nfs-ff);
  font-size: 0.9375rem;
  color: var(--nfs-t3);
  margin: 0;
}

.nfs-calculator-disclaimer {
  font-family: var(--nfs-ff);
  font-size: 0.8125rem;
  color: var(--nfs-t4);
  background: linear-gradient(135deg, rgba(59,127,255,0.06), rgba(26,95,217,0.03));
  border: 0.5px solid rgba(26,95,217,0.12);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

/* Слайдеры */
.nfs-slider-group {
  margin-bottom: 1.5rem;
}

.nfs-slider-label {
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nfs-t2);
  margin-bottom: 0.75rem;
  display: block;
}

.nfs-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--nfs-ch2), var(--nfs-ch3));
  border-radius: 3px;
  outline: none;
}

.nfs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue) 50%, #1248B0 100%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 95, 217, 0.4);
  transition: transform 0.15s ease;
}

.nfs-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.nfs-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue) 50%, #1248B0 100%);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(26, 95, 217, 0.4);
  border: none;
}

.nfs-slider-values {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-family: var(--nfs-ff);
  font-size: 0.75rem;
  color: var(--nfs-t4);
}

.nfs-slider-values .current {
  font-weight: 700;
  color: var(--nfs-blue);
  font-family: var(--nfs-ff-mono);
}

/* Breakdown */
.nfs-breakdown {
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2) 50%);
  border-radius: var(--nfs-r);
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.nfs-breakdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 0.5px solid var(--nfs-b1);
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
}

.nfs-breakdown-item:last-child {
  border-bottom: none;
}

.nfs-breakdown-item span:first-child {
  color: var(--nfs-t3);
}

.nfs-breakdown-item span:last-child {
  font-weight: 600;
  color: var(--nfs-t1);
  font-family: var(--nfs-ff-mono);
}

.nfs-breakdown-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  margin-top: 0.5rem;
  border-top: 1px solid var(--nfs-b2);
  font-family: var(--nfs-ff);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--nfs-t2);
}

.nfs-breakdown-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  margin-top: 0.75rem;
  background: linear-gradient(135deg, rgba(20, 163, 74, 0.08), rgba(20, 163, 74, 0.03));
  border: 0.5px solid rgba(20, 163, 74, 0.2);
  border-radius: 8px;
  font-family: var(--nfs-ff);
}

.nfs-breakdown-total span:first-child {
  font-size: 1rem;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-breakdown-total span:last-child {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--nfs-green);
  font-family: var(--nfs-ff-mono);
}

/* Savings */
.nfs-savings {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(20, 163, 74, 0.1), rgba(20, 163, 74, 0.04));
  border: 0.5px solid rgba(20, 163, 74, 0.22);
  border-radius: var(--nfs-r);
  padding: 1.25rem;
  margin: 1.5rem 0;
}

.nfs-savings-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--nfs-green-bright) 0%, var(--nfs-green) 50%, var(--nfs-green-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  flex-shrink: 0;
  animation: nfs-savings-pulse 2s ease-in-out infinite;
}

@keyframes nfs-savings-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.nfs-savings-label {
  font-family: var(--nfs-ff);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nfs-t4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nfs-savings-value {
  font-family: var(--nfs-ff-mono);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--nfs-green);
  line-height: 1;
  margin: 0.25rem 0;
}

/* Stub (заглушка) */
.nfs-import-stub {
  background: linear-gradient(170deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.nfs-import-stub-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
  color: var(--nfs-t3);
}

.nfs-import-stub-title {
  font-family: var(--nfs-ff);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nfs-t1);
  margin: 0 0 0.75rem 0;
}

.nfs-import-stub-text {
  font-family: var(--nfs-ff);
  font-size: 0.9375rem;
  color: var(--nfs-t3);
  max-width: 500px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════
   AI ASSISTANT SECTION
   ══════════════════════════════════════════════════════════ */

.nfs-ai-section,
section.ai-section {
  padding: 5rem 0;
  background: var(--nfs-bg);
}

.nfs-ai-card {
  background: linear-gradient(155deg, #0C1630 0%, #0A1020 60%, #101828 100%);
  border-radius: var(--nfs-rl);
  border: 0.5px solid rgba(26, 95, 217, 0.22);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(26, 95, 217, 0.18);
  padding: 2rem;
}

/* Анимированная полоса сверху карточки ИИ отключена */
.nfs-ai-card::before {
  content: none;
  display: none;
}

.nfs-ai-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.nfs-ai-info-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  border: 0.5px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nfs-ai-info-btn:hover {
  background: rgba(26, 95, 217, 0.2);
  border-color: rgba(26, 95, 217, 0.4);
  color: var(--nfs-blue3);
}

.nfs-ai-input-section {
  max-width: 600px;
  margin: 0 auto;
}

.nfs-ai-label {
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.75rem;
  display: block;
}

.nfs-ai-input-wrapper {
  position: relative;
  margin-bottom: 1.5rem;
}

.nfs-ai-input-wrapper i {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nfs-t4);
  font-size: 0.875rem;
}

.nfs-ai-input {
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  font-family: var(--nfs-ff);
  font-size: 0.9375rem;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}

.nfs-ai-input::placeholder {
  color: rgba(255,255,255,0.4);
}

.nfs-ai-input:focus {
  background: rgba(26, 95, 217, 0.1);
  border-color: rgba(26, 95, 217, 0.5);
  box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.15);
}

.nfs-ai-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: rgba(255,255,255,0.4);
  font-family: var(--nfs-ff);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.nfs-ai-divider::before,
.nfs-ai-divider::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: rgba(255,255,255,0.12);
}

.nfs-ai-upload {
  border: 1.5px dashed rgba(255,255,255,0.2);
  border-radius: var(--nfs-r);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 1.5rem;
}

.nfs-ai-upload:hover {
  border-color: rgba(26, 95, 217, 0.5);
  background: rgba(26, 95, 217, 0.08);
}

.nfs-ai-upload i {
  font-size: 2rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
  display: block;
}

.nfs-ai-upload p {
  font-family: var(--nfs-ff);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.7);
  margin: 0 0 0.25rem 0;
}

.nfs-ai-upload span {
  font-family: var(--nfs-ff);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
}

/* CTA карточка внутри AI */
.nfs-ai-cta {
  background: linear-gradient(135deg, rgba(26, 95, 217, 0.15), rgba(26, 95, 217, 0.08));
  border: 0.5px solid rgba(26, 95, 217, 0.3);
  border-radius: var(--nfs-r);
  padding: 1.25rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

.nfs-ai-cta-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--nfs-amber-bright), var(--nfs-amber));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.75rem;
  color: #fff;
  font-size: 1rem;
}

.nfs-ai-cta h4 {
  font-family: var(--nfs-ff);
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 0.5rem 0;
}

.nfs-ai-cta p {
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  margin: 0 0 1rem 0;
}

.nfs-ai-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nfs-ff);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 0.625rem 1.25rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: linear-gradient(150deg, var(--nfs-amber-bright), var(--nfs-amber), var(--nfs-amber-dark));
  color: #fff;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
  transition: all 0.2s ease;
}

.nfs-ai-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* Кнопка анализа */
.nfs-ai-analyze-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--nfs-ff);
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue2) 40%, var(--nfs-blue) 70%, #1248B0 100%);
  color: #fff;
  box-shadow: 
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 2px 12px rgba(26, 95, 217, 0.4);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.nfs-ai-analyze-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.4s;
}

.nfs-ai-analyze-btn:hover::after {
  background-position: -200% center;
}

.nfs-ai-analyze-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 0 0 1px rgba(59,127,255,0.6),
    0 4px 20px rgba(26, 95, 217, 0.45);
}

.nfs-ai-tokens {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 1rem;
  font-family: var(--nfs-ff);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.5);
}

.nfs-ai-tokens i {
  color: var(--nfs-amber);
}

.nfs-ai-tokens strong {
  color: var(--nfs-amber-bright);
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */

.nfs-footer {
  background: linear-gradient(180deg, var(--nfs-cockpit-mid) 0%, var(--nfs-cockpit) 100%);
  padding: 0;
  position: relative;
}

/* Анимированная полоса сверху */
.nfs-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--nfs-blue) 0%, var(--nfs-blue3) 15%, #fff 25%, var(--nfs-blue3) 35%,
    var(--nfs-red) 50%, #ff9999 62%, var(--nfs-red) 72%,
    var(--nfs-ch3) 82%, #fff 90%, var(--nfs-ch3) 100%
  );
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
}

.nfs-footer-content {
  padding: 3.5rem 0 2rem;
}

.nfs-footer-brand {
  margin-bottom: 1rem;
}

.nfs-footer-brand img {
  height: 40px;
  width: auto;
}

.nfs-footer-logo-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 24px;
}

.nfs-footer-logo-bars .bar {
  width: 5px;
  border-radius: 1.5px;
  transform: skewX(-12deg);
}

.nfs-footer-logo-bars .bar-1 {
  background: linear-gradient(180deg, #3B7FFF, #1A5FD9, #0A2A80, #1A5FD9, #3B7FFF);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite;
  height: 24px;
}

.nfs-footer-logo-bars .bar-2 {
  background: linear-gradient(180deg, #E03030, #C92222, #801010, #C92222, #E03030);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite 0.5s;
  height: 18px;
}

.nfs-footer-logo-bars .bar-3 {
  background: linear-gradient(180deg, #FFFFFF, #D8DCE8, #909AAE, #D8DCE8, #FFFFFF);
  background-size: 100% 300%;
  animation: nfs-shimmer-vertical 3s linear infinite 1s;
  height: 12px;
}

.nfs-footer-description {
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  max-width: 280px;
}

.nfs-footer-social {
  display: flex;
  gap: 0.75rem;
}

.nfs-footer-social-link {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 1rem;
  transition: all 0.2s ease;
  text-decoration: none;
}

.nfs-footer-social-link:hover {
  background: rgba(26, 95, 217, 0.2);
  border-color: rgba(26, 95, 217, 0.4);
  color: var(--nfs-blue3);
}

.nfs-footer-title {
  font-family: var(--nfs-ff);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0 0 1.25rem 0;
}

.nfs-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nfs-footer-links li {
  margin-bottom: 0.75rem;
}

.nfs-footer-links a {
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nfs-footer-links a:hover {
  color: var(--nfs-blue3);
}

.nfs-footer-contacts {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
}

.nfs-footer-contacts li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
}

.nfs-footer-contacts li i {
  color: var(--nfs-blue3);
  font-size: 0.875rem;
  margin-top: 0.125rem;
}

.nfs-footer-contacts a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nfs-footer-contacts a:hover {
  color: var(--nfs-blue3);
}

/* Newsletter */
.nfs-footer-newsletter h5 {
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin: 0 0 0.75rem 0;
}

.nfs-newsletter-form {
  display: flex;
  gap: 0.5rem;
}

.nfs-newsletter-input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  font-family: var(--nfs-ff);
  font-size: 0.875rem;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  outline: none;
  transition: all 0.2s ease;
}

.nfs-newsletter-input::placeholder {
  color: rgba(255,255,255,0.4);
}

.nfs-newsletter-input:focus {
  background: rgba(26, 95, 217, 0.1);
  border-color: rgba(26, 95, 217, 0.5);
}

.nfs-newsletter-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue) 50%, #1248B0 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(26, 95, 217, 0.3);
}

.nfs-newsletter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(26, 95, 217, 0.4);
}

/* Footer bottom */
.nfs-footer-bottom {
  border-top: 0.5px solid rgba(255,255,255,0.08);
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.nfs-footer-bottom p {
  font-family: var(--nfs-ff);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

.nfs-footer-bottom-links {
  display: flex;
  gap: 1.5rem;
}

.nfs-footer-bottom-links a {
  font-family: var(--nfs-ff);
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s ease;
}

.nfs-footer-bottom-links a:hover {
  color: var(--nfs-blue3);
}

/* Back to top */
.nfs-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue) 50%, #1248B0 100%);
  border: none;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(26, 95, 217, 0.4);
  z-index: 100;
}

.nfs-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nfs-back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 24px rgba(26, 95, 217, 0.5);
}

/* ══════════════════════════════════════════════════════════
   ИМПОРТ: сетка «этапы + калькулятор» (референс nfsauto_homepage)
   ══════════════════════════════════════════════════════════ */

.import-section .section-header {
  text-align: left;
  margin-bottom: 2rem;
}

.import-section .section-header .nfs-section-underline,
.import-section .section-header .section-underline {
  margin-left: 0;
  margin-right: 0;
}

.nfs-import-grid,
.import-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: start;
}

.nfs-import-stages {
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* CTA start-line в карточке этапов импорта (после этапа 6) */
.nfs-import-stages .nfs-import-start-line-embed {
  padding: 14px 18px 16px;
}

.nfs-stage-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--nfs-b1);
  transition: background 0.15s;
}

.nfs-stage-row:last-child {
  border-bottom: none;
}

.nfs-stage-row:hover {
  background: rgba(26, 95, 217, 0.03);
}

.nfs-stage-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  margin-top: 1px;
}

.sn-blue {
  background: linear-gradient(150deg, var(--nfs-blue3), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.15);
}

.sn-gray {
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  color: var(--nfs-ch5);
  border: 1.5px solid var(--nfs-ch3);
}

.nfs-stage-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
  margin-bottom: 2px;
}

.nfs-stage-desc {
  font-size: 11px;
  color: var(--nfs-t3);
  line-height: 1.5;
}

.nfs-stage-tag {
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 4px;
}

.st-free {
  background: rgba(20, 163, 74, 0.1);
  color: var(--nfs-green);
  border: 0.5px solid rgba(20, 163, 74, 0.2);
}

.nfs-import-calc-column {
  min-width: 0;
}

/* ИИ: фон и сетка как в референсе (класс только .ai-section) */
.nfs-ai-section.ai-section,
section#aiAssistantSection.ai-section {
  background: linear-gradient(155deg, #0d1117 0%, #111827 60%, #101828 100%);
  position: relative;
  overflow: hidden;
}

.nfs-ai-section.ai-section::before,
section#aiAssistantSection.ai-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 80% 50%, rgba(26, 95, 217, 0.06), transparent);
  pointer-events: none;
}

/* Контент ИИ-секции — .section-inner как в референсе */
.nfs-ai-section.ai-section > .container,
section#aiAssistantSection.ai-section > .section-inner {
  position: relative;
  z-index: 1;
}

.ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.ai-left .nfs-section-eyebrow {
  color: var(--nfs-blue3);
}

h2.ai-title {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0 0 10px 0;
  line-height: 1.2;
  font-family: var(--nfs-ff);
}

.ai-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.7;
  margin: 0 0 24px 0;
  max-width: 420px;
}

.ai-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.ai-feat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ai-feat-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
}

.nfs-ai-section .nfs-ai-card.ai-box,
section#aiAssistantSection.ai-section .nfs-ai-card.ai-box {
  border-radius: 14px;
  padding: 20px;
}

.ai-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-box-head-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(43, 111, 232, 0.2);
  border: 0.5px solid rgba(59, 127, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(59, 127, 255, 0.2);
}

.ai-box-head-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.ai-box-head-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.ai-box-head-text {
  flex: 1;
  min-width: 0;
}

.ai-box-head-badge {
  margin-left: auto;
  background: rgba(43, 111, 232, 0.2);
  color: #7ab3ff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  border: 0.5px solid rgba(59, 127, 255, 0.3);
}

.ai-inp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.ai-inp-wrap .nfs-ai-input {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.ai-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
}

.ai-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
}

.ai-check-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 5px currentColor;
}

.ai-check-text {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}

.ai-token-note {
  text-align: center;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nfs-ai-section .btn-ai,
section#aiAssistantSection.ai-section .btn-ai {
  width: 100%;
  padding: 11px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(150deg, var(--nfs-blue3), var(--nfs-blue), #1248b0);
  color: #fff;
  font-family: var(--nfs-ff);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(26, 95, 217, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 0;
}

.nfs-ai-section .ai-box-info-btn,
section#aiAssistantSection.ai-section .ai-box-info-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
}

.nfs-ai-eyebrow-line {
  background: linear-gradient(90deg, var(--nfs-blue3), transparent) !important;
}

/* Вертикальные отступы контента каталога на главной */
#carListingsSection > .container {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Заголовки главной: как в референсе nfsauto_homepage — влево, каталог — ссылка справа */
#carListingsSection .nfs-listings-header {
  text-align: left;
}

#carListingsSection .nfs-section-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

#carListingsSection .nfs-section-header-inner > div:first-child {
  text-align: left;
  flex: 1;
  min-width: 200px;
}

#carListingsSection .nfs-section-eyebrow {
  justify-content: flex-start;
}

#carListingsSection .nfs-section-title,
#carListingsSection .nfs-section-subtitle {
  align-items: flex-start;
  text-align: left;
}

/* Заголовок «Популярные предложения» — одна строка (базовый .nfs-section-title — column) */
#carListingsSection .nfs-section-title {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.2em;
  white-space: nowrap;
}

#carListingsSection .nfs-section-subtitle {
  margin-left: 0;
  margin-right: 0;
}

#featuresSection .nfs-section-header {
  text-align: left;
}

#featuresSection .nfs-sec-label,
#featuresSection .nfs-section-title,
#featuresSection .nfs-section-subtitle {
  text-align: left;
}

#featuresSection .nfs-section-title {
  align-items: flex-start;
}

#featuresSection .nfs-section-subtitle {
  margin-left: 0;
  margin-right: 0;
  align-items: flex-start;
}

#importSection .section-header .nfs-section-title,
#importSection .section-header .nfs-section-subtitle {
  align-items: flex-start;
  text-align: left;
}

/* Заголовок «Импорт под ключ … из Кореи» — одна строка (базовый .nfs-section-title — column) */
#importSection .section-header .nfs-section-title {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.2em;
  white-space: nowrap;
}

#importSection .section-header .nfs-section-subtitle {
  margin-left: 0;
  margin-right: 0;
}

#aiAssistantSection .ai-left {
  text-align: left;
}

#aiAssistantSection .nfs-section-eyebrow {
  justify-content: flex-start;
}

#aiAssistantSection .ai-sub {
  margin-left: 0;
  margin-right: 0;
}

/* Тарифы ИИ-токенов под двухколоночной сеткой ИИ-секции */
.ai-section-token-wrap {
  margin-top: 40px;
  width: 100%;
  max-width: 100%;
}

/* Убираем верхнюю анимированную полоску (nfs-ds4-token-card::before) */
#aiAssistantSection .ai-section-token-wrap .nfs-ds4-token-card::before {
  display: none;
  content: none;
}

.ai-section-token-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-section-token-card-head-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(59, 127, 255, 0.25), rgba(26, 95, 217, 0.12));
  border: 0.5px solid rgba(59, 127, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.ai-section-token-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.ai-section-token-card-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}

.ai-section-token-unit {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.ai-section-token-badge-pro {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.45);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
}

.ai-section-token-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ai-section-token-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 900px) {
  .ai-section-token-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .nfs-import-grid,
  .import-grid {
    grid-template-columns: 1fr;
  }

  .ai-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   АДАПТИВНОСТЬ
   ══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .nfs-section {
    padding: 3.5rem 0;
  }
  
  .nfs-section-title {
    font-size: 1.75rem;
  }
  
  .nfs-section-subtitle {
    font-size: 1rem;
  }
  
  .nfs-calculator {
    padding: 1.5rem;
  }
  
  .nfs-ai-card {
    padding: 1.5rem;
  }
  
  .nfs-footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  
  .nfs-footer-bottom-links {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nfs-feature-card::before,
  .nfs-calculator::before,
  .nfs-ai-card::before,
  .nfs-footer::before,
  .nfs-savings-icon,
  .nfs-footer-logo-bars .bar {
    animation: none;
  }
}

/* === css/nfs-ds-navigation.css === */
/* ═══════════════════════════════════════════════════════════════
   NFS Auto Design System — NAVIGATION PACK
   12 систем (A–L) · SVG Motion · Навигация и акценты
   ═══════════════════════════════════════════════════════════════ */

/* Маппинг переменных на дизайн-систему NFS */
.nfs-navigation-pack {
  --white: var(--nfs-white, #fff);
  --bg: var(--nfs-bg, #F0F3F8);
  --surface: var(--nfs-surface, #fff);
  --blue: var(--nfs-blue, #1A5FD9);
  --blue2: var(--nfs-blue2, #2B6FE8);
  --blue3: var(--nfs-blue3, #3B7FFF);
  --blue-g: var(--nfs-blue-g, linear-gradient(150deg, #3B7FFF, #1A5FD9, #1248B0));
  --blue-glow: var(--nfs-blue-glow, rgba(26, 95, 217, .28));
  --blue-light: var(--nfs-blue-light, rgba(26, 95, 217, .08));
  --red: var(--nfs-red, #C92222);
  --red2: var(--nfs-red2, #E03030);
  --green: var(--nfs-green, #14A34A);
  --green2: var(--nfs-green2, #22C55E);
  --amber: var(--nfs-amber, #D97706);
  --amber2: var(--nfs-amber2, #F59E0B);
  --ch1: var(--nfs-ch1, #F4F6FA);
  --ch2: var(--nfs-ch2, #E0E5F0);
  --ch3: var(--nfs-ch3, #B8C0D4);
  --ch4: var(--nfs-ch4, #7A86A0);
  --ch5: var(--nfs-ch5, #3A4260);
  --dark: var(--nfs-dark, #0D1117);
  --dark2: var(--nfs-dark2, #111827);
  --dark3: var(--nfs-dark3, #1A2035);
  --t1: var(--nfs-t1, #0D1117);
  --t2: var(--nfs-t2, #2A3450);
  --t3: var(--nfs-t3, #5A6480);
  --t4: var(--nfs-t4, #9AA0B8);
  --b1: var(--nfs-b1, rgba(58, 66, 96, .07));
  --b2: var(--nfs-b2, rgba(58, 66, 96, .12));
  --mono: 'Share Tech Mono', 'Courier New', monospace;
  --ff: 'Montserrat', system-ui, sans-serif;
  font-family: var(--ff);
  color: var(--t1);
}

/* ── CORE ANIMATIONS ── */
@keyframes nfs-nav-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nfs-nav-pulse-glow {
  0%, 100% { opacity: .6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes nfs-nav-pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--glow, rgba(26, 95, 217, .5)); }
  70% { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes nfs-nav-bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

@keyframes nfs-nav-bounce-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

@keyframes nfs-nav-road-scroll {
  0% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -40; }
}

@keyframes nfs-nav-arrow-chase {
  0% { opacity: 0; transform: translateX(-8px); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translateX(8px); }
}

@keyframes nfs-nav-ribbon-shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes nfs-nav-ping {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes nfs-nav-drift-left {
  0% { transform: translateX(6px); opacity: 0; }
  60% { opacity: 1; }
  100% { transform: translateX(0px); opacity: 1; }
}

@keyframes nfs-nav-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(400%); }
}

/* ── LAYOUT ── */
.nfs-navigation-pack .sec {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--t4);
  margin: 24px 0 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nfs-navigation-pack .sec::before {
  content: '';
  width: 3px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--blue) 33%, var(--red) 33% 66%, var(--ch3) 66%);
}

.nfs-navigation-pack .brand-strip {
  height: 2px;
  border-radius: 2px;
  margin: 20px 0;
  background: linear-gradient(90deg, transparent 0%, var(--blue) 10%, var(--blue3) 20%, #fff 28%, var(--blue3) 36%, var(--blue) 44%, var(--red) 52%, #ffaaaa 60%, var(--red) 68%, var(--ch3) 76%, #fff 84%, var(--ch3) 92%, transparent 100%);
  background-size: 300% 100%;
  animation: nfs-nav-shimmer 4s linear infinite;
}

.nfs-navigation-pack .card {
  background: linear-gradient(170deg, var(--white), var(--ch1));
  border: 0.5px solid var(--b1);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.nfs-navigation-pack .dark-card {
  background: linear-gradient(155deg, var(--dark), var(--dark2));
  border: 0.5px solid rgba(26, 95, 217, .2);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
}

.nfs-navigation-pack .dark-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue) 20%, var(--blue3) 30%, #fff 38%, var(--blue3) 46%, var(--red) 58%, #ffaaaa 65%, var(--red) 72%, var(--ch3) 82%, #fff 89%, var(--ch3) 95%, transparent);
  background-size: 300% 100%;
  animation: nfs-nav-shimmer 3.5s linear infinite;
}

.nfs-navigation-pack .g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.nfs-navigation-pack .g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.nfs-navigation-pack .row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.nfs-navigation-pack .lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--t4);
  margin-bottom: 10px;
}

/* ══════════════════════
   A. SCROLL INDICATORS
══════════════════════ */
.nfs-navigation-pack .scroll-road {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.nfs-navigation-pack .sr-text {
  font-size: 9px;
  font-weight: 700;
  color: var(--t4);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 6px;
  text-align: center;
}

.nfs-navigation-pack .chevron-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.nfs-navigation-pack .chev {
  opacity: 0;
  animation: nfs-nav-arrow-chase 1.4s ease-in-out infinite;
}

.nfs-navigation-pack .chev:nth-child(1) { animation-delay: 0s; }
.nfs-navigation-pack .chev:nth-child(2) { animation-delay: .25s; }
.nfs-navigation-pack .chev:nth-child(3) { animation-delay: .5s; }

/* ══════════════════════
   B. ROAD DIVIDERS
══════════════════════ */
.nfs-navigation-pack .road-divider {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
}

.nfs-navigation-pack .road-surface {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--dark) 0%, #0A0E1A 100%);
}

.nfs-navigation-pack .road-shoulder {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
}

.nfs-navigation-pack .road-shoulder.top {
  top: 0;
  background: linear-gradient(90deg, transparent, var(--ch4), transparent);
}

.nfs-navigation-pack .road-shoulder.bot {
  bottom: 0;
  background: linear-gradient(90deg, transparent, var(--ch4), transparent);
}

.nfs-navigation-pack .speed-divider {
  height: 3px;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.nfs-navigation-pack .speed-div-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--blue) 10%, var(--blue3) 18%, #fff 24%, var(--blue3) 30%, var(--blue) 38%, var(--red) 45%, #ffaaaa 52%, var(--red) 58%, var(--ch3) 65%, #fff 72%, var(--ch3) 80%, transparent 100%);
  background-size: 300% 100%;
  animation: nfs-nav-shimmer 3s linear infinite;
}

/* ══════════════════════
   C. DIRECTIONAL ARROWS
══════════════════════ */
.nfs-navigation-pack .chassis-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0.5px solid var(--b2);
  background: linear-gradient(160deg, var(--white), var(--ch1));
  transition: all .2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.nfs-navigation-pack .chassis-arrow:hover {
  border-color: rgba(26, 95, 217, .35);
  box-shadow: 0 0 0 3px var(--blue-glow);
  transform: translateX(2px);
}

.nfs-navigation-pack .chassis-arrow.prev:hover {
  transform: translateX(-2px);
}

.nfs-navigation-pack .ca-icon {
  flex-shrink: 0;
  animation: nfs-nav-bounce-right 1.4s ease-in-out infinite;
}

.nfs-navigation-pack .chassis-arrow.prev .ca-icon {
  animation: none;
}

.nfs-navigation-pack .ca-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t2);
}

.nfs-navigation-pack .ca-sub {
  font-size: 9px;
  color: var(--t4);
}

/* Road waypoint nav */
.nfs-navigation-pack .wp-nav {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  padding: 12px 0;
}

.nfs-navigation-pack .wp-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.nfs-navigation-pack .wp-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--ch3);
  background: linear-gradient(135deg, var(--ch1), var(--ch2));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  font-size: 8px;
  font-weight: 700;
  color: var(--t4);
}

.nfs-navigation-pack .wp-dot.done {
  background: linear-gradient(135deg, var(--green2), var(--green));
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}

.nfs-navigation-pack .wp-dot.active {
  background: var(--blue-g);
  border-color: var(--blue3);
  box-shadow: 0 0 0 3px var(--blue-glow);
  animation: nfs-nav-pulse-ring 1.5s ease-in-out infinite;
  --glow: rgba(26, 95, 217, .5);
}

.nfs-navigation-pack .wp-label {
  font-size: 8px;
  font-weight: 700;
  color: var(--t4);
  text-align: center;
  max-width: 52px;
  line-height: 1.3;
}

.nfs-navigation-pack .wp-road {
  flex: 1;
  height: 3px;
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}

.nfs-navigation-pack .wp-road-track {
  position: absolute;
  inset: 0;
  background: var(--ch2);
}

.nfs-navigation-pack .wp-road-done {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--green2), var(--green));
}

.nfs-navigation-pack .wp-road-dash {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0, rgba(255, 255, 255, .5) 8px, transparent 8px, transparent 16px);
  animation: nfs-nav-road-scroll 1s linear infinite;
}

/* ══════════════════════
   D. ATTENTION ACCENTS
══════════════════════ */
.nfs-navigation-pack .spotlight-wrap {
  position: relative;
  display: inline-block;
}

.nfs-navigation-pack .spotlight-ring {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
}

.nfs-navigation-pack .spotlight-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(26, 95, 217, .5);
  animation: nfs-nav-ping 1.5s ease-out infinite;
}

.nfs-navigation-pack .spotlight-ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: inherit;
  border: 1px solid rgba(26, 95, 217, .25);
  animation: nfs-nav-ping 1.5s ease-out infinite .4s;
}

/* Corner accent */
.nfs-navigation-pack .corner-accent {
  position: relative;
  overflow: hidden;
}

.nfs-navigation-pack .corner-flag {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  overflow: hidden;
  pointer-events: none;
}

/* Scan line highlight */
.nfs-navigation-pack .scan-highlight {
  position: relative;
  overflow: hidden;
}

.nfs-navigation-pack .scan-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent 0%, rgba(26, 95, 217, .08) 50%, transparent 100%);
  animation: nfs-nav-scan 3s linear infinite;
  pointer-events: none;
}

/* Speed stripe accent (left border) */
.nfs-navigation-pack .speed-accent-left {
  border-left: 3px solid transparent;
  padding-left: 12px;
  position: relative;
}

.nfs-navigation-pack .speed-accent-left::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--blue) 0% 33%, var(--red) 33% 66%, var(--ch3) 66%);
  background-size: 100% 300%;
  animation: nfs-nav-shimmer 2.5s linear infinite;
  border-radius: 2px;
}

/* Hot / New ribbon */
.nfs-navigation-pack .ribbon-wrap {
  position: relative;
  overflow: hidden;
}

.nfs-navigation-pack .ribbon {
  position: absolute;
  top: 10px;
  right: -20px;
  background: linear-gradient(135deg, #3B7FFF 0%, #1A5FD9 50%, #fff 51%, #3B7FFF 52%, #1A5FD9 100%);
  background-size: 300% 100%;
  animation: nfs-nav-ribbon-shimmer 2.5s linear infinite;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 4px 32px;
  transform: rotate(35deg);
  transform-origin: center;
  box-shadow: 0 2px 8px rgba(26, 95, 217, .4);
  z-index: 3;
}

.nfs-navigation-pack .ribbon.hot {
  background: linear-gradient(135deg, #E03030 0%, #C92222 50%, #fff 51%, #E03030 52%, #C92222 100%);
  background-size: 300% 100%;
  animation: nfs-nav-ribbon-shimmer 2s linear infinite;
  box-shadow: 0 2px 8px rgba(201, 34, 34, .4);
}

.nfs-navigation-pack .ribbon.sale {
  background: linear-gradient(135deg, #22C55E 0%, #14A34A 50%, #fff 51%, #22C55E 52%, #14A34A 100%);
  background-size: 300% 100%;
  animation: nfs-nav-ribbon-shimmer 2.5s linear infinite;
  box-shadow: 0 2px 8px rgba(34, 197, 94, .4);
}

/* ══════════════════════
   E. CALLOUT TOOLTIPS
══════════════════════ */
.nfs-navigation-pack .callout {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: linear-gradient(155deg, var(--dark), var(--dark2));
  border: 0.5px solid rgba(26, 95, 217, .25);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .2), 0 0 0 0.5px rgba(26, 95, 217, .15);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

.nfs-navigation-pack .callout::before {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 18px;
  width: 12px;
  height: 6px;
  background: var(--dark2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-bottom: none;
}

/* ══════════════════════
   F. CTA FOCUS ELEMENTS
══════════════════════ */
.nfs-navigation-pack .start-line {
  position: relative;
  padding: 16px 16px 16px 20px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--white), var(--ch1));
  border: 0.5px solid var(--b1);
}

.nfs-navigation-pack .start-line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(0deg, var(--dark) 0, var(--dark) 5px, var(--white) 5px, var(--white) 10px, var(--dark) 10px, var(--dark) 15px, var(--white) 15px, var(--white) 20px);
}

.nfs-navigation-pack .start-line::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue) 33%, var(--red) 33%, var(--red) 66%, var(--ch3) 66%);
}

/* Заголовок и подзаголовок start-line (без инлайнов в шаблонах) */
.nfs-navigation-pack .nfs-start-line-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}

.nfs-navigation-pack .nfs-start-line-sub {
  font-size: 10px;
  color: var(--t3);
  margin-bottom: 12px;
}

/* Neon CTA button glow (демо навигация + тулбар каталога «Фильтры») */
.nfs-navigation-pack .neon-cta,
.catalog-toolbar-new .neon-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  /* Вне .nfs-navigation-pack нет --ff/--blue-g — задаём те же значения с fallback */
  font-family: var(--ff, 'Montserrat', system-ui, sans-serif);
  font-weight: 800;
  font-size: 13px;
  background: var(--nfs-blue-g, linear-gradient(150deg, #3B7FFF 0%, #1A5FD9 50%, #1248B0 100%));
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(59, 127, 255, .5), 0 0 20px rgba(59, 127, 255, .3), 0 0 40px rgba(59, 127, 255, .1), 0 4px 14px rgba(26, 95, 217, .4), 0 1px 0 rgba(255, 255, 255, .2) inset;
  animation: nfs-nav-pulse-glow 2.5s ease-in-out infinite;
  letter-spacing: .02em;
}

/* Текст и иконка поверх блика ::after */
.nfs-navigation-pack .neon-cta > *,
.catalog-toolbar-new .neon-cta > * {
  position: relative;
  z-index: 1;
}

.nfs-navigation-pack .neon-cta::after,
.catalog-toolbar-new .neon-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .2) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position .4s;
  pointer-events: none;
}

.nfs-navigation-pack .neon-cta:hover::after,
.catalog-toolbar-new .neon-cta:hover::after {
  background-position: -200% center;
}

.catalog-toolbar-new .neon-cta svg {
  flex-shrink: 0;
}

/* Urgency pulse */
.nfs-navigation-pack .urgency-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--red2);
  box-shadow: 0 0 0 0 rgba(224, 48, 48, .5);
  animation: nfs-nav-pulse-ring 1.2s ease-in-out infinite;
  --glow: rgba(224, 48, 48, .5);
  flex-shrink: 0;
}

/* ══════════════════════
   G. BREADCRUMB (ROAD)
══════════════════════ */
.nfs-navigation-pack .road-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 14px;
  background: linear-gradient(160deg, var(--white), var(--ch1));
  border: 0.5px solid var(--b1);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.nfs-navigation-pack .rbc-item {
  display: flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.nfs-navigation-pack .rbc-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--t3);
  transition: color .15s;
  white-space: nowrap;
}

.nfs-navigation-pack .rbc-text:hover {
  color: var(--blue);
}

.nfs-navigation-pack .rbc-text.active {
  color: var(--t1);
  font-weight: 700;
  cursor: default;
}

.nfs-navigation-pack .rbc-sep {
  flex-shrink: 0;
  margin: 0 4px;
}

/* ══════════════════════
   H. TABS (RACING STYLE)
══════════════════════ */
.nfs-navigation-pack .race-tabs {
  display: flex;
  gap: 0;
  position: relative;
  overflow: hidden;
}

.nfs-navigation-pack .race-tabs::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--blue) 0% 33%, var(--ch3) 33% 66%, var(--ch2) 66%);
  background-size: 300% 100%;
  animation: nfs-nav-shimmer 3s linear infinite;
}

.nfs-navigation-pack .rtab {
  flex: 1;
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--ff);
  color: var(--t4);
  border-bottom: 2px solid transparent;
  transition: all .2s;
  position: relative;
  white-space: nowrap;
}

.nfs-navigation-pack .rtab:hover {
  color: var(--t2);
}

.nfs-navigation-pack .rtab.on {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

.nfs-navigation-pack .rtab.on::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59, 127, 255, .6), transparent);
  border-radius: 2px;
}

/* Pill tabs (speed style) */
.nfs-navigation-pack .speed-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: linear-gradient(160deg, var(--ch1), var(--ch2));
  border-radius: 10px;
  border: 0.5px solid var(--b1);
}

.nfs-navigation-pack .stab {
  flex: 1;
  padding: 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: var(--ff);
  color: var(--t3);
  border-radius: 7px;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}

.nfs-navigation-pack .stab::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  pointer-events: none;
  transition: background-position .4s;
}

.nfs-navigation-pack .stab:hover::after {
  background-position: -200% center;
}

.nfs-navigation-pack .stab.on {
  background: var(--blue-g);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26, 95, 217, .3), 0 1px 0 rgba(255, 255, 255, .15) inset;
}

/* ══════════════════════
   I. PAGINATION
══════════════════════ */
.nfs-navigation-pack .race-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nfs-navigation-pack .pg {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 0.5px solid var(--b2);
  background: linear-gradient(160deg, var(--white), var(--ch1));
  color: var(--t3);
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.nfs-navigation-pack .pg:hover {
  border-color: rgba(26, 95, 217, .4);
  color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-glow);
}

.nfs-navigation-pack .pg.on {
  background: var(--blue-g);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(26, 95, 217, .3), 0 0 0 2px rgba(59, 127, 255, .25);
}

.nfs-navigation-pack .pg.ellipsis {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
  color: var(--t4);
}

/* ══════════════════════
   J. FLOATING HINT ARROW
══════════════════════ */
.nfs-navigation-pack .float-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 20px;
  background: linear-gradient(155deg, var(--dark2), var(--dark3));
  border: 0.5px solid rgba(26, 95, 217, .3);
  color: rgba(255, 255, 255, .7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2), 0 0 0 0.5px rgba(26, 95, 217, .2);
  animation: nfs-nav-drift-left .6s ease both;
}

/* ══════════════════════
   K. SECTION HEADER ACCENT
══════════════════════ */
.nfs-navigation-pack .section-head {
  position: relative;
  margin-bottom: 16px;
}

.nfs-navigation-pack .sh-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nfs-navigation-pack .sh-line {
  height: 1px;
  width: 32px;
  background: linear-gradient(90deg, var(--blue), transparent);
}

.nfs-navigation-pack .sh-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--t1);
  line-height: 1.2;
}

.nfs-navigation-pack .sh-title em {
  font-style: normal;
  background: linear-gradient(135deg, var(--blue2), var(--blue3), var(--blue2));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nfs-nav-shimmer 3s linear infinite;
}

.nfs-navigation-pack .sh-underline {
  height: 3px;
  margin-top: 10px;
  width: 64px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue) 0% 33%, var(--red) 33% 66%, var(--ch3) 66%);
  background-size: 300% 100%;
  animation: nfs-nav-shimmer 2.5s linear infinite;
}

/* ══════════════════════
   L. URGENCY / COUNTDOWN
══════════════════════ */
.nfs-navigation-pack .urgency-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(201, 34, 34, .08), rgba(201, 34, 34, .03));
  border: 0.5px solid rgba(201, 34, 34, .2);
  border-radius: 8px;
}

.nfs-navigation-pack .ub-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--red);
}

.nfs-navigation-pack .ub-sub {
  font-size: 10px;
  color: var(--t3);
  margin-top: 1px;
}

.nfs-navigation-pack .countdown {
  display: flex;
  gap: 6px;
}

.nfs-navigation-pack .cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.nfs-navigation-pack .cd-val {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--red);
  background: rgba(201, 34, 34, .08);
  border: 0.5px solid rgba(201, 34, 34, .2);
  border-radius: 5px;
  padding: 3px 8px;
  line-height: 1;
  min-width: 32px;
  text-align: center;
}

.nfs-navigation-pack .cd-lbl {
  font-size: 8px;
  color: var(--t4);
  font-weight: 700;
  letter-spacing: .08em;
}

.nfs-navigation-pack .cd-sep {
  font-family: var(--mono);
  font-size: 16px;
  color: rgba(201, 34, 34, .4);
  align-self: flex-end;
  margin-bottom: 10px;
}

/* ══════════════════════
   M. PRICE DROP / HIGHLIGHT
══════════════════════ */
.nfs-navigation-pack .price-drop-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(34, 197, 94, .15), rgba(20, 163, 74, .08));
  border: 0.5px solid rgba(34, 197, 94, .3);
  position: relative;
  overflow: hidden;
}

.nfs-navigation-pack .price-drop-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position .4s;
  pointer-events: none;
  animation: nfs-nav-shimmer 2.5s linear infinite;
}

.nfs-navigation-pack .pdb-arrow {
  color: var(--green);
  flex-shrink: 0;
}

.nfs-navigation-pack .pdb-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
}

/* ══════════════════════
   N. CATALOG TOOLBAR
══════════════════════ */
.nfs-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.nfs-toolbar .nfs-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, .12));
  background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  font-family: var(--nfs-ff, 'Montserrat', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t2, #2A3450);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.nfs-toolbar .nfs-btn:hover {
  border-color: rgba(26, 95, 217, .35);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, .28));
}

.nfs-toolbar .nfs-btn.active,
.nfs-toolbar .nfs-btn-chrome.active {
  background: var(--nfs-blue-g, linear-gradient(150deg, #3B7FFF, #1A5FD9, #1248B0));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(26, 95, 217, .3);
}

.nfs-toolbar .nfs-btn-chrome {
  background: linear-gradient(170deg, var(--nfs-ch1, #F4F6FA) 0%, var(--nfs-ch2, #E0E5F0) 100%);
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, .12));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 0 rgba(255, 255, 255, .7) inset;
}

.nfs-toolbar .nfs-btn-chrome:hover {
  background: linear-gradient(170deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  border-color: rgba(26, 95, 217, .25);
}

.nfs-toolbar .nfs-btn svg {
  flex-shrink: 0;
}

.nfs-count-badge {
  font-size: 12px;
  font-weight: 600;
  color: var(--nfs-t3, #5A6480);
  display: flex;
  align-items: center;
  gap: 4px;
}

.nfs-count-badge span {
  font-weight: 700;
  color: var(--nfs-t1, #0D1117);
}

.nfs-sort-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 32px 8px 12px;
  border-radius: 8px;
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, .12));
  background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235A6480' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-family: var(--nfs-ff, 'Montserrat', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t2, #2A3450);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  min-width: 140px;
}

.nfs-sort-select:hover {
  border-color: rgba(26, 95, 217, .35);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, .28));
}

.nfs-sort-select:focus {
  outline: none;
  border-color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, .28));
}

.nfs-view-btns {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: var(--nfs-ch1, #F4F6FA);
  border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, .07));
}

.nfs-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--nfs-t4, #9AA0B8);
  cursor: pointer;
  transition: all .2s;
}

.nfs-view-btn:hover {
  color: var(--nfs-t2, #2A3450);
  background: rgba(255, 255, 255, .6);
}

.nfs-view-btn.active {
  background: var(--nfs-white, #fff);
  color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.nfs-cmp-btn-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, .12));
  background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  font-family: var(--nfs-ff, 'Montserrat', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 700;
  color: var(--nfs-t2, #2A3450);
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.nfs-cmp-btn-inline:hover {
  border-color: rgba(26, 95, 217, .35);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, .28));
}

.nfs-cmp-btn-inline.has-items {
  border-color: var(--nfs-blue, #1A5FD9);
  color: var(--nfs-blue, #1A5FD9);
}

/* nfs-card обёртка для тулбара */
.nfs-card {
  background: linear-gradient(170deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, .07));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* Тулбар внутри nfs-card */
.nfs-card .nfs-toolbar {
  justify-content: space-between;
}

.nfs-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nfs-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ══════════════════════
   O. BREADCRUMBS
══════════════════════ */
.nfs-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--nfs-ff, 'Montserrat', system-ui, sans-serif);
  font-size: 12px;
  flex-wrap: wrap;
}

.nfs-bc-item {
  color: var(--nfs-t3, #5A6480);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s;
  white-space: nowrap;
}

a.nfs-bc-item:hover {
  color: var(--nfs-blue, #1A5FD9);
}

a.nfs-bc-item:focus-visible {
  outline: 2px solid var(--nfs-blue, #1A5FD9);
  outline-offset: 2px;
  border-radius: 2px;
}

.nfs-bc-item.active,
span.nfs-bc-item:last-child {
  color: var(--nfs-t1, #0D1117);
  font-weight: 600;
  cursor: default;
}

.nfs-bc-sep {
  color: var(--nfs-t4, #9AA0B8);
  margin: 0 8px;
  font-size: 11px;
  user-select: none;
}

/* Breadcrumb внутри nfs-card */
.nfs-card .nfs-breadcrumb {
  padding: 0;
}

/* Breadcrumbs section для каталога */
.nfs-breadcrumbs-section {
  padding: 14px 0;
}

/* .container без переопределения: та же сетка, что у основного контента (design-tokens.css),
   чтобы ширина карточки крошек совпадала с тулбаром и колонкой каталога */

/* Светлая тема — единый вид крошек на всех публичных страницах */
.nfs-breadcrumbs-section .nfs-card,
.nfs-breadcrumbs-section .nfs-breadcrumbs-section__card {
  padding: 12px 16px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
  border-radius: var(--nfs-r, 12px);
}

.nfs-breadcrumbs-section .nfs-bc-item {
  color: #64748b;
}

.nfs-breadcrumbs-section a.nfs-bc-item:hover {
  color: var(--nfs-primary, #1a5fd9);
}

.nfs-breadcrumbs-section .nfs-bc-item.active,
.nfs-breadcrumbs-section span.nfs-bc-item:last-child {
  color: #0f172a;
  font-weight: 600;
}

.nfs-breadcrumbs-section .nfs-bc-sep {
  color: #cbd5e1;
}

.nfs-breadcrumbs-section a.nfs-bc-item:focus-visible {
  outline: 2px solid rgba(26, 95, 217, 0.35);
  outline-offset: 2px;
}

/* ── RESPONSIVE ── */
@media (max-width: 992px) {
  .nfs-navigation-pack .g2,
  .nfs-navigation-pack .g3 {
    grid-template-columns: 1fr;
  }
}

/* === css/nfs-ds-v4-pack.css === */
/**
 * NFS Auto — DS Pack v4 (компоненты O–ZB + демо-футер).
 * Префикс .nfs-ds4-* чтобы не конфликтовать с глобальными .hero и т.д.
 * Стили максимально близки к nfsauto_ds_v4_pack.html, но используют токены из nfs-design-system.css.
 */

/* ════════════════════════
   O. HERO SECTION
════════════════════════*/
.nfs-ds4-hero {
  background: linear-gradient(155deg, var(--nfs-cockpit) 0%, #111827 50%, var(--nfs-cockpit-mid) 100%);
  border-radius: var(--nfs-rl);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  border: 0.5px solid rgba(26, 95, 217, 0.2);
}

.nfs-ds4-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--nfs-blue) 15%, var(--nfs-blue3) 25%, #fff 33%, var(--nfs-blue3) 41%, var(--nfs-red) 55%, #ffaaaa 63%, var(--nfs-red) 71%, var(--nfs-ch3) 80%, #fff 87%, var(--nfs-ch3) 93%, transparent 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer 3.5s linear infinite;
}

.nfs-ds4-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(59, 127, 255, 0.2), rgba(26, 95, 217, 0.1));
  border: 0.5px solid rgba(59, 127, 255, 0.35);
  color: #7AB3FF;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.nfs-ds4-hero-h1 {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 8px;
}

.nfs-ds4-hero-h1 em {
  font-style: normal;
  background: linear-gradient(135deg, var(--nfs-blue3), #7AB3FF, var(--nfs-blue3));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: nfs-shimmer-slow 3s linear infinite;
}

.nfs-ds4-hero-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 340px;
}

.nfs-ds4-hero-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.nfs-ds4-hs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nfs-ds4-hs-val {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.nfs-ds4-hs-lbl {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nfs-ds4-hs-div {
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
  align-self: stretch;
}

.nfs-ds4-hero-btns {
  display: flex;
  gap: 10px;
}

.nfs-ds4-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nfs-ff);
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  border: none;
  padding: 9px 18px;
  transition: transform 0.15s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.nfs-ds4-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.4s;
  pointer-events: none;
}

.nfs-ds4-btn:hover::after {
  background-position: -200% center;
}

.nfs-ds4-btn--primary {
  background: var(--nfs-blue-g);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 10px rgba(26, 95, 217, 0.28);
}

.nfs-ds4-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(59, 127, 255, 0.5), 0 0 14px rgba(59, 127, 255, 0.25);
}

.nfs-ds4-btn--ghost {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.nfs-ds4-route-mini {
  position: absolute;
  right: 22px;
  top: 24px;
  width: 220px;
}

.nfs-ds4-route-mini-title {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.nfs-ds4-route-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.nfs-ds4-rs-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
}

.nfs-ds4-rs-dot--active {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  border-color: var(--nfs-blue);
  box-shadow: 0 0 10px var(--nfs-blue-glow);
}

.nfs-ds4-rs-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.nfs-ds4-rs-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 1px;
}

.nfs-ds4-route-connector {
  width: 1.5px;
  height: 12px;
  background: linear-gradient(180deg, var(--nfs-blue) 0%, rgba(255, 255, 255, 0.1) 100%);
  margin: 0 auto 0 13px;
  flex-shrink: 0;
}

/* ════════════════════════
   P. DELIVERY STAGES (6-step)
════════════════════════*/
.nfs-ds4-stages-wrap {
  display: flex;
  gap: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--nfs-rl);
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nfs-ds4-stage-item {
  flex: 1;
  position: relative;
  padding: 14px 12px 14px 14px;
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border-right: 0.5px solid var(--nfs-b1);
  transition: all 0.2s;
  cursor: pointer;
}

.nfs-ds4-stage-item:first-child {
  border-radius: var(--nfs-r) 0 0 var(--nfs-r);
}

.nfs-ds4-stage-item:last-child {
  border-radius: 0 var(--nfs-r) var(--nfs-r) 0;
  border-right: none;
}

.nfs-ds4-stage-item:hover,
.nfs-ds4-stage-item.active {
  background: linear-gradient(150deg, rgba(59, 127, 255, 0.1), rgba(26, 95, 217, 0.05));
  border-color: rgba(26, 95, 217, 0.25);
  z-index: 1;
}

.nfs-ds4-stage-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nfs-ch2), var(--nfs-ch3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--nfs-ch5);
  margin-bottom: 8px;
}

.nfs-ds4-stage-item.active .nfs-ds4-stage-num {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-ds4-stage-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--nfs-t1);
  margin-bottom: 3px;
  line-height: 1.3;
}

.nfs-ds4-stage-item.active .nfs-ds4-stage-title {
  color: var(--nfs-blue);
}

.nfs-ds4-stage-sub {
  font-size: 9px;
  color: var(--nfs-t3);
  line-height: 1.4;
}

/* ════════════════════════
   Q. IMPORT CALCULATOR
════════════════════════*/
.nfs-ds4-calc-wrap {
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nfs-ds4-calc-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  border-radius: 8px;
  padding: 3px;
}

.nfs-ds4-ctab {
  flex: 1;
  padding: 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 6px;
  color: var(--nfs-t3);
  transition: all 0.2s;
  border: none;
  background: transparent;
  font-family: var(--nfs-ff);
}

.nfs-ds4-ctab.on {
  background: linear-gradient(150deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 2px 8px rgba(26, 95, 217, 0.3);
}

.nfs-ds4-calc-slider-group {
  margin-bottom: 14px;
}

.nfs-ds4-csl-head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t3);
  margin-bottom: 6px;
}

.nfs-ds4-csl-val {
  color: var(--nfs-blue);
  font-weight: 800;
}

.nfs-ds4-calc-wrap input[type="range"] {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  border: none;
  background: linear-gradient(90deg, var(--nfs-blue) var(--p, 40%), var(--nfs-ch2) var(--p, 40%));
  -webkit-appearance: none;
}

.nfs-ds4-calc-wrap input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff, var(--nfs-ch1));
  border: 1.5px solid var(--nfs-blue);
  box-shadow: 0 1px 4px rgba(26, 95, 217, 0.25);
}

.nfs-ds4-calc-rows {
  background: rgba(26, 95, 217, 0.04);
  border: 0.5px solid rgba(26, 95, 217, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.nfs-ds4-cr {
  display: flex;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 0.5px solid rgba(26, 95, 217, 0.08);
  font-size: 11px;
}

.nfs-ds4-cr:last-child {
  border-bottom: none;
}

.nfs-ds4-cr-label {
  color: var(--nfs-t3);
  font-weight: 500;
}

.nfs-ds4-cr-val {
  color: var(--nfs-t1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nfs-ds4-cr.total {
  background: linear-gradient(135deg, rgba(26, 95, 217, 0.08), rgba(26, 95, 217, 0.03));
  padding: 10px 12px;
}

.nfs-ds4-cr-total-price {
  font-size: 16px;
  font-weight: 800;
  background: var(--nfs-blue-g);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-ds4-cr-save {
  background: var(--nfs-green-light);
  color: var(--nfs-green);
  border: 0.5px solid rgba(20, 163, 74, 0.2);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}

/* ════════════════════════
   R. TOKEN / SUBSCRIPTION
════════════════════════*/
.nfs-ds4-token-card {
  background: linear-gradient(155deg, var(--nfs-cockpit) 0%, #111827 60%, #101828 100%);
  border: 0.5px solid rgba(26, 95, 217, 0.2);
  border-radius: var(--nfs-rl);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.nfs-ds4-token-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nfs-blue), var(--nfs-blue3), #fff, var(--nfs-blue3), var(--nfs-amber), #fff, var(--nfs-amber), transparent);
  background-size: 300% 100%;
  animation: nfs-shimmer 3s linear infinite;
}

.nfs-ds4-token-pack {
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.nfs-ds4-token-pack:hover,
.nfs-ds4-token-pack.featured {
  border-color: rgba(59, 127, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(59, 127, 255, 0.15), 0 0 16px rgba(59, 127, 255, 0.12);
}

.nfs-ds4-token-pack.featured {
  background: linear-gradient(150deg, rgba(59, 127, 255, 0.12), rgba(26, 95, 217, 0.06));
}

.nfs-ds4-tp-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-flex;
  margin-bottom: 8px;
}

.nfs-ds4-tp-badge.hot {
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(217, 119, 6, 0.1));
  color: #FBBF24;
  border: 0.5px solid rgba(217, 119, 6, 0.3);
}

.nfs-ds4-tp-badge.best {
  background: var(--nfs-blue-g);
  color: #fff;
}

.nfs-ds4-tp-tokens {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.nfs-ds4-tp-price {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

.nfs-ds4-tp-price strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
}

.nfs-ds4-tp-features {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nfs-ds4-tp-feat {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 5px;
}

.nfs-ds4-tp-feat::before {
  content: '✓';
  color: var(--nfs-blue3);
  font-weight: 700;
}

/* ════════════════════════
   S. NOTIFICATIONS / TOASTS
════════════════════════*/
.nfs-ds4-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  animation: nfs-ds4-slide-up 0.3s ease both;
  position: relative;
  overflow: hidden;
}

@keyframes nfs-ds4-slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nfs-ds4-toast::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px 0 0 2px;
}

.nfs-ds4-toast.success::before {
  background: linear-gradient(180deg, #22C55E, #14A34A);
}

.nfs-ds4-toast.error::before {
  background: linear-gradient(180deg, #E03030, var(--nfs-red));
}

.nfs-ds4-toast.info::before {
  background: linear-gradient(180deg, var(--nfs-blue3), var(--nfs-blue));
}

.nfs-ds4-toast.warn::before {
  background: linear-gradient(180deg, #FBBF24, var(--nfs-amber));
}

.nfs-ds4-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG в разметке маленький — заполняем область иконки (36×36 минус скругление) */
.nfs-ds4-toast-icon svg {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.nfs-ds4-toast.success .nfs-ds4-toast-icon {
  background: var(--nfs-green-light);
  color: var(--nfs-green);
}

.nfs-ds4-toast.error .nfs-ds4-toast-icon {
  background: rgba(201, 34, 34, 0.08);
  color: var(--nfs-red);
}

.nfs-ds4-toast.info .nfs-ds4-toast-icon {
  background: var(--nfs-blue-light);
  color: var(--nfs-blue);
}

.nfs-ds4-toast.warn .nfs-ds4-toast-icon {
  background: var(--nfs-amber-light);
  color: var(--nfs-amber);
}

.nfs-ds4-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--nfs-t1);
  line-height: 1.35;
}

.nfs-ds4-toast-msg {
  font-size: 13px;
  color: var(--nfs-t3);
  margin-top: 3px;
  line-height: 1.45;
}

.nfs-ds4-toast-close {
  margin-left: auto;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--nfs-t4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.nfs-ds4-toast-close:hover {
  background: var(--nfs-ch2);
}

/* ════════════════════════
   T. ORDER TRACKING
════════════════════════*/
.nfs-ds4-order-track {
  width: 600px;
  max-width: 100%;
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nfs-ds4-ot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.nfs-ds4-ot-id {
  font-size: 11px;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  background: var(--nfs-blue-light);
  border: 0.5px solid rgba(26, 95, 217, 0.2);
  padding: 3px 8px;
  border-radius: 5px;
  color: var(--nfs-blue);
}

.nfs-ds4-ot-status {
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, rgba(217, 119, 6, 0.12), rgba(217, 119, 6, 0.06));
  border: 0.5px solid rgba(217, 119, 6, 0.25);
  color: var(--nfs-amber);
  padding: 3px 9px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nfs-ds4-ot-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nfs-amber);
  animation: nfs-ds4-pulse-dot 1.5s ease-in-out infinite;
}

@keyframes nfs-ds4-pulse-dot {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.nfs-ds4-ot-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.nfs-ds4-ots {
  display: flex;
  gap: 12px;
  position: relative;
}

.nfs-ds4-ots-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 22px;
  flex-shrink: 0;
}

.nfs-ds4-ots-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  transition: all 0.2s;
}

.nfs-ds4-ots.done .nfs-ds4-ots-circle {
  background: linear-gradient(135deg, #22C55E, #14A34A);
  color: #fff;
  box-shadow: 0 2px 6px rgba(20, 163, 74, 0.3);
}

.nfs-ds4-ots.active .nfs-ds4-ots-circle {
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  color: #fff;
  box-shadow: 0 0 0 3px var(--nfs-blue-glow), 0 2px 8px rgba(26, 95, 217, 0.3);
  font-size: 8px;
  animation: nfs-ds4-pulse-dot 1.5s ease infinite;
}

.nfs-ds4-ots.pending .nfs-ds4-ots-circle {
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  color: var(--nfs-t4);
  border: 1.5px solid var(--nfs-ch3);
}

.nfs-ds4-ots-line {
  flex: 1;
  width: 1.5px;
  background: linear-gradient(180deg, var(--nfs-blue) 0%, var(--nfs-ch2) 100%);
}

.nfs-ds4-ots.pending .nfs-ds4-ots-line {
  background: var(--nfs-ch2);
}

.nfs-ds4-ots-content {
  padding: 0 0 16px 0;
  flex: 1;
}

.nfs-ds4-ots-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-ds4-ots.pending .nfs-ds4-ots-title {
  color: var(--nfs-t4);
}

.nfs-ds4-ots.active .nfs-ds4-ots-title {
  color: var(--nfs-blue);
}

.nfs-ds4-ots-sub {
  font-size: 10px;
  color: var(--nfs-t3);
  margin-top: 2px;
}

.nfs-ds4-ots-tag {
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 5px;
}

.nfs-ds4-ots.done .nfs-ds4-ots-tag {
  background: var(--nfs-green-light);
  color: var(--nfs-green);
  border: 0.5px solid rgba(20, 163, 74, 0.2);
}

.nfs-ds4-ots.active .nfs-ds4-ots-tag {
  background: var(--nfs-blue-light);
  color: var(--nfs-blue);
  border: 0.5px solid rgba(26, 95, 217, 0.2);
}

/* ════════════════════════
   U. PRICE COMPARISON (RB market)
════════════════════════*/
.nfs-ds4-cmp-block {
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nfs-ds4-cmp-bar-wrap {
  margin-bottom: 14px;
}

.nfs-ds4-cmp-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 5px;
}

.nfs-ds4-cmp-bar-track {
  height: 8px;
  background: var(--nfs-ch2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.nfs-ds4-cmp-bar-fill {
  height: 100%;
  border-radius: 4px;
  position: relative;
}

.nfs-ds4-cmp-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: nfs-shimmer 2.5s linear infinite;
}

.nfs-ds4-cmp-saving {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20, 163, 74, 0.2);
  border-radius: 8px;
}

.nfs-ds4-cmp-save-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-green);
}

.nfs-ds4-cmp-save-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--nfs-green);
}

.nfs-ds4-cmp-logo {
  width: 28px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  background: linear-gradient(135deg, rgba(26, 95, 217, 0.12), rgba(26, 95, 217, 0.06));
  border: 0.5px solid rgba(26, 95, 217, 0.2);
  color: var(--nfs-blue);
}

/* ════════════════════════
   V. CHAT / MESSAGING
════════════════════════*/
.nfs-ds4-chat-wrap {
  background: linear-gradient(170deg, var(--nfs-white), var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b1);
  border-radius: var(--nfs-rl);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nfs-ds4-chat-head {
  padding: 12px 16px;
  background: linear-gradient(160deg, var(--nfs-cockpit), #111827);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.nfs-ds4-chat-head::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--nfs-blue), var(--nfs-red), transparent);
  opacity: 0.4;
}

.nfs-ds4-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--nfs-blue2), var(--nfs-blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.nfs-ds4-chat-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.nfs-ds4-chat-online {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
}

.nfs-ds4-chat-online-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.nfs-ds4-chat-msgs {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 140px;
}

.nfs-ds4-msg {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.nfs-ds4-msg.out {
  align-self: flex-end;
  align-items: flex-end;
}

.nfs-ds4-msg.in {
  align-self: flex-start;
}

.nfs-ds4-msg-bubble {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
}

.nfs-ds4-msg.in .nfs-ds4-msg-bubble {
  background: linear-gradient(160deg, var(--nfs-ch1), var(--nfs-ch2));
  color: var(--nfs-t1);
  border-radius: 2px 10px 10px 10px;
  border: 0.5px solid var(--nfs-b1);
}

.nfs-ds4-msg.out .nfs-ds4-msg-bubble {
  background: var(--nfs-blue-g);
  color: #fff;
  border-radius: 10px 2px 10px 10px;
  box-shadow: 0 2px 8px rgba(26, 95, 217, 0.25);
}

.nfs-ds4-msg-time {
  font-size: 9px;
  color: var(--nfs-t4);
  font-weight: 600;
}

.nfs-ds4-chat-input {
  padding: 10px 14px;
  border-top: 0.5px solid var(--nfs-b1);
  display: flex;
  gap: 8px;
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
}

.nfs-ds4-chat-inp {
  flex: 1;
  padding: 8px 12px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  font-family: var(--nfs-ff);
  font-size: 11px;
  background: linear-gradient(180deg, var(--nfs-white), var(--nfs-ch1));
  outline: none;
  color: var(--nfs-t1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) inset;
}

.nfs-ds4-chat-inp:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-ds4-chat-send {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--nfs-blue-g);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(26, 95, 217, 0.28);
}

.nfs-ds4-ibtn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(160deg, #fff, var(--nfs-ch1));
  border: 0.5px solid var(--nfs-b2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--nfs-t3);
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nfs-ds4-ibtn:hover {
  border-color: rgba(26, 95, 217, 0.4);
  color: var(--nfs-blue);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

/* ════════════════════════
   W. MODAL DIALOG
════════════════════════*/
.nfs-ds4-modal-overlay {
  background: rgba(13, 17, 23, 0.45);
  border-radius: var(--nfs-rl);
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.nfs-ds4-modal {
  background: linear-gradient(160deg, var(--nfs-white) 0%, var(--nfs-ch1) 100%);
  border: 0.5px solid var(--nfs-b2);
  border-radius: var(--nfs-rl);
  padding: 22px;
  width: 100%;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
  position: relative;
  overflow: hidden;
}

.nfs-ds4-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nfs-blue) 0% 33%, #fff 33% 35%, var(--nfs-red) 35% 68%, #fff 68% 70%, var(--nfs-ch3) 70% 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer 3s linear infinite;
}

.nfs-ds4-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0.5px solid var(--nfs-b2);
  background: var(--nfs-ch1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nfs-t4);
  transition: all 0.15s;
}

.nfs-ds4-modal-close:hover {
  background: var(--nfs-ch2);
  color: var(--nfs-t1);
}

.nfs-ds4-modal-emoji {
  font-size: 18px;
  margin-bottom: 6px;
  margin-top: 8px;
}

.nfs-ds4-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--nfs-t1);
  margin-bottom: 4px;
}

.nfs-ds4-modal-sub {
  font-size: 11px;
  color: var(--nfs-t3);
  margin-bottom: 16px;
  line-height: 1.6;
}

.nfs-ds4-modal-inp {
  width: 100%;
  padding: 9px 12px;
  border: 0.5px solid var(--nfs-b2);
  border-radius: 8px;
  font-family: var(--nfs-ff);
  font-size: 12px;
  color: var(--nfs-t1);
  background: linear-gradient(180deg, #fff, var(--nfs-ch1));
  outline: none;
  margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) inset;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.nfs-ds4-modal-inp:focus {
  border-color: var(--nfs-b3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow);
}

.nfs-ds4-modal-inp::placeholder {
  color: var(--nfs-t4);
}

/* ════════════════════════
   X. EMPTY STATE
════════════════════════*/
.nfs-ds4-empty-state {
  text-align: center;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.nfs-ds4-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--nfs-ch1), var(--nfs-ch2));
  border: 0.5px solid var(--nfs-b2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.nfs-ds4-empty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--nfs-t1);
}

.nfs-ds4-empty-sub {
  font-size: 12px;
  color: var(--nfs-t3);
  max-width: 220px;
  line-height: 1.6;
}

/* ════════════════════════
   Y. LOADING SKELETON
════════════════════════*/
.nfs-ds4-skel {
  background: linear-gradient(90deg, var(--nfs-ch1) 25%, var(--nfs-ch2) 50%, var(--nfs-ch1) 75%);
  background-size: 200% 100%;
  animation: nfs-shimmer 1.5s linear infinite;
  border-radius: 6px;
}

/* ════════════════════════
   ZA. COMPARISON TABLE
════════════════════════*/
.nfs-ds4-cmp-table {
  width: 100%;
  border-collapse: collapse;
}

.nfs-ds4-cmp-th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nfs-t4);
  border-bottom: 0.5px solid var(--nfs-b2);
}

.nfs-ds4-cmp-th.car-col {
  background: linear-gradient(160deg, var(--nfs-white), var(--nfs-ch1));
  border-radius: 8px 8px 0 0;
  border: 0.5px solid var(--nfs-b2);
  border-bottom: none;
  padding: 12px;
}

.nfs-ds4-cmp-th.highlight {
  background: linear-gradient(150deg, rgba(59, 127, 255, 0.08), rgba(26, 95, 217, 0.03));
  border-color: rgba(26, 95, 217, 0.25);
}

.nfs-ds4-cmp-td {
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t1);
  border-bottom: 0.5px solid var(--nfs-b1);
}

.nfs-ds4-cmp-td.key {
  color: var(--nfs-t3);
  font-weight: 500;
}

.nfs-ds4-cmp-td.highlight {
  background: rgba(26, 95, 217, 0.03);
}

.nfs-ds4-cmp-tr:hover td {
  background: rgba(26, 95, 217, 0.03);
}

.nfs-ds4-cmp-winner {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--nfs-green);
  background: var(--nfs-green-light);
  border: 0.5px solid rgba(20, 163, 74, 0.2);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
}

/* ════════════════════════
   ZB. AI SEARCH
════════════════════════*/
.nfs-ds4-ai-search-box {
  background: linear-gradient(155deg, var(--nfs-cockpit) 0%, #111827 60%, #101828 100%);
  border: 0.5px solid rgba(26, 95, 217, 0.22);
  border-radius: var(--nfs-rl);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.nfs-ds4-ai-search-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--nfs-blue), var(--nfs-blue3), #fff, var(--nfs-amber), var(--nfs-blue3), var(--nfs-blue));
  background-size: 300% 100%;
  animation: nfs-shimmer 3s linear infinite;
}

.nfs-ds4-ai-search-inp {
  width: 100%;
  padding: 11px 48px 11px 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 9px;
  font-family: var(--nfs-ff);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 12px;
}

.nfs-ds4-ai-search-inp:focus {
  border-color: rgba(59, 127, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 127, 255, 0.15);
}

.nfs-ds4-ai-search-inp::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.nfs-ds4-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.nfs-ds4-ai-chip {
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  transition: all 0.2s;
}

.nfs-ds4-ai-chip:hover,
.nfs-ds4-ai-chip.on {
  background: linear-gradient(135deg, rgba(59, 127, 255, 0.2), rgba(26, 95, 217, 0.1));
  border-color: rgba(59, 127, 255, 0.4);
  color: var(--nfs-blue3);
}

.nfs-ds4-ai-result-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}

/* ════════════════════════
   Z. FOOTER — фон и ритм как у .nfs-header; крупнее шрифты и логотип
════════════════════════*/
.nfs-ds4-footer {
  /* Как у шапки: тёмный градиент без резкого перехода к «другому» чёрному */
  background: linear-gradient(155deg, #0d1117 0%, #111827 55%, #151c2e 100%);
  border-radius: 0;
  padding: 40px 0 36px;
  position: relative;
  overflow: hidden;
}

/* Анимированная полоска сверху футера отключена */
.nfs-ds4-footer::before {
  content: none;
  display: none;
}

.nfs-ds4-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 28px 24px;
  margin-bottom: 28px;
}

.nfs-ds4-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

/* Логотип в футере — те же пропорции полос и слова, что в .nfs-header */
.nfs-ds4-footer .nfs-ds4-footer-logo-link {
  text-decoration: none;
  color: inherit;
}

.nfs-ds4-footer .nfs-logo--animated {
  gap: 10px;
}

.nfs-ds4-footer .nfs-logo-word {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #f3f4f6;
  line-height: 1;
  /* Перебиваем градиентный текст из демо/наследования */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #f3f4f6;
  animation: none;
  max-width: min(280px, 100%);
}

.nfs-ds4-footer .nfs-logo-stripes {
  height: 28px;
  flex-shrink: 0;
}

.nfs-ds4-footer .nfs-logo-stripes span {
  width: 5px;
}

.nfs-ds4-footer .nfs-logo-stripes span:nth-child(1) {
  height: 28px;
}

.nfs-ds4-footer .nfs-logo-stripes span:nth-child(2) {
  height: 22px;
}

.nfs-ds4-footer .nfs-logo-stripes span:nth-child(3) {
  height: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .nfs-ds4-footer .nfs-logo-stripes span {
    animation: none !important;
  }
}

/* Демо-блок футера: старые классы без .nfs-logo — крупнее под новый масштаб */
.nfs-ds4-fl-stripes {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 28px;
}

.nfs-ds4-fl-stripes span {
  width: 5px;
  border-radius: 1px;
  transform: skewX(-12deg);
}

.nfs-ds4-fl-logo {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--nfs-ch3) 0%, var(--nfs-blue3) 40%, var(--nfs-ch3) 60%, var(--nfs-ch4) 80%, var(--nfs-ch3) 100%);
  background-size: 300% 100%;
  animation: nfs-shimmer-slow 5s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-ds4-footer-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.65;
  margin-bottom: 18px;
}

/* Нормализованные webp-иконки соцсетей (static/icons/social/) */
.nfs-social-icon {
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.nfs-ds4-social-row {
  display: flex;
  gap: 8px;
}

.nfs-ds4-soc-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  outline: none;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.nfs-ds4-soc-btn .nfs-social-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nfs-ds4-soc-btn:hover {
  background: #f6f8fc;
  border-color: rgba(59, 127, 255, 0.35);
  box-shadow: 0 4px 12px rgba(26, 95, 217, 0.2);
  transform: translateY(-1px);
}

.nfs-ds4-soc-btn:hover .nfs-social-icon {
  opacity: 1;
}

.nfs-ds4-soc-btn:focus-visible {
  outline: 2px solid rgba(59, 127, 255, 0.65);
  outline-offset: 2px;
}

.nfs-ds4-fl-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 12px;
}

.nfs-ds4-fl-link {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
  margin-bottom: 9px;
  cursor: pointer;
  display: block;
  transition: color 0.15s;
  text-decoration: none;
}

.nfs-ds4-fl-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.nfs-ds4-fl-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.nfs-ds4-fl-contact svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.nfs-ds4-footer-subscribe {
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  gap: 8px;
}

.nfs-ds4-fl-email {
  flex: 1;
  background: transparent;
  border: none;
  font-family: var(--nfs-ff);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  outline: none;
}

.nfs-ds4-fl-email::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.nfs-ds4-fl-send {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--nfs-blue-g);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26, 95, 217, 0.3);
}

.nfs-ds4-footer-bottom {
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.nfs-ds4-fb-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}

.nfs-ds4-fb-links {
  display: flex;
  gap: 18px;
}

.nfs-ds4-fb-link {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  cursor: pointer;
  transition: color 0.15s;
  text-decoration: none;
}

.nfs-ds4-fb-link:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Адаптив */
@media (max-width: 820px) {
  .nfs-ds4-hero {
    padding-bottom: 180px;
  }

  .nfs-ds4-route-mini {
    position: static;
    width: 100%;
    margin-top: 20px;
  }

  .nfs-ds4-stages-wrap {
    flex-direction: column;
  }

  .nfs-ds4-stage-item {
    border-right: none;
    border-bottom: 0.5px solid var(--nfs-b1);
  }

  .nfs-ds4-stage-item:first-child {
    border-radius: var(--nfs-r) var(--nfs-r) 0 0;
  }

  .nfs-ds4-stage-item:last-child {
    border-radius: 0 0 var(--nfs-r) var(--nfs-r);
    border-bottom: none;
  }

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

@media (max-width: 520px) {
  .nfs-ds4-footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Утилита для доступности */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === css/nfs-car-card.css === */
/**
 * NFS Car Card v3 — метаданные сверху, actions объединены
 * Хромовые градиенты
 */

/* ══════════════════════════════════════════════════════════
   КОНТЕЙНЕР КАРТОЧКИ
   ══════════════════════════════════════════════════════════ */

.nfs-cc {
  position: relative;
  border-radius: var(--nfs-rl, 14px);
  /* visible: подсказки стикеров не обрезаются; фото режется в .nfs-cc-img */
  overflow: visible;
  cursor: pointer;
  background: linear-gradient(170deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
  /* Покой: малозаметная, но читаемая обводка (0.5px / 7% почти не видно на белом) */
  border: 1px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
  box-shadow:
    0 0 0 1px rgba(58, 66, 96, 0.04),
    0 2px 10px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.nfs-cc:hover {
  border-color: rgba(26, 95, 217, 0.32);
  box-shadow:
    0 0 0 1px rgba(26, 95, 217, 0.14),
    0 0 20px rgba(26, 95, 217, 0.1),
    0 10px 28px rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════════════════
   ИЗОБРАЖЕНИЕ
   ══════════════════════════════════════════════════════════ */

.nfs-cc-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--nfs-rl, 14px) var(--nfs-rl, 14px) 0 0;
  background: linear-gradient(155deg, #E6EBF6 0%, #D5DCF0 50%, #C4CEEA 100%);
}

/* Ссылка на лот заполняет блок — иначе в каталоге часть hit-area уходит в «пустоту» вокруг inline <a> */
.nfs-cc-img > a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

/* Электро фон */
.nfs-cc--electro .nfs-cc-img {
  background: linear-gradient(155deg, #D8EDF0 0%, #C0DCE8 50%, #A8CCD8 100%);
}

/* Люкс фон */
.nfs-cc--luxury .nfs-cc-img {
  background: linear-gradient(155deg, #EDE8E0 0%, #DDD5C5 50%, #C8BFAE 100%);
}

/* Градиент снизу для контраста */
.nfs-cc-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(12,18,40,0.12) 100%);
  pointer-events: none;
  z-index: 1;
}

.nfs-cc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
  position: relative;
  z-index: 2;
  /* Не даём WebKit начать drag-картинку — иначе листание по X в каталоге не срабатывает */
  -webkit-user-drag: none;
  user-select: none;
}

.nfs-cc:hover .nfs-cc-img img {
  transform: none;
  filter: none;
}

/* Флаг страны импорта (Корея / Китай) — правый верхний угол фото */
.nfs-cc-source-flag {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 19px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  filter: drop-shadow(0 2px 6px rgba(15, 23, 42, 0.22));
  pointer-events: none;
}

/* Явно ограничиваем SVG: иначе .nfs-cc-img img {width:100%} растягивает флаг на всё превью */
.nfs-cc-source-flag img,
.nfs-cc-img .nfs-cc-source-flag img {
  display: block;
  width: 28px !important;
  height: 19px !important;
  max-width: 28px !important;
  max-height: 19px !important;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.95);
}

.nfs-cc:hover .nfs-cc-source-flag {
  filter: drop-shadow(0 3px 9px rgba(15, 23, 42, 0.26));
}

/* Pills характеристик — только list-view (см. catalog_new.css) */
.nfs-cc-list-specs {
  display: none;
}

/* Индикатор кадров scrub (полоски внизу превью) */
.nfs-cc-gallery-dots {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  z-index: 5;
  display: flex;
  gap: 4px;
  pointer-events: none;
}

.nfs-cc-gallery-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: background 0.15s ease;
}

.nfs-cc-gallery-dot.is-active {
  background: rgba(255, 255, 255, 0.95);
}

.nfs-cc-img:not(.nfs-cc-img--gallery) .nfs-cc-gallery-dots {
  display: none;
}

/* Стрелки галереи — только мобила / coarse pointer */
.nfs-cc-gallery-nav {
  display: none;
  position: absolute;
  top: 50%;
  z-index: 6;
  transform: translateY(-50%);
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 0.18s ease, background 0.18s ease, transform 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.nfs-cc-gallery-nav--prev {
  left: 0.4rem;
}

.nfs-cc-gallery-nav--next {
  right: 0.4rem;
}

.nfs-cc-gallery-nav:active {
  opacity: 1;
  background: rgba(15, 23, 42, 0.55);
  transform: translateY(-50%) scale(0.96);
}

.nfs-cc-gallery-nav.is-disabled,
.nfs-cc-gallery-nav:disabled {
  opacity: 0.22;
  pointer-events: none;
}

.nfs-cc-gallery-nav svg {
  display: block;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .nfs-cc-img--gallery.nfs-cc-img--gallery-mobile .nfs-cc-gallery-nav {
    display: inline-flex;
  }
}

@media (min-width: 768px) and (hover: hover) {
  .nfs-cc-gallery-nav {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   ACTIONS: избранное + сравнение (справа в строке с ценой)
   ══════════════════════════════════════════════════════════ */

.nfs-cc-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Сброс абсолютного позиционирования из catalog_new.css */
.nfs-cc .car-favorite-btn,
.nfs-cc .btn-compare {
  position: static;
  top: auto;
  right: auto;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
  backdrop-filter: none;
}

.nfs-cc-act-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--nfs-t4, #9AA0B8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.9) inset;
}

/* Размеры иконок — как в шапке (nfs-ico--xl), см. nfs-icons.css */
.nfs-cc-act-btn .nfs-ico--xl {
  width: 20px;
  height: 20px;
}

/* Избранное — красное свечение */
.nfs-cc-act-btn.fav:hover {
  border-color: var(--nfs-red, #C92222);
  color: var(--nfs-red, #C92222);
  box-shadow: 0 0 0 3px var(--nfs-red-glow, rgba(201,34,34,0.22));
}

.nfs-cc-act-btn.fav.active {
  background: linear-gradient(135deg, rgba(201,34,34,0.1), rgba(201,34,34,0.05));
  border-color: var(--nfs-red, #C92222);
  color: var(--nfs-red, #C92222);
}

/* Сравнение — синее свечение */
.nfs-cc-act-btn.cmp:hover {
  border-color: var(--nfs-blue, #1A5FD9);
  color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26,95,217,0.22));
}

.nfs-cc-act-btn.cmp.active {
  background: linear-gradient(135deg, rgba(26,95,217,0.1), rgba(26,95,217,0.05));
  border-color: var(--nfs-blue, #1A5FD9);
  color: var(--nfs-blue, #1A5FD9);
}

/* ══════════════════════════════════════════════════════════
   ВОДЯНОЙ ЗНАК — логотип (полосы + название) в левом верхнем углу фото
   ══════════════════════════════════════════════════════════ */

.nfs-cc-watermark {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
  z-index: 5;
  pointer-events: none;
  max-width: calc(100% - 20px);
}

.nfs-cc-wm-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 8px;
  background: rgba(13, 17, 23, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0.88;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* Мини-полосы в духе .nfs-logo-stripes (без анимации — много карточек на странице) */
.nfs-cc-wm-stripes {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 14px;
  flex-shrink: 0;
}

.nfs-cc-wm-stripes span {
  width: 3px;
  border-radius: 1px;
  transform: skewX(-12deg);
}

.nfs-cc-wm-stripes span:nth-child(1) {
  height: 14px;
  background: linear-gradient(180deg, #3b7fff, #1a5fd9);
}

.nfs-cc-wm-stripes span:nth-child(2) {
  height: 11px;
  background: linear-gradient(180deg, #e03030, #c92222);
}

.nfs-cc-wm-stripes span:nth-child(3) {
  height: 8px;
  background: linear-gradient(180deg, #e8ebf2, #a8b0c4);
}

.nfs-cc-wm-word {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

/* ══════════════════════════════════════════════════════════
   META PANEL — выезжает СВЕРХУ при ховере
   ══════════════════════════════════════════════════════════ */

.nfs-cc-meta-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  background: linear-gradient(180deg, rgba(10,15,40,0.82) 0%, rgba(10,15,40,0.6) 100%);
  backdrop-filter: blur(8px);
  /* Компактная полоса: ~половина прежней высоты (одна строка значений) */
  padding: 5px 10px 5px;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.22, 0.68, 0, 1.2);
}

.nfs-cc:hover .nfs-cc-meta-panel {
  transform: translateY(0);
}

.nfs-cc-meta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Одна строка: блоки на всю ширину панели; при экстремально узкой карточке — скролл */
.nfs-cc-meta-row--single-line {
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.nfs-cc-meta-row--single-line .nfs-cc-mpill {
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Одна строка без подписей — только число + единица */
.nfs-cc-meta-panel .nfs-cc-mpill--compact {
  flex-direction: row;
  gap: 0;
  min-height: 0;
}

.nfs-cc-meta-row--single-line .nfs-cc-mp-div {
  flex-shrink: 0;
}

.nfs-cc-meta-row--single-line .nfs-cc-mpill-val {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfs-cc-mpill {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 60px;
}

.nfs-cc-mpill-lbl {
  font-size: 8px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* Подписи в полосе метаданных — палитра как у demo-sw-body (зелёный градиент) */
.nfs-cc-meta-panel .nfs-cc-mpill-lbl {
  font-weight: 700;
  color: #22c55e;
  background-image: linear-gradient(150deg, #22c55e 0%, #14a34a 50%, #0a6a30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

@supports not (background-clip: text) {
  .nfs-cc-meta-panel .nfs-cc-mpill-lbl {
    color: #22c55e;
    -webkit-text-fill-color: currentColor;
    background-image: none;
  }
}

.nfs-cc-mpill-val {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.nfs-cc-meta-panel .nfs-cc-mpill-val {
  font-size: 10px;
  line-height: 1.15;
  font-weight: 700;
  /* Цвет как у .nfs-cc-mpill-val — белый на тёмной полосе метаданных */
  color: rgba(255, 255, 255, 0.92);
}

/* Каталог: только отступы полосы ×1.5 — выше фон; размер .nfs-cc-mpill-val как у базовой панели */
.catalog-car-card .nfs-cc-meta-panel {
  padding: 7.5px 15px 7.5px;
}

.nfs-cc-mp-div {
  width: 0.5px;
  background: rgba(255,255,255,0.15);
  align-self: stretch;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   ТЕЛО КАРТОЧКИ
   ══════════════════════════════════════════════════════════ */

.nfs-cc-body {
  padding: 11px 14px 13px;
  background: linear-gradient(180deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
  /* Совпадает с .nfs-cc — иначе при overflow:visible квадратный фон перекрывает нижние углы карточки */
  border-radius: 0 0 var(--nfs-rl, 14px) var(--nfs-rl, 14px);
}

.nfs-cc-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nfs-t1, #0D1117);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
  display: block;
  text-decoration: none;
}

.nfs-cc-name:hover {
  color: var(--nfs-blue, #1A5FD9);
}

/* Метаданные под названием — через запятую, полный текст без обрезки (перенос строки при нехватке ширины) */
.nfs-cc-meta-static {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nfs-t3, #64748b);
  margin-bottom: 8px;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: break-word;
}

/* Если строки метаданных нет — прежний зазор между названием и ценой */
.nfs-cc-name + .nfs-cc-foot {
  margin-top: 2px;
}

.nfs-cc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Импорт: статусы и кнопки избранного/сравнения — одна строка над ценой «под ключ» */
.nfs-cc-foot--import {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  align-items: start;
  gap: 4px 10px;
}

.nfs-cc-foot--import .nfs-cc-foot-left {
  display: contents;
}

.nfs-cc-foot--import .nfs-cc-delivery-block {
  display: contents;
}

.nfs-cc-foot--import .nfs-cc-status-pills-wrap {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 4px;
}

.nfs-cc-foot--import .nfs-cc-actions {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.nfs-cc-foot--import .nfs-cc-delivery-block__price-row {
  grid-column: 1 / -1;
  grid-row: 2;
}

.nfs-cc-foot--import .nfs-cc-foot-left > .nfs-cc-price-row {
  grid-column: 1 / -1;
  grid-row: 3;
}

.nfs-cc-foot--import .nfs-cc-foot-left > .nfs-badge {
  grid-column: 1 / -1;
  grid-row: 4;
}

.nfs-cc-foot-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}

.nfs-cc-foot-left .nfs-cc-price-row {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.nfs-cc-delivery-values,
.nfs-cc-car-price-values {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 3px;
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════
   ЦЕНА — градиентная
   ══════════════════════════════════════════════════════════ */

.nfs-cc-price {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.nfs-cc-price--blue {
  background: linear-gradient(135deg, #2B6FE8, #1248B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-cc-price--green {
  background: linear-gradient(135deg, #16A34A, #0A6A30);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-cc-price--bronze {
  background: linear-gradient(135deg, #92400E, #C97020);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nfs-cc-byn {
  font-size: 11px;
  font-weight: 600;
  color: var(--nfs-t3, #5A6480);
  margin-left: 2px;
}

/* Подпись после валюты: «· под ключ», «· цена авто» */
.nfs-cc-byn--note {
  font-size: 10px;
  font-weight: 600;
  color: var(--nfs-t4, #8a94ac);
  margin-left: 0;
}

.nfs-cc-price-row .nfs-cc-price + .nfs-cc-price {
  margin-left: 4px;
}

/* ══════════════════════════════════════════════════════════
   GRID LAYOUTS
   ══════════════════════════════════════════════════════════ */

.nfs-cc-grid {
  display: grid;
  gap: 16px;
}

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

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

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

@media (max-width: 1200px) {
  .nfs-cc-grid--4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
  .nfs-cc-grid--4,
  .nfs-cc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
  .nfs-cc-grid--4,
  .nfs-cc-grid--3,
  .nfs-cc-grid--2 { grid-template-columns: 1fr; }
  
  .nfs-cc-meta-panel {
    padding: 5px 8px 4px;
  }

  .nfs-cc-meta-panel .nfs-cc-mpill-val {
    font-size: 9px;
  }

  .catalog-car-card .nfs-cc-meta-panel {
    padding: 7.5px 12px 6px;
  }
}

/* === css/front.css === */
.front-landing .navbar, .front-landing footer.bg-dark { display: none !important; }
.front-landing main { margin: 0; }

/* Переменные: см. design-tokens.css */
:root {
    --primary-blue: var(--nfs-blue);
    --dark-blue: var(--nfs-blue-hover);
    --darkest-blue: #1e40af;
    --primary-yellow: var(--nfs-orange);
    --light-gray: var(--gray-50);
    --white: var(--gray-100);
    --black: #000000;
    --bg-light: #ffffff;
    --green-light: var(--green-100);
    --green: var(--nfs-green);
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: var(--color-white);
    color: var(--color-text-dark);
}

* { box-sizing: border-box; }

/* .container — design-tokens.css (сетка как в каталоге) */

section { overflow: hidden; }

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

h1, h2, h3, h4, h5, h6, p { margin: 0; }

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

button { border: none; background: none; cursor: pointer; padding: 0; }

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-primary { background-color: var(--color-primary); color: var(--color-white); }
.btn-primary:hover { background-color: var(--color-primary-dark); }

.btn-secondary { background-color: var(--color-secondary); color: var(--color-black); }
.btn-secondary:hover { background-color: var(--color-secondary-dark); }

.btn-outline {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}
.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-outline-dark { border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn-dark { background-color: var(--color-text-dark); color: var(--color-white); }
.btn-light { background-color: var(--color-white); color: var(--color-primary); }

@media (max-width: 768px) {
    h1 { font-size: 36px !important; line-height: 40px !important; }
    h2 { font-size: 30px !important; line-height: 36px !important; }
}

/* Header */
.site-header { background-color: var(--color-white); box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
.header-top { background: linear-gradient(90deg, #1f2937 0%, #111827 100%); color: var(--color-text-lightest-gray); font-size: 14px; }
.header-top-container { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.header-top-left, .header-top-right { display: flex; align-items: center; gap: 24px;     color: #fff;}
.header-contact-item { display: flex; align-items: center; gap: 8px; }
.header-phone-btn { display: flex; align-items: center; gap: 8px; background-color: var(--color-secondary); color: var(--color-black); padding: 6px 16px; border-radius: 9999px; font-weight: 700; }
.header-main { padding: 16px 0; border-bottom: 1px solid var(--color-border-light); }
.header-main-container { display: flex; justify-content: space-between; align-items: center; gap: 32px; }
.logo { display: flex; align-items: center; gap: 12px; }
.logo-icon-wrapper { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 141.42%); border-radius: 12px; padding: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
.logo-text h1 { background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 24px!important; line-height: 32px; font-weight: 700; }
.logo-text p { font-size: 12px; line-height: 16px; color: var(--color-text-light-gray); }
.search-bar { flex-grow: 1; position: relative; display: flex; }
.search-bar input { width: 100%; border: 2px solid #e5e7eb; border-radius: 16px; padding: 19px 50px; font-size: 16px; }
.search-bar > img { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
.search-bar .btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 10px 24px; }
.search-bar[data-global-search] { position: relative; }
.global-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); border-radius: 16px; padding: 16px; max-height: 400px; overflow-y: auto; z-index: 1000; }
.global-search-item { display: flex; gap: 16px; padding: 12px; border-radius: 12px; transition: background 0.2s ease; cursor: pointer; text-decoration: none; color: inherit; }
.global-search-item:hover { background: #f3f4f6; }
.global-search-item img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }
.global-search-item-content { flex: 1; }
.global-search-item-title { font-weight: 600; margin-bottom: 4px; color: #111827; }
.global-search-item-meta { font-size: 14px; color: #6b7280; }
.global-search-empty { text-align: center; color: #6b7280; font-size: 14px; }
.header-nav { display: flex; align-items: center; gap: 12px; }
.header-nav ul { display: flex; gap: 8px; }
.header-nav ul li a { padding: 8px 12px; font-size: 16px; color: var(--color-text-gray); }
.header-nav ul li a:hover, .header-nav ul li a.active { color: var(--color-primary); }
.header-nav ul li.has-dropdown { position: relative; }
.header-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #ffffff; border: 1px solid var(--color-border-light); border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); min-width: 220px; padding: 8px; z-index: 10; }
.header-nav .dropdown-item { display: block; padding: 10px 12px; border-radius: 8px; color: var(--color-text-dark); white-space: nowrap; }
.header-nav .dropdown-item:hover { background-color: #f3f4f6; color: var(--color-primary); }
.header-nav ul li.has-dropdown:hover .dropdown-menu { display: block; }
.btn-icon { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; position: relative; }
.btn-icon span { font-size: 14px; color: var(--color-text-gray); }
.counter-badge { position: absolute; top: 0; right: 0; background: #ef4444; color: white; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 10px; min-width: 18px; text-align: center; }
.header-bottom-nav { background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%); padding: 0; }
.header-bottom-nav .container { display: flex; justify-content: center; }
.header-bottom-nav ul { display: flex; align-items: center; gap: 4px; }
.header-bottom-nav ul li a { display: flex; align-items: center; gap: 8px; padding: 15px 24px; color: var(--color-white); font-weight: 400; font-size: 16px; }
.header-bottom-nav ul li a:hover { background-color: rgba(255,255,255,.1); }
.header-bottom-nav ul li.has-dropdown { position: relative; }
.header-bottom-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #ffffff; border: 1px solid var(--color-border-light); border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); min-width: 220px; padding: 8px; z-index: 10; }
.header-bottom-nav .dropdown-item { display: block; padding: 10px 12px; border-radius: 8px; color: var(--color-text-dark); white-space: nowrap; }
.header-bottom-nav .dropdown-item:hover { background-color: #f3f4f6; color: var(--color-primary); }
.header-bottom-nav ul li.has-dropdown:hover .dropdown-menu { display: block; }
.header-nav .dropdown-menu.active,
.header-bottom-nav .dropdown-menu.active { display: block !important; }
.btn-add-car { background-color: var(--color-secondary); color: var(--color-black) !important; border-radius: 12px; font-weight: 700 !important; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
@media (max-width: 1400px) { .header-main-container { flex-wrap: wrap; } .search-bar { order: 3; width: 100%; flex-basis: 100%; } }
@media (max-width: 992px) { 
  .header-top, .header-bottom-nav { display: none; } 
  .header-main-container { gap: 16px; flex-wrap: wrap; } 
  .logo { order: 1; width: 42%;}
  .search-bar { order: 3; width: 100%; }
  .header-nav { order: 2; flex-direction: row; align-items: center; width: auto; }
  .header-nav ul { display: flex; flex-direction: row; }
  .header-nav ul li.has-dropdown .dropdown-menu { right: 0; left: auto; max-height: 400px; overflow-y: auto; left: 0;}
  .header-nav .btn-icon, .header-nav .btn { font-size: 0; padding: 8px 12px; }
  .header-nav .btn-icon span, .header-nav .btn span { display: none; }
  .header-nav .btn-icon img, .header-nav .btn svg { margin: 0; }
  
}
@media (max-width: 576px) {
  .header-nav { gap: 6px; }
  .header-nav ul li a { padding: 6px 10px; font-size: 14px; }
  .header-nav .dropdown-item { font-size: 14px; padding: 8px 10px; }
  .btn-icon, .header-nav .btn { padding: 6px 10px; }
}

/* Hero */
.hero-section { background: linear-gradient(90deg, var(--primary-blue) 0%, var(--dark-blue) 50%, var(--darkest-blue) 100%);; padding-top: 16px; padding-bottom: 32px; position: relative; overflow: hidden;  color: var(--white);}
/* .hero-section::before { content: ''; position: absolute; inset: 0; background-image: url('/static/images/front/dbe909214f214771b801a590a2a66c4f4213d28a.png'); background-size: cover; background-position: center; opacity: .1; z-index: 1; } */
/* .hero-section::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,24,39,.9) 0%, rgba(30,58,138,.8) 50%, rgba(49,46,129,.9) 100%); z-index: 2; } */

/* Hero Carousel */
.hero-carousel-wrapper { position: relative; flex: 1; min-width: 0; }
.hero-carousel-container { position: relative; width: 100%; height: 500px; overflow: hidden; }
.hero-carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in-out, visibility 0.5s; }
.hero-carousel-slide.active { opacity: 1; visibility: visible; }
.hero-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
.hero-carousel-btn:hover { background: #ffffff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.hero-carousel-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hero-carousel-btn svg { width: 24px; height: 24px; color: var(--color-primary); }
.hero-carousel-prev { left: 20px; }
.hero-carousel-next { right: 20px; }
.hero-carousel-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; }
.carousel-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; }
.carousel-dot.active { background: #ffffff; border-color: var(--color-primary); width: 14px; height: 14px; }
.carousel-dot:hover { background: rgba(255, 255, 255, 0.8); }
.hero-container { position: relative; z-index: 3; display: flex; align-items: center; gap: 32px; }
.hero-content { flex: 1; }
.hero-text-content { display: flex; flex-direction: column; gap: 16px; max-width: 700px; }
.hero-pill { background-color: var(--color-secondary); color: var(--color-black); font-weight: 700; font-size: 12px; padding: 8px 16px; border-radius: 9999px; align-self: flex-start; }
.hero-text-content h1 { font-size: 48px; line-height: 1.1; color: var(--color-white); font-weight: 700; }
.hero-text-content h1 .highlight { background: linear-gradient(90deg, #FACC15, #FB923C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-subtitle { color: var(--color-text-lightest-gray); font-size: 24px; font-weight: 700; }
.hero-description { color: var(--color-text-lightest-gray); font-size: 18px; line-height: 1.6; }
.hero-description .highlight-yellow { color: var(--color-secondary); font-weight: 700; }
.hero-description .highlight-blue { color: #93c5fd; font-weight: 700; }
.hero-actions { display: flex; gap: 12px; margin-top: 16px; }
.hero-actions .btn { gap: 8px; }
.hero-features { display: flex; gap: 24px; margin-top: 32px; }
.hero-feature-item { display: flex; align-items: center; gap: 8px; }
.feature-title { font-size: 14px; color: var(--color-text-lightest-gray); }
.feature-value { font-size: 16px; color: var(--color-white); font-weight: 700; }
.rating-stars { position: relative; width: 80px; height: 16px; }
.rating-stars img { position: absolute; top: 0; }
.hero-image-container { position: relative; min-height: 512px; display: block; width: 100%; height: 100%; }
.hero-carousel-slide .hero-image-container { text-decoration: none; }
.hero-car-image { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
.hero-card { position: absolute; background-color: rgba(255,255,255,.95); border-radius: 12px; padding: 12px 16px; backdrop-filter: blur(1px); box-shadow: 0 8px 10px -6px rgba(0,0,0,.1), 0 20px 25px -5px rgba(0,0,0,.1); }
.card-availability { top: 24px; left: -12px; display: flex; align-items: center; gap: 10px; }
.card-availability > div { display: flex; flex-direction: column; gap: 2px; }
.card-dot { width: 8px; height: 8px; background-color: var(--color-success); border-radius: 50%; flex-shrink: 0; }
.card-title { font-size: 12px; font-weight: 700; color: var(--color-text-dark); margin: 0; line-height: 1.2; }
.card-subtitle { font-size: 12px; color: var(--color-text-gray); margin: 0; line-height: 1.2; }
.card-price { bottom: 24px; right: -12px; background-color: var(--color-secondary); text-align: center; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
.price-value { font-size: 18px; font-weight: 700; color: var(--color-black); margin: 0; line-height: 1.2; }
.price-label { font-size: 12px; color: var(--color-black); margin: 0; line-height: 1.2; }
.card-info { bottom: 100px; right: -12px; max-width: 200px; background-color: rgba(255,255,255,.95); }
.card-info .card-title { margin: 0; }
.card-delivery { bottom: 100px; left: -12px; }
@media (max-width: 1200px) { 
  .hero-container { flex-direction: column; text-align: center; } 
  .hero-text-content { align-items: center; } 
  .hero-actions, .hero-features { justify-content: center; }
  .hero-carousel-wrapper { width: 100%; max-width: 600px; margin: 0 auto; }
  .hero-carousel-container { height: 400px; }
}
@media (max-width: 768px) { 
  .hero-carousel-wrapper { display: none; }
  .hero-text-content h1 { font-size: 36px; } 
  .hero-subtitle { font-size: 20px; } 
  .hero-description { font-size: 16px; } 
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-carousel-btn { width: 40px; height: 40px; }
  .hero-carousel-btn svg { width: 20px; height: 20px; }
  .hero-carousel-prev { left: 10px; }
  .hero-carousel-next { right: 10px; }
  .hero-carousel-dots { bottom: 10px; }
  .carousel-dot { width: 10px; height: 10px; }
  .carousel-dot.active { width: 12px; height: 12px; }
}
@media (max-width: 576px) {
  .hero-carousel-container { height: 300px; }
  .hero-car-image { border-radius: 12px; }
  .hero-card { padding: 8px; font-size: 11px; }
  .card-title { font-size: 11px; }
  .card-subtitle { font-size: 10px; }
  .price-value { font-size: 16px; }
  .price-label { font-size: 11px; }
}

/* Services */
.services-section { background-color: var(--color-white); padding: 64px 0; }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: 36px; line-height: 40px; color: var(--color-text-dark); margin-bottom: 16px; }
.section-header p { font-size: 18px; line-height: 28px; color: var(--color-text-gray); max-width: 650px; margin: 0 auto; }
.services-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-bottom: 32px; }
.arrow-btn { border: 2px solid var(--color-primary); border-radius: 50%; width: 52px; height: 52px; display: flex; justify-content: center; align-items: center; background: transparent; cursor: pointer; transition: all 0.3s ease; }
.arrow-btn:hover:not(:disabled) { background: var(--color-primary); transform: scale(1.05); }
.arrow-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.services-container { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 24px; scrollbar-width: none; }
.services-container > .service-card:not(:last-child) { margin-right: 0; }
.services-container::-webkit-scrollbar { display: none; }
.service-card { flex: 0 0 470px; background: linear-gradient(126deg, #ffffff 0%, #f9fafb 143.11%); border: 1px solid var(--color-border-light); border-radius: 24px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); overflow: hidden; display: flex; flex-direction: column; margin-right: 0; }
.card-image-wrapper { height: 256px; background-size: cover; background-position: center; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; color: var(--color-white); }
.card-image-wrapper::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 50%); }
.card-icon, .card-image-wrapper h3 { position: relative; z-index: 2; }
.card-icon { width: 64px; height: 64px; background-color: rgba(255,255,255,.9); border-radius: 16px; display: flex; justify-content: center; align-items: center; font-size: 30px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
.card-image-wrapper h3 { font-size: 24px; line-height: 32px; align-self: flex-start; }
.card-content { padding: 32px; display: flex; flex-direction: column; gap: 24px; flex-grow: 1; }
.card-content p { font-size: 16px; line-height: 1.6; color: var(--color-text-gray); margin-bottom: 8px; }
.features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 14px; color: var(--color-text-dark); margin-bottom: 8px; }
.features-list li { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.features-list .dot { width: 8px; height: 8px; background-color: var(--color-primary); border-radius: 50%; flex-shrink: 0; }
.card-content .btn { width: 100%; margin-top: 16px; }
.services-cta { margin-top: 64px; background: linear-gradient(90deg, #eff6ff 0%, #fefce8 100%); border-radius: 24px; padding: 32px; text-align: center; }
.services-cta h3 { font-size: 24px; line-height: 32px; color: var(--color-text-dark); margin-bottom: 16px; }
.services-cta p { font-size: 16px; line-height: 1.6; color: var(--color-text-gray); margin-bottom: 24px; }
.services-cta-buttons { display: flex; justify-content: center; gap: 16px; }
@media (max-width: 768px) { .service-card { flex: 0 0 90%; } .services-cta-buttons { flex-direction: column; } }

/* Categories */
.categories-section { background-color: var(--color-white); padding: 48px 0; }
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 32px; margin-bottom: 48px; }
.category-card { background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 24px; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); text-align: center; transition: all 0.3s ease; text-decoration: none; color: inherit; }
.category-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(0,0,0,.15), 0 10px 15px -3px rgba(0,0,0,.1); border-color: var(--color-primary); }
.category-icon-wrapper { width: 96px; height: 96px; background: linear-gradient(135deg, rgba(59,130,246,.1) 0%, rgba(96,165,250,.2) 70.71%, rgba(168,85,247,.2) 141.42%); border: 1px solid rgba(191,219,254,.3); border-radius: 16px; display: flex; justify-content: center; align-items: center; }
.category-icon-wrapper img { width: 64px; height: 64px; }
.category-card h3 { font-size: 14px; font-weight: 700; color: var(--color-text-dark); margin-bottom: 4px; }
.category-card p { font-size: 20px; font-weight: 700; color: var(--color-primary); margin-top: 4px; }
.categories-action { text-align: center; }

/* Process */
.process-section { background-color: #f9fafb; padding: 64px 0; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 48px; margin-top: 48px; margin-bottom: 48px; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #bfdbfe 0%, #60a5fa 50%, #2563eb 100%); transform: translateX(-50%); }
.timeline-item { display: flex; justify-content: space-between; align-items: center; position: relative; }
.timeline-item:nth-child(odd) { flex-direction: row; }
.timeline-item:nth-child(even) { flex-direction: row-reverse; }
.timeline-content, .timeline-image { width: calc(50% - 32px); }
.timeline-content { background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 24px; padding: 32px; box-shadow: 0 8px 10px -6px rgba(0,0,0,.1), 0 20px 25px -5px rgba(0,0,0,.1); display: flex; flex-direction: column; gap: 24px; }
.timeline-header { display: flex; align-items: center; gap: 16px; }
.timeline-number-bg { background: linear-gradient(135deg, #3b82f6 0%, #9333ea 141.42%); color: var(--color-white); width: 64px; height: 64px; border-radius: 16px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: 700; flex-shrink: 0; }
.timeline-title { display: flex; flex-direction: column; gap: 4px; }
.timeline-title h3 { font-size: 20px; line-height: 28px; color: var(--color-text-dark); }
.timeline-meta { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-text-light-gray); }
.timeline-icon { margin-left: auto; font-size: 30px; }
.timeline-description { font-size: 16px; line-height: 1.6; color: var(--color-text-gray); }
.timeline-footer { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-success); }
.timeline-image { height: 256px; border-radius: 24px; background-size: cover; background-position: center; position: relative; box-shadow: 0 8px 10px -6px rgba(0,0,0,.1), 0 20px 25px -5px rgba(0,0,0,.1); }
.timeline-image-tag { position: absolute; bottom: 12px; right: 12px; background-color: rgba(255,255,255,.9); border-radius: 12px; padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--color-primary); }
.process-cta { text-align: center; }
.process-cta .btn { padding: 16px 32px; font-size: 18px; }
.btn-yellow {
    background: linear-gradient(90deg, var(--primary-yellow) 0%, var(--dark-yellow) 100%);
    color: var(--black);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.header-phone-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--primary-yellow);
    color: var(--gray-900);
    font-weight: 700;
    padding: 6px 16px;
    border-radius: 9999px;
}
.header-bottom-nav ul li a {
    color: #fff;
}
@media (max-width: 992px) {
    .categories-grid {grid-template-columns: repeat(2, 1fr);}
    .hero-content {flex-direction: column;}
    .lot-spec-list {grid-template-columns: 1fr !important;}
    .lots-container {margin: 0!important;}
    .lots-container-wrapper .prev {left: -12px!important; }
    .lots-container-wrapper .next {right: -12px!important; }
    .timeline::before { left: 32px; }
    .timeline-item, .timeline-item:nth-child(even) { flex-direction: column!important;width: 80%; align-items: flex-start; gap: 16px; }
    .timeline-content, .timeline-image { width: 100%; margin-left: 80px; }
    .timeline-item:nth-child(odd) .timeline-content, .timeline-item:nth-child(even) .timeline-content { order: 2; }
    .timeline-item:nth-child(odd) .timeline-image, .timeline-item:nth-child(even) .timeline-image { order: 1; }
    .timeline-item::after { content: ''; position: absolute; top: 32px; left: 32px; width: 24px; height: 24px; background-color: var(--color-primary); border: 4px solid var(--color-white); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
}
@media (max-width: 576px) { .timeline::before { left: 15px; } .timeline-content, .timeline-image { margin-left: 40px; } .timeline-item::after { left: 15px; } }

/* Popular lots */
.popular-lots-section { background-color: var(--color-background-light); padding: 64px 0; }
.lots-container-wrapper { position: relative; margin-bottom: 24px; }
.lots-container { display: flex; gap: 24px; overflow-x: auto; padding: 24px; margin: -24px; scrollbar-width: none; }
.lots-container > .lot-card { margin-right: 0; }
.lots-container::-webkit-scrollbar { display: none; }
.lot-card { flex: 0 0 374px; background-color: var(--color-white); border: 1px solid var(--color-border-light); border-radius: 16px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); overflow: hidden; }
.lot-image { height: 192px; background-size: cover; background-position: center; position: relative; }
.lot-price-tag { position: absolute; top: 16px; right: 16px; background-color: var(--color-primary); color: var(--color-white); font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 9999px; }
.lot-info { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.lot-info h3 { font-size: 18px; line-height: 28px; color: var(--color-text-dark); font-weight: 700; margin-bottom: 4px; }
.lot-vin { font-family: 'Consolas', monospace; font-size: 14px; color: var(--color-text-light-gray); margin-bottom: 4px; }
.lot-date { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--color-text-gray); margin-bottom: 8px; }
.lot-info .btn { width: 100%; border-radius: 8px; margin-top: 8px; }
.lots-container-wrapper .arrow-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: var(--color-white); width: 48px; height: 48px; border: none; }
.lots-container-wrapper .prev { left: -24px; }
.lots-container-wrapper .next { right: -24px; }
.lots-pagination { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.lots-pagination .dot { width: 12px; height: 12px; border-radius: 50%; background-color: var(--color-text-lightest-gray); }
.lots-pagination .dot.active { width: 32px; background-color: var(--color-primary); }
.lots-action { text-align: center; }
.lots-action .btn { padding: 16px 32px; font-size: 18px; }

/* Sell car */
.sell-car-section { background: linear-gradient(157deg, #eff6ff 0%, #eff6ff 152.95%); padding: 64px 0; }
.sell-car-content { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.sell-car-benefits, .sell-car-process { background-color: var(--color-white); border-radius: 24px; padding: 32px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
.sell-car-benefits h3, .sell-car-process h3 { font-size: 24px; margin-bottom: 24px; }
.sell-car-benefits ul { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.sell-car-benefits ul li { display: flex; align-items: center; gap: 12px; font-size: 16px; }
.guarantee-box { background: linear-gradient(90deg, #22c55e 0%, #2563eb 100%); color: var(--color-white); border-radius: 24px; padding: 32px; }
.guarantee-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.guarantee-header h4 { font-size: 20px; }
.guarantee-header p { color: #dbeafe; }
.guarantee-box > p { color: #dbeafe; font-size: 16px; line-height: 1.6; }
.process-step { display: flex; align-items: flex-start; gap: 16px; padding: 24px; background-color: var(--color-white); border-radius: 16px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); position: relative; }
.sell-car-process { display: flex; flex-direction: column; gap: 16px; background: transparent; box-shadow: none; padding: 0; }
.step-icon-wrapper { width: 64px; height: 64px; background: linear-gradient(135deg, #3b82f6 0%, #22c55e 141.42%); border-radius: 16px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.step-line { position: absolute; left: 32px; top: 88px; width: 2px; height: 40px; background: linear-gradient(180deg, #3b82f6 0%, #22c55e 100%); }
.process-step:last-child .step-line { display: none; }
.step-info { flex-grow: 1; }
.step-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.step-header h4 { font-size: 18px; }
.step-duration { background-color: #eff6ff; color: var(--color-primary); font-size: 14px; padding: 4px 12px; border-radius: 9999px; display: flex; align-items: center; gap: 4px; }
.step-info p { color: var(--color-text-gray); font-size: 16px; }
.sell-car-cta { background-color: var(--color-white); border-radius: 16px; padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
.sell-car-cta h3 { font-size: 24px; }
.sell-car-cta p { font-size: 16px; color: var(--color-text-gray); }
.sell-car-cta-buttons { display: flex; gap: 16px; }
@media (max-width: 992px) { .sell-car-content { grid-template-columns: 1fr; } }

/* About */
.about-section { background: linear-gradient(164deg, #f9fafb 0%, #eff6ff 161.26%); padding: 64px 0; }
.about-container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.about-text-content { display: flex; flex-direction: column; gap: 24px; }
.about-text-content h2 { font-size: 36px; font-weight: 700; color: var(--color-text-dark); }
.about-text-content h2 .highlight { color: var(--color-primary); }
.about-text-content p { font-size: 16px; line-height: 1.6; color: var(--color-text-gray); }
.about-text-content p .bold { font-weight: 700; color: var(--color-text-dark); }
.ai-feature-box { background: linear-gradient(90deg, #eff6ff 0%, #eff6ff 100%); border-left: 4px solid #22c55e; padding: 16px 20px; border-radius: 0 12px 12px 0; }
.ai-feature-box h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.about-stats { display: flex; gap: 24px; padding-top: 8px; }
/* Только блок «О нас» — без глобального .stat-item (ломал карточку лота и каталог) */
.about-stats .stat-item { text-align: center; flex: 1; }
.stat-number { font-size: 30px; font-weight: 700; color: var(--color-primary); }
.stat-label { font-size: 16px; color: var(--color-text-gray); }
.about-image-content { background-color: var(--color-white); border-radius: 16px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); padding: 32px; }
.about-image-wrapper { border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
.about-image-wrapper img { width: 100%; display: block; }
.why-us-box h3 { font-size: 20px; margin-bottom: 24px; }
.why-us-box ul { display: flex; flex-direction: column; gap: 24px; }
.why-us-box ul li { display: flex; align-items: flex-start; gap: 16px; }
.icon-bg { width: 48px; height: 48px; background-color: #dbeafe; border-radius: 12px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.why-us-box h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.why-us-box p { font-size: 14px; color: var(--color-text-gray); }
@media (max-width: 992px) { .about-container { grid-template-columns: 1fr; } .about-image-content { order: -1; } }

/* Why us */
.why-us-section { background: linear-gradient(156deg, #f9fafb 0%, #eff6ff 151.47%); padding: 32px 0; }
.why-us-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 32px; margin-bottom: 64px; }
.why-us-card { background-color: var(--color-white); border-radius: 24px; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); overflow: hidden; }
.why-us-card .card-image { height: 192px; background-size: cover; background-position: center; position: relative; display: flex; justify-content: flex-end; align-items: flex-start; padding: 16px; }
.why-us-card .card-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 100%); }
.why-us-card .card-tag { position: relative; z-index: 2; background-color: var(--color-secondary); color: var(--color-black); font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 9999px; }
.why-us-card .card-text { padding: 24px; }
.why-us-card h3 { font-size: 20px; margin-bottom: 12px; line-height: 1.4; }
.why-us-card p { font-size: 16px; line-height: 1.6; color: var(--color-text-gray); margin-top: 8px; }
.final-cta-banner { background: linear-gradient(90deg, #2563eb 0%, #9333ea 100%); border-radius: 24px; padding: 48px; position: relative; overflow: hidden; }
.final-cta-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 298px; background-image: url('/static/images/front/3_1555.svg'); background-repeat: no-repeat; opacity: 0.2; }
.cta-content { position: relative; z-index: 2; text-align: center; color: var(--color-white); }
.cta-content h3 { font-size: 30px; font-weight: 700; margin-bottom: 16px; }
.cta-content p { font-size: 20px; line-height: 1.4; color: #dbeafe; max-width: 700px; margin: 0 auto 24px; }
.cta-buttons { display: flex; justify-content: center; gap: 16px; }

/* Testimonials */
.testimonials-section { background: linear-gradient(167deg, #f9fafb 0%, #eff6ff 167.01%); padding: 32px 0; }
.testimonials-slider { display: flex; align-items: center; justify-content: center; gap: 24px; }
.testimonial-main { background-color: var(--color-white); border-radius: 24px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); padding: 48px; display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 896px; width: 100%; position: relative; }
.testimonial-main::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, #2563eb 0%, #9333ea 100%); border-radius: 0 0 24px 24px; }
.testimonial-icon { width: 64px; height: 64px; background-color: #dbeafe; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.testimonial-main blockquote { font-size: 30px; line-height: 36px; color: #374151; text-align: center; max-width: 800px; }
.testimonial-main .rating-stars { display: flex; gap: 0; position: static; height: auto; width: auto; }
.author-info { display: flex; align-items: center; gap: 12px; }
.author-avatar { width: 64px; height: 64px; border-radius: 50%; box-shadow: 0 4px 6px -4px rgba(0,0,0,.1), 0 10px 15px -3px rgba(0,0,0,.1); }
.author-details h4 { font-size: 20px; font-weight: 700; }
.author-details p { font-size: 16px; color: var(--color-text-gray); }
.author-details span { font-size: 14px; color: var(--color-primary); font-weight: 700; }
.slider-dots { display: flex; gap: 8px; }
.slider-dots .dot { width: 12px; height: 12px; border-radius: 50%; background-color: #d1d5db; }
.slider-dots .dot.active { width: 32px; background-color: var(--color-primary); }
@media (max-width: 768px) { .testimonial-main blockquote { font-size: 20px; line-height: 1.5; } .testimonials-slider .arrow-btn { display: none; } }

/* Contact */
.contact-section { background-color: var(--color-white); padding: 64px 0 0; }
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 64px; }
.contact-info-panel, .contact-form-panel { display: flex; flex-direction: column; gap: 24px; }
.contact-info-panel h3, .contact-form-panel h3 { font-size: 24px; font-weight: 700; }
.contact-list { display: flex; flex-direction: column; gap: 24px; }
.contact-list li { display: flex; align-items: flex-start; gap: 16px; }
.contact-list .icon-bg { background-color: #dbeafe; width: 48px; height: 48px; border-radius: 12px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.contact-list h4 { font-size: 16px; font-weight: 700; color: var(--color-text-dark); }
.contact-list p { font-size: 16px; color: var(--color-text-gray); line-height: 1.6; }
.contact-list span { font-size: 14px; color: var(--color-text-light-gray); }
.quick-actions { background: linear-gradient(90deg, #eff6ff 0%, #fefce8 100%); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.quick-actions h4 { font-size: 18px; }
.quick-actions .btn { justify-content: flex-start; gap: 12px; }
.contact-form-panel { background-color: #f9fafb; padding: 32px; border-radius: 16px; }
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.form-row { display: flex; gap: 24px; }
.form-group { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.form-group label { font-size: 14px; color: var(--color-text-dark); }
.form-group input, .form-group textarea { background-color: var(--color-white); border: 1px solid #d1d5db; border-radius: 12px; padding: 16px; font-size: 16px; font-family: 'Montserrat', sans-serif; }
.form-group input::placeholder, .form-group textarea::placeholder { color: #9ca3af; }
.contact-form .btn { gap: 12px; }
.form-notice { font-size: 14px; color: var(--color-text-light-gray); text-align: center; }
.map-placeholder { height: 400px; background-color: #e5e7eb; border-radius: 16px; display: flex; justify-content: center; align-items: center; text-align: center; }
.map-info { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.map-info h4 { font-size: 16px; color: var(--color-text-gray); }
.map-info p { font-size: 14px; color: var(--color-text-light-gray); }
@media (max-width: 992px) { .contact-wrapper { grid-template-columns: 1fr; } .form-row { flex-direction: column; } }

/* Footer */
.site-footer { background-color: var(--color-text-dark); color: var(--color-text-lightest-gray); }
.footer-main { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; padding: 64px 0; }
.footer-about p { font-size: 16px; line-height: 1.6; margin: 24px 0; }
.footer-quick-contact { background-color: var(--color-background-dark-gray); border-radius: 16px; padding: 24px; }
.footer-quick-contact h4 { color: var(--color-secondary); margin-bottom: 16px; }
.footer-quick-contact a { display: flex; align-items: center; gap: 12px; color: var(--color-white); margin-bottom: 12px; }
.footer-quick-contact a:last-child { margin-bottom: 0; }
.footer-links h4 { color: var(--color-secondary); font-size: 18px; margin-bottom: 24px; }
.footer-links ul { display: flex; flex-direction: column; gap: 16px; }
.footer-links ul.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 8px; }
.footer-links ul li a { font-size: 14px; color: var(--color-text-lightest-gray); }
.footer-links ul li a:hover { color: var(--color-white); }
.footer-office h4 { color: var(--color-secondary); font-size: 18px; margin-bottom: 24px; }
.office-address { display: flex; gap: 12px; align-items: flex-start; }
.office-address p { font-size: 16px; line-height: 1.6; }
.office-address span { font-size: 12px; color: var(--color-text-light-gray); }
.footer-cta { background: linear-gradient(90deg, #2563eb 0%, #eab308 100%); border-radius: 16px; padding: 32px; text-align: center; }
.footer-cta h3 { font-size: 24px; font-weight: 700; color: var(--color-white); margin-bottom: 16px; }
.footer-cta p { color: rgba(255,255,255,.9); margin-bottom: 24px; }
.footer-cta-buttons { display: flex; justify-content: center; gap: 16px; }
.footer-bottom { border-top: 1px solid var(--color-background-dark-gray); display: flex; justify-content: space-between; align-items: center; padding: 24px 0; font-size: 14px; color: var(--color-text-extra-light-gray); }
.footer-legal-links { display: flex; gap: 24px; }
    @media (max-width: 992px) { .footer-main { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .footer-bottom { flex-direction: column; gap: 16px; } }

/* ===== CATALOG PAGE STYLES ===== */

/* Top Bar */
.top-bar-wrapper { background: linear-gradient(90deg, var(--gray-800) 0%, var(--gray-900) 100%); color: var(--white); font-size: 14px; }
.top-bar { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.top-bar-contacts, .top-bar-actions { display: flex; align-items: center; gap: 24px; }
.contact-item { display: flex; align-items: center; gap: 8px; }
.contact-phone-btn { display: inline-flex; align-items: center; gap: 8px; background-color: var(--primary-yellow); color: var(--gray-900); font-weight: 700; padding: 6px 16px; border-radius: 9999px; }

/* Main Header */
.main-header-wrapper { background-color: var(--white); border-bottom: 1px solid var(--gray-100); }
.main-header { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 16px; gap: 24px; }
.logo-icon { width: 48px; height: 48px; }
.logo-title { font-size: 24px; font-weight: 700; background: linear-gradient(90deg, var(--primary-blue) 0%, var(--darkest-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }
.logo-subtitle { font-size: 12px; color: var(--gray-500); }
.header-search-wrapper { flex-grow: 1; max-width: 672px; }
.header-search { position: relative; display: flex; width: 100%; }
.header-search input { width: 100%; border: 2px solid var(--gray-200); border-radius: 16px; padding: 19px 50px 19px 50px; font-size: 16px; color: var(--gray-500); }
.header-search .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.header-nav { display: flex; align-items: center; gap: 12px; flex-direction: row;}
.nav-link { padding: 8px 12px; font-size: 16px; color: var(--gray-600); }
.nav-link.active { color: var(--primary-blue); }
.nav-link-icon { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--gray-600); font-size: 14px; }

/* Hero Section */
.breadcrumbs { display: flex; gap: 8px; font-size: 14px; border-bottom: 1px solid rgba(59, 130, 246, 0.2); padding-bottom: 17px; margin-bottom: 32px; }
.breadcrumbs a { color: var(--green-light); }
.breadcrumbs span { color: #93c5fd; }
.breadcrumbs a.active { color: #fde047; }
.hero-content { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hero-icon-wrapper { background-color: rgba(255, 255, 255, 0.1); border-radius: 12px; width: 64px; height: 64px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.hero-text h1 { font-size: 30px; line-height: 36px; margin: 0 0 8px 0; }
.hero-text p { font-size: 18px; line-height: 28px; color: var(--green-light); margin: 0; }
.hero-search-wrapper { max-width: 672px; }
.hero-search { position: relative; }
.hero-search .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
.hero-search input { width: 100%; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 20px 20px 20px 49px; font-size: 16px; color: #bfdbfe; }
.hero-search input::placeholder { color: #bfdbfe; }

/* Catalog Section */
.catalog-section { background: linear-gradient(105deg, var(--light-gray) 0%, #eff6ff 163.31%); padding: 32px 0 80px 0; }
.filters-wrapper { margin-bottom: 32px; }
.filters-title { font-size: 20px; font-weight: 700; color: var(--gray-900); margin: 0 0 16px 0; }
.filter-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.filter-btn { background-color: var(--white); border: 1px solid var(--gray-300); border-radius: 12px; padding: 9px 17px; font-size: 14px; color: var(--gray-600); cursor: pointer; transition: all 0.3s ease; }
.filter-btn:hover { background-color: var(--gray-100); border-color: var(--primary-blue); color: var(--primary-blue); }
.filter-btn.active { background-color: var(--primary-blue); border-color: var(--primary-blue); color: var(--white); }
.filter-btn.reset-btn { background-color: #ef4444; color: white; margin-top: 12px; }
.filter-btn.reset-btn:hover { background-color: #dc2626; }
.controls-bar { background-color: var(--bg-light); border: 1px solid var(--gray-100); border-radius: 16px; box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); padding: 25px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 20px; }
.controls-left, .controls-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.control-btn-group { background-color: var(--gray-100); border-radius: 12px; padding: 11px 24px; display: flex; align-items: center; gap: 12px; border: none; cursor: pointer; }
.view-toggle { display: flex; background-color: var(--gray-100); border-radius: 12px; padding: 4px; }
.view-btn { display: flex; align-items: center; gap: 8px; padding: 7px 16px; border: none; background-color: transparent; border-radius: 8px; cursor: pointer; }
.view-btn.active { background-color: var(--bg-light); color: var(--primary-blue); box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); }
.found-info { display: flex; align-items: center; gap: 16px; }
.found-total { font-size: 16px; color: var(--gray-600); margin: 0; }
.found-total strong { color: var(--primary-blue); }
.found-details { display: flex; gap: 8px; font-size: 14px; color: var(--gray-500); }

/* Car Grid - удалено старое определение, используется новое ниже */
/* Старое определение .car-card удалено - используется новое ниже */
.car-card-image-wrapper { position: relative; height: 224px; }
.car-card-img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; }
.car-card-img:not(.active) { opacity: 0; position: absolute; top: 0; left: 0; }
.car-card-rating { position: absolute; top: 16px; right: 16px; background-color: rgba(0, 0, 0, 0.7); color: var(--white); padding: 4px 8px; border-radius: 8px; font-size: 12px; z-index: 10; }

/* Галерея изображений */
.car-image-gallery { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; }
.car-image-gallery:hover .car-card-img.active { opacity: 0.7; }

.image-indicators { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; }
.indicator { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.3s ease; }
.indicator.active { background-color: rgba(255, 255, 255, 0.9); }
.indicator:hover { background-color: rgba(255, 255, 255, 0.8); }
.car-card-content { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex-grow: 1; }
.car-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.car-card-title-group h3 { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; }
.car-card-title-group p { font-size: 14px; color: var(--gray-600); margin: 0; }
.car-card-price { font-size: 24px; font-weight: 700; background: linear-gradient(90deg, var(--primary-blue) 0%, var(--dark-blue) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; white-space: nowrap; margin-left: 16px; }
.car-card-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spec-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gray-600); }
.spec-item strong { color: var(--black); }
.details-link { color: var(--primary-blue); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 0; }
.car-card-footer { border-top: 1px solid var(--gray-100); padding-top: 17px; display: flex; flex-direction: column; gap: 16px; }
.footer-info { display: flex; justify-content: space-between; align-items: center; }
.info-item { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-500); }
.footer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.footer-actions .btn { width: 100%; padding: 13px 18px; }

/* Load More */
.load-more-wrapper { margin-top: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.progress-bar { width: 100%; max-width: 736px; height: 8px; background-color: var(--gray-200); border-radius: 9999px; overflow: hidden; }
.progress { height: 100%; background: linear-gradient(90deg, var(--primary-blue) 0%, var(--dark-blue) 100%); border-radius: 9999px; transition: width 0.3s ease; }

/* Кнопка "Показать ещё" */
#loadMoreBtn {
    min-width: 200px;
    padding: 12px 32px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

#loadMoreBtn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

#loadMoreBtn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

#loadMoreBtn .btn-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#loadMoreStatus {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0;
}

/* Режим отображения "Список" */
.car-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-card.list-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    max-width: 100%;
    transition: all 0.3s ease;
}

.car-card.list-view:hover {
    transform: translateY(0) scale(1.01);
}

.car-card.list-view .card-image-container {
    width: 220px;
    height: 165px;
    flex-shrink: 0;
}

.car-card.list-view .card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-card.list-view .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.car-card.list-view .card-title {
    font-size: 18px;
    margin-bottom: 0;
}

.car-card.list-view .card-location,
.car-card.list-view .card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
}

.car-card.list-view .card-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.car-card.list-view .spec-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-600);
}

.car-card.list-view .spec-item-hidden {
    display: none;
}

.car-card.list-view .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--gray-200);
}

.car-card.list-view .card-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
}

.car-card.list-view .info-item {
    font-size: 13px;
}

.car-card.list-view .footer-actions {
    display: flex;
    gap: 8px;
    grid-template-columns: auto;
}

.car-card.list-view .footer-actions .btn {
    padding: 8px 16px;
    font-size: 13px;
    white-space: nowrap;
}

.car-card.list-view .rating-badge,
.car-card.list-view .status-badge {
    position: static;
    margin-bottom: 4px;
}

.car-card.list-view {
    min-height: auto;
}

/* Адаптация для мобильных в режиме списка */
@media (max-width: 768px) {
    .car-card.list-view {
        flex-direction: column;
        gap: 12px;
    }
    
    .car-card.list-view .card-image-container {
        width: 100%;
        height: 200px;
    }
    
    .car-card.list-view .card-specs {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .car-card.list-view .card-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .car-card.list-view .footer-actions {
        width: 100%;
    }
    
    .car-card.list-view .footer-actions .btn {
        flex: 1;
    }
}

/* Анимация переключения режимов */
.car-grid,
.car-list {
    transition: opacity 0.2s ease;
}

/* Стильные фильтры */
.filters-offcanvas {
    width: 380px !important;
}

.filters-offcanvas .offcanvas-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 24px;
    border-bottom: none;
}

.filters-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.filters-header-content i {
    font-size: 20px;
}

.filters-offcanvas .offcanvas-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.filters-offcanvas .btn-close {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}

.filters-offcanvas .btn-close:hover {
    opacity: 1;
}

.filters-offcanvas .offcanvas-body {
    padding: 0;
    background: #f8f9fa;
}

.filters-content {
    padding: 16px 0;
}

.filter-group {
    background: white;
    margin-bottom: 12px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.filter-group-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border: none;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-group-header:hover {
    background: #f8f9fa;
}

.filter-group-header[aria-expanded="false"] .filter-toggle-icon {
    transform: rotate(-90deg);
}

.filter-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
}

.filter-group-title i {
    color: #667eea;
    font-size: 14px;
}

.filter-toggle-icon {
    color: #9ca3af;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.filter-group-body {
    border-top: 1px solid #e5e7eb;
}

.filter-options {
    padding: 12px 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.filter-options::-webkit-scrollbar {
    width: 6px;
}

.filter-options::-webkit-scrollbar-track {
    background: #f1f3f4;
}

.filter-options::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.filter-options::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.filter-option-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.filter-option-label:hover {
    background: #f3f4f6;
}

.filter-checkbox {
    display: none;
}

.filter-checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-checkbox:checked + .filter-checkbox-custom {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}

.filter-checkbox:checked + .filter-checkbox-custom::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: white;
    font-size: 11px;
}

.filter-option-text {
    font-size: 14px;
    color: #374151;
    flex: 1;
}

.filter-checkbox:checked ~ .filter-option-text {
    color: #1f2937;
    font-weight: 500;
}

.no-filters {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.no-filters i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-filters p {
    margin: 0;
    font-size: 15px;
}

.filters-offcanvas .offcanvas-footer {
    padding: 20px 24px;
    background: white;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 12px;
}

.filters-offcanvas .offcanvas-footer .btn {
    flex: 1;
    padding: 12px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
}

.filters-offcanvas .offcanvas-footer .btn-outline-secondary {
    border-color: #d1d5db;
    color: #6b7280;
}

.filters-offcanvas .offcanvas-footer .btn-outline-secondary:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.filters-offcanvas .offcanvas-footer .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.filters-offcanvas .offcanvas-footer .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* Фильтр по цене */
.price-filter {
    padding: 16px 24px !important;
}

.price-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.price-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.price-input-group label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin: 0;
}

.price-input-group .form-control {
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
}

.price-input-group .form-control:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.price-separator {
    margin-top: 20px;
    color: #9ca3af;
    font-weight: 500;
}

.price-range-info {
    text-align: center;
    padding: 8px;
    background: #f9fafb;
    border-radius: 6px;
}

.price-range-info small {
    font-size: 12px;
}

/* Адаптация для мобильных */
@media (max-width: 576px) {
    .filters-offcanvas {
        width: 100% !important;
    }
    
    .price-inputs {
        flex-direction: column;
        gap: 8px;
    }
    
    .price-separator {
        display: none;
    }
}

/* Popular Cars Section */
.popular-cars-section { padding: 80px 0; background: linear-gradient(163deg, #eff6ff 0%, #eff6ff 80.05%, #f9fafb 160.1%); position: relative; overflow: hidden; }
.popular-cars-section::before, .popular-cars-section::after { content: ''; position: absolute; border-radius: 9999px; z-index: 0; }
.popular-cars-section::before { width: 128px; height: 128px; background: linear-gradient(135deg, rgba(191, 219, 254, 0.3) 0%, rgba(191, 219, 254, 0) 141.42%); top: 30px; right: 10%; }
.popular-cars-section::after { width: 96px; height: 96px; background: linear-gradient(45deg, rgba(233, 213, 255, 0.3) 0%, rgba(233, 213, 255, 0) 141.42%); bottom: 150px; left: 5%; }
.popular-cars-header { text-align: center; margin-bottom: 32px; }
.popular-cars-header h2 { font-size: 30px; font-weight: 700; background: linear-gradient(90deg, #2563eb 0%, #9333ea 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; margin: 0 0 16px 0; display: inline-flex; align-items: center; gap: 12px; }
.popular-cars-header p { font-size: 18px; color: var(--gray-600); margin: 0 0 16px 0; }
.popular-tags { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.tag { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--gray-500); }
.popular-car-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-bottom: 32px; }
.popular-car-card { background-color: var(--bg-light); border: 1px solid var(--gray-100); border-radius: 12px; box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s ease; }
.popular-car-card:hover { transform: translateY(-5px); }
.popular-car-image-wrapper { position: relative; height: 160px; }
.popular-car-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.popular-car-rating { position: absolute; top: 8px; left: 8px; background: linear-gradient(90deg, #facc15 0%, #fb923c 100%); color: var(--black); padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.popular-car-content { padding: 16px; }
.popular-car-content h3 { font-size: 18px; margin: 0 0 4px 0; }
.model-name { font-size: 14px; color: var(--gray-600); margin: 0 0 8px 0; }
.price { font-size: 20px; font-weight: 700; color: var(--primary-blue); margin: 0 0 12px 0; }
.popular-car-specs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; border-top: 1px solid var(--gray-100); padding-top: 12px; }
.popular-car-specs p { display: flex; justify-content: space-between; font-size: 14px; color: var(--gray-600); margin: 0; }
.popular-car-specs span { font-weight: 700; color: var(--gray-900); }
.popular-car-footer { border-top: 1px solid var(--gray-100); padding-top: 13px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.views { color: var(--gray-500); display: flex; align-items: center; gap: 4px; }
.status { background-color: #eff6ff; color: var(--green); padding: 4px 8px; border-radius: 9999px; }
.consultation-cta { background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 25px; text-align: center; backdrop-filter: blur(1px); }
.consultation-cta h3 { font-size: 20px; margin: 0 0 7px 0; }
.consultation-cta p { font-size: 16px; color: var(--gray-600); margin: 0 0 16px 0; }
.consultation-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.consultation-actions .btn { gap: 8px; }

/* Services Section */
.services-section { padding: 32px 0; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px; }
.service-card { background-color: var(--white); border: 1px solid var(--gray-100); border-radius: 16px; padding: 24px; box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1); }
.service-icon-wrapper { width: 48px; height: 48px; border-radius: 12px; display: flex; justify-content: center; align-items: center; margin-bottom: 16px; }
.service-card h3 { font-size: 20px; margin: 0 0 12px 0; }
.service-card p { font-size: 16px; line-height: 26px; color: var(--gray-600); margin: 0 0 24px 0; }
.service-link { display: inline-block; padding: 9px 1px; font-weight: 700; color: var(--primary-blue); background-color: #eff6ff; border: 1px solid #bfdbfe; text-align: center; width: 100%; border-radius: 8px; }
.service-card:nth-child(2) .service-link { border-color: #bbf7d0; }
.service-card:nth-child(3) .service-link { background-color: #fefce8; border-color: #fef08a; }

/* Final CTA Section */
.final-cta-section { background: linear-gradient(90deg, var(--primary-blue) 0%, #9333ea 100%); border-radius: 24px; padding: 64px 32px; margin: 32px; color: var(--white); text-align: center; }
.final-cta-section h2 { font-size: 36px; font-weight: 700; margin: 0 0 16px 0; }
.final-cta-section > .container > p { font-size: 20px; line-height: 28px; color: var(--green-light); max-width: 800px; margin: 0 auto 32px auto; }
.stats-grid { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
/* Был глобальный .stat-item — давал min-width 250px и padding на всём сайте */
.final-cta-section .stats-grid .stat-item { background-color: rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 16px; min-width: 250px; backdrop-filter: blur(1px); }
.final-cta-section .stats-grid .stat-number { font-size: 24px; font-weight: 700; margin-bottom: 3px; }
.final-cta-section .stats-grid .stat-label { font-size: 16px; color: var(--green-light); }
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta-actions .btn { padding: 18px 32px; font-size: 18px; gap: 8px; }
.btn-light { background-color: var(--white); color: var(--primary-blue); }
.btn-dark { background-color: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); color: var(--white); }

/* Offcanvas Styles */
.offcanvas {
    width: 400px;
    display: flex;
    flex-direction: column;
    height: 100vh; /* Offcanvas занимает всю высоту viewport */
    max-height: 100vh; /* Ограничиваем максимальную высоту */
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .offcanvas {
        width: 90vw; /* На мобильных устройствах шире */
    }
}

.offcanvas-header {
    flex-shrink: 0; /* Header не сжимается */
}

.offcanvas-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0; /* Позволяет flex элементу сжиматься */
    padding-bottom: 1rem; /* Отступ от footer */
    padding-left: 2.5rem;
}

.filters-content {
    padding: 0 1rem 1rem 1rem; /* Добавляем горизонтальный padding и нижний отступ */
}

.filter-group {
    border-bottom: 1px solid var(--gray-100);
    padding-bottom: 1rem;
}
.hero-card.card-availability, .hero-card.card-info {
    color: #000;
}

.filter-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.filter-group-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-check {
    margin-bottom: 0rem;
    padding: 0.25rem 0;
    position: relative;
    display: flex;
    align-items: center;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0;
    margin-right: 0.75rem;
    margin-left: 0;
    border: 2px solid var(--gray-300);
    border-radius: 0.25em;
    cursor: pointer;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.form-check-input:checked {
    background-color: var(--primary-blue);
    border-color: var(--primary-blue);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
    outline: none;
}

.form-check-label {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--gray-700);
    padding: 0.25rem 0;
    line-height: 1.4;
    margin-bottom: 0;
    flex: 1;
    user-select: none;
}

.form-check:hover .form-check-label {
    color: var(--primary-blue);
}

.form-check:hover .form-check-input {
    border-color: var(--primary-blue);
}

/* Убедимся что чекбоксы кликабельны */
.form-check-input,
.form-check-label {
    pointer-events: auto !important;
}

/* Предотвращаем конфликты с чекбоксами */
.filter-checkbox {
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}

.filter-checkbox:focus {
    outline: 2px solid var(--primary-blue);
    outline-offset: 2px;
}

/* Убеждаемся, что состояние чекбоксов сохраняется */
.form-check-input:checked {
    background-color: var(--primary-blue) !important;
    border-color: var(--primary-blue) !important;
}

/* Предотвращаем автоматическое переопределение состояния браузером */
.form-check-input:not(:checked) {
    background-color: var(--white) !important;
    border-color: var(--gray-300) !important;
}

.offcanvas-footer {
    padding: 1rem;
    background-color: var(--white);
    border-top: 1px solid var(--gray-100);
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
    z-index: 10; /* Footer поверх body */
    position: relative;
}

.no-active-filters {
    color: var(--gray-500);
    font-style: italic;
    margin: 1rem 0;
    text-align: center;
}

/* Глобальные уведомления о сообщениях */
.global-message-notification {
    position: fixed;
    top: 80px;
    right: 20px;
    min-width: 320px;
    max-width: 400px;
    background-color: #ffffff;
    background-image: none;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 9999;
    opacity: 0;
    transform: translate3d(18px, 10px, 0) scale(0.97);
    filter: blur(8px);
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.42s ease;
    border-left: 4px solid var(--primary-blue);
    will-change: opacity, transform, filter;
}

.global-message-notification.show {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    cursor: pointer;
}

.notification-content i {
    font-size: 24px;
    color: var(--primary-blue);
}

.notification-content span {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

.notification-close {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.notification-close:hover {
    color: #374151;
}

/* Стили для уведомления о видеозвонке */
.video-call-notification {
    background: #274c77;
    color: white;
    min-width: 360px;
    border-left: 4px solid #16324f;
    animation: pulse 2s ease-in-out infinite;
}

.video-call-notification .notification-content {
    flex-direction: column;
    align-items: flex-start;
    cursor: default;
}

.video-call-notification .video-call-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
}

.video-call-notification .video-call-header i {
    font-size: 20px;
    color: white;
    animation: ring 1s ease-in-out infinite;
}

.video-call-notification .video-call-sender {
    font-size: 14px;
    opacity: 0.95;
    margin-top: 4px;
}

.video-call-notification .join-call-btn {
    background: #10b981;
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.video-call-notification .join-call-btn:hover {
    background: #059669;
    transform: scale(1.03);
}

.video-call-notification .notification-close {
    color: white;
    opacity: 0.8;
    align-self: flex-start;
}

.video-call-notification .notification-close:hover {
    opacity: 1;
    color: white;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }
    50% {
        box-shadow: 0 10px 40px rgba(102, 126, 234, 0.6);
    }
}

@keyframes ring {
    0%, 100% {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(15deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-message-notification {
        transition: opacity 0.18s ease;
        filter: none;
        transform: none;
    }

    .global-message-notification.show {
        transform: none;
        filter: none;
    }

    .video-call-notification {
        animation: none;
    }

    .video-call-notification .video-call-header i {
        animation: none;
    }
}

/* Responsive */
@media (max-width: 1200px) {
    .header-search-wrapper { display: none; }
    .car-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 992px) {
    .main-header { flex-wrap: wrap; }
    .header-nav { width: 48%; justify-content: center; }
    .car-grid { grid-template-columns: repeat(2, 1fr); }
    .popular-car-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 768px) {
    .top-bar { flex-direction: column; gap: 10px; }
    .header-nav { flex-wrap: wrap; gap: 5px; }
    .controls-bar { flex-direction: column; }
    .controls-left, .controls-right { width: 100%; justify-content: center; }
    .car-grid { grid-template-columns: 1fr; }
    .car-card { min-height: auto; }
    .found-info { flex-direction: column; }
    .stats-grid { flex-direction: column; align-items: center; }
    .offcanvas { width: 90vw; }
}



body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--color-white);
    color: var(--color-text-dark);
}

* {
    box-sizing: border-box;
}

/* .container — design-tokens.css (сетка как в каталоге) */

section {
    overflow: hidden;
}

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

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}

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

button {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}

.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-primary {
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--dark-blue) 100%);
    color: var(--white);
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

.btn-secondary {
    background-color: var(--white);
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
}

.btn-secondary:hover {
    background-color: var(--color-secondary-dark);
    color: var(--color-secondary-dark);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}



/* Стили для кликабельных карточек автомобилей */
.car-card,
.popular-car-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.car-card:hover,
.popular-car-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* Стили для элементов внутри карточек */
.car-card .details-link,
.car-card .btn-primary,
.popular-car-card .details-link,
.popular-car-card .btn-primary {
    cursor: pointer;
}

.car-card .details-link:hover,
.car-card .btn-primary:hover,
.popular-car-card .details-link:hover,
.popular-car-card .btn-primary:hover {
    opacity: 0.8;
}

/* Исправление раскладки карточек */
.car-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: stretch;
}

.car-card {
    width: 100%;
    min-height: 450px;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 16px;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
@media (max-width: 1200px) {
    .car-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .car-grid {
        grid-template-columns: repeat(1, 1fr);
    }
    h1 {
        font-size: 36px !important;
        line-height: 40px !important;
    }
    h2 {
        font-size: 30px !important;
        line-height: 36px !important;
    }
}

/* Детальная страница лота - Галерея изображений */
.lot-gallery {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.main-image-container {
    position: relative;
    width: 100%;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}



.lot-gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.lot-gallery-img.active {
    opacity: 1;
}

.gallery-indicators {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.gallery-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-indicator.active {
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(1.2);
}

.gallery-indicator:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10;
}

.gallery-nav:hover {
    background-color: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.gallery-prev {
    left: 20px;
}

.gallery-next {
    right: 20px;
}

.thumbnail-gallery {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.thumbnail {
    width: 80px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.thumbnail.active {
    border-color: var(--primary-blue);
    opacity: 1;
    transform: scale(1.05);
}

.thumbnail:hover {
    opacity: 1;
    transform: scale(1.05);
}

.thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 576px) {
    .main-image-container {
        height: 300px;
    }

    .gallery-nav {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .gallery-prev {
        left: 10px;
    }

    .gallery-next {
        right: 10px;
    }

    .thumbnail {
        width: 60px;
        height: 45px;
    }
}

.car-card { background-color: var(--bg-light); border-radius: 16px; box-shadow: 0px 10px 25px -15px rgba(15, 23, 42, 0.25); overflow: hidden; display: flex; flex-direction: column; }
.lot-detail-grid { grid-template-columns: 2fr 1fr; align-items: flex-start; }
@media (max-width: 992px) { .lot-detail-grid { grid-template-columns: 1fr; } }
.lot-detail-card { padding: 32px; }
.lot-detail-card .car-card-header { margin-bottom: 24px; }
.lot-specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px; }
.lot-specs-grid .spec-item { background-color: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px; display: flex; justify-content: space-between; color: var(--gray-700); font-size: 14px; }
.lot-specs-grid .spec-item .spec-value { font-weight: 600; color: var(--gray-900); }
.lot-description, .lot-warranty { margin-bottom: 32px; }
.lot-description h4, .lot-warranty h4 { font-size: 18px; font-weight: 700; color: var(--gray-900); margin-bottom: 12px; }
.description-content { line-height: 1.6; color: var(--gray-700); }
.warranty-content { display: grid; gap: 12px; }
.warranty-item { display: flex; justify-content: space-between; padding: 12px 16px; background: var(--gray-50); border-radius: 10px; border: 1px solid var(--gray-100); }
.warranty-type { color: var(--gray-600); }
.warranty-value { font-weight: 600; color: var(--primary-blue); }
.lot-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.lot-actions .btn { flex: 1; min-width: 180px; }
.lot-detail-aside { display: flex; flex-direction: column; gap: 24px; }
.info-card { background: var(--white); border-radius: 16px; padding: 24px; box-shadow: 0px 20px 30px -20px rgba(15, 23, 42, 0.25); }
.info-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--gray-900); }
.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.info-list li { display: flex; justify-content: space-between; font-size: 14px; color: var(--gray-700); }
.info-list li strong { font-weight: 600; color: var(--gray-900); }
.info-note { margin-top: 12px; font-size: 12px; color: var(--gray-500); }
@media (max-width: 768px) { .lot-actions .btn { width: 100%; min-width: auto; } }

.lot-page { background: var(--gray-50); position: relative; overflow: visible; }
.lot-page > .container { padding-top: 32px; padding-bottom: 80px; }
.lot-left-column { display: flex; flex-direction: column; gap: 24px; }
.lot-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    
    padding: 16px;
    background-color: #fff;
    box-shadow: 0 0px 25px -10px rgba(15, 23, 42, 0.25);
    border-bottom: 1px solid var(--border-color);
}
.lot-back { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-600); font-weight: 500; text-decoration: none; }
.lot-back:hover { color: var(--primary-blue); }
.lot-back img { width: 20px; height: 20px; }
.lot-top-title { font-size: 28px; font-weight: 700; color: var(--gray-900); margin: 0; flex: 1; }
.lot-top-actions { display: flex; align-items: center; gap: 12px; }
.lot-action-icon {     border: none;
    border-radius: 5px;
    padding: 8px;
    background: var(--white);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;}
.lot-action-icon:hover { background: var(--gray-50); transform: scale(1.05); }
.lot-action-icon.active { background: var(--primary-blue); }
.lot-action-icon.active img { filter: brightness(0) invert(1); }
.lot-action-icon img { width: 20px; height: 20px; }
.lot-top-actions .lot-views {    
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center; }
.lot-main-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr); gap: 32px; margin-bottom: 40px; align-items: flex-start; }
.lot-media-card { background: var(--bg-light); border-radius: 24px; box-shadow: 0 0px 25px -10px rgba(15, 23, 42, 0.25);
    padding: 0px; }
.lot-media-main { position: relative; border-radius: 24px 24px 0 0; overflow: hidden; }
.lot-media-main img { width: 100%; height: auto; object-fit: cover; display: none; }
.lot-media-main img.active { display: block; }
.lot-media-counter { position: absolute; right: 16px; bottom: 16px; background: rgba(17, 24, 39, 0.75); color: var(--white); padding: 6px 12px; border-radius: 9999px; font-size: 14px; }
.thumbnail-gallery { display: flex; gap: 12px;  overflow-x: auto;  justify-content: flex-start; padding: 16px;}
.thumbnail { width: 92px; height: 72px; border-radius: 16px; overflow: hidden; border: 2px solid transparent; cursor: pointer; box-shadow: 0 10px 20px -15px rgba(15,23,42,0.35); transition: transform .2s, border-color .2s; margin: 2px;}
.thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.thumbnail.active { border-color: var(--primary-blue); }
.thumbnail:hover { transform: translateY(-2px); }
.lot-aside-stack { display: flex; flex-direction: column; gap: 20px; align-self: start; position: -webkit-sticky; position: sticky; top: 24px; }
.lot-summary-card, .lot-actions-card { background: var(--bg-light); border-radius: 24px; box-shadow: 0 0px 25px -10px rgba(15, 23, 42, 0.25); padding: 32px; display: flex; flex-direction: column; gap: 20px; align-items: center;}
.lot-summary-label { color: var(--gray-500); font-size: 16px; }
.lot-summary-price { font-size: 30px; font-weight: 700; color: var(--gray-900); }
.lot-summary-market span { display: block; color: var(--gray-500); font-size: 14px; }
.lot-summary-market strong { display: block; font-size: 20px; font-weight: 700; color: var(--gray-900); }
.lot-summary-diff { display: block; margin-top: 6px; font-size: 14px; color: #16a34a; font-weight: 600; }
.lot-summary-diff--negative { color: #dc2626; }
.lot-summary-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-600); font-weight: 600; }
.lot-summary-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 16px; border-radius: 9999px; font-size: 14px; font-weight: 600; background: #dcfce7; color: #15803d; }
.lot-status-draft { background: #fef3c7; color: #b45309; }
.lot-status-inactive { background: #fee2e2; color: #b91c1c; }
.lot-action-stack { display: flex; flex-direction: column; gap: 12px; }
.lot-action-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 16px; font-weight: 600; text-decoration: none; color: var(--white); }
.btn-gradient-gold { background: linear-gradient(90deg, #fbbf24 0%, #f97316 100%); color: #fff; border: none; }
.btn-purple { background: linear-gradient(90deg, #a855f7 0%, #7c3aed 100%); color: #fff; border: none; }
.lot-action-btn img { width: 20px; height: 20px; }
.lot-sections { display: grid; gap: 24px; }
.lot-section-card { background: var(--bg-light); border-radius: 24px; padding: 32px; box-shadow: 0 0px 25px -10px rgba(15, 23, 42, 0.25); }
.lot-section-card h3 { font-size: 22px; font-weight: 700; color: var(--gray-900); margin-bottom: 20px; }
.lot-spec-list { display: grid; gap: 12px; grid-template-columns: 1fr 1fr;}
.lot-spec-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-radius: 16px; background: var(--gray-100); color: var(--gray-700); font-size: 15px; }
.lot-spec-row strong { color: var(--gray-900); font-weight: 600; }
.lot-description-card .description-content { line-height: 1.7; color: var(--gray-700); }
@media (max-width: 992px) {
  .lot-top-bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .lot-top-title { width: 100%; }
  .lot-main-grid { grid-template-columns: 1fr; }
  .lot-aside-stack { position: static; }
}
@media (max-width: 576px) {
  .lot-top-actions { align-self: flex-start; }
  .lot-summary-card { padding: 24px; }
  .lot-summary-price { font-size: 36px; }
}
.lot-summary-card div {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.form-check .form-check-input{margin-left: 0;}

/* AI Analysis Offcanvas */
.ai-section {
    margin-bottom: 32px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 24px;
}

.ai-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ai-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.ai-section-header svg {
    color: #667eea;
    flex-shrink: 0;
}

.ai-section-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.ai-section-content {
    padding-left: 36px;
}

.ai-section-content p {
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 12px;
}

/* AI Score Box */
.ai-score-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: white;
    margin-bottom: 16px;
}

.ai-score {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.ai-score span {
    font-size: 24px;
    opacity: 0.8;
}

.ai-score-box p {
    margin: 12px 0 0 0;
    font-size: 16px;
    color: white;
    opacity: 0.9;
}

/* AI Price Indicator */
.ai-price-indicator {
    margin: 20px 0;
}

.price-bar {
    position: relative;
    height: 8px;
    background: linear-gradient(90deg, #10b981 0%, #fbbf24 50%, #ef4444 100%);
    border-radius: 4px;
    margin-bottom: 12px;
}

.price-marker {
    position: absolute;
    top: -8px;
    width: 4px;
    height: 24px;
    background: #1f2937;
    border-radius: 2px;
    transform: translateX(-50%);
}

.price-marker::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #1f2937;
}

.price-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
}

/* AI Recommendations */
.ai-recommendations {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-recommendations li {
    padding: 12px 0;
    color: #374151;
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px solid #f3f4f6;
}

.ai-recommendations li:last-child {
    border-bottom: none;
}

/* AI Risk Level */
.ai-risk-level {
    display: inline-flex;
    align-items: center;
    margin-bottom: 16px;
}

.risk-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 14px;
}

.ai-risk-level.low .risk-badge {
    background: #d1fae5;
    color: #065f46;
}

.ai-risk-level.medium .risk-badge {
    background: #fef3c7;
    color: #92400e;
}

.ai-risk-level.high .risk-badge {
    background: #fee2e2;
    color: #991b1b;
}

/* Offcanvas customization */
#aiAnalysisOffcanvas .offcanvas-header {
    border-bottom: none;
}

#aiAnalysisOffcanvas .offcanvas-body {
    background: #f9fafb;
}

#aiAnalysisContent {
    background: white;
    border-radius: 16px;
    margin: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* AI Conversation Styles */
.ai-conversation {
    margin-bottom: 24px;
}

.ai-question-item,
.ai-answer-item {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 12px;
}

.ai-question-item {
    background: #f3f4f6;
    margin-left: 20px;
}

.ai-answer-item {
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    margin-right: 20px;
}

.ai-message-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #374151;
}

.ai-message-header svg {
    flex-shrink: 0;
}

.ai-question-item p,
.ai-answer-item p {
    margin: 0 0 8px 0;
    color: #1f2937;
    line-height: 1.6;
}

.ai-answer-item ul {
    margin: 8px 0;
    padding-left: 20px;
    color: #374151;
}

.ai-answer-item ul li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.ai-question-box {
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ai-message-content {
    white-space: pre-wrap;
    word-wrap: break-word;
}

.ai-message-content p {
    margin: 0 0 12px 0;
}

.ai-message-content p:last-child {
    margin-bottom: 0;
}

.ai-input-box {
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

.ai-input-box textarea:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

/* Seller Contact Modal Styles */
.seller-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 12px;
}

.seller-avatar-wrapper {
    flex-shrink: 0;
}

.seller-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.seller-avatar-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.seller-details {
    flex: 1;
}

.seller-name {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.seller-contact-info {
    margin: 0;
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 8px;
}

.seller-contact-info i {
    color: #667eea;
    font-size: 14px;
}

.contact-methods {
    margin-top: 20px;
}

.contact-methods .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 12px;
    transition: all 0.2s;
}

.contact-methods .btn i {
    font-size: 18px;
}

.contact-methods .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
}

.contact-methods .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(102, 126, 234, 0.3);
}

.contact-methods .btn-outline-primary {
    border: 2px solid #667eea;
    color: #667eea;
    background: white;
}

.contact-methods .btn-outline-primary:hover {
    background: #667eea;
    color: white;
}

/* Share Modal Styles */
.share-buttons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 1px solid #e5e7eb;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.share-btn-whatsapp {
    background: #25D366;
    color: white;
    border-color: #25D366;
}

.share-btn-whatsapp:hover {
    background: #20BA5A;
    color: white;
}

.share-btn-telegram {
    background: #0088cc;
    color: white;
    border-color: #0088cc;
}

.share-btn-telegram:hover {
    background: #0077B5;
    color: white;
}

.share-btn-vk {
    background: #0077FF;
    color: white;
    border-color: #0077FF;
}

.share-btn-vk:hover {
    background: #0066DD;
    color: white;
}

.share-btn-facebook {
    background: #1877F2;
    color: white;
    border-color: #1877F2;
}

.share-btn-facebook:hover {
    background: #0E66D0;
    color: white;
}

@media (max-width: 576px) {
    .share-buttons-grid {
        grid-template-columns: 1fr;
    }
}

/* === css/nfs-delivery-stickers.css === */
/* Стикеры проходности / прогноза цены */

.nfs-sticker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 3px 8px 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.25;
  cursor: help;
  border: 1px solid transparent;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.nfs-sticker:is(:hover, :focus-visible) {
  z-index: 120;
}

/* Контейнеры карточки — не обрезаем всплывающие подсказки */
.nfs-cc-body,
.nfs-cc-foot,
.nfs-cc-foot-left,
.nfs-cc-delivery-block,
.nfs-cc-status-pills-wrap,
.nfs-cc-status-pills,
.nfs-cc-delivery-pills,
.nfs-lot-delivery-calc__badges,
.lot-hero-aside,
.nfs-lot-aside-unified,
.nfs-lot-aside-section--listing,
.nfs-lot-aside-section--actions,
.nfs-lot-delivery-calc--embedded {
  overflow: visible;
}

.nfs-listings-grid,
.nfs-listings-grid .nfs-cc,
.cars-grid-new,
.cars-grid-new .nfs-cc,
.catalog-results-wrapper .nfs-cc {
  overflow: visible;
}

.nfs-sticker__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfs-sticker__info {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 800;
  font-style: italic;
  font-family: Georgia, serif;
  opacity: 0.85;
}

.nfs-sticker__tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #1e293b;
  color: #f8fafc;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 130;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.nfs-sticker__tip::after {
  content: '';
  position: absolute;
  left: var(--nfs-tip-arrow-x, 50%);
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
}

.nfs-sticker:hover .nfs-sticker__tip,
.nfs-sticker:focus-visible .nfs-sticker__tip,
.nfs-sticker.is-tip-open .nfs-sticker__tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--nfs-tip-nudge, 0px))) translateY(0);
}

/* Fixed-слой: JS выносит tip из overflow/transform родителей (карточка лота) */
.nfs-sticker__tip.nfs-sticker__tip--fixed {
  position: fixed !important;
  z-index: 4000;
  left: 0;
  top: 0;
  right: auto;
  bottom: auto;
  transform: none !important;
  max-width: min(280px, calc(100vw - 24px));
  width: max-content;
  white-space: normal;
  box-sizing: border-box;
}

.nfs-sticker__tip.nfs-sticker__tip--fixed::after {
  top: auto;
  bottom: 100%;
  left: var(--nfs-tip-arrow-x, 18px);
  transform: translateX(-50%);
  border-top-color: transparent;
  border-bottom-color: #1e293b;
}

/* Мобильные: подсказка вниз от стикера, вправо (не за левый край экрана) */
@media (max-width: 767px) {
  .nfs-cc-status-pills .nfs-sticker,
  .nfs-cc-delivery-pills .nfs-sticker {
    position: relative;
    max-width: 100%;
  }

  .nfs-sticker__tip {
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    right: auto;
    transform: translateX(var(--nfs-tip-nudge, 0px));
    min-width: 0;
    max-width: min(280px, calc(100vw - 24px));
    width: max-content;
    box-sizing: border-box;
    white-space: normal;
    text-align: left;
    --nfs-tip-arrow-x: 18px;
  }

  /* Было right:0 — tip рос влево и обрезался у края viewport */
  .nfs-cc-status-pills .nfs-sticker__tip,
  .nfs-cc-delivery-pills .nfs-sticker__tip,
  .nfs-lot-delivery-calc__badges .nfs-sticker__tip {
    left: 0;
    right: auto;
  }

  .nfs-sticker:hover .nfs-sticker__tip,
  .nfs-sticker:focus-visible .nfs-sticker__tip,
  .nfs-sticker.is-tip-open .nfs-sticker__tip {
    transform: translateX(var(--nfs-tip-nudge, 0px));
  }

  .nfs-sticker__tip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1e293b;
  }
}

.nfs-sticker--passable,
.nfs-sticker--ok {
  background: linear-gradient(180deg, #ecfdf3 0%, #d1fae5 100%);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.35);
}

.nfs-sticker--passable .nfs-sticker__info,
.nfs-sticker--ok .nfs-sticker__info {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
}

.nfs-sticker--high_rate,
.nfs-sticker--critical {
  background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.35);
}

.nfs-sticker--high_rate .nfs-sticker__info,
.nfs-sticker--critical .nfs-sticker__info {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

.nfs-sticker--warning {
  background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  color: #b45309;
  border-color: rgba(245, 158, 11, 0.35);
}

.nfs-sticker--warning .nfs-sticker__info {
  background: rgba(245, 158, 11, 0.18);
  color: #b45309;
}

.nfs-sticker--neutral {
  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.25);
}

.nfs-sticker--future {
  background: linear-gradient(180deg, #fefce8 0%, #fef08a 100%);
  color: #713f12;
  border-color: rgba(234, 179, 8, 0.45);
}

.nfs-sticker--future.nfs-sticker--down {
  background: linear-gradient(180deg, #ecfdf5 0%, #bbf7d0 100%);
  color: #166534;
  border-color: rgba(34, 197, 94, 0.35);
}

.nfs-sticker--future .nfs-sticker__info {
  background: rgba(0, 0, 0, 0.08);
}

.nfs-cc-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  align-content: flex-start;
  min-width: 0;
  max-width: 100%;
}

.nfs-cc-status-pills .nfs-sticker {
  flex: 0 1 auto;
  max-width: 100%;
}

.nfs-cc-delivery-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.nfs-header-currency__select {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 22px 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%2394a3b8' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

.nfs-header-city__menu {
  max-height: min(70vh, 420px);
  overflow-y: auto;
  min-width: 220px;
}

.nfs-header-city__group-label {
  display: block;
  padding: 6px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  pointer-events: none;
}

.nfs-header-city__group-list {
  list-style: none;
  margin: 0;
  padding: 0 0 4px;
}

.nfs-header-city__group + .nfs-header-city__group {
  border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.nfs-mobile-drawer-utility .nfs-header-currency__select {
  width: 100%;
  min-height: 38px;
  border-color: rgba(26, 95, 217, 0.14);
  background-color: #ffffff;
  color: #1e293b;
  font-size: 0.8125rem;
}

/* === css/nfs_header.css === */
/**
 * NFS Header — унифицированный дизайн с design-tokens
 */

:root {
    --nfs-mobile-header-offset: 72px;
}

/* Фон как у #heroSection.hero-section--ref: тёмный градиент, без «стекла» */
.nfs-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header, 1000);
    background: linear-gradient(155deg, #0d1117 0%, #111827 55%, #1a2035 100%);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Без нижней границы — иначе на фоне body видна белая «щель» под фиксированной шапкой */
    border-bottom: none;
    padding: 0.5rem 0;
    transition: box-shadow var(--transition-normal, 250ms ease);
    /* max-width + min-width:0 у flex-детей; overflow-x:hidden на шапке ломает выпадающие меню:
       по спецификации при hidden по X вычисляемый overflow-y становится auto — обрезается всё,
       что выходит за высоту шапки (меню «уезжает под» hero). Горизонтальный скролл — у html/body. */
    max-width: 100vw;
    overflow: visible;
    box-sizing: border-box;
}

.nfs-header.scrolled {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Зона padding-top под фиксированной шапкой — иначе виден фон body и «белая щель» над тёмным hero */
body:has(.nfs-header) {
    padding-top: 64px;
    background-image: linear-gradient(
        to bottom,
        #0d1117 0,
        #0d1117 64px,
        var(--nfs-home-section-bg, #f2f5fc) 64px
    );
}

/* Мобильный хедер: одна строка — бургер | логотип | иконка поиска | аккаунт; поле поиска — вторая строка по клику */
@media (max-width: 1023px) {
    body:has(.nfs-header) {
        padding-top: calc(72px + env(safe-area-inset-top, 0px));
        background-image: linear-gradient(
            to bottom,
            #0d1117 0,
            #0d1117 calc(72px + env(safe-area-inset-top, 0px)),
            var(--nfs-home-section-bg, #f2f5fc) calc(72px + env(safe-area-inset-top, 0px))
        );
    }

    body:has(.nfs-header.nfs-header--search-open) {
        padding-top: calc(132px + env(safe-area-inset-top, 0px));
        background-image: linear-gradient(
            to bottom,
            #0d1117 0,
            #0d1117 calc(132px + env(safe-area-inset-top, 0px)),
            var(--nfs-home-section-bg, #f2f5fc) calc(132px + env(safe-area-inset-top, 0px))
        );
    }
}

/* .container задаёт ширину и padding — header растягивается по контейнеру страницы */
.nfs-header-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "hdr-burger hdr-logo hdr-search-icon hdr-account";
    gap: 0.35rem 0.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .nfs-header-inner {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem 1rem;
        min-width: 0;
    }

    /* Меню сразу после логотипа; поиск заполняет оставшееся место (без margin-left: auto — иначе «дыра») */
    .nfs-header-center {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: flex-start;
        gap: 0.75rem 1rem;
        min-width: 0;
        position: relative;
    }

    /* Ряд «навигация + поиск» — общий якорь для мегаменю (ширина/left как у поля поиска) */
    .nfs-header-main {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
        gap: 0.75rem 1rem;
        position: relative;
        /* Заполняет nfs-megamenu-align.js при ≥1024px */
        --nfs-megamenu-panel-left: 0px;
        --nfs-megamenu-panel-width: 100%;
    }

    /* Мегаменю позиционируется относительно .nfs-header-main, а не пункта навигации */
    .nfs-header-main .nfs-megamenu-nav {
        position: static;
        flex-shrink: 0;
    }

    .nfs-header-center .nfs-nav {
        flex-shrink: 0;
    }

    .nfs-header-right {
        margin-left: 0;
        flex-shrink: 0;
        position: relative;
        z-index: 20;
        gap: 0.5rem;
        padding-left: 0.25rem;
    }
}

/* Планшет/узкий десктоп: поле поиска уже, чтобы не вылезало за экран */
@media (min-width: 1024px) and (max-width: 1279px) {
    .nfs-search-wrapper:not(.is-expanded) {
        max-width: min(24rem, 100%);
    }

    .nfs-header-inner,
    .nfs-header-center,
    .nfs-header-main {
        gap: 0.5rem 0.65rem;
    }

    .nfs-header-right {
        gap: 0.35rem;
        padding-left: 0;
    }

    .nfs-nav {
        gap: 0.125rem;
    }

    .nfs-search-wrapper {
        flex: 0 1 15rem;
        min-width: 15rem;
    }

    .nfs-nav-item > a {
        padding: 0.45rem 0.5rem;
        font-size: var(--text-sm, 0.875rem);
    }

    .nfs-megamenu-nav .nfs-nav-item.has-megamenu > a {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-size: 0.82rem;
    }
}

@media (min-width: 1024px) and (max-width: 1180px) {
    /* Узкий ноутбук: чуть плотнее навигация и компактнее капсула поиска, чтобы ничего не вылезало наружу */
    .nfs-header .nfs-header-inner,
    .nfs-header .nfs-header-center,
    .nfs-header .nfs-header-main {
        gap: 0.3rem 0.42rem;
    }

    .nfs-header .nfs-nav {
        gap: 0;
    }

    .nfs-header .nfs-nav-item > a {
        padding: 0.4rem 0.28rem;
        font-size: 0.79rem;
    }

    .nfs-header .nfs-megamenu-nav .nfs-nav-item.has-megamenu > a {
        padding-left: 0.28rem;
        padding-right: 0.28rem;
        font-size: 0.77rem;
    }

    .nfs-header .nfs-search-wrapper {
        --nfs-search-shell-min-height: 42px;
        --nfs-search-shell-padding-y: 2px;
        --nfs-search-shell-padding-x: 2px;
        --nfs-search-shell-gap: 0.22rem;
        --nfs-search-mode-btn-height: 24px;
        --nfs-search-action-size: 24px;
    }

    .nfs-header .nfs-search-mode-switch {
        max-width: 8.35rem;
        padding: 2px;
        gap: 1px;
    }

    .nfs-header .nfs-search-mode-btn {
        padding: 0.28rem 0.48rem;
        font-size: 0.65rem;
    }

    .nfs-header .nfs-search-input {
        font-size: 0.76rem;
        padding: 0 0.05rem;
    }

    .nfs-header .nfs-search-actions {
        gap: 2px;
    }
}

/* Колонка логотипа — отдельно от меню и поиска */
.nfs-header-logo-slot {
    grid-area: hdr-logo;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 0;
}

@media (min-width: 1024px) {
    .nfs-header-logo-slot {
        justify-content: flex-start;
    }
}

/* На узких экранах дети центра участвуют в сетке шапки как прямые потомки inner */
@media (max-width: 1023px) {
    .nfs-header-center {
        display: contents;
    }

    /* На мобильной сетке дети main снова прямые участники grid шапки */
    .nfs-header-main {
        display: contents;
    }
}

.nfs-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

/* Полосы М с вертикальным шиммером + название (см. nfs-design-system.css) */
.nfs-logo--animated {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nfs-header .nfs-logo-word {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #f3f4f6;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(220px, 42vw);
}

/* Масштаб полос под высоту шапки (базовые размеры в nfs-design-system.css — 17/13/9 px) */
.nfs-header .nfs-logo-stripes {
    height: 28px;
    flex-shrink: 0;
}

.nfs-header .nfs-logo-stripes span {
    width: 5px;
}

.nfs-header .nfs-logo-stripes span:nth-child(1) {
    height: 28px;
}

.nfs-header .nfs-logo-stripes span:nth-child(2) {
    height: 22px;
}

.nfs-header .nfs-logo-stripes span:nth-child(3) {
    height: 15px;
}

@media (prefers-reduced-motion: reduce) {
    .nfs-header .nfs-logo-stripes span {
        animation: none !important;
    }
}

.nfs-logo-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--gradient-brand);
    color: white;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.nfs-logo-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.nfs-logo-text {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    letter-spacing: -0.025em;
}

/* === Навигация === */
.nfs-nav {
    display: none;
    align-items: center;
    gap: 0.25rem;
}

@media (min-width: 1024px) {
    .nfs-nav {
        display: flex;
    }
}

.nfs-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.nfs-nav-item a {
    padding: 0.5rem 0.75rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: rgba(243, 244, 246, 0.88);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}

/* Только верхняя ссылка пункта (Каталог…), не пункты выпадающего списка */
.nfs-nav-item > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.nfs-nav-item > a:active {
    background: rgba(255, 255, 255, 0.06);
}

.nfs-nav-chevron {
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.nfs-nav-item.has-dropdown:hover .nfs-nav-chevron {
    transform: rotate(180deg);
}

/* === Dropdown === */
.nfs-nav-item.has-dropdown:hover .nfs-dropdown {
    display: block;
    animation: dropdown-in 0.2s ease-out;
}

@keyframes dropdown-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.nfs-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 220px;
    padding: 0.375rem;
    z-index: var(--z-dropdown);
}

/* Невидимый «мост» над dropdown — устраняет dead zone при переходе курсора от таба к меню */
.nfs-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.nfs-dropdown-item {
    display: block;
    padding: 0.625rem 0.875rem;
    font-size: var(--text-base);
    color: var(--gray-700);
    text-decoration: none;
    border-radius: var(--radius-md);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nfs-dropdown-item:hover,
.nfs-dropdown-item:focus-visible {
    background: var(--blue-50);
    color: var(--nfs-text-hover-text-color, var(--nfs-blue));
}

/* Выше по каскаду, чем любые общие правила для ссылок внутри .nfs-nav-item */
.nfs-nav-item .nfs-dropdown a.nfs-dropdown-item:hover,
.nfs-nav-item .nfs-dropdown a.nfs-dropdown-item:focus-visible {
    color: var(--nfs-text-hover-text-color, var(--nfs-blue));
}

/* Мобильное меню: аккордеоны (каталог, информация, база знаний) */
.nfs-mobile-info-section {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--gray-100);
}

.nfs-mobile-accordion {
    display: flex;
    flex-direction: column;
}

.nfs-mobile-accordion__trigger {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
    border-bottom-color: var(--gray-100);
}

.nfs-mobile-accordion__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.nfs-mobile-accordion.is-open .nfs-mobile-accordion__chevron {
    transform: rotate(90deg);
}

/* Подпункты без серого фона и «коробок» — как обычный список */
.nfs-mobile-accordion__panel {
    display: flex;
    flex-direction: column;
    background: #fff;
}

.nfs-mobile-accordion__panel .nfs-mobile-nav-sub {
    border-bottom-color: var(--gray-100);
}

.nfs-mobile-accordion__panel[hidden] {
    display: none !important;
}

/* === Поиск === */
/* Кнопка-лупа только на мобильных (в сетке hdr-search-icon) */
.nfs-search-mobile-trigger {
    display: none;
    grid-area: hdr-search-icon;
    justify-self: center;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: rgba(243, 244, 246, 0.85);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    touch-action: manipulation;
    /* Слегка подтягиваем к логотипу без вылезания за viewport */
    margin-left: -6px;
    margin-right: -6px;
}

.nfs-search-mobile-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nfs-search-wrapper {
    position: relative;
    grid-area: hdr-search;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 36rem;
    margin-left: 0;
    --nfs-search-shell-min-height: 45px;
    --nfs-search-shell-padding-y: 3px;
    --nfs-search-shell-padding-x: 3px;
    --nfs-search-shell-gap: 0.35rem;
    --nfs-search-mode-btn-height: 27px;
    --nfs-search-action-size: 27px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: flex 0.3s ease, max-width 0.3s ease, margin-left 0.3s ease, margin-right 0.3s ease;
}

.nfs-search-wrapper.is-expanded {
    flex: 1 1 auto;
    max-width: none;
}

/* ПК (≥1024): поиск растягивается между меню и иконками; без жёстких 30rem — иначе overflow на ~1024px */
@media (min-width: 1024px) {
    .nfs-search-wrapper {
        flex: 1 1 12rem;
        min-width: 0;
        max-width: 36rem;
        margin-right: 0;
        grid-area: unset;
    }

    .nfs-search-wrapper.is-expanded {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        min-width: 0;
        /* Поверх ограничения max-width у узкого десктопа (там стоит !important) */
        max-width: none !important;
        margin: 0;
        flex: none;
        z-index: 15;
        box-sizing: border-box;
    }

    .nfs-search-wrapper.is-expanded .global-search-dropdown-wrap {
        z-index: 40;
    }

    /* Временный режим измерения (nfs-megamenu-align.js): геометрия как у раскрытого поиска, без фокуса */
    .nfs-header-main.nfs-measure-search-expanded .nfs-search-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: auto;
        min-width: 0;
        max-width: none !important;
        margin: 0;
        flex: none;
        z-index: 15;
        box-sizing: border-box;
    }
}

/* Поле поиска и выпадающие результаты — см. nfs-global-search.css (дизайн-система NFS) */

/* === Правая часть (иконки) === */
.nfs-header-right {
    grid-area: hdr-account;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.nfs-icon-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(243, 244, 246, 0.8);
    text-decoration: none;
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.nfs-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Круглый аватар вместо заглушки «человек» */
.nfs-icon-btn--avatar {
    padding: 0;
    overflow: hidden;
}

.nfs-header-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.nfs-icon-btn .nfs-header-user-svg {
    flex-shrink: 0;
}

.nfs-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    background: var(--nfs-red);
    color: white;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* === User dropdown === */
.nfs-user-menu { position: relative; }

.nfs-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    z-index: var(--z-dropdown);
    overflow: hidden;
    animation: dropdown-in 0.2s ease-out;
}

.nfs-user-dropdown:not(.show) { display: none !important; }
.nfs-user-dropdown.show { display: block !important; }

.nfs-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: var(--text-base);
    color: var(--gray-700);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-100);
    transition: background var(--transition-fast);
}

.nfs-user-dropdown-item:last-child { border-bottom: none; }

.nfs-user-dropdown-item:hover,
.nfs-user-dropdown-item:focus-visible {
    background: var(--gray-50);
    color: var(--nfs-text-hover-text-color, var(--nfs-blue));
}

.nfs-user-dropdown-item--shortcut {
    display: none;
}

@media (min-width: 1024px) and (max-width: 1280px) {
    /* Когда в десктопном хедере тесно, переносим быстрые действия в меню профиля */
    .nfs-header-right .nfs-header-shortcut-link {
        display: none;
    }

    .nfs-user-dropdown {
        min-width: 220px;
    }

    .nfs-user-dropdown-item--shortcut {
        display: flex;
    }
}

/* === Кнопка бургера (мобильное меню) === */
.nfs-mobile-toggle {
    display: none;
    grid-area: hdr-burger;
    justify-self: start;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: rgba(243, 244, 246, 0.88);
    border: none;
    background: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nfs-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@media (max-width: 1023px) {
    .nfs-mobile-toggle { display: flex; }
}

/* === Мобильный drawer === */
.nfs-mobile-drawer {
    display: none;
}

.nfs-mobile-drawer.open {
    display: block;
}

.nfs-mobile-drawer-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--z-overlay);
    animation: fade-in 0.2s ease;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.nfs-mobile-drawer-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-top: env(safe-area-inset-top, 0);
    background: #fff;
    z-index: var(--z-modal);
    box-shadow: 6px 0 32px rgba(15, 23, 42, 0.12);
    animation: slide-in-left 0.28s ease-out;
    overflow: hidden;
    overscroll-behavior: contain;
}

.nfs-mobile-drawer-panel > *,
.nfs-mobile-nav,
.nfs-mobile-support,
.nfs-mobile-drawer-bar {
    width: 100%;
    box-sizing: border-box;
}

/* Под фиксированной шапкой: затемнение и канвас не перекрывают header */
@media (max-width: 1023px) {
    .nfs-mobile-drawer-backdrop {
        top: var(--nfs-mobile-header-offset, 72px);
    }

    .nfs-mobile-drawer-panel {
        top: var(--nfs-mobile-header-offset, 72px);
        height: calc(100dvh - var(--nfs-mobile-header-offset, 72px));
        max-height: calc(100vh - var(--nfs-mobile-header-offset, 72px));
        min-height: 0;
        padding-top: 0;
    }

    .nfs-header.nfs-header--menu-open {
        z-index: 1300;
    }

    .nfs-header--menu-open .nfs-mobile-toggle {
        background: rgba(26, 95, 217, 0.08);
        color: var(--nfs-blue, #1a5fd9);
        box-shadow: none;
    }
}

@keyframes slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.nfs-mobile-nav {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nfs-mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nfs-t2, #2a3450);
    text-decoration: none;
    border-bottom: 1px solid rgba(26, 95, 217, 0.08);
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    transition: background var(--transition-fast), color var(--transition-fast);
    touch-action: manipulation;
}

.nfs-mobile-nav-link--row {
    justify-content: space-between;
    gap: 1rem;
}

.nfs-mobile-nav-link-label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
}

.nfs-mobile-nav-row-icon {
    flex-shrink: 0;
    color: var(--gray-500);
}

.nfs-mobile-nav-chevron {
    flex-shrink: 0;
    color: var(--gray-400);
}

.nfs-mobile-nav-link:hover,
.nfs-mobile-nav-link:focus-visible {
    background: rgba(26, 95, 217, 0.04);
    color: var(--nfs-blue, #1a5fd9);
    outline: none;
}

.nfs-mobile-nav-link:hover .nfs-mobile-nav-row-icon,
.nfs-mobile-nav-link:hover .nfs-mobile-nav-chevron {
    color: inherit;
}

.nfs-mobile-accordion.is-open .nfs-mobile-accordion__trigger .nfs-mobile-nav-chevron {
    color: var(--gray-600);
}

/* Кнопка «Профиль» в списке (стиль как у ссылки) */
.nfs-mobile-nav-link--button {
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

.nfs-mobile-nav-link i {
    width: 20px;
    text-align: center;
    color: var(--gray-500);
}

.nfs-mobile-nav-sub {
    min-height: 42px;
    padding: 0.65rem 1rem 0.65rem 2.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nfs-t3, #5a6480);
    background: #f8fafc;
}

/* Контакты в drawer (сверху панели, без заголовка «Поддержка») */
.nfs-mobile-support {
    flex-shrink: 0;
    background: #fff;
}

/* Без зазора под шапкой: контакт сразу от верхнего края панели */
.nfs-mobile-support--drawer-top {
    padding: 0 1rem 0.75rem;
    border-top: none;
    border-bottom: 1px solid var(--gray-100);
}

.nfs-mobile-support-phone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
    font-size: var(--text-md);
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
    text-decoration: none;
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.nfs-mobile-support-phone:hover {
    background: var(--gray-50);
    border-color: var(--gray-200);
    color: var(--nfs-blue);
}

.nfs-mobile-support-hours {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--gray-500);
    line-height: 1.4;
}

/* Нижняя панель: избранное, сравнение, профиль */
.nfs-mobile-drawer-bar {
    display: flex;
    flex-shrink: 0;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    padding-bottom: max(0.65rem, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--gray-100);
    background: #fff;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05);
}

.nfs-mobile-drawer-bar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 56px;
    padding: 0.35rem 0.2rem;
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    color: var(--gray-700);
    text-decoration: none;
    text-align: center;
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}

.nfs-mobile-drawer-bar__item > .nfs-ico {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.nfs-mobile-drawer-bar__item > span {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.nfs-mobile-drawer-bar__item:hover {
    background: var(--gray-100);
    color: var(--nfs-blue);
    border-color: var(--gray-200);
}

.nfs-mobile-drawer-bar__btn {
    font-family: inherit;
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-weight-medium);
    line-height: 1.15;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.nfs-mobile-drawer-bar__avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

.nfs-mobile-drawer-bar__item--avatar {
    gap: 0.28rem;
}

/* Нижняя панель: только иконки (телефон, избранное, сравнение, профиль) */
.nfs-mobile-drawer-bar--icons {
    gap: 0.5rem;
}

.nfs-mobile-drawer-bar--icons .nfs-mobile-drawer-bar__item {
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 48px;
    padding: 0.5rem;
}

.nfs-mobile-drawer-bar--icons .nfs-mobile-drawer-bar__item > .nfs-ico {
    width: 1.375rem;
    height: 1.375rem;
}

.nfs-mobile-drawer-bar--icons .nfs-mobile-drawer-bar__item--avatar {
    gap: 0;
}

.nfs-mobile-nav-header {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    cursor: default;
    pointer-events: none;
}

/* === Мобильная адаптация: тач-цели и плотность === */
@media (max-width: 1023px) {
    .nfs-header {
        padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
    }

    .nfs-mobile-toggle,
    .nfs-search-mobile-trigger,
    .nfs-icon-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
        touch-action: manipulation;
    }

    /* Профиль, избранное и сравнение — только в drawer, колонка справа не нужна */
    .nfs-header-inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "hdr-burger hdr-logo hdr-search-icon";
    }

    .nfs-header-right {
        display: none !important;
    }

    .nfs-header-logo-slot {
        justify-content: center;
        min-width: 0;
    }

    /* Лупа в верхней строке */
    .nfs-search-mobile-trigger {
        display: flex;
    }

    /* Поле поиска — вторая строка сетки, только после открытия */
    .nfs-search-wrapper {
        display: none;
        grid-area: auto;
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        max-width: none;
        margin-left: 0;
        margin-top: 0.5rem;
        --nfs-search-shell-min-height: 44px;
        --nfs-search-shell-padding-y: 4px;
        --nfs-search-shell-padding-x: 4px;
        --nfs-search-shell-gap: 0.35rem;
        --nfs-search-mode-btn-height: 30px;
        --nfs-search-action-size: 30px;
    }

    /* Свёрнутая панель: выпадающий список не показываем (дубль к JS-сбросу) */
    .nfs-header:not(.nfs-header--search-open) .nfs-search-wrapper .global-search-dropdown-wrap {
        display: none !important;
        visibility: hidden;
        pointer-events: none;
    }

    .nfs-header--search-open .nfs-search-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .nfs-header--search-open .nfs-search-wrapper .nfs-search-shell {
        width: 100%;
        order: 1;
    }

    .nfs-header--search-open .nfs-search-wrapper .global-search-dropdown-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        order: 2;
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        flex-direction: column !important;
    }

    .nfs-search-wrapper.is-expanded {
        flex: unset;
    }

    .nfs-search-mode-switch {
        flex: 0 0 auto;
        max-width: 46%;
    }

    .nfs-search-mode-btn {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
        font-size: 0.68rem;
    }

    /* Компактный анимированный логотип: полосы + короткое слово */
    .nfs-header .nfs-logo-word {
        font-size: 1rem;
        letter-spacing: 0.05em;
        max-width: min(150px, 38vw);
    }

    .nfs-header .nfs-logo-stripes {
        height: 24px;
    }

    .nfs-header .nfs-logo-stripes span:nth-child(1) {
        height: 24px;
    }

    .nfs-header .nfs-logo-stripes span:nth-child(2) {
        height: 18px;
    }

    .nfs-header .nfs-logo-stripes span:nth-child(3) {
        height: 12px;
    }

    .nfs-logo-icon {
        width: 30px;
        height: 30px;
    }

    .nfs-logo-icon svg {
        width: 18px;
        height: 18px;
    }
}

@media (max-width: 640px) {
    .nfs-logo-text { font-size: var(--text-md); }
    .nfs-logo-icon { width: 28px; height: 28px; }
    .nfs-header .nfs-logo-word {
        font-size: 0.9375rem;
        max-width: min(130px, 34vw);
    }
}


/* ========== Глобальный поиск (дизайн-система NFS) — было nfs-global-search.css ========== */
.nfs-search-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--nfs-search-shell-gap);
    min-height: var(--nfs-search-shell-min-height);
    padding: var(--nfs-search-shell-padding-y) var(--nfs-search-shell-padding-x);
    border: 1px solid rgba(94, 109, 139, 0.18);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 36px rgba(15, 23, 42, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* При вводе текста не подсвечиваем капсулу синим (как у нейтрального состояния .nfs-search-shell) */
.nfs-search-wrapper.is-expanded .nfs-search-shell,
.nfs-search-wrapper:focus-within .nfs-search-shell {
    border-color: rgba(94, 109, 139, 0.18);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 36px rgba(15, 23, 42, 0.12);
}

.nfs-search-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    padding: 3px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.nfs-search-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--nfs-search-mode-btn-height);
    padding: 0.34rem 0.64rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: rgba(71, 85, 105, 0.9);
    font-family: var(--nfs-ff, 'Montserrat', system-ui, sans-serif);
    font-size: clamp(0.7rem, 0.15vw + 0.68rem, 0.78rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}

.nfs-search-mode-btn:hover {
    color: #0f172a;
    background: rgba(59, 127, 255, 0.1);
}

.nfs-search-wrapper[data-search-mode="fast"] .nfs-search-mode-btn[data-search-mode="fast"].is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(59, 127, 255, 0.92) 0%, rgba(26, 95, 217, 0.96) 100%);
    box-shadow: 0 10px 22px rgba(26, 95, 217, 0.3);
}

.nfs-search-wrapper[data-search-mode="deep"] .nfs-search-mode-btn[data-search-mode="deep"].is-active {
    color: #2f1b00;
    background: linear-gradient(135deg, rgba(255, 206, 92, 0.96) 0%, rgba(255, 184, 0, 0.94) 100%);
    box-shadow: 0 10px 22px rgba(255, 184, 0, 0.28);
}

.nfs-search-mode-btn.is-locked:not(.is-active) {
    color: rgba(100, 116, 139, 0.92);
}

.nfs-search-mode-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 0 0.42rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: inherit;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nfs-search-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: calc(var(--nfs-search-shell-min-height) - (var(--nfs-search-shell-padding-y) * 2));
    padding: 0 0.1rem;
    font-family: var(--nfs-ff, 'Montserrat', system-ui, sans-serif);
    font-size: clamp(0.82rem, 0.16vw + 0.79rem, 0.94rem);
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--nfs-t1, #0d1117);
    outline: none;
    box-shadow: none;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.nfs-search-input::placeholder {
    color: var(--nfs-t4, #9aa0b8);
}

.nfs-search-input:focus,
.nfs-search-input:focus-visible {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
    outline: none;
}

.nfs-search-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
}

.nfs-search-mic {
    box-sizing: border-box;
    width: var(--nfs-search-action-size);
    height: var(--nfs-search-action-size);
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.12);
    color: var(--nfs-green-bright, #22c55e);
    border: 0.5px solid rgba(34, 197, 94, 0.28);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, border-color 0.2s, color 0.2s;
}

.nfs-search-mic:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(20, 163, 74, 0.35);
    color: var(--nfs-green-dark, #0a6a30);
}

.nfs-search-mic.listening {
    background: rgba(201, 34, 34, 0.12);
    color: var(--nfs-red, #c92222);
    border-color: rgba(201, 34, 34, 0.3);
    animation: nfs-global-search-mic-pulse 1s ease-in-out infinite;
}

@keyframes nfs-global-search-mic-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.nfs-search-submit {
    width: var(--nfs-search-action-size);
    height: var(--nfs-search-action-size);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--nfs-blue-g, linear-gradient(150deg, #3b7fff 0%, #1a5fd9 50%, #1248b0 100%));
    color: #fff;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(26, 95, 217, 0.35);
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}

.nfs-search-submit:hover {
    filter: brightness(1.06);
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(26, 95, 217, 0.4);
}

.nfs-search-wrapper[data-search-mode="deep"] .nfs-search-shell {
    border-color: rgba(255, 184, 0, 0.24);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 36px rgba(255, 184, 0, 0.1);
}

/* Режим AI: без дополнительного «ореола» при фокусе в поле */
.nfs-search-wrapper[data-search-mode="deep"].is-expanded .nfs-search-shell,
.nfs-search-wrapper[data-search-mode="deep"]:focus-within .nfs-search-shell {
    border-color: rgba(255, 184, 0, 0.24);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05) inset,
        0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 36px rgba(255, 184, 0, 0.1);
}

.nfs-search-wrapper[data-search-mode="deep"] .nfs-search-submit {
    color: #2f1b00;
    background: linear-gradient(135deg, rgba(255, 206, 92, 0.98) 0%, rgba(255, 184, 0, 0.96) 100%);
    box-shadow: 0 2px 10px rgba(255, 184, 0, 0.32);
}

.nfs-search-wrapper[data-search-mode="deep"] .nfs-search-submit:hover {
    box-shadow: 0 4px 16px rgba(255, 184, 0, 0.38);
}

@media (max-width: 767px) {
    .nfs-search-wrapper {
        --nfs-search-shell-min-height: 52px;
        --nfs-search-shell-padding-y: 5px;
        --nfs-search-shell-padding-x: 5px;
        --nfs-search-shell-gap: 0.45rem;
        --nfs-search-mode-btn-height: 34px;
        --nfs-search-action-size: 34px;
    }

    .nfs-search-shell {
        gap: 0.5rem;
    }

    .nfs-search-mode-btn {
        min-height: 34px;
        padding: 0.42rem 0.72rem;
        font-size: 0.75rem;
    }

    .nfs-search-input {
        font-size: max(15px, var(--text-sm));
    }
}

@media (max-width: 480px) {
    .nfs-search-wrapper {
        --nfs-search-shell-min-height: 50px;
        --nfs-search-shell-padding-x: 4px;
        --nfs-search-shell-gap: 0.35rem;
        --nfs-search-mode-btn-height: 32px;
        --nfs-search-action-size: 32px;
    }

    .nfs-search-shell {
        gap: 0.4rem;
    }

    .nfs-search-mode-switch {
        max-width: 46%;
    }

    .nfs-search-mode-badge {
        display: none;
    }

    .nfs-search-mode-btn {
        padding-left: 0.62rem;
        padding-right: 0.62rem;
        font-size: 0.72rem;
    }

    .nfs-search-actions {
        gap: 4px;
    }

    .nfs-search-mic {
        display: flex;
    }

    .nfs-search-input {
        padding-left: 0.12rem;
        padding-right: 0.12rem;
    }
}

/* ── Выпадающий блок (список + превью) ── */
.nfs-search-wrapper .global-search-dropdown-wrap {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    align-content: stretch;
    gap: 0;
    z-index: var(--z-dropdown);
    width: 100%;
    overflow: hidden;
}

.nfs-search-wrapper .global-search-dropdown-wrap .global-search-results { order: 1; }
.nfs-search-wrapper .global-search-dropdown-wrap .global-search-preview { order: 2; }
.nfs-search-wrapper .global-search-dropdown-wrap[hidden] { display: none !important; }

@media (min-width: 1024px) {
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split {
        --global-search-row-h: min(648px, 72vh);
        height: var(--global-search-row-h);
        min-height: var(--global-search-row-h);
        max-height: var(--global-search-row-h);
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-results {
        position: static !important;
        min-width: 0;
        align-self: stretch;
        height: 100% !important;
        min-height: 0;
        max-height: none !important;
        background: var(--nfs-white, #fff);
        box-shadow:
            0 8px 32px rgba(13, 17, 23, 0.1),
            0 1px 0 rgba(255, 255, 255, 0.9) inset;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        overflow: hidden !important;
        padding: 0 !important;
        transition: flex-basis 0.22s ease, max-width 0.22s ease, border-radius 0.22s ease;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split:not(.has-preview) .global-search-results {
        flex: 0 0 66.666%;
        max-width: 66.666%;
        border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
        border-radius: var(--nfs-rl, 14px);
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-results {
        flex: 0 0 33.333%;
        max-width: 33.333%;
        border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
        border-radius: var(--nfs-rl, 14px) 0 0 var(--nfs-rl, 14px);
        border-right: none;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-results-inner {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

.nfs-search-wrapper .global-search-dropdown-wrap:not(.global-search-split) .global-search-results {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    flex: 1 1 100%;
    min-width: 0;
    max-height: 520px;
    background: var(--nfs-white, #fff);
    border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    border-radius: var(--nfs-rl, 14px);
    box-shadow:
        0 4px 24px rgba(13, 17, 23, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.95) inset;
    overflow-y: auto;
    transition: flex 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.3s ease, max-width 0.3s ease;
}

.nfs-search-wrapper .global-search-dropdown-wrap.global-search-split:not(.has-preview) .global-search-preview {
    display: none !important;
}

.nfs-search-wrapper .global-search-dropdown-wrap.global-search-loading .global-search-results {
    flex: 1 1 100%;
    max-width: 100%;
    border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    border-radius: var(--nfs-rl, 14px);
}

.nfs-search-wrapper .global-search-dropdown-wrap.global-search-loading .global-search-preview {
    display: none !important;
}

.nfs-search-wrapper .global-search-results-inner {
    min-height: 120px;
}

.nfs-search-wrapper .global-search-results-inner--loading {
    min-height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: clamp(1.5rem, 3vw, 2.75rem);
    background:
        radial-gradient(circle at top right, rgba(255, 92, 92, 0.08), transparent 28%),
        radial-gradient(circle at bottom left, rgba(245, 158, 11, 0.1), transparent 24%),
        linear-gradient(180deg, rgba(244, 246, 250, 0.72) 0%, rgba(255, 255, 255, 0.96) 42%);
}

.nfs-search-wrapper .global-search-list {
    padding: 0.5rem;
}

.nfs-search-wrapper .global-search-list--loading {
    flex: 1 1 auto;
    min-height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nfs-search-wrapper .global-search-dropdown-wrap.global-search-loading .global-search-results-inner {
    overflow: hidden;
}

.nfs-search-wrapper .global-search-loading-state {
    width: min(100%, 35rem);
    min-height: min(360px, 56vh);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.15rem;
    text-align: center;
}

.nfs-search-wrapper .global-search-loading-spinner {
    position: relative;
    width: clamp(72px, 8vw, 96px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.nfs-search-wrapper .global-search-loading-spinner::before {
    content: '';
    position: absolute;
    inset: -16%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 95, 217, 0.12) 0%, rgba(26, 95, 217, 0.02) 58%, transparent 74%);
    filter: blur(10px);
    opacity: 0.95;
    pointer-events: none;
}

.nfs-search-wrapper .global-search-loading-spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(26, 95, 217, 0.12);
    border-top-color: var(--nfs-blue3, #3b7fff);
    border-right-color: rgba(217, 225, 238, 0.95);
    border-bottom-color: rgba(201, 34, 34, 0.46);
    border-left-color: rgba(26, 95, 217, 0.3);
    animation: global-search-loader-spin 0.95s linear infinite;
    box-shadow:
        0 10px 26px rgba(26, 95, 217, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.82) inset;
}

@supports ((-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px))) or (mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)))) {
    .nfs-search-wrapper .global-search-loading-spinner-ring {
        border: none;
        background: conic-gradient(
            from 220deg,
            rgba(26, 95, 217, 0.08) 0deg,
            var(--nfs-blue3, #3b7fff) 118deg,
            rgba(217, 225, 238, 0.96) 186deg,
            rgba(201, 34, 34, 0.72) 278deg,
            rgba(26, 95, 217, 0.08) 360deg
        );
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
        mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
    }
}

.nfs-search-wrapper[data-search-mode="deep"] .global-search-loading-spinner::before {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.14) 0%, rgba(245, 158, 11, 0.03) 58%, transparent 74%);
}

.nfs-search-wrapper[data-search-mode="deep"] .global-search-loading-spinner-ring {
    border-top-color: var(--nfs-amber-bright, #fbbf24);
    border-right-color: rgba(59, 127, 255, 0.92);
    border-bottom-color: rgba(245, 158, 11, 0.48);
    box-shadow:
        0 10px 28px rgba(245, 158, 11, 0.16),
        0 0 0 1px rgba(255, 255, 255, 0.82) inset;
}

@supports ((-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px))) or (mask: radial-gradient(farthest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)))) {
    .nfs-search-wrapper[data-search-mode="deep"] .global-search-loading-spinner-ring {
        background: conic-gradient(
            from 215deg,
            rgba(245, 158, 11, 0.08) 0deg,
            var(--nfs-amber-bright, #fbbf24) 108deg,
            rgba(59, 127, 255, 0.92) 210deg,
            rgba(245, 158, 11, 0.52) 292deg,
            rgba(245, 158, 11, 0.08) 360deg
        );
    }
}

.nfs-search-wrapper .global-search-loading-spinner-core {
    position: relative;
    z-index: 1;
    width: 40%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 253, 0.96) 48%, rgba(217, 225, 238, 0.88) 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.92) inset,
        0 0 0 1px rgba(26, 95, 217, 0.08),
        0 6px 12px rgba(13, 17, 23, 0.08);
    animation: global-search-loader-pulse 1.75s ease-in-out infinite;
}

.nfs-search-wrapper .global-search-loading-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.48rem;
    width: min(100%, 32rem);
}

.nfs-search-wrapper .global-search-loading-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    border-radius: 0;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--nfs-t4, #9aa0b8);
    background: transparent;
    box-shadow: none;
}

.nfs-search-wrapper .global-search-loading-badge::before {
    content: '';
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nfs-blue, #1a5fd9) 0 44%, rgba(245, 158, 11, 0.92) 44% 72%, rgba(217, 225, 238, 0.98) 72% 100%);
    background-size: 200% 100%;
    animation: nfs-nav-shimmer 3.6s linear infinite;
}

.nfs-search-wrapper[data-search-mode="deep"] .global-search-loading-badge {
    color: var(--nfs-amber-dark, #d97706);
}

.nfs-search-wrapper .global-search-loading-title {
    margin: 0;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: clamp(1.05rem, 1.4vw, 1.24rem);
    font-weight: 800;
    line-height: 1.35;
    color: var(--nfs-t1, #0d1117);
}

.nfs-search-wrapper .global-search-loading-query {
    margin: 0;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: clamp(0.98rem, 1.2vw, 1.08rem);
    font-weight: 700;
    color: var(--nfs-blue-dark, #1248b0);
    line-height: 1.4;
}

.nfs-search-wrapper[data-search-mode="deep"] .global-search-loading-query {
    color: var(--nfs-amber-dark, #d97706);
}

.nfs-search-wrapper .global-search-loading-caption {
    margin: 0.08rem 0 0;
    max-width: 36ch;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--nfs-t3, #5a6480);
}

.nfs-search-wrapper .global-search-see-all-wrap {
    flex-shrink: 0;
    padding: 0.65rem 0.75rem 0.85rem;
    margin-top: auto;
    border-top: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    text-align: center;
    background: linear-gradient(180deg, var(--nfs-ch1, #f4f6fa) 0%, var(--nfs-white, #fff) 100%);
}

.nfs-search-wrapper .global-search-see-all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--nfs-blue, #1a5fd9);
    text-decoration: none;
    border-radius: var(--nfs-r, 10px);
    padding: 0.4rem 0.75rem;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
}

.nfs-search-wrapper .global-search-see-all:hover {
    color: var(--nfs-blue-dark, #1248b0);
    background: var(--nfs-blue-light, rgba(26, 95, 217, 0.08));
    box-shadow: 0 0 0 1px rgba(26, 95, 217, 0.12);
}

@media (min-width: 1024px) {
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview {
        position: static !important;
        flex: 1 1 66.666%;
        min-width: 0;
        max-width: 66.666%;
        align-self: stretch;
        height: 100%;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 0.75rem;
        background: linear-gradient(170deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #f4f6fa) 100%);
        border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
        border-left: none;
        border-radius: 0 var(--nfs-rl, 14px) var(--nfs-rl, 14px) 0;
        box-shadow:
            0 8px 32px rgba(13, 17, 23, 0.08),
            0 1px 0 rgba(255, 255, 255, 0.95) inset;
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        opacity: 1;
        transition: background 0.25s ease;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview-card {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview-image {
        flex: 1 1 0;
        min-height: 0;
        max-height: none;
        aspect-ratio: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(155deg, var(--nfs-ch1, #e6ebf6) 0%, var(--nfs-ch2, #d5dcf0) 100%);
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview-carousel-img {
        width: auto;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        object-position: center;
        transition: opacity 0.2s ease;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview-body {
        flex-shrink: 0;
    }
}

.nfs-search-wrapper .global-search-preview[hidden] { display: none !important; }

.nfs-search-wrapper .global-search-preview-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--nfs-white, #fff);
    border-radius: var(--nfs-r, 10px);
    overflow: hidden;
    border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.nfs-search-wrapper .global-search-preview-card:hover {
    box-shadow:
        0 0 0 1px rgba(26, 95, 217, 0.14),
        0 10px 28px rgba(0, 0, 0, 0.1);
    border-color: rgba(26, 95, 217, 0.22);
}

.nfs-search-wrapper .global-search-preview-image {
    position: relative;
    aspect-ratio: 4/3;
    min-height: 200px;
    overflow: hidden;
    background: var(--nfs-ch2, #e0e5f0);
}

.nfs-search-wrapper .global-search-preview-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nfs-search-wrapper .global-search-preview-image .global-search-source-flag img {
    width: 28px;
    height: 19px;
    object-fit: cover;
}

/* Листание по горизонтали как у карточек nfs-cc (car_card_gallery.js) */
.nfs-search-wrapper .global-search-preview-image[data-gallery-images] {
    position: relative;
}

.nfs-search-wrapper .global-search-item-thumb {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

.nfs-search-wrapper .global-search-item-thumb .global-search-source-flag {
    top: 4px;
    right: 4px;
    padding: 0;
    border-radius: 4px;
}

.nfs-search-wrapper .global-search-item-thumb .global-search-source-flag img {
    width: 22px;
    height: 15px;
    border-radius: 4px;
}

.nfs-search-wrapper .global-search-preview-image .global-search-source-flag {
    top: 8px;
    right: 8px;
}

.nfs-search-wrapper .global-search-preview-image[data-gallery-images] img,
.nfs-search-wrapper .global-search-preview-image[data-gallery-images] .global-search-preview-carousel-img {
    -webkit-user-drag: none;
    user-select: none;
}

.nfs-search-wrapper .global-search-preview-body {
    padding: 0.85rem 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.nfs-search-wrapper .global-search-preview-headline {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 0;
    min-width: 0;
}

.nfs-search-wrapper .global-search-preview-title {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: var(--text-md);
    font-weight: 800;
    color: var(--nfs-t1, #0d1117);
    margin: 0;
    line-height: var(--leading-snug);
    flex: 1 1 auto;
    min-width: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Цена — градиент как у карточек каталога */
.nfs-search-wrapper .global-search-preview-price {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: var(--text-lg);
    font-weight: 800;
    line-height: 1.15;
    background: linear-gradient(135deg, #2b6fe8, #1248b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nfs-search-wrapper .global-search-preview-price--headline {
    flex: 0 0 auto;
    text-align: right;
    margin: 0;
    max-width: 46%;
    line-height: var(--leading-snug);
    white-space: normal;
    word-break: break-word;
}

.nfs-search-wrapper .global-search-preview-specs {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem 0.65rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0 0.45rem;
    margin: 0.55rem 0 0;
    border-top: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.nfs-search-wrapper .global-search-preview-spec {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
}

.nfs-search-wrapper .global-search-preview-ico-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #f4f6fa));
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    color: var(--nfs-blue, #1a5fd9);
    margin-top: 0.05rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.nfs-search-wrapper .global-search-preview-ico {
    width: 1rem;
    height: 1rem;
    display: block;
}

.nfs-search-wrapper .global-search-preview-spec-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.nfs-search-wrapper .global-search-preview-spec-label {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nfs-t4, #9aa0b8);
    font-weight: 700;
    line-height: 1.2;
}

.nfs-search-wrapper .global-search-preview-spec-value {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--nfs-t2, #2a3450);
    line-height: var(--leading-snug);
    word-break: break-word;
}

.nfs-search-wrapper .global-search-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    font-size: var(--text-sm);
    color: var(--nfs-t3, #5a6480);
    margin-bottom: 0.65rem;
}

.nfs-search-wrapper .global-search-preview-meta-sep {
    color: var(--nfs-t4, #9aa0b8);
    user-select: none;
    flex-shrink: 0;
}

.nfs-search-wrapper .global-search-preview-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nfs-search-wrapper .global-search-preview-meta i { font-size: 0.65rem; }

/* Узкий хедер (как max-width:1023 у шапки): список на всю ширину панели поиска + прокрутка по высоте */
@media (max-width: 1023px) {
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-preview {
        display: none !important;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split {
        height: auto;
        min-height: 0;
        max-height: none;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /*
     * Перебить узкие колонки десктопа:
     * .global-search-split.has-preview → 33.333%, :not(.has-preview) → 66.666% — выше по специфичности,
     * чем один селектор без .has-preview, поэтому перечисляем оба варианта.
     */
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-results,
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split:not(.has-preview) .global-search-results,
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-results {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        height: auto !important;
        align-self: stretch;
        /* Список на всю доступную высоту под строкой поиска (канон DS mobile) */
        max-height: min(calc(100dvh - var(--nfs-mobile-header-offset, 72px) - 7.5rem), 75vh) !important;
        border-radius: 12px;
        border-right: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
    }

    /* Одна прокрутка: список + «Смотреть всё» внутри области с ограничением по высоте */
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-results-inner {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
    }

    /* Список тянется на всю ширину выпадающего блока (не колонку ~33%) */
    .nfs-search-wrapper .global-search-list {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .nfs-search-wrapper .global-search-loading-state {
        min-height: min(300px, 50vh);
        gap: 1rem;
    }

    .nfs-search-wrapper .global-search-loading-spinner {
        width: 72px;
    }

    .nfs-search-wrapper .global-search-loading-title {
        font-size: 0.95rem;
    }

    .nfs-search-wrapper .global-search-loading-caption {
        font-size: 0.78rem;
    }

    /* Режим без split: тоже ограничиваем высоту и прокрутку на тач-устройствах */
    .nfs-search-wrapper .global-search-dropdown-wrap:not(.global-search-split) .global-search-results {
        max-height: min(calc(100dvh - var(--nfs-mobile-header-offset, 72px) - 7.5rem), 75vh);
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Мобильный поиск: карточка — фото на всю ширину, заголовок под ним (канон DS) */
    .nfs-search-wrapper .global-search-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
        padding: 10px 12px;
    }

    .nfs-search-wrapper .global-search-item-thumb {
        width: 100%;
    }

    .nfs-search-wrapper .global-search-item-thumb img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9;
        max-height: 160px;
        object-fit: cover;
        border-radius: 10px;
    }

    .nfs-search-wrapper .global-search-item-content {
        width: 100%;
        flex: none;
    }

    .nfs-search-wrapper .global-search-item-title {
        white-space: normal;
        word-break: break-word;
    }
}

/* ═══════════════════════════
   Канон DS «Хедер» (≥1024px): мегаменю 1:3, превью поиска 3×2, фото cover
═══════════════════════════ */
@media (min-width: 1024px) {
    .nfs-megamenu--cols {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    }

    .nfs-megamenu-col--categories,
    .nfs-megamenu-col--brands {
        min-width: 0;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview-image {
        width: 100%;
        pointer-events: auto;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview-carousel-img {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center;
        pointer-events: auto;
    }

    .nfs-search-wrapper .global-search-preview-image .global-search-source-flag img {
        width: 28px !important;
        height: 19px !important;
        max-width: 28px !important;
        max-height: 19px !important;
        object-fit: cover !important;
    }

    .nfs-search-wrapper .global-search-preview-specs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
        gap: 0.5rem 0.65rem;
        flex-wrap: unset !important;
        overflow-x: visible !important;
    }

    .nfs-search-wrapper .global-search-preview-spec {
        flex: unset !important;
        min-width: 0;
    }
}

/* Строки результатов (десктоп: фото слева) */
@media (min-width: 1024px) {
    .nfs-search-wrapper .global-search-item {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.65rem 0.75rem;
        border-radius: var(--nfs-r, 10px);
        transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        border: 0.5px solid transparent;
        font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    }

    .nfs-search-wrapper .global-search-item-thumb {
        width: 72px;
        height: 54px;
        border-radius: var(--nfs-r, 10px);
    }

    .nfs-search-wrapper .global-search-item-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: var(--nfs-r, 10px);
        border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
        display: block;
    }

    .nfs-search-wrapper .global-search-item-content {
        flex: 1;
        min-width: 0;
    }
}

.nfs-search-wrapper .global-search-item {
    border-radius: var(--nfs-r, 10px);
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    border: 0.5px solid transparent;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
}

.nfs-search-wrapper .global-search-item:hover {
    background: var(--nfs-blue-light, rgba(26, 95, 217, 0.08));
    border-color: rgba(26, 95, 217, 0.12);
    box-shadow: 0 1px 4px rgba(26, 95, 217, 0.08);
}

.nfs-search-wrapper .global-search-item-title {
    font-weight: 700;
    font-size: 0.8125rem;
    line-height: 1.35;
    margin-bottom: 0.25rem;
    color: var(--nfs-t1, #0d1117);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nfs-search-wrapper .global-search-item-meta {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--nfs-t3, #5a6480);
    line-height: 1.35;
}

.nfs-search-wrapper .global-search-empty {
    padding: 1.25rem 1rem;
    text-align: center;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    color: var(--nfs-t3, #5a6480);
    font-size: var(--text-base);
}

/* Перебить устаревшие правила из front.css (.global-search-results с position/padding) */
.nfs-search-wrapper #globalSearchResults.global-search-results {
    position: static !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: auto !important;
}

/* ═══════════════════════════════════════════════
   NFS AUTO — Мегаменю в фирменном стиле (Design System)
   Дропдауны навигации с брендовыми элементами
═══════════════════════════════════════════════ */

/* Анимация shimmer для бренд-полоски */
@keyframes nfs-nav-shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@keyframes global-search-loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes global-search-loader-pulse {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.9;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Пункты навигации — обновлённый стиль */
.nfs-nav-item > a {
    position: relative;
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nfs-t2, #2a3450);
    text-decoration: none;
    border-radius: var(--radius-md, 8px);
    transition: all 0.2s ease;
    background: transparent;
}

.nfs-nav-item > a:hover {
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.06);
}

.nfs-nav-chevron {
    width: 10px;
    height: 10px;
    color: var(--nfs-t4, #9aa0b8);
    flex-shrink: 0;
    margin-left: -2px;
    transition: transform 0.25s ease, color 0.2s ease;
}

.nfs-nav-item.has-dropdown:hover .nfs-nav-chevron {
    transform: rotate(180deg);
    color: var(--nfs-blue, #1a5fd9);
}

/* ── Dropdown панель (фирменный стиль) ── */
.nfs-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 240px;
    padding: 8px;
    background: linear-gradient(170deg, #fff, var(--nfs-ch1, #f4f6fa));
    border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    border-radius: var(--nfs-rl, 14px);
    box-shadow: 
        0 16px 40px rgba(0, 0, 0, 0.12),
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    z-index: var(--z-dropdown, 100);
    overflow: hidden;
}

/* Бренд-полоска сверху */
.nfs-dropdown::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent, 
        var(--nfs-blue, #1a5fd9) 15%,
        var(--nfs-blue3, #3b7fff) 25%,
        #fff 35%,
        var(--nfs-blue3, #3b7fff) 45%,
        var(--nfs-red, #c92222) 55%,
        #ffaaaa 65%,
        var(--nfs-red, #c92222) 75%,
        var(--nfs-ch3, #b8c0d4) 85%,
        transparent);
    background-size: 300% 100%;
    animation: nfs-nav-shimmer 4s linear infinite;
}

/* Невидимый мост — устраняет dead zone */
.nfs-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.nfs-nav-item.has-dropdown:hover .nfs-dropdown {
    display: block;
    animation: nfs-dropdown-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes nfs-dropdown-in {
    from { 
        opacity: 0; 
        transform: translateY(-8px) scale(0.98); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0) scale(1); 
    }
}

/* ── Элементы дропдауна ── */
.nfs-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nfs-t1, #0d1117);
    text-decoration: none;
    border-radius: var(--nfs-r, 10px);
    transition: all 0.15s ease;
    position: relative;
    background: transparent;
    border: 0.5px solid transparent;
    margin-bottom: 2px;
}

.nfs-dropdown-item:last-child {
    margin-bottom: 0;
}

.nfs-dropdown-item:hover,
.nfs-dropdown-item:focus-visible {
    background: linear-gradient(135deg, rgba(26, 95, 217, 0.08), rgba(26, 95, 217, 0.03));
    border-color: rgba(26, 95, 217, 0.12);
    color: var(--nfs-blue, #1a5fd9);
}

/* Акцентная полоска слева при hover */
.nfs-dropdown-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px;
    height: 60%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(180deg, var(--nfs-blue, #1a5fd9), var(--nfs-blue3, #3b7fff));
    transition: transform 0.2s ease;
}

.nfs-dropdown-item:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* Количество элементов (badge) */
.nfs-dropdown-item-count {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    font-family: 'Share Tech Mono', monospace;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.08);
    border: 0.5px solid rgba(26, 95, 217, 0.15);
    padding: 2px 7px;
    border-radius: 4px;
}

/* ── Разделитель в меню ── */
.nfs-dropdown-separator {
    height: 0.5px;
    background: var(--nfs-b1, rgba(58, 66, 96, 0.07));
    margin: 6px 12px;
}

/* ── Заголовок секции в меню ── */
.nfs-dropdown-header {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nfs-t4, #9aa0b8);
    padding: 10px 12px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nfs-dropdown-header::before {
    content: '';
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, var(--nfs-blue, #1a5fd9), transparent);
}

/* ── Акцентный элемент (например AI-поиск) ── */
.nfs-dropdown-item--accent {
    background: linear-gradient(150deg, #3b7fff, #1a5fd9, #1248b0);
    color: #fff !important;
    border-color: rgba(59, 127, 255, 0.4);
    box-shadow: 0 2px 10px rgba(26, 95, 217, 0.25);
    margin-top: 6px;
}

.nfs-dropdown-item--accent:hover {
    background: linear-gradient(150deg, #4a8fff, #2a6fe8, #1a5fd9);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 95, 217, 0.35);
}

.nfs-dropdown-item--accent::before {
    display: none;
}

/* ── Иконка в элементе меню ── */
.nfs-dropdown-item-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--nfs-blue, #1a5fd9), #1248b0);
    color: rgba(255, 255, 255, 0.9);
    transition: box-shadow 0.15s ease;
}

.nfs-dropdown-item:hover .nfs-dropdown-item-icon {
    box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.2);
}

/* Варианты цветов иконок */
.nfs-dropdown-item-icon--green {
    background: linear-gradient(135deg, #14a34a, #0a6a30);
}

.nfs-dropdown-item-icon--amber {
    background: linear-gradient(135deg, #d97706, #923800);
}

.nfs-dropdown-item-icon--purple {
    background: linear-gradient(135deg, #7f77dd, #5b21b6);
}

/* ── Футер дропдауна (ссылка «Все ...») ── */
.nfs-dropdown-footer {
    margin-top: 6px;
    padding-top: 8px;
    border-top: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
}

.nfs-dropdown-footer .nfs-dropdown-item {
    font-size: 0.75rem;
    color: var(--nfs-blue, #1a5fd9);
    justify-content: center;
}

.nfs-dropdown-footer .nfs-dropdown-item:hover {
    background: transparent;
    text-decoration: underline;
}

.nfs-dropdown-footer .nfs-dropdown-item::before {
    display: none;
}

/* ── Responsive для мегаменю ── */
@media (min-width: 1024px) and (max-width: 1279px) {
    .nfs-dropdown {
        min-width: 200px;
    }
    
    .nfs-dropdown-item {
        padding: 8px 10px;
        font-size: 0.75rem;
    }
}

/* ═══════════════════════════════════════════════
   NFS AUTO — МЕГАМЕНЮ (UI Pack Design System)
   Полноценные мегаменю с колонками, иконками
═══════════════════════════════════════════════ */

@keyframes nfs-megamenu-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes nfs-megamenu-stripe {
    0% { background-position: 0 0; }
    100% { background-position: 28px 0; }
}

.nfs-megamenu-nav .nfs-nav-item.has-megamenu {
    position: relative;
}

/* ПК: якорь мегаменю — .nfs-header-main, не пункт навигации */
@media (min-width: 1024px) {
    .nfs-header-main .nfs-megamenu-nav .nfs-nav-item.has-megamenu {
        position: static;
    }
}

.nfs-megamenu-nav .nfs-nav-item.has-megamenu > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(243, 244, 246, 0.92);
    text-decoration: none;
    border-radius: var(--nfs-r, 10px);
    transition: all 0.18s ease;
}

.nfs-megamenu-nav .nfs-nav-item.has-megamenu > a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nfs-megamenu-nav .nfs-nav-chevron {
    width: 10px;
    height: 10px;
    color: rgba(255, 255, 255, 0.45);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 2px;
}

.nfs-megamenu-nav .nfs-nav-item.has-megamenu:hover .nfs-nav-chevron,
.nfs-megamenu-nav .nfs-nav-item.has-megamenu.is-open .nfs-nav-chevron {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.85);
}

/* ── Базовая мегаменю панель ──
   На ПК под .nfs-header-main: ширина и left как у #globalSearchInput (--nfs-megamenu-panel-*, nfs-megamenu-align.js) */
.nfs-megamenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid rgba(26, 95, 217, 0.12);
    border-radius: var(--nfs-r, 12px);
    box-shadow: 0 16px 40px -12px rgba(15, 23, 42, 0.16);
    padding: 12px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Плавный crossfade при смене пункта; без keyframe-анимации (она давала вспышку) */
    transition: opacity 0.2s ease, visibility 0.2s ease, left 0.2s ease, width 0.2s ease;
}

@media (min-width: 1024px) {
    .nfs-header-main .nfs-megamenu {
        left: var(--nfs-megamenu-panel-left, 0px);
        width: var(--nfs-megamenu-panel-width, 100%);
        max-width: calc(100% - var(--nfs-megamenu-panel-left, 0px));
        transform: none;
        min-width: 0;
        min-height: 308px;
        box-sizing: border-box;
        padding: 0;
    }

    /* Каталог (колонки): на всю доступную ширину .nfs-header-main справа от left — больше места категориям без скролла */
    .nfs-header-main .nfs-megamenu.nfs-megamenu--cols {
        width: calc(100% - var(--nfs-megamenu-panel-left, 0px)) !important;
        max-width: none;
    }
}

.nfs-megamenu::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 18px;
    pointer-events: none;
}

/* Двухуровневая шапка: панель под всей строкой .nfs-header-main — мост до ссылки навигации */
@media (min-width: 1024px) {
    .nfs-header--two-tier .nfs-nav-item.has-megamenu.is-open > .nfs-megamenu::before {
        height: 72px;
        pointer-events: auto;
    }

    .nfs-header-main.has-megamenu-open::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 0;
    }

    .nfs-header-main.has-megamenu-open .nfs-megamenu-nav,
    .nfs-header-main.has-megamenu-open .nfs-nav-item.has-megamenu.is-open > .nfs-megamenu {
        z-index: 1;
    }
}

/* Анимированная полоска сверху панели мегаменю отключена */
.nfs-megamenu::after {
    content: none;
    display: none;
}

.nfs-nav-item.has-megamenu.is-open .nfs-megamenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Уходящая панель при переключении пункта (JS: .is-leaving) — fade-out поверх новой */
.nfs-nav-item.has-megamenu.is-open.is-leaving > .nfs-megamenu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1001;
}

.nfs-nav-item.has-megamenu.is-open:not(.is-leaving) > .nfs-megamenu {
    z-index: 1002;
}

/* ПК двухуровневая шапка: только .is-open (JS), не :hover — иначе панель над hero держит hover на пункте */
@media (min-width: 1024px) {
    .nfs-header--two-tier .nfs-nav-item.has-megamenu:hover .nfs-megamenu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .nfs-header--two-tier .nfs-nav-item.has-megamenu.is-open:not(.is-leaving) .nfs-megamenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .nfs-header--two-tier .nfs-nav-item.has-megamenu.is-open.is-leaving > .nfs-megamenu {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Закрытые панели: дочерние с pointer-events:auto не должны ловить клики над hero */
    .nfs-header-main .nfs-nav-item.has-megamenu:not(.is-open) > .nfs-megamenu,
    .nfs-header-main .nfs-nav-item.has-megamenu:not(.is-open) > .nfs-megamenu *,
    .nfs-header-main .nfs-nav-item.has-megamenu.is-leaving > .nfs-megamenu,
    .nfs-header-main .nfs-nav-item.has-megamenu.is-leaving > .nfs-megamenu * {
        pointer-events: none !important;
    }
}

/* ═══════════════════════════
   МЕГАМЕНЮ — КОЛОНКИ (Каталог)
   Пропорции DS: категории 1 · марки 3 (≥1024px)
═══════════════════════════ */
.nfs-megamenu--cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 0;
    width: 100%;
    min-height: auto;
    padding: 0;
    align-content: start;
}

.nfs-megamenu-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-right: 1px solid rgba(26, 95, 217, 0.08);
    background: #ffffff;
}

.nfs-megamenu-col--categories {
    background: #f6f8fc;
}

.nfs-megamenu-col:last-child {
    border-right: none;
}

.nfs-megamenu-col-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nfs-t4, #8a94ac);
    padding: 0 0 10px;
    margin: 0 0 4px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nfs-megamenu-col-title::before {
    content: '';
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, var(--nfs-blue, #1a5fd9), transparent);
}

/* Популярные марки: flex-wrap — ширина по названию; высота плитки 30px, отступы 0 6px */
.nfs-megamenu-brands-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    margin-bottom: 6px;
    max-height: min(320px, 52vh);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
    isolation: isolate;
}

.nfs-megamenu-brands-grid .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-with-logo,
.nfs-megamenu-brands-grid .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-name-only {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    box-sizing: border-box;
    margin-bottom: 0;
    padding: 0 8px 0 6px;
    width: fit-content;
    max-width: min(280px, 100%);
    min-width: 0;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    flex: 0 0 auto;
    text-decoration: none;
    text-align: left;
    border-radius: 9px;
    position: relative;
    z-index: 0;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(15, 23, 42, 0.06);
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.nfs-megamenu-brands-grid .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-with-logo:hover,
.nfs-megamenu-brands-grid .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-name-only:hover {
    background: linear-gradient(135deg, rgba(26, 95, 217, 0.08), rgba(26, 95, 217, 0.04));
    border-color: rgba(26, 95, 217, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 95, 217, 0.12);
}

.nfs-megamenu-brands-grid .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-with-logo:focus-visible,
.nfs-megamenu-brands-grid .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-name-only:focus-visible {
    outline: 2px solid var(--nfs-blue, #1a5fd9);
    outline-offset: 3px;
}

.nfs-megamenu-brands-grid .nfs-megamenu-brand-logo-wrap {
    position: relative;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nfs-megamenu-brands-grid .nfs-megamenu-brand-fallback {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.08);
    border-radius: 6px;
}

.nfs-megamenu-brands-grid .nfs-megamenu-brand-fallback.is-visible {
    display: flex;
}

/* Имена марок: перенос, без ellipsis (перебивается catalog_nav для silo) */
.nfs-megamenu-brands-grid .nfs-megamenu-brand-text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: var(--nfs-t1, #0d1117);
    display: block;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

/* По категориям: две колонки, без ограничения высоты — все пункты видны */
.nfs-megamenu-cats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    width: 100%;
    margin-bottom: 0;
    align-items: start;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.nfs-megamenu-cats-grid .nfs-megamenu-link {
    margin-bottom: 0;
}

/* Категории: как .arr-link (t3 + стрелка); типографика — у .nfs-megamenu-link-name; стрелка вплотную к тексту */
.nfs-megamenu-cats-grid .nfs-megamenu-link--arr {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 0;
    margin-bottom: 0;
    color: var(--nfs-t3, #5a6480);
    text-decoration: none;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: gap 0.2s ease, color 0.15s ease;
}

.nfs-megamenu-cats-grid .nfs-megamenu-link--arr:hover {
    gap: 4px;
    color: var(--nfs-blue, #1a5fd9);
    background: transparent;
    border-color: transparent;
}

.nfs-megamenu-cats-grid .nfs-megamenu-link--arr .nfs-megamenu-link-name {
    min-width: 0;
    flex: 0 1 auto;
    max-width: calc(100% - 20px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left;
    color: var(--nfs-t3, #5a6480);
}

.nfs-megamenu-cats-grid .nfs-megamenu-link--arr:hover .nfs-megamenu-link-name {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-cats-grid .nfs-megamenu-link--arr .nfs-megamenu-link-arr-ico {
    flex-shrink: 0;
    margin-top: 2px;
    color: inherit;
    transition: transform 0.2s ease;
}

.nfs-megamenu-cats-grid .nfs-megamenu-link--arr:hover .nfs-megamenu-link-arr-ico {
    transform: translateX(2px);
}

/* ── Ссылка в мегаменю ── */
.nfs-megamenu-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    text-decoration: none;
    border-radius: 7px;
    transition: all 0.15s ease;
    background: transparent;
    border: 0.5px solid transparent;
    margin-bottom: 2px;
}

.nfs-megamenu-link:hover {
    background: linear-gradient(135deg, rgba(26, 95, 217, 0.08), rgba(26, 95, 217, 0.04));
    border-color: rgba(26, 95, 217, 0.15);
}

.nfs-megamenu-link-icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.9);
    transition: box-shadow 0.15s ease;
}

.nfs-megamenu-link-icon--blue {
    background: linear-gradient(135deg, var(--nfs-blue, #1a5fd9), #1248b0);
}

.nfs-megamenu-link-icon--green {
    background: linear-gradient(135deg, #14a34a, #0a6a30);
}

.nfs-megamenu-link-icon--amber {
    background: linear-gradient(135deg, #d97706, #923800);
}

.nfs-megamenu-link-icon--purple {
    background: linear-gradient(135deg, #7f77dd, #5b21b6);
}

.nfs-megamenu-link:hover .nfs-megamenu-link-icon {
    box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.15);
}

.nfs-megamenu-link-icon--brand {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 4px 10px rgba(15, 23, 42, 0.06);
    color: transparent;
}

.nfs-megamenu-link:hover .nfs-megamenu-link-icon--brand {
    box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.12), 0 6px 14px rgba(15, 23, 42, 0.08);
}

.nfs-megamenu-brand-logo {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
}

.nfs-megamenu-brand-logo--kia {
    width: 22px;
    height: 15px;
}

.nfs-megamenu-brand-logo--hyundai {
    width: 20px;
    height: 20px;
}

.nfs-megamenu-brand-logo--genesis {
    width: 24px;
    height: 18px;
}

.nfs-megamenu-brand-logo--bmw {
    width: 18px;
    height: 18px;
}

.nfs-megamenu-link-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
}

.nfs-megamenu-link-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--nfs-t1, #0d1117);
    line-height: 1.35;
    margin-bottom: 1px;
}

.nfs-megamenu-link:hover .nfs-megamenu-link-name {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-link-sub {
    font-size: 10px;
    color: var(--nfs-t4, #9aa0b8);
}

.nfs-megamenu-link-count {
    font-size: 9px;
    font-weight: 700;
    color: var(--nfs-blue, #1a5fd9);
    font-family: 'Share Tech Mono', monospace;
    background: rgba(26, 95, 217, 0.08);
    border: 0.5px solid rgba(26, 95, 217, 0.15);
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: auto;
}

/* ── Кнопки в мегаменю ── */
.nfs-megamenu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.nfs-megamenu-btn--primary {
    background: linear-gradient(150deg, #3b7fff, #1a5fd9, #1248b0);
    color: #fff;
    box-shadow: 0 2px 10px rgba(26, 95, 217, 0.3);
}

.nfs-megamenu-btn--primary:hover {
    background: linear-gradient(150deg, #4a8fff, #2a6fe8, #1a5fd9);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 95, 217, 0.4);
}

/* ═══════════════════════════
   МЕГАМЕНЮ — ПРОСТОЙ СПИСОК (Инструменты)
   Размеры как в UI Pack дизайн-системы
═══════════════════════════ */
.nfs-megamenu--simple {
    width: 100%;
    min-height: 308px;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: stretch;
}

.nfs-megamenu-simple-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.15s ease;
    background: transparent;
    border: 0.5px solid transparent;
    margin-bottom: 2px;
}

.nfs-megamenu-simple-link:last-child {
    margin-bottom: 0;
}

.nfs-megamenu-simple-link:hover {
    background: linear-gradient(135deg, rgba(26, 95, 217, 0.06), rgba(26, 95, 217, 0.02));
    border-color: rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-simple-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(26, 95, 217, 0.06);
    color: var(--nfs-blue, #1a5fd9);
    transition: all 0.15s ease;
}

.nfs-megamenu-simple-icon--blue {
    background: linear-gradient(135deg, rgba(26, 95, 217, 0.1), rgba(26, 95, 217, 0.03));
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-simple-icon--green {
    background: linear-gradient(135deg, rgba(20, 163, 74, 0.1), rgba(20, 163, 74, 0.03));
    color: #14a34a;
}

.nfs-megamenu-simple-link:hover .nfs-megamenu-simple-icon {
    transform: scale(1.05);
}

.nfs-megamenu-simple-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nfs-megamenu-simple-text {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--nfs-t1, #0d1117);
}

.nfs-megamenu-simple-link:hover .nfs-megamenu-simple-text {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-simple-sub {
    font-size: 0.6875rem;
    color: var(--nfs-t3, #64748b);
}

.nfs-megamenu-sep {
    height: 0.5px;
    background: var(--nfs-b1, rgba(58, 66, 96, 0.07));
    margin: 6px 12px;
}

.nfs-megamenu-simple-link--accent {
    background: linear-gradient(150deg, #3b7fff, #1a5fd9, #1248b0);
    color: #fff;
    border-color: rgba(59, 127, 255, 0.4);
    box-shadow: 0 2px 10px rgba(26, 95, 217, 0.25);
    margin-top: 6px;
}

.nfs-megamenu-simple-link--accent .nfs-megamenu-simple-text,
.nfs-megamenu-simple-link--accent .nfs-megamenu-simple-sub {
    color: #fff;
}

.nfs-megamenu-simple-link--accent .nfs-megamenu-simple-sub {
    opacity: 0.8;
}

.nfs-megamenu-simple-link--accent:hover {
    background: linear-gradient(150deg, #4a8fff, #2a6fe8, #1a5fd9);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 95, 217, 0.35);
}

/* ═══════════════════════════
   МЕГАМЕНЮ — FEATURED (Информация): только сетка ссылок
═══════════════════════════ */
.nfs-megamenu--featured {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding: 0;
}

@media (min-width: 1024px) {
    .nfs-header-main .nfs-megamenu.nfs-megamenu--featured {
        min-height: 308px;
    }
}

.nfs-megamenu-feat-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 20px;
    align-content: start;
    flex: 1 1 auto;
    box-sizing: border-box;
}

/* Карточки с иконкой — единый стиль с статьями в табах */
.nfs-megamenu-feat-links .nfs-megamenu-link,
.nfs-megamenu-tools-links .nfs-megamenu-link:not(.nfs-megamenu-link--tools-accent) {
    align-items: flex-start;
    margin-bottom: 0;
    padding: 12px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(26, 95, 217, 0.1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.nfs-megamenu-feat-links .nfs-megamenu-link:hover,
.nfs-megamenu-tools-links .nfs-megamenu-link:not(.nfs-megamenu-link--tools-accent):hover {
    background: #ffffff;
    border-color: rgba(26, 95, 217, 0.22);
    box-shadow: 0 4px 14px rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-tools-links .nfs-megamenu-link-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    min-width: 0;
}

.nfs-megamenu-feat-links .nfs-megamenu-link-sub,
.nfs-megamenu-tools-links .nfs-megamenu-link-sub {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--nfs-t3, #5a6480);
    line-height: 1.35;
}

/* Полная ширина: AI-строка под двумя колонками */
.nfs-megamenu-link--tools-accent {
    grid-column: 1 / -1;
    margin-top: auto;
    background: linear-gradient(150deg, #3b7fff, #1a5fd9, #1248b0);
    border-color: rgba(59, 127, 255, 0.45);
    box-shadow: 0 2px 10px rgba(26, 95, 217, 0.28);
    padding: 12px 14px;
    border-radius: 10px;
}

.nfs-megamenu-link--tools-accent:hover {
    background: linear-gradient(150deg, #4a8fff, #2a6fe8, #1a5fd9);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(26, 95, 217, 0.38);
}

.nfs-megamenu-link--tools-accent .nfs-megamenu-link-name,
.nfs-megamenu-link--tools-accent .nfs-megamenu-link-sub {
    color: #fff;
}

.nfs-megamenu-link--tools-accent .nfs-megamenu-link-sub {
    opacity: 0.9;
}

.nfs-megamenu-link-icon--tools-ai {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.nfs-megamenu-link--tools-accent:hover .nfs-megamenu-link-icon--tools-ai {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ═══════════════════════════
   МЕГАМЕНЮ — ТАБИРОВАННОЕ (База знаний)
   Размеры как в UI Pack дизайн-системы
═══════════════════════════ */
.nfs-megamenu--tabbed {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    width: 100%;
    min-height: 308px;
    padding: 0;
    align-content: stretch;
}

.nfs-megamenu-tabs {
    background: #f6f8fc;
    border-right: 1px solid rgba(26, 95, 217, 0.08);
    padding: 16px 12px;
    border-radius: 0;
}

.nfs-megamenu-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    margin-bottom: 4px;
    text-decoration: none;
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    font-family: inherit;
}

.nfs-megamenu-tab:hover {
    background: rgba(26, 95, 217, 0.06);
}

.nfs-megamenu-tab.active {
    background: #ffffff;
    border-color: rgba(26, 95, 217, 0.16);
    box-shadow: 0 2px 10px rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 95, 217, 0.08);
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-tab.active .nfs-megamenu-tab-icon {
    background: rgba(26, 95, 217, 0.12);
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-tab-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--nfs-t2, #2a3450);
}

.nfs-megamenu-tab.active .nfs-megamenu-tab-label {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-tab-panes {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: inherit;
    position: relative;
    background: #ffffff;
}

.nfs-megamenu-tab-pane {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-content: start;
    background: #ffffff;
    min-width: 0;
    box-sizing: border-box;
}

.nfs-megamenu--tabbed > .nfs-megamenu-tab-pane {
    grid-column: 2;
    grid-row: 1;
}

.nfs-megamenu-tab-panes > .nfs-megamenu-tab-pane {
    width: 100%;
}

.nfs-megamenu-tab-panes > .nfs-megamenu-tab-pane:not(.is-active) {
    position: absolute;
    inset: 0;
    visibility: hidden;
    pointer-events: none;
}

/* pointer-events только при открытом мегаменю — иначе «призрачные» клики над контентом */
.nfs-nav-item.has-megamenu.is-open .nfs-megamenu-tab-panes > .nfs-megamenu-tab-pane.is-active {
    position: relative;
    visibility: visible;
    pointer-events: auto;
}

.nfs-nav-item.has-megamenu:not(.is-open) .nfs-megamenu-tab-panes > .nfs-megamenu-tab-pane.is-active {
    visibility: hidden;
    pointer-events: none;
}

.nfs-megamenu-tab-pane--info {
    display: block;
    padding: 20px;
}

.nfs-megamenu-tab-pane--info .nfs-megamenu-feat-links--in-tab {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.nfs-megamenu-article {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #ffffff;
    border: 1px solid rgba(26, 95, 217, 0.1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.nfs-megamenu-article:hover {
    background: #ffffff;
    border-color: rgba(26, 95, 217, 0.22);
    box-shadow: 0 4px 14px rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-article-body {
    flex: 1;
}

.nfs-megamenu-article-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--nfs-t1, #0d1117);
    margin-bottom: 2px;
    line-height: 1.35;
}

.nfs-megamenu-article:hover .nfs-megamenu-article-title {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-article-meta {
    font-size: 11px;
    color: var(--nfs-t4, #8a94ac);
}

/* ═══════════════════════════
   RESPONSIVE МЕГАМЕНЮ
═══════════════════════════ */
@media (max-width: 1024px) {
    .nfs-megamenu {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Двухуровневая шапка (production): Utility Bar + Main Navigation
   ═══════════════════════════════════════════════════════════════ */

.nfs-header--two-tier.nfs-header--ds-light {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #ffffff;
    border-bottom: 1px solid rgba(26, 95, 217, 0.1);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(15, 23, 42, 0.06);
}

.nfs-header--two-tier.nfs-header--ds-light.scrolled {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(15, 23, 42, 0.08);
}

body:has(.nfs-header--two-tier.nfs-header--ds-light) {
    --nfs-header-offset-base: 72px;
    padding-top: calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px));
    background-image: linear-gradient(
        to bottom,
        #ffffff 0,
        #ffffff calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px)),
        var(--nfs-home-section-bg, #f2f5fc) calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px))
    );
}

@media (min-width: 1024px) {
    body:has(.nfs-header--two-tier.nfs-header--ds-light) {
        --nfs-header-offset-base: 108px;
        padding-top: calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px));
        background-image: linear-gradient(
            to bottom,
            #ffffff 0,
            #ffffff calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px)),
            var(--nfs-home-section-bg, #f2f5fc) calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px))
        );
    }
}

body:has(.nfs-header--two-tier.nfs-header--ds-light.nfs-header--search-open) {
    padding-top: calc(132px + env(safe-area-inset-top, 0px));
    background-image: linear-gradient(
        to bottom,
        #ffffff 0,
        #ffffff calc(132px + env(safe-area-inset-top, 0px)),
        var(--nfs-home-section-bg, #f2f5fc) calc(132px + env(safe-area-inset-top, 0px))
    );
}

@media (max-width: 1023px) {
    body:has(.nfs-header--two-tier.nfs-header--ds-light) {
        --nfs-header-offset-base: 72px;
    }

    body:has(.nfs-header--two-tier.nfs-header--ds-light.nfs-header--search-open) {
        --nfs-header-offset-base: 132px;
        padding-top: calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px));
        background-image: linear-gradient(
            to bottom,
            #ffffff 0,
            #ffffff calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px)),
            var(--nfs-home-section-bg, #f2f5fc) calc(var(--nfs-header-offset-base) + env(safe-area-inset-top, 0px))
        );
    }
}

.nfs-header--two-tier.nfs-header--ds-light .nfs-logo-word {
    color: var(--nfs-t1, #0d1117);
}

.nfs-header--two-tier.nfs-header--ds-light .nfs-nav-item > a,
.nfs-header--two-tier.nfs-header--ds-light .nfs-megamenu-nav .nfs-nav-item.has-megamenu > a {
    color: var(--nfs-t2, #2a3450);
}

.nfs-header--two-tier.nfs-header--ds-light .nfs-nav-item > a:hover,
.nfs-header--two-tier.nfs-header--ds-light .nfs-megamenu-nav .nfs-nav-item.has-megamenu > a:hover {
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.08);
}

.nfs-header--two-tier.nfs-header--ds-light .nfs-nav-chevron,
.nfs-header--two-tier.nfs-header--ds-light .nfs-megamenu-nav .nfs-nav-chevron {
    color: rgba(42, 52, 80, 0.45);
}

.nfs-header--two-tier.nfs-header--ds-light .nfs-nav-item.has-megamenu:hover .nfs-nav-chevron,
.nfs-header--two-tier.nfs-header--ds-light .nfs-nav-item.has-megamenu.is-open .nfs-nav-chevron,
.nfs-header--two-tier.nfs-header--ds-light .nfs-megamenu-nav .nfs-nav-item.has-megamenu:hover .nfs-nav-chevron {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-header--two-tier.nfs-header--ds-light .nfs-icon-btn,
.nfs-header--two-tier.nfs-header--ds-light .nfs-mobile-toggle,
.nfs-header--two-tier.nfs-header--ds-light .nfs-search-mobile-trigger {
    color: var(--nfs-t2, #2a3450);
}

.nfs-header--two-tier.nfs-header--ds-light .nfs-icon-btn:hover,
.nfs-header--two-tier.nfs-header--ds-light .nfs-mobile-toggle:hover,
.nfs-header--two-tier.nfs-header--ds-light .nfs-search-mobile-trigger:hover {
    background: rgba(26, 95, 217, 0.08);
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-header--two-tier .nfs-header-utility {
    display: none;
    border-bottom: 1px solid rgba(26, 95, 217, 0.08);
    background: linear-gradient(180deg, #f6f8fc 0%, #ffffff 100%);
}

.nfs-header--two-tier .nfs-header-utility__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 36px;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--nfs-t3, #5a6480);
}

.nfs-header--two-tier .nfs-header-utility__left,
.nfs-header--two-tier .nfs-header-utility__right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
}

.nfs-header--two-tier .nfs-header-utility__right {
    justify-content: flex-end;
    gap: 10px 14px;
}

.nfs-header--two-tier .nfs-header-utility__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nfs-t3, #5a6480);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nfs-header--two-tier .nfs-header-utility__link:hover {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-header--two-tier .nfs-header-utility__phone {
    font-weight: 600;
    color: var(--nfs-t2, #2a3450);
}

.nfs-header--two-tier .nfs-header-utility__hours {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nfs-t4, #8a94ac);
}

.nfs-header--two-tier .nfs-header-exrates {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
    max-width: min(52vw, 520px);
    color: var(--nfs-t4, #8a94ac);
    line-height: 1.2;
}

.nfs-header--two-tier .nfs-header-exrates__item {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    white-space: nowrap;
    cursor: default;
}

.nfs-header--two-tier .nfs-header-exrates__sym {
    font-weight: 700;
    color: var(--nfs-t3, #5a6480);
}

.nfs-header--two-tier .nfs-header-exrates__val {
    font-weight: 600;
    color: var(--nfs-t2, #2a3450);
    font-variant-numeric: tabular-nums;
}

.nfs-header--two-tier .nfs-header-exrates__scale {
    font-size: 10px;
    font-weight: 500;
    color: var(--nfs-t4, #8a94ac);
}

.nfs-header--two-tier .nfs-header-exrates__sep {
    opacity: 0.45;
    user-select: none;
}

.nfs-header--two-tier .nfs-header-exrates__loading {
    opacity: 0.7;
}

/* Skeleton курсов (вместо текста «Курсы…») */
.nfs-header--two-tier .nfs-header-exrates__skeleton {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 1.2em;
}

.nfs-header--two-tier .nfs-header-exrates__skel-bar {
    display: inline-block;
    height: 11px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(138, 148, 172, 0.18) 0%,
        rgba(138, 148, 172, 0.32) 45%,
        rgba(138, 148, 172, 0.18) 100%
    );
    background-size: 200% 100%;
    animation: nfs-header-exrates-skel 1.35s ease-in-out infinite;
}

.nfs-header--two-tier .nfs-header-exrates__skel-bar--sm {
    width: 42px;
}

.nfs-header--two-tier .nfs-header-exrates__skel-bar--md {
    width: 52px;
}

.nfs-header--two-tier .nfs-header-exrates__skel-bar--lg {
    width: 64px;
}

.nfs-header--two-tier .nfs-header-exrates__skel-sep {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(138, 148, 172, 0.35);
    flex-shrink: 0;
}

@keyframes nfs-header-exrates-skel {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .nfs-header--two-tier .nfs-header-exrates__skel-bar {
        animation: none;
        background: rgba(138, 148, 172, 0.22);
    }
}

.nfs-header--two-tier .nfs-header-exrates--drawer {
    max-width: none;
    margin: 4px 0 8px;
}

.nfs-header--two-tier .nfs-header-utility__social {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 20px;
    padding-right: 20px;
}

.nfs-header--two-tier .nfs-header-utility__soc {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid rgba(26, 95, 217, 0.12);
    box-shadow: 0 1px 3px rgba(26, 32, 53, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nfs-header--two-tier .nfs-header-utility__soc .nfs-social-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.nfs-header--two-tier .nfs-header-utility__soc:hover {
    transform: translateY(-1px);
    background: #f6f8fc;
    border-color: rgba(26, 95, 217, 0.22);
    box-shadow: 0 4px 12px rgba(26, 95, 217, 0.15);
}

.nfs-header--two-tier .nfs-header-utility__social--drawer {
    margin-top: 0;
}

.nfs-header--two-tier .nfs-header-city {
    position: relative;
}

.nfs-header--two-tier .nfs-header-city__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border: 1px solid rgba(26, 95, 217, 0.14);
    border-radius: 999px;
    background: #fff;
    color: var(--nfs-t2, #2a3450);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.nfs-header--two-tier .nfs-header-city__trigger:hover,
.nfs-header--two-tier .nfs-header-city__trigger[aria-expanded="true"] {
    border-color: rgba(26, 95, 217, 0.35);
    background: rgba(26, 95, 217, 0.06);
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-header--two-tier .nfs-header-city__chevron {
    transition: transform 0.2s ease;
}

.nfs-header--two-tier .nfs-header-city__trigger[aria-expanded="true"] .nfs-header-city__chevron {
    transform: rotate(180deg);
}

.nfs-header--two-tier .nfs-header-city__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    min-width: 160px;
    margin: 0;
    padding: 6px;
    list-style: none;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(26, 95, 217, 0.12);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.nfs-header--two-tier .nfs-header-city__menu:not([hidden]) {
    display: block;
}

.nfs-header--two-tier .nfs-header-city__menu button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--nfs-t2, #2a3450);
    cursor: pointer;
}

.nfs-header--two-tier .nfs-header-city__menu button:hover,
.nfs-header--two-tier .nfs-header-city__menu button.is-active {
    background: rgba(26, 95, 217, 0.08);
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-header--two-tier .nfs-header-main-row {
    padding: 0.5rem 0 0;
}

.nfs-header--two-tier .nfs-header-inner--two-tier {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "burger logo center search-mob actions";
    gap: 0.35rem 0.75rem;
    align-items: center;
}

.nfs-header--two-tier .nfs-header-inner--two-tier .nfs-mobile-toggle {
        display: flex;
    grid-area: burger;
}

.nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-logo-slot {
    grid-area: logo;
}

.nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-center {
    grid-area: center;
    min-width: 0;
}

.nfs-header--two-tier .nfs-header-inner--two-tier .nfs-search-mobile-trigger {
    grid-area: search-mob;
}

.nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-right {
    grid-area: actions;
}

.nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-main .nfs-search-wrapper {
    flex: 1 1 0;
    min-width: 0;
    max-width: 420px;
}

.nfs-header--two-tier .nfs-megamenu-tab-pane[hidden] {
    display: none !important;
}

.nfs-header--two-tier .nfs-megamenu {
    border-radius: 12px;
    overflow: hidden;
}

.nfs-header--two-tier .nfs-mobile-drawer-utility,
.nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-utility {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(26, 95, 217, 0.1);
    border-bottom: 0;
    background: #f6f8fc;
    box-sizing: border-box;
}

.nfs-mobile-drawer-utility__label {
    margin: 0 0 2px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    line-height: 1.2;
}

/* Hub + drill-down */
.nfs-mobile-drill {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.nfs-mobile-drill-level {
    display: none;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.nfs-mobile-drill-level.is-active {
    display: flex;
}

.nfs-mobile-drill-level[hidden] {
    display: none !important;
}

.nfs-mobile-drill-level[data-drill-level="root"].is-active {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.nfs-mobile-drill-header {
    flex-shrink: 0;
    padding: 4px 8px;
    border-bottom: 1px solid rgba(26, 95, 217, 0.1);
    background: #fff;
}

.nfs-mobile-drill-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 8px 10px;
    border: 0;
    background: transparent;
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
}

.nfs-mobile-drill-back:focus-visible {
    outline: 2px solid rgba(26, 95, 217, 0.45);
    outline-offset: 2px;
    border-radius: 8px;
}

.nfs-mobile-nav--drill {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.nfs-mobile-drill-section {
    padding-top: 8px;
}

.nfs-mobile-drill-section__title {
    padding: 8px 16px 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.nfs-mobile-drill-geo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 16px 10px;
}

.nfs-mobile-drill-geo-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 56px;
    padding: 12px;
    border-radius: 12px;
    text-decoration: none;
    border: 1px solid rgba(26, 95, 217, 0.14);
    background: #f5f8ff;
    color: #1a5fd9;
    box-sizing: border-box;
}

.nfs-mobile-drill-geo-card--china {
    border-color: rgba(196, 30, 58, 0.18);
    background: #fff7f8;
    color: #c41e3a;
}

.nfs-mobile-drill-geo-card__label {
    font-size: 0.875rem;
    font-weight: 700;
}

.nfs-mobile-drill-geo-card__count {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.8;
}

.nfs-mobile-drill-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    padding: 12px 16px !important;
    text-decoration: none;
    color: #0f172a;
    border-bottom: 1px solid rgba(26, 95, 217, 0.08);
    box-sizing: border-box;
}

.nfs-mobile-drill-row__main {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nfs-mobile-drill-row__count {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #1558c7;
    background: rgba(26, 95, 217, 0.1);
}

.nfs-mobile-drill-row--accent {
    font-weight: 700;
    color: #1a5fd9;
}

.nfs-mobile-drill-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 16px 12px;
}

.nfs-mobile-drill-filter {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(26, 95, 217, 0.2);
    background: #f5f8ff;
    color: #1a5fd9;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.nfs-mobile-drill-filter--china {
    border-color: rgba(196, 30, 58, 0.2);
    background: #fff7f8;
    color: #c41e3a;
}

.nfs-mobile-brand-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.nfs-mobile-brand-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.nfs-mobile-brand-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #eef2f7;
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .nfs-mobile-drawer-panel,
    .nfs-mobile-drill-level {
        animation: none !important;
        transition: none !important;
    }
}

@media (min-width: 1024px) {
    .nfs-header--two-tier .nfs-header-utility {
        display: block;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.75rem 1rem;
        min-height: 56px;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-mobile-toggle,
    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-search-mobile-trigger {
        display: none;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-center {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        justify-content: flex-start;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-main {
        display: flex;
        align-items: center;
        gap: 0.75rem 1rem;
        width: 100%;
        min-width: 0;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-megamenu-nav {
        flex-shrink: 0;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-main .nfs-search-wrapper {
        display: flex;
    }
}

@media (max-width: 1023px) {
    .nfs-header--two-tier.nfs-header--ds-light {
        border-bottom-color: rgba(26, 95, 217, 0.08);
        box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    }

    .nfs-header--two-tier .nfs-header-main-row {
        padding: 0 0 8px;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier {
        min-height: 64px;
        padding-top: 10px;
        padding-bottom: 10px;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        grid-template-areas: "burger logo search-mob";
        gap: 0.5rem;
        box-sizing: border-box;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-mobile-toggle {
        grid-area: burger;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-right {
        display: none !important;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-logo-slot {
        justify-content: center;
        grid-area: logo;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-search-mobile-trigger {
        display: flex;
        grid-area: search-mob;
    }

    /* Центр скрыт до открытия поиска (как в DS mobile preview) */
    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-center {
        display: none;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-center .nfs-nav,
    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-main .nfs-megamenu-nav {
        display: none;
    }

    .nfs-header--two-tier .nfs-header-inner--two-tier .nfs-header-main .nfs-search-wrapper {
        display: none;
    }

    .nfs-header--two-tier.nfs-header--search-open .nfs-header-inner--two-tier {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        grid-template-areas:
            "burger logo search-mob"
            "search-full search-full search-full";
    }

    .nfs-header--two-tier.nfs-header--search-open .nfs-header-inner--two-tier .nfs-header-center {
        display: block;
        grid-area: search-full;
        grid-column: 1 / -1;
        grid-row: 2;
        min-width: 0;
        width: 100%;
    }

    .nfs-header--two-tier.nfs-header--search-open .nfs-header-main {
        display: block;
        width: 100%;
    }

    .nfs-header--two-tier.nfs-header--search-open .nfs-header-main .nfs-search-wrapper {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    .nfs-header--two-tier.nfs-header--search-open .nfs-search-wrapper .nfs-search-shell {
        width: 100%;
        order: 1;
    }

    .nfs-header--two-tier.nfs-header--search-open .nfs-search-wrapper .global-search-dropdown-wrap {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        order: 2;
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column !important;
    }

    .nfs-header--two-tier .nfs-mobile-drawer-utility .nfs-header-city__trigger {
        min-height: 38px;
        padding: 6px 10px;
        font-size: 0.8125rem;
        border-radius: 10px;
    }

    .nfs-header--two-tier .nfs-mobile-drawer-utility .nfs-mobile-support-hours {
        font-size: 0.75rem;
        color: var(--nfs-t4, #8a94ac);
    }

    .nfs-header--two-tier .nfs-mobile-drawer-utility .nfs-header-utility__social {
        padding-left: 0;
        padding-right: 0;
        margin-top: 0;
    }

    .nfs-header--two-tier .nfs-mobile-drawer-utility .nfs-header-utility__soc {
        width: 32px;
        height: 32px;
    }
}

/* Финальная мобильная нормализация двухуровневого хедера — канон DS «Хедер». */
@media (max-width: 1023px) {
    .nfs-header--two-tier.nfs-header--ds-light {
        height: auto;
        min-height: 56px;
    }

    .nfs-header--two-tier .nfs-mobile-toggle,
    .nfs-header--two-tier .nfs-search-mobile-trigger {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: var(--nfs-t2, #2a3450);
        box-shadow: none;
    }

    .nfs-header--two-tier .nfs-mobile-toggle:hover,
    .nfs-header--two-tier .nfs-search-mobile-trigger:hover,
    .nfs-header--two-tier .nfs-mobile-toggle:focus-visible,
    .nfs-header--two-tier .nfs-search-mobile-trigger:focus-visible,
    .nfs-header--two-tier.nfs-header--menu-open .nfs-mobile-toggle {
        background: rgba(26, 95, 217, 0.08);
        color: var(--nfs-blue, #1a5fd9);
        outline: none;
        box-shadow: none;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-panel {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        align-content: start;
        background: #ffffff;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drill {
        grid-row: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-utility {
        flex-shrink: 0;
        width: 100%;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-city--drawer {
        position: relative;
        width: 100%;
        min-width: 0;
        z-index: 50;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-city--drawer .nfs-header-city__menu {
        z-index: 60;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-city__trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid rgba(26, 95, 217, 0.14);
        border-radius: 12px;
        background: #ffffff;
        color: var(--nfs-t2, #2a3450);
        font-size: 0.875rem;
        font-weight: 600;
        box-sizing: border-box;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-city__trigger .nfs-header-city__chevron {
        margin-left: auto;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-currency {
        width: 100%;
        min-width: 0;
        display: block;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-currency__select {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 10px 36px 10px 12px;
        border: 1px solid rgba(26, 95, 217, 0.14);
        border-radius: 12px;
        background-color: #ffffff;
        background-position: right 12px center;
        color: var(--nfs-t2, #2a3450);
        font-size: 0.875rem;
        font-weight: 600;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-support-hours {
        margin: 2px 0 0;
        padding: 0 2px;
        white-space: nowrap;
        font-size: 0.8125rem;
        line-height: 1.4;
        color: var(--nfs-t4, #8a94ac);
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-exrates--drawer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 10px 12px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid rgba(26, 95, 217, 0.1);
        font-size: 0.75rem;
        line-height: 1.4;
        color: var(--nfs-t3, #5a6480);
        box-sizing: border-box;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-exrates--drawer .nfs-header-exrates__item {
        white-space: nowrap;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-utility__social--drawer {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        padding: 2px 0 0;
        margin: 0;
        box-sizing: border-box;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-utility__social--drawer .nfs-header-utility__soc {
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        box-shadow: none;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-header-utility__social--drawer .nfs-header-utility__soc .nfs-social-icon {
        width: 22px;
        height: 22px;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav {
        min-height: 0;
        max-height: none;
        background: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav--root {
        flex: 0 0 auto;
        overflow: visible;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-link,
    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-accordion__trigger {
        min-height: 48px;
        padding: 12px 16px;
        border: 0;
        border-bottom: 1px solid rgba(26, 95, 217, 0.08);
        background: #ffffff;
        color: var(--nfs-t2, #2a3450);
        font-size: 0.875rem;
        font-weight: 600;
        box-sizing: border-box;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-link--row {
        justify-content: space-between;
        align-items: center;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-link:hover,
    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-link:focus-visible,
    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-accordion.is-open > .nfs-mobile-nav-link {
        background: #f6f8fc;
        color: var(--nfs-blue, #1a5fd9);
        outline: none;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-accordion--nested .nfs-mobile-accordion__trigger {
        min-height: 44px;
        padding-left: 2.75rem;
        font-size: 0.8125rem;
        font-weight: 600;
        background: #f8fafc;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-sub {
        min-height: 40px;
        padding: 0 16px 0 44px;
        background: #f8fafc;
        color: var(--nfs-t3, #5a6480);
        font-size: 0.8125rem;
        font-weight: 500;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-sub--l3 {
        padding-left: 3.5rem;
        background: #fff;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-row-icon,
    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-nav-chevron {
        color: currentColor;
        opacity: 0.76;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-bar {
        display: flex;
        width: 100%;
        grid-row: 2;
        flex-shrink: 0;
        margin-top: 0;
        gap: 8px;
        padding: 10px 12px max(10px, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(26, 95, 217, 0.1);
        background: #ffffff;
        box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.04);
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-bar--icons .nfs-mobile-drawer-bar__item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 48px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 8px;
        border: 1px solid rgba(26, 95, 217, 0.08);
        border-radius: 10px;
        background: #f8fafc;
        color: var(--nfs-t2, #2a3450);
        font-size: inherit;
        line-height: 1;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-bar--icons .nfs-mobile-drawer-bar__item > .nfs-ico {
        width: 22px;
        height: 22px;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-bar--icons .nfs-mobile-drawer-bar__item--avatar {
        gap: 0;
    }

    .nfs-header--two-tier ~ .nfs-mobile-drawer .nfs-mobile-drawer-bar--icons .nfs-mobile-drawer-bar__avatar {
        width: 22px;
        height: 22px;
    }
}

/*
 * ═══ Канон DS «Хедер» — финальный слой production ═══
 * DS-страница дополнительно грузит design-system-tabs.css (только витрина превью).
 * Здесь — те же визуальные правила, что должны работать на nfsauto.by без DS-обёртки.
 */
@media (min-width: 1024px) {
    .nfs-megamenu--cols {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) !important;
    }

    .nfs-megamenu-col--categories,
    .nfs-megamenu-col--brands {
        min-width: 0;
    }
}

@media (max-width: 1023px) {
    .nfs-header--two-tier.nfs-header--search-open {
        --nfs-mobile-search-dropdown-h: calc(100dvh - 64px - 52px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .nfs-header--search-open .nfs-search-wrapper {
        flex: 1 1 auto;
        min-height: 0;
        max-height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));
    }

    .nfs-header--search-open .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split,
    .nfs-header--search-open .nfs-search-wrapper .global-search-dropdown-wrap:not([hidden]) {
        flex: 1 1 auto;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0;
        height: var(--nfs-mobile-search-dropdown-h, calc(100dvh - 128px - env(safe-area-inset-top, 0px))) !important;
        max-height: var(--nfs-mobile-search-dropdown-h, calc(100dvh - 128px - env(safe-area-inset-top, 0px))) !important;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-preview,
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-preview,
    .nfs-search-wrapper .global-search-preview,
    .nfs-search-wrapper #globalSearchPreview.global-search-preview {
        display: none !important;
        visibility: hidden !important;
        flex: 0 0 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split.has-preview .global-search-results,
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split:not(.has-preview) .global-search-results,
    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-results,
    .nfs-search-wrapper #globalSearchResults.global-search-results {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: 100% !important;
        border-radius: 12px;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 0 !important;
        background: var(--nfs-white, #fff);
        box-shadow:
            0 8px 32px rgba(13, 17, 23, 0.1),
            0 1px 0 rgba(255, 255, 255, 0.9) inset;
    }

    .nfs-search-wrapper .global-search-dropdown-wrap.global-search-split .global-search-results-inner,
    .nfs-search-wrapper #globalSearchResults.global-search-results .global-search-results-inner {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        display: flex !important;
        flex-direction: column !important;
    }

    .nfs-search-wrapper .global-search-list {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .nfs-search-wrapper .global-search-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px;
        padding: 10px 12px;
    }

    .nfs-search-wrapper .global-search-item-thumb {
        width: 100%;
    }

    .nfs-search-wrapper .global-search-item-thumb img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 9;
        max-height: 160px;
        object-fit: cover;
        border-radius: 10px;
        border: none;
        box-shadow: none;
    }

    .nfs-search-wrapper .global-search-item-content {
        width: 100%;
        flex: none;
    }

    .nfs-search-wrapper .global-search-item-title {
        white-space: normal;
        word-break: break-word;
    }
}

/* === css/catalog_nav.css === */
/* Навигация каталога: мегаменю и футер (ADR-015 §4) */

/* ── Scoped isolation: мегаменю каталога/брендов не наследует тесные DS-плитки шапки ── */
.nfs-megamenu--catalog-only,
.nfs-megamenu--brands-panel,
.nfs-megamenu--catalog-only *,
.nfs-megamenu--brands-panel * {
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    /* Не считать layout закрытых панелей до первого hover (P2 lazy megamenu) */
    .nfs-header-main .nfs-nav-item:not(.is-open) > .nfs-megamenu {
        content-visibility: auto;
        contain-intrinsic-size: 0 420px;
    }

    /* При открытии сразу полный paint — иначе content-visibility даёт вспышку при switch */
    .nfs-header-main .nfs-nav-item.is-open > .nfs-megamenu {
        content-visibility: visible;
    }
}

@media (min-width: 1024px) {
    .nfs-header-main .nfs-megamenu.nfs-megamenu--catalog-only,
    .nfs-header-main .nfs-megamenu.nfs-megamenu--brands-panel {
        padding: 10px 12px !important;
        min-height: 0 !important;
        background: #ffffff !important;
        border: 1px solid rgba(26, 95, 217, 0.14);
        border-radius: 14px;
        box-shadow: 0 18px 48px -16px rgba(15, 23, 42, 0.28);
        overflow: hidden;
        z-index: 5000;
    }
}

/* ── Каталог: одна панель (только пригон) ── */
.nfs-megamenu--catalog-only {
    display: block;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.nfs-megamenu--catalog-only .nfs-megamenu-col--categories {
    width: 100%;
    border-right: none;
    padding: 0;
    background: transparent;
    color: var(--nfs-t1, #0d1117);
    box-sizing: border-box;
}

/* ADR-036/038: 4 колонки витрины
   Важно: .nfs-nav-item a в nfs_header.css даёт светлый цвет (шапка) —
   здесь перебиваем тёмным текстом на белой панели. */
.nfs-megamenu--catalog-only .nfs-megamenu-columns {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 20px;
    width: 100%;
    min-width: 0;
    color: #0f172a;
}

/* ADR-038: крупные flag-кнопки стран импорта */
.nfs-megamenu--catalog-only .nfs-megamenu-geo-flags {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nfs-megamenu--catalog-only a.nfs-megamenu-geo-flag {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    color: #0f172a !important;
    text-decoration: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    min-height: 72px;
}

.nfs-megamenu--catalog-only a.nfs-megamenu-geo-flag:hover,
.nfs-megamenu--catalog-only a.nfs-megamenu-geo-flag:focus-visible {
    border-color: rgba(26, 95, 217, 0.35);
    box-shadow: 0 8px 20px -12px rgba(15, 23, 42, 0.35);
    transform: translateY(-1px);
    outline: none;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-flag__flag {
    flex: 0 0 auto;
    width: 44px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-flag__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-flag__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-flag__label {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-flag__count {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column--sorts .nfs-megamenu-column__footer-link {
    margin-top: 10px;
}

/* Mobile: цветные бейджи стран в drill-down */
.nfs-mobile-geo-flag-badge {
    display: inline-block;
    width: 22px;
    height: 15px;
    border-radius: 2px;
    flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
    background-size: cover;
}
.nfs-mobile-geo-flag-badge--korea {
    background: linear-gradient(180deg, #fff 0%, #fff 45%, #cd2e3a 45%, #cd2e3a 55%, #0047a0 55%, #0047a0 100%);
}
.nfs-mobile-geo-flag-badge--china {
    background: #de2910;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 8px;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__subtitle {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    margin: 10px 0 4px;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nfs-megamenu--catalog-only a.nfs-megamenu-column__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    text-decoration: none;
    color: #0f172a !important;
    min-width: 0;
    background: transparent;
}

.nfs-megamenu--catalog-only a.nfs-megamenu-column__link:hover,
.nfs-megamenu--catalog-only a.nfs-megamenu-column__link:focus-visible {
    background: rgba(26, 95, 217, 0.06);
    color: #1a5fd9 !important;
    outline: none;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__link-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: inherit;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__label {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: #64748b !important;
    font-variant-numeric: tabular-nums;
}

.nfs-megamenu--catalog-only a.nfs-megamenu-column__link:hover .nfs-megamenu-column__count {
    color: #64748b !important;
}

.nfs-megamenu--catalog-only a.nfs-megamenu-column__link--muted {
    color: #334155 !important;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__link--soon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: #94a3b8 !important;
    cursor: default;
    opacity: 0.85;
    pointer-events: none;
    user-select: none;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__link--soon .nfs-megamenu-column__count {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #94a3b8;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__link .nfs-nav-cat-ico,
.nfs-megamenu--catalog-only .nfs-megamenu-column__link .nfs-megamenu-ico,
.nfs-megamenu--catalog-only .nfs-megamenu-column__link .tabler-icon {
    color: #1a5fd9;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

.nfs-megamenu--catalog-only .nfs-megamenu-column__link .nfs-megamenu-ico use {
    /* stroke наследуется с svg */
}

.nfs-megamenu--catalog-only a.nfs-megamenu-column__footer-link {
    display: inline-block;
    margin-top: 10px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1a5fd9 !important;
    text-decoration: none;
    background: transparent;
}

.nfs-megamenu--catalog-only a.nfs-megamenu-column__footer-link:hover {
    text-decoration: underline;
    color: #1248b0 !important;
}

@media (max-width: 1100px) {
    .nfs-megamenu--catalog-only .nfs-megamenu-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Явная сетка внутри catalog-only — не зависит от legacy .nfs-megamenu--catalog */
.nfs-megamenu--catalog-only .nfs-megamenu-catalog-geo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-hub--compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: #0f172a !important;
    background: #f3f7ff;
    border: 1px solid rgba(26, 95, 217, 0.12);
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-hub--compact .nfs-megamenu-geo-hub__main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-hub--compact .nfs-nav-cat-ico--geo {
    color: #1a5fd9;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-hub--compact[href*="/china/"] .nfs-nav-cat-ico--geo {
    color: #c41e3a;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-hub--compact:hover {
    color: #1a5fd9 !important;
    border-color: rgba(26, 95, 217, 0.28);
    background: #eaf2ff;
}

.nfs-megamenu--catalog-only .nfs-megamenu-geo-hub--compact .nfs-megamenu-geo-hub__label {
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit !important;
    white-space: nowrap;
}

/* ── Бренды: отдельная вкладка ── */
.nfs-megamenu--brands-panel {
    display: block;
    width: 100%;
    padding: 0;
}

.nfs-megamenu--brands-panel .nfs-megamenu-col--brands {
    width: 100%;
    border-right: none;
    padding: 0;
    /* Высота по контенту — иначе обрезает сетку марок (cards layout) */
    max-height: none;
    overflow: visible;
}

.nfs-megamenu--brands-panel .nfs-megamenu-col-title {
    margin: 0 0 8px;
    padding: 0;
    font-size: 0.65rem;
    color: #64748b !important;
}

.nfs-megamenu-brands-import {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.nfs-megamenu-brands-import__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    border-radius: 12px;
    background: #f6f8fc;
    border: 1px solid rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-brands-import__hub {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(26, 95, 217, 0.1);
    text-decoration: none;
    color: var(--nfs-t1, #0d1117);
}

.nfs-megamenu-brands-import__hub-label {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
}

.nfs-megamenu-brands-import__arrow {
    flex-shrink: 0;
    color: var(--nfs-t4, #8a94ac);
}

.nfs-megamenu-brands-import__hub:hover {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-brands-import__hub:hover .nfs-megamenu-brands-import__arrow {
    color: var(--nfs-blue, #1a5fd9);
    transform: translateX(2px);
}

.nfs-megamenu-brands-grid--import {
    max-height: min(280px, 42vh);
}

.nfs-megamenu-brands-all--footer {
    display: inline-flex;
    margin-top: 12px;
}

.nfs-megamenu-brands-silo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

/* Silo-бренды: 4 колонки — длинные имена (Mercedes-Benz, Volkswagen) читаются */
.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid.nfs-megamenu-brands-grid--silo {
    display: grid !important;
    flex-wrap: unset !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-height: min(520px, 66vh);
    margin-bottom: 0;
    overflow: auto;
    padding-right: 2px;
    isolation: auto;
}

.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-with-logo,
.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-link--brand-tile.nfs-megamenu-link--brand-name-only {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    max-height: none !important;
    flex: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    box-shadow: none !important;
    color: #111827 !important;
    opacity: 1 !important;
    position: static !important;
    z-index: auto !important;
}

.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-link--brand-tile:hover {
    border-color: rgba(26, 95, 217, 0.32) !important;
    background: #f5f9ff !important;
    box-shadow: 0 4px 12px rgba(26, 95, 217, 0.1) !important;
    transform: none !important;
}

.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-brand-logo-wrap {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    position: relative !important;
}

.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-brand-logo {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    object-fit: contain;
}

.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-brand-fallback {
    font-size: 11px !important;
    border-radius: 6px !important;
}

.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-brand-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #111827 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    opacity: 1 !important;
    display: block !important;
}

.nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-brand-count {
    flex-shrink: 0 !important;
    margin-left: auto !important;
    padding: 2px 5px !important;
    border-radius: 999px !important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #1558c7 !important;
    background: rgba(26, 95, 217, 0.1) !important;
    border: 1px solid rgba(26, 95, 217, 0.12) !important;
    opacity: 1 !important;
}

.nfs-megamenu-brand-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.nfs-megamenu-brand-sources {
    display: flex;
    gap: 3px;
    min-width: 0;
}

.nfs-megamenu-brand-source {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.25;
    color: #1558c7;
    background: rgba(26, 95, 217, 0.1);
    opacity: 1 !important;
}

.nfs-megamenu-brand-source--china {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.09);
}

.nfs-megamenu-brand-count {
    flex-shrink: 0;
    padding: 3px 7px;
    border-radius: 999px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    color: #1558c7;
    background: rgba(26, 95, 217, 0.1);
    border: 1px solid rgba(26, 95, 217, 0.14);
    opacity: 1 !important;
}

.nfs-megamenu-brand-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 0;
}

.nfs-megamenu-brand-filter {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--nfs-t2, #2a3144);
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.nfs-megamenu-brand-filter:hover {
    color: var(--nfs-blue, #1a5fd9);
    border-color: rgba(26, 95, 217, 0.35);
}

/* ── Мегаменю: пропорции колонок (legacy cols) ── */
.nfs-megamenu--catalog.nfs-megamenu--cols {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.nfs-megamenu--catalog .nfs-megamenu-col--categories {
    padding: 16px 18px;
    gap: 0;
    overflow: hidden;
}

.nfs-megamenu--catalog .nfs-megamenu-col--brands {
    padding: 16px 18px;
    max-height: min(420px, 58vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── География: Корея | Китай ── */
.nfs-megamenu-catalog-geo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.nfs-megamenu-geo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.nfs-megamenu-geo-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-geo-hub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 8px;
    text-decoration: none;
    color: var(--nfs-t1, #0d1117);
    border-bottom: 1px solid rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-geo-hub__main {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.nfs-megamenu-geo-hub__label {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
    color: #0f172a !important;
    opacity: 1 !important;
}

.nfs-megamenu-geo-hub__arrow {
    flex-shrink: 0;
    color: var(--nfs-t4, #8a94ac);
    transition: transform 0.15s ease, color 0.15s ease;
}

.nfs-megamenu-geo-hub:hover {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-geo-hub:hover .nfs-megamenu-geo-hub__label,
.nfs-megamenu-geo-hub:hover .nfs-megamenu-geo-hub__arrow {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-geo-hub:hover .nfs-megamenu-geo-hub__arrow {
    transform: translateX(2px);
}

.nfs-megamenu-geo-children {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    width: 100%;
}

.nfs-megamenu-geo-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 6px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--nfs-t2, #2a3144);
    font-size: 0.8125rem;
    line-height: 1.25;
    transition: background 0.12s ease, color 0.12s ease;
}

.nfs-megamenu-geo-child:hover {
    background: rgba(26, 95, 217, 0.07);
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-megamenu-geo-child__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--nfs-t2, #2a3144);
}

.nfs-megamenu-geo-more {
    align-self: flex-start;
    margin-top: auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.08);
    text-decoration: none;
    opacity: 0.9;
}

.nfs-megamenu-geo-more:hover {
    opacity: 1;
    background: rgba(26, 95, 217, 0.12);
    text-decoration: none;
}

/* Счётчики в мегаменю (legacy cols + catalog-only) */
.nfs-megamenu--catalog .nfs-megamenu-link-count,
.nfs-megamenu--catalog-only .nfs-megamenu-link-count,
.nfs-megamenu-geo-count {
    flex-shrink: 0;
    margin-left: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.1);
    border: 1px solid rgba(26, 95, 217, 0.14);
    font-family: 'Share Tech Mono', monospace;
}

/* В шапке хаба счётчик прижимается к стрелке, не к краю панели */
.nfs-megamenu-geo-hub__main .nfs-megamenu-geo-count,
.nfs-megamenu-geo-hub__main .nfs-megamenu-link-count {
    margin-left: auto;
}

/* Сквозные категории — компактная сетка */
.nfs-megamenu--catalog-only .nfs-megamenu-global-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 0;
}

.nfs-megamenu-global-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 0;
}

.nfs-megamenu-global-row__title {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b !important;
    opacity: 1 !important;
}

.nfs-megamenu-global-chips,
.nfs-megamenu-global-chips--compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.nfs-megamenu-global-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    color: #111827 !important;
    background: #ffffff !important;
    border: 1px solid rgba(148, 163, 184, 0.3);
    box-shadow: none;
    opacity: 1 !important;
    transition: border-color 0.12s ease, background 0.12s ease;
    max-width: 100%;
}

.nfs-megamenu-global-chip__main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.nfs-nav-cat-ico {
    flex-shrink: 0;
    color: #64748b;
}

.nfs-megamenu-global-chip:hover .nfs-nav-cat-ico,
.nfs-megamenu-global-chip:focus-visible .nfs-nav-cat-ico {
    color: #1a5fd9;
}

.nfs-megamenu-global-chip:focus-visible {
    outline: 2px solid rgba(26, 95, 217, 0.45);
    outline-offset: 2px;
}

.nfs-megamenu-global-chip__label {
    flex: 0 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    color: #111827 !important;
    opacity: 1 !important;
}

.nfs-megamenu-global-chip:hover {
    color: #1a5fd9 !important;
    border-color: rgba(26, 95, 217, 0.32);
    background: #f5f9ff !important;
    box-shadow: none;
    transform: none;
}

.nfs-megamenu-global-chip__count {
    flex-shrink: 0;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1558c7 !important;
    background: rgba(26, 95, 217, 0.1);
    border: 1px solid rgba(26, 95, 217, 0.12);
    opacity: 1;
}

.nfs-megamenu-global-chip--muted {
    color: #475569 !important;
    font-weight: 500;
}

/* ── Колонка марок ── */
.nfs-megamenu-brands-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
    scrollbar-width: thin;
}

.nfs-megamenu-brand-market__title {
    margin: 0 0 6px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nfs-t4, #8a94ac);
}

.nfs-megamenu-brands-grid--market {
    max-height: none;
    margin-bottom: 0;
}

.nfs-megamenu-brands-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nfs-blue, #1a5fd9);
    text-decoration: none;
    border-top: 1px solid rgba(26, 95, 217, 0.1);
}

.nfs-megamenu-brands-all:hover {
    text-decoration: underline;
}

/* ── Футер: колонки и бейджи (сетка в nfs-footer-glow.css) ── */
.nfs-footer__links a {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    max-width: 100%;
    line-height: 1.35;
}

.nfs-footer__link-text {
    min-width: 0;
}

.nfs-footer__count {
    flex-shrink: 0;
    font-family: 'Share Tech Mono', ui-monospace, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.08);
    border: 1px solid rgba(26, 95, 217, 0.14);
}

/* legacy alias (до полной чистки glow) */
.nfs-footer-glow__links a {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.35rem 0.5rem;
    max-width: 100%;
    line-height: 1.35;
}

.nfs-footer-glow__link-text {
    min-width: 0;
}

.nfs-footer-glow__count {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.08);
    border: 1px solid rgba(26, 95, 217, 0.14);
}

.nfs-footer-glow__col--service .nfs-footer-glow__links a {
    display: inline-flex;
}

/* Mobile drawer */
.nfs-mobile-nav-sub--hub {
    font-weight: 600;
}

/* Узкие экраны: мегаменю в одну колонку географии */
@media (max-width: 1100px) {
    .nfs-megamenu-geo-grid,
    .nfs-megamenu--catalog-only .nfs-megamenu-geo-grid,
    .nfs-megamenu--catalog-only .nfs-megamenu-geo-row {
        grid-template-columns: 1fr;
    }

    .nfs-megamenu--brands-panel .nfs-megamenu-brands-grid.nfs-megamenu-brands-grid--silo {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .nfs-megamenu--brands-panel .nfs-megamenu-brands-grid--silo .nfs-megamenu-brand-text {
        font-size: 0.75rem !important;
    }

    .nfs-megamenu-geo-children,
    .nfs-megamenu--catalog-only .nfs-megamenu-geo-children {
        grid-template-columns: 1fr;
    }

    .nfs-megamenu--catalog.nfs-megamenu--cols {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .nfs-megamenu-brands-import,
    .nfs-megamenu--brands-panel .nfs-megamenu-brands-grid.nfs-megamenu-brands-grid--silo {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* === css/nfs-megamenu-cards.css === */
/**
 * Мегаменю card-grid — канон как в Radix Product/Company демо.
 * Позиционирование панелей — nfs_header.css; здесь внутренности.
 */

/* ── Trigger polish (pill при .is-open) ── */
@media (min-width: 1024px) {
  .nfs-megamenu-nav .nfs-nav-item.has-megamenu > a {
    border-radius: 0.5rem;
    transition: background 0.15s ease, box-shadow 0.15s ease;
  }

  .nfs-header--ds-light .nfs-megamenu-nav .nfs-nav-item.has-megamenu.is-open > a,
  .nfs-header--two-tier.nfs-header--ds-light .nfs-megamenu-nav .nfs-nav-item.has-megamenu.is-open > a {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    box-shadow: none;
  }

  .nfs-header:not(.nfs-header--ds-light) .nfs-megamenu-nav .nfs-nav-item.has-megamenu.is-open > a {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(59, 127, 255, 0.45);
  }
}

/* ── Shared panel shell ── */
@media (min-width: 1024px) {
  .nfs-header-main .nfs-megamenu.nfs-megamenu--catalog-only,
  .nfs-header-main .nfs-megamenu.nfs-megamenu--brands-panel,
  .nfs-header-main .nfs-megamenu.nfs-megamenu--tabbed,
  .nfs-header-main .nfs-megamenu.nfs-megamenu--featured,
  .nfs-header-main .nfs-megamenu.nfs-megamenu--cards {
    padding: 0 !important;
    min-height: 17.5rem !important;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 0.75rem !important;
    box-shadow:
      0 16px 40px -12px rgba(15, 23, 42, 0.18),
      0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
    overflow: hidden;
    z-index: 5000;
  }

  /* Бренды: высота панели по контенту; скролл — у .nfs-mm-grid--brands */
  .nfs-header-main .nfs-megamenu.nfs-megamenu--brands-panel.nfs-megamenu--cards {
    overflow: hidden !important;
    max-height: none !important;
  }

  /* Сброс legacy tabbed/featured grid (200px | 1fr) — иначе карточки сжимаются в ~26px */
  .nfs-header-main .nfs-megamenu.nfs-megamenu--cards,
  .nfs-header-main .nfs-megamenu.nfs-megamenu--tabbed.nfs-megamenu--cards,
  .nfs-header-main .nfs-megamenu.nfs-megamenu--featured.nfs-megamenu--cards {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
}

/* ── Layout: main | sidebar ── */
.nfs-mm-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(11.5rem, 0.28fr);
  width: 100%;
  min-height: 17.5rem;
  min-width: 0;
  color: #0f172a;
  align-items: stretch;
}

.nfs-mm-layout--solo {
  grid-template-columns: 1fr;
}

/* Каталог: флаги слева | кузова справа */
.nfs-mm-layout--mirror {
  grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr);
}

.nfs-mm-layout--mirror .nfs-mm-layout__side {
  border-right: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}

.nfs-mm-layout--mirror .nfs-mm-layout__main {
  border-right: none;
}

.nfs-mm-layout__main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-right: 1px solid rgba(15, 23, 42, 0.1);
  min-width: 0;
  min-height: 0;
}

.nfs-mm-layout--solo .nfs-mm-layout__main {
  border-right: none;
}

.nfs-mm-layout__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.35rem;
  padding: 1rem 0.85rem;
  background: #fff;
  min-width: 0;
}

.nfs-mm-layout__side-title {
  margin: 0 0 0.35rem;
  padding: 0 0.35rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* ── Grids ── */
.nfs-mm-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.nfs-mm-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 0;
}

.nfs-mm-grid--3 > li {
  display: flex;
  min-height: 0;
}

.nfs-mm-grid--3 > li > .nfs-mm-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 14.5rem;
  height: 100%;
}

.nfs-mm-grid--1 {
  grid-template-columns: 1fr;
}

.nfs-mm-grid--1 > li {
  display: flex;
}

.nfs-mm-grid--1 > li > .nfs-mm-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 14.5rem;
  height: 100%;
}

.nfs-mm-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  align-items: stretch;
}

.nfs-mm-grid--2 > li {
  display: flex;
}

.nfs-mm-grid--2 > li > .nfs-mm-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 9.5rem;
  height: 100%;
}

.nfs-mm-grid--row3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 0 0 auto;
}

/* ── GridCard (Product tall) ── */
.nfs-mm-card {
  --nfs-mm-grid-line: rgba(15, 23, 42, 0.055);
  --nfs-mm-grid-fill: rgba(15, 23, 42, 0.035);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.15rem 1.15rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background-color: #fff;
  text-decoration: none !important;
  color: #0f172a !important;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Perspective diagonal grid (как в демо) */
.nfs-mm-card::before {
  content: "";
  position: absolute;
  inset: -20% -10% -40% -10%;
  z-index: -1;
  pointer-events: none;
  background-color: #fff;
  background-image:
    linear-gradient(var(--nfs-mm-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nfs-mm-grid-line) 1px, transparent 1px),
    linear-gradient(var(--nfs-mm-grid-fill) 1px, transparent 1px),
    linear-gradient(90deg, var(--nfs-mm-grid-fill) 1px, transparent 1px);
  background-size:
    18px 18px,
    18px 18px,
    72px 72px,
    72px 72px;
  background-position: 0 0, 0 0, 0 0, 0 0;
  transform: perspective(420px) rotateX(52deg) scale(1.35);
  transform-origin: center top;
  opacity: 0.9;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.12) 70%, transparent 100%);
}

.nfs-mm-card:hover {
  border-color: rgba(26, 95, 217, 0.32);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07);
  color: #0f172a !important;
}

.nfs-mm-card--china:hover {
  border-color: rgba(220, 38, 38, 0.35);
}

.nfs-mm-card--tall {
  min-height: 14.5rem;
}

.nfs-mm-card__icon,
.nfs-mm-card__flag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #334155;
}

.nfs-mm-card__icon {
  width: 1.75rem;
  height: 1.75rem;
}

.nfs-mm-card__icon svg,
.nfs-mm-card__icon .nfs-ti,
.nfs-mm-card__icon .nfs-nav-cat-ico {
  width: 1.35rem;
  height: 1.35rem;
}

.nfs-mm-card__flag {
  width: 2.1rem;
  height: 1.4rem;
  border-radius: 0.2rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.nfs-mm-card__flag img,
.nfs-mm-card__flag svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nfs-mm-card__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  max-width: 100%;
}

.nfs-mm-card__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #0f172a;
}

.nfs-mm-card__desc {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: #64748b;
}

/* ── NavLargeItem (Company bottom / sidebar cards) ── */
.nfs-mm-large {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  text-decoration: none !important;
  color: #0f172a !important;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 4.25rem;
}

.nfs-mm-large:hover {
  background: #f8fafc;
  border-color: rgba(26, 95, 217, 0.25);
  color: #0f172a !important;
}

.nfs-mm-large__text {
  min-width: 0;
}

.nfs-mm-large__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
}

.nfs-mm-large__desc {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.35;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfs-mm-large__icon {
  flex-shrink: 0;
  color: #64748b;
}

.nfs-mm-large__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nfs-mm-side-stack {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  flex: 1 1 auto;
}

.nfs-mm-side-stack .nfs-mm-large {
  flex: 1 1 auto;
}

/* ── NavSmallItem (Product sidebar) ── */
.nfs-mm-side-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.nfs-mm-side-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.45rem;
  border-radius: 0.5rem;
  text-decoration: none !important;
  color: #0f172a !important;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.12s ease;
}

.nfs-mm-side-item:hover {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a !important;
}

.nfs-mm-side-item__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 1.15rem;
  justify-content: center;
  color: #64748b;
}

.nfs-mm-side-item__icon svg,
.nfs-mm-side-item__icon .nfs-ti,
.nfs-mm-side-item__icon .nfs-nav-cat-ico,
.nfs-mm-side-item__icon img {
  width: 1.05rem;
  height: 1.05rem;
}

.nfs-mm-side-item__label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nfs-mm-side-item__count {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #94a3b8;
  font-variant-numeric: tabular-nums;
}

.nfs-mm-side-item__arrow {
  display: none;
}

.nfs-mm-side-group + .nfs-mm-side-group {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Каталог: сайдбар флагов + сетка кузовов */
.nfs-megamenu--catalog-only .nfs-mm-layout__side {
  max-height: none;
  overflow: visible;
}

.nfs-mm-large__icon--flag {
  width: 2rem;
  height: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 0.2rem;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}

.nfs-mm-large__icon--flag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nfs-mm-grid--body4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  flex: 1 1 auto;
  align-content: start;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nfs-mm-body {
  display: block;
  text-decoration: none !important;
  color: #0f172a !important;
  min-width: 0;
}

.nfs-mm-body__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 0.65rem;
  border: none;
  background: transparent;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nfs-mm-body__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1);
  transition: transform 0.28s ease;
}

.nfs-mm-body__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #94a3b8;
  background: #f8fafc;
  border-radius: 0.65rem;
}

.nfs-mm-body__fallback-label {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: center;
  color: #0f172a;
}

.nfs-mm-body:hover .nfs-mm-body__media {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.1);
}

.nfs-mm-body:hover .nfs-mm-body__img {
  transform: scale(1.06);
}

@media (max-width: 1200px) {
  .nfs-mm-grid--body4 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .nfs-mm-grid--body4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nfs-mm-layout--mirror {
    grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1fr);
  }
}

/* Brand tile — квадратная обложка + meta; ограниченная высота + скролл */
.nfs-mm-grid--brands {
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  grid-auto-rows: max-content;
  gap: 0.65rem 0.75rem;
  flex: 0 0 auto;
  width: 100%;
  max-height: min(22rem, calc(100vh - 11rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  margin: 0 !important;
  padding: 0 0.15rem 0 0;
  align-content: start !important;
  align-items: start !important;
  justify-content: start;
}

/* Сброс legacy tile-стилей (nfs_header / silo), чтобы не сжимать cover */
.nfs-megamenu--cards .nfs-mm-brand.nfs-megamenu-link--brand-with-logo,
.nfs-megamenu--cards a.nfs-mm-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
  color: #0f172a !important;
  text-align: center;
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: none !important;
}

.nfs-mm-brand::before {
  display: none !important;
  content: none !important;
}

.nfs-mm-brand__cover,
.nfs-megamenu--cards .nfs-mm-brand .nfs-megamenu-brand-logo-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 0.75rem !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  background:
    linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
  box-shadow: none !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nfs-mm-brand__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 23, 42, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.04) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.85;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 90%);
}

.nfs-mm-brand:hover .nfs-mm-brand__cover {
  border-color: rgba(26, 95, 217, 0.35) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

/* Лого: flex-центр в cover (absolute+translate обрезал верх PNG) */
.nfs-mm-brand__logo,
.nfs-mm-brand .nfs-megamenu-brand-logo,
.nfs-megamenu--cards .nfs-mm-brand .nfs-megamenu-brand-logo {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  inset: auto !important;
  z-index: 1;
  display: block !important;
  width: 68% !important;
  height: 68% !important;
  max-width: 68% !important;
  max-height: 68% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  pointer-events: none;
}

.nfs-mm-brand__fallback,
.nfs-mm-brand .nfs-megamenu-brand-fallback {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  border-radius: inherit;
}

.nfs-mm-brand__fallback.is-visible,
.nfs-mm-brand .nfs-megamenu-brand-fallback.is-visible {
  display: flex;
}

.nfs-mm-brand__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.15rem;
  min-width: 0;
}

.nfs-mm-brand__name,
.nfs-mm-brand .nfs-megamenu-brand-text {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #0f172a !important;
}

.nfs-mm-brand__count,
.nfs-mm-brand .nfs-megamenu-brand-count {
  font-size: 0.6875rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: rgba(26, 95, 217, 0.08);
  border: none !important;
}

/* ── Mobile drawer: Radix-style rows + brand covers (высокая специфичность) ── */
.nfs-mobile-drawer .nfs-mm-mobile-item,
.nfs-mm-mobile-item {
  display: flex !important;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1rem !important;
  text-align: left;
  text-decoration: none !important;
  color: #0f172a !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.nfs-mobile-drawer .nfs-mm-mobile-item--root {
  min-height: 3.5rem;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

.nfs-mobile-drawer .nfs-mm-mobile-item__chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: #94a3b8;
  width: 1.15rem;
  height: 1.15rem;
}

.nfs-mobile-drawer .nfs-mm-mobile-item:last-child {
  border-bottom: none !important;
}

.nfs-mobile-drawer .nfs-mm-mobile-item--accent .nfs-mm-mobile-item__title {
  color: #1a5fd9;
}

.nfs-mobile-drawer .nfs-mm-mobile-item__icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem !important;
  height: 2.5rem !important;
  border-radius: 0.65rem;
  background: #f1f5f9 !important;
  color: #334155;
}

.nfs-mobile-drawer .nfs-mm-mobile-item__icon svg,
.nfs-mobile-drawer .nfs-mm-mobile-item__icon .nfs-ti {
  width: 1.25rem;
  height: 1.25rem;
}

.nfs-mobile-drawer .nfs-mm-mobile-item__icon--flag {
  background: #fff !important;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.nfs-mobile-drawer .nfs-mm-mobile-item__icon--flag img {
  width: 1.35rem;
  height: auto;
  display: block;
}

.nfs-mobile-drawer .nfs-mm-mobile-item__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1 1 auto;
}

.nfs-mobile-drawer .nfs-mm-mobile-item__title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25;
  color: #0f172a;
}

.nfs-mobile-drawer .nfs-mm-mobile-item__desc {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #64748b;
}

.nfs-mobile-drawer .nfs-mm-mobile-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.35rem 1rem 0.85rem;
}

.nfs-mobile-drawer .nfs-mm-mobile-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none !important;
  color: #0f172a !important;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.12);
}

.nfs-mobile-drawer .nfs-mm-mobile-chip--china {
  border-color: rgba(220, 38, 38, 0.22);
}

.nfs-mobile-drawer .nfs-mm-mobile-brands {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  padding: 0.25rem 1rem 1.25rem;
}

.nfs-mobile-drawer .nfs-mm-mobile-brands .nfs-mm-brand {
  min-width: 0;
}

.nfs-mobile-drawer .nfs-mobile-nav--mm-list,
.nfs-mobile-drawer .nfs-mobile-nav--brands-cards,
.nfs-mobile-drawer .nfs-mobile-nav--mm-root {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.5rem;
}

@media (max-width: 380px) {
  .nfs-mobile-drawer .nfs-mm-mobile-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Сброс старых col-обёрток */
.nfs-megamenu--cards .nfs-megamenu-col,
.nfs-megamenu--cards .nfs-megamenu-col--categories,
.nfs-megamenu--cards .nfs-megamenu-col--brands {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-width: 0;
  width: 100%;
  display: block;
  /* catalog_nav: max-height + overflow:hidden сжимал/обрезал cover-сетку */
  max-height: none !important;
  overflow: visible !important;
}

.nfs-megamenu--brands-panel.nfs-megamenu--cards {
  overflow: hidden;
}

@media (min-width: 1024px) {
  .nfs-header-main .nfs-megamenu.nfs-megamenu--brands-panel.nfs-megamenu--cards {
    overflow: hidden;
    max-height: none;
  }
}

@media (max-width: 1200px) {
  .nfs-mm-layout {
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.32fr);
  }

  .nfs-mm-grid--brands {
    grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr));
  }
}

@media (max-width: 1100px) {
  .nfs-mm-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nfs-mm-grid--3 > li:last-child {
    grid-column: 1 / -1;
  }
}

/* === css/scrollbars.css === */
/**
 * @file: scrollbars.css
 * @description: Глобальные геометрические скроллбары NFS AUTO — тонкий pill, без стрелок.
 * Подход: прозрачный трек, капсула-ползунок, нейтральная палитра (macOS / Linear / Vercel).
 */

:root {
    --nfs-scrollbar-size: 8px;
    --nfs-scrollbar-thumb-gap: 2px;
    --nfs-scrollbar-radius: 999px;
    --nfs-scrollbar-min-thumb: 44px;
    --nfs-scrollbar-track: transparent;

    /* Светлые поверхности */
    --nfs-scrollbar-thumb: rgba(100, 116, 139, 0.36);
    --nfs-scrollbar-thumb-hover: rgba(71, 85, 105, 0.58);
    --nfs-scrollbar-thumb-active: rgba(51, 65, 85, 0.74);

    /* Тёмные поверхности (сайдбар, модалки) */
    --nfs-scrollbar-thumb-dark: rgba(255, 255, 255, 0.2);
    --nfs-scrollbar-thumb-dark-hover: rgba(255, 255, 255, 0.36);
    --nfs-scrollbar-thumb-dark-active: rgba(255, 255, 255, 0.5);
}

/* Firefox */
html,
body {
    scrollbar-width: thin;
    scrollbar-color: var(--nfs-scrollbar-thumb) var(--nfs-scrollbar-track);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--nfs-scrollbar-thumb) var(--nfs-scrollbar-track);
}

/* WebKit (Chrome, Safari, Edge) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: var(--nfs-scrollbar-size);
    height: var(--nfs-scrollbar-size);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
    background: var(--nfs-scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background-color: var(--nfs-scrollbar-thumb);
    border-radius: var(--nfs-scrollbar-radius);
    border: var(--nfs-scrollbar-thumb-gap) solid transparent;
    background-clip: padding-box;
    min-height: var(--nfs-scrollbar-min-thumb);
    transition:
        background-color var(--transition-fast, 150ms ease),
        opacity var(--transition-fast, 150ms ease);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--nfs-scrollbar-thumb-hover);
}

html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
    background-color: var(--nfs-scrollbar-thumb-active);
}

/* Без стрелок — чистая геометрия */
html::-webkit-scrollbar-button,
body::-webkit-scrollbar-button,
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* Тёмные скроллируемые области */
.admin-sidebar,
[data-nfs-scrollbar="dark"] {
    scrollbar-color: var(--nfs-scrollbar-thumb-dark) var(--nfs-scrollbar-track);
}

.admin-sidebar::-webkit-scrollbar-thumb,
[data-nfs-scrollbar="dark"]::-webkit-scrollbar-thumb {
    background-color: var(--nfs-scrollbar-thumb-dark);
}

.admin-sidebar::-webkit-scrollbar-thumb:hover,
[data-nfs-scrollbar="dark"]::-webkit-scrollbar-thumb:hover {
    background-color: var(--nfs-scrollbar-thumb-dark-hover);
}

.admin-sidebar::-webkit-scrollbar-thumb:active,
[data-nfs-scrollbar="dark"]::-webkit-scrollbar-thumb:active {
    background-color: var(--nfs-scrollbar-thumb-dark-active);
}

/* Лёгкое проявление ползунка при наведении на контейнер (macOS-подобно) */
@supports selector(::-webkit-scrollbar-thumb) {
    *:not(:hover)::-webkit-scrollbar-thumb {
        background-color: color-mix(in srgb, var(--nfs-scrollbar-thumb) 72%, transparent);
    }

    .admin-sidebar:not(:hover)::-webkit-scrollbar-thumb,
    [data-nfs-scrollbar="dark"]:not(:hover)::-webkit-scrollbar-thumb {
        background-color: color-mix(in srgb, var(--nfs-scrollbar-thumb-dark) 65%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    html::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb,
    *::-webkit-scrollbar-thumb {
        transition: none;
    }
}

/* === css/auth_modal.css === */
/* Auth Modal Styles — Design System UI Pack */

/* Диалог как в UI Pack (~360px) */
.auth-modal-dialog {
    max-width: 380px;
}

/* Переключение экранов модалки */
.auth-view.is-hidden,
.auth-pane.is-hidden,
.auth-footer.is-hidden {
    display: none !important;
}

/* Вкладки «Войти / Регистрация» — как в nfs-ds-ui-pack (кнопки .at) */
.auth-modal .auth-tabs {
    display: flex;
    gap: 2px;
    background: linear-gradient(160deg, #f4f6fa, #e0e5f0);
    border-radius: 8px;
    padding: 3px;
    margin: 0 24px 20px;
    border-bottom: none;
}

.auth-modal .auth-tabs .at {
    flex: 1;
    padding: 7px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 6px;
    color: #5a6480;
    background: transparent;
    border: none;
    font-family: inherit;
    transition: all 0.2s ease;
}

.auth-modal .auth-tabs .at.on {
    background: linear-gradient(150deg, #3b7fff, #1a5fd9, #1248b0);
    color: #fff;
    box-shadow: 0 2px 8px rgba(26, 95, 217, 0.3);
}

.auth-modal .auth-tabs .at:hover:not(.on) {
    background: rgba(26, 95, 217, 0.08);
    color: #1a5fd9;
}

.auth-pane {
    padding: 0 24px 24px;
}

.auth-pane .auth-form {
    padding: 0;
    margin: 0;
}

/* Иконка замка — экран «Забыли пароль» */
.auth-icon-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nfs-blue, #1a5fd9);
    background: linear-gradient(135deg, rgba(26, 95, 217, 0.15), rgba(26, 95, 217, 0.08));
    border: 0.5px solid rgba(26, 95, 217, 0.25);
}

/* Успех — письмо отправлено */
.auth-reset-sent-inner {
    padding: 24px 24px 28px;
    text-align: center;
}

.auth-success-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #14a34a;
    background: rgba(20, 163, 74, 0.08);
    border: 0.5px solid rgba(20, 163, 74, 0.25);
}

.auth-reset-sent-text {
    margin-bottom: 16px;
}

.auth-btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    border: 0.5px solid rgba(58, 66, 96, 0.12);
    background: linear-gradient(160deg, #fff, #f4f6fa);
    color: #2a3450;
    text-decoration: none;
    margin-bottom: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-btn-secondary:hover {
    border-color: rgba(26, 95, 217, 0.35);
    color: #1a5fd9;
    box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.12);
}

button.auth-back-link {
    display: block;
    width: 100%;
    margin-top: 4px;
    text-align: center;
    font-size: 11px;
    color: #9aa0b8;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0 0;
    font-family: inherit;
}

button.auth-back-link:hover {
    color: var(--nfs-blue, #1a5fd9);
}

.auth-modal {
    border-radius: 14px;
    border: 0.5px solid rgba(26, 95, 217, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
    background: linear-gradient(160deg, #fff, #f8fafc);
    overflow: hidden;
    position: relative;
}

.auth-modal .modal-header {
    padding: 24px 24px 0;
    border: none;
    text-align: center;
}

.auth-modal .modal-body {
    padding: 0 24px 24px;
}

.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background-color: transparent;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.auth-close:hover {
    opacity: 1;
}

.auth-head {
    padding: 24px 24px 0;
    text-align: center;
}

.auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.auth-logo-text {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: #0d1117;
}

.auth-sub {
    font-size: 11px;
    color: #5a6480;
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inp-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inp-lbl {
    font-size: 10px;
    font-weight: 700;
    color: #5a6480;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.inp-lbl-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inp-row {
    display: flex;
    gap: 8px;
}

.forgot-link {
    font-size: 10px;
    color: var(--nfs-blue, #1a5fd9);
    text-decoration: none;
    font-weight: 600;
}

.forgot-link:hover {
    text-decoration: underline;
}

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cb-text {
    font-size: 11px;
    color: #5a6480;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #9aa0b8;
    margin: 16px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 0.5px;
    background: rgba(58, 66, 96, 0.07);
}

.social-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* OAuth-сетка на всю ширину (Telegram iframe не сжимать) */
.social-row .auth-oauth-wrap {
    width: 100%;
    min-width: 0;
}

.auth-footer {
    padding: 12px 24px;
    border-top: 0.5px solid rgba(58, 66, 96, 0.07);
    text-align: center;
    font-size: 10px;
    color: #9aa0b8;
}

.auth-footer a {
    color: var(--nfs-blue, #1a5fd9);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Только цвет фона: шортхенд background: transparent сбрасывает background-image у Bootstrap и прячет крестик */
.auth-modal .btn-close {
    background-color: transparent;
    opacity: 0.85;
    color: var(--gray-800);
    transition: opacity var(--transition-fast);
}

.auth-modal .btn-close:hover {
    opacity: 1;
}

/* Auth Tabs — UI Pack Design System */
.auth-tabs {
    display: flex;
    gap: 2px;
    background: linear-gradient(160deg, #f4f6fa, #e0e5f0);
    border-radius: 8px;
    padding: 3px;
    margin: 0 0 20px;
    border-bottom: none;
    justify-content: stretch;
}

.auth-modal .auth-tabs {
    position: sticky;
    top: 0;
    z-index: 2;
}

.auth-tabs .nav-item {
    flex: 1;
}

.auth-tabs .nav-link {
    position: relative;
    border: none !important;
    margin-bottom: 0 !important;
    color: #5a6480;
    font-weight: 700;
    font-size: 11px;
    padding: 7px 14px;
    background: transparent;
    transition: all 0.2s ease;
    border-radius: 6px;
    text-align: center;
    width: 100%;
}

/* В UI Pack стиле убираем линию ::after, используем pill стиль */
.auth-tabs .nav-link::after {
    display: none;
}

.auth-tabs .nav-link:hover,
.auth-tabs .nav-link:focus-visible {
    color: var(--nfs-blue, #1a5fd9);
}

.auth-tabs .nav-link.active,
.auth-tabs .nav-link[aria-selected="true"] {
    background: linear-gradient(150deg, #3b7fff, #1a5fd9, #1248b0);
    color: #fff;
    box-shadow: 0 2px 8px rgba(26, 95, 217, 0.3);
}

.auth-tabs .nav-link.active::after,
.auth-tabs .nav-link[aria-selected="true"]::after {
    display: none;
}

.auth-tabs .nav-link:not(.active):hover {
    background: rgba(26, 95, 217, 0.08);
}

/* Auth Form — UI Pack Design System */
.auth-title {
    font-size: 16px;
    font-weight: 800;
    color: #0d1117;
    text-align: center;
    display: block;
    visibility: visible;
    opacity: 1;
    margin-bottom: 4px;
}

.auth-subtitle {
    font-size: 11px;
    color: #5a6480;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.5;
}

.auth-modal .tab-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.auth-modal .tab-pane {
    display: none !important;
}

.auth-modal .tab-pane.fade.show,
.auth-modal .tab-pane.fade.active.show,
.auth-modal .tab-pane.active.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.auth-modal .tab-pane.fade:not(.show):not(.active) {
    display: none !important;
}

/* Инпуты — UI Pack Design System */
.auth-modal .form-control.auth-input {
    border: 0.5px solid rgba(58, 66, 96, 0.12) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    background: linear-gradient(180deg, #fff, #f8fafc) !important;
    color: #0d1117 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) inset;
}

.auth-modal .form-control.auth-input::placeholder {
    color: #9aa0b8;
}

.auth-modal .form-control.auth-input:focus {
    border-color: rgba(26, 95, 217, 0.3) !important;
    box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.22), 0 1px 3px rgba(0, 0, 0, 0.04) inset !important;
    outline: none !important;
}

.auth-modal .form-control.auth-input.is-invalid,
.auth-modal .form-control.auth-input:invalid:not(:placeholder-shown) {
    border-color: rgba(201, 34, 34, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(201, 34, 34, 0.12) !important;
}

.auth-modal .form-control.auth-input.is-valid {
    border-color: rgba(20, 163, 74, 0.4) !important;
    box-shadow: 0 0 0 3px rgba(20, 163, 74, 0.12) !important;
}

.auth-modal .invalid-feedback {
    color: var(--nfs-red);
    font-size: var(--text-sm);
    margin-top: 0.375rem;
}

.auth-modal .form-label {
    font-weight: 700 !important;
    color: #5a6480 !important;
    font-size: 10px !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 5px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.auth-modal .form-check-label {
    font-size: var(--text-base) !important;
    color: var(--gray-600) !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.auth-modal .mb-3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 1rem !important;
}

.auth-modal .form-check {
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.auth-modal .form-check-input {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.auth-modal .btn-primary {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--nfs-blue) !important;
    border: none !important;
    color: white !important;
}

.auth-modal .auth-link {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--nfs-blue) !important;
}

/* Выше специфичность: Bootstrap + home.css (.btn-primary { border-radius: 9999px }) иначе даёт «таблетку» */
.auth-modal .btn.btn-primary.auth-submit-btn {
    border-radius: 6px !important;
    --bs-btn-border-radius: 6px;
}

.auth-submit-btn {
    padding: 9px 18px;
    font-size: 12px;
    font-weight: 700;
    /* Как у вкладок .auth-tabs .at (6px) */
    border-radius: 6px;
    background: linear-gradient(150deg, #3b7fff, #1a5fd9, #1248b0);
    border: none;
    color: white;
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 2px 10px rgba(26, 95, 217, 0.28), 0 0 0 0.5px rgba(26, 95, 217, 0.4);
    letter-spacing: 0.02em;
}

.auth-submit-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    background-size: 200% 100%;
    background-position: 200% center;
    pointer-events: none;
    transition: background-position 0.4s;
}

.auth-submit-btn:hover::after {
    background-position: -200% center;
}

.auth-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(59, 127, 255, 0.5), 0 0 14px rgba(59, 127, 255, 0.25), 0 3px 12px rgba(26, 95, 217, 0.3);
}

.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-link {
    color: var(--nfs-blue);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-base);
    transition: color var(--transition-fast);
}

.auth-link:hover {
    color: var(--nfs-blue-hover);
    /* Линия из центра — nfs-text-btn-hover.css (.auth-modal a.auth-link::after) */
    text-decoration: none;
}

/* Индикация силы пароля */
.password-strength {
    height: 4px;
    border-radius: 2px;
    background: var(--gray-200);
    margin-top: 0.5rem;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    border-radius: 2px;
    transition: width var(--transition-normal), background var(--transition-normal);
    width: 0%;
}

.password-strength-bar.weak {
    width: 25%;
    background: var(--nfs-red);
}

.password-strength-bar.fair {
    width: 50%;
    background: var(--nfs-orange);
}

.password-strength-bar.good {
    width: 75%;
    background: var(--nfs-green-light);
}

.password-strength-bar.strong {
    width: 100%;
    background: var(--nfs-green);
}

.password-strength-text {
    font-size: var(--text-xs);
    margin-top: 0.25rem;
    color: var(--gray-500);
}

/* User Dropdown Menu */
.user-menu-wrapper { position: relative; }

.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: var(--z-dropdown);
    overflow: hidden;
}

.user-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--gray-100);
}

.user-dropdown-item:last-child { border-bottom: none; }

.user-dropdown-item:hover {
    background: var(--gray-50);
    color: var(--nfs-blue);
}

.user-dropdown-item svg { flex-shrink: 0; }
.user-profile-btn { position: relative; }

/* Order Modal Styles */
.order-modal {
    border-radius: var(--radius-2xl);
    border: none;
    box-shadow: var(--shadow-2xl);
}

.order-modal .modal-header { padding: 24px 24px 16px; }
.order-modal .modal-title { font-size: 22px; font-weight: var(--font-weight-bold); color: var(--gray-900); }
.order-modal .modal-body { padding: 16px 24px 24px; }

.order-car-info {
    background: var(--gray-50);
    padding: 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.order-car-info h6 { font-size: var(--text-md); font-weight: var(--font-weight-semibold); color: var(--gray-900); margin-bottom: 8px; }
.order-car-price { font-size: var(--text-xl); font-weight: var(--font-weight-bold); color: var(--nfs-blue); margin: 0; }

.order-input {
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    font-size: 15px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.order-input:focus {
    border-color: var(--nfs-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.alert-info {
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.15);
    color: var(--nfs-blue);
    font-size: var(--text-base);
    display: flex;
    align-items: flex-start;
}

/* Responsive */
@media (max-width: 576px) {
    /* На узких экранах модалка на весь экран задаётся в nfs-modals.css — без скругления карточки */
    .auth-modal {
        border-radius: 0;
    }
    .auth-pane { padding: 0 20px 20px; }
    .auth-tabs .nav-link { padding: 10px 20px; font-size: var(--text-base); }
    .auth-title { font-size: var(--text-xl); }
    .user-dropdown-menu { right: -10px; min-width: 200px; }
    .order-modal .modal-header { padding: 20px 20px 12px; }
    .order-modal .modal-title { font-size: var(--text-lg); }
    .order-modal .modal-body { padding: 12px 20px 20px; }
}

/* === css/nfs-oauth-buttons.css === */
/* Кнопки OAuth в модалке входа / регистрации — в стиле дизайн-системы NFS */

.auth-oauth-wrap {
  margin-top: 1rem;
}

/* В модалке разделитель «или войдите через» задаётся снаружи — без дублирования */
.auth-oauth-wrap--no-divider {
  margin-top: 0;
}

.auth-oauth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--nfs-t4, #8b92a8);
  font-size: 12px;
  font-weight: 600;
}

.auth-oauth-divider::before,
.auth-oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nfs-b1, rgba(26, 32, 53, 0.12));
}

/* Все провайдеры в одной строке (раньше было 2 колонки — Telegram уезжал вниз) */
.auth-oauth-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 10px;
}

.auth-oauth-grid .auth-oauth-btn {
  flex: 1 1 0;
  min-width: 0;
}

.auth-oauth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--nfs-b1, rgba(26, 32, 53, 0.14));
  background: var(--nfs-white, #fff);
  color: var(--nfs-t1, #1a2135);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.auth-oauth-btn:hover {
  border-color: rgba(59, 127, 255, 0.45);
  box-shadow: 0 2px 10px rgba(59, 127, 255, 0.12);
  color: var(--nfs-t1, #1a2135);
}

.auth-oauth-btn:focus-visible {
  outline: 2px solid var(--nfs-blue, #3b7fff);
  outline-offset: 2px;
}

.auth-oauth-btn__icon {
  flex-shrink: 0;
  object-fit: contain;
}

/* Яндекс: в покое — та же обводка, что у Google (базовый .auth-oauth-btn); при наведении — красный акцент бренда */
.auth-oauth-btn--yandex:hover {
  border-color: rgba(224, 48, 48, 0.65);
  box-shadow: 0 2px 10px rgba(224, 48, 48, 0.2);
  color: var(--nfs-t1, #1a2135);
}

/* Telegram: в покое — как Google/Яндекс (базовый .auth-oauth-btn); голубой бренд только при наведении */
.auth-oauth-btn--telegram {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, background 0.15s ease;
}

.auth-oauth-btn--telegram:hover {
  background: linear-gradient(180deg, #f0f9ff 0%, #fff 100%);
  border-color: rgba(34, 158, 217, 0.75);
  box-shadow: 0 2px 10px rgba(34, 158, 217, 0.22);
  color: var(--nfs-t1, #1a2135);
}

@media (max-width: 380px) {
  .auth-oauth-grid {
    gap: 8px;
  }

  .auth-oauth-grid .auth-oauth-btn {
    padding: 8px 10px;
    font-size: 12px;
    gap: 6px;
  }
}

/* === css/nfs-text-btn-hover.css === */
/**
 * @file nfs-text-btn-hover.css
 * @description Линия снизу при hover/focus-visible: расширяется из центра (яркий синий, как вкладки входа).
 * Утилита: class="nfs-text-btn" на <button> или <a>. Отключение: class="nfs-no-text-hover-line".
 */

/* Утилита и типовые текстовые контролы (шапка, модалка, каталог, hero) */
:is(
    button.nfs-text-btn,
    a.nfs-text-btn,
    [role="button"].nfs-text-btn,
    .auth-modal a.auth-link,
    .btn-collapse-all,
    .btn-close-sidebar,
    .filter-show-more-btn,
    .hero-filter-text-btn,
    .nfs-nav-item > a,
    .nfs-dropdown-item,
    .nfs-user-dropdown-item,
    a.nfs-mobile-nav-link:not(.nfs-mobile-nav-link--row)
):not(.nfs-no-text-hover-line) {
    position: relative;
}

/* Базовая линия */
:is(
    button.nfs-text-btn,
    a.nfs-text-btn,
    [role="button"].nfs-text-btn,
    .auth-modal a.auth-link,
    .btn-collapse-all,
    .btn-close-sidebar,
    .filter-show-more-btn,
    .hero-filter-text-btn,
    .nfs-nav-item > a,
    .nfs-dropdown-item,
    .nfs-user-dropdown-item,
    a.nfs-mobile-nav-link:not(.nfs-mobile-nav-link--row)
):not(.nfs-no-text-hover-line)::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: calc(100% - 16px);
    max-width: 100%;
    height: var(--nfs-text-hover-line-height, 3px);
    border-radius: 0;
    background: var(--nfs-text-hover-line-color, var(--nfs-blue-bright, #4f8cff));
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--nfs-text-hover-line-duration, 0.22s) var(--nfs-text-hover-line-ease, ease);
    pointer-events: none;
}

:is(
    button.nfs-text-btn,
    a.nfs-text-btn,
    [role="button"].nfs-text-btn,
    .auth-modal a.auth-link,
    .btn-collapse-all,
    .btn-close-sidebar,
    .filter-show-more-btn,
    .hero-filter-text-btn,
    .nfs-nav-item > a,
    .nfs-dropdown-item,
    .nfs-user-dropdown-item,
    a.nfs-mobile-nav-link:not(.nfs-mobile-nav-link--row)
):not(.nfs-no-text-hover-line):hover::after,
:is(
    button.nfs-text-btn,
    a.nfs-text-btn,
    [role="button"].nfs-text-btn,
    .auth-modal a.auth-link,
    .btn-collapse-all,
    .btn-close-sidebar,
    .filter-show-more-btn,
    .hero-filter-text-btn,
    .nfs-nav-item > a,
    .nfs-dropdown-item,
    .nfs-user-dropdown-item,
    a.nfs-mobile-nav-link:not(.nfs-mobile-nav-link--row)
):not(.nfs-no-text-hover-line):focus-visible::after {
    transform: translateX(-50%) scaleX(1);
}

/* «Показать ещё» в фильтрах — без дефолтного оформления кнопки */
.filter-show-more-btn:not(.nfs-no-text-hover-line) {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    padding: 0.2rem 0.15rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nfs-blue);
}

/* Ссылки в модалке: корректный контейнер для ::after */
.auth-modal a.auth-link {
    display: inline-block;
}

/* Ссылки в модалке: линия вместо классического underline */
.auth-modal a.auth-link:hover,
.auth-modal a.auth-link:focus-visible {
    text-decoration: none;
}

/* Верхнее меню: текст синий при hover */
.nfs-nav-item > a:not(.nfs-no-text-hover-line):hover,
.nfs-nav-item > a:not(.nfs-no-text-hover-line):focus-visible {
    color: var(--nfs-text-hover-text-color, var(--nfs-blue));
}

/* Hero: «ещё фильтры» — без старого underline */
.hero-filter-text-btn:not(.nfs-no-text-hover-line):hover,
.hero-filter-text-btn:not(.nfs-no-text-hover-line):focus-visible {
    text-decoration: none;
}

/* Каталог: свернуть / закрыть сайдбар — при hover текст синий */
.btn-collapse-all:not(.nfs-no-text-hover-line):hover,
.btn-collapse-all:not(.nfs-no-text-hover-line):focus-visible,
.btn-close-sidebar:not(.nfs-no-text-hover-line):hover,
.btn-close-sidebar:not(.nfs-no-text-hover-line):focus-visible {
    color: var(--nfs-text-hover-text-color, var(--nfs-blue));
}

/* Мобильные текстовые ссылки в drawer: при hover синий текст */
a.nfs-mobile-nav-link:not(.nfs-mobile-nav-link--row):not(.nfs-no-text-hover-line):hover,
a.nfs-mobile-nav-link:not(.nfs-mobile-nav-link--row):not(.nfs-no-text-hover-line):focus-visible {
    color: var(--nfs-text-hover-text-color, var(--nfs-blue));
}

.filter-show-more-btn:not(.nfs-no-text-hover-line):hover,
.filter-show-more-btn:not(.nfs-no-text-hover-line):focus-visible {
    color: var(--nfs-text-hover-text-color-strong, var(--nfs-blue-hover));
}

/* Утилита и явные текстовые кнопки */
button.nfs-text-btn:not(.nfs-no-text-hover-line):hover,
button.nfs-text-btn:not(.nfs-no-text-hover-line):focus-visible,
a.nfs-text-btn:not(.nfs-no-text-hover-line):hover,
a.nfs-text-btn:not(.nfs-no-text-hover-line):focus-visible,
[role="button"].nfs-text-btn:not(.nfs-no-text-hover-line):hover,
[role="button"].nfs-text-btn:not(.nfs-no-text-hover-line):focus-visible {
    color: var(--nfs-text-hover-text-color-strong, var(--nfs-blue-hover));
}

/* === css/nfs-modals.css === */
/**
 * Единые стили модальных окон NFS: токены, подложка с blur, Bootstrap и кастомные оверлеи.
 * Подключать после bootstrap.min.css (и после design-tokens на фронте — опционально).
 */

:root {
    --nfs-modal-max-width: 480px;
    --nfs-modal-max-width-wide: min(800px, calc(100vw - 2rem));
    --nfs-modal-max-width-compare: min(1200px, 94vw);
    --nfs-modal-max-height: min(90vh, 720px);
    --nfs-modal-radius: 1.5rem;
    --nfs-modal-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --nfs-modal-backdrop-color: rgba(15, 23, 42, 0.52);
    --nfs-modal-backdrop-blur: 10px;
    --nfs-modal-z: 1056;
    --nfs-modal-content-bg: #ffffff;
    --nfs-modal-border-subtle: #e2e8f0;
}

/* Блокировка скролла страницы для кастомных оверлеев (не Bootstrap) */
html.nfs-scroll-lock,
html.nfs-scroll-lock body {
    overflow: hidden !important;
}

/* Усиление: фон не скроллится при открытой Bootstrap-модалке (html + body) */
body.modal-open {
    overflow: hidden !important;
}

html:has(.modal.show) {
    overflow: hidden !important;
}

/* Подложка Bootstrap 5 */
.modal-backdrop {
    --bs-backdrop-bg: var(--nfs-modal-backdrop-color);
    --bs-backdrop-opacity: 1;
    backdrop-filter: blur(var(--nfs-modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--nfs-modal-backdrop-blur));
}

/* Диалог: стандартная и широкая ширина, без полноэкранного и медиа-браузера */
.modal .modal-dialog:not(.modal-fullscreen) {
    max-width: min(var(--nfs-modal-max-width), calc(100vw - 2rem));
    margin-left: auto;
    margin-right: auto;
}

.modal .modal-dialog.modal-lg:not(.modal-fullscreen),
.modal .modal-dialog.modal-xl:not(.modal-fullscreen) {
    max-width: min(var(--nfs-modal-max-width-wide), calc(100vw - 2rem));
}

/*
 * Выбор марки в hero на главной: нужна ширина больше общего лимита modal-xl (800px).
 * Иначе правило выше перебивает home.css (nfs-modals подключается позже).
 */
.modal.hero-brand-modal .modal-dialog.modal-xl,
.modal.hero-model-modal .modal-dialog.modal-xl {
    max-width: min(1596px, calc(100vw - 1.5rem));
    width: 100%;
}

/* Медиа-браузер: почти на весь экран (перекрывает общие лимиты) */
.modal.media-browser-modal .modal-dialog.modal-xl,
.modal.media-browser-modal .modal-dialog {
    max-width: 95vw !important;
    width: 95vw;
    height: 90vh;
    margin: 5vh auto;
}

.modal .modal-content {
    max-height: var(--nfs-modal-max-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--nfs-modal-radius);
    border: none;
    box-shadow: var(--nfs-modal-shadow);
    background: var(--nfs-modal-content-bg);
}

.modal .modal-header {
    flex-shrink: 0;
    border-bottom-color: var(--nfs-modal-border-subtle);
}

.modal .modal-footer {
    flex-shrink: 0;
    border-top-color: var(--nfs-modal-border-subtle);
}

.modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Кастомные модалки (оверлей без Bootstrap) */
.nfs-native-modal {
    position: fixed;
    inset: 0;
    z-index: var(--nfs-modal-z);
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.nfs-native-modal.nfs-native-modal--open,
.nfs-native-modal[style*="display: flex"],
.nfs-native-modal.show {
    display: flex !important;
}

.nfs-native-modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--nfs-modal-backdrop-color);
    backdrop-filter: blur(var(--nfs-modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--nfs-modal-backdrop-blur));
}

.nfs-native-modal__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(var(--nfs-modal-max-width), calc(100vw - 2rem));
    max-height: var(--nfs-modal-max-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nfs-modal-content-bg);
    border-radius: var(--nfs-modal-radius);
    box-shadow: var(--nfs-modal-shadow);
    animation: nfsModalPanelIn 0.25s ease-out;
}

/* Широкая панель (обмен и т.п.) */
.nfs-native-modal__panel--wide {
    max-width: min(var(--nfs-modal-max-width-wide), calc(100vw - 2rem));
}

.nfs-native-modal__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--nfs-modal-border-subtle);
}

.nfs-native-modal__header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #0f172a;
}

.nfs-native-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem;
}

.nfs-native-modal__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--nfs-modal-border-subtle);
}

@keyframes nfsModalPanelIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Режим «всегда flex», показ через opacity/visibility (история цен) */
.nfs-native-modal.nfs-native-modal--visibility-toggle {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.nfs-native-modal.nfs-native-modal--visibility-toggle.nfs-native-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Диалог сравнения (каталог): отдельная разметка */
.compare-dialog {
    position: fixed;
    inset: 0;
    z-index: var(--nfs-modal-z);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.compare-dialog.compare-dialog--open {
    display: flex;
}

.compare-dialog__backdrop {
    position: absolute;
    inset: 0;
    background: var(--nfs-modal-backdrop-color);
    backdrop-filter: blur(var(--nfs-modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--nfs-modal-backdrop-blur));
}

.compare-dialog__panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--nfs-modal-max-width-compare);
    max-height: var(--nfs-modal-max-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nfs-modal-content-bg);
    border-radius: var(--nfs-modal-radius);
    box-shadow: var(--nfs-modal-shadow);
    animation: nfsModalPanelIn 0.25s ease-out;
}

.compare-dialog__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--nfs-modal-border-subtle);
}

.compare-dialog__header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: #0f172a;
}

.compare-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem;
}

.compare-dialog__close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
}

.compare-dialog__close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

/* -------------------------------------------------------------------------- */
/* Мобильная версия: модалка на весь экран (как отдельная страница)           */
/* До breakpoint md Bootstrap (768px) — телефоны и узкие планшеты в портрете */
/* -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    /* --- Bootstrap Modal --- */
    .modal {
        padding: 0 !important;
        /* Скролл только внутри .modal-body, а не «карточки» по центру */
        overflow: hidden !important;
    }

    .modal .modal-dialog:not(.modal-fullscreen) {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .modal .modal-dialog.modal-dialog-centered {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        align-items: stretch !important;
    }

    .modal .modal-content {
        max-height: none !important;
        height: 100%;
        min-height: 100%;
        border-radius: 0 !important;
        box-shadow: none;
    }

    /* Медиа-браузер: на мобильном тоже на весь экран */
    .modal.media-browser-modal .modal-dialog,
    .modal.media-browser-modal .modal-dialog.modal-xl {
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
    }

    /* --- Кастомные nfs-native-modal --- */
    .nfs-native-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .nfs-native-modal__panel,
    .nfs-native-modal__panel--wide {
        max-width: none !important;
        width: 100%;
        max-height: none !important;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
        box-shadow: none;
    }

    /* --- Диалог сравнения --- */
    .compare-dialog {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    .compare-dialog__panel {
        max-width: none !important;
        width: 100%;
        max-height: none !important;
        height: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0 !important;
        box-shadow: none;
    }
}

/* ─── Модалка консультации / заказа подбора ─── */
.nfs-consult-modal .nfs-consult-modal__content {
    border: none;
    overflow: hidden;
}

.nfs-consult-modal__header {
    padding: 1.5rem 1.5rem 0.5rem;
    align-items: flex-start;
}

.nfs-consult-modal__heading {
    min-width: 0;
    flex: 1 1 auto;
    padding-right: 0.5rem;
}

.nfs-consult-modal__eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #1a5fd9;
}

.nfs-consult-modal__title {
    margin: 0;
    font-family: var(--nfs-v2-ff, var(--nfs-ff, inherit));
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: #0f172a;
}

.nfs-consult-modal__accent {
    background: linear-gradient(135deg, #2b6fe8, #1a5fd9, #3b7fff);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nfs-consult-modal__body {
    padding: 0.5rem 1.5rem 1.5rem;
}

.nfs-consult-modal__lead {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #64748b;
}

.nfs-consult-modal__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nfs-consult-modal__field {
    margin-bottom: 1rem;
}

.nfs-consult-modal__field .form-label {
    margin-bottom: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
}

.nfs-consult-modal__input {
    border-radius: 0.75rem;
    border-color: #e2e8f0;
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nfs-consult-modal__input:focus {
    border-color: #3b7fff;
    box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.18);
}

.nfs-consult-modal__textarea {
    min-height: 5rem;
    resize: vertical;
}

.nfs-consult-modal__submit {
    margin-top: 0.25rem;
    min-height: 3rem;
    border: none;
    border-radius: 0.85rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    background: linear-gradient(to top, #1a5fd9, #3b7fff);
    box-shadow: 0 10px 22px rgba(26, 95, 217, 0.28);
    transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.nfs-consult-modal__submit:hover {
    filter: brightness(1.05);
    color: #fff;
}

.nfs-consult-modal__submit:disabled {
    opacity: 0.7;
    filter: none;
}

.nfs-consult-modal__alert {
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

/* === css/nfs-flashes.css === */
/**
 * Глобальные flash-сообщения: стек сверху справа, под фиксированным хедером.
 * Отступы от правого и верхнего краёв — как раньше от правого и нижнего (1.25rem).
 * Разметка — nfs-ds4-toast (как в демо «S · Уведомления», nfs-ds-v4-pack.css).
 */
.nfs-flash-stack {
  position: fixed;
  top: calc(64px + 1.25rem + env(safe-area-inset-top, 0px));
  right: 1.25rem;
  bottom: auto;
  left: auto;
  z-index: 1090; /* выше типичного контента, согласовано с Bootstrap toast */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(26rem, calc(100vw - 2.5rem));
  max-height: calc(100vh - 64px - 2.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: none;
}

/* Мобильная шапка выше — как body:has(.nfs-header) в nfs_header.css */
@media (max-width: 1023.98px) {
  .nfs-flash-stack {
    top: calc(72px + 1.25rem + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 72px - 2.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  /* Раскрытое поле поиска — двухрядный хедер */
  body:has(.nfs-header.nfs-header--search-open) .nfs-flash-stack {
    top: calc(132px + 1.25rem + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 132px - 2.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/* Въезд справа: тост смещён вправо за край и заезжает влево (px — без обрезки при overflow стека) */
@keyframes nfsFlashToastEnter {
  from {
    opacity: 0;
    transform: translate3d(120%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item {
  pointer-events: auto;
  margin-bottom: 0;
  text-align: left;
  word-break: break-word;
  width: min(26rem, calc(100vw - 2.5rem));
  max-width: 100%;
  transform-origin: right top;
  will-change: opacity, transform;
  /* Перекрываем встроенную анимацию тоста — единый вход в стеке */
  animation: nfsFlashToastEnter 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item.fade {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item[data-closing='true'] {
  animation: none;
}

.nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item.fade:not(.show) {
  opacity: 0;
  transform: translate3d(120%, 0, 0);
}

@media (max-width: 575.98px) {
  .nfs-flash-stack {
    left: 0.75rem;
    right: 0.75rem;
    top: calc(72px + 0.75rem + env(safe-area-inset-top, 0px));
    max-width: none;
    align-items: stretch;
    max-height: calc(100vh - 72px - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  body:has(.nfs-header.nfs-header--search-open) .nfs-flash-stack {
    top: calc(132px + 0.75rem + env(safe-area-inset-top, 0px));
    max-height: calc(100vh - 132px - 1.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }

  .nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item.fade {
    transition: opacity 0.18s ease;
  }

  .nfs-flash-stack .nfs-ds4-toast.nfs-flash-stack__item.fade:not(.show) {
    transform: none;
  }
}

/* === css/footer.css === */
/* Footer Styles — переменные: см. design-tokens.css */

/* Обёртка layout-root для index.html и страниц без base.html */
.layout-root {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
}

.layout-root > main {
    flex: 1;
}

.layout-root > .site-footer,
.layout-root > .main-footer,
.layout-root .nfs-header {
    width: 100%;
    flex-shrink: 0;
}

/* === main-footer (используется везде) === */
.main-footer {
    background: var(--gray-900);
    color: white;
    width: 100%;
}

/* Светлый Footer2 — стили в nfs-footer-glow.css */
.main-footer.nfs-footer,
.main-footer.nfs-footer-glow {
    background: rgba(248, 250, 252, 0.6);
    color: #0f172a;
}

.main-footer .footer-cta {
    background: var(--gradient-brand);
    padding: 4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-footer .footer-cta-content {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto;
}

.main-footer .footer-cta-content h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    color: white;
}

.main-footer .footer-cta-content > p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.main-footer .footer-content {
    padding: 4rem 0 2rem;
}

.main-footer .footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.main-footer .footer-brand .logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
}

.main-footer .footer-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.main-footer .footer-social {
    display: flex;
    gap: 0.75rem;
}

.main-footer .social-link {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--gray-800);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    text-decoration: none;
}

.main-footer .social-link:hover {
    background: var(--nfs-blue);
    color: white;
    transform: scale(1.1);
}

.main-footer .footer-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: white;
}

.main-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-footer .footer-links li {
    margin-bottom: 0.75rem;
}

.main-footer .footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.main-footer .footer-links a:hover {
    color: white;
}

.main-footer .footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.main-footer .footer-contacts li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.main-footer .footer-contacts a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}

.main-footer .footer-contacts a:hover {
    color: white;
}

.main-footer .footer-newsletter h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: white;
}

.main-footer .newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.main-footer .newsletter-input {
    flex: 1;
    padding: 0.625rem 1rem;
    background: var(--gray-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: white;
    font-size: 0.875rem;
}

.main-footer .newsletter-btn {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--nfs-blue);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-footer .footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3rem;
}

.main-footer .footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
}

.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    color: var(--gray-500);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.back-to-top:hover {
    background: var(--gray-50);
    color: var(--gray-700);
}

.main-footer .container {
    width: 100%;
    /* max-width и padding — из .container (design-tokens.css), без отдельного 1600px */
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* === site-footer (альтернативный, оставлен для совместимости) === */
.site-footer {
    background-color: var(--gray-900);
    color: var(--gray-400);
    padding: 64px 0 0;
    width: 100%;
}

/* Контейнер футера на всю ширину — защита от переопределения .container встроенным HTML страниц */
.site-footer .container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 64px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-about .footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.footer-about .footer-logo img {
    width: 40px;
    height: 40px;
}

.footer-about .footer-logo span {
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    color: white;
}

.footer-description {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin-bottom: 24px;
    color: var(--gray-300);
}

.footer-contact-card {
    background-color: var(--gray-800);
    border-radius: var(--radius-xl);
    padding: 20px;
}

.footer-contact-card h4 {
    color: white;
    font-size: var(--text-md);
    font-weight: var(--font-weight-bold);
    margin-bottom: 16px;
}

.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-200);
    font-size: var(--text-base);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color var(--transition-fast);
}

.footer-contact-link:last-child { margin-bottom: 0; }

.footer-contact-link:hover {
    color: white;
}

.footer-contact-link svg { flex-shrink: 0; }

.footer-column h4 {
    color: white;
    font-size: var(--text-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links li { font-size: var(--text-base); }

.footer-links a {
    color: var(--gray-300);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-links a:hover { color: white; }

.footer-schedule {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-300);
}

.footer-schedule svg { flex-shrink: 0; }

.footer-brands-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.footer-office-card {
    background-color: var(--gray-800);
    border-radius: var(--radius-xl);
    padding: 20px;
    margin-top: 24px;
}

.footer-office-card h4 {
    color: white;
    font-size: var(--text-md);
    margin-bottom: 16px;
}

.footer-office-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.footer-office-info svg {
    flex-shrink: 0;
    color: var(--nfs-blue);
}

.footer-office-info strong {
    display: block;
    color: var(--gray-200);
    font-size: var(--text-md);
    margin-bottom: 4px;
}

.footer-office-info p {
    color: var(--gray-300);
    font-size: var(--text-base);
    margin: 0 0 4px 0;
}

.footer-office-info span {
    color: var(--gray-500);
    font-size: var(--text-xs);
}

/* === Footer CTA — единый блок === */
.footer-cta {
    background: var(--gradient-brand);
    border-radius: 0;
    padding: 3.5rem 2rem;
    text-align: center;
}

.footer-cta-content {
    max-width: 640px;
    margin: 0 auto;
}

.footer-cta h3 {
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: white;
    margin-bottom: 0.75rem;
}

.footer-cta p {
    font-size: var(--text-md);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.footer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    background: white;
    color: var(--gray-900);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-footer-cta:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--gray-900);
}

.btn-footer-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-footer-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.footer-cta-note {
    font-size: var(--text-sm) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin-top: 1rem !important;
    margin-bottom: 0 !important;
}

/* === Footer Bottom === */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    font-size: var(--text-base);
    color: var(--gray-500);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin-top: 2rem;
}

.footer-bottom p { margin: 0; }

.footer-legal-links,
.footer-bottom-links {
    display: flex;
    gap: 24px;
}

.footer-legal-links a,
.footer-bottom-links a {
    color: var(--gray-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-legal-links a:hover,
.footer-bottom-links a:hover {
    color: white;
}

/* === Responsive === */
@media (max-width: 1200px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
    .footer-cta { padding: 2.5rem 1.5rem; }
    .footer-cta h3 { font-size: var(--text-xl); }
    .footer-cta-buttons { flex-direction: column; align-items: center; }
    .btn-footer-cta, .btn-footer-cta-secondary { width: 100%; justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
    .footer-legal-links, .footer-bottom-links { flex-direction: column; gap: 12px; }
}

@media (max-width: 576px) {
    .site-footer { padding: 48px 0 0; }
    .footer-brands-grid { grid-template-columns: 1fr; }
}

/* === css/nfs-footer-glow.css === */
/* NFS Footer — визуально как Footer2 (светлый, 4 колонки, outline-иконки, stores) */

.nfs-footer {
  --nfs-footer-fg: #0f172a;
  --nfs-footer-muted: #64748b;
  --nfs-footer-border: rgba(15, 23, 42, 0.1);
  --nfs-footer-blue: var(--nfs-blue, #1a5fd9);

  position: relative;
  z-index: 10;
  width: 100%;
  margin-top: 2.5rem;
  padding: 0;
  color: var(--nfs-footer-fg);
  font-family: var(--nfs-ff, 'Montserrat', system-ui, sans-serif);
  background: rgba(248, 250, 252, 0.6);
  border-top: none;
}

/* Сброс legacy shimmer-полоски из nfs-sections.css */
.nfs-footer::before,
.main-footer.nfs-footer::before {
  content: none !important;
  display: none !important;
  animation: none !important;
  height: 0 !important;
  background: none !important;
}

.main-footer.nfs-footer {
  background: rgba(248, 250, 252, 0.6);
  color: var(--nfs-footer-fg);
}

.nfs-footer__inner {
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1024px) {
  .nfs-footer__inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Логотип */
.nfs-footer__brand {
  padding-top: 2rem;
  padding-bottom: 0.25rem;
}

.nfs-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--nfs-footer-fg);
  min-width: 0;
}

.nfs-footer__logo .nfs-logo-word {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--nfs-footer-fg);
  white-space: nowrap;
}

/* Те же полосы и shimmer, что в хедере (nfs-design-system.css) — только масштаб */
.nfs-footer__logo .nfs-logo-stripes {
  height: 28px;
  flex-shrink: 0;
}

.nfs-footer__logo .nfs-logo-stripes span {
  width: 5px;
}

.nfs-footer__logo .nfs-logo-stripes span:nth-child(1) {
  height: 28px;
}

.nfs-footer__logo .nfs-logo-stripes span:nth-child(2) {
  height: 22px;
}

.nfs-footer__logo .nfs-logo-stripes span:nth-child(3) {
  height: 15px;
}

@media (prefers-reduced-motion: reduce) {
  .nfs-footer__logo .nfs-logo-stripes span {
    animation: none !important;
  }
}

/* 4 колонки — как Footer2 grid-cols-2 md:grid-cols-4 gap-8 py-8 */
.nfs-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  padding: 2rem 0;
}

@media (min-width: 768px) {
  .nfs-footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.nfs-footer__heading {
  margin: 0 0 1rem;
  font-size: 0.75rem; /* text-xs */
  font-weight: 600;
  line-height: 1.25;
  color: var(--nfs-footer-fg);
}

.nfs-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 */
}

.nfs-footer__links a {
  display: inline-block;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.4;
  color: var(--nfs-footer-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nfs-footer__links a:hover {
  color: var(--nfs-footer-fg);
}

.nfs-footer__muted {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--nfs-footer-muted);
  font-style: normal;
}

.nfs-footer__rule {
  height: 1px;
  background: var(--nfs-footer-border);
}

/* Соцсети outline + stores — py-5 flex justify-between */
.nfs-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
}

.nfs-footer__social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nfs-footer__soc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--nfs-footer-border);
  background: transparent;
  color: var(--nfs-footer-muted);
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nfs-footer__soc:hover {
  color: var(--nfs-footer-fg);
  border-color: rgba(15, 23, 42, 0.22);
  background: rgba(255, 255, 255, 0.7);
}

.nfs-footer__soc .nfs-social-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.nfs-footer__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.nfs-footer__store {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem 0.4rem 0.7rem;
  border-radius: 0.5rem;
  background: #0f172a;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.nfs-footer__store:hover {
  opacity: 0.9;
  color: #fff;
}

.nfs-footer__store-icon {
  flex-shrink: 0;
}

.nfs-footer__store-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.nfs-footer__store-eyebrow {
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}

.nfs-footer__store-name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.nfs-footer__copy {
  padding: 1rem 0;
  text-align: center;
}

.nfs-footer__copy p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--nfs-footer-muted);
}

.nfs-footer .nfs-back-to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--nfs-footer-border);
  border-radius: 999px;
  background: #fff;
  color: var(--nfs-footer-fg);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  cursor: pointer;
}

.nfs-footer .nfs-back-to-top:hover {
  color: var(--nfs-footer-blue);
  border-color: rgba(26, 95, 217, 0.35);
}

@media (max-width: 640px) {
  .nfs-footer__bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nfs-footer__stores {
    width: 100%;
  }

  .nfs-footer__store {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* === css/nfs-ai-assistant.css === */
:root {
    --nfs-ai-assistant-panel-width: clamp(388px, 31vw, 484px);
    --nfs-ai-assistant-gap: var(--space-4, 16px);
    --nfs-ai-assistant-top: 82px;
    --nfs-ai-assistant-bottom: var(--space-4, 16px);
    --nfs-ai-assistant-radius: var(--nfs-rl, 14px);
    --nfs-ai-assistant-border: var(--nfs-b2, rgba(58, 66, 96, 0.12));
    --nfs-ai-assistant-surface: var(--nfs-surface, #ffffff);
    --nfs-ai-assistant-surface-muted: var(--nfs-ch1, #f4f6fa);
    --nfs-ai-assistant-text: var(--nfs-t1, #0d1117);
    --nfs-ai-assistant-text-muted: var(--nfs-t3, #5a6480);
    --nfs-ai-assistant-blue: var(--nfs-blue, #1a5fd9);
    --nfs-ai-assistant-blue-soft: var(--nfs-blue-light, rgba(26, 95, 217, 0.08));
    --nfs-ai-assistant-green: var(--nfs-green, #14a34a);
    --nfs-ai-assistant-green-dark: var(--nfs-green-dark, #0a6a30);
}

/* Базовая типографика и цвета — как в остальном приложении */
.nfs-ai-assistant-widget {
    font-family: var(--nfs-ff, var(--font-sans, 'Montserrat', sans-serif));
    color: var(--nfs-ai-assistant-text);
    -webkit-font-smoothing: antialiased;
}

body.nfs-ai-assistant-open {
    overflow-x: hidden;
}

body.nfs-ai-assistant-scroll-locked {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
}

/* При вводе в опрос на мобильном не фиксируем body — иначе клавиатура гаснет */
body.nfs-ai-assistant-survey-input-focused.nfs-ai-assistant-scroll-locked {
    position: static;
    inset: auto;
    width: auto;
    overflow-x: hidden;
}

body.nfs-ai-assistant-lightbox-open {
    overflow: hidden;
}

.layout-root {
    transition: width 260ms ease, transform 260ms ease;
}

.nfs-ai-assistant-widget__fab,
.nfs-ai-assistant-widget__panel,
.nfs-ai-assistant-widget__backdrop {
    position: fixed;
    z-index: 1030;
}

.nfs-ai-assistant-widget__fab {
    right: var(--nfs-ai-assistant-gap);
    bottom: var(--nfs-ai-assistant-bottom);
    width: 64px;
    height: 64px;
    border: none;
    border-radius: var(--radius-full, 9999px);
    background: var(--nfs-blue-g, linear-gradient(150deg, #3b7fff 0%, #1a5fd9 50%, #1248b0 100%));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 8px 24px rgba(26, 95, 217, 0.32),
        0 0 0 0.5px rgba(26, 95, 217, 0.4);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    opacity: 1;
    visibility: visible;
    cursor: pointer;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        opacity 180ms ease,
        visibility 0s linear 0s;
    overflow: hidden;
}

.nfs-ai-assistant-widget--drawer-hidden .nfs-ai-assistant-widget__fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(14px) scale(0.92);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        opacity 180ms ease,
        visibility 0s linear 180ms;
}

.nfs-ai-assistant-widget__fab:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 0 0 1px rgba(59, 127, 255, 0.5),
        0 0 14px rgba(59, 127, 255, 0.24),
        0 12px 28px rgba(26, 95, 217, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.nfs-ai-assistant-widget__fab:focus-visible,
.nfs-ai-assistant-widget__topbar-link:focus-visible,
.nfs-ai-assistant-widget__topbar-title:focus-visible,
.nfs-ai-assistant-widget__topbar-action:focus-visible,
.nfs-ai-assistant-widget__topbar-icon:focus-visible,
.nfs-ai-assistant-widget__sidebar-create-btn:focus-visible,
.nfs-ai-assistant-widget__search-field input:focus-visible {
    outline: 2px solid var(--nfs-blue-glow, rgba(26, 95, 217, 0.36));
    outline-offset: 3px;
}

.nfs-ai-assistant-widget__fab-ring {
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.22);
    pointer-events: none;
}

.nfs-ai-assistant-widget__fab-icon {
    display: inline-flex;
    width: 26px;
    height: 26px;
}

.nfs-ai-assistant-widget__fab-icon svg,
.nfs-ai-assistant-widget__topbar-link svg,
.nfs-ai-assistant-widget__topbar-action svg,
.nfs-ai-assistant-widget__topbar-icon svg,
.nfs-ai-assistant-widget__sidebar-create-btn svg,
.nfs-ai-assistant-widget__search-icon svg,
.nfs-ai-assistant-widget__composer-btn svg,
.nfs-ai-assistant-widget__send-btn svg,
.nfs-ai-assistant-widget__chat-icon svg,
.nfs-ai-assistant-widget__chat-action svg {
    width: 100%;
    height: 100%;
}

.nfs-ai-assistant-widget__backdrop {
    inset: 0;
    background: rgba(13, 17, 23, 0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.nfs-ai-assistant-widget__panel {
    top: var(--nfs-ai-assistant-top);
    right: var(--nfs-ai-assistant-gap);
    bottom: var(--nfs-ai-assistant-bottom);
    width: var(--nfs-ai-assistant-panel-width);
    max-width: calc(100vw - (var(--nfs-ai-assistant-gap) * 2));
    transform: translateX(calc(100% + 28px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 260ms ease,
        opacity 220ms ease,
        visibility 220ms ease,
        inset 260ms ease,
        width 260ms ease;
}

.nfs-ai-assistant-widget__panel-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--nfs-ai-assistant-radius);
    background: linear-gradient(180deg, var(--nfs-surface, #ffffff) 0%, var(--nfs-home-section-bg, #f2f5fc) 100%);
    border: 0.5px solid var(--nfs-ai-assistant-border);
    box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04));
    overflow: hidden;
}

.nfs-ai-assistant-widget__panel-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 8% 0%, rgba(26, 95, 217, 0.05), transparent 32%),
        radial-gradient(circle at 92% 8%, rgba(59, 127, 255, 0.04), transparent 28%);
    pointer-events: none;
}

.nfs-ai-assistant-widget__main,
.nfs-ai-assistant-widget__sidebar {
    position: relative;
    z-index: 1;
}

.nfs-ai-assistant-widget__main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.nfs-ai-assistant-widget__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: var(--space-3, 12px) var(--space-4, 14px);
    border-bottom: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.nfs-ai-assistant-widget__topbar-left,
.nfs-ai-assistant-widget__topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.nfs-ai-assistant-widget__topbar-left {
    flex: 1;
}

.nfs-ai-assistant-widget__topbar-right {
    flex-shrink: 0;
}

.nfs-ai-assistant-widget__topbar-link,
.nfs-ai-assistant-widget__topbar-title,
.nfs-ai-assistant-widget__topbar-action,
.nfs-ai-assistant-widget__topbar-icon,
.nfs-ai-assistant-widget__sidebar-create-btn,
.nfs-ai-assistant-widget__chat-action,
.nfs-ai-assistant-widget__composer-btn,
.nfs-ai-assistant-widget__send-btn {
    border: none;
    font: inherit;
}

.nfs-ai-assistant-widget__topbar-link,
.nfs-ai-assistant-widget__topbar-title,
.nfs-ai-assistant-widget__topbar-action,
.nfs-ai-assistant-widget__topbar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border-radius: 16px;
    color: var(--nfs-ai-assistant-text);
    transition:
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.nfs-ai-assistant-widget__topbar-link {
    padding: 0 2px 0 0;
    background: transparent;
    color: var(--nfs-t4, #9aa0b8);
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-weight-bold, 700);
    flex-shrink: 0;
}

.nfs-ai-assistant-widget__topbar-link:hover {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-ai-assistant-widget__topbar-link svg {
    width: 18px;
    height: 18px;
}

.nfs-ai-assistant-widget__topbar-title,
.nfs-ai-assistant-widget__topbar-action,
.nfs-ai-assistant-widget__topbar-icon {
    background: var(--nfs-ai-assistant-surface-muted);
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        var(--shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, 0.04));
}

.nfs-ai-assistant-widget__topbar-title {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    padding: 0 14px;
    font-size: var(--text-base, 14px);
    font-weight: var(--font-weight-extrabold, 800);
    color: var(--nfs-ai-assistant-text);
    background: var(--nfs-surface, #ffffff);
    border-color: var(--nfs-b2, rgba(58, 66, 96, 0.12));
}

.nfs-ai-assistant-widget__topbar-title span {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfs-ai-assistant-widget__topbar-title:hover,
.nfs-ai-assistant-widget__topbar-action:hover,
.nfs-ai-assistant-widget__topbar-icon:hover {
    transform: translateY(-1px);
    border-color: rgba(26, 95, 217, 0.28);
    box-shadow:
        0 0 0 1px rgba(26, 95, 217, 0.12),
        0 2px 8px rgba(26, 95, 217, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.95) inset;
}

.nfs-ai-assistant-widget__topbar-action {
    padding: 0 12px;
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-weight-bold, 700);
    color: var(--nfs-t2, #2a3450);
    white-space: nowrap;
    flex-shrink: 0;
}

.nfs-ai-assistant-widget__topbar-action-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.nfs-ai-assistant-widget__topbar-icon {
    width: 42px;
    min-width: 42px;
}

.nfs-ai-assistant-widget__topbar-icon svg {
    width: 16px;
    height: 16px;
}

.nfs-ai-assistant-widget__body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-5, 18px) var(--space-4, 16px) var(--space-4, 16px);
    background: var(--nfs-home-section-bg, #f2f5fc);
    scrollbar-width: thin;
    scrollbar-color: var(--nfs-ch3, #b8c0d4) transparent;
}

.nfs-ai-assistant-widget__body::-webkit-scrollbar,
.nfs-ai-assistant-widget__sidebar-groups::-webkit-scrollbar,
 .nfs-ai-assistant-widget__composer-field textarea::-webkit-scrollbar,
 .nfs-ai-assistant-widget__pending-attachments::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.nfs-ai-assistant-widget__body::-webkit-scrollbar-track,
.nfs-ai-assistant-widget__sidebar-groups::-webkit-scrollbar-track,
 .nfs-ai-assistant-widget__composer-field textarea::-webkit-scrollbar-track,
 .nfs-ai-assistant-widget__pending-attachments::-webkit-scrollbar-track {
    background: transparent;
}

.nfs-ai-assistant-widget__body::-webkit-scrollbar-thumb,
.nfs-ai-assistant-widget__sidebar-groups::-webkit-scrollbar-thumb,
 .nfs-ai-assistant-widget__composer-field textarea::-webkit-scrollbar-thumb,
 .nfs-ai-assistant-widget__pending-attachments::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(180, 192, 212, 0.9);
}

.nfs-ai-assistant-widget__messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nfs-ai-assistant-widget__guest-gate {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: var(--space-5, 20px);
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    border-radius: var(--nfs-rl, 14px);
    background: var(--nfs-surface, #ffffff);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07));
}

.nfs-ai-assistant-widget__guest-gate-title {
    margin: 0;
    font-size: var(--text-xl, 20px);
    font-weight: var(--font-weight-bold, 700);
    line-height: var(--leading-tight, 1.2);
    color: var(--nfs-t1, #0d1117);
}

.nfs-ai-assistant-widget__guest-gate-text {
    margin: 0;
    font-size: var(--text-base, 14px);
    color: var(--nfs-t3, #5a6480);
    line-height: var(--leading-normal, 1.5);
}

.nfs-ai-assistant-widget__guest-gate-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.nfs-ai-assistant-widget__guest-gate-btn {
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    background: linear-gradient(150deg, var(--nfs-white, #ffffff) 0%, var(--nfs-ch1, #f4f6fa) 100%);
    color: var(--nfs-t2, #2a3450);
    border-radius: var(--radius-md, 8px);
    min-height: 38px;
    padding: 8px 16px;
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-weight-bold, 700);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease), background var(--transition-fast, 150ms ease);
}

.nfs-ai-assistant-widget__guest-gate-btn--primary {
    border-color: rgba(26, 95, 217, 0.4);
    background: var(--nfs-blue-g, linear-gradient(150deg, #3b7fff 0%, #1a5fd9 50%, #1248b0 100%));
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 10px rgba(26, 95, 217, 0.28),
        0 0 0 0.5px rgba(26, 95, 217, 0.4);
}

.nfs-ai-assistant-widget__guest-gate-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.07));
}

.nfs-ai-assistant-widget__guest-gate-btn--primary:hover {
    box-shadow:
        0 0 0 1px rgba(59, 127, 255, 0.5),
        0 0 14px rgba(59, 127, 255, 0.24),
        0 3px 12px rgba(26, 95, 217, 0.3);
}

.nfs-ai-assistant-widget__guest-gate-btn:focus-visible {
    outline: 2px solid var(--nfs-blue-glow, rgba(26, 95, 217, 0.36));
    outline-offset: 2px;
}

.nfs-ai-assistant-widget--guest-locked .nfs-ai-assistant-widget__topbar {
    display: none;
}

.nfs-ai-assistant-widget--guest-locked .nfs-ai-assistant-widget__panel-shell {
    border: none;
}

.nfs-ai-assistant-widget--guest-locked .nfs-ai-assistant-widget__body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.nfs-ai-assistant-widget--guest-locked .nfs-ai-assistant-widget__guest-gate {
    width: min(100%, 430px);
}

.nfs-ai-assistant-widget__message {
    display: flex;
    width: 100%;
}

.nfs-ai-assistant-widget__message-content {
    flex: 1;
    min-width: 0;
    max-width: min(100%, 820px);
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.nfs-ai-assistant-widget__message--user {
    justify-content: flex-end;
}

.nfs-ai-assistant-widget__message--user .nfs-ai-assistant-widget__message-content,
.nfs-ai-assistant-widget__message--assistant:not(.nfs-ai-assistant-widget__message--intro) .nfs-ai-assistant-widget__message-content {
    flex: 0 1 min(100%, 760px);
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, 0.98);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.nfs-ai-assistant-widget__message--user .nfs-ai-assistant-widget__message-content {
    border-color: rgba(26, 95, 217, 0.22);
    border-bottom-right-radius: var(--radius-sm, 6px);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, var(--nfs-blue-light, rgba(26, 95, 217, 0.08)) 100%);
}

.nfs-ai-assistant-widget__message--assistant:not(.nfs-ai-assistant-widget__message--intro) .nfs-ai-assistant-widget__message-content {
    border-bottom-left-radius: 6px;
}

.nfs-ai-assistant-widget__message--progress .nfs-ai-assistant-widget__message-content {
    border-color: rgba(191, 219, 254, 0.98);
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(239, 246, 255, 0.98) 100%);
}

.nfs-ai-assistant-widget__message-text {
    color: #334155;
    font-size: 14px;
    line-height: 1.6;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-user-select: text;
    user-select: text;
}

/* Текст сообщений и опроса можно выделять и копировать */
.nfs-ai-assistant-widget__messages,
.nfs-ai-assistant-widget__message-content,
.nfs-ai-assistant-widget__message-body,
.nfs-ai-assistant-widget__message-title,
.nfs-ai-assistant-widget__survey-title,
.nfs-ai-assistant-widget__survey-intro,
.nfs-ai-assistant-widget__survey-question-text,
.nfs-ai-assistant-widget__survey-note,
.nfs-ai-assistant-widget__conversation-state,
.nfs-ai-assistant-widget__progress-status {
    -webkit-user-select: text;
    user-select: text;
}

.nfs-ai-assistant-widget__survey-option,
.nfs-ai-assistant-widget__survey-action {
    -webkit-user-select: none;
    user-select: none;
}

.nfs-ai-assistant-widget__progress-status {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 700;
}

.nfs-ai-assistant-widget__progress-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.nfs-ai-assistant-widget__progress-bar {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(191, 219, 254, 0.5);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}

.nfs-ai-assistant-widget__progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--nfs-blue3, #3b7fff) 0%, var(--nfs-blue, #1a5fd9) 100%);
    transition: width 220ms ease;
}

.nfs-ai-assistant-widget__progress-percent {
    flex: 0 0 auto;
    min-width: 42px;
    color: var(--nfs-blue, #1a5fd9);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-align: right;
}

.nfs-ai-assistant-widget__message-text > :first-child {
    margin-top: 0;
}

.nfs-ai-assistant-widget__message-text > :last-child {
    margin-bottom: 0;
}

.nfs-ai-assistant-widget__message-text p,
.nfs-ai-assistant-widget__message-text ul,
.nfs-ai-assistant-widget__message-text ol,
.nfs-ai-assistant-widget__message-text blockquote,
.nfs-ai-assistant-widget__message-text pre,
.nfs-ai-assistant-widget__message-text .nfs-ai-assistant-widget__table-wrap,
.nfs-ai-assistant-widget__message-text .nfs-ai-assistant-widget__lot-cards--inline,
.nfs-ai-assistant-widget__message-text hr {
    margin: 0 0 12px;
}

.nfs-ai-assistant-widget__message-text > .nfs-ai-assistant-widget__lot-cards--inline:last-child {
    margin-bottom: 0;
}

.nfs-ai-assistant-widget__message-text strong {
    font-weight: 700;
    color: #0f172a;
}

.nfs-ai-assistant-widget__message-text em {
    font-style: italic;
}

.nfs-ai-assistant-widget__message-text del {
    text-decoration: line-through;
}

.nfs-ai-assistant-widget__message-text h1,
.nfs-ai-assistant-widget__message-text h2,
.nfs-ai-assistant-widget__message-text h3,
.nfs-ai-assistant-widget__message-text h4,
.nfs-ai-assistant-widget__message-text h5,
.nfs-ai-assistant-widget__message-text h6 {
    margin: 0 0 12px;
    color: #0f172a;
    line-height: 1.25;
    font-weight: 800;
}

.nfs-ai-assistant-widget__message-text h1 {
    font-size: 20px;
}

.nfs-ai-assistant-widget__message-text h2 {
    font-size: 18px;
}

.nfs-ai-assistant-widget__message-text h3,
.nfs-ai-assistant-widget__message-text h4,
.nfs-ai-assistant-widget__message-text h5,
.nfs-ai-assistant-widget__message-text h6 {
    font-size: 16px;
}

.nfs-ai-assistant-widget__message-text ul,
.nfs-ai-assistant-widget__message-text ol {
    padding-left: 20px;
}

.nfs-ai-assistant-widget__message-text li + li {
    margin-top: 6px;
}

.nfs-ai-assistant-widget__message-text blockquote {
    padding: 10px 12px;
    border-left: 3px solid rgba(59, 130, 246, 0.4);
    border-radius: 0 12px 12px 0;
    background: rgba(248, 250, 252, 0.94);
    color: #475569;
}

.nfs-ai-assistant-widget__message-text code {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.98);
    color: #0f172a;
    font-size: 13px;
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.nfs-ai-assistant-widget__message-text pre {
    overflow-x: auto;
    padding: 12px 14px;
    border: 1px solid rgba(203, 213, 225, 0.92);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.98);
}

.nfs-ai-assistant-widget__message-text pre code {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 12px;
    line-height: 1.7;
    white-space: pre;
}

.nfs-ai-assistant-widget__message-text a {
    color: var(--nfs-ai-assistant-blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.nfs-ai-assistant-widget__message-text hr {
    border: 0;
    border-top: 1px solid rgba(203, 213, 225, 0.96);
}

.nfs-ai-assistant-widget__table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(203, 213, 225, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 192, 212, 0.9) transparent;
}

.nfs-ai-assistant-widget__table-wrap::-webkit-scrollbar {
    height: 8px;
}

.nfs-ai-assistant-widget__table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.nfs-ai-assistant-widget__table-wrap::-webkit-scrollbar-thumb {
    background: rgba(180, 192, 212, 0.9);
    border-radius: 999px;
}

.nfs-ai-assistant-widget__table {
    width: 100%;
    min-width: 420px;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
    font-size: 13px;
    line-height: 1.5;
}

.nfs-ai-assistant-widget__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 11px 14px;
    border-bottom: 1px solid rgba(203, 213, 225, 0.96);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
    color: #0f172a;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
}

.nfs-ai-assistant-widget__table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.96);
    background: rgba(255, 255, 255, 0.98);
    vertical-align: top;
}

.nfs-ai-assistant-widget__table tbody tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.9);
}

.nfs-ai-assistant-widget__table tbody tr:last-child td {
    border-bottom: 0;
}

.nfs-ai-assistant-widget__table th[data-align="center"],
.nfs-ai-assistant-widget__table td[data-align="center"] {
    text-align: center;
}

.nfs-ai-assistant-widget__table th[data-align="right"],
.nfs-ai-assistant-widget__table td[data-align="right"] {
    text-align: right;
}

.nfs-ai-assistant-widget__table th[data-align="left"],
.nfs-ai-assistant-widget__table td[data-align="left"] {
    text-align: left;
}

.nfs-ai-assistant-widget__table th:first-child {
    border-top-left-radius: 16px;
}

.nfs-ai-assistant-widget__table th:last-child {
    border-top-right-radius: 16px;
}

.nfs-ai-assistant-widget__message-attachments {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 10px;
}

.nfs-ai-assistant-widget__message-attachments + .nfs-ai-assistant-widget__message-text {
    margin-top: 12px;
}

.nfs-ai-assistant-widget__message-text + .nfs-ai-assistant-widget__survey,
.nfs-ai-assistant-widget__message-attachments + .nfs-ai-assistant-widget__survey,
.nfs-ai-assistant-widget__message-attachments + .nfs-ai-assistant-widget__message-text + .nfs-ai-assistant-widget__survey {
    margin-top: 14px;
}

.nfs-ai-assistant-widget__message-text + .nfs-ai-assistant-widget__lot-cards,
.nfs-ai-assistant-widget__message-attachments + .nfs-ai-assistant-widget__lot-cards,
.nfs-ai-assistant-widget__message-attachments + .nfs-ai-assistant-widget__message-text + .nfs-ai-assistant-widget__lot-cards,
.nfs-ai-assistant-widget__survey + .nfs-ai-assistant-widget__lot-cards {
    margin-top: 14px;
}

.nfs-ai-assistant-widget__message-text + .nfs-ai-assistant-widget__lot-groups,
.nfs-ai-assistant-widget__message-attachments + .nfs-ai-assistant-widget__lot-groups,
.nfs-ai-assistant-widget__message-attachments + .nfs-ai-assistant-widget__message-text + .nfs-ai-assistant-widget__lot-groups,
.nfs-ai-assistant-widget__survey + .nfs-ai-assistant-widget__lot-groups {
    margin-top: 14px;
}

.nfs-ai-assistant-widget__survey {
    padding: 14px;
    border: 1px solid rgba(191, 219, 254, 0.98);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.98) 0%, rgba(239, 246, 255, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 14px 28px rgba(37, 99, 235, 0.08);
}

.nfs-ai-assistant-widget__survey--locked {
    border-color: rgba(203, 213, 225, 0.98);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98) 0%, rgba(241, 245, 249, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 10px 22px rgba(15, 23, 42, 0.05);
}

.nfs-ai-assistant-widget__survey--locked .nfs-ai-assistant-widget__survey-question {
    background: rgba(248, 250, 252, 0.94);
    box-shadow: none;
}

.nfs-ai-assistant-widget__survey-header {
    margin-bottom: 14px;
}

.nfs-ai-assistant-widget__survey-title {
    color: #0f172a;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 800;
}

.nfs-ai-assistant-widget__survey-intro {
    margin-top: 6px;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}

.nfs-ai-assistant-widget__survey-questions {
    display: grid;
    gap: 12px;
}

.nfs-ai-assistant-widget__survey-question {
    padding: 12px;
    border: 1px solid rgba(212, 221, 235, 0.98);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
}

.nfs-ai-assistant-widget__survey-question-label {
    color: var(--nfs-blue, #1a5fd9);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nfs-ai-assistant-widget__survey-question-text {
    margin-top: 6px;
    color: #0f172a;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 700;
}

.nfs-ai-assistant-widget__survey-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.nfs-ai-assistant-widget__survey-option {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex: 1 1 180px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid rgba(212, 221, 235, 0.98);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    color: #1e293b;
    text-align: left;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.nfs-ai-assistant-widget__survey-option:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(96, 165, 250, 0.8);
    box-shadow: 0 12px 22px rgba(37, 99, 235, 0.1);
}

.nfs-ai-assistant-widget__survey-option--active {
    border-color: rgba(37, 99, 235, 0.46);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98) 0%, rgba(219, 234, 254, 0.98) 100%);
    box-shadow: 0 14px 24px rgba(37, 99, 235, 0.12);
}

.nfs-ai-assistant-widget__survey-option-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.nfs-ai-assistant-widget__survey-option-label {
    color: #0f172a;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 800;
}

.nfs-ai-assistant-widget__survey-option-description {
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
}

.nfs-ai-assistant-widget__survey-option-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.12);
    color: var(--nfs-blue, #1a5fd9);
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
}

.nfs-ai-assistant-widget__survey-footer {
    margin-top: 14px;
}

.nfs-ai-assistant-widget__survey-note {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.nfs-ai-assistant-widget__survey-free-text {
    margin-top: 12px;
    position: relative;
    z-index: 1;
}

.nfs-ai-assistant-widget__survey-free-text-label {
    display: inline-flex;
    margin-bottom: 6px;
    color: #0f172a;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.nfs-ai-assistant-widget__survey-free-text-input {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    padding: 10px 12px;
    border: 1px solid rgba(212, 221, 235, 0.98);
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.96);
    color: #0f172a;
    font-size: 13px;
    line-height: 1.45;
    position: relative;
    z-index: 1;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.nfs-ai-assistant-widget__survey-free-text-input:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.5);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.6);
}

.nfs-ai-assistant-widget__survey-free-text-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.nfs-ai-assistant-widget__survey-free-text-hint {
    margin-top: 6px;
    color: #64748b;
    font-size: 11px;
    line-height: 1.45;
}

.nfs-ai-assistant-widget__survey-status {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(236, 253, 245, 0.98);
    color: #047857;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.nfs-ai-assistant-widget__survey-status--muted {
    background: rgba(226, 232, 240, 0.72);
    color: #334155;
}

.nfs-ai-assistant-widget__survey-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
}

.nfs-ai-assistant-widget__survey-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: 100%;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-align: center;
    transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.nfs-ai-assistant-widget__survey-action:hover:not(:disabled) {
    transform: translateY(-1px);
}

.nfs-ai-assistant-widget__survey-action--primary {
    background: var(--nfs-blue-g, linear-gradient(150deg, #3b7fff 0%, #1a5fd9 50%, #1248b0 100%));
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(37, 99, 235, 0.18);
}

.nfs-ai-assistant-widget__survey-action--ghost {
    border-color: rgba(212, 221, 235, 0.98);
    background: rgba(255, 255, 255, 0.98);
    color: #334155;
}

.nfs-ai-assistant-widget__survey-action:disabled,
.nfs-ai-assistant-widget__survey-option:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.nfs-ai-assistant-widget__lot-cards {
    display: grid;
    gap: 12px;
}

.nfs-ai-assistant-widget__lot-groups {
    display: grid;
    gap: 16px;
}

.nfs-ai-assistant-widget__lot-group {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid rgba(191, 219, 254, 0.98);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.98) 0%, rgba(239, 246, 255, 0.98) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 14px 28px rgba(37, 99, 235, 0.08);
}

.nfs-ai-assistant-widget__lot-group-header {
    display: grid;
    gap: 4px;
}

.nfs-ai-assistant-widget__lot-group-eyebrow {
    color: var(--nfs-blue, #1a5fd9);
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nfs-ai-assistant-widget__lot-group-title {
    color: #0f172a;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
}

.nfs-ai-assistant-widget__lot-group-meta {
    color: #475569;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 600;
}

.nfs-ai-assistant-widget__lot-cards--inline {
    width: 100%;
}

.nfs-ai-assistant-widget__lot-card {
    display: grid;
    grid-template-columns: minmax(0, 138px) minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(203, 213, 225, 0.96);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.98) 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.nfs-ai-assistant-widget__lot-card--loading {
    border-style: dashed;
}

.nfs-ai-assistant-widget__lot-gallery {
    position: relative;
    min-width: 0;
}

.nfs-ai-assistant-widget__lot-gallery-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid rgba(212, 221, 235, 0.98);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(241, 245, 249, 0.92);
    cursor: pointer;
}

.nfs-ai-assistant-widget__lot-gallery-stage--empty {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    cursor: default;
}

.nfs-ai-assistant-widget__lot-gallery-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.nfs-ai-assistant-widget__lot-gallery-stage:hover img {
    transform: scale(1.03);
}

.nfs-ai-assistant-widget__lot-carousel-control {
    position: absolute;
    top: calc(50% - 18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.2);
    cursor: pointer;
    transition: transform 160ms ease, background-color 160ms ease;
}

.nfs-ai-assistant-widget__lot-carousel-control:hover {
    transform: scale(1.04);
    background: rgba(15, 23, 42, 0.84);
}

.nfs-ai-assistant-widget__lot-carousel-control--prev {
    left: 8px;
}

.nfs-ai-assistant-widget__lot-carousel-control--next {
    right: 8px;
}

.nfs-ai-assistant-widget__lot-carousel-control svg {
    width: 18px;
    height: 18px;
}

.nfs-ai-assistant-widget__lot-carousel-counter {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.72);
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
}

.nfs-ai-assistant-widget__lot-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.nfs-ai-assistant-widget__lot-card-brand {
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-ai-assistant-widget__lot-card-title {
    color: #0f172a;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 800;
}

.nfs-ai-assistant-widget__lot-card-meta {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
}

.nfs-ai-assistant-widget__lot-card-price {
    color: #111827;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}

.nfs-ai-assistant-widget__lot-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    width: fit-content;
    padding: 0 14px;
    border-radius: 12px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--nfs-blue, #1a5fd9);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 160ms ease, color 160ms ease;
}

.nfs-ai-assistant-widget__lot-card-link:hover {
    background: rgba(37, 99, 235, 0.16);
    color: #1e40af;
}

.nfs-ai-assistant-widget__attachment-preview {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid rgba(212, 221, 235, 0.98);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(241, 245, 249, 0.9);
    cursor: pointer;
}

.nfs-ai-assistant-widget__attachment-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 180ms ease;
}

.nfs-ai-assistant-widget__attachment-preview:hover img {
    transform: scale(1.03);
}

.nfs-ai-assistant-widget__conversation-state {
    padding: 18px;
    border: 1px dashed rgba(203, 213, 225, 0.96);
    border-radius: 18px;
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
    background: rgba(255, 255, 255, 0.88);
}

.nfs-ai-assistant-widget__message-eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: var(--font-weight-extrabold, 800);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nfs-blue, #1a5fd9);
    display: flex;
    align-items: center;
    gap: 8px;
}

.nfs-ai-assistant-widget__message-eyebrow::before {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, var(--nfs-blue3, #3b7fff), transparent);
}

.nfs-ai-assistant-widget__message-title {
    margin: 0 0 12px;
    font-size: clamp(20px, 2.5vw, 22px);
    line-height: var(--leading-tight, 1.2);
    font-weight: var(--font-weight-extrabold, 800);
    color: var(--nfs-ai-assistant-text);
    letter-spacing: -0.01em;
}

.nfs-ai-assistant-widget__message--intro .nfs-ai-assistant-widget__message-title::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    margin-top: 12px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--nfs-blue, #1a5fd9) 0% 33%, var(--nfs-red, #c92222) 33% 66%, var(--nfs-ch3, #b8c0d4) 66%);
    background-size: 300% 100%;
    animation: nfs-shimmer 2.5s linear infinite;
}

.nfs-ai-assistant-widget__message-body {
    color: #334155;
    font-size: 14px;
    line-height: 1.68;
}

.nfs-ai-assistant-widget__message-body p {
    margin: 0 0 12px;
}

.nfs-ai-assistant-widget__message-body p:last-child {
    margin-bottom: 0;
}

.nfs-ai-assistant-widget__message-body ul {
    margin: 0 0 14px;
    padding-left: 22px;
}

.nfs-ai-assistant-widget__message-body li {
    margin-bottom: 8px;
}

.nfs-ai-assistant-widget__message-body strong {
    color: var(--nfs-ai-assistant-text);
}

.nfs-ai-assistant-widget__message-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.nfs-ai-assistant-widget__message-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: var(--radius-full, 9999px);
    border: 0.5px solid rgba(26, 95, 217, 0.18);
    background: var(--nfs-surface, #ffffff);
    color: var(--nfs-t2, #2a3450);
    font-size: var(--text-sm, 13px);
    font-weight: var(--font-weight-bold, 700);
    box-shadow: var(--shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, 0.04));
    transition: border-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.nfs-ai-assistant-widget__message-chip:hover {
    border-color: rgba(26, 95, 217, 0.32);
    color: var(--nfs-blue, #1a5fd9);
    box-shadow: 0 0 0 1px rgba(26, 95, 217, 0.12);
}

.nfs-ai-assistant-widget__composer {
    padding: var(--space-3, 12px) var(--space-4, 14px) var(--space-4, 14px);
    border-top: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    background: var(--nfs-surface, #ffffff);
}

.nfs-ai-assistant-widget__composer-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.nfs-ai-assistant-widget__composer-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.nfs-ai-assistant-widget__composer-btn,
.nfs-ai-assistant-widget__send-btn {
    width: 50px;
    height: 50px;
    min-width: 50px;
    flex-shrink: 0;
    border-radius: var(--radius-lg, 12px);
    background: var(--nfs-ai-assistant-surface-muted);
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    color: var(--nfs-t2, #2a3450);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        var(--shadow-xs, 0 1px 2px 0 rgba(0, 0, 0, 0.04));
    transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease);
}

.nfs-ai-assistant-widget__composer-btn:hover:not(:disabled) {
    border-color: rgba(26, 95, 217, 0.28);
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-ai-assistant-widget__send-btn {
    background: var(--nfs-blue-g, linear-gradient(150deg, #3b7fff 0%, #1a5fd9 50%, #1248b0 100%));
    border-color: transparent;
    color: #ffffff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 8px 20px rgba(26, 95, 217, 0.24),
        0 0 0 0.5px rgba(26, 95, 217, 0.4);
}

.nfs-ai-assistant-widget__send-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(59, 127, 255, 0.5),
        0 0 14px rgba(59, 127, 255, 0.24),
        0 10px 22px rgba(26, 95, 217, 0.3);
}

.nfs-ai-assistant-widget__composer-btn svg,
.nfs-ai-assistant-widget__send-btn svg {
    width: 19px;
    height: 19px;
}

.nfs-ai-assistant-widget__composer-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
}

.nfs-ai-assistant-widget__pending-attachments {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 192, 212, 0.9) transparent;
}

.nfs-ai-assistant-widget__pending-card {
    position: relative;
    display: flex;
    flex: 0 0 132px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 132px;
    padding: 8px;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.98);
}

.nfs-ai-assistant-widget__pending-card .nfs-ai-assistant-widget__attachment-preview {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
}

.nfs-ai-assistant-widget__pending-meta {
    min-width: 0;
}

.nfs-ai-assistant-widget__pending-name {
    color: #334155;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nfs-ai-assistant-widget__pending-size {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.2;
}

.nfs-ai-assistant-widget__pending-remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(248, 250, 252, 0.96);
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.nfs-ai-assistant-widget__pending-remove svg {
    width: 14px;
    height: 14px;
}

.nfs-ai-assistant-widget__pending-remove:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.nfs-ai-assistant-widget__composer-field textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    max-height: 156px;
    padding: 12px 14px;
    resize: none;
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    border-radius: var(--radius-lg, 12px);
    background: var(--nfs-surface, #ffffff);
    color: var(--nfs-t2, #2a3450);
    font-family: inherit;
    font-size: var(--text-base, 14px);
    line-height: 1.45;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    scrollbar-width: thin;
    scrollbar-color: var(--nfs-ch3, #b8c0d4) transparent;
    overflow-y: hidden;
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.nfs-ai-assistant-widget__composer-field textarea:focus {
    outline: none;
    border-color: rgba(26, 95, 217, 0.4);
    box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, 0.22));
}

.nfs-ai-assistant-widget__composer-field textarea::placeholder {
    color: var(--nfs-t4, #9aa0b8);
}

.nfs-ai-assistant-widget__ghost-btn:disabled,
.nfs-ai-assistant-widget__composer-btn:disabled,
.nfs-ai-assistant-widget__send-btn:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.nfs-ai-assistant-widget__sidebar {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(255, 255, 255, 0.995);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-12px);
    transition:
        opacity 200ms ease,
        visibility 200ms ease,
        transform 200ms ease;
}

.nfs-ai-assistant-widget--sidebar-open .nfs-ai-assistant-widget__sidebar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.nfs-ai-assistant-widget--sidebar-open .nfs-ai-assistant-widget__main {
    visibility: hidden;
    pointer-events: none;
}

.nfs-ai-assistant-widget__sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
}

.nfs-ai-assistant-widget__sidebar-title {
    margin: 0;
    font-size: var(--text-xl, 20px);
    line-height: var(--leading-tight, 1.2);
    font-weight: var(--font-weight-bold, 700);
    color: var(--nfs-ai-assistant-text);
}

.nfs-ai-assistant-widget__sidebar-search {
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
}

.nfs-ai-assistant-widget__search-field {
    position: relative;
    display: block;
}

.nfs-ai-assistant-widget__search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 16px;
    height: 16px;
    color: var(--nfs-t4, #9aa0b8);
    transform: translateY(-50%);
}

.nfs-ai-assistant-widget__search-field input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 42px;
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    border-radius: var(--radius-lg, 12px);
    background: var(--nfs-surface, #ffffff);
    color: var(--nfs-t2, #2a3450);
    font-size: var(--text-base, 14px);
    line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.nfs-ai-assistant-widget__search-field input:focus {
    outline: none;
    border-color: rgba(26, 95, 217, 0.4);
    box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, 0.22));
}

.nfs-ai-assistant-widget__search-field input::placeholder {
    color: var(--nfs-t4, #9aa0b8);
}

.nfs-ai-assistant-widget__sidebar-create {
    padding: 14px 16px;
}

.nfs-ai-assistant-widget__sidebar-create-btn {
    width: 100%;
    min-height: 48px;
    border-radius: var(--radius-lg, 12px);
    background: var(--nfs-blue-g, linear-gradient(150deg, #3b7fff 0%, #1a5fd9 50%, #1248b0 100%));
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: var(--text-base, 14px);
    font-weight: var(--font-weight-extrabold, 800);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 8px 20px rgba(26, 95, 217, 0.22);
    transition: transform var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.nfs-ai-assistant-widget__sidebar-create-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(59, 127, 255, 0.5),
        0 0 14px rgba(59, 127, 255, 0.24),
        0 10px 22px rgba(26, 95, 217, 0.28);
}

.nfs-ai-assistant-widget__sidebar-create-btn svg {
    width: 18px;
    height: 18px;
}

.nfs-ai-assistant-widget__sidebar-groups {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 2px 10px 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(180, 192, 212, 0.9) transparent;
}

.nfs-ai-assistant-widget__chat-group + .nfs-ai-assistant-widget__chat-group {
    margin-top: 2px;
}

.nfs-ai-assistant-widget__chat-group-title {
    padding: 12px 10px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: var(--font-weight-extrabold, 800);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nfs-t4, #9aa0b8);
}

.nfs-ai-assistant-widget__chat-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nfs-ai-assistant-widget__chat-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 12px;
    border-radius: 16px;
    color: #1f2937;
    background: transparent;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease;
    cursor: pointer;
}

.nfs-ai-assistant-widget__chat-item:hover {
    background: var(--nfs-ch1, #f4f6fa);
}

.nfs-ai-assistant-widget__chat-item--active {
    background: var(--nfs-blue-light, rgba(26, 95, 217, 0.08));
    box-shadow: inset 2px 0 0 var(--nfs-blue3, #3b7fff);
}

.nfs-ai-assistant-widget__chat-item--active .nfs-ai-assistant-widget__chat-title {
    color: var(--nfs-blue, #1a5fd9);
}

.nfs-ai-assistant-widget__chat-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #334155;
}

.nfs-ai-assistant-widget__chat-title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nfs-ai-assistant-widget__chat-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nfs-ai-assistant-widget__chat-subtitle {
    display: block;
    min-width: 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nfs-ai-assistant-widget__chat-actions {
    display: flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    opacity: 0;
    transition: opacity 180ms ease;
}

.nfs-ai-assistant-widget__chat-item:hover .nfs-ai-assistant-widget__chat-actions,
.nfs-ai-assistant-widget__chat-item--active .nfs-ai-assistant-widget__chat-actions {
    opacity: 1;
}

.nfs-ai-assistant-widget__chat-action {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: transparent;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        background-color 180ms ease,
        color 180ms ease;
}

.nfs-ai-assistant-widget__chat-action:hover {
    background: rgba(255, 255, 255, 0.9);
}

.nfs-ai-assistant-widget__chat-action--danger:hover {
    color: #dc2626;
}

.nfs-ai-assistant-widget__chat-action svg {
    width: 16px;
    height: 16px;
}

.nfs-ai-assistant-widget__sidebar-empty {
    padding: 24px 14px;
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
}

.nfs-ai-assistant-widget__lightbox {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.nfs-ai-assistant-widget__lightbox-stage {
    max-width: min(92vw, 1120px);
    max-height: calc(100vh - 96px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.nfs-ai-assistant-widget__lightbox-stage img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 160px);
    border-radius: 22px;
    box-shadow: 0 26px 72px rgba(15, 23, 42, 0.36);
}

.nfs-ai-assistant-widget__lightbox-caption {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.nfs-ai-assistant-widget__lightbox-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nfs-ai-assistant-widget__lightbox-close svg {
    width: 20px;
    height: 20px;
}

body.nfs-ai-assistant-open .nfs-ai-assistant-widget__panel {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.nfs-ai-assistant-open .nfs-ai-assistant-widget__fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px) scale(0.88);
}

body.nfs-ai-assistant-fullscreen .nfs-ai-assistant-widget__panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
}

body.nfs-ai-assistant-fullscreen .nfs-ai-assistant-widget__panel-shell {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.nfs-ai-assistant-fullscreen .nfs-ai-assistant-widget__backdrop {
    display: none;
}

@media (min-width: 1101px) {
    body.nfs-ai-assistant-open:not(.nfs-ai-assistant-fullscreen) .layout-root {
        width: calc(100% - var(--nfs-ai-assistant-panel-width));
    }

    body.nfs-ai-assistant-open:not(.nfs-ai-assistant-fullscreen) .nfs-ai-assistant-widget__panel {
        top: var(--nfs-ai-assistant-top);
        right: 0;
        bottom: 0;
        max-width: var(--nfs-ai-assistant-panel-width);
    }

    body.nfs-ai-assistant-open:not(.nfs-ai-assistant-fullscreen) .nfs-ai-assistant-widget__panel-shell {
        border: 0;
        border-left: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
        border-radius: 0;
        background: linear-gradient(180deg, var(--nfs-surface, #ffffff) 0%, var(--nfs-home-section-bg, #f2f5fc) 100%);
        box-shadow: none;
    }

    .nfs-ai-assistant-widget__backdrop {
        display: none;
    }
}
@media (max-width: 1320px) {
    .nfs-ai-assistant-widget__topbar-link span,
    .nfs-ai-assistant-widget__topbar-action span:last-child {
        display: none;
    }

    .nfs-ai-assistant-widget__topbar-link {
        padding-right: 0;
    }

    .nfs-ai-assistant-widget__topbar-action {
        width: 42px;
        min-width: 42px;
        padding: 0;
    }

    .nfs-ai-assistant-widget__topbar-title {
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (max-width: 1100px) {
    .nfs-ai-assistant-widget__backdrop[hidden] {
        display: none;
    }

    .nfs-ai-assistant-widget__backdrop:not([hidden]) {
        display: block;
    }

    .nfs-ai-assistant-widget__panel {
        width: min(100vw - 20px, 520px);
        right: 10px;
        top: var(--nfs-ai-assistant-top);
        bottom: 10px;
    }

    .nfs-ai-assistant-widget__fab {
        width: 62px;
        height: 62px;
        right: 14px;
        bottom: 14px;
    }

    body.nfs-ai-assistant-open .nfs-ai-assistant-widget__fab {
        transform: translateY(8px) scale(0.88);
    }

    body.nfs-ai-assistant-fullscreen .nfs-ai-assistant-widget__panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

@media (max-width: 767px) {
    :root {
        --nfs-ai-assistant-gap: 10px;
        --nfs-ai-assistant-bottom: 10px;
    }

    .nfs-ai-assistant-widget__panel {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
    }

    .nfs-ai-assistant-widget__panel-shell {
        border-radius: 0;
        box-shadow: none;
    }

    .nfs-ai-assistant-widget__topbar {
        padding: 10px 12px;
    }

    .nfs-ai-assistant-widget__topbar-left,
    .nfs-ai-assistant-widget__topbar-right {
        gap: 6px;
    }

    .nfs-ai-assistant-widget__topbar-link span {
        display: none;
    }

    .nfs-ai-assistant-widget__topbar-link {
        padding-right: 0;
    }

    .nfs-ai-assistant-widget__topbar-action span:last-child {
        display: none;
    }

    .nfs-ai-assistant-widget__topbar-action {
        display: none;
    }

    .nfs-ai-assistant-widget__topbar-title {
        padding: 0 10px;
        font-size: 13px;
    }

    .nfs-ai-assistant-widget__body {
        padding: 14px 14px 12px;
    }

    .nfs-ai-assistant-widget__message-title {
        font-size: 19px;
    }

    .nfs-ai-assistant-widget__survey {
        padding: 12px;
    }

    .nfs-ai-assistant-widget__survey-option {
        flex-basis: 100%;
    }

    .nfs-ai-assistant-widget__survey-free-text-input {
        font-size: 16px;
    }

    .nfs-ai-assistant-widget__survey-actions {
        flex-direction: column;
    }

    .nfs-ai-assistant-widget__survey-action {
        width: 100%;
    }

    .nfs-ai-assistant-widget__lot-card {
        grid-template-columns: 1fr;
    }

    .nfs-ai-assistant-widget__lot-gallery-stage {
        aspect-ratio: 16 / 11;
    }

    .nfs-ai-assistant-widget__lot-card-link {
        width: 100%;
    }

    .nfs-ai-assistant-widget__lot-group {
        padding: 12px;
        border-radius: 18px;
    }

    .nfs-ai-assistant-widget__lot-group-title {
        font-size: 16px;
    }

    .nfs-ai-assistant-widget__table {
        min-width: 360px;
        font-size: 12px;
    }

    .nfs-ai-assistant-widget__table thead th,
    .nfs-ai-assistant-widget__table tbody td {
        padding: 10px 12px;
    }

    .nfs-ai-assistant-widget__composer {
        gap: 8px;
        padding: 10px 12px 12px;
    }

    .nfs-ai-assistant-widget__composer-row {
        gap: 8px;
    }

    .nfs-ai-assistant-widget__composer-btn,
    .nfs-ai-assistant-widget__send-btn {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .nfs-ai-assistant-widget__composer-field textarea {
        min-height: 46px;
    }

    .nfs-ai-assistant-widget__pending-card {
        flex-basis: 116px;
        min-width: 116px;
    }

    .nfs-ai-assistant-widget__lightbox {
        padding: 16px;
    }

    .nfs-ai-assistant-widget__sidebar-header,
    .nfs-ai-assistant-widget__sidebar-search,
    .nfs-ai-assistant-widget__sidebar-create {
        padding-left: 14px;
        padding-right: 14px;
    }
}

/* === css/home.css === */
/**
 * @file: home.css
 * @description: Стили для главной страницы NFS AUTO на основе шаблона Main PRO
 * @created: 2025-01-28
 */

/* ===== Переменные: см. design-tokens.css ===== */
/* Алиасы совместимости (legacy-имена -> design-tokens) */
:root {
    --primary-blue: var(--nfs-blue);
    --primary-red: var(--nfs-red);
    --primary-purple: var(--nfs-purple);
    --primary-green: var(--nfs-green);
    --primary-yellow: var(--nfs-orange);
    --dark-blue: var(--nfs-blue-hover);
    --pink-50: #fdf2f8;
    --pink-100: #fce7f3;
    --gray-300: var(--gray-300);
    --gray-800: var(--gray-800);
}

* {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--gray-900);
    line-height: 1.6;
    overflow-x: hidden;
    /* Стык секций без «полос» другого оттенка */
    background: var(--nfs-home-section-bg);
}

/* ===== Анимации ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(-10px) translateX(-10px); }
    75% { transform: translateY(-15px) translateX(5px); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes breathing {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
}

.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

/* ===== Утилиты ===== */
.gradient-text {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple), var(--primary-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* .container — определён в design-tokens.css */

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, #DBEAFE, #F3E8FF);
    border-radius: 9999px;
    border: 1px solid #BFDBFE;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--gray-700);
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.section-description {
    font-size: 1.25rem;
    color: var(--gray-600);
    max-width: 42rem;
    margin: 0 auto;
}

/* ===== Header ===== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--gray-200);
}

.main-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow-lg);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 2rem;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.logo-bars {
    display: flex;
    gap: 2px;
}

.logo-bars .bar {
    width: 4px;
    height: 24px;
    border-radius: 2px;
}

.bar-1 { background: var(--gray-400); }
.bar-2 { background: var(--primary-blue); }
.bar-3 { background: var(--primary-red); }

.logo-text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
}

.header-search {
    flex: 1;
    max-width: 400px;
}

.search-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 1rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid var(--gray-200);
    border-radius: 9999px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-sparkles {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-blue);
    display: none;
    animation: pulse 2s infinite;
}

.search-input:focus ~ .search-sparkles {
    display: block;
}

.header-nav {
    display: flex;
    gap: 1.5rem;
}

.nav-link {
    color: var(--gray-600);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}

.nav-link:hover {
    color: var(--primary-blue);
}

/* Линия из центра — в одном стиле с вкладками входа (токены --nfs-text-hover-line-*) */
.nav-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: calc(100% - 8px);
    max-width: 100%;
    height: var(--nfs-text-hover-line-height, 3px);
    background: var(--nfs-text-hover-line-color, var(--nfs-blue-bright, #4f8cff));
    border-radius: 0;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform var(--nfs-text-hover-line-duration, 0.22s) var(--nfs-text-hover-line-ease, ease);
    pointer-events: none;
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
    transform: translateX(-50%) scaleX(1);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-btn:hover {
    background: var(--gray-100);
    color: var(--primary-blue);
}

/* Pill-стиль только вне модалки авторизации: кнопки .auth-submit-btn стилизует auth_modal.css */
.btn-primary:not(.auth-submit-btn) {
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--primary-blue), #3B82F6);
    color: white;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.3);
}

.btn-primary:not(.auth-submit-btn):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
}

.mobile-menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: var(--gray-600);
    cursor: pointer;
    font-size: 1.25rem;
}

/* ===== Hero Section ===== */
.hero-section {
    position: relative;
    min-height: 100vh;
    padding: 8rem 0 5rem;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background: var(--nfs-home-section-bg);
}

.hero-mesh {
    position: absolute;
    inset: 0;
    opacity: 0.2;
    background: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(239, 68, 68, 0.1) 0%, transparent 50%);
}

.hero-stripes {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
}

.hero-stripes::before,
.hero-stripes::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 8rem;
    background: linear-gradient(90deg, transparent, var(--gray-400), transparent);
    transform: rotate(12deg);
}

.hero-stripes::before {
    top: 25%;
    right: -25%;
    animation: slideInRight 1.5s ease-out;
}

.hero-stripes::after {
    top: 50%;
    right: -25%;
    background: linear-gradient(90deg, transparent, var(--primary-blue), transparent);
    animation: slideInRight 1.5s ease-out 0.2s both;
}

.hero-particles {
    position: absolute;
    inset: 0;
}

.hero-particles::before,
.hero-particles::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-blue);
    opacity: 0.2;
    animation: float 15s ease-in-out infinite;
}

.hero-particles::before {
    left: 20%;
    top: 30%;
    animation-delay: 0s;
}

.hero-particles::after {
    left: 80%;
    top: 70%;
    background: var(--primary-red);
    animation-delay: 2s;
}

.hero-left {
    animation: fadeInUp 0.8s ease-out;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #DBEAFE, #F3E8FF);
    border-radius: 9999px;
    border: 1px solid #BFDBFE;
    margin-bottom: 2rem;
    font-size: 0.875rem;
}

.hero-badge i {
    color: var(--primary-blue);
    animation: pulse 2s infinite;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem 0;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.stat-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-lg);
}

.stat-icon-blue {
    background: linear-gradient(135deg, var(--primary-blue), #3B82F6);
}

.stat-icon-red {
    background: linear-gradient(135deg, var(--primary-red), #F87171);
}

.stat-icon-yellow {
    background: linear-gradient(135deg, var(--primary-yellow), #FBBF24);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.quick-search-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-top: 2rem;
}

.quick-search-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.quick-search-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--gray-600), var(--primary-blue), var(--primary-red));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-lg);
}

.quick-search-filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.filter-select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-select:hover {
    border-color: var(--primary-blue);
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.btn-search-full {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--gray-600), var(--primary-blue), var(--primary-red));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-search-full::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.btn-search-full:hover::before {
    transform: translateX(100%);
}

.quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.quick-tag {
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, #DBEAFE, #F3E8FF);
    border: 1px solid #BFDBFE;
    border-radius: 9999px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-tag:hover {
    border-color: var(--primary-blue);
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

/* ===== Hero Section New (reference design) ===== */
.hero-section-new {
    padding-top: 20px;
    padding-bottom: 0;
    min-height: auto;
}

.hero-section-new .hero-gradient {
    background: var(--nfs-home-section-bg);
}

/* Лёгкая текстура без «розовых/красных» пятен — в тон общему фону главной */
.hero-section-new .hero-mesh {
    opacity: 0.35;
    background: radial-gradient(circle at 25% 25%, rgba(34, 83, 188, 0.07) 0%, transparent 50%),
                radial-gradient(circle at 75% 75%, rgba(34, 83, 188, 0.05) 0%, transparent 50%);
}

.hero-grid {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hero-col-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.hero-badge-new {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: var(--blue-50);
    color: var(--nfs-blue);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    border: 1px solid var(--blue-200);
    width: fit-content;
}

.hero-title-new {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    line-height: var(--leading-tight);
    margin: 0;
    letter-spacing: -0.02em;
}

@media (min-width: 768px) {
    .hero-title-new {
        font-size: 2.75rem;
    }
}

@media (min-width: 1200px) {
    .hero-title-new {
        font-size: 3rem;
    }
}

.hero-gradient-text {
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle-new {
    font-size: var(--text-lg);
    color: var(--gray-600);
    margin: 0;
    line-height: var(--leading-relaxed);
}

.hero-pink {
    color: #db2777 !important;
}

/* Сетка статистики — по ширине текстового блока, симметричные колонки */
.hero-stats-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: 100%;
}

.hero-stat-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    min-width: 0; /* позволяет карточке сжиматься в grid-ячейке */
}

/* На узких экранах — одна колонка */
@media (max-width: 479px) {
    .hero-stats-new {
        grid-template-columns: 1fr;
    }
}

.hero-stat-icon {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
}

.hero-stat-icon-indigo {
    background: #e0e7ff;
    color: #4f46e5;
}

.hero-stat-icon-red {
    background: #fee2e2;
    color: #dc2626;
}

.hero-stat-icon-amber {
    background: #fef3c7;
    color: #d97706;
}

.hero-stat-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
}

.hero-stat-label {
    font-size: 0.75rem;
    color: #64748b;
}

.hero-stat-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hero-star {
    color: #f59e0b;
}

/* === HERO: Акцент бренда === */
.hero-brand-accent {
    color: var(--nfs-blue, #1A5FD9);
    font-weight: 800;
}

/* === HERO: Блок преимуществ === */
.hero-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    width: 100%;
}

@media (max-width: 575px) {
    .hero-benefits {
        grid-template-columns: 1fr;
    }
}

.hero-benefit-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 0.75rem;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hero-benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(26, 95, 217, 0.12);
    border-color: rgba(26, 95, 217, 0.3);
}

.hero-benefit-icon {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    transition: transform 0.2s ease;
}

.hero-benefit-card:hover .hero-benefit-icon {
    transform: scale(1.1);
}

.hero-benefit-icon--ai {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
}

.hero-benefit-icon--encar {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.hero-benefit-icon--korea {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
}

.hero-benefit-icon--delivery {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
}

.hero-benefit-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.hero-benefit-text strong {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.hero-benefit-text span {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
}

/* === HERO: CTA блок === */
.hero-cta-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.5rem;
}

.hero-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

.hero-cta-btn--primary {
    background: linear-gradient(135deg, var(--nfs-blue, #1A5FD9) 0%, #2B6FE8 100%);
    color: #fff;
    box-shadow: 
        0 4px 14px rgba(26, 95, 217, 0.35),
        0 0 0 0 rgba(26, 95, 217, 0.4);
    animation: hero-cta-pulse 2s ease-in-out infinite;
}

.hero-cta-btn--primary:hover {
    background: linear-gradient(135deg, #2B6FE8 0%, #3B7FFF 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(26, 95, 217, 0.45),
        0 0 0 4px rgba(26, 95, 217, 0.15);
}

@keyframes hero-cta-pulse {
    0%, 100% {
        box-shadow: 
            0 4px 14px rgba(26, 95, 217, 0.35),
            0 0 0 0 rgba(26, 95, 217, 0.4);
    }
    50% {
        box-shadow: 
            0 4px 14px rgba(26, 95, 217, 0.35),
            0 0 0 8px rgba(26, 95, 217, 0);
    }
}

.hero-cta-hint {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

.hero-cta-hint strong {
    color: #16a34a;
    font-weight: 600;
}

/* === HERO: Анимации появления === */
.hero-anim {
    opacity: 0;
    transform: translateY(20px);
    animation: hero-fade-up 0.6s ease forwards;
}

@keyframes hero-fade-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-anim-delay-1 { animation-delay: 0.1s; }
.hero-anim-delay-2 { animation-delay: 0.25s; }
.hero-anim-delay-3 { animation-delay: 0.4s; }
.hero-anim-delay-4 { animation-delay: 0.55s; }
.hero-anim-delay-5 { animation-delay: 0.65s; }
.hero-anim-delay-6 { animation-delay: 0.75s; }
.hero-anim-delay-7 { animation-delay: 0.85s; }
.hero-anim-delay-8 { animation-delay: 1.0s; }

/* Отключение анимаций для пользователей с reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-anim {
        opacity: 1;
        transform: none;
        animation: none;
    }
    .hero-cta-btn--primary {
        animation: none;
    }
}

.hero-video-wrap {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    border: 1px solid #e2e8f0;
    aspect-ratio: 16/9;
    background: #1e293b;
}

.hero-video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    background: rgba(0,0,0,0.3);
    transition: opacity 0.2s;
}

.hero-video-wrap:hover .hero-video-overlay {
    opacity: 1;
}

.hero-video-play {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.hero-video-play svg {
    margin-left: 4px;
}

.hero-filter-block {
    margin-top: 2rem;
    margin-bottom: 0;
    width: 100%;
}

/* Фильтр и подсказка: .container из design-tokens — та же ширина контента, что у заголовка каталога (#carListingsSection) */

/* Индикатор chase под фильтром: отступы как у .hero-grid--ref (32px сверху сетки, 24px снизу); колонка flex вместо grid */
.hero-section--ref .hero-scroll-hint-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    margin-top: 32px;
    padding-top: 0;
    padding-bottom: 24px;
}

@media (max-width: 991px) {
    .hero-section--ref .hero-scroll-hint-wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 24px;
        padding-bottom: 20px;
    }
}

/* Fallback для hero без модификатора --ref */
.hero-scroll-hint-wrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
}

.hero-scroll-hint {
    display: inline-flex;
    text-decoration: none;
    opacity: 0.92;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-scroll-hint:hover {
    opacity: 1;
    transform: translateY(2px);
}

.hero-scroll-hint:focus-visible {
    outline: 2px solid rgba(59, 127, 255, 0.55);
    outline-offset: 4px;
    border-radius: 12px;
}

.hero-scroll-hint .hero-scroll-hint-chase {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Карточка фильтра: белый фон */
.hero-filter-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-xl, 1rem);
    border: 1px solid rgba(90, 100, 130, 0.18);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 18px 40px -12px rgba(15, 23, 42, 0.1);
    padding: 1.5rem 1.5rem 1.65rem;
    /* visible: не обрезаем выпадающие списки и фокус-состояния полей фильтра */
    overflow: visible;
}

/* Верхняя цветная полоса убрана по макету */
.hero-filter-card::before {
    display: none;
}

/* Заголовок и подсказка */
.hero-filter-head {
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(34, 83, 188, 0.09);
}

.hero-filter-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--gray-900);
    letter-spacing: -0.025em;
    line-height: var(--leading-tight, 1.2);
}

.hero-filter-heading::before {
    content: '';
    width: 4px;
    height: 1.35em;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(180deg, var(--nfs-blue) 0%, var(--nfs-blue-bright) 100%);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(34, 83, 188, 0.35);
}

.hero-filter-lead {
    margin: 0;
    margin-left: calc(4px + 0.5rem);
    font-size: var(--text-sm, 0.8125rem);
    line-height: var(--leading-relaxed, 1.65);
    color: var(--gray-600);
    max-width: 52rem;
}

/* Шапка: заголовок слева, «Все параметры» / «Сбросить» справа */
.hero-filter-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.hero-filter-head-titles {
    flex: 1 1 auto;
    min-width: min(100%, 16rem);
}

@media (max-width: 767.98px) {
    .hero-filter-head-titles {
        flex: 0 1 auto;
        min-width: 0;
        max-height: none;
    }

    .hero-filter-heading {
        margin-bottom: 0.25rem;
    }

    .hero-filter-lead {
        font-size: 0.75rem;
        line-height: 1.45;
    }
}

.hero-filter-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 1rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .hero-filter-head-top {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-filter-head-actions {
        justify-content: flex-start;
        padding-top: 0.65rem;
        margin-top: 0.15rem;
        border-top: 1px solid rgba(34, 83, 188, 0.08);
    }
}

/* Сетка селектов: auto-fit схлопывает пустые колонки (нет «дыры» справа, в отличие от auto-fill) */
.hero-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.8rem;
    align-items: stretch;
}

/* Чтобы границы соседних полей не наезжали при дробных ширинах колонок */
.hero-filter-grid > * {
    min-width: 0;
}

/* Основной ряд — до 5 полей (марка, модель, год, цена, пробег) */
@media (min-width: 768px) {
    .hero-filter-grid-primary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hero-filter-card .hero-filter-select {
        min-width: 0;
    }
}

@media (min-width: 992px) {
    .hero-filter-grid-primary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1400px) {
    .hero-filter-grid-primary {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.hero-filter-grid .hero-filter-select {
    width: 100%;
    min-width: 0;
}

/* Основной ряд: сетка полей + кнопки в одной линии */
.hero-filter-row-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    width: 100%;
}

.hero-filter-row-main .hero-filter-grid-primary {
    flex: 1 1 320px;
    min-width: 0;
}

.hero-filter-actions-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .hero-filter-actions-row {
        flex: 1 1 100%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}

/* Быстрые теги + подпись */
.hero-filter-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

/* Теги в одной строке с ссылками и кнопкой */
.hero-filter-tags-wrap--toolbar {
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    flex-shrink: 1;
    min-width: 0;
}

/* Нижняя панель: теги → отступ → кнопка поиска */
.hero-filter-toolbar-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    width: 100%;
}

@media (min-width: 900px) {
    .hero-filter-toolbar-row {
        flex-wrap: nowrap;
    }
}

.hero-filter-toolbar-grow {
    flex: 1 1 auto;
    min-width: 0.5rem;
    height: 1px;
    align-self: center;
}

.hero-filter-toolbar-submit {
    flex-shrink: 0;
}

/* Нижняя панель (теги) — блок удалён; правило оставлено для совместимости пустых разметок */
.hero-filter-toolbar {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.hero-filter-text-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.25rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--nfs-blue, #2253bc);
    cursor: pointer;
    border-radius: var(--radius-md, 0.375rem);
    transition: color 0.15s ease, background 0.15s ease;
}

.hero-filter-text-btn:hover {
    color: var(--nfs-text-hover-text-color-strong, var(--nfs-blue-hover, #1a4299));
    /* Линия из центра — nfs-text-btn-hover.css */
    text-decoration: none;
}

.hero-filter-text-btn:focus-visible {
    outline: 2px solid var(--nfs-blue, #2253bc);
    outline-offset: 2px;
}

.hero-filter-text-btn--muted {
    color: #64748b;
}

.hero-filter-text-btn--muted:hover {
    color: var(--nfs-text-hover-text-color, var(--nfs-blue, #2253bc));
}

.hero-filter-text-btn-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.hero-btn-primary-catalog {
    min-width: 12rem;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.25), 0 2px 6px rgba(34, 83, 188, 0.12);
}

/*
 * Обводка только inset: линия внутри поля, не вылезает в зазор сетки
 * (рядом «Модель» + «Год» больше не даёт двойной контур).
 */
.hero-filter-select {
    padding: 0.625rem 2.25rem 0.625rem 0.875rem;
    min-height: 2.75rem;
    height: auto;
    box-sizing: border-box;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium, 500);
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, #ffffff 0%, rgba(242, 245, 252, 0.65) 100%);
    min-width: 130px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: var(--gray-800);
    box-shadow: inset 0 0 0 1px rgba(34, 83, 188, 0.24);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232253bc' stroke-opacity='0.55' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    transition: box-shadow var(--transition-fast), background 0.2s ease, color 0.15s ease;
}

@media (min-width: 640px) {
    .hero-filter-select {
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .hero-filter-select {
        min-width: 0;
    }
}

.hero-filter-select:focus {
    outline: none;
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--nfs-blue);
}

.hero-filter-card .hero-brand-picker,
.hero-filter-card .hero-model-picker,
.hero-filter-card .hero-range-picker {
    position: relative;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.hero-filter-select--trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

.hero-filter-select--native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
    background-image: none !important;
    clip: rect(0, 0, 0, 0);
}

.hero-filter-select--trigger {
    width: 100%;
    flex: 1 1 auto;
    min-height: 2.75rem;
    height: auto;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    text-align: left;
    padding-right: 0.75rem;
    background-image: none;
}

.hero-filter-select--trigger:hover {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(34, 83, 188, 0.42), 0 6px 18px rgba(34, 83, 188, 0.1);
}

.hero-filter-select--trigger.is-selected {
    color: var(--nfs-blue);
    background: linear-gradient(180deg, #fff 0%, rgba(239, 246, 255, 0.9) 100%);
    box-shadow: inset 0 0 0 1px rgba(34, 83, 188, 0.48);
}

.hero-filter-select--trigger:focus {
    box-shadow: inset 0 0 0 2px var(--nfs-blue), 0 0 0 2px rgba(34, 83, 188, 0.12);
}

.hero-filter-select-trigger-icon {
    flex-shrink: 0;
    color: rgba(34, 83, 188, 0.45);
}

.hero-btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    height: 2.75rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    text-decoration: none;
    color: white;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-btn-search:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.hero-filter-actions-row .btn-search-full,
.hero-filter-toolbar-row .btn-search-full {
    width: auto;
    flex: none;
    margin-bottom: 0;
}

.hero-btn-cyan {
    background: linear-gradient(92deg, var(--nfs-blue) 0%, var(--nfs-blue-bright) 42%, var(--nfs-cyan) 78%, var(--nfs-green) 100%);
}

.hero-btn-cyan:hover {
    background: linear-gradient(92deg, var(--nfs-blue-hover) 0%, var(--nfs-blue) 45%, #0891b2 75%, var(--nfs-green-hover) 100%);
    box-shadow: 0 6px 20px rgba(34, 83, 188, 0.28);
}

/* Модалка выбора бренда (hero) */
/* +40% к max-width Bootstrap modal-xl (1140px → 1596px) */
.hero-brand-modal .hero-brand-modal-dialog.modal-xl,
.hero-model-modal .hero-model-modal-dialog.modal-xl {
    max-width: min(1596px, calc(100vw - 1.5rem));
    width: 100%;
}

.hero-brand-modal .modal-content {
    border: 1px solid #dbe7ff;
    border-radius: 1rem;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
}

.hero-brand-modal .modal-header {
    border-bottom: 1px solid #e5edff;
    padding: 1rem 1.25rem;
}

.hero-brand-modal .modal-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gray-900);
}

.hero-brand-modal .modal-body {
    padding: 1rem 1.25rem 1.25rem;
}

.hero-brand-modal-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d1e1fb;
    background: #f8fbff;
    border-radius: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.9rem;
    color: var(--gray-500);
}

.hero-brand-modal-search-input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
    font-size: 0.92rem;
    color: var(--gray-800);
    box-shadow: none;
}

/* Без кольца/подсветки фокуса в поле поиска модалки */
.hero-brand-modal .hero-brand-modal-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none;
}

.hero-brand-modal .hero-brand-modal-search:focus-within {
    outline: none;
    box-shadow: none;
}

/* 12 колонок, ~3 ряда до скролла (детали max-height в nfs-hero-filter.css при подключении) */
.hero-brand-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(7.75rem, auto);
    gap: 0.45rem;
    align-items: stretch;
    max-height: min(32.5rem, calc(100vh - 14rem));
    overflow-y: auto;
}

@media (max-width: 1399.98px) {
    .hero-brand-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

@media (max-width: 1199.98px) {
    .hero-brand-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .hero-brand-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .hero-brand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hero-brand-card {
    border: none;
    background: #f8fafc;
    border-radius: 0.65rem;
    box-shadow: none;
    min-height: 0;
    height: 100%;
    padding: 0.45rem 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-brand-card:hover {
    background: #eef2f7;
    transform: translateY(-1px);
}

.hero-brand-card.is-selected {
    background: #e8f0fe;
}

.hero-brand-card:focus-visible {
    outline: 2px solid var(--nfs-blue);
    outline-offset: 2px;
}

.hero-brand-logo {
    width: 4.5rem;
    height: 4.5rem;
    min-width: 4.5rem;
    min-height: 4.5rem;
    border-radius: 0.5rem;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.hero-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.hero-brand-logo-fallback {
    display: none;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--nfs-blue);
    line-height: 1;
}

.hero-brand-logo-fallback.is-visible {
    display: inline-flex;
}

.hero-brand-name {
    font-size: 0.74rem;
    color: var(--gray-700);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    padding: 0 0.15rem;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
}

.hero-brand-grid-empty {
    padding: 1.25rem 0.5rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
}

/* Модалка выбора модели (hero) — зеркало марки + превью лота */
.hero-model-modal .modal-content {
    border: 1px solid #dbe7ff;
    border-radius: 1rem;
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
}

.hero-model-modal .modal-header {
    border-bottom: 1px solid #e5edff;
    padding: 1rem 1.25rem;
}

.hero-model-modal .modal-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--gray-900);
}

.hero-model-modal .modal-body {
    padding: 1rem 1.25rem 1.25rem;
}

.hero-model-modal-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d1e1fb;
    background: #f8fbff;
    border-radius: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.9rem;
    color: var(--gray-500);
}

.hero-model-modal-search-input {
    border: none;
    outline: none;
    width: 100%;
    background: transparent;
    font-size: 0.92rem;
    color: var(--gray-800);
    box-shadow: none;
}

.hero-model-modal .hero-model-modal-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none;
}

.hero-model-modal .hero-model-modal-search:focus-within {
    outline: none;
    box-shadow: none;
}

.hero-model-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(8.5rem, auto);
    gap: 0.45rem;
    align-items: stretch;
    max-height: min(44rem, calc(100vh - 14rem));
    overflow-y: auto;
}

@media (max-width: 991.98px) {
    .hero-model-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .hero-model-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hero-model-card {
    border: none;
    background: #f8fafc;
    border-radius: 0.65rem;
    box-shadow: none;
    height: 100%;
    min-height: 0;
    padding: 0.35rem 0.3rem 0.4rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hero-model-card:hover {
    background: #eef2f7;
    transform: translateY(-1px);
}

.hero-model-card.is-selected {
    background: #e8f0fe;
}

.hero-model-card:focus-visible {
    outline: 2px solid var(--nfs-blue);
    outline-offset: 2px;
}

.hero-model-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 0.5rem;
    overflow: hidden;
    background: linear-gradient(145deg, #e2e8f0, #f1f5f9);
    flex-shrink: 0;
}

.hero-model-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-model-thumb-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}

.hero-model-thumb-fallback.is-visible {
    display: flex;
}

.hero-model-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    width: 100%;
    flex: 1 1 auto;
    min-height: 2.4rem;
}

.hero-model-name {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gray-800);
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    padding: 0 0.1rem;
}

.hero-model-count {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--nfs-blue);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
    line-height: 1.2;
}

.hero-model-grid-empty {
    padding: 1.25rem 0.5rem;
    text-align: center;
    color: var(--gray-500);
    font-size: 0.9rem;
}

.hero-model-grid-empty--hint {
    color: var(--gray-600);
}

.hero-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0;
    flex: 1;
    min-width: min(100%, 12rem);
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.85rem;
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--font-weight-semibold, 600);
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    border: 1px solid transparent;
}

.hero-tag:hover {
    transform: translateY(-1px);
}

.hero-tag-hits {
    background: linear-gradient(135deg, var(--amber-50), #fff7ed);
    color: var(--nfs-orange-hover, #d97706);
    border-color: rgba(245, 158, 11, 0.22);
}

.hero-tag-hits:hover {
    background: #ffedd5;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.hero-tag-new {
    background: linear-gradient(135deg, var(--blue-50), #eff6ff);
    color: var(--nfs-blue);
    border-color: rgba(34, 83, 188, 0.18);
}

.hero-tag-new:hover {
    background: var(--blue-100);
    box-shadow: 0 4px 12px rgba(34, 83, 188, 0.12);
}

.hero-tag-korea {
    background: linear-gradient(135deg, #eef4ff, var(--blue-50));
    color: var(--nfs-blue-hover, #1a4299);
    border-color: rgba(34, 83, 188, 0.2);
}

.hero-tag-korea:hover {
    background: var(--blue-100);
    box-shadow: 0 4px 12px rgba(34, 83, 188, 0.14);
}

.hero-tag-ev {
    background: linear-gradient(135deg, var(--green-50), #f0fdf4);
    color: var(--nfs-green-hover, #059669);
    border-color: rgba(16, 185, 129, 0.22);
}

.hero-tag-ev:hover {
    background: var(--green-100);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.14);
}

/* AI Assistant Card */
.ai-assistant-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.ai-assistant-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ai-avatar {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple), var(--primary-blue));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    position: relative;
    animation: breathing 3s ease-in-out infinite;
}

.ai-status {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 1rem;
    height: 1rem;
    background: var(--primary-green);
    border-radius: 50%;
    border: 2px solid white;
    animation: pulse 2s infinite;
}

.ai-chat {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ai-message {
    display: flex;
    gap: 0.75rem;
    background: linear-gradient(135deg, #DBEAFE, #F3E8FF);
    border-radius: var(--radius-xl);
    padding: 1rem;
    border: 1px solid #BFDBFE;
}

.ai-message-avatar {
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.ai-tag {
    padding: 0.375rem 0.75rem;
    background: white;
    border: 1px solid #BFDBFE;
    border-radius: 9999px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-tag:hover {
    background: #DBEAFE;
    border-color: var(--primary-blue);
    transform: scale(1.05);
}

.ai-input-wrapper {
    position: relative;
}

.ai-input {
    width: 100%;
    min-height: 8rem;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    resize: none;
    font-family: inherit;
    transition: all 0.3s ease;
}

.ai-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.ai-mic-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, var(--primary-purple), #A855F7);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.ai-mic-btn:hover {
    transform: scale(1.1);
}

.btn-ai-search {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple), var(--primary-blue));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-ai-search::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.btn-ai-search:hover::before {
    transform: translateX(100%);
}

.ai-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

.ai-feature {
    text-align: center;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-feature:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
    transform: scale(1.02);
}

.ai-feature-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.ai-feature-label {
    font-size: 0.75rem;
    color: var(--gray-600);
}

/* ===== Features Section ===== */
.features-section {
    padding: 4.5rem 0;
    background: var(--nfs-home-section-bg);
}

.features-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 2.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 520px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
    }
}

/* Крупнее карточки и типографика на широких экранах (всегда 3 колонки) */
@media (min-width: 1100px) {
    .features-section .feature-card {
        padding: 1.75rem 1.5rem;
    }

    .features-section .feature-card-head {
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .features-section .feature-icon {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 1.35rem;
    }

    .features-section .feature-card h3 {
        font-size: 1.35rem;
        line-height: 1.3;
    }

    .features-section .feature-card p {
        font-size: 1.0625rem;
        line-height: 1.65;
    }
}

.feature-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius-2xl);
    padding: 1.35rem 1.1rem;
    border: 1px solid var(--gray-200);
    transition: all 0.3s ease;
    cursor: pointer;
    min-width: 0;
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--gray-300);
    box-shadow: var(--shadow-lg);
}

/* Верх карточки: иконка слева, заголовок справа от неё */
.feature-card-head {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.feature-card-head .feature-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}

.feature-card-head h3 {
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* .feature-emoji удалён из разметки — только .feature-icon */

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-lg);
    transition: all 0.3s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.05);
}

.feature-icon-blue {
    background: linear-gradient(135deg, var(--primary-blue), #06B6D4);
}

.feature-icon-red {
    background: linear-gradient(135deg, var(--primary-red), #F97316);
}

.feature-icon-purple {
    background: linear-gradient(135deg, var(--primary-purple), #EC4899);
}

.feature-icon-green {
    background: linear-gradient(135deg, var(--primary-green), #34D399);
}

.feature-icon-orange {
    background: linear-gradient(135deg, #F97316, var(--primary-yellow));
}

.feature-icon-cyan {
    background: linear-gradient(135deg, #06B6D4, var(--primary-blue));
}

.feature-icon-indigo {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
}

.feature-icon-rose {
    background: linear-gradient(135deg, #F43F5E, #EC4899);
}

.feature-icon-teal {
    background: linear-gradient(135deg, #0D9488, #14B8A6);
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--gray-900);
}

/* Заголовок под иконкой в колонке — отступ задаёт .feature-card-head */
.feature-card-head + p {
    margin-top: 0;
}

.feature-card p {
    color: var(--gray-600);
    line-height: 1.6;
}

.section-cta {
    text-align: center;
}

.btn-cta {
    padding: 1.25rem 2.5rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple), #EC4899);
    color: white;
    border: none;
    border-radius: 9999px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-xl);
}

.btn-cta:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4);
}

/* ===== Car Listings Section ===== */
.car-listings-section {
    padding: 4rem 0;
    background: var(--nfs-home-section-bg);
}

/* Главная (новый блок объявлений): плотнее к hero-фильтру */
.car-listings-section.car-listings-new {
    padding-top: 0;
    padding-bottom: 0;
}

/* Car Listings New (reference design) */
.car-listings-new .car-listings-header {
    text-align: center;
    margin-bottom: 2rem;
}

.car-listings-new .car-listings-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.car-listings-new .car-listings-gradient {
    background: linear-gradient(90deg, #10b981, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.car-listings-new .car-listings-desc {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}

.cars-grid-new {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    width: 100%;
    max-width: 100%;
}

.cars-grid-new > .nfs-cc,
.cars-grid-new > .skeleton-car-card,
.cars-grid-new > .catalog-car-card {
    min-width: 0;
    max-width: 100%;
}

@media (min-width: 640px) {
    .cars-grid-new {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .cars-grid-new {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.car-card-new {
    position: relative;
}

/* Рамка только на внешнем .car-card-new (catalog_new.css) — без дублирования */
.car-card-new-inner {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--car-card-new-radius, 12px);
    border: none;
    box-shadow: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.car-card-new-inner:hover {
    box-shadow: none;
}

/* В сетке — скругление только сверху, совпадает с карточкой */
.car-card-new:not(.list-view) .car-card-new-image {
    border-top-left-radius: var(--car-card-new-radius, 12px);
    border-top-right-radius: var(--car-card-new-radius, 12px);
}

.car-card-new-image {
    position: relative;
    aspect-ratio: 4/3;
    background: #f1f5f9;
    overflow: hidden;
}

.car-card-new-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Точки галереи карточки (смена кадра по движению курсора — см. car_card_gallery.js) */
.car-card-new-gallery-dots {
    position: absolute;
    bottom: 0.45rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem;
    max-width: calc(100% - 5rem);
    z-index: 12;
    pointer-events: none;
}

.car-card-new-image--gallery .car-card-new-gallery-dots {
    pointer-events: auto;
}

.car-card-new-gallery-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}

.car-card-new-gallery-dot:hover {
    background: rgba(255, 255, 255, 0.85);
}

.car-card-new-gallery-dot.is-active {
    background: #fff;
    transform: scale(1.25);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* «Рука с пальцем» как при наведении на кнопку (прокрутка фото движением мыши) */
.car-card-new-image--gallery {
    cursor: pointer;
    /* Вертикальный скролл страницы; горизонталь отдаём свайпу галереи (car_card_gallery.js) */
    touch-action: pan-y pinch-zoom;
}

.car-card-new-image--gallery:active {
    cursor: pointer;
}

/* Без увеличения фото при наведении (подраздел «Популярные объявления» и каталог) */
.car-card-new-inner:hover .car-card-new-img {
    transform: none;
}

.car-card-new-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    z-index: 10;
}

.car-badge-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: #22c55e;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9999px;
}

.car-badge-import {
    padding: 0.25rem 0.5rem;
    background: #f97316;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9999px;
}

.car-card-new-fav {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    z-index: 20;
    transition: background 0.2s, color 0.2s;
}

.car-card-new-fav:hover {
    background: white;
}

.car-card-new-fav i {
    color: #94a3b8;
    font-size: 1rem;
}

.car-card-new-fav:hover i,
.car-card-new-fav.favorited i {
    color: #ef4444;
}

.car-diff-good {
    color: #4ade80;
}

.car-diff-high {
    color: #f87171;
}

.car-card-new-ai-score {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
    transition: opacity 0.2s;
}

.car-card-new-inner:hover .car-card-new-ai-score {
    opacity: 0;
}

.car-ai-badge-green .car-card-new-ai-num {
    background: #22c55e;
}

.car-ai-badge-yellow .car-card-new-ai-num {
    background: #eab308;
}

.car-card-new-ai-num {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--font-weight-extrabold);
    color: white;
}

.car-card-new-ai-label {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.car-card-new-body {
    padding: 1rem;
    background: white;
}

.car-card-new-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.car-card-new-title {
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
    margin: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car-card-new-price {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-extrabold);
    color: var(--nfs-blue);
    white-space: nowrap;
}

.car-card-new-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.car-card-new-location {
    font-size: 10px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.car-card-new-location i {
    font-size: 0.75rem;
}

.car-card-new-status {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.1875rem 0.625rem;
    border-radius: var(--radius-full);
}

.car-status-fair {
    background: #eff6ff;
    color: var(--nfs-blue, #2253bc);
}

.car-status-good {
    background: #f0fdf4;
    color: #16a34a;
}

.car-status-high {
    background: #f8fafc;
    color: #475569;
}

.car-card-new-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    min-height: 2.25rem;
}

/* На десктопе: скрываем кнопки до hover через opacity, без изменения высоты (избегаем сдвига соседних карточек) */
@media (hover: hover) and (pointer: fine) {
    .car-card-new-actions {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .car-card-new-inner:hover .car-card-new-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

.car-card-new-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    height: 2.25rem;
    font-size: 11px;
    font-weight: 700;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
    background: white;
    color: inherit;
}

.car-card-new-btn-outline:hover {
    background: #f8fafc;
}

.car-card-new-btn-primary {
    background: #22c55e;
    color: white;
    border-color: transparent;
}

.car-card-new-btn-primary:hover {
    background: #16a34a;
}

.car-card-new-btn-orange {
    background: #f97316;
}

.car-card-new-btn-orange:hover {
    background: #ea580c;
}

.car-listings-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .car-listings-cta {
        grid-template-columns: repeat(3, 1fr);
    }
}

.car-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    height: 2.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.car-cta-violet {
    background: linear-gradient(90deg, #8b5cf6, #a855f7);
    color: white;
}

.car-cta-violet:hover {
    background: linear-gradient(90deg, #7c3aed, #9333ea);
}

.car-cta-green {
    background: linear-gradient(90deg, #22c55e, #10b981);
    color: white;
}

.car-cta-green:hover {
    background: linear-gradient(90deg, #16a34a, #059669);
}

.car-cta-orange {
    background: linear-gradient(90deg, #f97316, #ef4444);
    color: white;
}

.car-cta-orange:hover {
    background: linear-gradient(90deg, #ea580c, #dc2626);
}

/* Упрощённый CTA-блок (центрирован, один основной + ссылка) */
.car-listings-cta-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.car-listings-cta-centered .car-cta-primary {
    padding: 0.875rem 2.5rem;
    height: auto;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    background: var(--nfs-blue);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.car-listings-cta-centered .car-cta-primary:hover {
    background: var(--nfs-blue-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.car-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.car-cta-link:hover {
    color: var(--nfs-blue);
}

.car-cta-link svg {
    transition: transform var(--transition-fast);
}

.car-cta-link:hover svg {
    transform: translateX(3px);
}

.cars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
    align-items: stretch; /* Выравнивание карточек по высоте в одной строке */
}

/* ===== Car Card Styles ===== */
.car-card {
    position: relative;
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    min-height: 480px;
    height: 100%; /* Растягиваем карточку на всю высоту ячейки grid */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.car-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.15);
}

.car-card-placeholder {
    background: white;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 480px;
}

.car-image-placeholder {
    width: 100%;
    height: 220px;
    background: linear-gradient(135deg, var(--gray-200), var(--gray-100));
}

.car-info-placeholder {
    padding: 1rem;
    flex: 1;
}

.placeholder-line {
    height: 1rem;
    background: var(--gray-200);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.placeholder-line.short {
    width: 60%;
}

/* Image Section - 220px height */
.car-image-section {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
}

.car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.car-card:hover .car-image {
    transform: scale(1.1);
}

/* Badges on Image */
.car-badges {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
}

.car-badges-left {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
    white-space: nowrap;
}

.badge-verified {
    background: rgba(0, 201, 80, 0.9);
    color: white;
}

.badge-import {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

/* AI Score Badge - bottom left of image */
.car-ai-score {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 7px 15px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.ai-score-circle {
    position: relative;
    width: 47px;
    height: 47px;
    flex-shrink: 0;
}

.score-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.score-bg {
    fill: none;
    stroke: #E5E7EB;
    stroke-width: 4;
}

.score-progress {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.score-progress.score-green {
    stroke: #10B981;
}

.score-progress.score-blue {
    stroke: #2563EB;
}

.score-progress.score-yellow {
    stroke: #F59E0B;
}

.score-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-900);
}

.ai-score-label {
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
    line-height: 1.2;
}

.ai-score-label > div:first-child {
    font-weight: 700;
    color: var(--gray-900);
}

.ai-score-label > div:last-child {
    color: var(--gray-600);
}

/* Info Section - растягивается для заполнения доступного пространства */
.car-info-section {
    flex: 1 1 auto; /* Растягивается для заполнения доступного пространства */
    padding: 15px;
    display: flex;
    flex-direction: column;
    min-height: 259px;
    box-sizing: border-box;
    overflow: visible;
}

.car-title-section {
    margin-bottom: 0;
    height: 75px; /* Увеличена высота для большего отступа */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Распределяем пространство между названием и мета-информацией */
    flex-shrink: 0;
}

.car-title {
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    color: var(--gray-900);
    margin: 0;
    line-height: 1.4;
    height: 50px; /* Фиксированная высота для 2 строк (18px * 1.4 * 2 = 50.4px) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    flex-shrink: 0;
    margin-bottom: 0.75rem; /* Увеличенный отступ снизу */
}

.car-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem; /* 14px */
    color: rgba(73, 85, 101, 1);
    gap: 0;
    height: 15px; /* Фиксированная высота для мета-информации */
    margin-top: 0;
    flex-shrink: 0;
}

/* Price Section - стиль из Product PRO */
.car-price-section {
    margin-top: 1.5rem; /* Увеличенный отступ сверху для опускания блока */
    margin-bottom: 0;
    padding: 1rem 1.25rem; /* 16px 20px */
    background: linear-gradient(to bottom right, var(--blue-50), var(--purple-50), var(--pink-50));
    border: 1px solid var(--blue-100);
    border-radius: var(--radius-xl); /* 24px */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.5rem;
    min-height: 111px;
}

.car-price {
    font-size: 1.875rem; /* 30px */
    font-weight: 700;
    background: linear-gradient(to right, var(--nfs-blue), var(--nfs-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: var(--nfs-blue); /* Fallback для браузеров без поддержки background-clip */
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

/* Поддержка для браузеров без background-clip */
@supports not (background-clip: text) {
    .car-price {
        color: var(--nfs-blue);
        background: none;
    }
}

.car-price-analysis {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.price-comparison {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem; /* 14px */
    gap: 0.5rem;
}

.price-avg {
    color: rgba(105, 114, 130, 1);
    font-weight: 400;
}

.price-diff {
    font-weight: 600;
}

.price-diff.good {
    color: var(--primary-green);
}

.price-diff.high {
    color: var(--primary-red);
}

.price-bar-wrapper {
    width: 100%;
    height: 8px;
    background: var(--gray-200);
    border-radius: 9999px;
    overflow: hidden;
}

.price-bar {
    height: 100%;
    border-radius: 9999px;
    transition: width 1s ease-out;
}

.price-bar-good {
    background: var(--primary-green);
}

.price-bar-high {
    background: var(--primary-red);
}

.price-bar-fair {
    background: var(--primary-blue);
}

.price-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem; /* 6px 12px */
    border-radius: 9999px; /* Полностью скругленные углы */
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    width: fit-content;
    margin-top: 0.25rem;
}

.price-status i {
    font-size: 0.875rem;
}

/* Утилитарные классы для цветов */
.text-green-600 {
    color: var(--primary-green);
}

.text-red-600 {
    color: var(--primary-red);
}

.text-blue-600 {
    color: var(--primary-blue);
}

.bg-green-50 {
    background: var(--gray-50);
}

.bg-green-100 {
    background: #D1FAE5;
}

.bg-red-50 {
    background: var(--gray-50);
}

.bg-red-100 {
    background: #FEE2E2;
}

.bg-blue-50 {
    background: var(--blue-50);
}

.bg-blue-100 {
    background: var(--blue-100);
}

/* Actions - точная высота 39px, позиция top: 203px от верха секции */
.car-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 13px; /* 203px от верха секции - 15px padding - 51px заголовок - 13px отступ - 111px цена = 13px */
    padding-top: 0;
    align-items: stretch;
    margin-bottom: 0;
}

.btn-car-details {
    padding: 0.625rem 0.75rem; /* 10px вертикально, 12px горизонтально */
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--gray-900);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 39px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-car-details:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.btn-car-contact {
    padding: 0.625rem 0.75rem; /* 10px вертикально, 12px горизонтально */
    background: linear-gradient(135deg, #00A63D, #00C850);
    border: none;
    border-radius: 8px;
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    min-height: 39px;
    height: auto;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-car-contact:not(.online) {
    background: linear-gradient(135deg, var(--primary-blue), #3B82F6);
}

.btn-car-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-car-contact i {
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    line-height: 1;
}

.btn-car-contact span {
    display: flex;
    align-items: center;
    line-height: 1;
}

.btn-load-more {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple), var(--primary-blue));
    color: white;
    border: none;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.btn-load-more:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* ===== Import Section (главная; как референс dizich — var(--nfs-bg)) ===== */
.import-section {
    padding: 52px 0;
    background: var(--nfs-bg);
}

/* Табы стран импорта */
.import-country-tabs {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.import-country-tab {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600);
    background: white;
    border: 2px solid var(--gray-200);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.import-country-tab:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: var(--blue-50);
}

.import-country-tab.active {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
    border-color: transparent;
    color: white;
}

/* Контент табов: по умолчанию скрыт */
.import-tab-content {
    display: none;
}

.import-tab-content.active {
    display: block;
    animation: fadeInUp 0.4s ease-out;
}

/* Маршрут доставки внутри карточки калькулятора (после дисклеймера, до слайдеров) */
.import-calculator-route {
    margin-bottom: 1rem;
}

.import-calculator-route .import-route-map {
    margin-bottom: 0;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-lg);
    box-shadow: none;
    padding: 1rem 1.25rem;
}

.import-calculator-route .route-map-container {
    height: 12rem;
    margin-bottom: 1rem;
}

/* Заглушки для Китай/США */
.import-stub {
    max-width: 600px;
    margin: 0 auto;
}

.import-stub-inner {
    background: white;
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--gray-100);
}

.import-stub-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 1rem;
    color: var(--nfs-blue);
}

.import-stub-icon i {
    display: block;
}

.import-stub-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin-bottom: 0.75rem;
}

.import-stub-text {
    color: var(--gray-600);
    text-align: center;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.import-lead-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.import-lead-form .form-group {
    margin-bottom: 1.25rem;
}

.import-lead-form .form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: 0.375rem;
}

.import-lead-form .form-group input,
.import-lead-form .form-group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--gray-200);
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.import-lead-form .form-group input:focus,
.import-lead-form .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.import-lead-form .required {
    color: var(--primary-red);
}

.import-lead-message {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    min-height: 1.25rem;
}

.import-lead-message.success {
    color: var(--primary-green);
}

.import-lead-message.error {
    color: var(--primary-red);
}

.btn-import-lead {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-import-lead:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.btn-import-lead:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

@media (max-width: 576px) {
    .import-lead-form .form-row {
        grid-template-columns: 1fr;
    }
}

.import-calculator {
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--gray-100);
}

.calculator-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.calculator-header h3 {
    font-size: 1.125rem;
    margin: 0;
    font-weight: 600;
}

.calculator-header p {
    font-size: 0.8125rem;
    margin: 0.125rem 0 0;
    color: var(--gray-600);
}

.calculator-icon {
    width: 2.25rem;
    height: 2.25rem;
    background: linear-gradient(135deg, var(--primary-red), #F87171);
    border-radius: 0.5rem; /* квадрат со скруглёнными углами */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.control-group {
    margin-bottom: 0.625rem;
}

.control-group label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-700);
}

.slider-wrapper {
    position: relative;
}

.slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--gray-200);
    outline: none;
    -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-blue);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-blue);
    cursor: pointer;
    border: none;
    box-shadow: var(--shadow-sm);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--gray-500);
}

.calculator-breakdown {
    background: linear-gradient(135deg, var(--gray-50), #EFF6FF);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.8125rem;
    color: var(--gray-600);
}

.breakdown-subtotal {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-700);
}

.breakdown-subtotal span:last-child {
    color: var(--gray-800);
}

.breakdown-customs small {
    font-weight: 400;
    opacity: 0.85;
}

.breakdown-customs a {
    color: var(--primary-blue);
}

.calculator-disclaimer {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-bottom: 0.75rem;
}

.breakdown-total {
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: 1rem;
}

.breakdown-total span:last-child {
    color: var(--primary-blue);
    font-size: 1.25rem;
}

.calculator-savings {
    background: linear-gradient(135deg, var(--primary-green), #34D399);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    color: white;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.savings-icon {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.savings-label {
    font-size: 0.8125rem;
    opacity: 0.95;
}

.savings-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.btn-calculator {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--primary-red), var(--primary-blue));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
}

.btn-calculator:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

.timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.timeline-step {
    display: flex;
    gap: 1rem;
}

.step-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
    color: var(--nfs-blue);
}

.step-icon i {
    display: block;
}

.timeline-step:hover .step-icon {
    transform: scale(1.1) rotate(6deg);
}

.step-content h4 {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.step-content p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.step-days {
    font-size: 0.75rem;
    color: var(--gray-500);
}

/* ===== AI Assistant Section ===== */
.ai-assistant-section {
    padding-top: 0;
    padding-bottom: 6rem;
    background: var(--nfs-home-section-bg);
}

.status-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background: var(--primary-green);
    border-radius: 50%;
    margin-right: 0.5rem;
    animation: pulse 2s infinite;
}

.ai-demo-card {
    background: white;
    border-radius: var(--radius-2xl);
    padding: 2rem;
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--gray-200);
}

/* Шапка карточки ИИ: кнопка «i» (как у маршрута доставки) */
.ai-demo-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ai-demo-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.ai-input-section label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.input-with-icon {
    position: relative;
    margin-bottom: 1rem;
}

.input-with-icon i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
}

.input-with-icon input {
    width: 100%;
    padding: 1rem 1rem 1rem 2.75rem;
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.input-with-icon input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.divider {
    text-align: center;
    margin: 1rem 0;
    position: relative;
}

.divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gray-200);
}

.divider span {
    position: relative;
    background: white;
    padding: 0 1rem;
    color: var(--gray-500);
    font-size: 0.875rem;
}

.upload-area {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem;
    text-align: center;
    background: var(--gray-50);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.upload-area:hover {
    border-color: var(--primary-blue);
    background: #EFF6FF;
}

.upload-area i {
    font-size: 3rem;
    color: var(--gray-400);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.upload-area:hover i {
    color: var(--primary-blue);
}

.upload-area p {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--gray-700);
}

.upload-area span {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.btn-ai-analyze {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple), #EC4899);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-xl);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.btn-ai-analyze::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 1s ease;
}

.btn-ai-analyze:hover::before {
    transform: translateX(100%);
}

.btn-ai-analyze:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4);
}

.ai-tokens-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-700);
}

.ai-tokens-info i {
    flex-shrink: 0;
    color: var(--nfs-purple);
}

.ability-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.ability-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    border: 2px solid var(--gray-200);
    transition: all 0.3s ease;
    cursor: pointer;
}

.ability-item:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-lg);
    transform: translateX(4px);
}

.ability-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.ability-item:hover .ability-icon {
    transform: scale(1.05);
}

.ability-icon-blue {
    background: linear-gradient(135deg, var(--primary-blue), #06B6D4);
}

.ability-icon-green {
    background: linear-gradient(135deg, var(--primary-green), #34D399);
}

.ability-icon-purple {
    background: linear-gradient(135deg, var(--primary-purple), #EC4899);
}

.ability-icon-red {
    background: linear-gradient(135deg, var(--primary-red), #F97316);
}

.ability-icon-yellow {
    background: linear-gradient(135deg, var(--primary-yellow), #FBBF24);
}

.ability-icon-cyan {
    background: linear-gradient(135deg, #06B6D4, var(--primary-blue));
}

/* .ability-emoji удалён из разметки */

.ability-item h4 {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ability-item p {
    font-size: 0.875rem;
    color: var(--gray-600);
}

/* CTA внутри белой карточки ИИ (после зоны загрузки, до кнопки анализа) */
.ai-cta-card--in-demo {
    margin: 1rem 0 1.25rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    box-shadow: none;
    padding: 1.25rem 1.5rem;
}

.ai-cta-card--in-demo .ai-cta-icon {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.ai-cta-card--in-demo p {
    margin-bottom: 1rem;
}

.ai-cta-card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    padding: 2rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.ai-cta-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.ai-cta-card h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ai-cta-card p {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
}

.btn-get-tokens {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-purple));
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-lg);
}

.btn-get-tokens:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/* ===== Footer ===== */
.main-footer {
    background: var(--gray-900);
    color: white;
}

.footer-cta {
    background: var(--gradient-brand);
    padding: 4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-cta-content {
    text-align: center;
    max-width: 40rem;
    margin: 0 auto;
}

.footer-cta-content h3 {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    color: white;
}

.footer-cta-content > p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2rem;
}

.footer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.btn-footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: white;
    color: var(--gray-900);
    border: none;
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-footer-cta:hover {
    background: var(--gray-100);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--gray-900);
}

.btn-footer-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-footer-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
}

.footer-cta-note {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* CTA консультации по подбору авто из Кореи, Китая или США */
.footer-consultation-cta {
    background: linear-gradient(90deg, #581c87 0%, #6366f1 100%);
    border-radius: 20px;
    padding: 24px 32px;
    text-align: center;
    margin: 32px 0;
}

.footer-consultation-cta h3 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.footer-consultation-cta p {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.footer-consultation-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-consultation-cta .btn {
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
}

.footer-consultation-cta .btn-light {
    background: #fff;
    color: #111827;
    border: none;
}

.footer-consultation-cta .btn-light:hover {
    background: #f3f4f6;
}

.footer-consultation-cta .btn-outline-light {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.footer-consultation-cta .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: #fff;
}

.footer-content {
    padding: 4rem 0 2rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.footer-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.social-link {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--gray-800);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    text-decoration: none;
}

.social-link:hover {
    background: var(--primary-blue);
    color: white;
    transform: scale(1.1);
}

.footer-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}

.footer-contacts {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.footer-contacts li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.footer-contacts i {
    width: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.footer-contacts a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contacts a:hover {
    color: white;
}

.footer-newsletter h5 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.newsletter-form {
    display: flex;
    gap: 0.5rem;
}

.newsletter-input {
    flex: 1;
    padding: 0.625rem 1rem;
    background: var(--gray-800);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: white;
    font-size: 0.875rem;
}

.newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.newsletter-input:focus {
    outline: none;
    border-color: var(--primary-blue);
}

.newsletter-btn {
    width: 2.75rem;
    height: 2.75rem;
    background: var(--primary-blue);
    border: none;
    border-radius: var(--radius-lg);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.newsletter-btn:hover {
    background: #3B82F6;
    transform: scale(1.1);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 3rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    margin: 0;
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: white;
}

.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    color: var(--gray-500);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: var(--nfs-blue);
    border-color: var(--nfs-blue);
}

.back-to-top.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ===== AI Analysis States ===== */
.ai-analyzing {
    text-align: center;
    padding: 2rem 0;
}

.analyzing-animation {
    width: 8rem;
    height: 12rem;
    background: linear-gradient(135deg, #DBEAFE, #F3E8FF);
    border-radius: var(--radius-xl);
    border: 2px solid #BFDBFE;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.analyzing-animation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple), #EC4899);
    animation: loading 2s ease-in-out infinite;
}

.spinner {
    width: 4rem;
    height: 4rem;
    border: 4px solid var(--primary-blue);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes loading {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(0%); }
    100% { transform: translateX(100%); }
}

.progress-bar {
    width: 100%;
    height: 0.75rem;
    background: var(--gray-200);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 1rem;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-purple), #EC4899);
    border-radius: 9999px;
    transition: width 0.3s ease;
    width: 0%;
}

.ai-results {
    animation: fadeInUp 0.6s ease-out;
}

.results-score {
    text-align: center;
    padding: 2rem 0;
    background: #fff;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    margin-bottom: 1.5rem;
}

.score-circle {
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, var(--primary-green), #34D399);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin: 0 auto 1rem;
    box-shadow: var(--shadow-xl);
}

.results-score h4 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.results-score p {
    color: var(--gray-600);
}

.results-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.metric {
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    padding: 1rem;
    border: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric span:first-child {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-600);
}

.metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--primary-green);
}

.results-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.btn-outline {
    padding: 0.75rem;
    background: transparent;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

/* Mobile Menu Styles */
.header-nav.mobile-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    box-shadow: var(--shadow-xl);
    padding: 1rem;
    border-top: 1px solid var(--gray-200);
}

@media (min-width: 1024px) {
    .header-nav.mobile-open {
        display: flex;
        flex-direction: row;
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0;
        border-top: none;
    }
}

/* ===== Адаптивность ===== */
@media (max-width: 1024px) {
    .header-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: block;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2.25rem;
    }

    .cars-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .car-card {
        height: auto;
        min-height: 480px;
    }
}

@media (max-width: 768px) {
    .header-search {
        display: none;
    }

    .hero-section {
        padding: 6rem 0 3rem;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-stats {
        flex-direction: column;
    }

    .quick-search-filters {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.875rem;
    }

    .features-grid,
    .levels-grid {
        grid-template-columns: 1fr;
    }
    
    .cars-grid {
        grid-template-columns: 1fr;
    }
    
    .car-card {
        height: auto;
        min-height: 450px;
    }
    
    .car-image-section {
        height: 200px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-consultation-cta {
        padding: 20px 20px;
    }

    .footer-consultation-cta h3 {
        font-size: 24px;
    }

    .footer-consultation-cta-buttons {
        flex-direction: column;
    }

    .footer-consultation-cta .btn {
        width: 100%;
    }

    .back-to-top {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.875rem;
        bottom: 1rem;
        right: 1rem;
    }
}

@media (max-width: 480px) {
    .feature-emoji {
        right: 0.5rem;
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }

    .features-section {
        padding: 4rem 0;
    }

    .section-header {
        margin-bottom: 2rem;
    }

    .section-description {
        font-size: 1rem;
    }

    .footer-consultation-cta {
        padding: 16px;
        margin: 24px 0;
    }

    .footer-consultation-cta h3 {
        font-size: 20px;
    }

    .footer-consultation-cta p {
        font-size: 14px;
    }
}

/* ===== Дополнительные стили для интерактивных элементов ===== */

/* M-Power полоски при наведении на карточку */
.mpower-stripes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.mpower-stripes .stripe {
    position: absolute;
    width: 100%;
    height: 4px;
    transform: skewY(12deg);
    animation: slideInRight 0.6s ease-out;
}

.mpower-stripes .stripe-1 {
    top: 25%;
    background: linear-gradient(to right, transparent, rgba(156, 163, 175, 0.4), transparent);
    animation-delay: 0s;
}

.mpower-stripes .stripe-2 {
    top: 33%;
    background: linear-gradient(to right, transparent, rgba(37, 99, 235, 0.5), transparent);
    animation-delay: 0.1s;
}

.mpower-stripes .stripe-3 {
    top: 50%;
    background: linear-gradient(to right, transparent, rgba(239, 68, 68, 0.5), transparent);
    animation-delay: 0.2s;
}

/* Избранное - кнопка справа вверху */
.car-favorite-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.car-favorite-btn:hover {
    background: white;
    transform: scale(1.1);
}

.car-favorite-btn.favorited {
    background: var(--primary-red);
    transform: scale(1.1);
}

.car-favorite-btn i {
    font-size: 1rem;
    color: var(--gray-600);
    transition: color 0.3s ease;
}

.car-favorite-btn.favorited i {
    color: white;
}

/* Анимация монет */
.coin-animation {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.6;
    animation: float 2s ease-in-out;
    pointer-events: none;
}

/* Анимированная иконка маршрута */
.animated-plane {
    transition: transform 0.1s linear;
}


/* Маршрут доставки */
.import-route-map {
    --route-accent: var(--nfs-blue);
    --route-accent-soft: rgba(37, 99, 235, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    border: 1px solid #dbe7ff;
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.route-map-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.import-route-map h3 {
    font-size: 1.25rem;
    margin: 0;
    color: var(--gray-900);
}

/* Контейнер для кнопки «i» и переключателя маршрутов */
.route-map-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Кнопка «i» для открытия модального окна этапов импорта */
.hero-route-info-btn {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 50%;
    background: var(--gray-50);
    color: var(--primary-blue);
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.hero-route-info-btn:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.hero-route-info-btn i {
    font-size: 0.875rem;
}

/* Hero: трекер заказа (nfs-ds4-order-track) вместо схемы маршрута */
.nfs-ds4-order-track--hero {
    margin-bottom: 0;
    min-height: 0;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
    border-radius: var(--radius-2xl);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
    border: 1px solid #dbe7ff;
}

/* Модальное окно этапов импорта: скролл у списка, без вложенной «карточки» */
.import-stages-modal .modal-body {
    /* Чуть шире поля слева/справа относительно стандартного Bootstrap */
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

@media (min-width: 576px) {
    .import-stages-modal .modal-body {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.import-stages-modal .timeline-steps {
    max-height: 60vh;
    overflow-y: auto;
}

/* Сегментированный переключатель маршрутов */
.route-switcher {
    display: inline-flex;
    background: rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(37, 99, 235, 0.16);
    border-radius: var(--radius-xl);
    padding: 4px;
    gap: 2px;
}

.route-switcher-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gray-600);
    background: transparent;
    border: none;
    border-radius: calc(var(--radius-xl) - 4px);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.route-switcher-btn:hover {
    color: var(--gray-900);
}

.route-switcher-btn.active {
    background: #fff;
    color: var(--route-accent);
    box-shadow: var(--shadow-sm);
}

.route-map-container {
    position: relative;
    height: 16rem;
    margin-bottom: 1.25rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background: linear-gradient(180deg, #fbfdff 0%, #f5f9ff 100%);
    overflow: hidden;
}

.route-map-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.route-path {
    animation: drawPath 3s ease-in-out infinite;
}

@keyframes drawPath {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 20; }
}

.route-point {
    animation: pulse 2s infinite;
}

.route-label {
    font-size: 0.75rem;
}

.route-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    align-items: stretch;
    min-height: 110px;
}

.route-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    height: 100%;
    min-height: 105px;
    text-align: center;
    padding: 0.8rem 0.7rem;
    border-radius: 0.95rem;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
}

.route-stat .stat-icon {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    margin-bottom: 0.42rem;
    border-radius: 0.65rem;
    background: var(--route-accent-soft);
    color: var(--route-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.route-stat .stat-icon-svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}

/* Текст этапа может занимать 1–2 строки — средняя зона растягивается, срок всегда внизу ряда */
.route-stat .stat-label {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    margin-bottom: 0;
    font-size: 0.76rem;
    color: var(--gray-500);
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0.25rem;
}

.stat-value {
    font-weight: 600;
    font-size: 0.875rem;
}

.route-stat .stat-value {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.2rem;
    width: 100%;
    color: var(--gray-900);
    font-weight: 700;
    font-size: 1rem;
}

@media (max-width: 1199px) {
    .nfs-ds4-order-track--hero {
        min-height: 0;
        max-height: none;
    }
}

@media (max-width: 768px) {
    .nfs-ds4-order-track--hero {
        min-height: 0;
        max-height: none;
        height: auto;
    }
}

/* Прогресс-бар уровней */
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--primary-blue), var(--primary-purple), #EC4899);
    transition: width 0.5s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Уровни - галочка завершения */
.level-completed-check {
    position: absolute;
    top: -1rem;
    right: -1rem;
    width: 3rem;
    height: 3rem;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.3s ease-out;
}

.level-card.completed {
    border-color: var(--primary-green);
}

.btn-level.completed {
    background: #D1FAE5;
    color: #065F46;
    cursor: not-allowed;
}

/* Сообщения прогресса анализа */
.progress-messages {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.progress-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    animation: fadeInUp 0.3s ease-out;
}

.bg-blue-50 { background: #EFF6FF; }
.bg-purple-50 { background: #FAF5FF; }
.bg-pink-50 { background: #FDF2F8; }
.bg-green-50 { background: #F0FDF4; }

.bg-blue-500 { background: var(--primary-blue); }
.bg-purple-500 { background: var(--primary-purple); }
.bg-pink-500 { background: #EC4899; }
.bg-green-500 { background: var(--primary-green); }

/* Метрики результатов */
.metric-bar {
    height: 0.5rem;
    background: var(--gray-200);
    border-radius: 9999px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.metric-bar-fill {
    height: 100%;
    transition: width 1s ease-out;
}

.metric-bar-fill.metric-green {
    background: var(--primary-green);
}

.metric-bar-fill.metric-yellow {
    background: var(--primary-yellow);
}

.metric-green { color: var(--primary-green); }
.metric-yellow { color: var(--primary-yellow); }

.results-recommendation {
    background: #FEF3C7;
    border: 2px solid #FCD34D;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.results-recommendation h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--gray-900);
}

.results-recommendation p {
    color: var(--gray-700);
    font-size: 0.875rem;
    margin: 0;
}

.btn-reset-analysis {
    width: 100%;
    text-align: center;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
    margin-top: 1rem;
}

.btn-reset-analysis:hover {
    color: var(--gray-700);
}

/* Мини-игра в футере */
.footer-game-container {
    padding: 2.5rem;
}

.game-input-section {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 639px) {
    .game-input-section {
        flex-direction: column;
        gap: 0.75rem;
    }
}

.game-input {
    flex: 1;
    height: 4rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 0 1rem;
    color: white;
    font-size: 1.125rem;
}

.game-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.btn-check-price {
    padding: 0 2.5rem;
    height: 4rem;
    background: linear-gradient(to right, #F59E0B, #F97316);
    border: none;
    border-radius: var(--radius-xl);
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-xl);
}

@media (max-width: 639px) {
    .btn-check-price {
        width: 100%;
        padding: 0 1.5rem;
    }
}

.btn-check-price:hover:not(:disabled) {
    background: linear-gradient(to right, #D97706, #EA580C);
    transform: scale(1.02);
}

.btn-check-price:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.game-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-lg);
    padding: 1rem;
    text-align: center;
    color: #93C5FD;
    font-size: 0.875rem;
}

.game-hint i {
    flex-shrink: 0;
    color: #93C5FD;
}

.game-result-content {
    text-align: center;
    animation: fadeInUp 0.6s ease-out;
}

.game-icon {
    font-size: 4.5rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.95);
}

.game-icon i {
    display: block;
}

.game-message {
    font-size: 1.875rem;
    color: white;
    margin-bottom: 1.5rem;
}

.game-price-info {
    background: rgba(59, 130, 246, 0.2);
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: var(--radius-xl);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.game-price-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.5rem;
}

.game-price-info strong {
    color: white;
    font-size: 1.875rem;
    display: block;
    margin-top: 0.5rem;
}

.game-difference {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.game-tokens {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(234, 179, 8, 0.2);
    border: 2px solid rgba(234, 179, 8, 0.4);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.game-tokens i {
    font-size: 3rem;
    color: #FCD34D;
}

.tokens-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: #FCD34D;
}

.tokens-label {
    font-size: 0.875rem;
    color: #FDE68A;
}

.btn-play-again {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: 0.875rem 2rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-play-again:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Победа в уровнях */
.victory-message {
    margin-top: 3rem;
    animation: fadeInUp 0.6s ease-out;
}

.victory-content {
    background: linear-gradient(to right, #FEF3C7, #FED7AA);
    border: 2px solid #FCD34D;
    border-radius: var(--radius-2xl);
    padding: 3rem;
    text-align: center;
}

.victory-icon {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    color: var(--primary-purple);
}

.victory-icon i {
    display: block;
}

.victory-content h3 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
    color: var(--gray-900);
}

.victory-content p {
    font-size: 1.25rem;
    color: var(--gray-700);
    margin-bottom: 2rem;
}

.btn-victory {
    background: linear-gradient(to right, var(--primary-blue), var(--primary-purple), #EC4899);
    border: none;
    border-radius: var(--radius-xl);
    padding: 1.5rem 3rem;
    color: white;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-2xl);
}

.btn-victory:hover {
    transform: scale(1.05);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Прогресс-бар уровней */
.progress-section {
    background: white;
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    border: 2px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
    margin-bottom: 3rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.progress-title i {
    color: #F59E0B;
}

.progress-text {
    font-size: 1.125rem;
}

.progress-text .font-bold {
    font-weight: 700;
    color: var(--primary-blue);
}

.progress-bar-wrapper {
    height: 1rem;
    background: var(--gray-100);
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid var(--gray-200);
}

/* Мини-игра в футере */
.footer-game {
    background: linear-gradient(to bottom right, #111827, rgba(37, 99, 235, 0.2), rgba(147, 51, 234, 0.2));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4rem 0;
}

.footer-game-card {
    max-width: 42rem;
    margin: 0 auto;
    background: linear-gradient(to bottom right, rgba(30, 58, 138, 0.5), rgba(88, 28, 135, 0.5));
    backdrop-filter: blur(8px);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    box-shadow: var(--shadow-2xl);
}

.footer-game-header {
    text-align: center;
    margin-bottom: 2rem;
}

.game-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(234, 179, 8, 0.2);
    border: 2px solid rgba(234, 179, 8, 0.4);
    border-radius: 9999px;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
}

.game-badge i {
    font-size: 1.5rem;
    color: #FCD34D;
}

.game-badge span {
    font-size: 1.125rem;
    font-weight: 600;
    color: #FDE68A;
}

.footer-game-header h4 {
    font-size: 1.875rem;
    margin-bottom: 0.75rem;
    color: white;
}

.footer-game-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.125rem;
}

.footer-game-header strong {
    color: #93C5FD;
}

/* Дополнительные эффекты для карточек */
.car-glow {
    position: absolute;
    inset: -8px;
    background: var(--primary-blue);
    border-radius: 24px;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.car-card:hover .car-glow {
    opacity: 0.15;
}

.car-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.car-card:hover .car-overlay {
    opacity: 1;
}

/* Онлайн индикатор */
.online-dot {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 0.5rem;
    height: 0.5rem;
    background: white;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.btn-car-contact.online {
    position: relative;
}

/* Анимация загрузки */
@keyframes loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.analyzing-animation .loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, var(--nfs-blue), var(--nfs-purple), var(--nfs-pink));
    animation: loading 2s ease-in-out infinite;
}

/* ==========================================================================
   МОБИЛЬНАЯ АДАПТАЦИЯ (сквозная)
   ========================================================================== */

/* Hero-фильтры в колонки на мобильных */
/* Планшет: первая строка — 2+кнопка, вторая — 2 колонки */
@media (max-width: 1199.98px) {
    #heroSection .hero-filter-row--primary {
        flex-wrap: wrap;
    }

    #heroSection .hero-filter-row--primary .hero-filter-grid--row1 {
        flex: 1 1 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #heroSection .hero-filter-row--primary .hero-filter-actions-row {
        flex: 1 1 auto;
        margin-left: auto;
    }

    #heroSection .hero-filter-row--secondary .hero-filter-grid--row2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #heroSection .hero-filter-row--secondary .hero-filter-price-inline {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .hero-filter-row-main {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-filter-row-main .hero-filter-grid-primary {
        flex: 1 1 auto;
        width: 100%;
        grid-template-columns: 1fr;
    }

    #heroSection .hero-filter-row--primary {
        flex-direction: column;
        align-items: stretch;
    }

    #heroSection .hero-filter-row--primary .hero-filter-grid--row1,
    #heroSection .hero-filter-row--secondary .hero-filter-grid--row2 {
        grid-template-columns: 1fr;
    }

    #heroSection .hero-filter-row--secondary .hero-filter-price-inline {
        grid-column: 1;
    }

    #heroSection .hero-filter-row--primary .hero-filter-actions-row {
        width: 100%;
        margin-left: 0;
    }

    .hero-filter-actions-row {
        justify-content: stretch;
        flex-wrap: wrap;
        width: 100%;
    }

    .hero-filter-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .hero-filter-grid .hero-filter-select {
        min-width: 0;
        width: 100%;
    }

    #heroSection .hero-range-picker,
    #heroSection .hero-brand-picker,
    #heroSection .hero-model-picker {
        width: 100%;
        min-width: 0;
    }

    #heroSection .hero-filter-actions-row .hero-btn-search,
    #heroSection .hero-filter-actions-row .hero-filter-toolbar-submit {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .hero-filter-tags-wrap {
        flex-direction: column;
        align-items: flex-start;
    }
    .hero-filter-tags {
        width: 100%;
    }
    .hero-filter-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
    .hero-filter-tags-wrap--toolbar {
        width: 100%;
    }
    .hero-filter-toolbar-grow {
        display: none;
    }
    .hero-filter-toolbar-row .hero-btn-search {
        width: 100%;
        justify-content: center;
        min-width: 0;
    }
    .hero-title-new {
        font-size: 1.75rem;
    }
    .hero-subtitle-new {
        font-size: var(--text-md);
    }
}

/* Карточки: 1 колонка на мобильных */
@media (max-width: 575px) {
    .cars-grid-new {
        grid-template-columns: 1fr !important;
    }
}

/* Features/Levels: 1 колонка на мобильных */
@media (max-width: 767px) {
    .features-grid,
    .levels-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Footer: вертикальная компоновка */
@media (max-width: 767px) {
    .footer-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-footer-cta,
    .btn-footer-cta-secondary {
        width: 100%;
        justify-content: center;
    }
}

/* Секция AI-помощника на мобильных */
@media (max-width: 767px) {
    .ai-content-wrapper {
        flex-direction: column;
    }
    .ability-list {
        grid-template-columns: 1fr !important;
    }
}

/* Секция Импорта: вкладки в столбик на мобильных */
@media (max-width: 575px) {
    .tabs-header {
        flex-direction: column;
        gap: 0.25rem;
    }
    .tab-btn {
        width: 100%;
        text-align: center;
    }
}

/* ==========================================================================
   ИНТЕРАКТИВНЫЕ СОСТОЯНИЯ
   ========================================================================== */

/* Focus-visible для accessibility */
*:focus-visible {
    outline: 2px solid var(--nfs-blue);
    outline-offset: 2px;
}

/* Убираем outline для мыши */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Кнопки: disabled + loading */
button:disabled,
.btn:disabled,
.btn-cta:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.25rem;
    height: 1.25rem;
    margin: -0.625rem 0 0 -0.625rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* Empty-state для пустых списков */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--gray-500);
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--gray-300);
    margin-bottom: 1rem;
}

.empty-state-icon i {
    display: block;
}

.empty-state-title {
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.empty-state-text {
    font-size: var(--text-base);
    color: var(--gray-500);
    max-width: 360px;
    margin: 0 auto;
}

/* Смягчение hover-эффектов на всех интерактивных элементах */
a, button, [role="button"], input, select, textarea {
    transition-duration: 150ms;
}

/* Кнопка btn-cta: единый стиль */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    font-size: var(--text-md);
    font-weight: var(--font-weight-semibold);
    color: white;
    background: var(--nfs-blue);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-cta:hover {
    background: var(--nfs-blue-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    color: white;
}

/* Section badge: единый стиль */
.section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: var(--blue-50);
    color: var(--nfs-blue);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full);
    border: 1px solid var(--blue-200);
    width: fit-content;
    margin-bottom: 0.75rem;
}

/* Section title/description: единообразие */
.section-title {
    font-size: var(--text-3xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--leading-tight);
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

.section-description {
    font-size: var(--text-lg);
    color: var(--gray-600);
    line-height: var(--leading-relaxed);
    max-width: 600px;
}

.gradient-text {
    background: var(--gradient-brand);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Tabs: единый стиль */
.tab-btn {
    padding: 0.625rem 1.25rem;
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
    background: transparent;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-btn:hover {
    color: var(--gray-700);
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.tab-btn.active {
    color: white;
    background: var(--nfs-blue);
    border-color: var(--nfs-blue);
}

/* Level card btn */
.btn-level {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--nfs-blue);
    background: var(--blue-50);
    border: 1px solid var(--blue-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-level:hover {
    background: var(--nfs-blue);
    color: white;
    border-color: var(--nfs-blue);
}

/* ═══════════════════════════════════════════════════════════
   Hero — референс nfsauto_homepage (тёмная шапка + hero-inner)
   ═══════════════════════════════════════════════════════════ */

.hero-section--ref {
    position: relative;
    padding: 0;
    background: linear-gradient(155deg, #0d1117 0%, #111827 55%, #1a2035 100%);
    overflow: hidden;
    /* Слияние с тёмной шапкой: перекрываем возможную 1px щель body */
    margin-top: -1px;
    padding-top: 1px;
}

.hero-section--ref .hero-gradient {
    opacity: 0.45;
    background: radial-gradient(ellipse 60% 40% at 30% 50%, rgba(26, 95, 217, 0.12) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 30%, rgba(59, 127, 255, 0.08) 0%, transparent 70%);
}

.hero-section--ref .hero-mesh {
    opacity: 0.15;
}

.hero-section--ref.hero-section--floating-light {
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 55%, #eef2f7 100%);
}

.hero-section--floating-light.hero-section--ref .hero-gradient {
    opacity: 1;
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(59, 127, 255, 0.16) 0%, transparent 65%),
        radial-gradient(circle at 18% 24%, rgba(59, 127, 255, 0.09) 0%, transparent 45%),
        radial-gradient(circle at 82% 70%, rgba(26, 95, 217, 0.06) 0%, transparent 48%);
}

.hero-section--floating-light.hero-section--ref .hero-mesh {
    opacity: 0.55;
    background:
        radial-gradient(circle at 30% 20%, rgba(15, 23, 42, 0.045) 0%, transparent 52%),
        radial-gradient(circle at 70% 85%, rgba(15, 23, 42, 0.035) 0%, transparent 52%);
}

.hero-stack--floating-center {
    position: relative;
    min-height: clamp(380px, 48vw, 560px);
    padding: 2.85rem 0 2rem;
    box-sizing: border-box;
}

.hero-floating-plane {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.hero-copy-centered {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    max-width: min(54rem, 100%);
    text-align: center;
}

.hero-copy-centered .hero-eyebrow {
    margin-inline: auto;
}

.hero-section--floating-light .hero-copy-centered .hero-eyebrow {
    background: rgba(26, 95, 217, 0.08);
    border-color: rgba(59, 127, 255, 0.22);
    color: #2764cf;
}

.hero-copy-centered .hero-stats--ref {
    justify-content: center;
}

.hero-copy-centered .hero-cta--ref {
    justify-content: center;
}

.hero-section--floating-light .hero-copy-centered .hero-title--ref.hero-title,
.hero-section--floating-light .hero-copy-centered h1.hero-title--ref {
    color: #0f172a;
}

.hero-section--floating-light .hero-copy-centered .hero-sub--ref {
    color: rgba(15, 23, 42, 0.62);
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

.hero-section--floating-light .hero-copy-centered .hero-stats--ref .hero-stat-val {
    color: #0f172a;
}

.hero-section--floating-light .hero-copy-centered .hero-stat-val--accent {
    color: #1754d9;
}

.hero-section--floating-light .hero-copy-centered .hero-stat-lbl {
    color: rgba(15, 23, 42, 0.45);
}

.hero-section--floating-light .hero-copy-centered .hero-stat-div {
    background: rgba(15, 23, 42, 0.12);
}

.hero-section--floating-light .hero-copy-centered .btn-hero-ghost {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: rgba(15, 23, 42, 0.74);
}

.hero-section--floating-light .hero-copy-centered .btn-hero-ghost:hover {
    background: rgba(15, 23, 42, 0.06);
    color: #0f172a;
    border-color: rgba(15, 23, 42, 0.22);
}

.hero-floating-plane .hero-floating-brands {
    width: 100%;
    height: 100%;
    min-height: clamp(300px, 46vw, 480px);
}

/* max-width/padding — от класса .container (как у блока с .hero-filter-card) */
.hero-inner {
    position: relative;
    z-index: 1;
}

.hero-grid--ref {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    min-height: 320px;
    padding: 32px 0 24px;
}

/* ShuffleHero-стиль: две равноправные колонки, больше «воздуха» */
.hero-section--shuffle .hero-inner.container {
    max-width: 72rem;
}

.hero-grid--shuffle {
    grid-template-columns: minmax(0, 1fr) minmax(260px, min(42vw, 420px));
    gap: 2rem;
    align-items: center;
    min-height: 0;
    padding: 3rem 0 1.5rem;
}

.hero-shuffle-wrap,
.hero-floating-brands-wrap {
    width: 100%;
    max-width: 28rem;
    margin-left: auto;
    justify-self: end;
    /* FLIP: плитки на время движения не обрезать */
    overflow: visible;
    z-index: 1;
}

.hero-shuffle-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    width: 100%;
    height: clamp(280px, 40vw, 450px);
    gap: 4px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero-shuffle-grid.hero-shuffle-grid--animating {
    overflow: visible;
}

.hero-floating-brands {
    width: 100%;
    height: clamp(280px, 40vw, 450px);
    position: relative;
    overflow: visible;
    isolation: isolate;
    --hero-brand-size: clamp(48px, 11vw, 72px);
    pointer-events: none;
}

.hero-floating-sprite-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.hero-brand-slot {
    position: absolute;
    box-sizing: border-box;
    width: var(--hero-brand-size);
    height: var(--hero-brand-size);
    margin: 0;
    padding: 0;
    --repel-x: 0px;
    --repel-y: 0px;
    transform: translate3d(calc(-50% + var(--repel-x)), calc(-50% + var(--repel-y)), 0);
}

.hero-brand-drift {
    width: 100%;
    height: 100%;
    padding: 0;
    animation: nfs-hero-brand-drift var(--drift-duration, 12s) ease-in-out infinite alternate;
    animation-delay: var(--drift-delay, 0s);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .hero-brand-drift {
        animation: none !important;
    }
}

.hero-brand-face {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

.hero-brand-face--png {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow:
        0 16px 36px rgba(15, 23, 42, 0.1),
        0 1px 3px rgba(15, 23, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    padding: 8px;
    color: #0f172a;
}

.hero-brand-img-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-brand-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.hero-brand-fallback-letter {
    display: none;
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: rgba(15, 23, 42, 0.3);
}

.hero-brand-img-wrap.is-missing .hero-brand-img {
    display: none;
}

.hero-brand-img-wrap.is-missing .hero-brand-fallback-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hero-brand-svg {
    width: clamp(34px, 8.5vw, 44px);
    height: clamp(34px, 8.5vw, 44px);
    display: block;
}

@keyframes nfs-hero-brand-drift {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
    40% {
        transform: translate3d(7px, -9px, 0) rotate(5deg);
    }
    100% {
        transform: translate3d(-8px, 7px, 0) rotate(-5deg);
    }
}

.hero-shuffle-cell {
    width: 100%;
    min-height: 0;
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.06);
    background-size: cover;
    background-position: center;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    backface-visibility: hidden;
    transform: translateZ(0);
    /* transition на transform выставляет JS (1.5s spring-like) */
}

.hero-left--shuffle .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
}

.hero-left--shuffle .hero-title--ref.hero-title,
.hero-left--shuffle h1.hero-title--ref {
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.08;
}

.hero-left--shuffle .hero-sub--ref {
    font-size: 15px;
    line-height: 1.65;
    max-width: 32rem;
}

.hero-left--ref {
    padding: 16px 0 8px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(26, 95, 217, 0.12);
    border: 0.5px solid rgba(59, 127, 255, 0.3);
    color: #7ab3ff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.hero-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--nfs-blue3, #3b7fff);
    animation: pulse 1.5s ease-in-out infinite;
}

.hero-title--ref.hero-title,
h1.hero-title--ref {
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 14px 0;
}

.hero-title--ref em {
    font-style: normal;
    background: linear-gradient(135deg, var(--nfs-blue3, #3b7fff) 0%, #7ab3ff 40%, var(--nfs-blue3, #3b7fff) 80%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

.hero-sub--ref {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.7;
    margin: 0 0 28px 0;
    max-width: 460px;
}

.hero-stats--ref {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.hero-stats--ref .hero-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hero-stat-val {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.hero-stat-val--accent {
    color: #7ab3ff;
}

.hero-stat-val--rating {
    background: linear-gradient(135deg, #22c55e, #14a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-stat-lbl {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hero-stat-div {
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    align-self: stretch;
}

.hero-cta--ref {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(150deg, var(--nfs-blue3, #3b7fff), var(--nfs-blue, #1a5fd9), #1248b0);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 0 0 1px rgba(59, 127, 255, 0.5), 0 0 20px rgba(59, 127, 255, 0.25), 0 4px 14px rgba(26, 95, 217, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.15) inset;
    transition: transform 0.15s, box-shadow 0.2s;
    cursor: pointer;
}

.btn-hero-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px rgba(59, 127, 255, 0.6), 0 0 24px rgba(59, 127, 255, 0.3), 0 6px 18px rgba(26, 95, 217, 0.4);
}

.btn-hero-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-hero-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.hero-route--ref {
    flex-shrink: 0;
    align-self: center;
}

@media (min-width: 992px) and (max-width: 1279px) {
    /* Ноутбучная ширина: маршрутная карточка не должна душить левую колонку hero */
    .hero-grid--ref {
        grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
        gap: 28px;
    }

    .hero-grid--ref.hero-grid--shuffle {
        grid-template-columns: minmax(0, 1fr) minmax(240px, min(50vw, 400px));
        gap: 1.5rem;
    }

    .hero-left--ref,
    .hero-route--ref {
        min-width: 0;
    }

    .hero-route--ref {
        width: 100%;
        max-width: 600px;
        justify-self: end;
    }

    .hero-shuffle-wrap,
    .hero-floating-brands-wrap {
        max-width: 100%;
    }

    .nfs-ds4-order-track--hero {
        padding: 1.1rem 1.2rem;
        min-height: 0;
        max-height: none;
    }
}

@media (max-width: 991px) {
    .hero-grid--ref {
        grid-template-columns: 1fr;
    }

    .hero-grid--shuffle,
    .hero-stack--floating-center {
        padding: 1.75rem 0 1.25rem;
    }

    .hero-left--ref {
        min-width: 0;
        max-width: 100%;
    }

    .hero-route--ref {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        justify-self: stretch;
    }

    .hero-shuffle-wrap,
    .hero-floating-brands-wrap {
        max-width: 100%;
        margin-left: 0;
        margin-right: auto;
        justify-self: stretch;
    }

    .hero-shuffle-grid,
    .hero-floating-brands {
        height: min(400px, 70vw);
    }
}

@media (max-width: 576px) {
    .hero-stats--ref {
        gap: 16px;
    }

    h1.hero-title--ref {
        font-size: 24px;
    }
}

/* Hero ref: мобилка — подпись не вылезает, CTA в одну строку, трекер на всю ширину колонки */
@media (max-width: 767px) {
    .hero-sub--ref {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }

    .hero-cta--ref {
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    #heroSection .hero-cta--ref .nfs-listings-btn-more,
    #heroSection .hero-cta--ref .btn-hero-ghost {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        font-size: 0.8125rem;
        padding: 0.6rem 0.65rem;
    }

    #heroSection .nfs-ds4-order-track.nfs-ds4-order-track--hero {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 1rem 0.875rem;
    }

    #heroSection .hero-shuffle-wrap,
    #heroSection .hero-floating-brands-wrap {
        width: 100% !important;
    }

    #heroSection .hero-shuffle-grid,
    #heroSection .hero-floating-brands {
        height: min(360px, 85vw);
    }

    #heroSection .hero-stats--ref {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        align-items: stretch;
        margin-bottom: 24px;
    }

    #heroSection .hero-stats--ref .hero-stat {
        min-width: 0;
        min-height: 68px;
        padding: 10px 8px;
        border-radius: 12px;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    }

    #heroSection .hero-stats--ref .hero-stat-div {
        display: none;
    }

    #heroSection .hero-stats--ref .hero-stat-val {
        font-size: 16px;
    }

    #heroSection .hero-stats--ref .hero-stat-lbl {
        font-size: 8px;
        line-height: 1.25;
        letter-spacing: 0.06em;
        text-transform: none;
    }
}

/* === css/nfs-filter-select.css === */
/**
 * Общие стили выпадающих списков и полей фильтра (каталог + главная).
 */

.catalog-filter-select,
.catalog-filter-select--trigger,
.hero-filter-select.hero-filter-select--trigger {
  --catalog-filter-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%235A6480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.625rem 2.25rem 0.625rem 0.875rem;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nfs-t2, #2a3450);
  background-color: var(--nfs-ch1, #f4f6fa);
  background-image: linear-gradient(180deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #f4f6fa) 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-image 0.2s ease, color 0.2s ease;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  appearance: none;
  -webkit-appearance: none;
  text-overflow: ellipsis;
}

.catalog-filter-select--trigger::after,
.hero-filter-select.hero-filter-select--trigger::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0.75rem;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  background: var(--catalog-filter-chevron) center / contain no-repeat;
  flex-shrink: 0;
}

select.catalog-filter-select:not(.catalog-filter-select--trigger) {
  background-image:
    linear-gradient(180deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #f4f6fa) 100%),
    var(--catalog-filter-chevron);
  background-position: 0 0, right 0.75rem center;
  background-size: 100% 100%, 14px 14px;
  background-repeat: no-repeat, no-repeat;
}

.catalog-filter-select--trigger,
.hero-filter-select.hero-filter-select--trigger {
  display: flex;
  align-items: center;
  text-align: left;
}

.catalog-filter-select--trigger > span,
.hero-filter-select.hero-filter-select--trigger > span {
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalog-filter-select--trigger > svg,
.hero-filter-select.hero-filter-select--trigger > svg {
  display: none !important;
}

.catalog-filter-select--native,
.hero-filter-select--native {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.catalog-filter-select:hover,
.catalog-filter-select--trigger:hover,
.hero-filter-select.hero-filter-select--trigger:hover {
  --catalog-filter-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%231A5FD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  z-index: 1;
  border-color: rgba(26, 95, 217, 0.45);
  box-shadow:
    0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, 0.18)),
    0 1px 3px rgba(0, 0, 0, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.catalog-filter-select--trigger:hover,
.hero-filter-select.hero-filter-select--trigger:hover {
  background-image: linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 0.55) 100%);
}

select.catalog-filter-select:not(.catalog-filter-select--trigger):hover {
  background-image:
    linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 0.55) 100%),
    var(--catalog-filter-chevron);
}

.catalog-filter-select--trigger:focus,
.catalog-filter-select--trigger:focus-visible,
.hero-filter-select.hero-filter-select--trigger:focus,
.hero-filter-select.hero-filter-select--trigger:focus-visible,
select.catalog-filter-select:not(.catalog-filter-select--trigger):focus,
select.catalog-filter-select:not(.catalog-filter-select--trigger):focus-visible {
  --catalog-filter-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%231A5FD9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  z-index: 2;
  outline: none;
  border-color: var(--nfs-blue, #1a5fd9);
  box-shadow:
    0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, 0.22)),
    0 1px 3px rgba(0, 0, 0, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.catalog-filter-select--trigger:focus,
.catalog-filter-select--trigger:focus-visible,
.hero-filter-select.hero-filter-select--trigger:focus,
.hero-filter-select.hero-filter-select--trigger:focus-visible {
  background-image: linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 0.55) 100%);
}

select.catalog-filter-select:not(.catalog-filter-select--trigger):focus,
select.catalog-filter-select:not(.catalog-filter-select--trigger):focus-visible {
  background-image:
    linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 0.55) 100%),
    var(--catalog-filter-chevron);
}

.catalog-filter-select--trigger.is-selected,
.catalog-filter-select.is-selected,
.hero-filter-select.hero-filter-select--trigger.is-selected {
  color: var(--nfs-blue, #1a5fd9);
  border-color: rgba(26, 95, 217, 0.3);
  font-weight: 600;
}

.catalog-filter-select--trigger.is-selected,
.hero-filter-select.hero-filter-select--trigger.is-selected {
  background-image: linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 0.9) 100%);
}

select.catalog-filter-select.is-selected:not(.catalog-filter-select--trigger) {
  background-image:
    linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 0.9) 100%),
    var(--catalog-filter-chevron);
}

.catalog-filter-select--trigger.is-selected:hover,
.hero-filter-select.hero-filter-select--trigger.is-selected:hover {
  border-color: rgba(26, 95, 217, 0.5);
  background-image: linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 1) 100%);
}

select.catalog-filter-select.is-selected:not(.catalog-filter-select--trigger):hover {
  border-color: rgba(26, 95, 217, 0.5);
  background-image:
    linear-gradient(180deg, var(--nfs-white, #fff) 0%, rgba(238, 244, 255, 1) 100%),
    var(--catalog-filter-chevron);
}

.catalog-filter-select--trigger:disabled,
.hero-filter-select.hero-filter-select--trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background-color: var(--nfs-ch1, #f4f6fa);
  background-image: none;
}

.catalog-filter-select--trigger.catalog-filter-select--ghost:disabled,
.hero-filter-select.hero-filter-select--trigger.hero-filter-select--ghost:disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Числовые поля «от / до» в том же визуальном стиле */
.catalog-filter-input,
.hero-filter-range-input {
  width: 100%;
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0 0.875rem;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nfs-t2, #2a3450);
  background-color: var(--nfs-ch1, #f4f6fa);
  background-image: linear-gradient(180deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #f4f6fa) 100%);
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
  border-radius: 8px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.catalog-filter-input::placeholder,
.hero-filter-range-input::placeholder {
  color: var(--nfs-t3, #5a6480);
  opacity: 0.9;
}

.catalog-filter-input:hover,
.hero-filter-range-input:hover {
  border-color: rgba(26, 95, 217, 0.45);
  box-shadow:
    0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, 0.18)),
    0 1px 3px rgba(0, 0, 0, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.catalog-filter-input:focus,
.hero-filter-range-input:focus {
  outline: none;
  border-color: var(--nfs-blue, #1a5fd9);
  box-shadow:
    0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, 0.22)),
    0 1px 3px rgba(0, 0, 0, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* === css/nfs-hero-filter.css === */
/**
 * NFS Hero Filter — дизайн-система v3
 * Хромовые градиенты, неоновые ховеры, анимированные полосы
 */

/* ══════════════════════════════════════════════════════════
   FILTER CARD — основной контейнер
   ══════════════════════════════════════════════════════════ */

.hero-filter-card {
  position: relative;
  /* Белый фон (единый с главной) */
  background: #fff;
  border: 0.5px solid rgba(90, 100, 130, 0.16);
  border-radius: var(--nfs-rl, 14px);
  padding: 1rem 1.25rem 1.35rem;
  box-shadow:
    0 2px 14px rgba(15, 23, 42, 0.07),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  overflow: visible;
}

.hero-filter-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Верхняя полоса отключена (единый вид с макетом героя) */
.hero-filter-card::before {
  display: none;
}

/* ══════════════════════════════════════════════════════════
   «Ещё» / «Очистить» слева от кнопки «Показать»
   ══════════════════════════════════════════════════════════ */

.hero-filter-toolbar-near-submit {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
}

.hero-filter-icon-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  padding: 0.2rem 0.45rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  transition: background 0.2s ease;
}

.hero-filter-icon-action:hover {
  background: rgba(58, 66, 96, 0.07);
}

.hero-filter-icon-action:focus-visible {
  outline: 2px solid var(--nfs-blue, #1A5FD9);
  outline-offset: 2px;
}

.hero-filter-icon-action__ico {
  color: var(--nfs-t3, #5A6480);
  flex-shrink: 0;
}

.hero-filter-icon-action:hover .hero-filter-icon-action__ico {
  color: var(--nfs-t2, #2A3450);
}

.hero-filter-action-label {
  line-height: 1.1;
  white-space: nowrap;
}

.hero-filter-action-label--green {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(118deg, #4ade80 0%, #22c55e 38%, #16a34a 72%, #15803d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-filter-action-label--red {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: linear-gradient(118deg, #fb7185 0%, #f43f5e 40%, #e11d48 78%, #b91c1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ══════════════════════════════════════════════════════════
   HEADER — заголовок с полоской
   ══════════════════════════════════════════════════════════ */

.hero-filter-head {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 0.5px solid var(--nfs-b1, rgba(58,66,96,0.07));
}

.hero-filter-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--nfs-t1, #0D1117);
  margin: 0 0 0.35rem 0;
}

/* Полоска-индикатор слева (три цвета) */
.hero-filter-heading::before {
  content: '';
  width: 4px;
  height: 1.25rem;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(180deg, 
    var(--nfs-blue, #1A5FD9) 33%, 
    var(--nfs-red, #C92222) 33% 66%, 
    var(--nfs-ch3, #B8C0D4) 66%
  );
}

.hero-filter-lead {
  margin: 0 0 0 calc(4px + 0.6rem);
  font-size: 0.8125rem;
  color: var(--nfs-t3, #5A6480);
  line-height: 1.45;
}

.hero-filter-head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.hero-filter-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   TEXT BUTTONS — «Все параметры», «Сбросить»
   ══════════════════════════════════════════════════════════ */

.hero-filter-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nfs-blue, #1A5FD9);
  background: transparent;
  border: none;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.hero-filter-text-btn:hover {
  background: linear-gradient(135deg, rgba(59,127,255,0.08), rgba(26,95,217,0.04));
  color: var(--nfs-blue, #1A5FD9);
}

.hero-filter-text-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--nfs-blue-glow, rgba(26,95,217,0.22));
}

.hero-filter-text-btn--muted {
  color: var(--nfs-t3, #5A6480);
}

.hero-filter-text-btn--muted:hover {
  color: var(--nfs-red, #C92222);
  background: linear-gradient(135deg, rgba(201,34,34,0.06), rgba(201,34,34,0.02));
}

.hero-filter-text-btn-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

/* Стили триггеров — nfs-filter-select.css (общие с каталогом) */

/* Перебить legacy home.css — главная и каталог (.hero-filter-card) */
.hero-filter-card .catalog-filter-select,
.hero-filter-card .catalog-filter-select--trigger,
.hero-filter-card .hero-filter-select.catalog-filter-select--trigger {
  min-width: 0;
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04) inset,
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.hero-filter-card .catalog-filter-input,
.hero-filter-card .hero-filter-range-input {
  min-width: 0;
  border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
}

/* Фиксированная высота триггеров и нативных select */
.hero-filter-card .catalog-filter-grid .catalog-filter-select,
.hero-filter-card .catalog-filter-grid .catalog-filter-select--trigger,
#heroSection .hero-filter-grid-primary .catalog-filter-select--trigger,
#heroSection .hero-filter-grid-primary .hero-filter-select--trigger,
#heroSection .hero-filter-range-block .catalog-filter-select--trigger,
#heroSection .hero-filter-range-block .hero-filter-select--trigger {
  min-width: 0;
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════
   GRID — сетка полей
   ══════════════════════════════════════════════════════════ */

.hero-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .hero-filter-grid-primary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .hero-filter-grid-primary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .hero-filter-grid-primary {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Hero-фильтр av.by: две строки + кнопка на уровне первой */
#heroSection .hero-filter-row-main--av {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  width: 100%;
}

#heroSection .hero-filter-row--secondary:not(.is-collapsed) {
  margin-top: 0.15rem;
}

#heroSection .hero-filter-row--primary {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.65rem 0.75rem;
  width: 100%;
}

#heroSection .hero-filter-row--primary .hero-filter-grid--row1 {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem 0.75rem;
  align-items: stretch;
}

#heroSection .hero-filter-grid--row1 > .hero-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

#heroSection .hero-filter-grid--row1 .hero-filter-field__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nfs-t3, #5a6480);
  line-height: 1.2;
}

#heroSection .hero-filter-grid--row1 .hero-filter-field--picker .hero-filter-picker {
  position: relative;
  width: 100%;
  min-width: 0;
}

#heroSection .hero-filter-row--primary .hero-filter-actions-row {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  flex: 0 0 auto;
  align-self: stretch;
  margin: 0;
  min-width: min(100%, 14.5rem);
}

#heroSection .hero-filter-actions-row__title {
  visibility: hidden;
  user-select: none;
  pointer-events: none;
  margin: 0;
  min-height: calc(0.75rem * 1.2);
}

#heroSection .hero-filter-row--primary .hero-filter-toolbar-submit,
#heroSection .hero-filter-row--primary .hero-btn-search {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  /* Без transition: all — иначе кнопка «пульсирует» при смене ширины цифр */
  transition: opacity 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

#heroSection #carCountBtn {
  font-variant-numeric: tabular-nums;
}

/* Пересчёт count_only: без смены opacity — иначе «пульс» вместе с анимацией цифр */
#heroSection .hero-btn-search.is-hero-count-loading {
  cursor: wait;
  filter: brightness(0.97);
}

#heroSection .hero-filter-row--secondary.is-collapsed {
  display: none;
}

#heroSection .hero-filter-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  width: 100%;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

#heroSection .hero-filter-expand-btn__chevron {
  transition: transform 0.2s ease;
}

#heroSection .hero-filter-expand-btn[aria-expanded='true'] .hero-filter-expand-btn__chevron {
  transform: rotate(180deg);
}

/* Ряд диапазонов: год, цена, пробег — внизу расширенных фильтров */
#heroSection .hero-filter-row--secondary .hero-filter-grid--row-ranges {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 0.65fr);
  gap: 0.75rem 1rem;
  width: 100%;
  margin-top: 0.75rem;
  align-items: start;
}

#heroSection .hero-filter-grid--row-ranges .hero-filter-range-block__title {
  min-height: calc(0.8125rem * 1.25);
}

#heroSection .hero-filter-grid--row-ranges > .hero-filter-picker,
#heroSection .hero-filter-grid--row-ranges > .hero-filter-range-block {
  min-width: 0;
}

/* Блоки «Год производства» и «Цена» — без серой подложки, как остальные поля */
#heroSection .hero-filter-range-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

#heroSection .hero-filter-range-block__title {
  margin: 0;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nfs-t1, #1a2035);
  line-height: 1.25;
}

#heroSection .hero-filter-range-block__title--spacer {
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}

#heroSection .hero-filter-range-block__rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

#heroSection .hero-filter-range-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

#heroSection .hero-filter-range-row__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

#heroSection .hero-filter-range-row__suffix {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nfs-t2, #3a4260);
  white-space: nowrap;
  padding-left: 0.1rem;
}

#heroSection .hero-filter-range-block--year .hero-filter-picker {
  min-width: 0;
}

#heroSection .hero-filter-range-block__control {
  min-width: 0;
}

#heroSection .hero-filter-range-block--mileage .hero-filter-picker {
  width: 100%;
  min-width: 0;
}

#heroSection .hero-filter-range-block__inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

#heroSection .hero-filter-picker {
  align-self: start;
}

/* Hero не растягивается от выпадающих списков (панели — position:fixed в body) */
#heroSection.hero-section:not(.hero-section--dual-gateway) {
  position: relative;
  z-index: 5;
  overflow: hidden;
}

#heroSection.hero-section--dual-gateway {
  position: relative;
  z-index: 5;
  overflow: visible;
}

@media (max-width: 1023px) {
  #heroSection.hero-section,
  #heroSection.hero-section--dual-gateway {
    scroll-margin-top: calc(var(--nfs-header-offset-base, 72px) + env(safe-area-inset-top, 0px) + 8px);
  }
}

#carListingsSection.car-listings-section {
  position: relative;
  z-index: 1;
}

#heroSection .hero-filter-block {
  position: relative;
  z-index: 40;
}

#heroSection .hero-filter-card,
#heroSection .hero-filter-row-main,
#heroSection .hero-filter-row--primary,
#heroSection .hero-filter-row--secondary {
  overflow: visible;
}

/* Устаревший inline-цены — оставлено для совместимости каталога */
#heroSection .hero-filter-price-input,
.hero-filter-price-input {
  flex: 1 1 0;
  min-width: 0;
  height: 2.75rem;
  padding: 0 0.65rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 10px;
  font-size: 0.8125rem;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
}

#heroSection .hero-filter-price-sep {
  color: var(--nfs-t3, #5a6480);
  flex-shrink: 0;
}

/* Скрытые поля фильтра (поколение и др.) — разметка и JS сохранены */
.hero-filter-field--ui-hidden {
  display: none !important;
}

/* Ряд атрибутов: кузов, топливо, привод, КПП, объём, цвет, мощность */
#heroSection .hero-filter-row--secondary .hero-filter-grid--row-attrs,
#heroSection .hero-filter-row--secondary .hero-filter-grid--row-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  width: 100%;
  align-items: stretch;
}

#heroSection .hero-filter-row--secondary .hero-filter-grid--row-five + .hero-filter-grid--row-five {
  margin-top: 0.75rem;
}

/* Ячейка ряда атрибутов: заголовок + контрол на одной линии с соседями */
#heroSection .hero-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

#heroSection .hero-filter-field__title {
  margin: 0;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nfs-t1, #1a2035);
  line-height: 1.25;
  min-height: calc(0.8125rem * 1.25);
}

#heroSection .hero-filter-field__title--spacer {
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}

#heroSection .hero-filter-field > .catalog-filter-select,
#heroSection .hero-filter-field--picker .hero-filter-picker {
  width: 100%;
  min-width: 0;
}

#heroSection .hero-filter-field--picker .hero-filter-picker {
  display: block;
}

#heroSection .hero-filter-grid--row-attrs .catalog-filter-select,
#heroSection .hero-filter-grid--row-attrs .hero-filter-field--picker .catalog-filter-select--trigger {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
}

@media (max-width: 1199px) {
  #heroSection .hero-filter-row--secondary .hero-filter-grid--row-attrs,
  #heroSection .hero-filter-row--secondary .hero-filter-grid--row-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #heroSection .hero-filter-row--secondary .hero-filter-grid--row-ranges,
  #heroSection .hero-filter-row--secondary .hero-filter-grid--row-attrs,
  #heroSection .hero-filter-row--secondary .hero-filter-grid--row-five {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════
   QUICK TAGS — пресеты
   ══════════════════════════════════════════════════════════ */

.hero-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
  color: var(--nfs-t3, #5A6480);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.hero-tag:hover {
  background: linear-gradient(135deg, rgba(59,127,255,0.1), rgba(26,95,217,0.05));
  border-color: rgba(26,95,217,0.3);
  color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 0 0 2px var(--nfs-blue-glow, rgba(26,95,217,0.15));
}

.hero-tag.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.35);
  color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26,95,217,0.18));
}

/* Специфичные теги */
.hero-tag-hits:hover,
.hero-tag-hits.active {
  background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.06));
  border-color: rgba(245,158,11,0.35);
  color: #D97706;
  box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}

.hero-tag-korea:hover,
.hero-tag-korea.active {
  background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
  border-color: rgba(26,95,217,0.35);
  color: var(--nfs-blue, #1A5FD9);
}

.hero-tag-ev:hover,
.hero-tag-ev.active {
  background: linear-gradient(135deg, rgba(20,163,74,0.1), rgba(20,163,74,0.04));
  border-color: rgba(20,163,74,0.35);
  color: var(--nfs-green, #14A34A);
  box-shadow: 0 0 0 3px rgba(20,163,74,0.15);
}

.hero-tag-new:hover,
.hero-tag-new.active {
  background: linear-gradient(135deg, rgba(201,34,34,0.08), rgba(201,34,34,0.03));
  border-color: rgba(201,34,34,0.3);
  color: var(--nfs-red, #C92222);
  box-shadow: 0 0 0 3px rgba(201,34,34,0.12);
}

/* ══════════════════════════════════════════════════════════
   TOOLBAR — нижняя панель
   ══════════════════════════════════════════════════════════ */

.hero-filter-toolbar {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.hero-filter-toolbar-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.hero-filter-toolbar-grow {
  flex: 1 1 auto;
  min-width: 1rem;
}

/* ══════════════════════════════════════════════════════════
   SEARCH BUTTON — кнопка поиска с градиентом
   ══════════════════════════════════════════════════════════ */

.hero-btn-search,
.hero-filter-toolbar-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
  position: relative;
  overflow: hidden;
  
  /* Градиент */
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue2, #2B6FE8) 40%, var(--nfs-blue, #1A5FD9) 70%, #1248B0 100%);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 2px 10px rgba(26,95,217,0.3),
    0 0 0 0.5px rgba(26,95,217,0.4);
}

/* Shimmer effect */
.hero-btn-search::after,
.hero-filter-toolbar-submit::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.4s;
  pointer-events: none;
}

.hero-btn-search:hover::after,
.hero-filter-toolbar-submit:hover::after {
  background-position: -200% center;
}

.hero-btn-search:hover,
.hero-filter-toolbar-submit:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(59,127,255,0.6),
    0 0 14px rgba(59,127,255,0.3),
    0 4px 14px rgba(26,95,217,0.35),
    0 1px 0 rgba(255,255,255,0.2) inset;
}

.hero-btn-search:focus-visible,
.hero-filter-toolbar-submit:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--nfs-white, #fff),
    0 0 0 4px var(--nfs-blue, #1A5FD9);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
  .hero-filter-card {
    padding: 1.25rem 1rem 1.5rem;
    border-radius: 12px;
  }
  
  .hero-filter-head-top {
    flex-direction: column;
    align-items: stretch;
  }
  
  .hero-filter-head-actions {
    justify-content: flex-start;
    padding-top: 0.5rem;
  }
  
  .hero-filter-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .hero-filter-grid-primary {
    grid-template-columns: 1fr;
  }
  
  .hero-filter-tags {
    width: 100%;
  }
  
  .hero-filter-toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-filter-toolbar-near-submit {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .hero-filter-toolbar-grow {
    display: none;
  }
  
  .hero-btn-search,
  .hero-filter-toolbar-submit {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════
   MODALS — модальные окна марок, моделей, диапазонов
   ══════════════════════════════════════════════════════════ */

/* Общие стили модалок (диапазон-solo — отдельно, только виджет) */
.hero-brand-modal .modal-content,
.hero-model-modal .modal-content,
.hero-range-modal .modal-content:not(.hero-range-modal-content--solo) {
  border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
  border-radius: var(--nfs-rl, 14px);
  box-shadow: 
    0 24px 56px rgba(15,23,42,0.12),
    0 8px 24px rgba(0,0,0,0.08);
  background: linear-gradient(170deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
  overflow: hidden;
}

/* Статичная полоска сверху модалок марка/модель (без анимации) */
.hero-brand-modal .modal-content::before,
.hero-model-modal .modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--nfs-blue, #1A5FD9) 0%,
    var(--nfs-red, #C92222) 50%,
    var(--nfs-ch3, #B8C0D4) 100%
  );
  z-index: 10;
}

.hero-range-modal .modal-content.hero-range-modal-content--solo::before {
  display: none;
}

/* Компактные модалки: шапка Bootstrap убрана, заголовок внутри body */
.hero-modal-body--compact {
  padding: 0.65rem 0.85rem 0.85rem !important;
  background: transparent;
}

.hero-modal-compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 0.5px solid var(--nfs-b1, rgba(58,66,96,0.08));
}

.hero-modal-compact-title {
  margin: 0;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--nfs-t1, #0D1117);
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}

.hero-brand-modal .hero-modal-body--compact .hero-brand-modal-search,
.hero-model-modal .hero-modal-body--compact .hero-model-modal-search {
  margin-bottom: 0.6rem;
  padding: 0.5rem 0.7rem;
}

/* Body модалок (без compact — запасной отступ) */
.hero-brand-modal .modal-body:not(.hero-modal-body--compact),
.hero-model-modal .modal-body:not(.hero-modal-body--compact) {
  padding: 1rem 1.25rem 1.5rem;
  background: transparent;
}

/* Поиск в модалке марок/моделей */
.hero-brand-modal-search,
.hero-model-modal-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  background: linear-gradient(180deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
  border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
  border-radius: 8px;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
}

.hero-brand-modal-search:focus-within,
.hero-model-modal-search:focus-within {
  border-color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26,95,217,0.18));
}

.hero-brand-modal-search svg,
.hero-model-modal-search svg {
  color: var(--nfs-t4, #9AA0B8);
  flex-shrink: 0;
}

.hero-brand-modal-search-input,
.hero-model-modal-search-input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.875rem;
  color: var(--nfs-t2, #2A3450);
}

.hero-brand-modal-search-input::placeholder,
.hero-model-modal-search-input::placeholder {
  color: var(--nfs-t4, #9AA0B8);
}

/* Сетка марок — 12 столбцов; высота ~3 рядов, дальше скролл */
.hero-brand-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.65rem;
  max-height: min(32.5rem, calc(100vh - 14rem));
  overflow-y: auto;
}

/* Сетка моделей — 4 столбца, ~3 ряда до скролла (карточки выше марок) */
.hero-model-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.65rem;
  max-height: min(44rem, calc(100vh - 14rem));
  overflow-y: auto;
}

@media (max-width: 1200px) {
  .hero-brand-grid {
    grid-template-columns: repeat(8, 1fr);
    max-height: min(30rem, calc(100vh - 13rem));
  }
  .hero-model-grid {
    grid-template-columns: repeat(4, 1fr);
    max-height: min(42rem, calc(100vh - 13rem));
  }
}

@media (max-width: 768px) {
  .hero-brand-grid {
    grid-template-columns: repeat(6, 1fr);
    max-height: min(28rem, calc(100vh - 12rem));
  }
  .hero-model-grid {
    grid-template-columns: repeat(3, 1fr);
    max-height: min(38rem, calc(100vh - 12rem));
  }
}

@media (max-width: 480px) {
  .hero-brand-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .hero-model-grid {
    grid-template-columns: repeat(2, 1fr);
    max-height: min(36rem, calc(100vh - 11rem));
  }
}

/*
 * Модалки «Выбор марки / модели»: не ограничиваем высоту сетки — иначе остаётся пустое место
 * под блоком, а скролл дублируется. Прокрутка — у .modal-body (Bootstrap modal-dialog-scrollable).
 */
.hero-brand-modal .hero-brand-grid,
.hero-model-modal .hero-model-grid {
  max-height: none;
  overflow-y: visible;
}

.hero-brand-modal .hero-brand-grid {
  grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
  gap: 0.65rem;
}

@media (max-width: 991.98px) {
  .hero-brand-modal .hero-brand-grid {
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  }
}

@media (max-width: 575.98px) {
  .hero-brand-modal .hero-brand-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
  }
}

/* Карточка марки */
.hero-brand-card,
.hero-model-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem;
  background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
  border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.hero-brand-card:hover,
.hero-model-card:hover {
  border-color: rgba(26,95,217,0.3);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26,95,217,0.15));
  transform: translateY(-1px);
}

.hero-brand-card.is-selected,
.hero-model-card.is-selected {
  background: linear-gradient(135deg, rgba(59,127,255,0.08), rgba(26,95,217,0.03));
  border-color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26,95,217,0.22));
}

.hero-brand-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nfs-ch1, #F4F6FA);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.hero-brand-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.hero-brand-logo-fallback {
  position: absolute;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nfs-t3, #5A6480);
}

.hero-brand-name,
.hero-model-name {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nfs-t2, #2A3450);
  line-height: 1.25;
  word-break: break-word;
}

/* Модалка марок: без обводки карточки; логотип и название на максимум ячейки */
.hero-brand-modal .hero-brand-card {
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0.2rem 0.1rem 0.35rem;
  gap: 0.35rem;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
}

.hero-brand-modal .hero-brand-card:hover {
  border: none;
  box-shadow: none;
  transform: none;
  background: rgba(26, 95, 217, 0.07);
}

.hero-brand-modal .hero-brand-card.is-selected {
  border: none;
  box-shadow: none;
  background: rgba(26, 95, 217, 0.12);
}

.hero-brand-modal .hero-brand-card:focus-visible {
  outline: 2px solid var(--nfs-blue, #1A5FD9);
  outline-offset: 2px;
}

.hero-brand-modal .hero-brand-logo {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin: 0;
  border-radius: 0.55rem;
  background: transparent;
  flex: 0 0 auto;
  min-width: 0;
  align-self: stretch;
}

.hero-brand-modal .hero-brand-logo img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.hero-brand-modal .hero-brand-logo-fallback {
  font-size: clamp(1.35rem, 4vw, 1.85rem);
}

.hero-brand-modal .hero-brand-name {
  font-size: clamp(0.78rem, 0.9vw + 0.55rem, 0.95rem);
  font-weight: 700;
  line-height: 1.2;
  width: 100%;
  flex: 0 0 auto;
  padding: 0 0.1rem;
  margin: 0;
  display: block;
  text-align: center;
  min-height: 2.4em;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
}

/* Пустое состояние */
.hero-brand-grid-empty,
.hero-model-grid-empty {
  padding: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--nfs-t3, #5A6480);
}

/* Загрузка моделей */
.hero-model-loading {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--nfs-t4, #9AA0B8);
}

/* ══════════════════════════════════════════════════════════
   RANGE MODAL — диапазон
   ══════════════════════════════════════════════════════════ */

.hero-range-modal .modal-body {
  padding: 1rem 1.25rem 1.25rem;
  background: transparent;
}

/* Только виджет диапазона, без обёртки modal-body и без футера */
.hero-range-modal-content--solo {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.hero-range-modal .hero-range-modal-content--solo > .hero-range-widget {
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
}

.hero-range-modal-dialog--compact.modal-dialog,
.hero-range-modal .hero-range-modal-dialog--compact {
  max-width: min(440px, calc(100vw - 1rem)) !important;
}

.hero-range-widget {
  background: linear-gradient(160deg, var(--nfs-ch1, #F4F6FA) 0%, #E8EBF2 100%);
  border: 0.5px solid var(--nfs-b1, rgba(58,66,96,0.07));
  border-radius: 10px;
  padding: 1rem 1rem 0.85rem;
}

.hero-range-widget--compact {
  position: relative;
  padding: 0.5rem 0.55rem 0.5rem !important;
  border-radius: 8px;
}

/* Строка: поля min–max + суффикс + икон-кнопки (как demo ic-box) */
.hero-range-toolbar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
}

.hero-range-toolbar-row .hero-range-num-row {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0 !important;
}

.hero-range-icon-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.hero-range-icon-btn {
  width: 45px;
  height: 45px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.hero-range-icon-btn--apply {
  background: rgba(34, 197, 94, 0.12);
  border: 0.5px solid rgba(34, 197, 94, 0.25);
  color: var(--green2, #22c55e);
}

.hero-range-icon-btn--apply:hover {
  background: rgba(34, 197, 94, 0.2);
  transform: translateY(-1px);
}

.hero-range-icon-btn--apply:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.45);
  outline-offset: 2px;
}

.hero-range-icon-btn--cancel {
  background: rgba(224, 48, 48, 0.12);
  border: 0.5px solid rgba(224, 48, 48, 0.25);
  color: var(--red2, #ef4444);
}

.hero-range-icon-btn--cancel:hover {
  background: rgba(224, 48, 48, 0.2);
  transform: translateY(-1px);
}

.hero-range-icon-btn--cancel:focus-visible {
  outline: 2px solid rgba(224, 48, 48, 0.4);
  outline-offset: 2px;
}

/* Слайдеры оставлены в DOM для скрипта — визуально скрыты */
.hero-range-js-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

@media (max-width: 400px) {
  .hero-range-toolbar-row {
    flex-wrap: wrap;
  }

  .hero-range-icon-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

.hero-range-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.4rem;
}

.hero-range-widget-title {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--nfs-t1, #0D1117);
  margin: 0 0 0.85rem;
}

.hero-range-widget-head .hero-range-widget-title {
  margin: 0 !important;
  font-size: 0.88rem !important;
  line-height: 1.25;
  flex: 1;
  min-width: 0;
}

.hero-range-num-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(180deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
  border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 1rem;
}

.hero-range-widget--compact .hero-range-num-row {
  margin-bottom: 0.5rem;
  padding: 0.38rem 0.45rem;
  gap: 0.35rem;
}

.hero-range-num-input {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
  border-radius: 6px;
  background: var(--nfs-white, #fff);
  padding: 0.5rem 0.6rem;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nfs-t1, #0D1117);
  text-align: center;
  transition: all 0.2s ease;
}

.hero-range-num-input:focus {
  outline: none;
  border-color: var(--nfs-blue, #1A5FD9);
  box-shadow: 0 0 0 2px var(--nfs-blue-glow, rgba(26,95,217,0.18));
}

.hero-range-num-sep {
  color: var(--nfs-t4, #9AA0B8);
  font-weight: 500;
}

.hero-range-num-suffix {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nfs-t3, #5A6480);
}

/* Трек слайдера */
.hero-range-dual-track-bg {
  background: linear-gradient(90deg, var(--nfs-ch2, #D8DCE8) 0%, var(--nfs-ch3, #B8C0D4) 100%);
}

.hero-range-dual-fill {
  background: linear-gradient(90deg, #3B7FFF 0%, var(--nfs-blue, #1A5FD9) 100%);
}

/* Thumb слайдера */
.hero-range-dual-input::-webkit-slider-thumb {
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue, #1A5FD9) 100%);
  border: 2px solid var(--nfs-white, #fff);
  box-shadow: 0 2px 6px rgba(26,95,217,0.4);
}

.hero-range-dual-input::-moz-range-thumb {
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue, #1A5FD9) 100%);
  border: 2px solid var(--nfs-white, #fff);
  box-shadow: 0 2px 6px rgba(26,95,217,0.4);
}

/* Tick marks */
.hero-range-tick-mark {
  background: var(--nfs-ch3, #B8C0D4);
}

.hero-range-tick-label {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  color: var(--nfs-t4, #9AA0B8);
}

.hero-range-modal .btn-primary {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-weight: 600;
  background: linear-gradient(150deg, #3B7FFF 0%, var(--nfs-blue, #1A5FD9) 50%, #1248B0 100%);
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(26,95,217,0.25);
}

.hero-range-modal .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% center;
  transition: background-position 0.35s;
}

.hero-range-modal .btn-primary:hover::after {
  background-position: -200% center;
}

.hero-range-modal .btn-primary:hover {
  box-shadow: 0 0 0 1px rgba(59,127,255,0.5), 0 0 12px rgba(59,127,255,0.25);
}

.hero-range-modal .btn-secondary {
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-weight: 600;
  background: linear-gradient(160deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
  border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  color: var(--nfs-t2, #2A3450);
}

.hero-range-modal .btn-secondary:hover {
  border-color: rgba(26,95,217,0.25);
  box-shadow: 0 0 0 2px var(--nfs-blue-glow, rgba(26,95,217,0.12));
}

/* Close button */
.hero-brand-modal .btn-close,
.hero-model-modal .btn-close,
.hero-range-modal .btn-close {
  opacity: 0.5;
  transition: opacity 0.2s;
}

.hero-brand-modal .btn-close:hover,
.hero-model-modal .btn-close:hover,
.hero-range-modal .btn-close:hover {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   Каталог: тулбар и сетка фильтра (как на главной)
   ══════════════════════════════════════════════════════════ */

.nfs-catalog-page .catalog-filter-card .catalog-filter-toolbar {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.nfs-catalog-page .catalog-filter-toolbar-row .hero-btn-search,
.nfs-catalog-page .catalog-filter-toolbar-row .catalog-btn-search {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
}

/* ══════════════════════════════════════════════════════════
   Каталог: компактная горизонтальная сетка (как #heroSection)
   ══════════════════════════════════════════════════════════ */

.nfs-catalog-page .catalog-filter-card .hero-filter-fields-catalog .hero-filter-row-main--av {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
  width: 100%;
}

/* Ряд бюджета (год/цена/пробег) — три одинаковых триггера */
.nfs-catalog-page .catalog-filter-card .hero-filter-row--budget {
  display: block;
  width: 100%;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-grid--row-ranges,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-grid--row-ranges-triggers,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-grid--row-five,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-five {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  width: 100%;
  flex: none;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--primary .hero-filter-actions-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
  align-self: flex-end;
  margin: 0;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card .catalog-filter-reset-btn--inline {
  flex: 0 0 auto;
  min-height: 2.75rem;
  height: 2.75rem;
  padding: 0 1rem;
  white-space: nowrap;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-field--picker,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-picker {
  width: 100%;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .catalog-filter-select--trigger {
  width: 100%;
}

.nfs-catalog-page .catalog-filter-card,
.nfs-catalog-page .catalog-filter-card .hero-filter-row-main,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--primary,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary {
  overflow: visible;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--primary {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.65rem 0.75rem;
  width: 100%;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--primary .hero-filter-toolbar-submit,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--primary .catalog-btn-search,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--primary .hero-btn-search {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
  padding-top: 0;
  padding-bottom: 0;
  white-space: nowrap;
  width: auto;
  min-width: 11.5rem;
  flex: 1 1 auto;
  justify-content: center;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-grid--row1,
.nfs-catalog-page .catalog-filter-card .catalog-filter-grid.catalog-filter-grid-primary.hero-filter-grid--row1 {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem 0.65rem;
  width: 100%;
  padding: 0;
  margin: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-grid--row1 .hero-filter-picker,
.nfs-catalog-page .catalog-filter-card .hero-filter-field--picker .hero-filter-picker {
  display: block;
  width: 100%;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary.is-collapsed {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Как на #heroSection: блочная вёрстка, без flex-grow от home.css */
.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary:not(.is-collapsed) {
  display: block;
  margin-top: 0.15rem;
}

/*
 * home.css: .hero-filter-row-main .hero-filter-grid-primary { flex: 1 1 320px }
 * В каталоге это раздувает ряды «кузов…» и «год/цена» до 320px по высоте — пустая полоса между ними.
 */
.nfs-catalog-page .hero-filter-row-main .hero-filter-grid--row-attrs,
.nfs-catalog-page .hero-filter-row-main .hero-filter-grid--row-ranges {
  flex: none !important;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-attrs,
.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-ranges {
  display: grid;
  padding: 0;
  margin: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-attrs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem 0.75rem;
  width: 100%;
  align-items: end;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-attrs > .hero-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  width: 100%;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-attrs .hero-filter-field__title {
  margin: 0;
  min-height: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-ranges {
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 0.65fr);
  gap: 0.75rem 1rem;
  width: 100%;
  margin-top: 0.75rem;
  align-items: start;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-field__title {
  margin: 0;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nfs-t1, #1a2035);
  line-height: 1.25;
  min-height: calc(0.8125rem * 1.25);
}

.nfs-catalog-page .catalog-filter-card .hero-filter-field__title--spacer {
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  background: transparent;
  border: none;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-block__title {
  margin: 0;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--nfs-t1, #1a2035);
  line-height: 1.25;
  min-height: calc(0.8125rem * 1.25);
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-block__title--spacer {
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-block__rows {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-row__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-block__inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-range-block--mileage .hero-filter-picker {
  width: 100%;
  min-width: 0;
}

.nfs-catalog-page .catalog-filter-card {
  padding: 1rem 1.25rem 1.35rem;
}

.nfs-catalog-page .catalog-filter-card .catalog-filter-fields {
  margin-bottom: 0;
}

.nfs-catalog-page .catalog-filter-card .catalog-filter-grid-primary.hero-filter-grid--row1 {
  margin-bottom: 0;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.nfs-catalog-page .catalog-filter-card .catalog-filter-compact-head {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
}

.nfs-catalog-page .catalog-filter-card .hero-filter-grid--row-ranges .hero-filter-range-block__title,
.nfs-catalog-page .catalog-filter-card .hero-filter-grid--row-attrs .hero-filter-field__title {
  min-height: calc(0.8125rem * 1.25);
}

.nfs-catalog-page .catalog-filter-card .hero-filter-grid--row-attrs .catalog-filter-select,
.nfs-catalog-page .catalog-filter-card .hero-filter-grid--row-attrs .hero-filter-field--picker .catalog-filter-select--trigger {
  height: 2.75rem;
  min-height: 2.75rem;
  max-height: 2.75rem;
}

@media (max-width: 1199px) {
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--primary {
    flex-wrap: wrap;
  }

  .nfs-catalog-page .catalog-filter-card .hero-filter-grid--row1 {
    flex: 1 1 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nfs-catalog-page .catalog-filter-card .hero-filter-row--primary .hero-filter-actions-row {
    flex: 1 1 auto;
    margin-left: auto;
  }

  .nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-attrs,
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-grid--row-five,
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-five {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--primary {
    flex-direction: column;
    align-items: stretch;
  }

  .nfs-catalog-page .catalog-filter-card .hero-filter-row--primary .hero-filter-actions-row {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .nfs-catalog-page .catalog-filter-card .hero-filter-grid--row1,
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-attrs,
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-ranges,
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-grid--row-ranges,
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--budget .hero-filter-grid--row-five,
  .nfs-catalog-page .catalog-filter-card .hero-filter-row--secondary .hero-filter-grid--row-five {
    grid-template-columns: 1fr;
  }

  .nfs-catalog-page .catalog-filter-card .hero-filter-row--primary .hero-filter-actions-row {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* === css/hero_filter_dropdown.css === */
/* Выпадающие панели hero-фильтра (светлая тема NFS) */
.hero-filter-picker {
    position: relative;
    min-width: 0;
}

.hero-filter-picker.is-dropdown-open {
    z-index: 200;
}

.hero-filter-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 250;
    min-width: 280px;
    max-width: min(420px, 92vw);
    max-height: min(52vh, 320px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
    overflow: hidden;
    overscroll-behavior: contain;
}

.hero-filter-picker > .hero-filter-dropdown:not([hidden]):not(.hero-filter-dropdown--floating) {
    position: fixed;
}

/* Скролл только внутри панели, без растягивания карточки фильтра */
.hero-filter-dropdown-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(40vh, 280px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.hero-filter-dropdown--wide .hero-filter-dropdown-list-wrap {
    max-height: min(45vh, 300px);
}

/* Плавающая панель в body: не влияет на высоту layout страницы */
.hero-filter-dropdown.hero-filter-dropdown--floating {
    position: fixed !important;
    z-index: 10050 !important;
    top: auto;
    left: auto;
    margin: 0;
}

.hero-filter-dropdown[hidden] {
    display: none !important;
}

.hero-filter-dropdown--wide {
    min-width: min(720px, 96vw);
    max-width: min(880px, 98vw);
}

.hero-filter-dropdown--mileage,
.hero-filter-dropdown--engine,
.hero-filter-dropdown--range {
    min-width: 320px;
    max-width: 400px;
    max-height: none;
    padding: 14px 16px 16px;
    background: var(--nfs-white, #fff);
    border: 0.5px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    border-radius: 10px;
    box-shadow:
        0 12px 32px rgba(26, 38, 74, 0.14),
        0 2px 8px rgba(26, 38, 74, 0.06);
}

.hero-filter-dropdown-head {
    padding: 10px 12px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.hero-filter-dropdown-mode {
    display: flex;
    gap: 16px;
    padding: 0 12px 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

.hero-filter-dropdown-mode label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--nfs-t2, #3a4260);
    cursor: pointer;
    margin: 0;
}

.hero-filter-dropdown-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.hero-filter-dropdown-search svg {
    flex-shrink: 0;
    color: var(--nfs-t3, #5a6480);
}

.hero-filter-dropdown-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 13px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    background: transparent;
    color: var(--nfs-t1, #0d1117);
}

.hero-filter-dropdown-body {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 0;
}

.hero-filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: transparent;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--nfs-t1, #0d1117);
    cursor: pointer;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
}

.hero-filter-dropdown-item:hover,
.hero-filter-dropdown-item.is-selected {
    background: rgba(26, 95, 217, 0.08);
}

.hero-filter-dropdown-item--any {
    font-weight: 700;
    color: var(--nfs-blue, #1a5fd9);
}

.hero-filter-dropdown-item-logo {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-filter-dropdown-item-logo img {
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
}

.hero-filter-dropdown-item-logo-fallback {
    display: none;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.1);
    border-radius: 6px;
}

.hero-filter-dropdown-item-logo-fallback.is-visible {
    display: flex;
}

.hero-filter-dropdown-list--models {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px 8px;
    /* Скролл только у .hero-filter-dropdown-list-wrap — без двойной полосы */
    overflow: visible;
    max-height: none;
}

.hero-filter-dropdown--wide .hero-filter-dropdown-list-wrap {
    max-height: min(48vh, 380px);
}

.hero-filter-dropdown-item--model {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.75rem;
    padding: 0.5rem 0.6rem;
    border: none;
    border-radius: var(--nfs-rl, 10px);
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.8125rem;
    color: var(--nfs-t1, #1e293b);
    transition: background 0.15s ease;
}

.hero-filter-dropdown-item--model:hover,
.hero-filter-dropdown-item--model.is-selected {
    background: linear-gradient(135deg, rgba(59, 127, 255, 0.1), rgba(26, 95, 217, 0.06));
}

.hero-filter-dropdown-item-thumb {
    flex: 0 0 88px;
    width: 88px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--nfs-surface-2, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-filter-dropdown-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-filter-dropdown-item-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-word;
}

.hero-filter-dropdown-item-count {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--nfs-t3, #64748b);
    font-weight: 500;
}

/* Марки: listbox с логотипами (как silo в мегаменю); модели — без превью */
.hero-filter-dropdown-brands,
.hero-filter-dropdown-models {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px 8px;
}

.hero-filter-dropdown-brand-card,
.hero-filter-dropdown-model-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.hero-filter-dropdown-brand-card:hover,
.hero-filter-dropdown-brand-card.is-selected,
.hero-filter-dropdown-model-card:hover,
.hero-filter-dropdown-model-card.is-selected {
    border-color: rgba(26, 95, 217, 0.28);
    background: #f5f9ff;
    box-shadow: none;
}

.hero-filter-dropdown-brand-logo {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    overflow: hidden;
    position: relative;
}

.hero-filter-dropdown-brand-logo-img {
    max-width: 28px;
    max-height: 28px;
    object-fit: contain;
}

.hero-filter-dropdown-brand-logo-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--nfs-blue, #1a5fd9);
    background: rgba(26, 95, 217, 0.08);
}

.hero-filter-dropdown-brand-logo-fallback.is-visible {
    display: flex !important;
}

.hero-filter-dropdown-model-thumb {
    display: none !important;
}

.hero-filter-dropdown-brand-card .hero-filter-dropdown-item-label,
.hero-filter-dropdown-model-card .hero-filter-dropdown-item-label,
.hero-filter-dropdown-brand-name,
.hero-filter-dropdown-model-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nfs-t1, #0d1117);
}

.hero-filter-dropdown-brand-card .hero-filter-dropdown-item-count,
.hero-filter-dropdown-model-card .hero-filter-dropdown-item-count,
.hero-filter-dropdown-brand-count,
.hero-filter-dropdown-model-count {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--nfs-t3, #64748b);
    font-weight: 500;
    padding: 0;
}

.hero-filter-dropdown-generations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
}

@media (max-width: 640px) {
    .hero-filter-dropdown-generations {
        grid-template-columns: repeat(2, 1fr);
    }
}

.hero-filter-dropdown-gen-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.hero-filter-dropdown-gen-card:hover,
.hero-filter-dropdown-gen-card.is-selected {
    border-color: var(--nfs-blue, #1a5fd9);
}

.hero-filter-dropdown-gen-photo {
    aspect-ratio: 16 / 10;
    border-radius: 8px;
    overflow: hidden;
    background: #e2e8f0;
}

.hero-filter-dropdown-gen-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-filter-dropdown-gen-label {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--nfs-t1, #0d1117);
    padding: 0 2px;
    word-break: break-word;
}

.hero-filter-dropdown-gen-count {
    font-size: 10px;
    font-weight: 600;
    color: var(--nfs-t3, #64748b);
    padding: 0 2px 4px;
}

.hero-filter-price-inline {
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: 42px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}

.hero-filter-price-inline:focus-within {
    border-color: var(--nfs-blue, #1a5fd9);
    box-shadow: 0 0 0 3px rgba(26, 95, 217, 0.12);
}

.hero-filter-price-field {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 4px 10px;
    min-width: 0;
}

.hero-filter-price-field + .hero-filter-price-field {
    border-left: 1px solid rgba(148, 163, 184, 0.3);
}

.hero-filter-price-field label {
    font-size: 10px;
    font-weight: 600;
    color: var(--nfs-t3, #5a6480);
    margin: 0;
    line-height: 1.2;
}

.hero-filter-price-field input {
    border: none;
    outline: none;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    background: transparent;
    color: var(--nfs-t1, #0d1117);
    padding: 2px 0 0;
}

/* Панель диапазона (пробег, объём) — в стиле catalog-filter */
.hero-filter-dropdown--range .hero-filter-range-panel__title,
.hero-filter-dropdown--mileage .hero-filter-mileage-title {
    margin: 0 0 10px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--nfs-t1, #1a2035);
    line-height: 1.25;
}

.hero-filter-dropdown--range .hero-filter-range-panel__inputs,
.hero-filter-dropdown--mileage .hero-filter-mileage-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.hero-filter-dropdown--range .hero-filter-range-panel__sep {
    flex-shrink: 0;
    color: var(--nfs-t3, #5a6480);
    font-weight: 600;
}

.hero-filter-dropdown--range .hero-filter-range-panel__num,
.hero-filter-dropdown--mileage .hero-filter-mileage-num {
    flex: 1 1 0;
    min-width: 0;
    min-height: 2.75rem;
    height: 2.75rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
}

.hero-filter-dropdown--range .hero-range-dual-wrap,
.hero-filter-dropdown--mileage .hero-range-dual-wrap {
    position: relative;
    height: 28px;
    margin: 12px 0 10px;
}

.hero-filter-mileage-panel .hero-range-num-row {
    margin-bottom: 8px;
}

.hero-filter-dropdown--range .hero-filter-range-panel__apply,
.hero-filter-dropdown--mileage .hero-filter-mileage-apply {
    margin-top: 0.35rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
}

.hero-filter-dropdown-empty {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--nfs-t3, #5a6480);
}

/* === css/hero_filter_ranges.css === */
/**
 * Виджет диапазона hero (карточка: поля ввода + двойной слайдер + деления)
 */

.hero-range-picker {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.hero-range-modal .modal-dialog {
    max-width: min(420px, calc(100vw - 1.25rem));
}

.hero-range-modal .modal-content {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 24px 56px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.hero-range-modal .modal-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    padding: 0.75rem 1rem;
}

.hero-range-modal .modal-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--gray-600, #64748b);
}

.hero-range-modal .modal-body {
    padding: 1rem 1rem 1.15rem;
    background: #fff;
}

/* Карточка как на референсе: светлый фон, скругления */
.hero-range-widget {
    background: #f0f2f5;
    border-radius: 10px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(15, 23, 42, 0.06);
}

.hero-range-widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1d24;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}

/* Строка чисел: белые поля, дефис, суффикс */
.hero-range-num-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    background: #e8eaef;
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 18px;
}

.hero-range-num-input {
    flex: 1 1 0;
    min-width: 0;
    width: 0;
    border: 1px solid #d8dce4;
    border-radius: 6px;
    background: #fff;
    padding: 8px 10px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1d24;
    text-align: center;
    -moz-appearance: textfield;
}

.hero-range-num-input::-webkit-outer-spin-button,
.hero-range-num-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.hero-range-num-input:focus {
    outline: none;
    border-color: #3b6ad9;
    box-shadow: 0 0 0 2px rgba(59, 106, 217, 0.2);
}

.hero-range-num-sep {
    flex-shrink: 0;
    color: #8b92a3;
    font-weight: 500;
    font-size: 0.95rem;
}

.hero-range-num-suffix {
    flex-shrink: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #5c6370;
    padding-left: 2px;
}

/* Двойной слайдер: один трек, синяя зона между ручками */
.hero-range-dual-wrap {
    position: relative;
    height: 36px;
    margin-bottom: 6px;
}

.hero-range-dual-track-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #d8dce4;
    border-radius: 2px;
    pointer-events: none;
}

.hero-range-dual-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #3b6ad9;
    border-radius: 2px;
    pointer-events: none;
    left: 0;
    width: 0;
}

.hero-range-dual-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
}

.hero-range-dual-input::-webkit-slider-runnable-track {
    height: 4px;
    background: transparent;
    border: none;
}

.hero-range-dual-input::-moz-range-track {
    height: 4px;
    background: transparent;
    border: none;
}

.hero-range-dual-min {
    z-index: 2;
}

.hero-range-dual-max {
    z-index: 3;
}

.hero-range-dual-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b6ad9;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(59, 106, 217, 0.45);
    cursor: grab;
    pointer-events: auto;
    margin-top: -7px;
}

.hero-range-dual-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b6ad9;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(59, 106, 217, 0.45);
    cursor: grab;
    pointer-events: auto;
}

.hero-range-dual-input:active::-webkit-slider-thumb {
    cursor: grabbing;
}

.hero-range-dual-input:active::-moz-range-thumb {
    cursor: grabbing;
}

/* Подписи делений */
.hero-range-ticks {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 2px;
    margin-top: 2px;
}

.hero-range-tick {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.hero-range-tick-mark {
    width: 1px;
    height: 6px;
    background: #b4bac8;
    margin-bottom: 4px;
}

.hero-range-tick-label {
    font-size: 0.68rem;
    color: #8b92a3;
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
}

.hero-range-modal .modal-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding: 0.75rem 1rem;
    gap: 0.5rem;
    background: #fafbfc;
}

.hero-range-modal .btn-primary {
    background: #3b6ad9;
    border: none;
}

.hero-range-modal .btn-primary:hover {
    background: #2f5ac4;
}

.hero-range-modal .btn-secondary {
    background: #fff;
    border: 1px solid #d8dce4;
    color: #3a404d;
}

/* Компактная модалка диапазона: один заголовок + закрытие в блоке виджета */
.hero-range-modal-dialog--compact.modal-dialog {
    max-width: min(380px, calc(100vw - 1rem));
}


/* === css/catalog_new.css === */
/**
 * @file: catalog_new.css
 * @description: Стили для нового каталога в точности как в React проекте Catalog PRO
 * @created: 2025-01-XX
 */

/* ===== Переменные: см. design-tokens.css ===== */

/* ===== Base Styles ===== */
.catalog-page-wrapper {
    min-height: 100vh;
    background: var(--gray-50);
    width: 100%;
    /* visible: иначе box-shadow карточек nfs-cc обрезается по краям контейнера */
    overflow-x: visible;
    overflow-y: visible;
}

body.nfs-catalog-page {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: visible;
}

/* .container — единая сетка в design-tokens.css */

/* ===== Header ===== */
.catalog-header-new {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--gray-200);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .header-content {
        height: 64px;
    }
}

.header-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

@media (min-width: 640px) {
    .logo-icon {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 20px;
    }
}

.logo-text {
    font-weight: 600;
    font-size: 16px;
}

@media (min-width: 640px) {
    .logo-text {
        font-size: 18px;
    }
}

.header-nav {
    display: none;
    gap: 1.5rem;
}

/* Скрываем навигацию на мобильных, даже если есть класс mobile-open */
@media (max-width: 767px) {
    .header-nav,
    .header-nav.mobile-open {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .header-nav {
        display: flex;
    }
}

.nav-link {
    text-decoration: none;
    color: var(--gray-700);
    font-size: 14px;
    transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
    color: var(--nfs-blue);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    overflow: visible;
    min-width: 0; /* Позволяет элементам сжиматься */
}

@media (max-width: 639px) {
    .header-right {
        gap: 0.25rem;
    }
    
    .header-btn-primary {
        padding: 0.5rem 0.75rem;
        font-size: 12px;
        flex-shrink: 0;
        min-width: fit-content;
        white-space: nowrap;
    }
    
    .header-btn-menu {
        margin-left: 0.25rem;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .header-btn-primary {
        padding: 0.5rem 0.625rem;
        font-size: 11px;
        min-width: fit-content;
    }
    
    /* Скрываем иконки на очень маленьких экранах, чтобы освободить место */
    .header-btn-icon {
        display: none;
    }
}

.header-btn-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.header-btn-icon:hover {
    background: var(--gray-100);
}

.header-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    background: var(--nfs-red);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.header-btn-primary {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.header-btn-primary:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.header-btn-menu {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-700);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.header-btn-menu:hover {
    background: var(--gray-100);
    color: var(--gray-900);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 0;
    animation: fadeIn 0.2s ease-in-out;
}

.mobile-menu-content {
    width: 280px;
    max-width: 85vw;
    height: 100%;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    animation: slideInRight 0.3s ease-out;
    overflow-y: auto;
}

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
    background: white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.mobile-menu-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mobile-menu-logo .logo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

.mobile-menu-logo .logo-text {
    font-weight: 600;
    font-size: 18px;
    color: var(--gray-900);
}

.mobile-menu-close {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--gray-600);
    transition: all 0.2s;
}

.mobile-menu-close:hover {
    background: var(--gray-200);
    color: var(--gray-900);
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    font-size: 16px;
    transition: all 0.2s;
    border-left: 3px solid transparent;
}

.mobile-menu-link:hover,
.mobile-menu-link:active {
    background: var(--gray-50);
    color: var(--nfs-blue);
    border-left-color: var(--nfs-blue);
}

.mobile-menu-link i {
    width: 24px;
    text-align: center;
    color: var(--gray-500);
    font-size: 18px;
}

.mobile-menu-link span {
    flex: 1;
}

.mobile-menu-link:hover i,
.mobile-menu-link:active i {
    color: var(--nfs-blue);
}

.mobile-menu-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 0.5rem 1rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@media (min-width: 640px) {
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ===== Breadcrumbs ===== */
/* Важно: в front.css заданы .breadcrumbs a и .breadcrumbs span (бледно-зелёный / голубой)
   с большей специфичностью, чем у .breadcrumb-link — поэтому всё вешаем на .breadcrumbs-section */
.breadcrumbs-section {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    padding: 1rem 0;
}

.breadcrumbs-section .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 14px;
    /* сброс legacy из front.css (hero): нижняя голубая линия и отступы */
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.breadcrumbs-section .breadcrumbs a.breadcrumb-link,
.breadcrumbs-section .breadcrumbs a.breadcrumb-link:visited {
    color: var(--gray-800);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.breadcrumbs-section .breadcrumbs a.breadcrumb-link:hover {
    color: var(--nfs-blue);
}

.breadcrumbs-section .breadcrumbs a.breadcrumb-link:focus-visible {
    outline: 2px solid var(--nfs-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

.breadcrumbs-section .breadcrumbs .breadcrumb-chevron {
    font-size: 12px;
    color: var(--gray-600);
    opacity: 0.95;
}

.breadcrumbs-section .breadcrumbs span.breadcrumb-current {
    color: var(--gray-900);
    font-weight: 600;
}

/* ===== Search Bar ===== */
.search-bar-section {
    background: white;
    border-bottom: 1px solid var(--gray-200);
    padding: 1rem 0;
}

@media (min-width: 640px) {
    .search-bar-section {
        padding: 1.5rem 0;
    }
}

.search-bar-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .search-bar-wrapper {
        flex-direction: row;
        gap: 0.75rem;
    }
}

.search-input-wrapper-main {
    flex: 1;
    position: relative;
    z-index: 1001;
}

/* Global search results positioning */
.search-bar-section {
    position: relative;
}

.search-bar-wrapper[data-global-search] {
    position: relative;
}

.global-search-results {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    border: 1px solid var(--gray-200) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    z-index: 10000 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    margin-top: 0 !important;
    padding: 0.5rem;
}

.global-search-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 8px;
    transition: background 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.global-search-item:hover {
    background: var(--gray-50);
}

.global-search-item img {
    width: 64px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.global-search-item-content {
    flex: 1;
    min-width: 0;
}

.global-search-item-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 0.25rem;
    color: var(--gray-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-item-meta {
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-search-empty {
    text-align: center;
    color: var(--gray-600);
    font-size: 14px;
    padding: 1.5rem;
}

.search-icon-main {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-700);
    font-size: 16px;
}

@media (min-width: 640px) {
    .search-icon-main {
        left: 1rem;
        font-size: 20px;
    }
}

.search-input-main {
    width: 100%;
    height: 44px;
    padding: 0 1rem 0 2.5rem;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.2s;
}

@media (min-width: 640px) {
    .search-input-main {
        height: 56px;
        padding: 0 1rem 0 3rem;
        border-radius: 12px;
        font-size: 16px;
    }
}

.search-input-main:focus {
    border-color: var(--nfs-blue);
    box-shadow: 0 0 0 3px rgba(98, 126, 234, 0.1);
}

.search-input-main::placeholder {
    color: var(--gray-500);
}

.search-buttons-wrapper {
    display: flex;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .search-buttons-wrapper {
        gap: 0.75rem;
    }
}

.search-ai-btn-main {
    flex: 1;
    height: 44px;
    padding: 0 1rem;
    background: linear-gradient(135deg, oklch(0.627 0.265 303.9), oklch(0.656 0.241 354.308));
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: all 0.2s;
}

@media (min-width: 640px) {
    .search-ai-btn-main {
        flex: initial;
        height: 56px;
        padding: 0 1.5rem;
        border-radius: 12px;
        font-size: 16px;
    }
}

.search-ai-btn-main:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.search-ai-btn-main i {
    animation: pulse 2s infinite;
}

.search-advanced-btn-main {
    height: 44px;
    padding: 0 1rem;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    white-space: nowrap;
    transition: all 0.2s;
}

@media (min-width: 640px) {
    .search-advanced-btn-main {
        height: 56px;
        padding: 0 1.5rem;
        border-radius: 12px;
        font-size: 16px;
    }
}

@media (min-width: 768px) {
    .search-advanced-btn-main span {
        display: inline;
    }
}

.search-advanced-btn-main:hover {
    background: var(--gray-50);
}

.advanced-search-panel {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--gray-50);
    border-radius: 8px;
}

@media (min-width: 640px) {
    .advanced-search-panel {
        margin-top: 1rem;
        padding: 1rem;
        border-radius: 12px;
    }
}

.advanced-search-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .advanced-search-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }
}

.advanced-search-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    cursor: pointer;
}

@media (min-width: 640px) {
    .advanced-search-checkbox {
        font-size: 14px;
    }
}

.advanced-search-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ===== Catalog Layout ===== */
.catalog-layout-flex {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 0;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Десктоп: основной контент на всю ширину (sidebar теперь всегда модалка) */
@media (min-width: 1024px) {
    .catalog-layout-flex {
        gap: 0;
    }
}

/* ===== Inline Filter Panel — Hero Style ===== */
.catalog-inline-filter-mount {
    width: 100%;
    overflow: visible;
}

.catalog-sidebar-new {
    position: relative;
    width: 100%;
    max-width: none;
    max-height: 0;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transform: translateY(-12px);
    pointer-events: none;
    margin: 0;
    transition:
        max-height 0.42s cubic-bezier(.22, .61, .36, 1),
        opacity 0.24s ease,
        transform 0.42s cubic-bezier(.22, .61, .36, 1),
        margin 0.42s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear 0.42s;
}

.catalog-sidebar-new.active {
    /* По высоте контента, без «пустого» блока на 980px */
    max-height: none;
    height: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    margin: 0 0 16px;
    overflow: visible;
    transition:
        opacity 0.24s ease,
        transform 0.42s cubic-bezier(.22, .61, .36, 1),
        margin 0.42s cubic-bezier(.22, .61, .36, 1),
        visibility 0s;
}

/* Карточка фильтра — базовые стили в nfs-hero-filter.css (.hero-filter-card) */
.catalog-filter-card {
    width: 100%;
    max-width: none;
}

/* Выпадающие панели марки/модели — как на главной (position:fixed в hero_filter_dropdown.js) */
.nfs-catalog-page .catalog-filter-card .hero-filter-picker {
    position: relative;
    min-width: 0;
    width: 100%;
}

.nfs-catalog-page .catalog-filter-grid-primary .hero-filter-picker {
    z-index: 1;
}

.nfs-catalog-page .catalog-filter-card .hero-filter-picker.is-dropdown-open {
    z-index: 200;
}

/* Компактная шапка */
.catalog-filter-compact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 0.5px solid var(--nfs-b1, rgba(58,66,96,0.07));
}

.catalog-filter-compact-title {
    margin: 0;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nfs-t1, #0D1117);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.catalog-filter-compact-title::before {
    content: '';
    width: 4px;
    height: 1.25rem;
    border-radius: 2px;
    flex-shrink: 0;
    background: linear-gradient(180deg, 
        var(--nfs-blue, #1A5FD9) 33%, 
        var(--nfs-red, #C92222) 33% 66%, 
        var(--nfs-ch3, #B8C0D4) 66%
    );
}

/* Сетка селектов */
.catalog-filter-fields {
    margin-bottom: 1.25rem;
    overflow: visible;
}

/* Legacy #modelList (чекбоксы) — не показывать при hero-фильтрах */
.nfs-catalog-page #modelList {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Компактная сетка фильтров — см. nfs-hero-filter.css (.nfs-catalog-page .catalog-filter-card) */

.catalog-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.75rem;
    /* Место под кольцо focus/hover (0 0 0 3px) */
    padding: 4px;
    margin: -4px;
    overflow: visible;
}

/* Ряд «марка / модель / поколение» — 3 колонки, как на главной (#heroSection) */
.catalog-filter-card .catalog-filter-grid-primary.hero-filter-grid--row1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem 0.65rem;
    margin-bottom: 0;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Не ломать ряды расширенных фильтров — колонки задаёт nfs-hero-filter.css */
.catalog-filter-grid-primary:not(.hero-filter-grid--row1):not(.hero-filter-grid--row-attrs):not(.hero-filter-grid--row-ranges) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 0.75rem;
}

.nfs-catalog-page .catalog-filter-card .catalog-filter-grid.hero-filter-grid--row-attrs,
.nfs-catalog-page .catalog-filter-card .catalog-filter-grid.hero-filter-grid--row-ranges {
    padding: 0;
    margin: 0;
}

.catalog-filter-grid-extra {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.catalog-filter-extended-wrap {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 0.75rem;
    transition:
        grid-template-rows 0.34s cubic-bezier(.22, .61, .36, 1),
        opacity 0.24s ease,
        margin 0.34s cubic-bezier(.22, .61, .36, 1);
}

.catalog-filter-extended-wrap.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
    pointer-events: none;
}

.catalog-filter-extended-inner {
    min-height: 0;
    overflow: visible;
}

.catalog-filter-extended-wrap.is-collapsed .catalog-filter-extended-inner {
    overflow: hidden;
}

.catalog-filter-expand-btn .hero-filter-expand-btn__chevron {
    transition: transform 0.24s ease;
}

.catalog-filter-expand-btn[aria-expanded="true"] .hero-filter-expand-btn__chevron {
    transform: rotate(180deg);
}

@media (max-width: 1199px) {
    .catalog-filter-grid-extra {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .catalog-filter-grid-primary,
    .catalog-filter-grid-extra {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .catalog-filter-grid-primary,
    .catalog-filter-grid-extra {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
}

/* Стили селектов — nfs-filter-select.css (подключается в шаблоне) */

/* Тулбар — отступы как .hero-filter-footer на главной (переопределение в nfs-hero-filter.css) */
.catalog-filter-toolbar {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.catalog-filter-toolbar-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
}

.catalog-filter-toolbar-grow {
    flex: 1 1 auto;
    min-width: 1rem;
}

.catalog-filter-tags-wrap {
    display: flex;
    align-items: center;
}

.catalog-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.catalog-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(160deg, var(--nfs-white, #fff), var(--nfs-ch1, #F4F6FA));
    border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
    color: var(--nfs-t3, #5A6480);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.catalog-tag:hover {
    background: linear-gradient(135deg, rgba(59,127,255,0.1), rgba(26,95,217,0.05));
    border-color: rgba(26,95,217,0.3);
    color: var(--nfs-blue, #1A5FD9);
    box-shadow: 0 0 0 2px var(--nfs-blue-glow, rgba(26,95,217,0.15));
}

.catalog-tag.active {
    background: linear-gradient(135deg, rgba(59,127,255,0.12), rgba(26,95,217,0.06));
    border-color: rgba(26,95,217,0.35);
    color: var(--nfs-blue, #1A5FD9);
    box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26,95,217,0.18));
}

.catalog-tag-hits:hover, .catalog-tag-hits.active {
    background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(217,119,6,0.06));
    border-color: rgba(245,158,11,0.35);
    color: #D97706;
    box-shadow: 0 0 0 3px rgba(245,158,11,0.15);
}

.catalog-tag-new:hover, .catalog-tag-new.active {
    background: linear-gradient(135deg, rgba(201,34,34,0.08), rgba(201,34,34,0.03));
    border-color: rgba(201,34,34,0.3);
    color: var(--nfs-red, #C92222);
    box-shadow: 0 0 0 3px rgba(201,34,34,0.12);
}

.catalog-tag-ev:hover, .catalog-tag-ev.active {
    background: linear-gradient(135deg, rgba(20,163,74,0.1), rgba(20,163,74,0.04));
    border-color: rgba(20,163,74,0.35);
    color: var(--nfs-green, #14A34A);
    box-shadow: 0 0 0 3px rgba(20,163,74,0.15);
}

.catalog-filter-toolbar-actions {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

/* «Показать N авто» и «Сброс» — одна высота (как счётчик в кнопке поиска) */
.nfs-catalog-page .catalog-filter-toolbar-row .catalog-btn-search,
.nfs-catalog-page .catalog-filter-toolbar-row .catalog-filter-reset-btn.nfs-btn.nfs-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
    padding: 0 1.25rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.25;
    border-radius: 8px;
    box-sizing: border-box;
    white-space: nowrap;
}

.catalog-filter-icon-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.12rem;
    padding: 0.2rem 0.45rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    transition: background 0.2s ease;
}

.catalog-filter-icon-action:hover {
    background: rgba(58, 66, 96, 0.07);
}

.catalog-filter-icon-action svg {
    color: var(--nfs-t3, #5A6480);
    flex-shrink: 0;
}

.catalog-filter-icon-action:hover svg {
    color: var(--nfs-t2, #2A3450);
}

.catalog-filter-action-label {
    line-height: 1.1;
    white-space: nowrap;
}

.catalog-filter-action-label--red {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: linear-gradient(118deg, #fb7185 0%, #f43f5e 40%, #e11d48 78%, #b91c1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Кнопка «Показать N авто» — базовые стили .hero-btn-search в nfs-hero-filter.css */
.catalog-btn-search svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.nfs-catalog-page .catalog-btn-search[aria-busy='true'] {
    opacity: 0.88;
    cursor: wait;
}

@media (max-width: 767px) {
    .catalog-filter-card {
        padding: 1.25rem 1rem 1.5rem;
        border-radius: 12px;
    }
    .catalog-filter-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
    .catalog-filter-toolbar-grow {
        display: none;
    }
    .catalog-filter-toolbar-actions {
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
    }
    .catalog-filter-toolbar-actions .catalog-filter-reset-btn {
        width: 100%;
        justify-content: center;
    }
    .catalog-btn-search {
        width: 100%;
        justify-content: center;
    }
    .catalog-filter-tags {
        width: 100%;
    }
}

/* ===== Модальные окна марок/моделей/диапазонов ===== */
.catalog-brand-modal .modal-content,
.catalog-model-modal .modal-content {
    border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
    border-radius: var(--nfs-rl, 14px);
    box-shadow: 
        0 24px 56px rgba(15,23,42,0.12),
        0 8px 24px rgba(0,0,0,0.08);
    background: linear-gradient(170deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
    overflow: hidden;
}

.catalog-brand-modal .modal-content::before,
.catalog-model-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--nfs-blue, #1A5FD9) 0%,
        var(--nfs-red, #C92222) 50%,
        var(--nfs-ch3, #B8C0D4) 100%
    );
    z-index: 10;
}

.catalog-modal-body--compact {
    padding: 0.65rem 0.85rem 0.85rem !important;
    background: transparent;
}

.catalog-modal-compact-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 0.5px solid var(--nfs-b1, rgba(58,66,96,0.08));
}

.catalog-modal-compact-title {
    margin: 0;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--nfs-t1, #0D1117);
    line-height: 1.25;
    flex: 1;
    min-width: 0;
}

/* Поиск в модалке */
.catalog-brand-modal-search,
.catalog-model-modal-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(180deg, var(--nfs-white, #fff) 0%, var(--nfs-ch1, #F4F6FA) 100%);
    border: 0.5px solid var(--nfs-b2, rgba(58,66,96,0.12));
    border-radius: 8px;
    margin-bottom: 0.6rem;
    transition: all 0.2s ease;
}

.catalog-brand-modal-search:focus-within,
.catalog-model-modal-search:focus-within {
    border-color: var(--nfs-blue, #1A5FD9);
    box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26,95,217,0.18));
}

.catalog-brand-modal-search svg,
.catalog-model-modal-search svg {
    color: var(--nfs-t4, #9AA0B8);
    flex-shrink: 0;
}

.catalog-brand-modal-search-input,
.catalog-model-modal-search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.875rem;
    color: var(--nfs-t2, #2A3450);
}

.catalog-brand-modal-search-input::placeholder,
.catalog-model-modal-search-input::placeholder {
    color: var(--nfs-t4, #9AA0B8);
}

/* Сетка марок — 12 столбцов */
.catalog-brand-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.65rem;
    max-height: min(32.5rem, calc(100vh - 14rem));
    overflow-y: auto;
}

.catalog-model-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    max-height: min(44rem, calc(100vh - 14rem));
    overflow-y: auto;
}

@media (max-width: 1200px) {
    .catalog-brand-grid { grid-template-columns: repeat(8, 1fr); }
    .catalog-model-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
    .catalog-brand-grid { grid-template-columns: repeat(6, 1fr); }
    .catalog-model-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
    .catalog-brand-grid { grid-template-columns: repeat(4, 1fr); }
    .catalog-model-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Карточка марки/модели */
.catalog-brand-card,
.catalog-model-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    padding: 0.2rem 0.1rem 0.35rem;
    background: transparent;
    border: none;
    outline: none;
    box-shadow: none;
    border-radius: 0.55rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    min-height: 0;
}

.catalog-brand-card:hover,
.catalog-model-card:hover {
    background: rgba(26, 95, 217, 0.07);
}

.catalog-brand-card.is-selected,
.catalog-model-card.is-selected {
    background: rgba(26, 95, 217, 0.12);
}

.catalog-brand-card:focus-visible,
.catalog-model-card:focus-visible {
    outline: 2px solid var(--nfs-blue, #1A5FD9);
    outline-offset: 2px;
}

.catalog-brand-logo {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    height: auto;
    margin: 0;
    border-radius: 0.55rem;
    background: transparent;
    flex: 0 0 auto;
    min-width: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.catalog-brand-logo-fallback {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: clamp(1.35rem, 4vw, 1.85rem);
    font-weight: 700;
    color: var(--nfs-t3, #5A6480);
}

.catalog-brand-name,
.catalog-model-name {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: clamp(0.78rem, 0.9vw + 0.55rem, 0.95rem);
    font-weight: 700;
    color: var(--nfs-t2, #2A3450);
    line-height: 1.2;
    width: 100%;
    flex: 0 0 auto;
    padding: 0 0.1rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: auto;
    max-width: 100%;
    word-break: break-word;
}

.catalog-brand-card.is-selected .catalog-brand-name,
.catalog-model-card.is-selected .catalog-model-name {
    color: var(--nfs-blue, #1A5FD9);
}

.catalog-brand-grid-empty,
.catalog-model-grid-empty {
    padding: 2rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--nfs-t3, #5A6480);
}

/* Модалка диапазона — панель как на главной (hero-filter-dropdown--range) */
.catalog-range-modal-dialog--compact {
    max-width: min(400px, calc(100vw - 1rem)) !important;
}

.catalog-range-modal-content--solo {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.catalog-range-modal .catalog-range-panel {
    position: relative;
    display: flex;
    flex-direction: column;
}

.catalog-range-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.catalog-range-panel__head .hero-filter-range-panel__title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.catalog-range-panel__inputs {
    flex-wrap: wrap;
}

.catalog-range-num-suffix {
    flex: 0 0 auto;
    align-self: center;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--nfs-t3, #5a6480);
    white-space: nowrap;
}

.catalog-range-panel__slider {
    margin-bottom: 0.15rem;
}

/* Оверлей для модального окна фильтров */
.catalog-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 30, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.catalog-sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Шапка фильтра — тёмный кокпит */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--nfs-cockpit, #0a0f1e) 0%, #141b2d 100%);
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

/* Хромовые полоски в шапке */
.sidebar-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        var(--nfs-blue, #2563eb) 20%, 
        var(--nfs-chrome, #c0c0c0) 50%, 
        var(--nfs-blue, #2563eb) 80%, 
        transparent 100%);
}

.sidebar-header h2 {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-header h2::before {
    content: '';
    width: 4px;
    height: 16px;
    background: var(--nfs-blue, #2563eb);
    border-radius: 2px;
}

.sidebar-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Кнопка "Сбросить всё" в шапке */
.btn-reset-all {
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.15s;
}

.btn-reset-all:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: var(--nfs-red, #ef4444);
    color: #fff;
}

.btn-close-sidebar {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s;
}

.btn-close-sidebar:hover {
    background: var(--nfs-red, #ef4444);
    border-color: var(--nfs-red, #ef4444);
    color: #fff;
    transform: scale(1.05);
}

/* Контент фильтра */
.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    background: #fff;
}

/* Секция фильтра */
.filter-section {
    border-bottom: 1px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
}

/* Заголовок секции фильтра */
.filter-section-header {
    width: 100%;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--nfs-t1, #1a1f36);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background 0.15s;
}

.filter-section-header:hover {
    background: var(--nfs-bg2, #f1f5f9);
}

.filter-chevron {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nfs-b1, rgba(58, 66, 96, 0.07));
    border-radius: 6px;
    transition: transform 0.2s, background 0.2s;
    color: var(--nfs-t3, #64748b);
}

.filter-section.active .filter-chevron {
    transform: rotate(180deg);
    background: var(--nfs-blue, #2563eb);
    color: #fff;
}

.filter-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.filter-section.active .filter-section-body {
    max-height: 1000px;
    padding: 0 20px 16px 20px;
}

/* Поиск в фильтре */
.filter-search-box {
    position: relative;
    margin-bottom: 12px;
}

.filter-search-box i,
.filter-search-box svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nfs-t4, #94a3b8);
    font-size: 14px;
    width: 16px;
    height: 16px;
}

.filter-search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    border: 1px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    border-radius: 10px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 13px;
    color: var(--nfs-t1, #1a1f36);
    background: var(--nfs-bg2, #f8fafc);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-search-input::placeholder {
    color: var(--nfs-t4, #94a3b8);
}

.filter-search-input:focus {
    border-color: var(--nfs-blue, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    background: #fff;
}

/* Список марок */
.brand-list {
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--nfs-b2) transparent;
}

.brand-list::-webkit-scrollbar {
    width: 6px;
}

.brand-list::-webkit-scrollbar-track {
    background: transparent;
}

.brand-list::-webkit-scrollbar-thumb {
    background: var(--nfs-b2, rgba(58, 66, 96, 0.12));
    border-radius: 3px;
}

.brand-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 2px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.brand-item:hover {
    background: var(--nfs-bg2, #f1f5f9);
}

/* Кастомные чекбоксы */
.brand-item input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--nfs-b2, rgba(58, 66, 96, 0.2));
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
    flex-shrink: 0;
}

.brand-item input[type="checkbox"]:checked {
    background: var(--nfs-blue, #2563eb);
    border-color: var(--nfs-blue, #2563eb);
}

.brand-item input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.brand-name {
    flex: 1;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 500;
    color: var(--nfs-t1, #1a1f36);
}

.brand-count {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--nfs-t4, #94a3b8);
    background: var(--nfs-bg2, #f1f5f9);
    padding: 2px 8px;
    border-radius: 10px;
}

/* Filter disabled (Модель без выбранной марки) */
.filter-section.filter-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.filter-section.filter-disabled .filter-section-header {
    cursor: not-allowed;
}

.filter-section.filter-disabled.filter-enabled {
    opacity: 1;
    pointer-events: auto;
}

.filter-section.filter-disabled.filter-enabled .filter-section-header {
    cursor: pointer;
}

.filter-placeholder {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0.5rem 0;
}

.model-list {
    max-height: 300px;
    overflow-y: auto;
}

.model-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    cursor: pointer;
}

.model-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.model-name {
    flex: 1;
    font-size: 14px;
    color: var(--gray-900);
}

.model-count {
    font-size: 12px;
    color: var(--gray-500);
}

/* Dual Range Slider — nfs-design-system */
.dual-range-slider {
    position: relative;
    height: 24px;
    margin: 16px 0 8px;
}

.slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--nfs-b1, rgba(58, 66, 96, 0.1));
    border-radius: 3px;
    transform: translateY(-50%);
}

.slider-range {
    position: absolute;
    top: 50%;
    height: 6px;
    background: linear-gradient(90deg, var(--nfs-blue, #2563eb), #3b82f6);
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
    transition: left 0.1s, width 0.1s;
}

.slider-input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 6px;
    margin: 0;
    background: transparent;
    outline: none;
    -webkit-appearance: none;
    pointer-events: none;
    z-index: 2;
    transform: translateY(-50%);
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    pointer-events: all;
    border: 3px solid var(--nfs-blue, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    position: relative;
    z-index: 3;
    transition: transform 0.15s, box-shadow 0.15s;
}

.slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: 3px solid var(--nfs-blue, #2563eb);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    pointer-events: all;
    position: relative;
    z-index: 3;
}

.slider-input-min {
    z-index: 3;
}

.slider-input-max {
    z-index: 4;
}

/* Инпуты диапазона */
.range-inputs {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.range-inputs span {
    color: var(--nfs-t4, #94a3b8);
    font-size: 14px;
}

.range-input {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    border-radius: 8px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--nfs-t1, #1a1f36);
    background: var(--nfs-bg2, #f8fafc);
    outline: none;
    text-align: center;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 0;
}

.range-input:focus {
    border-color: var(--nfs-blue, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
    background: #fff;
}

.range-inputs .range-sep {
    color: var(--nfs-t4, #94a3b8);
    font-weight: 400;
}

/* Дисплей диапазона */
.range-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 700;
    color: var(--nfs-t1, #1a1f36);
}

.range-display span:not(.range-sep) {
    background: var(--nfs-bg2, #f1f5f9);
    padding: 4px 10px;
    border-radius: 6px;
}

.range-sep {
    color: var(--nfs-t4, #94a3b8);
    font-weight: 400;
}

/* Сетка типов кузова */
.body-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.body-type-btn {
    padding: 10px 8px;
    border: 1px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    background: var(--nfs-bg2, #f8fafc);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
}

.body-type-btn span {
    font-size: 11px;
    font-weight: 600;
    color: var(--nfs-t2, #475569);
}

.body-type-btn svg {
    width: 20px;
    height: 20px;
    color: var(--nfs-blue, #2563eb);
}

.body-type-btn:hover {
    border-color: var(--nfs-blue, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}

.body-type-btn.active {
    border-color: var(--nfs-blue, #2563eb);
    background: var(--nfs-blue, #2563eb);
}

.body-type-btn.active span {
    color: #fff;
}

.body-type-btn.active svg {
    color: #fff;
}

.body-type-btn > i {
    font-size: 18px;
    color: var(--nfs-blue, #2563eb);
}

.body-type-icon {
    font-size: 18px;
    color: var(--nfs-blue, #2563eb);
}

.body-type-icon i {
    display: block;
}

.body-type-label {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--nfs-t2, #475569);
}

/* Список типов топлива */
.fuel-type-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.fuel-type-btn {
    padding: 10px 12px;
    border: 1px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    background: var(--nfs-bg2, #f8fafc);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 11px;
    font-weight: 600;
    color: var(--nfs-t2, #475569);
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.fuel-type-btn svg {
    width: 14px;
    height: 14px;
    color: var(--nfs-blue, #3b82f6);
}

.fuel-type-btn:hover {
    border-color: var(--nfs-blue, #2563eb);
    background: rgba(37, 99, 235, 0.06);
}

.fuel-type-btn.active {
    border-color: var(--nfs-blue, #2563eb);
    background: var(--nfs-blue, #2563eb);
    color: #fff;
}

.fuel-type-btn svg,
.fuel-type-btn i {
    width: 16px;
    height: 16px;
    font-size: 14px;
    transition: all 0.2s;
}

.fuel-type-btn:hover,
.fuel-type-btn.active {
    border-color: var(--nfs-blue);
    background: var(--gray-50);
}

/* Футер фильтра */
.sidebar-footer {
    padding: 16px 32px;
    background: #fff;
    border-top: 1px solid var(--nfs-b1, rgba(58, 66, 96, 0.1));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

@media (max-width: 768px) {
    .sidebar-footer {
        padding: 12px 16px;
        flex-direction: column;
        gap: 12px;
    }
}

.sidebar-footer-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-result-text {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 14px;
    color: var(--nfs-t3, #64748b);
}

.filter-result-count {
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 28px;
    font-weight: 800;
    color: var(--nfs-blue, #2563eb);
}

.sidebar-footer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .sidebar-footer-actions {
        width: 100%;
    }
    .sidebar-footer-actions .btn-apply-filters {
        flex: 1;
    }
}

.btn-apply-filters {
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--nfs-blue, #2563eb) 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-apply-filters svg {
    width: 18px;
    height: 18px;
}

.btn-apply-filters:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.btn-apply-filters:active {
    transform: translateY(0);
}

.btn-apply-filters span {
    font-weight: 800;
}

.btn-reset-filters {
    padding: 14px 20px;
    border: 1px solid var(--nfs-b2, rgba(58, 66, 96, 0.12));
    background: #fff;
    border-radius: 12px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--nfs-t2, #475569);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-reset-filters svg {
    width: 16px;
    height: 16px;
}

.btn-reset-filters:hover {
    border-color: var(--nfs-red, #ef4444);
    color: var(--nfs-red, #ef4444);
    background: rgba(239, 68, 68, 0.05);
}

/* Дополнительные фильтры (сетка) */
.filter-extra-section {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--nfs-b1, rgba(58, 66, 96, 0.1));
}

.filter-extra-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.filter-card-small {
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--nfs-b1, rgba(58, 66, 96, 0.08));
}

.filter-card-small .filter-card-header {
    padding: 10px 14px;
}

.filter-card-small .filter-card-body {
    padding: 12px 14px;
}

.filter-options-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.filter-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--nfs-bg2, #f8fafc);
    border: 1px solid var(--nfs-b1, rgba(58, 66, 96, 0.1));
    border-radius: 20px;
    font-family: var(--nfs-ff, 'Montserrat', sans-serif);
    font-size: 12px;
    color: var(--nfs-t2, #475569);
    cursor: pointer;
    transition: all 0.15s;
}

.filter-chip:hover {
    border-color: var(--nfs-blue, #3b82f6);
    background: rgba(59, 130, 246, 0.05);
}

.filter-chip input[type="checkbox"] {
    appearance: none;
    width: 14px;
    height: 14px;
    border: 2px solid var(--nfs-b2, #cbd5e1);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s;
}

.filter-chip input[type="checkbox"]:checked {
    background: var(--nfs-blue, #3b82f6);
    border-color: var(--nfs-blue, #3b82f6);
}

.filter-chip input[type="checkbox"]:checked + span {
    color: var(--nfs-blue, #3b82f6);
    font-weight: 600;
}

/* ===== Catalog Content Area ===== */
.catalog-content-main {
    flex: 1;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* ===== Toolbar каталога / поиска — белый фон (как светлая .nfs-card) ===== */
.catalog-toolbar-new {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 14px 1rem;
    background: #fff;
    border-bottom: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    border-radius: 12px;
}

.nfs-card.catalog-toolbar-new {
    background: #fff;
    border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Три колонки: слева фильтры/счётчик, по центру быстрый поиск, справа сортировка/вид */
.nfs-card.catalog-toolbar-new .nfs-toolbar {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
}

/* Единая высота контролов строки тулбара (поиск, сортировка, вид) */
.nfs-card.catalog-toolbar-new {
    --catalog-toolbar-control-h: 45px;
}

.nfs-card.catalog-toolbar-new .nfs-toolbar {
    align-items: center;
}

/* Занимает всё свободное место между левым блоком и сортировкой — поле тянется до select */
.nfs-card.catalog-toolbar-new .nfs-toolbar-center {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.nfs-card.catalog-toolbar-new .nfs-toolbar-right {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Сортировка и сетка/список — как поле быстрого поиска */
.nfs-card.catalog-toolbar-new .nfs-sort-select {
    height: var(--catalog-toolbar-control-h);
    min-height: var(--catalog-toolbar-control-h);
    max-height: var(--catalog-toolbar-control-h);
    box-sizing: border-box;
    padding: 0 32px 0 12px;
    line-height: 1.25;
    font-size: 12px;
}

.nfs-card.catalog-toolbar-new .nfs-view-btns {
    height: var(--catalog-toolbar-control-h);
    min-height: var(--catalog-toolbar-control-h);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    gap: 4px;
}

.nfs-card.catalog-toolbar-new .nfs-view-btn {
    width: calc(var(--catalog-toolbar-control-h) - 10px);
    height: calc(var(--catalog-toolbar-control-h) - 10px);
    min-width: calc(var(--catalog-toolbar-control-h) - 10px);
    min-height: calc(var(--catalog-toolbar-control-h) - 10px);
    flex-shrink: 0;
}

/* Дубликат «Найдено» для мобилки (в правой колонке); на десктопе не показываем */
.catalog-toolbar-new .nfs-count-badge--toolbar-mobile {
    display: none;
}

@media (min-width: 768px) {
    .nfs-card.catalog-toolbar-new .nfs-toolbar {
        flex-wrap: nowrap;
    }
}

/* (раньше здесь был order для переноса в строке; колонка на мобилке — в блоке max-width:767px ниже) */

/* Мобилка: тулбар каталога — левая колонка, поиск и сортировка на всю ширину */
@media (max-width: 767px) {
    .nfs-card.catalog-toolbar-new .nfs-toolbar {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 12px;
        width: 100%;
    }

    .nfs-card.catalog-toolbar-new .nfs-toolbar-left,
    .nfs-card.catalog-toolbar-new .nfs-toolbar-center,
    .nfs-card.catalog-toolbar-new .nfs-toolbar-right {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        flex: none;
        order: unset;
    }

    .nfs-card.catalog-toolbar-new .nfs-toolbar-left {
        flex-direction: column;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 10px;
    }

    /* Кнопка «Фильтры» на всю ширину строки */
    .nfs-card.catalog-toolbar-new .nfs-toolbar-left .neon-cta {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
    }

    /* Счётчик «Найдено» в левом блоке скрыт — показываем дубликат в .nfs-toolbar-right */
    .nfs-card.catalog-toolbar-new .nfs-toolbar-left .nfs-count-badge--toolbar-primary {
        display: none !important;
    }

    /* Счётчик + сортировка в одну строку */
    .nfs-card.catalog-toolbar-new .nfs-count-badge--toolbar-mobile {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
        max-width: 48%;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .nfs-card.catalog-toolbar-new .nfs-toolbar-center.catalog-toolbar-quicksearch {
        width: 100%;
    }

    .nfs-card.catalog-toolbar-new .catalog-quicksearch-row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nfs-card.catalog-toolbar-new .nfs-toolbar-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .nfs-card.catalog-toolbar-new .nfs-sort-select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Переключатель сетка/список на мобилке не используем — место занимает счётчик */
    .nfs-card.catalog-toolbar-new .nfs-view-btns {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .catalog-toolbar-new {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        padding: 1rem;
    }
}

/* Доступность: подпись скрыта визуально, остаётся для screen reader */
.catalog-toolbar-new .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Быстрый поиск в строке тулбара */
.catalog-toolbar-quicksearch {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0;
}

.catalog-quicksearch-label:not(.visually-hidden) {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--nfs-t3, #5a6480);
}

/* Высота как у .neon-cta в тулбаре (padding 12px×2 + строка текста ≈ 45px) */
.catalog-quicksearch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--catalog-toolbar-control-h, 45px);
    height: var(--catalog-toolbar-control-h, 45px);
    padding: 0 10px 0 8px;
    box-sizing: border-box;
    background: var(--nfs-ch1, #f4f6fa);
    border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
    border-radius: 10px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.catalog-quicksearch-row:focus-within {
    border-color: rgba(59, 127, 255, 0.45);
    box-shadow: 0 0 0 3px var(--nfs-blue-glow, rgba(26, 95, 217, 0.15));
}

.catalog-quicksearch-icon {
    flex-shrink: 0;
    display: flex;
    color: var(--nfs-t4, #9aa0b8);
}

.catalog-quicksearch-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--nfs-t1, #0d1117);
    outline: none;
}

.catalog-quicksearch-input::placeholder {
    color: var(--nfs-t4, #9aa0b8);
    font-weight: 400;
}

.catalog-quicksearch-clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--nfs-t4, #9aa0b8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.catalog-quicksearch-clear:hover {
    background: rgba(58, 66, 96, 0.08);
    color: var(--nfs-t2, #2a3450);
}

.catalog-quicksearch-meta {
    font-size: 11px;
    color: var(--nfs-t3, #5a6480);
    padding-left: 2px;
    line-height: 1.2;
}

.catalog-quicksearch-meta strong {
    color: var(--nfs-t1, #0d1117);
    font-weight: 700;
}

/* Счётчик и переключение вида — тёмный текст на белом */
.catalog-toolbar-new .nfs-count-badge {
    color: var(--nfs-t3, #5a6480);
}

.catalog-toolbar-new .nfs-count-badge span {
    color: var(--nfs-t1, #0d1117);
}

.catalog-toolbar-new .nfs-count-badge--muted {
    color: var(--nfs-t4, #9aa0b8);
}

.catalog-toolbar-new .nfs-view-btns {
    background: var(--nfs-ch1, #f4f6fa);
    border: 0.5px solid var(--nfs-b1, rgba(58, 66, 96, 0.07));
}

.catalog-toolbar-new .nfs-view-btn {
    color: var(--nfs-t4, #9aa0b8);
}

.catalog-toolbar-new .nfs-view-btn:hover {
    color: var(--nfs-t2, #2a3450);
    background: rgba(255, 255, 255, 0.6);
}

.catalog-toolbar-new .nfs-view-btn.active {
    background: var(--nfs-white, #fff);
    color: var(--nfs-blue, #1a5fd9);
}

/* Старый тулбар (toolbar-left / results-count) */
.catalog-toolbar-new .results-count {
    color: var(--nfs-t3, #5a6480);
}

.catalog-toolbar-new .results-count strong {
    color: var(--nfs-t1, #0d1117);
}

.catalog-toolbar-new .btn-toggle-filters {
    border-color: var(--nfs-b2, rgba(58, 66, 96, 0.12));
    background: #fff;
    color: var(--nfs-t2, #2a3450);
}

.catalog-toolbar-new .btn-toggle-filters:hover {
    border-color: rgba(26, 95, 217, 0.35);
    background: var(--nfs-ch1, #f4f6fa);
}

.toolbar-left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .toolbar-left {
        justify-content: flex-start;
    }
}

.btn-toggle-filters {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-toggle-filters.active {
    background: var(--nfs-blue);
    color: white;
    border-color: var(--nfs-blue);
}

.results-count {
    font-size: 12px;
    color: var(--gray-700);
}

@media (min-width: 640px) {
    .results-count {
        font-size: 14px;
    }
}

.toolbar-right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .toolbar-right {
        justify-content: flex-end;
        gap: 1rem;
    }
}

.sort-dropdown-wrapper {
    position: relative;
}

.btn-sort {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

@media (min-width: 640px) {
    .btn-sort {
        font-size: 14px;
        gap: 0.5rem;
    }
}

.sort-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.sort-dropdown-wrapper:hover .sort-menu,
.sort-menu.active {
    display: block;
}

.sort-group {
    padding: 0.5rem 0;
}

.sort-group-title {
    padding: 0.5rem 1rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
}

.sort-option {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 14px;
    color: var(--gray-900);
    text-decoration: none;
    transition: background 0.2s;
}

.sort-option:hover {
    background: var(--gray-50);
}

.view-toggle {
    display: none;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .view-toggle {
        display: flex;
    }
}

.view-btn {
    padding: 0.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s;
}

.view-btn.active {
    background: var(--nfs-blue);
    color: white;
}

.btn-compare {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

@media (min-width: 640px) {
    .btn-compare {
        font-size: 14px;
    }
}

.compare-badge {
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple));
    color: white;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 600;
    animation: pulse 2s infinite;
}

/* ===== Results ===== */
.catalog-results-wrapper {
    /* Отступы под размытие тени nfs-cc (hover: blur ~28px, translateY -3px) */
    padding: 8px 6px 20px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

.catalog-page-wrapper .container,
.catalog-page-wrapper .catalog-layout-flex,
.catalog-page-wrapper .cars-grid-new {
    overflow: visible;
}

/* Сетка каталога: контент карточки (стикеры доставки, длинные цены) не раздувает колонки */
.nfs-catalog-page .cars-grid-new {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.nfs-catalog-page .cars-grid-new > .nfs-cc,
.nfs-catalog-page .cars-grid-new > .skeleton-car-card {
    min-width: 0;
    max-width: 100%;
}

.nfs-catalog-page .cars-grid-new .nfs-cc-body,
.nfs-catalog-page .cars-grid-new .nfs-cc-foot,
.nfs-catalog-page .cars-grid-new .nfs-cc-foot-left,
.nfs-catalog-page .cars-grid-new .nfs-cc-delivery-block,
.nfs-catalog-page .cars-grid-new .nfs-cc-status-pills-wrap,
.nfs-catalog-page .cars-grid-new .nfs-cc-status-pills,
.nfs-catalog-page .cars-grid-new .nfs-cc-delivery-pills-wrap,
.nfs-catalog-page .cars-grid-new .nfs-cc-delivery-pills {
    max-width: 100%;
    min-width: 0;
}

.nfs-catalog-page .cars-grid-new .nfs-sticker {
    max-width: 100%;
    min-width: 0;
}

.nfs-catalog-page .cars-grid-new .nfs-sticker__text {
    min-width: 0;
}

@media (min-width: 640px) {
    .catalog-results-wrapper {
        padding: 0;
    }
}

/* ===== Этапы сделки (nfs-ds4-stages-wrap) над сеткой каталога ===== */
.catalog-feature-stages {
    margin: 1rem 0 1.15rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .catalog-feature-stages {
        margin: 1.5rem 0 1.15rem;
    }
}

/* ===== Feature Promo Banner (legacy — может использоваться вне каталога) ===== */
.feature-promo-banner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin: 1rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .feature-promo-banner {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        margin: 1.5rem 0;
    }
}

@media (min-width: 1024px) {
    .feature-promo-banner {
        grid-template-columns: repeat(4, 1fr);
    }
}

.feature-promo-item {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

@media (min-width: 640px) {
    .feature-promo-item {
        padding: 1rem;
        border-radius: 12px;
        gap: 0.75rem;
    }
}

.feature-promo-item:hover {
    border-color: transparent;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.feature-promo-item:hover .feature-promo-icon {
    transform: scale(1.1);
}

.feature-promo-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

@media (min-width: 640px) {
    .feature-promo-icon {
        width: 40px;
        height: 40px;
    }
}

.feature-promo-icon i {
    color: white;
    font-size: 16px;
}

@media (min-width: 640px) {
    .feature-promo-icon i {
        font-size: 20px;
    }
}

.feature-promo-content {
    min-width: 0;
    flex: 1;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.feature-promo-content h4 {
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .feature-promo-content h4 {
        font-size: 14px;
        margin-bottom: 0.125rem;
    }
}

.feature-promo-content p {
    font-size: 12px;
    color: var(--gray-700);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: none;
}

@media (min-width: 640px) {
    .feature-promo-content p {
        display: block;
    }
}

/* ===== Cars Grid ===== */
.cars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(294px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
    align-items: stretch;
    width: 100%;
}

@media (max-width: 768px) {
    .cars-grid {
        grid-template-columns: 1fr;
    }
}

.cars-grid-view {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
}

@media (min-width: 640px) {
    .cars-grid-view {
        gap: 1.5rem;
    }
}

@media (min-width: 768px) {
    .cars-grid-view {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .cars-grid-view {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
}

/* ===== Car Card ===== */
.car-card-new {
    /* Единый радиус для рамки, внутреннего блока и блока фото (без зазоров в углах) */
    --car-card-new-radius: 12px;
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: var(--car-card-new-radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.car-card-new:hover {
    border-color: var(--nfs-blue);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.car-image-section {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--gray-50);
}

.car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

/* Зум только у старой вёрстки (.car-image-section); у .car-card-new-img зум отключён в home.css */
.car-card-new:hover .car-image-section .car-image {
    transform: scale(1.05);
}

.car-badges {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.badge {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.badge-verified {
    background: var(--nfs-green);
    color: white;
}

.badge-hot {
    background: linear-gradient(135deg, var(--nfs-red), var(--nfs-orange));
    color: white;
}

.car-favorite-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
}

.car-favorite-btn:hover {
    transform: scale(1.1);
}

.car-favorite-btn i {
    font-size: 16px;
    color: var(--gray-700);
}

.car-content-section {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.car-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.car-meta {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 12px;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.car-price {
    font-size: 18px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.car-ai-assessment {
    padding: 0.5rem;
    background: var(--gray-50);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.ai-assessment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.ai-label {
    font-size: 12px;
    color: var(--gray-700);
}

.ai-rating-icon {
    font-size: 12px;
}

.ai-price-scale {
    position: relative;
    height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.price-scale-bar {
    position: relative;
    width: 100%;
    height: 100%;
}

.price-scale-range {
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 100%;
    background: rgba(115, 219, 149, 0.3);
}

.price-scale-marker {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background: var(--nfs-orange);
}

.ai-rating-text {
    font-size: 12px;
    color: var(--nfs-orange);
}

/* Quick Specs в карточках каталога */
.quick-specs-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.25rem 0.5rem;
    font-size: 11px;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0;
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
}
.quick-specs-card .quick-spec-item {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.quick-specs-card .quick-spec-label {
    font-size: 10px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.quick-specs-card .quick-spec-value {
    font-size: 11px;
    color: var(--gray-800);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-specs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.375rem;
    font-size: 12px;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.spec-icon {
    width: 12px;
    height: 12px;
    color: var(--nfs-blue);
}

.car-actions {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.btn-action {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray-300);
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action:hover {
    background: var(--gray-50);
}

.btn-action.active {
    background: var(--nfs-blue);
    color: white;
    border-color: var(--nfs-blue);
}

.btn-details {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--gray-200);
    background: white;
    border-radius: 8px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    color: var(--gray-900);
    transition: all 0.2s;
}

.btn-details:hover {
    background: var(--gray-50);
}

/* ===== CTA Banner ===== */
.cta-banner {
    margin: 1.5rem 0;
}

.cta-banner-content {
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple), oklch(0.656 0.241 354.308));
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
}

.cta-banner-text h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.cta-banner-text p {
    font-size: 14px;
    margin: 0;
    opacity: 0.9;
}

.cta-banner-btn {
    padding: 0.75rem 1.5rem;
    background: white;
    color: var(--nfs-blue);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ===== Quick Tips ===== */
.quick-tips {
    margin: 1.5rem 0;
}

.quick-tips-content {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 1rem;
}

.quick-tips-content h4 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
}

.quick-tips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.quick-tip-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--gray-700);
}

.quick-tip-item i {
    color: var(--nfs-green);
}

/* ===== Empty State ===== */
.empty-state {
    background: white;
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
}

.empty-state-icon {
    font-size: 60px;
    margin-bottom: 1rem;
    color: var(--nfs-blue);
}

.empty-state-icon i {
    display: block;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.empty-state p {
    font-size: 14px;
    color: var(--gray-700);
    margin: 0 0 1.5rem 0;
}

.empty-state ul {
    text-align: left;
    max-width: 400px;
    margin: 0 auto 1.5rem;
    list-style: none;
    padding: 0;
}

.empty-state li {
    padding: 0.5rem 0;
    font-size: 14px;
    color: var(--gray-700);
}

.btn-reset-filters-main {
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

/* ===== Floating Actions ===== */
.floating-actions {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.floating-action-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.floating-action-top {
    background: linear-gradient(135deg, var(--nfs-blue), var(--nfs-purple));
    color: white;
}

.floating-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: var(--nfs-red);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* Compare Dialog — см. nfs-modals.css (.compare-dialog__*) */

/* ===== Responsive Utilities ===== */
.hidden-mobile {
    display: none;
}

@media (min-width: 640px) {
    .hidden-mobile {
        display: inline;
    }
}

.mobile-only {
    display: inline;
}

@media (min-width: 640px) {
    .mobile-only {
        display: none;
    }
}

/* ===== Animations ===== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===== Load More / бесконечный скролл ===== */
/* Скрытый контейнер dataset для JS (#loadMoreBtn) — не занимает место */
.catalog-load-more-state {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    pointer-events: none;
}

/* Маркер внизу списка: при появлении во viewport подгружаются карточки */
.catalog-infinite-sentinel {
    width: 100%;
    min-height: 24px;
    flex-shrink: 0;
}

.catalog-infinite-loader {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 0 8px;
    font-size: 13px;
    color: var(--nfs-t2, #64748b);
}

.catalog-infinite-loader[hidden] {
    display: none !important;
}

/* Обёртка под сеткой каталога (как демо nfs-card) */
.load-more-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    padding-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.catalog-load-more-card {
    padding: 16px;
    margin-bottom: 16px;
    max-width: 640px;
    width: 100%;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}

.catalog-load-more-summary {
    font-size: 11px;
    color: var(--nfs-t3);
    text-align: center;
    margin-bottom: 10px;
}

.catalog-load-more-progress {
    margin-bottom: 12px;
}

.nfs-load-more .nfs-load-more-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 600;
}

.load-more-wrapper {
    text-align: center;
    margin-top: 32px;
    padding: 24px 0;
}

/* Градиентная кнопка — не перекрывает .nfs-load-more в карточке демо */
.btn-load-more:not(.nfs-load-more) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, oklch(0.623 0.214 259.815), oklch(0.627 0.265 303.9));
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-load-more:not(.nfs-load-more):hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.btn-load-more:not(.nfs-load-more):active:not(:disabled) {
    transform: translateY(0);
}

.btn-load-more:not(.nfs-load-more):disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-load-more-text {
    font-weight: 600;
}

.btn-load-more-count {
    font-weight: 400;
    opacity: 0.9;
}

.btn-load-more-icon {
    transition: transform 0.3s ease;
}

.btn-load-more:not(.nfs-load-more):hover:not(:disabled) .btn-load-more-icon {
    transform: translateY(2px);
}

@media (max-width: 640px) {
    .btn-load-more:not(.nfs-load-more) {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .btn-load-more:not(.nfs-load-more) .btn-load-more-count {
        display: none;
    }
}

/* ===== View Toggle: режим списка (одна карточка в строку) ===== */
.cars-grid-new.car-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-card-new.list-view {
    width: 100%;
    transition: all 0.2s ease;
}

.car-card-new.list-view .car-card-new-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 1.25rem;
    padding: 12px 16px;
}

.car-card-new.list-view:hover {
    transform: translateY(0) scale(1.01);
}

.car-card-new.list-view .car-card-new-image {
    width: 200px;
    min-width: 200px;
    height: 140px;
    flex-shrink: 0;
    aspect-ratio: auto;
    border-radius: var(--car-card-new-radius, 12px);
}

.car-card-new.list-view .car-card-new-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.car-card-new.list-view .car-card-new-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.car-card-new.list-view .car-card-new-actions {
    margin-top: 0.75rem;
}

.car-card-new.list-view .car-card-new-title {
    font-size: 16px;
    white-space: normal;
}

.car-card-new.list-view .car-card-new-price {
    font-size: 18px;
}

@media (max-width: 768px) {
    .car-card-new.list-view .car-card-new-inner {
        flex-direction: column;
    }
    
    .car-card-new.list-view .car-card-new-image {
        width: 100%;
        min-width: 100%;
        height: 180px;
    }
}

/* ===== Режим списка: фото | контент | actions ===== */
.nfs-cc.catalog-car-card.list-view {
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex-wrap: nowrap;
    overflow: visible;
}

.nfs-cc.catalog-car-card.list-view:hover {
    transform: none;
}

/* В list meta-строка заменена pills под ценой */
.nfs-cc.catalog-car-card.list-view .nfs-cc-meta-static {
    display: none;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-img {
    position: relative;
    width: 300px;
    min-width: 300px;
    height: 200px;
    flex-shrink: 0;
    aspect-ratio: auto;
    align-self: stretch;
    border-radius: var(--nfs-rl, 14px) 0 0 var(--nfs-rl, 14px);
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-img > a {
    display: block;
    width: 100%;
    height: 100%;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-img > a > img.nfs-cc-gallery-img,
.nfs-cc.catalog-car-card.list-view .nfs-cc-img > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-source-flag {
    top: 10px;
    right: 10px;
    width: 28px;
    height: 19px;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-source-flag img {
    width: 28px !important;
    height: 19px !important;
    max-width: 28px !important;
    max-height: 19px !important;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-body {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    column-gap: 14px;
    row-gap: 8px;
    padding: 12px 16px 12px 16px;
    border-radius: 0 var(--nfs-rl, 14px) var(--nfs-rl, 14px) 0;
    align-content: start;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-name {
    grid-column: 1;
    grid-row: 1;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.3;
}

/* foot → contents: foot-left и actions участвуют в grid body */
.nfs-cc.catalog-car-card.list-view .nfs-cc-foot,
.nfs-cc.catalog-car-card.list-view .nfs-cc-foot--import {
    display: contents;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-foot-left {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-foot--import .nfs-cc-delivery-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    width: 100%;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-foot--import .nfs-cc-status-pills-wrap,
.nfs-cc.catalog-car-card.list-view .nfs-cc-foot--import .nfs-cc-delivery-block__price-row,
.nfs-cc.catalog-car-card.list-view .nfs-cc-foot--import .nfs-cc-foot-left > .nfs-cc-price-row,
.nfs-cc.catalog-car-card.list-view .nfs-cc-foot--import .nfs-cc-foot-left > .nfs-badge {
    grid-column: auto;
    grid-row: auto;
}

/* Actions — узкая колонка справа по центру */
.nfs-cc.catalog-car-card.list-view .nfs-cc-actions {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 8px;
}

/* Pills характеристик под ценой — заполняют ширину */
.nfs-cc.catalog-car-card.list-view .nfs-cc-list-specs {
    grid-column: 1;
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 6px;
    margin: 0;
    padding: 0;
    align-self: end;
    background: transparent;
    border: none;
    border-radius: 0;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-list-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--nfs-ch1, #F4F6FA);
    border: 1px solid var(--nfs-b1, rgba(58, 66, 96, 0.1));
    font-size: 11.5px;
    font-weight: 700;
    color: var(--nfs-t1, #0D1117);
    line-height: 1.2;
    white-space: nowrap;
}

.nfs-cc.catalog-car-card.list-view .nfs-cc-price {
    font-size: 20px;
}

@media (max-width: 1100px) {
    .nfs-cc.catalog-car-card.list-view .nfs-cc-img {
        width: 260px;
        min-width: 260px;
        height: 180px;
    }
}

@media (max-width: 768px) {
    .nfs-cc.catalog-car-card.list-view {
        flex-direction: column;
        min-height: 0;
    }
    .nfs-cc.catalog-car-card.list-view .nfs-cc-img {
        width: 100%;
        min-width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        border-radius: var(--nfs-rl, 14px) var(--nfs-rl, 14px) 0 0;
    }
    .nfs-cc.catalog-car-card.list-view .nfs-cc-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 12px 14px 14px;
    }
    .nfs-cc.catalog-car-card.list-view .nfs-cc-foot,
    .nfs-cc.catalog-car-card.list-view .nfs-cc-foot--import {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }
    .nfs-cc.catalog-car-card.list-view .nfs-cc-actions {
        flex-direction: row;
        align-self: flex-start;
    }
}

.catalog-pagination-wrap {
    margin: 16px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.catalog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.catalog-pagination--minimal .catalog-pagination__link {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid rgba(19, 39, 81, 0.1);
    background: transparent;
    color: #3a4d6e;
    box-shadow: none;
    font-size: 0.8125rem;
    font-weight: 600;
}

.catalog-pagination--minimal .catalog-pagination__link:hover {
    background: rgba(15, 91, 216, 0.06);
    border-color: rgba(27, 78, 168, 0.2);
}

.catalog-pagination--minimal .catalog-pagination__link.is-active {
    background: #16315c;
    border-color: #16315c;
    color: #fff;
    box-shadow: none;
}

.catalog-pagination--minimal .catalog-pagination__link--nav {
    min-width: 30px;
    padding: 0;
    font-size: 1.125rem;
    line-height: 1;
    font-weight: 500;
}

.catalog-pagination__pages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}

.catalog-pagination__link {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(19, 39, 81, 0.12);
    background: #fff;
    color: #16315c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.catalog-pagination__link:hover {
    border-color: rgba(27, 78, 168, 0.28);
    background: #f5f9ff;
}

.catalog-pagination__link.is-active {
    background: linear-gradient(135deg, #0f5bd8 0%, #2a8cff 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(28, 96, 214, 0.22);
}

.catalog-pagination__link.is-disabled {
    opacity: .4;
    pointer-events: none;
    box-shadow: none;
}

.catalog-pagination__ellipsis {
    color: #8a98b0;
    font-weight: 600;
    padding: 0 4px;
    font-size: 0.8125rem;
}

/* Кнопка «вниз»: догрузка следующей ?page= с append + pushState */
.catalog-pagination__expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(19, 39, 81, 0.12);
    background: #fff;
    color: #16315c;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(22, 49, 92, 0.08);
    transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

.catalog-pagination__expand:hover {
    border-color: rgba(27, 78, 168, 0.35);
    background: #f5f9ff;
    color: #0f5bd8;
    transform: translateY(2px);
}

.catalog-pagination__expand.is-loading {
    pointer-events: none;
    opacity: 0.65;
}

.catalog-pagination__expand-icon {
    display: block;
}

.catalog-toolbar-per-page {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    color: #5a6a86;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.catalog-toolbar-per-page__select {
    height: 36px;
    min-width: 4.25rem;
    padding: 0 0.55rem;
    border: 1px solid rgba(19, 39, 81, 0.14);
    border-radius: 10px;
    background: #fff;
    color: #16315c;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.catalog-toolbar-filters-btn.nfs-btn-get-started {
    min-height: 2.5rem;
    padding: 0 1.25rem;
    font-size: 0.8125rem;
}

.catalog-toolbar-filters-btn.nfs-btn-get-started.active,
.catalog-toolbar-filters-btn.nfs-btn-get-started[aria-expanded="true"] {
    box-shadow:
        0 0 0 1px rgba(59, 127, 255, 0.45),
        0 4px 16px rgba(26, 95, 217, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

@media (max-width: 768px) {
    .catalog-toolbar-per-page__label {
        display: none;
    }
}

/* Поисковый запрос в футере расширенных фильтров каталога */
.catalog-filter-search-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.catalog-filter-search-block__title {
    margin: 0;
}

.catalog-filter-search-shell {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.catalog-filter-search-mode {
    flex: 0 0 auto;
    align-self: center;
    margin-left: 2px;
}

.catalog-filter-search-mode .nfs-search-mode-btn.is-active[data-search-mode="fast"] {
    color: #fff;
    background: linear-gradient(135deg, rgba(59, 127, 255, 0.92) 0%, rgba(26, 95, 217, 0.96) 100%);
    box-shadow: 0 8px 18px rgba(26, 95, 217, 0.24);
}

.catalog-filter-search-mode .nfs-search-mode-btn.is-active[data-search-mode="deep"] {
    color: #2f1b00;
    background: linear-gradient(135deg, rgba(255, 206, 92, 0.96) 0%, rgba(255, 184, 0, 0.94) 100%);
    box-shadow: 0 8px 18px rgba(255, 184, 0, 0.22);
}

.catalog-filter-search-input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 40px;
    max-height: 120px;
    resize: none;
    border: none;
    border-radius: 999px;
    padding: 10px 14px;
    font: inherit;
    line-height: 1.35;
    color: #0f172a;
    background: transparent;
    transition: box-shadow 0.15s ease;
}

.catalog-filter-search-input:focus {
    outline: none;
    box-shadow: none;
}

.catalog-filter-search-shell:focus-within {
    border-color: rgba(59, 127, 255, 0.45);
    box-shadow: 0 0 0 3px rgba(59, 127, 255, 0.1);
}

/* Пересчёт count_only: три точки в кнопке «Показать N авто» */
.nfs-filter-count-dots {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    min-width: 2.1rem;
    height: 1em;
    vertical-align: middle;
}

.nfs-filter-count-dots span {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    transform-origin: center bottom;
    animation: nfs-filter-count-dot-wave 0.82s ease-in-out infinite;
}

.nfs-filter-count-dots span:nth-child(2) {
    animation-delay: 0.14s;
}

.nfs-filter-count-dots span:nth-child(3) {
    animation-delay: 0.28s;
}

@keyframes nfs-filter-count-dot-wave {
    0%, 100% {
        transform: scaleY(0.42);
        opacity: 0.5;
    }

    50% {
        transform: scaleY(1.2);
        opacity: 1;
    }
}

#applyFilters.is-catalog-count-loading,
.hero-filter-toolbar-submit.is-catalog-count-loading {
    cursor: wait;
    filter: brightness(0.97);
}

#filterResultCount.is-catalog-count-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
}

.catalog-filter-search-shell.is-catalog-search-count-loading {
    border-color: rgba(245, 158, 11, 0.42);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

@media (max-width: 640px) {
    .catalog-filter-search-shell {
        flex-wrap: wrap;
        border-radius: 16px;
        padding: 8px;
    }

    .catalog-filter-search-mode {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
    }

    .catalog-filter-search-input {
        width: 100%;
        border-radius: 12px;
        min-height: 44px;
    }
}

/* === css/catalog_hub.css === */
/* SEO-хабы и плитки faceted landings на каталоге */
.catalog-faceted-tiles {
    margin: 0.75rem 0 1.25rem;
}

.catalog-faceted-tiles__grid {
    display: grid;
    /* Шире minmax: длинные названия (E-Class, A-Class…) без обрезки */
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
    gap: 0.5rem;
}

.catalog-faceted-tiles__grid--visual {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.75rem 0.85rem;
    align-items: end;
}

.catalog-faceted-tiles__grid--brands {
    margin-top: 1.5rem;
}

.catalog-faceted-tiles__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: #ffffff;
    color: #1f2937;
    font-size: 0.8125rem;
    text-decoration: none;
    box-shadow: none;
    transition: border-color 0.15s, background 0.15s;
}

/* Плитки кузова: PNG уже с подписью, светлый фон, без текста */
.catalog-faceted-tiles__item--visual {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    min-height: 0;
    padding: 0.35rem 0.25rem 0.15rem;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.catalog-faceted-tiles__item--visual:hover {
    background: transparent;
    border: none;
    color: inherit;
    transform: translateY(-2px);
}

.catalog-faceted-tiles__visual {
    display: block;
    width: 100%;
    max-width: 11.5rem;
    height: auto;
    object-fit: contain;
    background: transparent;
}

/* Счётчик на visual: стили после .catalog-faceted-tiles__count (см. ниже) */

.catalog-faceted-tiles__item:hover {
    border-color: rgba(26, 95, 217, 0.3);
    color: #1a5fd9;
    background: #f5f9ff;
    box-shadow: none;
    transform: none;
}

.catalog-faceted-tiles__item.is-row-hidden {
    display: none !important;
}

.catalog-faceted-tiles__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}

.catalog-faceted-tiles__label {
    display: -webkit-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-weight: 700;
    line-height: 1.25;
    font-size: 0.8125rem;
}

.catalog-faceted-tiles__subtitle {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #7b8498;
    line-height: 1.2;
}

.catalog-faceted-tiles__flags {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 0.75rem;
}

.catalog-faceted-tiles__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #fff;
}

.catalog-faceted-tiles__flag img {
    display: block;
    width: 16px;
    height: 11px;
    object-fit: cover;
}

.catalog-faceted-tiles__count {
    flex-shrink: 0;
    align-self: center;
    padding: 0.15rem 0.4rem;
    border-radius: 999px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: #1a5fd9;
    background: rgba(26, 95, 217, 0.1);
    border: 1px solid rgba(26, 95, 217, 0.14);
}

/* Поверх фото кузова: белый чип с тенью (выше специфичность, чем базовый count) */
.catalog-faceted-tiles__count.catalog-faceted-tiles__count--on-visual {
    position: absolute;
    top: 0.15rem;
    right: 0.1rem;
    z-index: 2;
    align-self: auto;
    min-width: 2.35rem;
    padding: 0.28rem 0.5rem;
    font-family: 'Share Tech Mono', ui-monospace, monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #0f172a;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.16);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.9),
        0 2px 10px rgba(15, 23, 42, 0.22);
}

.catalog-faceted-tiles__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.55rem;
    min-height: 2.25rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(26, 95, 217, 0.22);
    background: #f5f9ff;
    color: #1a5fd9;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.catalog-faceted-tiles__toggle:hover {
    background: #eaf2ff;
    border-color: rgba(26, 95, 217, 0.35);
}

.catalog-faceted-tiles__toggle:focus-visible {
    outline: 2px solid rgba(26, 95, 217, 0.45);
    outline-offset: 2px;
}

.catalog-hub-intro--after-results {
    margin: 1.75rem 0 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    max-width: none;
}

.catalog-hub-intro {
    margin: 0.75rem 0 1rem;
    color: #334155;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 52rem;
}

.catalog-hub-intro h2,
.catalog-hub-intro h3 {
    color: #0f172a;
    margin: 1rem 0 0.5rem;
}

.catalog-hub-intro h2:first-child,
.catalog-hub-intro h3:first-child {
    margin-top: 0;
}

.catalog-hub-intro p {
    margin: 0 0 0.75rem;
}

.catalog-hub-intro__body {
    overflow: hidden;
}

.catalog-hub-intro.is-collapsed .catalog-hub-intro__body {
    max-height: 8.75rem;
    mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}

.catalog-hub-intro__toggle {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
    padding: 0;
    border: none;
    background: none;
    color: #1a5fd9;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.catalog-hub-intro__toggle:hover {
    text-decoration: underline;
}

.nfs-brands-index-page {
    padding: 1.5rem 0 3rem;
}

.nfs-brands-index__title {
    margin: 0.5rem 0;
    font-size: 1.75rem;
}

.nfs-brands-index__lead {
    color: #a8b8c8;
    margin-bottom: 0.5rem;
}

.nfs-brands-breadcrumb {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.nfs-brands-breadcrumb a {
    color: #64748b;
    text-decoration: none;
}

.nfs-brands-breadcrumb a:hover {
    color: var(--nfs-primary, #1a5fd9);
}

.nfs-brands-breadcrumb .nfs-bc-sep {
    color: #cbd5e1;
}

.nfs-brands-breadcrumb span:last-child {
    color: #0f172a;
    font-weight: 600;
}

.nfs-bc-sep {
    margin: 0 0.35rem;
    opacity: 0.5;
}

@media (max-width: 900px) {
    .catalog-faceted-tiles__grid {
        grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
        gap: 0.45rem;
    }

    .catalog-faceted-tiles__grid--visual {
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
        gap: 0.55rem;
    }
}

@media (max-width: 640px) {
    .catalog-faceted-tiles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    /* Visual кузова: горизонтальная карусель */
    .catalog-faceted-tiles__grid--visual {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-end;
        gap: 0.65rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding: 0.15rem 0.1rem 0.55rem;
        margin: 0 -0.25rem;
        scrollbar-width: thin;
    }

    .catalog-faceted-tiles__grid--visual::-webkit-scrollbar {
        height: 4px;
    }

    .catalog-faceted-tiles__grid--visual::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.55);
        border-radius: 999px;
    }

    .catalog-faceted-tiles__item {
        min-height: 2.85rem;
        padding: 0.45rem 0.5rem;
        gap: 0.35rem;
    }

    .catalog-faceted-tiles__item--visual {
        flex: 0 0 auto;
        width: 7.75rem;
        min-height: 0;
        padding: 0.2rem 0.1rem;
        scroll-snap-align: start;
    }

    .catalog-faceted-tiles__item--visual.is-row-hidden {
        display: flex !important;
    }

    .catalog-faceted-tiles__visual {
        max-width: none;
    }

    .catalog-faceted-tiles__count.catalog-faceted-tiles__count--on-visual {
        font-size: 0.75rem;
        padding: 0.24rem 0.42rem;
    }

    .catalog-faceted-tiles__label {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .catalog-faceted-tiles__toggle {
        width: 100%;
    }

    .catalog-hub-intro--after-results {
        margin-top: 1.25rem;
        padding-top: 1rem;
        font-size: 0.9rem;
    }
}

/* === css/nfs-get-started-btn.css === */
/**
 * Кнопка Get Started — текст исчезает, правая панель со стрелкой расширяется на hover.
 * Используется на главной: hero-поиск, «Показать ещё», features CTA, отзывы Яндекс.
 */

.nfs-btn-get-started {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.75rem;
  padding: 0 2rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  font-family: var(--nfs-ff, 'Montserrat', sans-serif);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(
    150deg,
    #3b7fff 0%,
    var(--nfs-blue2, #2b6fe8) 40%,
    var(--nfs-blue, #1a5fd9) 70%,
    #1248b0 100%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 -1px 0 rgba(0, 0, 0, 0.15) inset,
    0 2px 10px rgba(26, 95, 217, 0.28);
  transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.nfs-btn-get-started::after {
  content: none;
  display: none;
}

.nfs-btn-get-started:hover {
  color: #fff;
  filter: brightness(1.03);
  box-shadow:
    0 0 0 1px rgba(59, 127, 255, 0.45),
    0 4px 16px rgba(26, 95, 217, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
}

.nfs-btn-get-started:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--nfs-white, #fff),
    0 0 0 4px var(--nfs-blue, #1a5fd9);
}

.nfs-btn-get-started__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-right: 2rem;
  transition: opacity 0.5s ease;
  position: relative;
  z-index: 2;
}

.nfs-btn-get-started:hover .nfs-btn-get-started__label {
  opacity: 0;
}

.nfs-btn-get-started__label svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.nfs-btn-get-started__slide {
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  bottom: 0.25rem;
  width: 25%;
  min-width: 2.25rem;
  border-radius: 0.25rem;
  z-index: 10;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: width 0.5s ease, transform 0.15s ease;
  pointer-events: none;
}

.nfs-btn-get-started:hover .nfs-btn-get-started__slide {
  width: calc(100% - 0.5rem);
}

.nfs-btn-get-started:active .nfs-btn-get-started__slide {
  transform: scale(0.97);
}

/* Модификаторы ширины */
.nfs-btn-get-started--wide {
  min-width: 15.75rem;
}

.nfs-btn-get-started--xl {
  min-width: 20rem;
  font-size: 0.9375rem;
  min-height: 3.25rem;
  padding: 0 2.25rem;
}

/* Hero: переопределяем старый shimmer/hover transform */
#heroSection .hero-filter-toolbar-submit.nfs-btn-get-started,
.hero-btn-primary-catalog.nfs-btn-get-started {
  transform: none;
}

#heroSection .hero-filter-toolbar-submit.nfs-btn-get-started:hover,
.hero-btn-primary-catalog.nfs-btn-get-started:hover {
  transform: none;
}

/* Listings: синий primary вместо хромового градиента */
.nfs-listings-btn-more.nfs-btn-get-started {
  padding: 0 2rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: #fff;
  background: linear-gradient(
    150deg,
    #3b7fff 0%,
    var(--nfs-blue2, #2b6fe8) 40%,
    var(--nfs-blue, #1a5fd9) 70%,
    #1248b0 100%
  );
}

.nfs-listings-btn-more.nfs-btn-get-started:hover {
  transform: none;
  color: #fff;
}

/* Features CTA */
#featuresSection .nfs-btn-primary.nfs-btn-get-started,
#featuresSection .nfs-btn-primary.nfs-btn-get-started:visited {
  color: #fff;
}

/* Отзывы Яндекс */
.nfs-rev-cta.nfs-btn-get-started {
  border-radius: 0.375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.nfs-rev-cta.nfs-btn-get-started:hover {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .nfs-btn-get-started__label,
  .nfs-btn-get-started__slide {
    transition: none;
  }

  .nfs-btn-get-started:hover .nfs-btn-get-started__label {
    opacity: 1;
  }

  .nfs-btn-get-started:hover .nfs-btn-get-started__slide {
    width: 25%;
  }
}

@media (max-width: 767px) {
  .nfs-btn-get-started--wide {
    min-width: 100%;
    width: 100%;
  }

  .nfs-btn-get-started--xl {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .nfs-btn-get-started--xl .nfs-btn-get-started__label {
    white-space: normal;
    text-align: center;
  }
}

/* === css/skeleton.css === */
/**
 * @file: skeleton.css
 * @description: Стили для skeleton-загрузчиков (анимированные плейсхолдеры)
 */

/* ===== Базовый эффект shimmer (волна) ===== */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        oklch(0.95 0.002 264.542) 0%,
        oklch(0.97 0.003 264.542) 50%,
        oklch(0.95 0.002 264.542) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Строка-плейсхолдер (реестр DS, списки) */
.skeleton-line {
    display: block;
    height: 14px;
    min-height: 14px;
    width: 100%;
}

/* Отключаем анимацию для пользователей с prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: oklch(0.95 0.002 264.542);
    }
}

/* ===== Skeleton-карточка автомобиля (каталог) ===== */
.skeleton-car-card {
    background: white;
    border: 1px solid oklch(0.928 0.006 264.531);
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.skeleton-car-card-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.skeleton-car-card-image .skeleton {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.skeleton-car-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-car-card-title {
    height: 18px;
    width: 85%;
}

.skeleton-car-card-delivery {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.skeleton-car-card-price {
    height: 22px;
    width: 45%;
}

.skeleton-car-card-meta {
    display: flex;
    gap: 0.5rem;
}

.skeleton-car-card-meta .skeleton {
    height: 14px;
    flex: 1;
    min-width: 60px;
}

.skeleton-car-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.skeleton-car-card-actions .skeleton {
    height: 36px;
    flex: 1;
    border-radius: 8px;
}

/* ===== Skeleton для элемента поиска (глобальный поиск) ===== */
.skeleton-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    min-height: 56px;
}

.skeleton-search-item-image {
    width: 64px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 6px;
}

.skeleton-search-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-search-item-title {
    height: 14px;
    width: 80%;
}

.skeleton-search-item-meta {
    height: 12px;
    width: 60%;
}

/* ===== Skeleton для списка (универсальный) ===== */
.skeleton-list-item {
    padding: 12px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.skeleton-list-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-list-item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-list-item-text .skeleton:first-child {
    height: 14px;
    width: 70%;
}

.skeleton-list-item-text .skeleton:last-child {
    height: 12px;
    width: 50%;
}

/* ===== Skeleton для блока контента ===== */
.skeleton-block {
    padding: 1rem;
}

.skeleton-block-line {
    height: 16px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-block-line:last-child {
    width: 60%;
    margin-bottom: 0;
}

.skeleton-block-title {
    height: 24px;
    width: 40%;
    margin-bottom: 1rem;
}

/* ===== Skeleton для изображения (любой размер) ===== */
.skeleton-image {
    width: 100%;
    height: 100%;
    min-height: 100px;
}

/* ===== Карточка nfs-cc: ленивые поля до прихода данных ===== */

/* Фото лота */
.nfs-cc-img.is-media-loading .nfs-cc-img-skeleton {
    display: block;
}

.nfs-cc-img-skeleton {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
}

.nfs-cc-img.is-media-loading img.nfs-cc-gallery-img {
    opacity: 0;
}

.nfs-cc-img:not(.is-media-loading) .nfs-cc-img-skeleton {
    display: none;
}

/* Блок «под ключ» (доставка) */
.nfs-cc-delivery-block.is-loading .nfs-cc-delivery-placeholder,
.nfs-cc-delivery-block.is-loading .nfs-cc-status-pills-placeholder {
    display: flex;
}

.nfs-cc-delivery-block.is-ready .nfs-cc-delivery-placeholder,
.nfs-cc-delivery-block.is-ready .nfs-cc-status-pills-placeholder,
.nfs-cc-delivery-block.is-error .nfs-cc-delivery-placeholder,
.nfs-cc-delivery-block.is-error .nfs-cc-status-pills-placeholder {
    display: none;
}

.nfs-cc-delivery-placeholder {
    display: none;
    align-items: baseline;
    gap: 3px;
    flex-wrap: wrap;
    width: 100%;
}

.nfs-cc-skel-total {
    width: 56px;
    height: 14px;
    border-radius: 3px;
}

.nfs-cc-skel-currency {
    width: 36px;
    height: 14px;
    border-radius: 3px;
}

.nfs-cc-skel-label {
    width: 56px;
    height: 12px;
    border-radius: 3px;
}

.nfs-cc-delivery-pills-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 4px;
    min-height: 20px;
}

.nfs-cc-status-pills-placeholder {
    display: none;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.nfs-cc-skel-pill {
    width: 88px;
    height: 18px;
    border-radius: 999px;
}

.nfs-cc-skel-pill--short {
    width: 64px;
}

.nfs-cc-delivery-block.is-loading .nfs-cc-delivery-values {
    display: none !important;
}

.nfs-cc-delivery-block.is-ready .nfs-cc-delivery-values,
.nfs-cc-delivery-block.is-error .nfs-cc-delivery-values {
    display: contents;
}

.nfs-cc-delivery-block.is-loading .nfs-cc-status-pills {
    display: none;
}

.nfs-cc-delivery-block.is-ready .nfs-cc-status-pills,
.nfs-cc-delivery-block.is-error .nfs-cc-status-pills {
    display: flex;
}

/* Цена авто — skeleton при пересчёте валюты */
.nfs-cc-price-row--car.is-loading .nfs-cc-car-price-placeholder {
    display: flex;
}

.nfs-cc-price-row--car.is-ready .nfs-cc-car-price-placeholder,
.nfs-cc-price-row--car.is-error .nfs-cc-car-price-placeholder {
    display: none;
}

.nfs-cc-car-price-placeholder {
    display: none;
    align-items: baseline;
    gap: 3px;
    flex-wrap: wrap;
}

.nfs-cc-skel-label--car {
    width: 48px;
}

.nfs-cc-price-row--car.is-loading .nfs-cc-car-price-values {
    display: none !important;
}

.nfs-cc-price-row--car.is-ready .nfs-cc-car-price-values,
.nfs-cc-price-row--car.is-error .nfs-cc-car-price-values {
    display: contents;
}