/* ─────────────────────────────────────────────────────────
   ОБВЯЗКА: шапка, меню, город, поиск, корзина, подвал.
   Всё, что есть на каждой странице витрины и не зависит от того,
   какая это страница. Подключается сразу после 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:64px;gap:0;
  max-width:none;padding-inline:clamp(16px, 3vw, 32px)}

.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-right:28px;
  font-family:var(--display);font-weight:700;font-size:19px;
  letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.brand i{font-style:normal;color:var(--accent)}
.brand img{width:53px;height:53px;object-fit:contain;flex:0 0 53px;
  align-self:center;transform-origin:center;animation:heartbeat 1s ease-in-out infinite}

/* ── Пульс логотипа ────────────────────────────────────── */
/* Сердце бьётся не синусоидой, а «тук-тук»: сильный систолический
   толчок, через мгновение второй послабее, потом пауза диастолы.
   Один цикл = 1 с, то есть 60 ударов в минуту. Анимируем transform:
   он не трогает раскладку, шапка не дёргается вместе с логотипом.
   Для prefers-reduced-motion анимацию гасит общее правило в core.css */
@keyframes heartbeat{
   0%  {transform:scale(1)}
   8%  {transform:scale(1.13)}   /* «тук» — систола */
  16%  {transform:scale(1.01)}
  24%  {transform:scale(1.08)}   /* «тук» послабее — закрытие клапанов */
  34%  {transform:scale(1)}
 100%  {transform:scale(1)}      /* диастола: пауза до следующего удара */
}

/* Меню — сразу за логотипом, как в магазинных шаблонах */
.site-nav{display:flex;align-items:center;gap:4px;min-width:0;
  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 .city,
.topbar .acct-link{display:flex;align-items:center;border-left:1px solid var(--line-3);
  padding:0 18px}
.topbar .city{margin-left:auto}

/* ── Город покупателя ──────────────────────────────────── */
.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)}

/* ── Ряд поиска ────────────────────────────────────────── */
/* Два состояния.
   В самом верху страницы ряд — часть страницы: без линии и тени,
   цвета подложки под ним. Начали прокрутку — он отделяется:
   проявляется толстая серая черта снизу, мягкая тень и матовое
   стекло, сквозь которое размыто видно уезжающий контент.

   Класс .at-top ставит static/js/chrome.js. Без скрипта ряд остаётся
   отделённым — это безопасное состояние: черта лишней не бывает,
   а ряд, слившийся с прокрученным контентом, — да. */
.site-head{position:sticky;top:0;z-index:40;
  background:var(--surface);border-bottom:5px solid var(--line-2);
  box-shadow:0 10px 30px -22px rgba(0,0,0,.45);
  /* Высота ряда и коэффициент увеличения (см. «Увеличение» ниже) */
  --head-h:84px;--k:1;
  padding-bottom:calc(var(--head-h) * (var(--k) - 1));
  margin-bottom:calc(var(--head-h) * (1 - var(--k)))}

/* Цвет «вплавленного» состояния — подложка страницы: все страницы
   начинаются с серой подложки, первый экран лежит на ней белым блоком */
body{--head-top-bg:var(--bg)}

.site-head.at-top{background:var(--head-top-bg);
  border-bottom-color:transparent;
  /* Та же тень, только прозрачная: переход гасит её, а не обрезает */
  box-shadow:0 10px 30px -22px rgba(0,0,0,0)}

/* Переходы включаются со второго кадра: иначе при загрузке ряд
   успевал бы показать черту и плавно её «стереть» */
.site-head.ready{transition:background-color .45s ease, border-color .45s ease,
  box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease,
  --k .45s ease}

/* ── Увеличение при прокрутке ─────────────────────────────
   Отделившись, ряд вырастает на 10% вместе со всем содержимым.

   Каждый элемент по отдельности увеличивать нельзя: широкие наезжают
   на соседей. Поэтому масштабируется весь ряд, как под лупой: раскладка
   считается в ширине 100% / k и увеличивается в k раз — ровно
   заполняет окно.

   Контент под рядом при этом не сдвигается: прибавка высоты
   (padding-bottom) тут же гасится отрицательным margin-bottom — ряд
   нависает над контентом, а не толкает его.

   Анимируется одно число --k, от него синхронно считаются масштаб,
   ширина и высота. Для этого свойство зарегистрировано через @property;
   браузер без @property переключит размер сразу, без плавности. */
@property --k{syntax:'<number>';inherits:true;initial-value:1}

/* Только под управлением скрипта (.ready): без него ряд всегда
   «отделён» и был бы увеличенным и в самом верху */
.site-head.ready:not(.at-top){--k:1.1}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-head:not(.at-top){
    /* color-mix не поддержан — правило отбрасывается, остаётся
       сплошной белый фон; стекло здесь украшение, не функция */
    background:color-mix(in srgb, var(--surface) 80%, transparent);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);
    backdrop-filter:saturate(1.6) blur(14px)}
}

/* На всю ширину окна, отступ растёт с экраном */
.site-head .wrap{display:flex;align-items:center;gap:18px;height:var(--head-h);
  flex-wrap:nowrap;min-width:0;
  max-width:none;padding-inline:clamp(16px, 3vw, 32px);
  /* Увеличение: узкая раскладка, растянутая от левого верхнего угла.
     margin-inline:0 — иначе margin:auto из .wrap центровал бы узкий
     ряд, и после увеличения он съехал бы вправо */
  width:calc(100% / var(--k));margin-inline:0;
  transform:scale(var(--k));transform-origin:0 0}

/* «Все категории» — вход в каталог, тёмная плашка слева от поиска */
.cat-btn{display:flex;align-items:center;gap:10px;flex:0 0 auto;height:48px;
  padding:0 20px;border-radius:var(--r);background:var(--dark);color:#fff;
  font-size:14px;font-weight:600;white-space:nowrap;transition:background .15s}
.cat-btn:hover,
.cat-btn[aria-expanded="true"]{background:var(--accent)}
.cat-btn svg{flex:0 0 auto}

/* ── Меню «Все категории» ─────────────────────────────────
   Панель под рядом поиска: узлы колонками, в каждом — самые частые
   детали и «ещё N». Лежит в .site-head, но вне .wrap: иначе при
   прокрутке увеличивалась бы вместе с рядом. Левый край — по кнопке */
.cat-menu{position:absolute;top:100%;left:clamp(16px, 3vw, 32px);z-index:5;
  width:min(920px, calc(100vw - 2 * clamp(16px, 3vw, 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}

/* Поиск — «таблетка» с оранжевой кнопкой внутри */
.head-search{flex:1;min-width:0;display:flex;align-items:center;height:48px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);
  padding:0 5px 0 22px;transition:border-color .13s,box-shadow .13s}
.head-search:focus-within{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(245,79,12,.12)}
.head-search input{flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:14px;color:var(--ink);padding:0}
.head-search input::placeholder{color:var(--dim)}
/* Системный крестик очистки у type=search в стиль не попадает */
.head-search input::-webkit-search-cancel-button{-webkit-appearance:none}
.head-search button{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  gap:8px;height:38px;padding:0 20px;border:0;border-radius:var(--r-pill);
  background:var(--accent);color:#fff;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;transition:background .15s}
.head-search button:hover{background:var(--accent-dk)}

/* Корзина — значок с числом и подписью */
.cart-link{position:relative;display:flex;align-items:center;gap:10px;flex:0 0 auto;
  color:var(--ink);font-size:14px;font-weight:600;transition:color .13s}
.cart-link:hover{color:var(--accent)}
.cart-ico{position:relative;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line)}
.cart-n{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;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;width:42px;height:42px;padding:0;flex:0 0 42px;align-self:center;
  background:none;border:1px solid var(--line-2);border-radius:var(--r);
  cursor:pointer;position:relative;margin-left:10px;color:var(--ink)}
.burger span,.burger::before,.burger::after{
  content:"";position:absolute;left:11px;right:11px;height:2px;
  background:currentColor;transition:transform .18s,opacity .12s}
.burger span{top:20px}
.burger::before{top:13px}
.burger::after{top:27px}
/* Крестик при открытом меню */
.burger[aria-expanded="true"] span{opacity:0}
.burger[aria-expanded="true"]::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"]::after{transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1000px){
  /* Подпись у корзины уступает место поиску */
  .cart-link .cart-lbl{display:none}
}

@media(max-width:760px){
  .burger{display:block}
  .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}

  .site-head{--head-h:68px}
  .site-head .wrap{gap:10px}
  /* От «Все категории» остаётся значок: поиск важнее подписи */
  .cat-btn{width:44px;height:44px;padding:0;justify-content:center}
  .cat-btn span{display:none}
  .head-search{height:44px;padding-left:16px}
  .head-search button{height:34px;padding:0 14px}
  .head-search button span{display:none}
  .cart-ico{width:42px;height:42px}

  /* Меню категорий — на всю ширину, листается внутри себя */
  .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.6fr 1fr 1fr;gap:40px;
  padding-top:56px;padding-bottom:40px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .foot-about{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-lg);font-weight:600}
.foot-col a{display:block;padding:3px 0;color:var(--foot-text);transition:color .13s}
.foot-col a:hover{color:#fff}

.foot-bottom{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;
  font-size:var(--t-sm)}

/* Пиксельная метка в самом верху документа: по ней скрипт шапки
   (static/js/chrome.js) понимает, прокручена ли страница */
.head-mark{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}