/* ─────────────────────────────────────────────────────────
   ОБВЯЗКА: шапка, меню, город, поиск, корзина, подвал.
   Всё, что есть на каждой странице витрины и не зависит от того,
   какая это страница. Подключается сразу после core.css.

   Стили бэкенда сюда не попадают: у админки свой admin.css со своей
   палитрой. Раньше её правила (.acct, .nav) лежали в общем файле
   витрины и молча не работали — переменных --panel и --amber здесь
   нет и не будет.

   Шапка в два ряда, как в магазинных шаблонах:
     .topbar    — серая полоса: город слева, меню и вход справа.
                  Уезжает вместе со страницей;
     .site-head — белый ряд: логотип, строка поиска, корзина. Прилипает
                  к верху: на любой глубине видно, где ты и как искать.
                  Логотип именно здесь — иначе при прокрутке от магазина
                  остаётся безымянный ряд с полем.
   ───────────────────────────────────────────────────────── */

/* ── Верхняя полоса ────────────────────────────────────── */
/* Выше прилипшего ряда по z-index: выпадающие меню города и бургера
   живут в ней и должны ложиться поверх ряда с поиском */
.topbar{position:relative;z-index:45;background:var(--topbar);
  border-bottom:1px solid var(--line-3)}
/* Содержимое полосы — по той же колонке, что и ряд поиска и страница:
   иначе город с меню висят у самого края окна, а логотип под ними —
   с отступом */
.topbar .wrap{display:flex;align-items:stretch;height:56px;gap:0}

/* Пропорции как у образца: знак чуть выше надписи, надпись крупная и
   не в верхнем регистре — капс на кириллице вдвое шире латиницы, и при
   таком размере «АВТО·ДОНОР» вылезало за 300 px вместо их 209 */
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;margin-right:28px;
  font-family:var(--display);font-weight:600;font-size:26px;
  letter-spacing:-.02em;white-space:nowrap;color:var(--ink)}
.brand i{font-style:normal;color:var(--accent)}
/* Пульс живёт внутри static/logo.svg и бьётся только сердце: раньше
   дёргался весь знак целиком, потому что логотип был картинкой.
   40 px — как логотип образца: 53 в ряду высотой 100 смотрелись
   тяжело и спорили с надписью */
.brand img{width:40px;height:40px;flex:0 0 40px;align-self:center}

/* Меню — справа, рядом со входом: слева в полосе стоит город */
.site-nav{display:flex;align-items:center;gap:4px;min-width:0;margin-left:auto;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{flex:0 0 auto;padding:8px 12px;font-size:14px;font-weight:500;
  color:var(--muted);transition:color .13s}
.site-nav a:hover{color:var(--accent)}
.site-nav a[aria-current]{color:var(--accent);font-weight:600}

/* Ход в бэкенд: заметен сотруднику, не мешает покупателю */
.site-nav .to-admin{background:var(--dark);color:#fff;font-weight:600;
  padding:7px 14px;border-radius:var(--r);margin-left:8px}
.site-nav .to-admin:hover{background:var(--accent);color:#fff}

/* Вход отделён вертикальной чертой во всю высоту полосы, город
   слева — без черты: он первый в ряду */
.topbar .acct-link{display:flex;align-items:center;
  border-left:1px solid var(--line-3);padding:0 18px;margin-left:18px}
.topbar .city{display:flex;align-items:center;padding-right:18px}

/* ── Город покупателя ──────────────────────────────────── */
.city{position:relative;flex:0 0 auto}
.city-btn{display:flex;align-items:center;gap:6px;background:none;border:0;
  padding:6px 0;font:inherit;font-size:var(--t-sm);
  color:var(--muted);cursor:pointer;white-space:nowrap}
.city-btn:hover{color:var(--ink)}
.city-btn svg{color:var(--accent);flex:0 0 auto}
.city-btn b{color:var(--ink);font-weight:600;
  border-bottom:1px dashed var(--line-2)}
.city-btn[aria-expanded="true"] b{border-bottom-color:var(--accent)}

.city-pop{position:absolute;top:calc(100% - 4px);right:0;z-index:50;
  min-width:220px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:5px;box-shadow:0 12px 32px rgba(0,0,0,.13)}
.city-pop button{display:flex;align-items:center;width:100%;gap:10px;
  background:none;border:0;padding:9px 11px;border-radius:3px;
  font:inherit;font-size:var(--t-sm);color:var(--ink);cursor:pointer;
  text-align:left}
.city-pop button:hover{background:var(--surface-2);color:var(--accent)}
.city-pop button[aria-selected]{font-weight:600;color:var(--accent)}
.city-pop .n{margin-left:auto;color:var(--dim);font-size:var(--t-xs);
  font-variant-numeric:tabular-nums}
.city-pop .all{border-top:1px solid var(--line);margin-top:4px;padding-top:11px;
  border-radius:0 0 3px 3px;color:var(--muted)}

/* Догадка geoip: висит под полосой, пока человек не ответит */
.city-ask{position:absolute;top:calc(100% - 4px);right:0;z-index:50;width:260px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:0 12px 32px rgba(0,0,0,.13)}
.city-ask p{margin:0 0 11px;font-size:var(--t-sm)}
.city-ask .row{display:flex;gap:8px}
.city-ask .btn{flex:1;padding:8px 10px;font-size:var(--t-xs)}

/* Вход — жирным, как «Sign In» у магазинов: это главное действие полосы */
.acct-link{flex:0 0 auto;font-size:14px;font-weight:600;color:var(--ink);
  max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .13s}
.acct-link:hover{color:var(--accent)}

/* ── Ряд поиска ────────────────────────────────────────── */
/* Ряд не прилипает, а появляется заново — как в образце.

   Пока он на своём месте, это обычная часть страницы: уезжает вместе
   с ней. Как только страница прокрутила его за верхний край, он
   возвращается плавающим и проявляется из прозрачности со сдвигом
   сверху — полсекунды. Обратно, к самому верху, он просто встаёт на
   своё место без анимации: там он и так перед глазами.

   Место под ним держит .head-slot. Без него в миг подмены ряд уходит
   из потока, и вся страница прыгает вверх на его высоту.

   Сам вид — одинаковый всегда: белый, черта снизу 5 px, ни тени,
   ни стекла, ни увеличения. */
.head-slot{--head-h:95px;min-height:calc(var(--head-h) + 5px)}
.site-head{position:relative;z-index:40;
  background:var(--surface);border-bottom:5px solid var(--line-2)}

.site-head.stuck{position:fixed;top:0;left:0;right:0;
  animation:head-in .5s ease}
@keyframes head-in{
  from{opacity:0;transform:translateY(-20px)}
  to  {opacity:1;transform:none}
}

/* Содержимое ряда — по колонке страницы: логотип встаёт над левым краем
   первого экрана, корзина — над правым. Сама полоса при этом во всю
   ширину окна */
.site-head .wrap{display:flex;align-items:center;gap:18px;height:var(--head-h);
  flex-wrap:nowrap;min-width:0}

.site-head .brand{margin-right:10px}

/* «Все категории» — левый сегмент строки поиска, как «выбор раздела»
   в магазинных шапках: та же высота и рамка, что у поля */
.cat-btn{display:flex;align-items:center;gap:8px;padding:0 14px 0 12px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
  font-size:15px;font-weight:400;white-space:nowrap;
  transition:color .13s,border-color .13s}
.cat-btn:hover,
.cat-btn[aria-expanded="true"]{position:relative;z-index:1;
  color:var(--accent);border-color:var(--accent)}
.cat-btn svg{flex:0 0 auto}
.cat-btn .chev{color:var(--dim);transition:transform .18s}
.cat-btn:hover .chev,
.cat-btn[aria-expanded="true"] .chev{color:inherit}
.cat-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ── Меню «Все категории» ─────────────────────────────────
   Панель под рядом поиска: узлы колонками, в каждом — самые частые
   детали и «ещё N». Лежит в .site-head, но вне .wrap: иначе при
   прокрутке увеличивалась бы вместе с рядом. Левый край — по кнопке */
.cat-menu{position:absolute;top:100%;left:calc(max(0px, (100% - var(--wrap)) / 2) + 16px);
  z-index:5;width:min(920px, calc(min(var(--wrap), 100%) - 32px));
  max-height:calc(100vh - 170px);overflow-y:auto;overscroll-behavior:contain;
  margin-top:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 18px 44px rgba(0,0,0,.14);
  padding:24px 26px 18px;animation:cm-in .16s ease-out}
@keyframes cm-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Сетка, а не колонки: узел раскрывается кнопкой «ещё», и в колонках
   он перетекал бы в соседнюю — прыгал из-под курсора. В сетке растёт
   только его строка. Дыр почти нет: у каждого узла не больше двух строк */
.cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:22px 28px;margin-bottom:20px}
.cm-node{min-width:0}
.cm-node a{display:flex;align-items:baseline;gap:8px;padding:4px 0;
  font-size:var(--t-sm);color:var(--muted);transition:color .13s}
.cm-node a:hover{color:var(--accent)}
.cm-node a span{margin-left:auto;font-size:var(--t-xs);color:var(--dim);
  font-variant-numeric:tabular-nums}
/* Заголовок узла — сам ведёт в узел целиком */
.cm-node .cm-title{font-size:var(--t-md);font-weight:600;color:var(--ink);
  padding:0 0 8px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.cm-node .cm-more{display:block;background:none;border:0;padding:4px 0;cursor:pointer;
  font:inherit;font-size:var(--t-sm);font-weight:500;color:var(--accent);text-align:left}
.cm-node .cm-more::after{content:" ▾";font-size:.8em}
.cm-node .cm-more[aria-expanded="true"]::after{content:" ▴"}
.cm-node .cm-more:hover{color:var(--accent-dk)}
/* Узел без деталей: название есть, ссылки нет — бледным */
.cm-node span.cm-title{display:block}
.cm-empty .cm-title{color:var(--dim);font-weight:500}
.cm-none{display:block;padding:4px 0;font-size:var(--t-xs);color:var(--dim)}

.cm-foot{display:flex;align-items:center;gap:16px;margin-top:0;padding-top:14px;
  border-top:1px solid var(--line);font-size:var(--t-sm);color:var(--muted)}
.cm-foot a{margin-left:auto;color:var(--accent);font-weight:600}
.cm-foot a::after{content:" →"}
.cm-state{margin:0;padding:6px 0 10px;font-size:var(--t-sm);color:var(--muted)}
.cm-state a{color:var(--accent);text-decoration:underline}

/* Поиск в шапке — общий компонент .sbar (core.css), здесь только
   ширина: занимает середину ряда, но не растягивается во всю ширину
   на большом мониторе — строка в 1200 px выглядит нелепо */
/* 680 — ширина такой же группы у образца (165 + 420 + 81): шире она
   расползается по пустому месту и перестаёт читаться как один блок */
.head-search{flex:1 1 auto;min-width:0;max-width:680px;--sbar-h:40px;
  /* Прижата к корзине, а не приклеена к логотипу: между названием
     магазина и полем нужен воздух */
  margin-left:auto}
.head-search .field{font-size:14px}

/* Корзина — один значок с числом, без подписи: в образце тоже только
   значок, а слово «Корзина» съедало место у строки поиска. Название
   осталось в aria-label — читалка экрана его произнесёт */
/* Отступы только сверху и снизу: у образца правый край значка совпадает
   с краем колонки, а боковой отступ отодвигал бы его внутрь */
.cart-link{position:relative;display:flex;align-items:center;flex:0 0 auto;
  padding:7px 0;color:var(--ink);transition:color .13s}
.cart-link:hover{color:var(--accent)}
/* Рамка значка — по самому значку, а не по области нажатия: иначе
   счётчик висел бы в пустом углу, в стороне от сумки. Палец при этом
   не страдает — 44 px даёт padding ссылки */
.cart-ico{position:relative;display:flex;align-items:center;justify-content:center;
  width:30px;height:30px}
.cart-n{position:absolute;top:-6px;right:-8px;min-width:18px;height:18px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;border-radius:10px;
  font-size:10.5px;font-weight:600;line-height:1}

/* ── Бургер и мобильное меню ───────────────────────────── */
/* Бургер — значок и слово в одной кнопке: на телефоне наведения нет,
   там всё решает касание, и промахнуться мимо слова нельзя */
.burger{display:none;align-items:center;gap:9px;padding:0;flex:0 0 auto;
  align-self:center;background:none;border:0;cursor:pointer;
  margin-left:10px;color:var(--ink)}
.burger-ico{position:relative;width:42px;height:42px;flex:0 0 42px;
  border:1px solid var(--line-2);border-radius:var(--r)}
.burger-ico span,.burger-ico::before,.burger-ico::after{
  content:"";position:absolute;left:10px;right:10px;height:2px;
  background:currentColor;transition:transform .18s,opacity .12s}
.burger-ico span{top:19px}
.burger-ico::before{top:12px}
.burger-ico::after{top:26px}

/* Подпись: пока меню закрыто — «открыть» оранжевым, тихо пульсирует,
   чтобы кнопку заметили. Открыли — «закрыть» тёмным, пульс гаснет.
   Наведение — то же самое, но это добавка для мыши: на телефоне
   состояние меняет само нажатие */
.burger-lbl{display:none;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap;
  transition:color .15s}
.burger-lbl::after{content:attr(data-open)}
.burger[aria-expanded="true"] .burger-lbl::after{content:attr(data-close)}
.burger[aria-expanded="true"] .burger-lbl{animation:none;color:var(--ink)}
/* Наведение — только там, где есть мышь. На тач-экране :hover залипает
   после касания и не снимается до нажатия в другом месте: меню уже
   закрыли, а слово так и оставалось «закрыть» */
@media (hover:hover) and (pointer:fine){
  .burger:hover .burger-lbl::after{content:attr(data-close)}
  .burger:hover .burger-lbl{animation:none;color:var(--ink)}
}

/* Пульс — прозрачностью и чуть-чуть размером: подпись узкая, дрожание
   ширины сдвигало бы соседей. prefers-reduced-motion гасит общее
   правило в core.css */
@keyframes lbl-pulse{
   0%, 100%{opacity:1;transform:scale(1)}
  50%      {opacity:.45;transform:scale(.94)}
}

/* Крестик при открытом меню */
.burger[aria-expanded="true"] .burger-ico span{opacity:0}
.burger[aria-expanded="true"] .burger-ico::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] .burger-ico::after{transform:translateY(-7px) rotate(-45deg)}


@media(max-width:760px){
  .burger{display:inline-flex}
  .burger-lbl{display:inline-block;animation:lbl-pulse 2s ease-in-out infinite}
  .topbar .wrap{position:relative;height:58px}
  .brand{margin-right:0;font-size:16px}
  .brand img{width:40px;height:40px;flex-basis:40px}

  /* Меню разворачивается под полосой на всю ширину */
  .site-nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:8px 16px 14px;margin:0;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    overflow:visible;max-height:none}
  .site-nav[hidden]{display:none}
  .site-nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-size:var(--t-md)}
  .site-nav a:last-child{border-bottom:0}
  .site-nav .to-admin{margin:10px 0 0;text-align:center}

  .topbar .city,.topbar .acct-link{padding:0 12px}

  .head-slot{--head-h:68px}
  .site-head .wrap{gap:10px}
  /* От «Все категории» остаётся значок: поиск важнее подписи */
  .cat-btn{padding:0 12px}
  .cat-btn .lbl,.cat-btn .chev{display:none}
  .head-search{--sbar-h:44px}
  /* На телефоне палец шире курсора: добавляем боковой отступ */
  .cart-link{padding:7px 6px}

  /* Меню категорий — на всю ширину, листается внутри себя */
  .cat-menu{left:0;right:0;width:auto;margin-top:0;border-radius:0;
    border-width:1px 0;max-height:calc(100vh - 150px);padding:18px 16px 12px}
  .cm-grid{grid-template-columns:1fr 1fr;gap:18px 20px}
}
@media(max-width:440px){.cm-grid{grid-template-columns:1fr}}

@media(max-width:560px){
  /* Остаётся название города: подпись занимает место, а смысл несёт значок */
  .city-btn .lbl{display:none}
  .city-pop,.city-ask{right:auto;left:50%;transform:translateX(-50%)}
  /* Имя покупателя длинное, а места нет */
  .acct-link{max-width:92px}
  .brand span{display:none}
  /* Картинки нет (файл не нашёлся, её убрал скрипт) — без подписи
     на месте бренда было бы пусто */
  .brand:not(:has(img)) span{display:inline}
}

/* ── Подвал ────────────────────────────────────────────── */
.site-foot{background:var(--foot);color:var(--foot-text);margin-top:70px;
  font-size:14px;line-height:1.7}
.foot-grid{display:grid;grid-template-columns:1.5fr .9fr .9fr 1.5fr;gap:40px;
  padding-top:56px;padding-bottom:44px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-about,.foot-cta{grid-column:1/-1}}
@media(max-width:440px){.foot-grid{grid-template-columns:1fr}}

.foot-about .brand{color:#fff;margin:0 0 14px}
.foot-about p{margin:0;max-width:40ch}
/* Заголовок колонки — мелким в разрядку, как в магазинных подвалах:
   он подписывает список, а не спорит с ним за внимание */
.foot-col h4{margin:0 0 16px;color:#fff;font-size:var(--t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase}
.foot-col a{display:block;padding:3px 0;color:var(--foot-text);transition:color .13s}
.foot-col a:hover{color:#fff}

/* Правый блок: крупная строка и одно действие */
.foot-cta h4{margin:0 0 10px;color:#fff;font-size:var(--t-2xl);font-weight:700;
  line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.foot-cta p{margin:0 0 18px;max-width:42ch}

.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;
  font-size:var(--t-sm)}
.foot-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-bottom a:hover{color:#fff}