/* ============================================================
   ART-GSM 2026 — LAYOUT  (header · hero · trust · footer · tab-bar)
   Structure shared across variants; skin lives in theme files.
   ============================================================ */

/* ---------- HEADER ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--surface); }

/* Info top row (desktop) */
.topbar { border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.topbar .wrap { display: flex; align-items: center; gap: var(--s-20); height: 40px; }
.topbar .phone { font-weight: 700; color: var(--ink); font-family: var(--mono); letter-spacing: -.02em; }
.topbar a:hover { color: var(--accent); }
.topbar .spacer { flex: 1; }
.topbar .topbar-link { display: inline-flex; align-items: center; gap: 6px; }
.topbar svg { width: 15px; height: 15px; }

/* Main row */
.header-main { border-bottom: 1px solid var(--line); }
.header-main .wrap { display: flex; align-items: center; gap: var(--s-20); height: 76px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 34px; width: auto; }

.city {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-weight: 600; font-size: 14px; color: var(--ink-2);
  padding: 8px 12px; border-radius: var(--r-sm); transition: background .15s;
}
.city:hover { background: var(--surface-2); color: var(--accent); }
.city svg { width: 17px; height: 17px; color: var(--accent); }

.search { flex: 1; position: relative; max-width: 720px; }
.search input {
  width: 100%; height: 48px; padding: 0 116px 0 44px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink);
  font: inherit; font-size: 14px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--ink-3); }
.search input:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 14%, transparent); }
.search .ico-search { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--ink-3); }
.search .go {
  position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 16px; border-radius: var(--r-sm);
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s;
}
.search .go:hover { background: var(--blue-deep); }
.search .go svg { width: 16px; height: 16px; }

.header-actions { display: flex; align-items: center; gap: var(--s-4); flex: none; }

/* Nav row + mega menu */
.nav { border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: stretch; gap: var(--s-4); height: 52px; }
.nav-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 var(--s-16);
  font-weight: 700; font-size: 14px; letter-spacing: -.01em; color: var(--ink);
  position: relative; transition: color .15s;
}
.nav-item svg { width: 16px; height: 16px; }
.nav-item:hover { color: var(--accent); }
.nav-item.has-mega::after {
  content: ''; position: absolute; left: var(--s-16); right: var(--s-16); bottom: 0; height: 3px;
  background: var(--accent); border-radius: 3px 3px 0 0; transform: scaleX(0); transition: transform .2s;
}
.nav-has-mega:hover .nav-item.has-mega::after { transform: scaleX(1); }
.nav-spacer { flex: 1; }
.nav-ext { color: var(--ink-2); }
.nav-ext svg { width: 13px; height: 13px; opacity: .6; }

.nav-has-mega { position: relative; display: flex; }
.mega {
  position: absolute; top: 100%; left: 0; width: min(960px, 92vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: var(--shadow-lg); padding: var(--s-20); z-index: 50;
  display: none; grid-template-columns: repeat(4, 1fr); gap: var(--s-8) var(--s-12);
}
.nav-has-mega:hover .mega { display: grid; }
.mega-link {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ink); transition: background .15s;
}
.mega-link:hover { background: var(--surface-2); color: var(--accent); }
.mega-link .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.mega-link .ic svg { width: 17px; height: 17px; color: var(--accent); }
.mega-link .n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); font-weight: 600; }

/* Mobile header */
.mhead { display: none; }
.mhead .wrap { display: flex; align-items: center; gap: var(--s-12); height: 56px; }
.mhead .logo img { height: 26px; }
.mhead .burger, .mhead .iconbtn { width: 40px; height: 40px; }
.mhead .iconbtn svg, .mhead .burger svg { width: 22px; height: 22px; }
.mhead .spacer { flex: 1; }
.msearch { padding: 0 var(--s-16) var(--s-10); }
.msearch .search input { height: 44px; padding-right: 52px; }
/* Кнопка отправки нужна на мобиле: Aspro инжектит 2-е скрытое поле в форму →
   без submit-кнопки Enter не отправляет форму (implicit submission блокируется). */
.msearch .search .go { display: inline-flex; right: 5px; top: 5px; height: 34px; padding: 0 13px; }
.msearch .search .go svg { width: 18px; height: 18px; }

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s-40); align-items: center; padding: var(--s-24) 0 var(--s-40); }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-16); }
.hero-eyebrow .pill { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--ink-2); }
.hero-eyebrow .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--av-in-dot); }
.hero h1 { font-size: clamp(32px, 3.2vw, 44px); margin-bottom: var(--s-16); text-wrap: balance; }
.hero h1 .accent { color: var(--accent); }
.hero-sub { font-size: 17px; color: var(--ink-2); max-width: none; margin-bottom: var(--s-24); }

/* Device picker */
.picker { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--s-20); }
.picker .picker-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: var(--s-14); }
.picker .picker-h svg { width: 18px; height: 18px; color: var(--accent); }
.picker-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-10); margin-bottom: var(--s-12); }
.picker-grid--2 { grid-template-columns: 1fr 1fr; }
.sel { position: relative; }
.sel select:disabled { opacity: .55; cursor: not-allowed; }
.js-pick-go.is-disabled { opacity: .5; cursor: not-allowed; }
.sel label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 6px; }
.sel select {
  width: 100%; height: 46px; padding: 0 32px 0 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px;
  appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color .15s;
}
.sel select:focus { outline: none; border-color: var(--accent); }
.sel::after { content: ''; position: absolute; right: 12px; bottom: 16px; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); pointer-events: none; }

.hero-stats { display: flex; gap: var(--s-24); margin-top: var(--s-24); }
.hero-stats .stat .num { font-family: var(--mono); font-weight: 700; font-size: 24px; color: var(--ink); letter-spacing: -.02em; }
.hero-stats .stat .lbl { font-size: 12px; color: var(--ink-3); font-weight: 600; }

.hero-visual { position: relative; min-width: 0; }
.hero-photo {
  position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 1/1;
  background: var(--photo-bg);
}
.hero-photo img { width: 100%; height: 100%; object-fit: contain; padding: 8%; }
.hero-float {
  position: absolute; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 12px 14px; display: flex; align-items: center; gap: 10px;
}
.hero-float .fi { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--blue-soft); color: var(--accent); flex: none; }
.hero-float .fi svg { width: 19px; height: 19px; }
.hero-float .ft { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.hero-float .fv { font-size: 14px; font-weight: 700; color: var(--ink); }
.hero-float.f1 { top: 8%; right: -3%; }
.hero-float.f2 { bottom: 9%; left: -4%; }

/* ---------- TRUST STRIP ---------- */
.trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-14); }
.trust-card { display: flex; gap: var(--s-14); padding: var(--s-20); align-items: flex-start; min-width: 0; }
.trust-card > div { min-width: 0; }
.trust-card .ti { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; flex: none; background: var(--blue-soft); color: var(--accent); }
.trust-card .ti svg { width: 23px; height: 23px; }
.trust-card .tt { font-weight: 700; font-size: 15px; margin-bottom: 3px; overflow-wrap: break-word; }
.trust-card .td { font-size: 13px; color: var(--ink-2); line-height: 1.4; overflow-wrap: break-word; }

/* ---------- FOOTER ---------- */
.site-footer { background: #0f1115; color: #c5cad6; margin-top: var(--s-40); } /* ag polish-02.09: было --s-56 —
   до тёмной полосы выходило 96px против 80px ритма между всеми остальными блоками. Мобильное правило (--s-28)
   ниже не трогаем: там 28 + 28 = 56px, ровно мобильный ритм. */
.footer-top { padding: var(--s-48) 0 var(--s-40); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.4fr; gap: var(--s-32); }
.footer-brand .logo img { height: 30px; }
.footer-about { font-size: 13.5px; color: #8a909c; margin: var(--s-16) 0; max-width: 34ch; line-height: 1.55; }
.footer-col h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: var(--s-16); display: flex; align-items: center; justify-content: space-between; }
.footer-col h4 .fc-chev { display: none; width: 18px; height: 18px; flex: none; transition: transform .25s; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { font-size: 14px; color: #aab0bd; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-contact .row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--s-14); font-size: 14px; }
.footer-contact .row svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: 2px; }
.footer-contact .phone { font-family: var(--mono); font-weight: 700; color: #fff; font-size: 16px; }
.footer-sub { display: flex; gap: 8px; margin-bottom: var(--s-20); }
.footer-sub input { flex: 1; height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid #2a2e38; background: #181b22; color: #fff; font: inherit; font-size: 13px; }
.footer-sub button { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; }
.footer-sub button svg { width: 18px; height: 18px; }
.footer-bottom { border-top: 1px solid #232730; padding: var(--s-20) 0; }
.footer-bottom .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); }
.footer-bottom .copy { font-size: 12.5px; color: #6b7180; }
/* Платёжные бейджи — белые «карточки» с фирменными цветами (читаются на тёмном футере) */
.pays { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.pays .pay { height: 30px; min-width: 44px; padding: 0 9px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; line-height: 1; letter-spacing: .01em; color: #1a1a1a; }
.pays .pay--visa { color: #1434cb; font-style: italic; font-size: 13.5px; letter-spacing: .04em; }
.pays .pay--mir { color: #169a5a; font-weight: 900; letter-spacing: .03em; }
.pays .pay--sbp { color: #5b2d8e; }
.pays .pay--mc { padding: 0 8px; }
.pays .pay--mc svg { display: block; }
.pays .pay--yk { color: #111; }
.pays .pay--yk b { background: #ffd24d; color: #0a0a0a; border-radius: 3px; padding: 1px 3px; margin-right: 1px; font-weight: 900; }

/* ---------- MOBILE TAB BAR ---------- */
.tabbar { display: none; }
@media (max-width: 768px) {
  .tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line); box-shadow: var(--shadow-float);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--ink-3); position: relative; }
  .tabbar a svg { width: 23px; height: 23px; }
  .tabbar a.active { color: var(--accent); }
  .tabbar a .count { position: absolute; top: 4px; left: 50%; margin-left: 3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ea580c; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
  .tabbar .center { margin-top: -22px; }
  .tabbar .center .fab { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 18px color-mix(in oklab, var(--accent) 50%, transparent); }
  .tabbar .center .fab svg { width: 24px; height: 24px; }
  .tabbar .center span { color: var(--accent); }
}

/* ---------- MOBILE NAV DRAWER ---------- */
.mdrawer-backdrop { position: fixed; inset: 0; background: rgba(8,10,14,.5); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; z-index: 80; }
.mdrawer-backdrop.open { opacity: 1; visibility: visible; }
.mdrawer {
  position: fixed; top: 0; left: -380px; bottom: 0; width: min(86vw, 348px); z-index: 81;
  background: var(--surface); display: flex; flex-direction: column;
  transition: left .3s cubic-bezier(.4,0,.2,1);
  box-shadow: var(--shadow-lg);
}
.mdrawer.open { left: 0; }
.mdrawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-14) var(--s-16); border-bottom: 1px solid var(--line); }
.mdrawer-head .logo img { height: 26px; width: auto; }
.mdrawer-close { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-2); }
.mdrawer-close:hover { background: var(--surface-2); color: var(--accent); }
.mdrawer-close svg { width: 22px; height: 22px; }
.mdrawer-city { display: flex; align-items: center; gap: 8px; padding: var(--s-12) var(--s-16); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.mdrawer-city svg { width: 17px; height: 17px; color: var(--accent); }
.mdrawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s-8) 0 var(--s-16); }
.mdrawer-title { padding: var(--s-14) var(--s-16) var(--s-6); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.mdrawer-link { display: flex; align-items: center; gap: 12px; padding: 12px var(--s-16); font-weight: 600; font-size: 15px; color: var(--ink); transition: background .15s; }
.mdrawer-link:active, .mdrawer-link:hover { background: var(--surface-2); }
.mdrawer-link svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.mdrawer-link .n { margin-left: auto; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-3); }
.mdrawer-link .ext { margin-left: auto; width: 15px; height: 15px; color: var(--ink-3); opacity: .6; }
.mdrawer-sep { height: 1px; background: var(--line); margin: var(--s-8) var(--s-16); }
.mdrawer-foot { border-top: 1px solid var(--line); padding: var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); }
.mdrawer-foot .md-phone { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--ink); }
.mdrawer-foot .md-phone svg { width: 18px; height: 18px; color: var(--accent); }
.mdrawer-foot .md-hours { font-size: 12.5px; color: var(--ink-3); }
@media (min-width: 1024px) { .mdrawer, .mdrawer-backdrop { display: none; } }

/* ============================================================
   RESPONSIVE — mobile-first switches
   ============================================================ */
@media (max-width: 1023px) {
  .topbar, .nav, .header-main { display: none; }
  .mhead { display: block; }
  .hero-inner { grid-template-columns: 1fr; gap: var(--s-16); padding: var(--s-20) 0 var(--s-24); }
  .hero-visual { order: -1; }
  .hero-float { display: none; }
  .trust { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-28) var(--s-20); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  body { padding-bottom: 60px; }   /* clear tab-bar */
  .wrap { padding: 0 var(--s-16); }
  .section { padding: var(--s-28) 0; }
  .section-head .h2 { font-size: 20px; }
  /* trust cards: icon on top, text stacked below */
  .trust-card { flex-direction: column; gap: var(--s-10); padding: var(--s-16); }
  .trust-card .tt { font-size: 14px; }
  .trust-card .td { font-size: 12.5px; }
  .hero h1 { font-size: clamp(25px, 6.6vw, 30px); margin-bottom: var(--s-10); }
  .hero-eyebrow { margin-bottom: var(--s-10); }
  .hero-sub { font-size: 14px; line-height: 1.45; margin-bottom: var(--s-16); }
  .picker { padding: var(--s-14); }
  .picker-h { margin-bottom: var(--s-10); }
  .picker-grid { grid-template-columns: 1fr; gap: var(--s-8); margin-bottom: var(--s-10); }
  .sel label { margin-bottom: 4px; }
  .sel select { height: 46px; }
  .sel::after { bottom: 17px; }
  .hero-stats { margin-top: var(--s-16); gap: var(--s-16); }
  .hero-stats .stat .num { font-size: 21px; }
  /* ===== Футер компактнее на мобиле (оценка команды 2026-06-09): убрать пустоты, поднять контакты ===== */
  .site-footer { margin-top: var(--s-28); }                /* было --s-56 */
  .footer-top { padding: var(--s-24) 0 var(--s-20); }      /* было 48/40 */
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  /* бренд-блок (логотип, текст, бейджи оплаты) — по центру на мобиле */
  .footer-brand { margin-bottom: var(--s-8); text-align: center; }
  .footer-brand .logo { display: inline-flex; }
  .footer-about { margin: var(--s-10) auto; max-width: none; }   /* было --s-16 / 34ch */
  .footer-brand .pays { justify-content: center; }
  .footer-sub { display: none; }                           /* подписку прячем на мобиле (низкоконверсионный шум) */
  /* Контакты — вторым блоком (после логотипа) и всегда открыты: телефон/адреса/часы для самовывоза */
  .footer-contact { order: 1; }
  .footer-col:not(.footer-brand):not(.footer-contact) { order: 2; }
  .footer-contact .row { margin-bottom: var(--s-10); }     /* было --s-14 */
  /* аккордеоны Компания/Покупателю — заголовки плотнее, список без UA-margin (убирает фантомные ~80px) */
  .footer-col h4 { margin-bottom: 0; padding: var(--s-10) 0; border-bottom: 1px solid #232730; cursor: pointer; }
  .footer-col h4 .fc-chev { display: block; }
  .footer-col:has(.fc-chev) ul { max-height: 0; margin: 0; padding: 0; overflow: hidden; transition: max-height .3s ease; }
  .footer-col.open:has(.fc-chev) ul { max-height: 420px; padding-top: var(--s-10); }
  .footer-col.open h4 .fc-chev { transform: rotate(180deg); }
  /* копирайт компактнее: ряд с переносом вместо растянутого столбца, меньше паддинга */
  .footer-bottom { padding: var(--s-12) 0; }
  .footer-bottom .wrap { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px 12px; }
}
@media (min-width: 1024px) {
  .mhead, .msearch { display: none; }
  .hero-inner { align-items: stretch; }
  .hero-copy { display: flex; flex-direction: column; justify-content: space-between; }
  .hero-visual { display: flex; height: 540px; }
  .hero-banner { height: 540px; aspect-ratio: auto; }
  /* ag hero-540 (02.09, по замечанию Артака «баннер высоковат»): раньше баннер был квадратом
     от ширины колонки (650×650) и растягивал левую колонку — её проектные отступы 16/16/24/24
     раздувались до 42/42/50/50, а первый экран занимал 66% высоты 1080. При 540 левая колонка
     помещается ровно со своими отступами, первый экран 56%, полоса преимуществ видна без прокрутки. */
  /* ag hero-02 (02.09): после снятия max-width абзац занял всю колонку (~595px),
     а две строки заголовка остались короче (438 и 413px) — заголовок читался
     сдвинутым влево относительно текста под ним. Центрируем его по колонке. */
  .hero h1 { text-align: center; }
}

/* ============================================================
   АВТОПОДСКАЗКИ ПОИСКА (предпоиск) — дропдаун — 2026-06-12
   ============================================================ */
.ag-suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1200;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 18px 48px rgba(15,18,28,.18); padding: 6px; overflow: hidden;
  max-height: min(70vh, 520px); overflow-y: auto;
}
.ag-suggest .ags-item {
  display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--r-sm);
  text-decoration: none; color: var(--ink); transition: background .12s;
}
.ag-suggest .ags-item:hover, .ag-suggest .ags-item.on { background: var(--surface-2); }
.ag-suggest .ags-img {
  width: 42px; height: 42px; flex: none; border-radius: 8px; background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden;
}
.ag-suggest .ags-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ag-suggest .ags-img--ph svg { width: 20px; height: 20px; color: var(--ink-3); }
.ag-suggest .ags-name { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.3; font-weight: 600; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-suggest .ags-price { flex: none; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.ag-suggest .ags-all {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 4px; padding: 10px; border: 0; border-top: 1px solid var(--line); background: none;
  color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; border-radius: 0 0 var(--r-sm) var(--r-sm);
}
.ag-suggest .ags-all:hover { background: var(--surface-2); }
.ag-suggest .ags-all svg { width: 15px; height: 15px; }
/* мобайл: дропдаун пошире, фикс выше клавиатуры */
@media (max-width: 768px) {
  .ag-suggest { max-height: 60vh; }
  .ag-suggest .ags-name { font-size: 13px; }
}

/* ---- встроенный Aspro-город в чип .city (регион-фикс 2026-06-13) ---- */
.ag-city { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ag-city .ag-city-pin { width: 17px; height: 17px; color: var(--accent); flex: none; }
.ag-city .region_wrapper, .ag-city .io_wrapper { display: inline-flex; align-items: center; gap: 5px; }
.ag-city .io_wrapper > svg, .ag-city .io_wrapper > .svg-inline-mark, .ag-city .city_title { display: none !important; }
.ag-city .js_city_chooser { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: inherit; }
.ag-city .js_city_chooser > span:first-child { font-weight: 600; }
.ag-city .js_city_chooser .arrow svg { width: 11px; height: 11px; opacity: .7; }
.ag-city .confirm_region { position: absolute; z-index: 1300; }
.ag-city.no-pointer-events, .ag-city .no-pointer-events { cursor: default; }

/* ---- mobile drawer: блок пользователя + выход (lk-03, 2026-06-13) ---- */
.mdrawer-user { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 4px; }
.mdrawer-user .mu-ava { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.mdrawer-user .mu-ava svg { width: 18px; height: 18px; }
.mdrawer-user .mu-name { font-weight: 700; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdrawer-link.mdrawer-logout { color: #b42318; }
.mdrawer-link.mdrawer-logout svg { transform: rotate(180deg); color: #b42318; }

/* подписка футера — фидбек */
.footer-sub { position: relative; }
.footer-sub-msg { margin-top: 8px; font-size: 12.5px; line-height: 1.4; }
.footer-sub-msg.is-ok { color: #6ee7a8; }
.footer-sub-msg.is-err { color: #fca5a5; }

/* таб-бар не должен перекрывать низ футера на мобиле (content-mobile-01, 2026-06-13) */
@media (max-width: 768px) {
  body.ag-styleb .site-footer { padding-bottom: 72px; }
}

/* ---- полировка-батч (2026-06-13) ---- */
/* home-08: контраст подписей hero-статистики (был #828a98 ~3.5:1) */
body.ag-styleb .hero-stats .stat .lbl { color: var(--ink-2); }
/* listing-06: пустая «пилюля» под последней секцией фильтра */
body.ag-styleb .left_block .bx_filter_parameters_box.bx-active:empty,
body.ag-styleb .smartfilter .bx_filter_block:empty { display: none !important; }
/* hba-13: серая полоса между белым контентом и тёмным футером на авторизации */
body.ag-styleb[data-cur^="/auth"] .page-top + .middle,
body.ag-styleb[data-cur^="/auth"] .middle { background: var(--bg); }

/* ---- полировка-батч 4 (2026-06-13) ---- */
/* search404_06: заглушка для карточек без фото */
body.ag-styleb .prod-noimg { display: grid; place-items: center; width: 100%; height: 100%; min-height: 90px; background: var(--surface-2); border-radius: var(--r-sm); }
body.ag-styleb .prod-noimg svg { width: 34px; height: 34px; color: var(--ink-3); opacity: .5; }
/* flow-13: крошки PDP на мобиле — в одну прокручиваемую строку, не 6 строк */
@media (max-width: 768px) {
  body.ag-styleb .topic .breadcrumbs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 12px; gap: 4px; scrollbar-width: none; }
  body.ag-styleb .topic .breadcrumbs::-webkit-scrollbar { display: none; }
  body.ag-styleb .topic .breadcrumbs > * { flex: none; }
}

/* 2026-07-17 (Татьяна, скрин 1): выделить вход в ЛК в топбаре */
.topbar-link--auth {
  border: 1px solid var(--line, #d7dce6);
  border-radius: 999px;
  padding: 4px 14px;
  font-weight: 700;
  color: var(--accent, #2563eb) !important;
  background: var(--surface, #fff);
}
.topbar-link--auth:hover { border-color: var(--accent, #2563eb); background: rgba(37, 99, 235, .06); }

/* ============================================================
   POLISH 2026-09-02 — правки по аудиту главной (пункты 13, 16, 28)
   Бэкап предыдущей версии: layout.css.bak_20260902polish
   ============================================================ */

/* --- 13: шапка прилипала целиком на 172px = 21% экрана ноутбука. После 140px
       прокрутки схлопываем до одной строки 60px: логотип + поиск + действия.
       Класс hdr-compact вешает app.js. Без JS поведение прежнее. --- */
.site-header .topbar,
.site-header .nav { transition: height .18s ease, opacity .15s ease; }
body.hdr-compact .site-header .topbar,
body.hdr-compact .site-header .nav { height: 0; opacity: 0; overflow: hidden; border-bottom-color: transparent; pointer-events: none; }
body.hdr-compact .site-header .topbar .wrap,
body.hdr-compact .site-header .nav .wrap { height: 0; overflow: hidden; }
body.hdr-compact .site-header .header-main .wrap { height: 60px; }
body.hdr-compact .site-header .header-main .search input { height: 42px; }
body.hdr-compact .site-header .header-main .search .go { height: 32px; top: 5px; }
body.hdr-compact .site-header .logo img { height: 28px; }
body.hdr-compact .site-header { box-shadow: 0 2px 12px rgba(15,17,21,.07); }
.site-header .header-main .wrap,
.site-header .logo img { transition: height .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .site-header .topbar, .site-header .nav,
  .site-header .header-main .wrap, .site-header .logo img { transition: none; }
}

/* --- 28: мобильная полоса «город + телефон». На телефоне в шапке не было ни
       города, ни номера — а это первое, что ищет человек «за запчастью сегодня». --- */
.mtopbar { display: none; }
.mtopbar .wrap { display: flex; align-items: center; gap: var(--s-10); height: 34px; font-size: 12.5px; }
.mtopbar .spacer { flex: 1; }
.mtb-city { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 600; }
.mtb-city svg { width: 14px; height: 14px; color: var(--accent); }
.mtb-phone { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-weight: 700; font-family: var(--mono); letter-spacing: -.02em; }
.mtb-phone svg { width: 14px; height: 14px; color: var(--accent); }

@media (max-width: 1023px) {
  .mtopbar { display: block; border-bottom: 1px solid var(--line); }
  /* 28b: баннер стоял выше H1 — первый экран телефона отдавался слайдеру,
     а не заголовку и подбору запчасти. Возвращаем естественный порядок. */
  .hero-visual { order: 0; }
  .hero-copy { order: -1; }
}

@media (max-width: 768px) {
  /* 16: кнопки B2B были inline-flex — правый край рвался */
  .opt-actions { flex-direction: column; align-items: stretch; }
  .opt-actions .btn { width: 100%; }
  /* 28c: узкий телефон — номер компактнее, чтобы полоса не переносилась */
  .mtopbar .wrap { gap: var(--s-6); }
}
@media (max-width: 360px) { .mtb-city { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }