/* ============================================================
   shell.css — ОБОЛОЧКА САЙТА: то из nx-слоя, что рисуется на КАЖДОЙ
   странице, потому что живёт в base.html.

   Отделено от home.css 04.08: home.css весил 122 КБ (28 КБ gzip) и
   грузился всюду, хотя 90% его правил заперты в body.home-clean и
   постраничных классах. Здесь остались только глобальные части —
   палитра nx-*, кнопка «наверх», развилка «задать вопрос» и выпадашка
   разделов в шапке. Порядок правил и их текст не менялись, менялся
   только файл, поэтому каскад тот же: shell.css стоит ровно там, где
   раньше стоял home.css, а home.css подключается сразу за ним.

   Палитра nx-* живёт на :root (а не на body.home-clean): панель
   официальных площадок переехала на страницу контактов, где этого
   класса нет, и без общих значений осталась бы без цветов.
   ============================================================ */
/* токены --nx-* живут в style.css :root (единый источник токенов) */

/* ── КНОПКА «НАВЕРХ» ────────────────────────────────────────────────────
   Глобальная (base.html), поэтому на переменных style.css, а не на --nx-*:
   те объявлены на body.home-clean и во внутренних разделах не существуют.
   Углы страницы уже заняты чатом поддержки — при живом чате встаём над ним. */
.to-top{position:fixed;right:20px;bottom:20px;z-index:var(--z-to-top);
  width:46px;height:46px;padding:0;display:grid;place-items:center;
  border-radius:50%;cursor:pointer;
  background:#fff;color:var(--violet);border:1px solid var(--lavender);
  box-shadow:var(--shadow-sm);
  opacity:0;visibility:hidden;transform:translateY(10px);
  /* подъём над панелью покупки (to-top.js, --corner-lift) — как у самой панели */
  translate:0 calc(-1 * var(--corner-lift, 0px));
  transition-property:transform,box-shadow,background-color,border-color,color,letter-spacing,opacity,visibility,translate;
  transition-duration:.55s,.55s,.55s,.55s,.55s,.55s,.35s,.35s,.6s;
  transition-timing-function:cubic-bezier(.4,.05,.2,1),cubic-bezier(.4,.05,.2,1),cubic-bezier(.4,.05,.2,1),
    cubic-bezier(.4,.05,.2,1),cubic-bezier(.4,.05,.2,1),cubic-bezier(.4,.05,.2,1),cubic-bezier(.4,.05,.2,1),
    cubic-bezier(.4,.05,.2,1),cubic-bezier(.33,1,.68,1)}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top svg{width:20px;height:20px;display:block}
/* светлая иконка не превращается в цветной кружок и остаётся спокойной */
.to-top:hover{background:#fff;border-color:var(--nx-violet);color:var(--nx-ink);
  transform:translateY(-1px);letter-spacing:.06em;
  box-shadow:var(--lift-sm)}
.to-top:active{transform:translateY(1px)}
.to-top:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
/* Этажи нижнего угла (панель покупки → бабл чата → эта кнопка) расставляет
   static/js/to-top.js по фактическим высотам. Зашитый здесь подъём
   .to-top--over-chat{bottom:90px} не знал ни про панель, ни про размер
   бабла — кнопки садились друг на друга (F024/F030/F054), убран. */
@media(max-width:600px){
  .to-top{right:14px;bottom:14px;width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  .to-top{transition:opacity .01s,visibility .01s}
  /* подъём здесь был бы мгновенным скачком вместо осмысленного отклика */
  .to-top:hover,.to-top:active{transform:none}
}

/* ── РАЗВИЛКА «ЗАДАТЬ ВОПРОС» ───────────────────────────────────────────
   Нативный <dialog>: фокус-трап, Esc и подложка достаются бесплатно, свой
   JS-каркас модалки не нужен. Стили глобальные (base.html), поэтому на
   переменных style.css — --nx-* объявлены на body.home-clean. */
/* margin:auto явно: сброс `*{margin:0}` в style.css съедает авто-центрирование
   нативного dialog, и модалка липла в левый верхний угол */
dialog.askfork{width:min(460px,calc(100vw - 28px));max-height:calc(100vh - 40px);
  margin:auto;padding:clamp(26px,3vw,34px);border:0;border-radius:22px;
  background:#fff;color:var(--ink);overflow:auto;
  box-shadow:var(--veil)}
dialog.askfork::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}
dialog.askfork[open]{animation:askforkIn .32s cubic-bezier(.16,1,.3,1)}
@keyframes askforkIn{from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}}
.askfork__x{display:flex;justify-content:flex-end;margin:-8px -6px 0 0}
.askfork__x button{width:34px;height:34px;display:grid;place-items:center;padding:0;
  border:1px solid transparent;border-radius:50%;background:transparent;color:var(--muted);
  cursor:pointer}
/* прозрачная рамка заранее резервирует место, поэтому контур не дёргает крестик */
/* Ни своей тени, ни разрядки: тень одним слоем против прозрачного набора из
   шести давала вспышку, а letter-spacing раздвигал крестик на наведении —
   остаток механики, которую увели с главной 11.09. Свет и скорость теперь
   общие, из glow.css. */
.askfork__x button:hover{background:transparent;border-color:var(--nx-violet);color:var(--nx-ink);
  transform:translateY(-1px)}
.askfork__x svg{width:17px;height:17px}
.askfork__eyebrow{display:block;font:700 11px/1 'Open Sans',sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--terra-ink)}
.askfork__t{margin:12px 0 0;font-family:'Arsenal',Georgia,serif;font-weight:700;
  font-size:clamp(1.5rem,2.4vw,1.85rem);line-height:1.14;color:var(--violet)}
.askfork__p{margin:9px 0 0;font-size:var(--fs-note);line-height:1.55;color:var(--muted)}
.askfork__list{margin-top:22px;display:flex;flex-direction:column}
/* выходы — строки с хэйрлайнами, как указатель СМИ: одна грамматика на сайт */
.askfork__i{display:flex;align-items:center;gap:14px;width:100%;
  padding:15px 4px 16px;text-align:left;text-decoration:none;cursor:pointer;
  background:transparent;border:0;border-top:1px solid var(--hair);
  color:inherit;font:inherit;position:relative;
  transition:padding-left .35s cubic-bezier(.16,1,.3,1)}
.askfork__i:last-child{border-bottom:1px solid var(--hair)}
.askfork__i::before{content:"";position:absolute;inset:2px -10px 3px -10px;
  border-radius:10px;background:var(--lav-card-2);opacity:0;
  transition:opacity .32s cubic-bezier(.16,1,.3,1)}
/* мыши не нужна заливка всей строки, а клавиатурный фокус остаётся заметным */
.askfork__i:hover::before{opacity:0}
.askfork__i:focus-visible::before{opacity:1}
.askfork__i:hover,.askfork__i:focus-visible{padding-left:10px}
.askfork__i:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.askfork__ib{display:flex;flex-direction:column;gap:4px;min-width:0;
  position:relative;z-index:1}
.askfork__it{font-family:'Arsenal',Georgia,serif;font-weight:700;font-size:var(--fs-lg);
  line-height:1.2;color:var(--ink)}
.askfork__ip{font-size:13px;line-height:1.5;color:var(--muted)}
.askfork__i:hover .askfork__it,.askfork__i:focus-visible .askfork__it{color:var(--violet)}
.askfork__arr{margin-left:auto;flex:0 0 auto;font-style:normal;font-size:15px;
  color:var(--lavender);position:relative;z-index:1;
  transition:color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.askfork__i:hover .askfork__arr,.askfork__i:focus-visible .askfork__arr{
  color:var(--violet);transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){
  dialog.askfork[open]{animation:none}
  .askfork__x button,.askfork__i,.askfork__i::before,.askfork__arr{transition:none}
  /* крестик не должен подпрыгивать без перехода */
  .askfork__x button:hover{transform:none}
}

/* ═══ ВЫПАДАШКА РАЗДЕЛОВ В ШАПКЕ ════════════════════════════════════
   Только у «Продуктов»: остальные пункты ведут на цельные страницы, и
   разворачивать там нечего. Открывается наведением и с клавиатуры
   (focus-within), сам пункт остаётся ссылкой на витрину. */
.header__drop{position:relative;display:flex;align-items:center}
.header__drop > a{display:inline-flex;align-items:center;gap:7px}
.header__caret{width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
  opacity:.55;transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .25s}
.header__drop:hover .header__caret,
.header__drop:focus-within .header__caret{opacity:1;
  transform:rotate(225deg) translateY(-3px)}
/* у крайнего правого пункта панель прижимаем к правому краю, иначе на
   узком десктопе она уезжает за экран */
.header__nav > .header__drop:last-child .header__sub{left:auto;right:-18px}
.header__sub{position:absolute;top:100%;left:-18px;z-index:var(--z-chrome);min-width:322px;
  margin-top:14px;padding:10px;border-radius:var(--radius-sm);background:#fff;
  border:1px solid var(--edge-card);
  box-shadow:0 26px 60px rgba(46,36,64,.16),0 2px 6px rgba(46,36,64,.05);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .26s cubic-bezier(.16,1,.3,1),
             transform .26s cubic-bezier(.16,1,.3,1),visibility .26s}
/* мост до панели: между пунктом и карточкой есть зазор, без него курсор
   по пути вниз выходит из :hover и меню захлопывается */
.header__sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
/* Пункт 126: подменю было недостижимо с клавиатуры. Панель скрыта
   `visibility:hidden`, а показывалась по `:focus-within` — но сфокусировать
   что-то внутри скрытого поддерева нельзя, поэтому условие не выполнялось
   никогда и из шапки выпадали 20+ ссылок каталога. Замкнутый круг рвётся
   соседним селектором: панель раскрывается уже от фокуса на самом пункте
   (она следующий элемент после его ссылки), а дальше её держит focus-within. */
.header__drop:hover .header__sub,
.header__drop > a:focus + .header__sub,
.header__drop:focus-within .header__sub{opacity:1;visibility:visible;transform:none}
.header__sub a{display:grid;gap:2px;padding:10px 14px;border-radius:11px;
  text-decoration:none;opacity:1;transition:background .22s,color .22s}
.header__sub a b{font-weight:600;font-size:var(--fs-note);line-height:1.3;color:var(--ink)}
.header__sub a span{font:600 11px/1.3 'Open Sans',sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.header__sub a:hover{background:var(--lav-wash)}
.header__sub a:hover b{color:var(--violet)}
.header__sub a:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}
.header__sub-all{margin-top:4px;border-top:1px solid var(--edge-soft);
  border-radius:0 0 11px 11px;display:flex!important;align-items:center;
  justify-content:space-between;gap:10px;
  font:600 13px/1 'Open Sans',sans-serif;color:var(--violet)!important}
/* граница между разделами каталога и форматами в выпадашке */
.header__sub-div{margin-top:6px;border-top:1px solid var(--edge-card);
  border-radius:0;padding-top:14px!important}
.header__sub-all i{font-style:normal;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.header__sub-all:hover i{transform:translateX(4px)}
@media(max-width:920px){
  /* в бургер-меню прятать нечего: разделы просто идут списком с отступом */
  .header__drop{display:block}
  .header__caret{display:none}
  .header__sub{position:static;opacity:1;visibility:visible;transform:none;
    min-width:0;margin:6px 0 4px;padding:0 0 0 14px;border:0;box-shadow:none;
    background:transparent;border-left:1px solid var(--dl-hairline);
    border-radius:0}
  .header__sub::before{display:none}
  .header__sub a{padding:7px 0}
  .header__sub a b{font-size:14px;font-weight:500}
  .header__sub a span{display:none}
  .header__sub-all{border-top:0;padding-top:8px!important}
}
@media(prefers-reduced-motion:reduce){
  .header__sub,.header__caret,.header__sub-all i{transition:none}
}

/* Cookie-капсула стопку не прячет (14.10): она маленькая и на телефоне
   встаёт над её этажом (cookie_banner.html). Раньше баннер во всю ширину
   ложился на чат, и тот уходил на всё время показа. */
/* Полоса согласия и приглашение к отзыву на телефоне — во всю ширину у низа,
   как cookie-баннер: на время их показа плавающие кнопки уходят тем же
   приёмом (разведка 25.09 — кнопка чата лежала на «Позже»). На широком
   экране плашки в левом углу, кнопки справа — прятать нечего. */
@media (max-width:760px){
  body.legacy-on .to-top,body.rvi-on .to-top{opacity:0;visibility:hidden;pointer-events:none}
  body.legacy-on #sup-chat:not(.sup-open),body.rvi-on #sup-chat:not(.sup-open){
    opacity:0;visibility:hidden;pointer-events:none}
}