/* =============================================================
   AutoBay24 — Design System v4
   Hero: text left / featured car right / form below (full width)
   ============================================================= */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ab-blue:        #0f5eff;
  --ab-blue-hover:  #2b72ff;
  --ab-blue-dark:   #0b47c9;
  --ab-blue-soft:   #e8efff;
  --ab-blue-line:   rgba(15,94,255,0.14);

  --ab-ink:         #10141b;
  --ab-ink-2:       #3a4150;
  --ab-ink-3:       #5b6272;
  --ab-ink-4:       #8a92a3;
  --ab-ink-5:       #c8ccd2;

  --ab-surface:     #ffffff;
  --ab-bg:          #f7f6f2;
  --ab-bg-2:        #f1f0ea;

  --ab-line:        rgba(16,20,27,0.08);
  --ab-line-2:      rgba(16,20,27,0.12);

  --ab-success:     #0d9959;
  --ab-success-soft:#e4f5ec;

  --ab-amber:       #e8772e;
  --ab-amber-hover: #f58d3f;
  --ab-amber-soft:  #fff1e8;

  --ab-gold:        #c9982e;
  --ab-gold-soft:   #faf1d8;

  --ab-dark:        #10141b;
  --ab-dark-2:      #1a2030;
  --ab-on-dark:     #f7f6f2;
  --ab-on-dark-2:   rgba(247,246,242,0.7);
  --ab-on-dark-3:   rgba(247,246,242,0.45);
  --ab-on-dark-line:rgba(247,246,242,0.12);

  --ab-radius:      10px;
  --ab-radius-sm:   6px;
  --ab-radius-lg:   14px;
  --ab-header-h:    64px;

  /* ─── Shadow tokens (unified across all cards) ─── */
  --ab-shadow-card:       0 1px 3px rgba(16,20,27,0.04);                                       /* idle card */
  --ab-shadow-card-hover: 0 14px 32px rgba(16,20,27,0.12), 0 4px 10px rgba(15,94,255,0.06);   /* lift on hover — subtle blue hint */
  --ab-shadow-accent:     0 10px 28px rgba(15,94,255,0.12);                                   /* blue-tinted, for selected/primary interactive cards */
  --ab-shadow-elevated:   0 16px 40px rgba(16,20,27,0.15);                                    /* dropdowns, popovers */
  --ab-shadow-modal:      0 20px 50px rgba(0,0,0,0.3);                                        /* dialogs, featured standout cards */

  --ab-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ab-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ab-dur:         0.25s;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--ab-font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ab-ink-2);
  background: var(--ab-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  padding-top: var(--ab-header-h);
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }

@keyframes abFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes abFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* =============================================================
   HEADER
   ============================================================= */
.ab-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--ab-header-h);
  background: var(--ab-surface);
  border-bottom: 1px solid var(--ab-line);
  z-index: 100;
  transition: box-shadow var(--ab-dur) var(--ab-ease);
}
.ab-header.is-scrolled { box-shadow: 0 1px 12px rgba(16,20,27,0.06); }
.ab-header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 20px; }

/* =============================================================
   LOGO — FINAL SPECIFICATION
   Wordmark-only: Archivo 700 italic uppercase, 24px default
   AUTO → --ab-ink   |   BAY → --ab-blue   |   24 → --ab-ink-3
   ============================================================= */
.ab-logo {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1;
  font-size: 24px;
  user-select: none;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
  transition: transform var(--ab-dur) var(--ab-ease);
}
.ab-logo:hover { transform: translateY(-1px); }

.ab-logo__auto { color: var(--ab-ink); }
.ab-logo__bay  { color: var(--ab-blue); }
.ab-logo__num  { color: var(--ab-ink-3); margin-left: 0.02em; }

/* Dark theme (footer) */
.ab-logo--dark .ab-logo__auto { color: #fff; }
.ab-logo--dark .ab-logo__bay  { color: var(--ab-blue); }
.ab-logo--dark .ab-logo__num  { color: rgba(255, 255, 255, 0.5); }

/* Mobile */
@media (max-width: 640px) {
  .ab-logo { font-size: 18px; }
}

.ab-nav { display: flex; gap: 24px; align-items: center; flex: 1; justify-content: center; }
.ab-nav__link {
  font-size: 15px; font-weight: 500; color: var(--ab-ink-2);
  padding: 8px 2px; position: relative;
  transition: color var(--ab-dur) var(--ab-ease);
}
.ab-nav__link:hover { color: var(--ab-ink); }
.ab-nav__link.is-active { color: var(--ab-ink); }
.ab-nav__link.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--ab-blue); border-radius: 2px;
}

.ab-header__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ab-header__actions .ab-btn { font-size: 15px; }     /* match .ab-nav__link size */
.ab-link { font-size: 15px; color: var(--ab-ink-2); font-weight: 500; }
.ab-link:hover { color: var(--ab-blue); }

.ab-burger { background: none; border: none; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.ab-burger span { display: block; width: 20px; height: 2px; background: var(--ab-ink); border-radius: 2px; transition: all var(--ab-dur) var(--ab-ease); }
.ab-burger.is-open span:nth-child(1) { transform: rotate(45deg) translate(4px, 5px); }
.ab-burger.is-open span:nth-child(2) { opacity: 0; }
.ab-burger.is-open span:nth-child(3) { transform: rotate(-45deg) translate(4px, -5px); }

.ab-mobnav {
  position: fixed; top: var(--ab-header-h); left: 0; right: 0;
  background: var(--ab-surface);
  border-bottom: 1px solid var(--ab-line);
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-100%); opacity: 0; pointer-events: none;
  transition: all var(--ab-dur) var(--ab-ease);
  z-index: 99;
}
.ab-mobnav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.ab-mobnav__link {
  padding: 14px 12px; font-size: 15px; font-weight: 500;
  color: var(--ab-ink-2); border-radius: var(--ab-radius-sm);
}
.ab-mobnav__link:hover { background: var(--ab-bg); color: var(--ab-ink); }
.ab-mobnav__link--cta { color: var(--ab-blue); font-weight: 600; }
.ab-mobnav__sep { height: 1px; background: var(--ab-line); margin: 8px 0; }

/* =============================================================
   BUTTONS & LINKS
   ============================================================= */
.ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  border: 1.5px solid transparent; border-radius: var(--ab-radius-sm);
  cursor: pointer; transition: all var(--ab-dur) var(--ab-ease);
  white-space: nowrap; line-height: 1.2;
}
.ab-btn--primary { background: var(--ab-blue); color: #fff; border-color: var(--ab-blue); }
.ab-btn--primary:hover { background: var(--ab-blue-hover); border-color: var(--ab-blue-hover); }
.ab-btn--amber { background: var(--ab-amber); color: #fff; border-color: var(--ab-amber); box-shadow: 0 3px 10px rgba(232, 119, 46, 0.25); }
.ab-btn--amber:hover { background: var(--ab-amber-hover); border-color: var(--ab-amber-hover); box-shadow: 0 5px 14px rgba(232, 119, 46, 0.35); transform: translateY(-1px); }
.ab-btn--outline { background: transparent; color: var(--ab-blue); border-color: var(--ab-blue); }
.ab-btn--outline:hover { background: var(--ab-blue); color: #fff; }
.ab-btn--ghost { background: transparent; color: var(--ab-ink-2); border-color: var(--ab-line-2); }
.ab-btn--ghost:hover { border-color: var(--ab-blue); color: var(--ab-blue); }
.ab-btn--dark { background: var(--ab-dark); color: #fff; border-color: var(--ab-dark); }
.ab-btn--dark:hover { background: var(--ab-blue); border-color: var(--ab-blue); }
.ab-btn--sm { padding: 9px 14px; font-size: 12.5px; }
.ab-btn--lg { padding: 14px 26px; font-size: 15px; }
.ab-btn--block { width: 100%; }

/* =============================================================
   SHARED COMPONENTS — single source of truth across all pages
   (previously duplicated in ab24-auto/concessionari/detail/faq/piani/registrati .css)
   ============================================================= */

/* ─── Breadcrumbs ─── */
.ab-crumbs {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 13px; color: var(--ab-ink-3);
  margin-bottom: 18px;
}
.ab-crumbs a { color: var(--ab-ink-3); text-decoration: none; transition: color var(--ab-dur) var(--ab-ease); }
.ab-crumbs a:hover { color: var(--ab-blue); }
.ab-crumbs__sep { color: var(--ab-ink-5); }
.ab-crumbs__current { color: var(--ab-ink); font-weight: 500; }

/* ─── Pagination (base) — page-specific justify via modifier ─── */
.ab-pagination {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.ab-pagination--end    { justify-content: flex-end; margin-left: auto; }
.ab-pagination--center { justify-content: center; margin-top: 30px; }

/* ─── Contact form status bar (used on detail + piani preventivo) ─── */
.ab-contact-form__status {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--ab-radius-sm);
}
.ab-contact-form__status.is-sending { display: block; background: var(--ab-blue-soft); color: var(--ab-blue); }
.ab-contact-form__status.is-success { display: block; background: var(--ab-success-soft); color: var(--ab-success); font-weight: 600; }
.ab-contact-form__status.is-error   { display: block; background: rgba(230,57,70,0.1); color: #c62828; }

/* ─── Honeypot (anti-spam hidden field) ─── */
.ab-honeypot {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  visibility: hidden;
}

.ab-link-arrow {
  font-size: 13px; font-weight: 500; color: var(--ab-blue);
  padding: 8px 16px; border: 1.5px solid var(--ab-blue-line);
  border-radius: 100px; display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; transition: all var(--ab-dur) var(--ab-ease);
}
.ab-link-arrow:hover { border-color: var(--ab-blue); background: var(--ab-blue-soft); }

/* =============================================================
   SECTIONS
   ============================================================= */
.ab-section { padding: 48px 0; }
.ab-section--light { background: var(--ab-bg); }
.ab-section--white { background: var(--ab-surface); }
.ab-section--dark { background: var(--ab-dark); color: var(--ab-on-dark); }

/* Adjacent same-color sections — group visually by removing top padding */
.ab-section--light + .ab-section--light,
.ab-section--white + .ab-section--white { padding-top: 0; }

.ab-section__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.ab-section__head--center { justify-content: center; text-align: center; margin-bottom: 32px; flex-direction: column; align-items: center; }

.ab-section__title {
  font-size: 30px; font-weight: 600;
  color: var(--ab-ink); letter-spacing: -0.025em;
  line-height: 1.15; margin: 0;
}
.ab-section__title--on-dark { color: var(--ab-on-dark); }

.ab-section__lead {
  font-size: 15px; color: var(--ab-ink-3);
  max-width: 600px; margin: 10px auto 0; line-height: 1.6;
}
.ab-section--dark .ab-section__lead { color: var(--ab-on-dark-2); }

.ab-empty { padding: 40px 20px; text-align: center; color: var(--ab-ink-3); font-size: 14px; }

/* =============================================================
   PAGE HEADER — unified header across all page types
   Typology:
   - .ab-page-header              — Marketing (centered, with eyebrow): /piani, /faq
   - .ab-page-header--catalog     — Catalog listings (left-aligned, border): /auto, /concessionari
   - .ab-page-header--detail      — Detail pages (compact): /auto-<slug>, /concessionari/<name>
   ============================================================= */
.ab-page-header {
  background: var(--ab-bg);
  padding: 36px 0 28px;
}
.ab-page-header > .container { position: relative; }

.ab-page-header__crumbs { margin-bottom: 18px; }   /* wrapper around .ab-crumbs */
.ab-page-header__inner  { text-align: center; max-width: 780px; margin: 0 auto; }
.ab-page-header__title {
  font-size: 38px; font-weight: 700;
  color: var(--ab-ink); letter-spacing: -0.025em;
  line-height: 1.15; margin: 0 0 12px;
}
.ab-page-header__lead {
  font-size: 16px; color: var(--ab-ink-3);
  line-height: 1.55; margin: 0 auto;
  max-width: 700px;
}
.ab-page-header__lead strong { color: var(--ab-ink); font-weight: 600; }

/* ─── Catalog variant: left-aligned, same padding as base for smooth nav ─── */
.ab-page-header--catalog .ab-page-header__inner  { text-align: left; max-width: none; margin: 0; }
.ab-page-header--catalog .ab-page-header__title  { font-size: 32px; margin-bottom: 8px; }
.ab-page-header--catalog .ab-page-header__lead   { font-size: 14.5px; max-width: 720px; margin: 0; }
.ab-page-header--catalog .ab-page-header__lead strong { font-weight: 700; }

/* ─── Detail variant: left-aligned, compact title ─── */
.ab-page-header--detail .ab-page-header__inner  { text-align: left; max-width: none; margin: 0; }
.ab-page-header--detail .ab-page-header__title  { font-size: 26px; margin-bottom: 4px; }
.ab-page-header--detail .ab-page-header__lead   { font-size: 14.5px; max-width: none; margin: 0; }

/* Mobile */
@media (max-width: 767.98px) {
  .ab-page-header           { padding: 26px 0 20px; }
  .ab-page-header__title    { font-size: 28px; }
  .ab-page-header__lead     { font-size: 14.5px; }
  .ab-page-header--catalog .ab-page-header__title { font-size: 24px; }
  .ab-page-header--detail .ab-page-header__title  { font-size: 22px; }
}

/* =============================================================
   SEARCH FIELD — compact variant (in filter sidebar / toolbar / dealers search)
   Single source of truth — matches the /accedi/ login input:
     - 44px height, 8px radius
     - 1.5px border (slightly more presence than 1px)
     - solid blue border on focus (no halo, no pill)
     - grey-darker border on hover
   Used in /auto/ sidebar, /auto/ toolbar, /concessionari/ toolbar.
   Uses double-class selector .ab-search__field.ab-search__field--filter
   because base .ab-search__field rules (min-height: 58px, border 1px) are
   defined LATER in this file — without double class specificity they'd win.
   ============================================================= */
.ab-search__field.ab-search__field--filter {
  min-height: 44px;
  border: 1.5px solid var(--ab-line);
  border-radius: var(--ab-radius-sm);
  background: var(--ab-surface);
  transition: border-color var(--ab-dur) var(--ab-ease);
}
.ab-search__field.ab-search__field--filter:hover { border-color: var(--ab-ink-5, #b8c4d4); }
.ab-search__field.ab-search__field--filter:focus-within { border-color: var(--ab-blue); }
.ab-search__field.ab-search__field--filter .ab-dd__trigger {
  min-height: 42px;             /* inner = 44 - 1.5*2 = 41, round up */
  padding: 0 14px;
  font-size: 14px;
}
.ab-search__field--filter .ab-dd__trigger.is-placeholder { font-weight: 400; font-size: 13.5px; }

/* Dropdown panel — stretches to match compact field */
.ab-search__field--filter .ab-dd__panel {
  left: -1px; right: -1px;
  top: calc(100% + 6px);
  max-height: min(460px, 70vh);
}
.ab-search__field--filter .ab-dd__search { padding: 10px 12px; }
.ab-search__field--filter .ab-dd__list   { max-height: min(400px, 60vh); padding: 4px; }
.ab-search__field--filter .ab-dd__option { padding: 8px 10px; font-size: 13px; }

/* Clear (X) button position tweak for compact variant */
.ab-search__field--filter .ab-dd__clear { right: 30px; }

/* =============================================================
   TOOLBAR — reusable catalog toolbar (count / search / sort)
   Used on /auto/ and /concessionari/. Variants via modifiers:
   - default   (with count + sort)    — /auto/
   - --dealers (with search + sort)   — /concessionari/
   ============================================================= */
.ab-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  padding: 8px 12px;
  margin-bottom: 16px;
}
.ab-toolbar__count { font-size: 13px; color: var(--ab-ink-3); margin-right: auto; }
.ab-toolbar__count strong { color: var(--ab-ink); font-weight: 600; font-size: 15px; }
.ab-toolbar__filters { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.ab-toolbar__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ab-amber); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 9px; line-height: 1;
}
.ab-toolbar__sort { display: flex; align-items: center; gap: 10px; }
.ab-toolbar__sort-label { font-size: 12.5px; color: var(--ab-ink-3); white-space: nowrap; }
@media (max-width: 575.98px) {
  .ab-toolbar__sort-label { display: none; }
  /* Сортировка растягивается, занимая всё доступное место справа от кнопки */
  .ab-toolbar__sort { gap: 0; flex: 1 1 auto; min-width: 0; }
  .ab-toolbar__sort-field { min-width: 0; width: 100%; }
  /* Кнопка фильтра — фиксированная ширина по контенту, не сжимается */
  .ab-toolbar__filters {
    flex: 0 0 auto;
    min-height: 44px;
    padding-left: 12px; padding-right: 12px;
  }
}

/* Toolbar sort-field inherits everything from .ab-search__field--filter
   (height, border, focus behavior). Only layout specifics here.
   На desktop фиксированная ширина 200px; на mobile — min-width: 0 (см. @media выше) */
@media (min-width: 576px) {
  .ab-toolbar__sort-field { min-width: 200px; }
}
.ab-toolbar__sort-field .ab-dd__panel { left: auto; right: -1px; min-width: 200px; }
/* Sort always has a default value → no clear button, no scroll on list.
   High specificity to beat global .ab-dd.has-value .ab-dd__clear (0,3,0). */
.ab-toolbar__sort-field .ab-dd.has-value .ab-dd__clear { display: none; }
.ab-toolbar__sort-field .ab-dd__list { max-height: none; }

/* Search field inside toolbar (used on /concessionari/).
   Uses same layout pattern as /accedi/ login input:
     - icon absolutely positioned left (14px from edge)
     - input with padding-left 42px to leave room for icon
   Inherits border/height/focus from .ab-search__field.ab-search__field--filter. */
.ab-search__field.ab-toolbar__search {
  flex: 1 1 320px; min-width: 240px;
  position: relative;
  padding: 0;
}
.ab-toolbar__search-icon {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--ab-ink-4, #9ca9b8);
  font-size: 16px;
  pointer-events: none;
  flex-shrink: 0;
}
.ab-toolbar__search input {
  width: 100%;
  border: 0; background: transparent; outline: none;
  font-size: 14px; color: var(--ab-ink);
  font-family: inherit;
  height: 40px;
  padding: 0 40px 0 42px;
}
.ab-toolbar__search input::placeholder { color: var(--ab-ink-3); }
.ab-toolbar__search-clear {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  color: var(--ab-ink-3); background: transparent;
  transition: color var(--ab-dur) var(--ab-ease), background var(--ab-dur) var(--ab-ease);
}
.ab-toolbar__search-clear:hover { color: var(--ab-ink); background: var(--ab-line); }

/* Dealers variant: search takes remaining width, sort stays right */
.ab-toolbar--dealers .ab-toolbar__sort { margin-left: auto; }

/* На /concessionari/ при <768 — search и sort в одной строке, "Ordina per" скрыт */
@media (max-width: 767.98px) {
  .ab-toolbar--dealers .ab-toolbar__sort-label { display: none; }
  .ab-toolbar--dealers .ab-toolbar__sort { gap: 0; margin-left: auto; }
  .ab-toolbar--dealers .ab-toolbar__sort-field { min-width: 140px; flex: 0 0 auto; }
  .ab-toolbar--dealers .ab-toolbar__search { flex: 1 1 180px; min-width: 140px; }
}

/* При <441px поля переносятся (flex-wrap) — растянуть каждое на всю ширину */
@media (max-width: 440.98px) {
  .ab-toolbar--dealers .ab-toolbar__search { flex: 1 1 100%; min-width: 0; }
  .ab-toolbar--dealers .ab-toolbar__sort { width: 100%; margin-left: 0; }
  .ab-toolbar--dealers .ab-toolbar__sort-field { flex: 1 1 100%; min-width: 0; }
}

/* =============================================================
   HERO — 3 rows inside one section:
   1) text+car (title/desc left, car+labels right)
   2) search form (full width, grid 2×3 + CTA)
   3) body types (7 cards)
   ============================================================= */
.ab-hero {
  padding: 48px 0 40px;
  background: var(--ab-blue-soft);
  position: relative;
}
@media (min-width: 992px) {
  .ab-hero {
    min-height: calc(100vh - var(--ab-header-h));
    padding: 72px 0 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .ab-hero > .container { width: 100%; }
}

/* --- ROW 1: text + car --- */
.ab-hero__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  margin-bottom: 40px;
}
@media (min-width: 992px) {
  .ab-hero__top {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    margin-bottom: 56px;
  }
}

.ab-hero__content { max-width: 720px; }

.ab-hero__title {
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 700;
  color: var(--ab-ink);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.ab-hero__accent { color: var(--ab-blue); white-space: nowrap; }

.ab-hero__desc {
  font-size: 15px;
  color: var(--ab-ink-3);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 560px;
}
.ab-hero__desc strong { color: var(--ab-ink); font-weight: 600; }

/* Secondary paragraph for dealers — same size, only separator differentiates */
.ab-hero__desc-dealer {
  font-size: 15px;
  color: var(--ab-ink-3);
  line-height: 1.6;
  padding-top: 16px;
  margin-top: 4px;
  margin-bottom: 8px;
  border-top: 1px dashed var(--ab-line-2);
  max-width: 560px;
}
.ab-hero__desc-dealer strong { color: var(--ab-ink); font-weight: 600; }
.ab-hero__desc-link {
  color: var(--ab-blue);
  font-weight: 600;
  white-space: nowrap;
  margin-left: 2px;
  transition: color var(--ab-dur) var(--ab-ease);
}
.ab-hero__desc-link:hover { color: var(--ab-blue-hover); text-decoration: underline; }

.ab-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-trust {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--ab-line-2);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ab-ink-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ab-trust svg:first-child { color: var(--ab-success); flex-shrink: 0; }

/* Car + animated labels */
.ab-hero__visual {
  position: relative;
  min-height: 240px;
}
.ab-hero__car-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 600 / 320;
}
.ab-hero__car-img,
.ab-hero__car-svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(15,94,255,0.22)) drop-shadow(0 4px 8px rgba(16,20,27,0.08));
}

/* Floating labels around car */
.ab-hero__label {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  background: rgba(255,255,255,0.96);
  border: 1px solid var(--ab-line);
  border-radius: 100px;
  font-size: 12.5px; font-weight: 600;
  color: var(--ab-ink);
  box-shadow: 0 6px 20px rgba(16,20,27,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  z-index: 2;
  opacity: 0;
  animation: abFadeIn .5s var(--ab-ease) both, abFloat 4s ease-in-out infinite;
}
.ab-hero__label svg { flex-shrink: 0; color: var(--ab-ink-3); }
.ab-hero__label--success { color: var(--ab-success); border-color: rgba(13,153,89,.28); background: rgba(228,245,236,0.95); }
.ab-hero__label--success svg { color: var(--ab-success); }
.ab-hero__label--info { color: var(--ab-blue); border-color: var(--ab-blue-line); background: rgba(232,239,255,0.95); }
.ab-hero__label--info svg { color: var(--ab-blue); }

/* Positions — semantic names based on car parts (car faces RIGHT-BOTTOM) */
/* --roof       = on roof                       (top-center-left)          */
/* --nose       = above front hood              (top-right, forward end)   */
/* --rear       = on rear body                  (left-upper)               */
/* --door       = on front door                 (right-middle)             */
/* --rear-wheel = above rear wheel              (left-bottom)              */
/* --wheel      = near front wheel              (right-bottom)             */
.ab-hero__label--roof       { top:  2%;   left: 26%; animation-delay: .15s, 0s;   }
.ab-hero__label--nose       { top: 10%;   right: 2%; animation-delay: .30s, .3s;  }
.ab-hero__label--rear       { top: 26%;   left:  0%; animation-delay: .45s, .6s;  }
.ab-hero__label--door       { top: 50%;   right: 12%; animation-delay: .60s, .9s;  }
.ab-hero__label--rear-wheel { bottom: 14%; left:  4%; animation-delay: .75s, 1.2s; }
.ab-hero__label--wheel      { bottom:  4%; right: 6%; animation-delay: .90s, 1.5s; }

/* --- ROW 2: search form (full width, 2x3 grid + CTA) --- */
.ab-search {
  background: var(--ab-surface);
  border: 1px solid var(--ab-line-2);
  border-radius: var(--ab-radius-lg);
  padding: 14px;
  box-shadow: 0 12px 40px rgba(16, 20, 27, 0.08), 0 2px 6px rgba(16, 20, 27, 0.04);
  margin-bottom: 16px;
  position: relative;
  z-index: 10;
}
.ab-search__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
@media (min-width: 576px) {
  .ab-search__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .ab-search__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}
.ab-search__field {
  padding: 0;
  display: flex; align-items: center;
  position: relative;
  min-height: 58px;
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-sm);
  background: var(--ab-surface);
  transition: border-color var(--ab-dur) var(--ab-ease);
}
.ab-search__field:hover,
.ab-search__field:focus-within { border-color: var(--ab-blue-line); }
.ab-search__field.is-disabled {
  background: var(--ab-bg);
  cursor: not-allowed;
  opacity: 0.6;
}
.ab-search__field.is-disabled:hover { border-color: var(--ab-line); }
.ab-search__select, .ab-search__input {
  border: none; outline: none;
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--ab-ink); background: transparent;
  width: 100%; padding: 0;
  appearance: none; -webkit-appearance: none;
}
.ab-search__input::placeholder { color: var(--ab-ink-4); font-weight: 400; }

.ab-search__btn {
  background: var(--ab-blue); color: #fff; border: none;
  border-radius: var(--ab-radius-sm);
  padding: 0 24px;
  font-size: 14.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background var(--ab-dur) var(--ab-ease), box-shadow var(--ab-dur) var(--ab-ease), transform var(--ab-dur) var(--ab-ease);
  min-height: 58px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(15, 94, 255, 0.22);
}
.ab-search__btn:hover {
  background: var(--ab-blue-hover);
  box-shadow: 0 6px 20px rgba(15, 94, 255, 0.32);
  transform: translateY(-1px);
}
.ab-search__btn:active { transform: translateY(0); }
@media (max-width: 575.98px) {
  .ab-search__btn { width: 100%; }
}

.ab-hero__advanced-wrap {
  text-align: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--ab-line-2);
}
.ab-hero__advanced {
  font-size: 13.5px;
  color: var(--ab-ink-2);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  transition: color var(--ab-dur) var(--ab-ease);
}
.ab-hero__advanced u { text-decoration-color: var(--ab-ink-4); text-underline-offset: 3px; }
.ab-hero__advanced:hover { color: var(--ab-blue); }
.ab-hero__advanced:hover u { text-decoration-color: var(--ab-blue); }

/* --- Body types inside form card as quick filters — immediately after form grid --- */
.ab-search__bodytypes {
  margin-top: 16px;
}
.ab-search__bodytypes-head {
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ab-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

/* Custom dropdown compatibility */
.ab-search__select[data-custom="dropdown"] { display: none; }
.ab-search__field .ab-dd { display: block; width: 100%; }

/* =============================================================
   CUSTOM DROPDOWN — replaces native <select data-custom="dropdown">
   ============================================================= */
.ab-dd {
  position: relative;
  width: 100%;
  cursor: pointer;
}
.ab-dd__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-size: 14px; font-weight: 500;
  color: var(--ab-ink);
  background: transparent;
  border: none;
  padding: 0 16px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  min-height: 58px;
  box-sizing: border-box;
}
.ab-dd__trigger.is-placeholder { color: var(--ab-ink-4); font-weight: 400; }
.ab-dd__caret {
  flex-shrink: 0;
  color: var(--ab-ink-4);
  transition: transform var(--ab-dur) var(--ab-ease);
  margin-left: 6px;
}
.ab-dd.is-open .ab-dd__caret { transform: rotate(180deg); color: var(--ab-blue); }

/* Clear button — visible only when dropdown has a selected value */
.ab-dd__clear {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--ab-ink-4);
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--ab-dur) var(--ab-ease), color var(--ab-dur) var(--ab-ease);
  z-index: 4;
}
.ab-dd__clear:hover { background: var(--ab-bg); color: var(--ab-ink); }
.ab-dd__clear:active { transform: translateY(-50%) scale(0.9); }
.ab-dd.has-value .ab-dd__clear { display: flex; }
.ab-dd.has-value .ab-dd__label { padding-right: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-dd.is-disabled .ab-dd__clear { display: none; }

/* Disabled state + custom tooltip on hover */
.ab-dd.is-disabled { cursor: not-allowed; }
.ab-dd.is-disabled .ab-dd__trigger {
  cursor: not-allowed;
  color: var(--ab-ink-5);
  pointer-events: none;
}
.ab-dd.is-disabled .ab-dd__caret { color: var(--ab-ink-5); }
.ab-dd.is-disabled::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ab-ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ab-dur) var(--ab-ease);
  z-index: 30;
}
.ab-dd.is-disabled::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--ab-ink);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ab-dur) var(--ab-ease);
  z-index: 30;
}
.ab-search__field.is-disabled:hover .ab-dd.is-disabled::after,
.ab-search__field.is-disabled:hover .ab-dd.is-disabled::before { opacity: 1; }

.ab-dd__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px; right: -18px;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line-2);
  border-radius: var(--ab-radius);
  box-shadow: var(--ab-shadow-elevated);
  max-height: 360px;
  display: none;
  flex-direction: column;
  z-index: 50;
  overflow: hidden;
}
.ab-dd.is-open .ab-dd__panel { display: flex; }

.ab-dd__search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ab-line);
  position: relative;
}
.ab-dd__search-icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: var(--ab-ink-4);
  pointer-events: none;
}
.ab-dd__search-input {
  width: 100%;
  border: none; outline: none;
  font-family: inherit; font-size: 13px;
  padding: 6px 4px 6px 22px;
  background: transparent;
  color: var(--ab-ink);
}
.ab-dd__search-input::placeholder { color: var(--ab-ink-4); }

.ab-dd__list {
  overflow-y: auto;
  max-height: 310px;
  padding: 6px;
}
.ab-dd__list::-webkit-scrollbar { width: 8px; }
.ab-dd__list::-webkit-scrollbar-track { background: transparent; }
.ab-dd__list::-webkit-scrollbar-thumb { background: var(--ab-ink-5); border-radius: 4px; }

.ab-dd__option {
  padding: 10px 14px;
  font-size: 13.5px;
  color: var(--ab-ink);
  border-radius: var(--ab-radius-sm);
  cursor: pointer;
  transition: background var(--ab-dur) var(--ab-ease);
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.ab-dd__option:hover,
.ab-dd__option.is-focused { background: var(--ab-bg); }
.ab-dd__option.is-selected {
  background: var(--ab-blue-soft);
  color: var(--ab-blue);
  font-weight: 600;
}
.ab-dd__empty { padding: 20px; text-align: center; color: var(--ab-ink-4); font-size: 13px; }
.ab-dd__hidden { display: none; }

.ab-search__select[data-custom="dropdown"] { display: none; }
.ab-search__field .ab-dd { display: block; }

/* =============================================================
   BODY TYPES — "Trova veicoli usati"
   ============================================================= */
.ab-bodytypes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 576px) { .ab-bodytypes { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .ab-bodytypes { grid-template-columns: repeat(8, 1fr); gap: 8px; } }

.ab-bodytype {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 8px 14px;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  text-align: center;
  transition: all var(--ab-dur) var(--ab-ease);
  color: var(--ab-ink);
}
.ab-bodytype:hover {
  border-color: var(--ab-blue);
  background: var(--ab-blue-soft);
  transform: translateY(-2px);
  box-shadow: var(--ab-shadow-accent);
}
.ab-bodytype.is-empty { opacity: 0.6; }
.ab-bodytype__icon {
  color: var(--ab-ink-2);
  margin-bottom: 6px;
  transition: color var(--ab-dur) var(--ab-ease);
  /* Иконки имеют фиксированную ширину, но разную высоту
     (SUV выше, coupe ниже, cabrio плоский). Контейнер
     резервирует max-высоту и центрирует иконку по нижнему краю —
     так все машинки "стоят" на одной воображаемой дороге. */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 44px;
}
.ab-bodytype__icon svg { display: block; }
.ab-bodytype:hover .ab-bodytype__icon { color: var(--ab-blue); }
.ab-bodytype__name {
  font-size: 13px; font-weight: 600;
  color: var(--ab-ink);
  line-height: 1.2;
}
.ab-bodytype__count {
  font-size: 11px;
  color: var(--ab-ink-4);
  margin-top: 2px;
}

/* Compact variant — body types inside form.
   AutoScout-style: без рамок и фона, только иконка + подпись.
   Hover: лёгкое поднятие + смена цвета на синий. */
.ab-bodytypes--compact { gap: 4px; }
@media (min-width: 576px) { .ab-bodytypes--compact { gap: 8px; } }
@media (min-width: 992px) { .ab-bodytypes--compact { gap: 12px; } }
.ab-bodytypes--compact .ab-bodytype {
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
}
.ab-bodytypes--compact .ab-bodytype:hover {
  background: transparent;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: none;
}
.ab-bodytypes--compact .ab-bodytype:hover .ab-bodytype__icon { color: var(--ab-blue); }
.ab-bodytypes--compact .ab-bodytype:hover .ab-bodytype__name { color: var(--ab-blue); }
.ab-bodytypes--compact .ab-bodytype__icon { margin-bottom: 6px; }
.ab-bodytypes--compact .ab-bodytype__name { font-size: 13px; transition: color var(--ab-dur) var(--ab-ease); }
.ab-bodytypes--compact .ab-bodytype__count { font-size: 11px; margin-top: 2px; }

/* =============================================================
   BRAND CARDS — single row on desktop
   ============================================================= */
.ab-brand-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (min-width: 768px) { .ab-brand-row { grid-template-columns: repeat(8, 1fr); gap: 10px; } }

.ab-brand-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: all var(--ab-dur) var(--ab-ease);
  text-align: center;
  height: 100%;
}
.ab-brand-card:hover {
  background: transparent;
  border-color: transparent;
  transform: translateY(-2px);
}
.ab-brand-card__logo {
  height: 56px;
  display: flex; align-items: center; justify-content: center; width: 100%;
}
.ab-brand-card__logo img {
  max-height: 56px; max-width: 100px;
  object-fit: contain;
  transition: transform var(--ab-dur) var(--ab-ease);
}
.ab-brand-card:hover .ab-brand-card__logo img { transform: scale(1.05); }
.ab-brand-card__fallback {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 600;
  transition: transform var(--ab-dur) var(--ab-ease);
}
.ab-brand-card:hover .ab-brand-card__fallback { transform: scale(1.05); }
.ab-brand-card__name { font-size: 13px; font-weight: 600; color: var(--ab-ink); transition: color var(--ab-dur) var(--ab-ease); }
.ab-brand-card:hover .ab-brand-card__name { color: var(--ab-blue); }
.ab-brand-card__count { font-size: 11px; color: var(--ab-ink-4); }

/* =============================================================
   CAR CARDS (Appena pubblicati)
   ============================================================= */
.ab-card {
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  overflow: hidden; cursor: pointer;
  transition: all var(--ab-dur) var(--ab-ease);
  height: 100%;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: var(--ab-shadow-card);
}
.ab-card:hover {
  border-color: var(--ab-blue-line);
  transform: translateY(-4px);
  box-shadow: var(--ab-shadow-card-hover);
}

.ab-card__media { aspect-ratio: 4 / 3; background: var(--ab-bg-2); position: relative; overflow: hidden; }
.ab-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ab-ease); }
.ab-card:hover .ab-card__media img { transform: scale(1.06); }

/* CTA overlay on media — appears on hover */
.ab-card__cta {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(16, 20, 27, 0.75) 100%);
  color: #fff;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--ab-dur) var(--ab-ease), transform var(--ab-dur) var(--ab-ease);
  pointer-events: none;
}
.ab-card:hover .ab-card__cta {
  opacity: 1;
  transform: translateY(0);
}
.ab-card__cta svg { flex-shrink: 0; transition: transform var(--ab-dur) var(--ab-ease); }
.ab-card:hover .ab-card__cta svg { transform: translateX(3px); }

.ab-card__badge {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ab-gold);
  padding: 5px 11px;
  border-radius: 100px;
  font-size: 11px; font-weight: 700;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(16, 20, 27, 0.12);
  letter-spacing: 0.02em;
}
.ab-card__badge svg { color: var(--ab-gold); }

.ab-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.ab-card__title {
  font-size: 14px; font-weight: 400;
  color: var(--ab-ink-3);
  line-height: 1.35; margin-bottom: 8px;
}
.ab-card__title strong { display: inline; font-weight: 600; color: var(--ab-ink); }
.ab-card__title small { display: block; font-size: 12px; color: var(--ab-ink-4); font-weight: 400; margin-top: 2px; }

.ab-card__specs {
  display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap;
  font-size: 12px; color: var(--ab-ink-3);
}
.ab-card__specs li { display: inline-flex; align-items: center; }
.ab-card__specs li:not(:last-child)::after {
  content: "·"; color: var(--ab-ink-5); margin-left: 6px;
}

.ab-card__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--ab-line);
  margin-top: auto;
}
.ab-card__price { font-size: 18px; font-weight: 700; color: var(--ab-ink); letter-spacing: -0.01em; transition: color var(--ab-dur) var(--ab-ease); }
.ab-card:hover .ab-card__price { color: var(--ab-blue); }
.ab-card__dealer { font-size: 11px; color: var(--ab-ink-4); }

/* =============================================================
   LIFESTYLE CARDS
   ============================================================= */
.ab-lifestyle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 576px) { .ab-lifestyle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .ab-lifestyle-grid { grid-template-columns: repeat(3, 1fr); } }

.ab-lifestyle {
  display: flex; flex-direction: column;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius-lg);
  overflow: hidden;
  transition: all var(--ab-dur) var(--ab-ease);
  height: 100%;
  box-shadow: var(--ab-shadow-card);
}
.ab-lifestyle:hover {
  transform: translateY(-3px);
  border-color: var(--ab-blue-line);
  box-shadow: var(--ab-shadow-card-hover);
}
.ab-lifestyle__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--ab-bg-2);
  overflow: hidden;
}
.ab-lifestyle__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ab-ease);
}
.ab-lifestyle:hover .ab-lifestyle__media img { transform: scale(1.04); }
.ab-lifestyle__media-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ab-blue-soft) 0%, var(--ab-bg-2) 100%);
  color: var(--ab-blue);
  opacity: 0.6;
}
.ab-lifestyle__media-empty svg { width: 52px; height: 52px; }

.ab-lifestyle__icon {
  position: absolute;
  top: 12px; left: 12px;
  width: 36px; height: 36px;
  background: rgba(16,20,27,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  z-index: 2;
}
.ab-lifestyle__count {
  position: absolute;
  bottom: 12px; right: 12px;
  background: rgba(255,255,255,0.95);
  color: var(--ab-ink);
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 11px; font-weight: 600;
  backdrop-filter: blur(6px);
  z-index: 2;
}
.ab-lifestyle__body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  flex: 1;
}
.ab-lifestyle__title {
  font-size: 16px; font-weight: 600;
  color: var(--ab-ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.25;
}
.ab-lifestyle__subtitle {
  font-size: 12.5px;
  color: var(--ab-ink-3);
  margin-bottom: 14px;
  line-height: 1.45;
}
.ab-lifestyle__filters {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: auto;
}
.ab-lifestyle__filter {
  font-size: 11px; font-weight: 500;
  color: var(--ab-ink-2);
  background: var(--ab-bg);
  padding: 4px 9px;
  border-radius: 6px;
  line-height: 1.3;
  transition: all var(--ab-dur) var(--ab-ease);
}
.ab-lifestyle:hover .ab-lifestyle__filter {
  background: var(--ab-blue-soft);
  color: var(--ab-blue);
}

/* =============================================================
   BUDGET (Fascia di prezzo)
   ============================================================= */
.ab-budget {
  display: flex; flex-direction: column; gap: 4px;
  padding: 24px 22px;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  transition: all var(--ab-dur) var(--ab-ease);
  height: 100%;
  position: relative;
  overflow: hidden;
  --ab-budget-c: var(--ab-blue);
  min-height: 170px;
}
/* Цветная полоса сверху по категории */
.ab-budget::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--ab-budget-c);
}
.ab-budget:hover {
  transform: translateY(-3px);
  border-color: var(--ab-budget-c);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--ab-budget-c) 18%, transparent);
}
/* Цветовая прогрессия: зелёный → синий → индиго → амбер */
.ab-budget[data-c="green"]  { --ab-budget-c: #10b981; }
.ab-budget[data-c="blue"]   { --ab-budget-c: var(--ab-blue); }
.ab-budget[data-c="indigo"] { --ab-budget-c: #6366f1; }
.ab-budget[data-c="amber"]  { --ab-budget-c: #f59e0b; }

/* Силуэт автомобиля как фоновый декор (рисует bodyTypeIcon) */
.ab-budget__silhouette {
  position: absolute;
  right: 8px; bottom: 8px;
  color: var(--ab-budget-c);
  opacity: .14;
  pointer-events: none;
  transition: opacity var(--ab-dur) var(--ab-ease);
  display: flex; align-items: flex-end;
}
.ab-budget__silhouette svg { display: block; }
.ab-budget:hover .ab-budget__silhouette { opacity: .22; }

/* Бейджи-монеты: круглые с цветом категории */
.ab-budget__coins { display: flex; gap: 4px; margin-bottom: 10px; position: relative; z-index: 1; }
.ab-budget__coin {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ab-budget-c) 12%, transparent);
  color: var(--ab-budget-c);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  animation: abFadeIn .4s var(--ab-ease) both;
  animation-delay: calc(var(--i) * 80ms);
}
.ab-budget__label {
  font-size: 12px; font-weight: 500;
  color: var(--ab-ink-3);
  text-transform: uppercase; letter-spacing: .05em;
  position: relative; z-index: 1;
}
.ab-budget__range {
  font-size: 21px; font-weight: 700;
  color: var(--ab-ink);
  letter-spacing: -0.02em; line-height: 1.1;
  margin-top: 2px;
  position: relative; z-index: 1;
}
.ab-budget__count {
  font-size: 12px;
  color: var(--ab-ink-4);
  margin-top: auto;
  padding-top: 10px;
  position: relative; z-index: 1;
}

/* =============================================================
   CTA CARDS — 2 col layout (AutoSuperMarket style)
   ============================================================= */
.ab-cta-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 992px) { .ab-cta-row { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

.ab-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ab-blue-soft);
  border: 1px solid var(--ab-blue-line);
  border-radius: var(--ab-radius-lg);
  padding: 28px 28px 28px 32px;
  min-height: 200px;
  align-items: center;
  position: relative;
  overflow: hidden;
  transition: all var(--ab-dur) var(--ab-ease);
}
.ab-cta:hover { transform: translateY(-2px); box-shadow: var(--ab-shadow-accent); }
.ab-cta--alt { background: var(--ab-surface); border: 1px solid var(--ab-line); }
.ab-cta__body { display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 2; }
.ab-cta__title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: var(--ab-ink);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.ab-cta__text {
  font-size: 13.5px;
  color: var(--ab-ink-3);
  line-height: 1.55;
  margin: 0;
}
.ab-cta__text strong { color: var(--ab-ink); font-weight: 600; }
.ab-cta__body .ab-btn {
  align-self: flex-start;
  margin-top: 4px;
}
.ab-cta__visual {
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  padding-left: 16px;
}
.ab-cta__visual svg {
  width: 100%;
  max-width: 200px;
  height: auto;
}

/* =============================================================
   DEALER CARDS v3 — 4/3 aspect, 2 buttons, no avatar
   ============================================================= */
.ab-dealer-v3 {
  display: flex; flex-direction: column;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  overflow: hidden;
  height: 100%;
  transition: all var(--ab-dur) var(--ab-ease);
  box-shadow: var(--ab-shadow-card);
}
.ab-dealer-v3:hover {
  border-color: var(--ab-blue-line);
  transform: translateY(-3px);
  box-shadow: var(--ab-shadow-card-hover);
}
.ab-dealer-v3__cover {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ab-bg-2);
  overflow: hidden;
  position: relative;
}
.ab-dealer-v3__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ab-ease);
}
.ab-dealer-v3:hover .ab-dealer-v3__cover img { transform: scale(1.04); }
.ab-dealer-v3__cover-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--ab-bg-2, #eef1f6);
  color: var(--ab-ink-4, #c7cdd6);
}
.ab-dealer-v3__body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ab-dealer-v3__name {
  font-size: 15px; font-weight: 600;
  color: var(--ab-ink);
  line-height: 1.3;
  transition: color var(--ab-dur) var(--ab-ease);
}
.ab-dealer-v3__name:hover { color: var(--ab-blue); }
.ab-dealer-v3__meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ab-line);
}
.ab-dealer-v3__city {
  font-size: 12px; color: var(--ab-ink-3);
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ab-dealer-v3__city svg { color: var(--ab-blue); flex-shrink: 0; }
.ab-dealer-v3__stats {
  font-size: 12px; color: var(--ab-ink-3);
  flex-shrink: 0; white-space: nowrap;
}
.ab-dealer-v3__stats strong { color: var(--ab-ink); font-weight: 600; font-size: 14px; }
.ab-dealer-v3__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

/* =============================================================
   MAP — Emilia-Romagna (real SVG path)
   ============================================================= */
.ab-map-wrap {
  padding: 20px 10px 16px;
  position: relative;
}
.ab-map {
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  display: block;
}
.ab-map__region { transition: fill var(--ab-dur) var(--ab-ease); }
.ab-map__pin { cursor: pointer; transition: opacity var(--ab-dur) var(--ab-ease); }
.ab-map__pin:not(.is-active) { opacity: 0.6; cursor: default; }
.ab-map__pin:not(.is-active):hover { opacity: 0.85; }
.ab-map__pin.is-active .ab-map__pulse {
  animation: abPulse 2s var(--ab-ease) infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes abPulse {
  0%   { transform: scale(0.8); opacity: 0.45; }
  70%  { transform: scale(2.2); opacity: 0; }
  100% { transform: scale(0.8); opacity: 0; }
}
.ab-map__legend {
  display: flex; justify-content: center; gap: 24px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ab-map__legend-item {
  font-size: 12px; color: var(--ab-ink-3);
  display: inline-flex; align-items: center; gap: 6px;
}
.ab-map__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ab-ink-5); display: inline-block; }
.ab-map__dot--active { background: var(--ab-blue); }

/* =============================================================
   PLANS
   ============================================================= */
.ab-plans { align-items: stretch; }
.ab-plan {
  background: var(--ab-dark-2);
  border: 1px solid var(--ab-on-dark-line);
  border-radius: var(--ab-radius-lg);
  padding: 28px;
  height: 100%;
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--ab-dur) var(--ab-ease);
}
.ab-plan:hover { transform: translateY(-3px); }
.ab-plan--featured {
  background: var(--ab-surface); color: var(--ab-ink);
  border: 1px solid var(--ab-blue);
  box-shadow: var(--ab-shadow-modal);
}
.ab-plan__badge {
  position: absolute; top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--ab-blue); color: #fff;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  white-space: nowrap;
}
.ab-plan__head { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--ab-on-dark-line); }
.ab-plan--featured .ab-plan__head { border-bottom-color: var(--ab-line); }
.ab-plan__name {
  font-size: 13px; font-weight: 600;
  color: var(--ab-on-dark-2);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}
.ab-plan--featured .ab-plan__name { color: var(--ab-ink-3); }
.ab-plan__price { display: inline-flex; align-items: baseline; gap: 3px; margin-bottom: 6px; }
.ab-plan__currency { font-size: 18px; font-weight: 500; color: var(--ab-on-dark-2); }
.ab-plan__amount { font-size: 52px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--ab-on-dark); }
.ab-plan--featured .ab-plan__currency { color: var(--ab-ink-3); }
.ab-plan--featured .ab-plan__amount { color: var(--ab-blue); }
.ab-plan__period { font-size: 13px; color: var(--ab-on-dark-3); }
.ab-plan--featured .ab-plan__period { color: var(--ab-ink-3); }
.ab-plan__annual { font-size: 12px; color: var(--ab-on-dark-3); margin-bottom: 10px; }
.ab-plan--featured .ab-plan__annual { color: var(--ab-ink-3); }
.ab-plan__desc { font-size: 13px; color: var(--ab-on-dark-2); }
.ab-plan--featured .ab-plan__desc { color: var(--ab-ink-2); }
.ab-plan__features { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex: 1; }
.ab-plan__features li {
  font-size: 13.5px; color: var(--ab-on-dark-2);
  display: flex; align-items: flex-start; gap: 8px;
  line-height: 1.4;
}
.ab-plan--featured .ab-plan__features li { color: var(--ab-ink-2); }
.ab-plan__features li::before {
  content: ""; flex-shrink: 0;
  width: 14px; height: 14px; margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5eff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
}
.ab-plan__features li strong { color: var(--ab-on-dark); font-weight: 600; }
.ab-plan--featured .ab-plan__features li strong { color: var(--ab-ink); }
.ab-plan .ab-btn--outline { border-color: var(--ab-on-dark-line); color: var(--ab-on-dark); }
.ab-plan .ab-btn--outline:hover { background: var(--ab-blue); border-color: var(--ab-blue); }

/* Alternative purchase path — on dark bg, lighter card */
.ab-plans__alt {
  margin-top: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ab-on-dark-line);
  border-radius: var(--ab-radius);
  padding: 22px 26px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.ab-plans__alt-body { flex: 1 1 320px; min-width: 0; }
.ab-plans__alt-eyebrow {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px;
  color: var(--ab-blue); margin-bottom: 4px;
}
.ab-plans__alt-title {
  font-size: 19px; font-weight: 700;
  color: var(--ab-on-dark); margin: 0 0 6px;
}
.ab-plans__alt-text {
  font-size: 13.5px; color: var(--ab-on-dark-2);
  margin: 0; line-height: 1.55;
}
.ab-plans__alt-text strong { color: var(--ab-on-dark); font-weight: 600; }
.ab-plans__alt .ab-btn { flex-shrink: 0; gap: 6px; }
@media (max-width: 640px) {
  .ab-plans__alt {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    padding: 20px 18px;
    gap: 16px;
  }
  .ab-plans__alt-body { flex: 0 0 auto; }
  .ab-plans__alt .ab-btn { width: 100%; justify-content: center; }
}

.ab-plans__note { text-align: center; font-size: 13px; color: var(--ab-on-dark-2); margin-top: 20px; }
.ab-plans__note a { color: var(--ab-blue); font-weight: 500; }

/* =============================================================
   FAQ
   ============================================================= */
.ab-faq { max-width: 720px; margin: 0 auto; }
.ab-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: none;
}
.ab-faq__grid .ab-faq__item { height: fit-content; }
.ab-faq__item {
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  border-radius: var(--ab-radius);
  margin-bottom: 10px;
  transition: border-color var(--ab-dur) var(--ab-ease);
}
.ab-faq__grid .ab-faq__item { margin-bottom: 0; }
.ab-faq__item[open] { border-color: var(--ab-blue-line); }
.ab-faq__q {
  padding: 16px 20px;
  font-size: 14.5px; font-weight: 600;
  color: var(--ab-ink);
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  list-style: none;
}
.ab-faq__q::-webkit-details-marker { display: none; }
.ab-faq__chev {
  color: var(--ab-ink-4);
  transition: transform var(--ab-dur) var(--ab-ease);
  flex-shrink: 0;
}
.ab-faq__item[open] .ab-faq__chev { transform: rotate(180deg); color: var(--ab-blue); }
/* Icon variant: fa-plus rotates 45° to form × on open */
.ab-faq__icon {
  flex-shrink: 0;
  color: var(--ab-ink-4);
  font-size: 14px;
  transition: transform var(--ab-dur) var(--ab-ease);
}
.ab-faq__item[open] .ab-faq__icon { transform: rotate(45deg); color: var(--ab-blue); }
.ab-faq__a { padding: 0 20px 18px; font-size: 13.5px; color: var(--ab-ink-3); line-height: 1.65; }
.ab-faq__cta {
  text-align: center; margin-top: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ab-faq__cta p { font-size: 15px; color: var(--ab-ink-3); margin: 0; }
.ab-faq__cta .ab-btn { font-size: 15px; padding: 10px 18px; }

@media (max-width: 768px) {
  .ab-faq__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.ab-footer { background: var(--ab-dark); color: var(--ab-on-dark); padding: 48px 0 20px; }
.ab-footer__grid { margin-bottom: 32px; }
.ab-footer__tagline {
  font-size: 13.5px; color: var(--ab-on-dark-2);
  line-height: 1.6; margin-top: 14px; margin-bottom: 16px;
}
.ab-footer__title {
  font-size: 12px; font-weight: 600;
  color: var(--ab-on-dark);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ab-footer__list { display: flex; flex-direction: column; gap: 10px; line-height: 1.4; }
.ab-footer__list li {
  display: flex; align-items: center;
  min-height: 18px;
  font-size: 13px; color: var(--ab-on-dark-2);
}
.ab-footer__list a {
  font-size: 13px; color: var(--ab-on-dark-2);
  transition: color var(--ab-dur) var(--ab-ease);
}
.ab-footer__list a:hover { color: var(--ab-blue); }

/* Contact list — adds icon gap inside each li */
.ab-footer__list--icons li { gap: 8px; }
.ab-footer__list--icons svg { flex-shrink: 0; color: var(--ab-on-dark-3); }
.ab-footer__list--icons a { color: var(--ab-on-dark-2); }

/* SEO geo/brand/body blocks — 3 columns, full width */
.ab-footer__seo {
  padding-top: 20px;
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 768px) {
  .ab-footer__seo { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
.ab-footer__seo-block { min-width: 0; }
.ab-footer__seo-title {
  font-size: 12px; font-weight: 600;
  color: var(--ab-on-dark);
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.ab-footer__seo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.ab-footer__seo-list li { line-height: 1.7; }
.ab-footer__seo-list a {
  font-size: 12.5px;
  color: var(--ab-on-dark-3);
  transition: color var(--ab-dur) var(--ab-ease);
  white-space: nowrap;
}
.ab-footer__seo-list a:hover { color: var(--ab-blue); }

.ab-footer__bottom {
  border-top: 1px solid var(--ab-on-dark-line);
  padding-top: 16px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--ab-on-dark-3);
}
.ab-footer__bottom a { color: var(--ab-on-dark-2); }
.ab-footer__bottom a:hover { color: var(--ab-blue); }
.ab-footer__sublinks { display: flex; gap: 16px; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 767.98px) {
  .ab-section { padding: 32px 0; }
  .ab-section__title { font-size: 24px; }
  .ab-hero { padding: 24px 0 32px; }

  /* Заголовок по центру */
  .ab-hero__title { font-size: 30px; text-align: center; }
  .ab-hero__title br { display: none; } /* перенос строки делаем естественным, без жёсткого <br> */

  .ab-hero__top { gap: 18px; margin-bottom: 20px; }

  /* Скрываем описательный текст и блок "Sei un concessionario?" — они переносятся в конец страницы */
  .ab-hero__desc,
  .ab-hero__desc-dealer { display: none; }

  /* Скрываем декоративную картинку с лейблами на mobile —
     она занимает критическое пространство above-the-fold */
  .ab-hero__visual { display: none; }

  .ab-search { padding: 10px; }
  .ab-search__grid { gap: 6px; }
  .ab-search__field:not(.ab-search__field--filter) { min-height: 44px; padding: 0; }
  .ab-search__field:not(.ab-search__field--filter) .ab-dd__trigger { min-height: 42px; font-size: 14px; padding: 0 14px; }
  .ab-search__btn { width: 100%; min-height: 44px; font-size: 14px; }

  .ab-hero__bodytypes-head { font-size: 12px; margin: 18px 0 14px; }

  .ab-plan__amount { font-size: 44px; }
  .ab-footer__bottom { flex-direction: column; align-items: flex-start; }
  .ab-dd__panel { left: 0; right: 0; }

  .ab-cta { grid-template-columns: 1fr; padding: 24px; }
  .ab-cta__visual { display: none; }
}

@media (min-width: 768px) {
  .ab-section { padding: 56px 0; }
  .ab-section__title { font-size: 32px; }
}

@media (min-width: 992px) {
  .ab-section__title { font-size: 36px; }
}

/* =============================================================
   MOBILE HORIZONTAL SCROLL (AutoScout-style) с стрелками
   На экранах ≤575px карточки кузовов и марок прокручиваются
   по горизонтали ВНУТРИ родителя (не вылезают за его края).
   Карточки бюджета на mobile остаются 2x2 grid — не скроллятся.
   ============================================================= */

/* Wrapper для horizontal scroll секции (нужен для позиционирования стрелок) */
.ab-hscroll-box { position: relative; }

/* Стрелки prev/next — скрыты по умолчанию, видны только на mobile */
.ab-hscroll-btn {
  display: none;
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ab-surface);
  border: 1px solid var(--ab-line);
  box-shadow: 0 2px 8px rgba(15,23,42,.12);
  z-index: 2;
  align-items: center;
  justify-content: center;
  font-size: 22px; line-height: 1;
  color: var(--ab-ink-2);
  cursor: pointer;
  padding: 0;
  transition: opacity .2s, background .2s;
}
.ab-hscroll-btn:hover { background: var(--ab-blue-soft); color: var(--ab-blue); }
.ab-hscroll-btn:disabled { opacity: 0; pointer-events: none; }
.ab-hscroll-btn--prev { left: 4px; }
.ab-hscroll-btn--next { right: 4px; }

@media (max-width: 575.98px) {

  /* Стрелки появляются на mobile */
  .ab-hscroll-btn { display: flex; }

  /* Кузова — горизонтальный скролл ВНУТРИ родителя (.ab-search__bodytypes) */
  .ab-bodytypes--compact {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 6px;
    padding-bottom: 4px;
  }
  .ab-bodytypes--compact::-webkit-scrollbar { display: none; }
  .ab-bodytypes--compact .ab-bodytype {
    /* 4 элемента + видимый край пятого как намёк на скролл */
    flex: 0 0 calc((100% - 18px) / 4.3);
    scroll-snap-align: start;
  }
  /* На mobile уменьшаем все иконки кузова пропорционально через transform.
     В отличие от width/height, transform: scale сохраняет ОТНОСИТЕЛЬНЫЕ
     пропорции между разными типами (Cabrio останется меньше SUV). */
  .ab-bodytypes--compact .ab-bodytype__icon svg {
    transform: scale(0.75);
    transform-origin: bottom center;
  }
  .ab-bodytypes--compact .ab-bodytype__name { font-size: 11px; }

  /* Бренды — горизонтальный скролл ВНУТРИ container секции */
  .ab-brand-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 8px;
    padding-bottom: 4px;
  }
  .ab-brand-row::-webkit-scrollbar { display: none; }
  .ab-brand-row .ab-brand-card {
    /* 4 элемента + видимый край пятого */
    flex: 0 0 calc((100% - 24px) / 4.3);
    scroll-snap-align: start;
  }
  .ab-brand-row .ab-brand-card__logo { height: 44px; }
  .ab-brand-row .ab-brand-card__logo img {
    max-height: 44px;
    max-width: 70px;
  }
  .ab-brand-row .ab-brand-card__name { font-size: 12px; }
  .ab-brand-row .ab-brand-card__count { font-size: 10px; }
}


/* =============================================================
   MOBILE-ONLY SEO BLOCK
   На desktop этот текст показан в hero — здесь он скрыт.
   На mobile hero-описание скрыто, текст показан здесь
   (в конце страницы, перед footer'ом).
   Цель: текст всегда есть в DOM для Google indexing,
         но не занимает above-the-fold на мобильных.
   ============================================================= */
.ab-mobile-seo { display: none; }

@media (max-width: 767.98px) {
  .ab-mobile-seo {
    display: block;
    padding: 32px 0;
    background: var(--ab-bg);
    border-top: 1px solid var(--ab-line);
  }
  .ab-mobile-seo__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ab-ink);
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    text-align: center;
  }
  .ab-mobile-seo__text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ab-ink-2);
    margin: 0 0 14px;
  }
  .ab-mobile-seo__text:last-child { margin-bottom: 0; }
  .ab-mobile-seo__text strong { color: var(--ab-ink); font-weight: 600; }
  .ab-mobile-seo__link {
    color: var(--ab-blue);
    font-weight: 600;
    text-decoration: none;
  }
  .ab-mobile-seo__link:hover { color: var(--ab-blue-hover); text-decoration: underline; }
}