/* ============================================================================
   vitrina.css — витрина для новичка /home (шаблон backend/app/templates/vitrina_ssr.html).
   Перенос утверждённого макета 27.10 (~/print-split-handoff/mockups/vitrina_2026-10-27/assets/vitrina.css,
   вариант А, правки владельца по Кликко). Только раскладка и отступы поверх ДС:
   tokens.css → pop.css → ui-kit.css → этот файл. Значения — var(--*) из tokens.css, литералов цвета нет.
   Префикс .vt-. Карточка товара — общая .pp-product (как в ленте маркетплейса), кнопки — .bs-btn,
   сегмент — .bs-seg (радио), шапка — .pp-nav (pop.css), низ — .bs-tabbar, cookie — src/cookie-banner.js.
   ============================================================================ */

/* ── оболочка: та же линия, что у шапки и подвала (--page-max + --page-gutter) ── */
.vt{ max-width:var(--page-max); margin:0 auto; padding:var(--sp-5) var(--page-gutter) var(--sp-9);
  box-sizing:border-box; }
.vt > * + *{ margin-top:var(--sp-8); }            /* один ритм между блоками: 40 */
.vt > .vt-cats{ margin-top:var(--sp-5); }          /* категории — продолжение первого экрана: 20 */
/* блок, спрятанный по роли (src/vitrina.js: «Продавайте у нас» тому, кто уже продаёт) — класс не перебьёт hidden */
.vt [hidden]{ display:none; }

/* ── заголовок блока: H2 (Unbounded 700, 20) + подсказка под ним; «Смотреть все» справа ── */
.vt-head{ display:flex; align-items:center; gap:var(--sp-3); margin:0 0 var(--sp-3); min-height:var(--ctl-sm); }
.vt-head__t{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vt-h2{ margin:0; font:700 var(--fs-lg)/var(--lh-tight) var(--font-display); letter-spacing:-.01em; color:var(--ink); }
/* H2 ряда — описательная ссылка на свой хаб (seo-smith §3); выглядит заголовком, а не ссылкой */
.vt-h2 a{ color:inherit; text-decoration:none; border-radius:var(--rad-xs); transition:color var(--dur) var(--ease); }
.vt-h2 a:hover{ color:var(--accent-strong); }
.vt-h2 a:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.vt-hint{ margin:0; font:400 var(--fs-ctl)/var(--lh-tight) var(--font); color:var(--text-muted); }
.vt-head .bs-seg{ flex:none; margin:0 0 0 var(--sp-2); min-width:0; }
.vt-all{ margin-left:auto; flex:none; }   /* «Смотреть все» прижата вправо; вид компонента — ui-kit.css */

/* ════════════════════ ПЕРВЫЙ ЭКРАН ════════════════════ */
.vt-hero{ position:relative; z-index:2; overflow:visible; isolation:isolate;   /* Кликко выходит за край карточки (владелец 27.10: «объёмный баннер») */
  display:grid; grid-template-columns:minmax(0,1fr) 280px; align-items:center; gap:var(--sp-6);
  padding:var(--sp-7); background:var(--card); border:var(--bw) solid var(--line);
  border-radius:var(--rad-2xl); box-shadow:var(--shadow-1); }   /* 32 — как блок-призыв .bs-cta */
.vt-hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); min-width:0; }
.vt-eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-1-5); min-height:var(--sp-6); margin:0; padding:0 var(--sp-3);
  border-radius:var(--rad-pill); background:var(--accent-soft); color:var(--accent-strong);
  font:600 var(--fs-xs)/1 var(--font); }
/* max-width в em (как /how, 25.10): ширина не прыгает, пока догружаются файлы Unbounded */
.vt-h1{ margin:0; max-width:24em; font:800 var(--fs-3xl)/var(--lh-tight) var(--font-display); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.vt-grad{ white-space:nowrap; background:var(--grad-btn);   /* не --grad-hero: его коралловый край 2,94:1, у --grad-btn 5,1:1 (AA) */
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.vt-lead{ margin:0; max-width:52em; font:400 var(--fs-base)/var(--lh-normal) var(--font); color:var(--ink2); text-wrap:pretty; }
.vt-hero__row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); margin-top:var(--sp-2); }
.vt-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.vt-hero__actions .bs-btn{ min-height:var(--sp-8); padding:0 var(--sp-5); }   /* 40 — кнопка ПК по DENSITY §0 */
/* счётчики: число дисплейным шрифтом, подпись основным; разделены волосяной линией, не «·» */
.vt-stats{ display:flex; align-items:center; gap:var(--sp-4); margin:0; padding:0 0 0 var(--sp-5);
  border-left:var(--bw) solid var(--line2); list-style:none; font:500 var(--fs-sm)/1.2 var(--font); color:var(--ink2); }
.vt-stats b{ font:700 var(--fs-base)/1 var(--font-display); color:var(--ink); font-variant-numeric:tabular-nums; }

/* арт: градиентный диск (главный жест бренда) срезан краем карточки — clip-path по коробке карточки,
   поэтому карточка может быть overflow:visible; Кликко крупный и выходит за край: ухо сверху, лапы снизу,
   центр зайца = центр диска (W-118), чтобы не «вываливался» из полусферы влево (владелец 27.10) */
.vt-hero::after{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:var(--grad-hero) no-repeat right -60px bottom -138px / 356px 356px;   /* градиент — в коробке самого круга */
  clip-path:circle(178px at calc(100% - 118px) calc(100% - 40px)); }
.vt-hero__art{ position:static; align-self:stretch; min-height:220px; }
.vt-hero__klikko{ position:absolute; z-index:1; right:-10px; top:-18px; height:calc(100% + 18px + 40px);
  width:auto; max-width:none; max-height:none; filter:drop-shadow(0 18px 18px var(--line2)); }

/* ════════════════════ КАТЕГОРИИ ════════════════════ */
.vt-cats__grid{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:var(--sp-3); margin:0; padding:0; list-style:none; }
/* плитка категории .vt-cat — компонент в ui-kit.css */

/* «Все категории» → тот же мега-«Каталог», что у маркетплейса (src/ui/catalog-menu.js, логика — src/vitrina.js).
   Якорь панели на ПК — полоса нулевой высоты под шапкой по линии оболочки (--page-max − поля): панель встаёт
   под шапкой с любого места прокрутки, как выпадающий «Каталог» у Маркета, а не там, где на странице плитка.
   Слой — сразу над затемнением каталога (--z-chrome − 20), под шапкой (.pp-nav 50): шапка не тускнеет.
   Верх — низ шапки, его ставит vitrina.js перед открытием (у телефона шапка не липнет). На ≤599 у меню своя
   шторка на весь экран, якорь не участвует. */
.vt-catm-seat.pp-catm-anchor{ position:fixed; top:var(--vt-catm-top, 0px); left:0; right:0; height:0; margin-inline:auto;
  width:min(100% - 2 * var(--page-gutter), var(--page-max) - 2 * var(--page-gutter)); z-index:calc(var(--z-chrome) - 19); }
/* модуль и стили каталога едут по первому намерению; клик раньше них — плитка честно «думает», а не молчит */
.vt-cat[aria-busy="true"]{ cursor:progress; }
.vt-cat[aria-busy="true"] .vt-cat__ph{ opacity:.6; transition:opacity var(--dur) var(--ease); }

/* ════════════════════ РЯДЫ ТОВАРОВ ════════════════════ */
/* Карточка .pp-product — та же, что в ленте; колонки — по правилу .pp-mk-grid (2 · 3 · 4 · 5),
   в ряду ровно одна строка: лишние карточки на ПК скрыты, на телефоне ряд листается вбок. */
.vt-track{ display:grid; gap:var(--sp-4); grid-template-columns:repeat(5,minmax(0,1fr)); }
.vt-track > :nth-child(n+6){ display:none; }
/* «Быстрый просмотр» на /home — круглая иконка глаза и на ПК (подпись — в aria-label, seo-smith §3) */
.vt .pp-product-qv-pill{ width:var(--ctl-sm); padding:0; gap:0; }

/* «За неделю / За месяц»: радио-сегмент, ряды переключает CSS. Без :has (старый браузер) правила
   ниже отбрасываются целиком — остаётся неделя, а не оба ряда сразу. */
.vt-pop .vt-track[data-win="month"],
.vt-pop .vt-all[data-win="month"]{ display:none; }
.vt-pop:has(input[value="month"]:checked) .vt-track[data-win="week"],
.vt-pop:has(input[value="month"]:checked) .vt-all[data-win="week"]{ display:none; }
.vt-pop:has(input[value="month"]:checked) .vt-track[data-win="month"]{ display:grid; }
.vt-pop:has(input[value="month"]:checked) .vt-all[data-win="month"]{ display:inline-flex; }

/* ════════════════════ ИНСТРУМЕНТЫ — полоса с «кубиками» (владелец 27.10) ════════════════════ */
/* Полоса — фирменный градиент коралл→фиолет (владелец 27.10: «фон инструментов выдели в брендовый яркий, он теряется»),
   в ней плитка на каждый инструмент реестра. auto-fit: 3 плитки тянутся на ширину, при 6+ сжимаются до «кубиков».
   --grad-btn, не --grad-hero: белый текст на нём ≥5,1:1 по всей длине, у --grad-hero коралловый край 2,94:1 (как .vt-grad). */
.vt-tools{ display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); align-items:center; gap:var(--sp-4) var(--sp-6);
  padding:var(--sp-4) var(--sp-5); background:var(--grad-btn); border-radius:var(--rad-2xl); }
/* шапка на градиенте: роли текста → --on-accent (заголовок, подсказка, «Все инструменты»); --hover-fill остаётся
   затемнением (контраст при наведении растёт). Плитки — белые карточки со своими ролями, их это не касается. */
.vt-tools__head{ --ink:var(--on-accent); --text-muted:var(--on-accent); --accent-text:var(--on-accent);
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-1); min-width:0; }
.vt-tools__head .vt-hint{ line-height:var(--lh-normal); }
.vt-tools__head .vt-all{ margin:var(--sp-1) 0 0 calc(-1 * var(--sp-3)); }
.vt-tools__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--sp-3); margin:0; padding:0; list-style:none; }
/* плитка инструмента .vt-tool — компонент в ui-kit.css */

/* ════════════════════ «ПРОДАВАЙТЕ У НАС» ════════════════════ */
.vt-sell{ position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:var(--sp-6); align-items:center;
  padding:var(--sp-7); background:var(--accent-soft); border-radius:var(--rad-2xl); }
.vt-sell__main{ display:flex; flex-direction:column; gap:var(--sp-5); min-width:0; }
.vt-sell .vt-h2{ font-size:var(--fs-xl); }
.vt-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); margin:0; padding:0; list-style:none; }
.vt-step{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.vt-step__n{ display:grid; place-items:center; width:32px; height:32px; margin-bottom:var(--sp-2); border-radius:50%;
  background:var(--grad-btn); color:var(--on-accent); font:700 var(--fs-sm)/1 var(--font-display); font-variant-numeric:tabular-nums; }
.vt-step__t{ font:600 var(--fs-base)/1.3 var(--font); color:var(--ink); }
.vt-step__d{ font:400 var(--fs-ctl)/var(--lh-normal) var(--font); color:var(--ink2); }
/* связка шагов: линия от кружка к следующему кружку (ряд читается как путь, а не три карточки) */
.vt-step:not(:last-child)::after{ content:""; position:absolute; left:44px; right:calc(var(--sp-3) - var(--sp-4)); top:16px; height:var(--bw);
  background:var(--line-neon); }
.vt-money{ margin:0; display:flex; align-items:center; gap:var(--sp-2); font:500 var(--fs-xs)/var(--lh-normal) var(--font); color:var(--ink2); }
.vt-money .bs-ico{ width:var(--icon-sm); height:var(--icon-sm); color:var(--accent-text); flex:none; }
.vt-sell__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-4); }
.vt-sell__actions .bs-btn{ min-height:var(--sp-8); }
.vt-sell__actions .bs-link{ font-size:var(--fs-sm); }
.vt-sell__art{ justify-self:center; height:184px; width:auto; filter:drop-shadow(0 12px 14px var(--line2)); }

/* ════════════════════ МАСТЕРА ════════════════════ */
.vt-masters__grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-3); margin:0; padding:0; list-style:none; }
.vt-masters__grid > :nth-child(n+7){ display:none; }
/* плитка мастера .vt-master — компонент в ui-kit.css */

/* ════════════════════ БИРЖА ════════════════════ */
/* заказов нет → не пустой ряд, а короткая строка-приглашение (одно действие) */
.vt-ex-empty{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--rad-xl); }
.vt-ex-empty .bs-empty__ico{ width:44px; height:44px; }
.vt-ex-empty__t{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.vt-ex-empty__h{ margin:0; font:700 var(--fs-base)/1.25 var(--font-display); color:var(--ink); }
.vt-ex-empty__t span{ font:400 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); }
.vt-ex-empty .bs-btn{ flex:none; min-height:var(--sp-8); }
/* заказы есть → ряд карточек заказа */
.vt-orders{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3); margin:0; padding:0; list-style:none; }
/* карточка заказа .vt-order — компонент в ui-kit.css */

/* ════════════════════ СООБЩЕСТВО ════════════════════ */
.vt-comm{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--sp-4); }
.vt-comm--one{ grid-template-columns:minmax(0,640px); }
.vt-post{ display:grid; grid-template-columns:112px minmax(0,1fr); gap:var(--sp-3); align-items:center;
  padding:var(--sp-2); background:var(--card); border:var(--bw) solid var(--line); border-radius:var(--rad-xl);
  text-decoration:none; color:var(--ink); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.vt-post:hover{ border-color:var(--line-neon); box-shadow:var(--shadow-1); }
.vt-post:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.vt-post__img{ width:112px; aspect-ratio:4 / 3; object-fit:cover; border-radius:var(--rad-md); background:var(--bg2); display:block; }
.vt-post__img--ph{ display:grid; place-items:center; color:var(--text-muted); }
.vt-post__img--ph .bs-ico{ width:var(--icon-lg); height:var(--icon-lg); }
.vt-post__b{ display:flex; flex-direction:column; gap:var(--sp-1); min-width:0; padding-right:var(--sp-2); }
.vt-post__t{ margin:0; font:600 var(--fs-sm)/1.35 var(--font); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vt-post__m{ display:flex; align-items:center; gap:var(--sp-1-5); font:400 var(--fs-xs)/1.3 var(--font); color:var(--text-muted); }
.vt-comm__list{ display:grid; grid-auto-rows:1fr; gap:var(--sp-3); }
.vt-post--lead{ grid-template-columns:minmax(0,1fr); align-content:start; padding:var(--sp-2) var(--sp-2) var(--sp-4); }
.vt-post--lead .vt-post__img{ width:100%; aspect-ratio:3 / 1; object-position:top; }
.vt-post--lead .vt-post__b{ padding:0 var(--sp-3); gap:var(--sp-2); }
.vt-post--lead .vt-post__t{ font-size:var(--fs-md); }
.vt-post__x{ margin:0; font:400 var(--fs-sm)/var(--lh-normal) var(--font); color:var(--ink2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ════════════════════ ТЕКСТ ДЛЯ ПОИСКА + ВОПРОСЫ ════════════════════ */
.vt-about{ max-width:var(--read-max); }
.vt-about .vt-h2{ font-size:var(--fs-md); margin-bottom:var(--sp-2); }
.vt-about p{ margin:0 0 var(--sp-2); font:400 var(--fs-sm)/var(--lh-relaxed) var(--font); color:var(--ink2); }
.vt-about a{ color:var(--accent-text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-neon); }
/* вопросы — свёрнуты (§16.3: справка по раскрытию), вопрос — H3 внутри summary, строка 44 под палец */
.vt-faq{ margin-top:var(--sp-3); border-top:var(--bw) solid var(--line); }
.vt-faq__i{ border-bottom:var(--bw) solid var(--line); }
.vt-faq__i > summary{ display:flex; align-items:center; gap:var(--sp-3); min-height:var(--ctl-md); padding:var(--sp-1) 0;
  cursor:pointer; list-style:none; border-radius:var(--rad-xs); }
.vt-faq__i > summary::-webkit-details-marker{ display:none; }
.vt-faq__i > summary:focus-visible{ outline:none; box-shadow:var(--focus-ring); }
.vt-faq__q{ flex:1; margin:0; font:600 var(--fs-sm)/1.35 var(--font); color:var(--ink); }
.vt-faq__i > summary:hover .vt-faq__q{ color:var(--accent-strong); }
.vt-faq__chev{ flex:none; width:var(--icon-sm); height:var(--icon-sm); color:var(--text-muted); transition:transform var(--dur) var(--ease); }
.vt-faq__i[open] .vt-faq__chev{ transform:rotate(180deg); }
.vt-faq__i p{ margin:0 0 var(--sp-3); }

/* ════════════════════ ДВИЖЕНИЕ: только отклик на действие ════════════════════ */
@media (prefers-reduced-motion:reduce){
  .vt-faq__chev{ transition:none; }   /* плитки и «Смотреть все» — в ui-kit.css */
}

/* ════════════════════ ПЛАНШЕТ ════════════════════ */
@media (max-width:1279px){   /* width-ok: порог раскладки рядов (5→4 колонки), не ширина страницы */
  .vt-track{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .vt-track > :nth-child(n+5){ display:none; }
  .vt-masters__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .vt-masters__grid > :nth-child(n+5){ display:none; }
}
@media (max-width:1023px){   /* width-ok: порог раскладки (4→3, полоса инструментов в столбец), не ширина страницы */
  .vt-cats__grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
  .vt-track{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .vt-track > :nth-child(n+4){ display:none; }
  .vt-orders{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* полоса инструментов: заголовок над плитками, иначе 3 плитки не помещаются в ряд */
  .vt-tools{ grid-template-columns:minmax(0,1fr); }
  .vt-tools__head{ flex-direction:row; flex-wrap:wrap; align-items:center; column-gap:var(--sp-3); }
  .vt-tools__head .vt-hint{ flex:1 1 16em; }
  .vt-tools__head .vt-all{ margin:0 calc(-1 * var(--sp-2)) 0 auto; }
}

/* ════════════════════ ТЕЛЕФОН (≤767): ряды листаются вбок, одна колонка ════════════════════ */
@media (max-width:767px){
  .vt{ padding-top:var(--sp-2); }
  .vt > * + *{ margin-top:var(--sp-6); }
  .vt > .vt-cats{ margin-top:var(--sp-4); }
  .vt-h2{ font-size:var(--fs-md); }
  .vt-all{ min-height:var(--ctl-md); margin-right:calc(-1 * var(--sp-2)); }   /* тап-зона 44 */
  .vt-head{ flex-wrap:wrap; row-gap:var(--sp-2); }
  .vt-head .bs-seg{ order:3; margin-left:0; }
  .vt-head .bs-seg--sm label{ min-height:calc(var(--ctl-md) - 2 * var(--sp-1)); padding:0 var(--sp-4); font-size:var(--fs-sm); }   /* тач: дорожка 44 */

  .vt-hero{ grid-template-columns:minmax(0,1fr); gap:0; padding:var(--sp-5) var(--sp-4) var(--sp-4); border-radius:var(--rad-xl); overflow:hidden; }
  .vt-hero__copy{ gap:var(--sp-2); }
  .vt-hero::after{ display:none; }
  .vt-hero__art{ display:none; }   /* маскот не съедает первый экран телефона (канон /how) */
  .vt-hero::before{ content:""; position:absolute; z-index:-1; width:180px; height:180px; right:-96px; top:-96px;
    border-radius:50%; background:var(--grad-hero); }   /* жест бренда остаётся — краем диска в углу */
  .vt-h1{ margin-top:var(--sp-1); font-size:calc(var(--fs-xl) + var(--sp-1)); letter-spacing:-.025em; max-width:none; }   /* 28 */
  .vt-lead{ font-size:var(--fs-sm); }
  .vt-hero__row{ width:100%; display:flex; flex-direction:column; align-items:stretch; gap:var(--sp-3); margin-top:var(--sp-2); }
  /* две кнопки поровну; у мастера вторая спрятана (vitrina.js) — оставшаяся на всю ширину */
  .vt-hero__actions{ display:flex; flex-wrap:nowrap; gap:var(--sp-2); }
  .vt-hero__actions .bs-btn{ flex:1 1 0; min-width:0; min-height:var(--ctl-md); padding:0 var(--sp-3); }
  .vt-stats{ padding:0; border-left:0; justify-content:center; }

  /* категории: одна лента, видно 3,5 плитки — край показывает, что ряд продолжается */
  .vt-cats__grid{ display:flex; overflow-x:auto; gap:var(--sp-2); scroll-snap-type:x proximity; scrollbar-width:none;
    margin-inline:calc(-1 * var(--page-gutter)); padding:var(--sp-1) var(--page-gutter); scroll-padding-inline:var(--page-gutter); }
  .vt-cats__grid::-webkit-scrollbar{ display:none; }
  .vt-cats__grid > li{ flex:0 0 96px; scroll-snap-align:start; }

  /* ряд товаров = лента (как полка .pp-mshelf): карточка той же ширины, что в сетке 2 колонки */
  .vt-track{ display:flex; overflow-x:auto; gap:var(--sp-3); scroll-snap-type:x proximity; scrollbar-width:none;
    margin-inline:calc(-1 * var(--page-gutter)); padding:var(--sp-1) var(--page-gutter) var(--sp-2); scroll-padding-inline:var(--page-gutter); }
  .vt-track::-webkit-scrollbar{ display:none; }
  .vt-track > *{ flex:0 0 calc((100% - var(--sp-3)) / 2 - var(--sp-4)); scroll-snap-align:start; }
  .vt-track > :nth-child(n+4){ display:flex; }
  .vt-track > :nth-child(n+9){ display:none; }
  .vt-pop:has(input[value="month"]:checked) .vt-track[data-win="month"]{ display:flex; }

  /* инструменты: заголовок сверху, плитки — лента вбок от края до края полосы */
  .vt-tools{ padding:var(--sp-4); border-radius:var(--rad-xl); gap:var(--sp-3); }
  .vt-tools__head .vt-hint{ flex-basis:100%; order:3; }
  .vt-tools__grid{ display:flex; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; gap:var(--sp-2);
    margin-inline:calc(-1 * var(--sp-4)); padding:var(--sp-1) var(--sp-4); scroll-padding-inline:var(--sp-4); }
  .vt-tools__grid::-webkit-scrollbar{ display:none; }
  .vt-tools__grid > li{ flex:0 0 212px; scroll-snap-align:start; }

  .vt-sell{ grid-template-columns:minmax(0,1fr); padding:var(--sp-5) var(--sp-4); border-radius:var(--rad-xl); gap:var(--sp-4); }
  .vt-sell .vt-h2{ font-size:var(--fs-lg); padding-right:72px; }
  .vt-sell__art{ position:absolute; right:-6px; top:var(--sp-3); height:96px; }
  .vt-steps{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
  .vt-step{ display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:var(--sp-3); row-gap:2px; }
  .vt-step__n{ grid-row:span 2; margin:0; }
  .vt-step__t{ padding-top:var(--sp-1); }
  .vt-step:not(:last-child)::after{ left:15.5px; right:auto; top:36px; bottom:calc(-1 * var(--sp-3) + var(--sp-1)); width:var(--bw); height:auto; }
  .vt-sell__actions .bs-btn{ flex:1 1 auto; min-height:var(--ctl-md); }
  .vt-money{ align-items:flex-start; }

  .vt-masters__grid{ display:flex; overflow-x:auto; gap:var(--sp-2); scrollbar-width:none;
    margin-inline:calc(-1 * var(--page-gutter)); padding:var(--sp-1) var(--page-gutter); }
  .vt-masters__grid::-webkit-scrollbar{ display:none; }
  .vt-masters__grid > li{ flex:0 0 132px; width:132px; min-width:0; }
  .vt-masters__grid > :nth-child(n+5),.vt-masters__grid > :nth-child(n+7){ display:block; }

  .vt-ex-empty{ flex-wrap:wrap; padding:var(--sp-4); gap:var(--sp-3); }
  .vt-ex-empty .bs-btn{ width:100%; min-height:var(--ctl-md); }
  .vt-orders{ display:flex; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--page-gutter)); padding:var(--sp-1) var(--page-gutter); }
  .vt-orders::-webkit-scrollbar{ display:none; }
  .vt-orders > li{ flex:0 0 78%; }

  .vt-comm{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
  .vt-comm__list{ grid-auto-rows:auto; }
  .vt-post{ grid-template-columns:96px minmax(0,1fr); }
  .vt-post__img{ width:96px; }
  .vt-post--lead{ grid-template-columns:minmax(0,1fr); }
  .vt-post--lead .vt-post__img{ width:100%; }
}