/* =============================================================================
   /vendors/{slug} v2 — вендор-специфика поверх dist-profile.css (паритет с /d/{slug}).
   Активна ТОЛЬКО на body.vd-vendor-page; общий каскад (cinema/pulse/sig/bstab/dsr/dfact/
   duo/relgrid/faq) берётся из dist-profile.css, который вендор-страница включает совместимым
   классом body.vd-dist-page. Здесь — то, чего у дистри-страницы нет: KPI-рейл в hero, якорное
   оглавление, бенто аналитики бренда (ранг/спрос/доступность/цены), карточная вёрстка
   расширенных SEO-блоков и таблица разброса цен. Все токены — общие --dp-* / переменные сайта.
   ============================================================================= */

/* ── KPI-рейл в cinema-hero (committed-dark): статы бренда светлым по тёмному ── */
body.vd-vendor-page .cinema .krail{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--dp-r-sm);overflow:hidden;margin:0 0 22px;max-width:640px}
@media(max-width:560px){body.vd-vendor-page .cinema .krail{grid-template-columns:repeat(2,minmax(0,1fr))}}
body.vd-vendor-page .cinema .kstat{
  display:flex;flex-direction:column;gap:3px;padding:13px 15px;
  background:rgba(255,255,255,.055);min-width:0}
body.vd-vendor-page .cinema .kstat__v{
  font-size:clamp(1.2rem,2.4vw,1.5rem);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.02;
  font-variant-numeric:tabular-nums lining-nums}
body.vd-vendor-page .cinema .kstat__l{
  font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:600}

/* ── Якорное оглавление под hero: чипсы с плавным скроллом (CSS, без JS) ── */
html{scroll-behavior:smooth}
body.vd-vendor-page section[id]{scroll-margin-top:78px}
body.vd-vendor-page .vnav{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 2px}
body.vd-vendor-page .vnav__chip{display:inline-flex;align-items:center;padding:8px 15px;border-radius:100px;
  background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--dp-shadow-sm);
  font-size:.85rem;font-weight:600;letter-spacing:-.01em;color:var(--text-secondary);
  transition:transform .25s var(--vd-apple-ease-out),border-color .2s,background .2s,color .2s}
body.vd-vendor-page a.vnav__chip:hover{transform:translateY(-2px);border-color:var(--dp-accent-line);
  background:var(--dp-accent-soft);color:var(--accent)}
body.vd-vendor-page a.vnav__chip,body.vd-vendor-page a.vnav__chip:visited{text-decoration:none;color:var(--text-secondary)}
body.vd-vendor-page a.vnav__chip:hover{color:var(--accent)}

/* ── Пульс без карточки спроса (спрос вынесен в бенто-график): 2 ячейки без пустого трека ── */
body.vd-vendor-page .pulse:not(:has(.pulse__demand)){grid-template-columns:auto minmax(0,1fr)}

/* ================= БЕНТО АНАЛИТИКИ БРЕНДА =================
   Карточки — общий .sig из dist-profile (тень/радиус/hover наследуются). Раскладка авто-fit:
   широкая карточка спроса (.vbento__wide) сверху, ниже — ранг/доступность/цены в ряд. */
body.vd-vendor-page .vbento{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
body.vd-vendor-page .vbento__wide{grid-column:1/-1}
@media(max-width:520px){body.vd-vendor-page .vbento{grid-template-columns:1fr}
  body.vd-vendor-page .vbento__wide{grid-column:auto}}

/* Ранг бренда — медаль в стиле .vrank-медалей дистри-страницы */
body.vd-vendor-page .sig--vrank{justify-content:flex-start}
body.vd-vendor-page .vrankcard{display:flex;align-items:center;gap:15px;padding:8px 0 2px}
body.vd-vendor-page .vrankcard__medal{width:60px;height:60px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.34rem;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
body.vd-vendor-page .vrank--g1 .vrankcard__medal{background:linear-gradient(150deg,#ffdd73,#e0a326);color:#5a3d00;box-shadow:0 4px 14px rgba(224,163,38,.42)}
body.vd-vendor-page .vrank--g2 .vrankcard__medal{background:linear-gradient(150deg,#dfe5ee,#9aa7b8);color:#33414f}
body.vd-vendor-page .vrank--g3 .vrankcard__medal{background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 62%,#000))}
body.vd-vendor-page .vrank--g4 .vrankcard__medal{background:var(--dp-surface-3);color:var(--text-secondary);box-shadow:inset 0 0 0 1px var(--card-border)}
body.vd-vendor-page .vrankcard__b{display:flex;flex-direction:column;gap:2px;min-width:0}
body.vd-vendor-page .vrankcard__v{font-size:1.04rem;font-weight:650;letter-spacing:-.012em;line-height:1.15}
body.vd-vendor-page .vrankcard__of{font-size:.82rem;color:var(--text-tertiary)}
body.vd-vendor-page .vrankcard__of b{color:var(--text-secondary);font-weight:600;font-variant-numeric:tabular-nums}
body.vd-vendor-page .vrankcard__foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--card-border);
  font-size:.75rem;color:var(--text-tertiary);line-height:1.45}

/* Доступность — стек склад/транзит + числа склад · транзит · дистрибьюторы */
body.vd-vendor-page .sig--vstack{justify-content:flex-start}
body.vd-vendor-page .vstack__bar{height:12px;border-radius:100px;overflow:hidden;display:flex;
  background:var(--dp-surface-2);border:1px solid var(--card-border);margin:4px 0 14px}
body.vd-vendor-page .vstack__bar span{height:100%}
body.vd-vendor-page .vstack__bar .s1{background:var(--dp-stock)}
body.vd-vendor-page .vstack__bar .s2{background:var(--dp-transit)}
body.vd-vendor-page .vstack__rows{display:flex;flex-direction:column;gap:9px;margin-top:auto}
body.vd-vendor-page .vstack__r{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--text-secondary)}
body.vd-vendor-page .vstack__r .sw{width:10px;height:10px;border-radius:3px;flex:none}
body.vd-vendor-page .vstack__r .sw.s1{background:var(--dp-stock)}
body.vd-vendor-page .vstack__r .sw.s2{background:var(--dp-transit)}
body.vd-vendor-page .vstack__r .sw.s3{background:var(--accent);opacity:.72}
body.vd-vendor-page .vstack__r b{margin-left:auto;color:var(--text);font-weight:650;font-variant-numeric:tabular-nums}

/* Движение цен — компактная карточка флага (состояние словом + направление · медиана) */
body.vd-vendor-page .sig--vflagcard{justify-content:flex-start}
body.vd-vendor-page .vflagcard{display:flex;flex-direction:column;gap:3px}
body.vd-vendor-page .vflagcard .gauge__state{margin-top:2px;text-align:left}
body.vd-vendor-page .vflagcard .gauge__sub{text-align:left}
body.vd-vendor-page .vflagcard__dir{margin-top:13px;padding-top:13px;border-top:1px solid var(--card-border);
  display:flex;flex-direction:column;gap:3px}
body.vd-vendor-page .vflagcard__dir .flag__word{font-size:1.16rem}
body.vd-vendor-page .vflagcard__dir .flag__sub{font-size:.76rem;color:var(--text-tertiary);text-align:left;line-height:1.4}

/* ================= РАЗБРОС ЦЕН (таблица .pstab поверх .bstab) ================= */
body.vd-vendor-page .pstab{min-width:560px}
body.vd-vendor-page .ps__id{min-width:0;max-width:0;width:44%}
body.vd-vendor-page .ps__sku{display:inline-block;font-family:var(--dp-mono);font-size:.8rem;font-weight:650;
  color:var(--text);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body.vd-vendor-page .ps__nm{display:block;font-size:.77rem;color:var(--text-tertiary);line-height:1.35;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
body.vd-vendor-page td.ps__sellers{color:var(--text-secondary);font-weight:600}
body.vd-vendor-page th.ps__range,body.vd-vendor-page td.ps__range{min-width:246px}
body.vd-vendor-page .ps__rw{display:flex;align-items:center;gap:10px;white-space:nowrap}
body.vd-vendor-page .ps__lo,body.vd-vendor-page .ps__hi{font-size:.78rem;font-variant-numeric:tabular-nums;flex:none}
body.vd-vendor-page .ps__lo{color:var(--text-tertiary)}
body.vd-vendor-page .ps__hi{color:var(--text-secondary);font-weight:600}
body.vd-vendor-page .ps__bar{position:relative;flex:1;min-width:64px;height:8px;border-radius:100px;
  background:linear-gradient(90deg,var(--dp-stock),var(--dp-transit) 56%,var(--dp-up));opacity:.9}
body.vd-vendor-page .ps__dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;
  background:var(--card-bg);border:2.5px solid var(--accent);transform:translate(-50%,-50%);box-shadow:0 1px 5px rgba(0,0,0,.28)}
@media(max-width:560px){
  body.vd-vendor-page .pstab{min-width:0;font-size:.82rem}
  body.vd-vendor-page .ps__nm{display:none}
  body.vd-vendor-page th.ps__range,body.vd-vendor-page td.ps__range{min-width:0}
  body.vd-vendor-page .ps__rw{gap:7px}
  body.vd-vendor-page .ps__lo,body.vd-vendor-page .ps__hi{font-size:.72rem}
}

/* ================= РАСШИРЕННЫЕ SEO-БЛОКИ В ДИЗАЙН-СИСТЕМЕ ================= */

/* «На что смотреть в спецификациях» — карточная сетка (эйбл-номер + компактный абзац ~15px) */
body.vd-vendor-page .vspecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:13px}
body.vd-vendor-page .vspec{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r-sm);
  box-shadow:var(--dp-shadow-sm);padding:17px 19px;display:flex;gap:14px;align-items:flex-start;
  transition:transform .3s var(--vd-apple-ease-out),box-shadow .3s,border-color .2s}
body.vd-vendor-page .vspec:hover{transform:translateY(-2px);box-shadow:var(--dp-shadow);border-color:var(--dp-accent-line)}
body.vd-vendor-page .vspec__n{flex:none;font-family:var(--dp-mono);font-size:.8rem;font-weight:700;letter-spacing:-.02em;
  color:var(--accent);background:var(--dp-accent-soft);border:1px solid var(--dp-accent-line);
  border-radius:9px;padding:5px 8px;line-height:1}
body.vd-vendor-page .vspec p{margin:0;font-size:.94rem;line-height:1.62;color:var(--text-secondary)}

/* «Типовые сценарии закупки» — тайлы с нумерацией */
body.vd-vendor-page .vscen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:15px}
body.vd-vendor-page .vscen{position:relative;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--dp-r);box-shadow:var(--dp-shadow-sm);padding:22px 22px 20px;display:flex;flex-direction:column;gap:8px;
  transition:transform .35s var(--vd-apple-ease-out),box-shadow .35s,border-color .2s}
body.vd-vendor-page .vscen:hover{transform:translateY(-3px);box-shadow:var(--dp-shadow);border-color:var(--dp-accent-line)}
body.vd-vendor-page .vscen__n{font-family:var(--dp-mono);font-size:1.5rem;font-weight:800;letter-spacing:-.03em;
  color:color-mix(in srgb,var(--accent) 30%,transparent);line-height:1}
body.vd-vendor-page .vscen__t{font-size:1.06rem;font-weight:650;letter-spacing:-.012em;margin:0;line-height:1.25}
body.vd-vendor-page .vscen__x{margin:0;font-size:.92rem;line-height:1.6;color:var(--text-secondary)}

/* «Чеклист до выбора канала» — карточка со списком и галочками (inline SVG) */
body.vd-vendor-page .vcheck{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r);
  box-shadow:var(--dp-shadow-sm);padding:clamp(20px,3vw,28px)}
body.vd-vendor-page .vcheck__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:13px 28px}
body.vd-vendor-page .vcheck__list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.55;color:var(--text-secondary)}
body.vd-vendor-page .vcheck__ic{flex:none;width:22px;height:22px;margin-top:1px;color:var(--dp-stock)}

@media (prefers-reduced-motion:reduce){
  body.vd-vendor-page a.vnav__chip:hover,body.vd-vendor-page .vspec:hover,body.vd-vendor-page .vscen:hover{transform:none}
  html{scroll-behavior:auto}
}