/* =============================================================================
/d/{slug} — редизайн публичной страницы дистрибьютора (cinema hero + bento).
Подключается ПОСЛЕ seo-public-apple.css: .
Активен ТОЛЬКО на body.vd-dist-page (шелл: "vd-page vd-dist-page seo-public-body vd-apple").
Палитра концепта отображена на токены сайта (variables.css / seo-public-apple.css);
локальные токены страницы — с префиксом --dp-*. Хиро (.cinema) — committed-dark в обеих темах.
============================================================================= */
/* ── Токены страницы: светлая тема ── */
body.vd-dist-page{
--dp-surface-2:#f0f0f2;
--dp-surface-3:#e8e8ec;
--dp-border-2:rgba(0,0,0,.14);
--dp-accent-soft:var(--accent-light);
--dp-accent-line:color-mix(in srgb, var(--accent) 28%, transparent);
--dp-stock:#159a58;
--dp-transit:#bf7d00;
--dp-order:#9aa0aa;
--dp-up:#d0021b;
--dp-down:#159a58;
--dp-shadow-sm:0 1px 1px rgba(0,0,0,.04),0 3px 12px rgba(0,0,0,.05);
--dp-shadow:0 2px 5px rgba(0,0,0,.05),0 18px 46px rgba(0,0,0,.08);
--dp-shadow-lg:0 4px 10px rgba(0,0,0,.06),0 30px 70px rgba(0,0,0,.12);
--dp-r:24px;
--dp-r-sm:16px;
--dp-maxw:1060px;
--dp-mono:"SF Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
/* Совместимость inline-SVG разметки (stroke/fill="var(--border|--border-2|--surface|--text-3)"):
алиасы видны только внутри страницы, наружу не текут. */
--border:var(--card-border);
--border-2:var(--dp-border-2);
--surface:var(--card-bg);
--text-3:var(--text-tertiary);
}
/* ── Токены страницы: тёмная тема ── */
html[data-theme="dark"] body.vd-dist-page{
--dp-surface-2:#1a1a1d;
--dp-surface-3:#232327;
--dp-border-2:rgba(255,255,255,.16);
--dp-accent-line:color-mix(in srgb, var(--accent) 34%, transparent);
--dp-stock:#3ddc84;
--dp-transit:#ffbf47;
--dp-order:#84899a;
--dp-up:#ff5d55;
--dp-down:#3ddc84;
--dp-shadow-sm:0 1px 2px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.45);
--dp-shadow:0 2px 8px rgba(0,0,0,.5),0 22px 56px rgba(0,0,0,.55);
--dp-shadow-lg:0 6px 14px rgba(0,0,0,.55),0 34px 80px rgba(0,0,0,.65);
}
body.vd-dist-page .num{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.01em}
body.vd-dist-page a{text-decoration:none}
/* ── Хлебные крошки ── */
body.vd-dist-page .bcrumbs{font-size:.78rem;color:var(--text-tertiary);display:flex;gap:5px;align-items:center;padding:4px 0 0;flex-wrap:wrap}
body.vd-dist-page .bcrumbs a{color:var(--text-tertiary);font-weight:500;transition:color .2s}
body.vd-dist-page .bcrumbs a:hover{color:var(--accent)}
body.vd-dist-page .bcrumbs .bc-chev{width:13px;height:13px;color:var(--text-tertiary);opacity:.55;flex:none}
body.vd-dist-page .bcrumbs .cur{color:var(--text-secondary);font-weight:600}
/* ================= CINEMA HERO (committed-dark в обеих темах) ================= */
body.vd-dist-page .cinema{position:relative;margin-top:22px;border-radius:34px;overflow:hidden;color:#f5f5f7;
padding:clamp(34px,5vw,54px) clamp(24px,4.6vw,48px) 96px;isolation:isolate}
body.vd-dist-page .cinema::before{content:"";position:absolute;inset:0;z-index:-2;
background:
radial-gradient(640px 420px at 88% -12%, rgba(41,151,255,.38), transparent 62%),
radial-gradient(520px 380px at -6% 34%, rgba(61,220,132,.14), transparent 62%),
radial-gradient(420px 300px at 60% 118%, rgba(41,151,255,.16), transparent 60%),
linear-gradient(180deg,#0d1526,#0a0f1a 58%,#090d16)}
body.vd-dist-page .cinema::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,")}
body.vd-dist-page .cinema__wm{position:absolute;right:18px;top:46%;transform:translateY(-50%);font-size:clamp(160px,26vw,300px);
font-weight:800;letter-spacing:-.06em;line-height:1;color:rgba(255,255,255,.045);pointer-events:none;user-select:none;z-index:-1}
@media(max-width:1000px){body.vd-dist-page .cinema__wm{display:none}}
body.vd-dist-page .cinema__inner{max-width:660px}
body.vd-dist-page .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.77rem;font-weight:600;color:#9ecbff;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:6px 13px;border-radius:100px;margin-bottom:26px}
body.vd-dist-page .eyebrow .lv{width:6px;height:6px;border-radius:50%;background:#3ddc84}
body.vd-dist-page .idhead{display:flex;align-items:center;margin-bottom:14px}
body.vd-dist-page .cinema h1{font-size:clamp(2.5rem,6vw,3.9rem);line-height:.97;letter-spacing:-.034em;font-weight:700;margin:0;color:#fff}
body.vd-dist-page .cinema h1 .alt{color:rgba(255,255,255,.48);font-weight:400;font-size:.38em;letter-spacing:-.012em}
body.vd-dist-page .idsub{font-size:1.12rem;color:rgba(255,255,255,.72);max-width:46ch;line-height:1.52;letter-spacing:-.008em;margin:0 0 24px}
body.vd-dist-page .idsub b{color:#fff;font-weight:600}
body.vd-dist-page .rail{display:grid;grid-template-columns:repeat(2,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-bottom:10px;max-width:620px}
body.vd-dist-page .rail a{display:flex;flex-direction:column;gap:3px;padding:13px 15px;background:rgba(255,255,255,.055);transition:background .2s;min-width:0}
body.vd-dist-page .rail a:hover{background:rgba(255,255,255,.1)}
body.vd-dist-page .rail .k{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:600;
display:flex;align-items:center;gap:6px}
body.vd-dist-page .rail .k svg{width:12px;height:12px;color:#7cc0ff;flex:none}
body.vd-dist-page .rail .v{font-size:clamp(.82rem,1.7vw,.9rem);font-weight:600;letter-spacing:-.012em;white-space:nowrap;color:#fff}
body.vd-dist-page .verified{font-size:.76rem;color:rgba(255,255,255,.58);margin:0 0 24px;display:flex;align-items:center;gap:6px}
body.vd-dist-page .verified svg{width:13px;height:13px;color:#3ddc84;flex:none}
body.vd-dist-page .cta{display:flex;flex-wrap:wrap;gap:11px;align-items:center}
body.vd-dist-page .btn{display:inline-flex;align-items:center;gap:9px;font-size:.97rem;font-weight:600;letter-spacing:-.01em;
padding:14px 24px;border-radius:100px;border:1px solid transparent;cursor:pointer;
transition:transform .35s var(--vd-apple-ease-out),box-shadow .35s var(--vd-apple-ease-out),background .2s,border-color .2s}
body.vd-dist-page .btn:hover{transform:translateY(-2px)}
body.vd-dist-page .btn .ic{width:18px;height:18px}
body.vd-dist-page .cinema .btn--primary{background:#fff;color:#0b1220;box-shadow:0 10px 30px rgba(0,0,0,.45)}
body.vd-dist-page .cinema .btn--primary:hover{background:#f2f6ff}
body.vd-dist-page .cinema .btn--ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)}
body.vd-dist-page .cinema .btn--ghost:hover{background:rgba(255,255,255,.12)}
body.vd-dist-page .cta__note{margin:13px 0 0;font-size:.8rem;color:rgba(255,255,255,.5);max-width:54ch}
/* ================= PULSE STRIP ================= */
body.vd-dist-page .pulse{position:relative;z-index:2;margin-top:-52px;background:var(--card-bg);border:1px solid var(--card-border);
border-radius:var(--dp-r);box-shadow:var(--dp-shadow-lg);padding:20px 24px;display:grid;
grid-template-columns:auto 1.45fr auto;gap:24px;align-items:center}
@media(max-width:880px){body.vd-dist-page .pulse{grid-template-columns:1fr;gap:16px}}
body.vd-dist-page .pulse__cell{min-width:0}
body.vd-dist-page .pulse__cell+.pulse__cell{border-left:1px solid var(--card-border);padding-left:24px}
@media(max-width:880px){body.vd-dist-page .pulse__cell+.pulse__cell{border-left:0;padding-left:0;border-top:1px solid var(--card-border);padding-top:14px}}
body.vd-dist-page .bignum .v{font-size:2.6rem;font-weight:700;letter-spacing:-.03em;line-height:1}
body.vd-dist-page .bignum .l{font-size:.83rem;color:var(--text-tertiary);margin-top:3px}
body.vd-dist-page .availbar{height:13px;border-radius:100px;overflow:hidden;display:flex;background:var(--dp-surface-2);border:1px solid var(--card-border)}
body.vd-dist-page .availbar span{height:100%}
body.vd-dist-page .availbar .s1{background:var(--dp-stock)}
body.vd-dist-page .availbar .s2{background:var(--dp-transit)}
body.vd-dist-page .availbar .s3{background:var(--dp-order);opacity:.35}
body.vd-dist-page .leg{display:flex;flex-wrap:wrap;gap:13px;margin-top:9px}
body.vd-dist-page .lg{display:flex;align-items:center;gap:7px;font-size:.81rem;color:var(--text-secondary)}
body.vd-dist-page .lg .sw{width:9px;height:9px;border-radius:3px}
body.vd-dist-page .lg .sw.s1{background:var(--dp-stock)}
body.vd-dist-page .lg .sw.s2{background:var(--dp-transit)}
body.vd-dist-page .lg .sw.s3{background:var(--dp-order);opacity:.5}
body.vd-dist-page .lg b{color:var(--text)}
body.vd-dist-page .pulse__demand{width:210px}
@media(max-width:880px){body.vd-dist-page .pulse__demand{width:100%}}
body.vd-dist-page .demand__h{display:flex;justify-content:space-between;font-size:.75rem;color:var(--text-tertiary);margin-bottom:5px}
body.vd-dist-page .demand__h b{color:var(--accent);font-weight:600}
body.vd-dist-page .pulse__demand svg{width:100%;height:30px;display:block}
body.vd-dist-page .pulse__fresh{font-size:.74rem;color:var(--text-tertiary);margin-top:7px}
body.vd-dist-page .pulse__fresh b{color:var(--dp-stock);font-weight:600}
/* ================= BENTO SIGNALS ================= */
body.vd-dist-page .sigsec{padding:38px 0 6px}
body.vd-dist-page .kick{font-family:var(--dp-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--text-tertiary);
font-weight:600;margin:0 0 16px;display:flex;align-items:center;gap:9px}
body.vd-dist-page .kick::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--accent)}
/* Бенто сигналов: сетка ЗАВИСИТ ОТ ЧИСЛА карточек, чтобы не было пустых зон.
Шкала-герой (.sig--baro) всегда слева и всегда выше остальных — как в превью.
Порядок рендера: baro, chart(динамика), rank(показы), s1(уник.бренды), s2(свежесть). */
body.vd-dist-page .bento{display:grid;gap:15px}
body.vd-dist-page .bento .sig{grid-area:auto;min-width:0}
/* 5 карточек — эталон превью: герой на два ряда + 2x2 справа */
body.vd-dist-page .bento--n5{grid-template-columns:1.5fr 1fr 1fr}
body.vd-dist-page .bento--n5 .sig--baro{grid-column:1;grid-row:1/span 2}
/* 4 карточки: герой на два ряда, три справа - нижняя тянется на обе колонки */
body.vd-dist-page .bento--n4{grid-template-columns:1.5fr 1fr 1fr}
body.vd-dist-page .bento--n4 .sig--baro{grid-column:1;grid-row:1/span 2}
body.vd-dist-page .bento--n4 .sig:last-child{grid-column:2/span 2}
/* 3 карточки: герой слева на два ряда, две справа столбиком */
body.vd-dist-page .bento--n3{grid-template-columns:1.5fr 1fr}
body.vd-dist-page .bento--n3 .sig--baro{grid-column:1;grid-row:1/span 2}
/* 2 карточки: рядом, герой шире */
body.vd-dist-page .bento--n2{grid-template-columns:1.5fr 1fr}
/* 1 карточка: не растягиваем на всю ширину - иначе пустота внутри карточки */
body.vd-dist-page .bento--n1{grid-template-columns:minmax(0,620px)}
/* 6+ (задел на будущие карточки): герой на два ряда + поток справа */
body.vd-dist-page .bento--n6{grid-template-columns:1.5fr 1fr 1fr}
body.vd-dist-page .bento--n6 .sig--baro{grid-column:1;grid-row:1/span 2}
@media(max-width:940px){
body.vd-dist-page .bento--n5,body.vd-dist-page .bento--n4,
body.vd-dist-page .bento--n6,body.vd-dist-page .bento--n3,
body.vd-dist-page .bento--n2{grid-template-columns:1fr 1fr}
body.vd-dist-page .bento--n5 .sig--baro,body.vd-dist-page .bento--n4 .sig--baro,
body.vd-dist-page .bento--n6 .sig--baro,body.vd-dist-page .bento--n3 .sig--baro{grid-column:1/-1;grid-row:auto}
body.vd-dist-page .bento--n4 .sig:last-child{grid-column:auto}
body.vd-dist-page .bento--n1{grid-template-columns:1fr}
}
@media(max-width:540px){
body.vd-dist-page .bento{grid-template-columns:1fr!important}
body.vd-dist-page .bento .sig{grid-column:auto!important;grid-row:auto!important}
}
body.vd-dist-page .sig{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r);box-shadow:var(--dp-shadow-sm);
padding:19px 21px;display:flex;flex-direction:column;transition:transform .35s var(--vd-apple-ease-out),box-shadow .35s var(--vd-apple-ease-out)}
body.vd-dist-page .sig:hover{transform:translateY(-3px);box-shadow:var(--dp-shadow)}
body.vd-dist-page .sig__h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px}
body.vd-dist-page .sig__t{font-size:.95rem;font-weight:650;letter-spacing:-.01em}
body.vd-dist-page .sig__w{font-size:.72rem;color:var(--text-tertiary)}
body.vd-dist-page .baro2{flex:1;display:grid;grid-template-columns:122px minmax(0,1fr);gap:14px;align-items:center;padding:6px 0 2px}
@media(max-width:430px){body.vd-dist-page .baro2{grid-template-columns:1fr;justify-items:center}}
body.vd-dist-page .flagcol{display:flex;flex-direction:column;align-items:center;gap:5px}
body.vd-dist-page .flagcol svg{width:118px;height:120px;display:block;overflow:visible}
body.vd-dist-page .flag__cap{font-family:var(--dp-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--text-tertiary);font-weight:650;margin-bottom:2px}
body.vd-dist-page .flag__word{font-size:1.08rem;font-weight:700;letter-spacing:-.015em;color:var(--dp-up);line-height:1}
/* направление цен: модификаторы для бэкенда (up — базовый цвет выше) */
body.vd-dist-page .flag__word.is-down{color:var(--dp-down)}
body.vd-dist-page .flag__word.is-flat{color:var(--text-secondary)}
body.vd-dist-page .flag__sub{font-size:.7rem;color:var(--text-tertiary);text-align:center;line-height:1.4}
body.vd-dist-page .gaugecol{display:flex;flex-direction:column;align-items:center;min-width:0}
body.vd-dist-page .gaugecol svg{width:100%;max-width:236px;height:auto;display:block}
body.vd-dist-page .gauge__state{font-size:1.36rem;font-weight:700;letter-spacing:-.02em;margin-top:4px}
body.vd-dist-page .gauge__sub{font-size:.76rem;color:var(--text-tertiary);margin-top:2px;text-align:center;line-height:1.4}
body.vd-dist-page .baro__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;
padding-top:12px;border-top:1px solid var(--card-border);font-size:.74rem;color:var(--text-tertiary)}
body.vd-dist-page .baro__foot b{color:var(--text-secondary);font-weight:600}
body.vd-dist-page .chart svg{width:100%;height:118px;display:block}
body.vd-dist-page .chart__meta{display:flex;justify-content:space-between;align-items:baseline;font-size:.74rem;color:var(--text-tertiary);margin-top:7px;gap:8px}
body.vd-dist-page .chart__delta{font-size:.83rem;font-weight:600;color:var(--dp-stock);white-space:nowrap}
body.vd-dist-page .rankbig{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
body.vd-dist-page .rankbig .r{font-size:2.4rem;font-weight:700;letter-spacing:-.03em;color:var(--accent)}
body.vd-dist-page .rankbig .of{font-size:.88rem;color:var(--text-tertiary)}
body.vd-dist-page .rbars{display:flex;flex-direction:column;gap:7px}
body.vd-dist-page .rb{display:grid;grid-template-columns:18px 62px 1fr 40px;align-items:center;gap:10px;font-size:.78rem}
body.vd-dist-page .rb .pos{text-align:right;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
body.vd-dist-page .rb.me .pos{color:var(--accent);font-weight:700}
body.vd-dist-page .rb .n{color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.vd-dist-page .rb .bar{height:7px;border-radius:100px;background:var(--dp-surface-3);overflow:hidden}
body.vd-dist-page .rb .bar i{display:block;height:100%;border-radius:100px;background:var(--text-tertiary);opacity:.4}
body.vd-dist-page .rb.me .n{color:var(--text);font-weight:650}
body.vd-dist-page .rb.me .bar i{background:var(--accent);opacity:1}
body.vd-dist-page .rb .v{text-align:right;color:var(--text-tertiary)}
body.vd-dist-page .rb.me .v{color:var(--text);font-weight:600}
body.vd-dist-page .sig--mini{justify-content:center;gap:2px}
body.vd-dist-page .mini__v{font-size:2rem;font-weight:700;letter-spacing:-.028em;line-height:1.05}
body.vd-dist-page .mini__v .u{font-size:.9rem;color:var(--text-tertiary);font-weight:500;letter-spacing:0}
body.vd-dist-page .mini__l{font-size:.86rem;font-weight:600;margin-top:2px}
body.vd-dist-page .mini__n{font-size:.75rem;color:var(--text-tertiary);line-height:1.45;margin-top:2px}
/* Карточка уникальных брендов: сами бренды чипами (владелец 16.07) */
body.vd-dist-page .sig--uniq{justify-content:flex-start}
body.vd-dist-page .ubchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
body.vd-dist-page .ubchip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;
background:var(--dp-surface-2);border:1px solid var(--card-border);font-size:.76rem;font-weight:600;
letter-spacing:-.005em;color:var(--text);line-height:1.35;
transition:transform .25s var(--vd-apple-ease-out),border-color .2s,background .2s}
body.vd-dist-page a.ubchip:hover{transform:translateY(-1px);border-color:var(--dp-accent-line);background:var(--dp-accent-soft)}
body.vd-dist-page a.ubchip:visited{color:var(--text)}
body.vd-dist-page .ubchip__c{font-size:.68rem;font-weight:500;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
body.vd-dist-page .ubchip--more{background:transparent;border-style:dashed;color:var(--text-tertiary);font-weight:500}
/* свежесть прайса: лист */
body.vd-dist-page .freshrow{display:flex;gap:13px;align-items:center;min-width:0}
body.vd-dist-page .leaf{width:56px;height:56px;flex:none;overflow:visible}
body.vd-dist-page .leafbody{transform-origin:31px 47px;animation:dp-leafsway 4.4s ease-in-out infinite}
@keyframes dp-leafsway{0%,100%{transform:rotate(-1.2deg)}50%{transform:rotate(2.2deg)}}
body.vd-dist-page .fresh__t{min-width:0}
body.vd-dist-page .fresh__word{font-size:1.06rem;font-weight:700;letter-spacing:-.015em;color:var(--dp-stock);line-height:1.15}
body.vd-dist-page .fresh__word.is-wilt{color:var(--dp-transit)}
body.vd-dist-page .fresh__word.is-dry{color:var(--text-tertiary)}
body.vd-dist-page .fresh__line{font-size:.78rem;color:var(--text-secondary);margin-top:3px;line-height:1.45}
body.vd-dist-page .fresh__line b{color:var(--dp-stock);font-weight:650}
/* ================= SECTIONS ================= */
body.vd-dist-page section.blk{padding:40px 0 6px}
/* пары секций в две колонки на широких экранах (бэкенд оборачивает в .duo) */
body.vd-dist-page .duo{display:grid;gap:0 28px}
body.vd-dist-page .duo>section.blk{min-width:0}
body.vd-dist-page .duo>:only-child{grid-column:1/-1}
@media(min-width:1080px){body.vd-dist-page .duo{grid-template-columns:1fr 1fr;align-items:start}}
body.vd-dist-page .duo .work{grid-template-columns:1fr}
body.vd-dist-page .duo .geo{grid-template-columns:1fr}
body.vd-dist-page .duo .citygrid{grid-template-columns:repeat(2,1fr)}
body.vd-dist-page .duo .prose p{max-width:none}
body.vd-dist-page .h2row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:20px}
body.vd-dist-page .h2row h2{font-size:clamp(1.45rem,2.8vw,1.85rem);letter-spacing:-.022em;font-weight:650;margin:0;line-height:1.1;text-wrap:balance}
body.vd-dist-page .h2row .side{font-size:.84rem;color:var(--text-tertiary);white-space:nowrap}
/* ленты брендов */
body.vd-dist-page .marquee{position:relative;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding:4px 0}
body.vd-dist-page .marquee+.marquee{margin-top:10px}
body.vd-dist-page .marquee__track{display:flex;gap:11px;width:max-content;animation:dp-marquee 38s linear infinite}
body.vd-dist-page .marquee--rev .marquee__track{animation:dp-marquee-rev 46s linear infinite}
body.vd-dist-page .marquee:hover .marquee__track{animation-play-state:paused}
@keyframes dp-marquee{to{transform:translateX(-50%)}}
@keyframes dp-marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
body.vd-dist-page .bchip{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:100px;background:var(--card-bg);
border:1px solid var(--card-border);box-shadow:var(--dp-shadow-sm);font-weight:600;font-size:.92rem;letter-spacing:-.01em;white-space:nowrap;color:var(--text)}
body.vd-dist-page .bchip .ct{color:var(--text-tertiary);font-weight:500;font-size:.8rem}
body.vd-dist-page .bchip.ru{background:var(--dp-accent-soft);border-color:var(--dp-accent-line)}
body.vd-dist-page .bchip.ru .nm{color:var(--accent)}
body.vd-dist-page .brand__note{font-size:.85rem;color:var(--text-tertiary);margin-top:15px}
body.vd-dist-page .brand__note b{color:var(--text-secondary)}
@media (prefers-reduced-motion:reduce){
body.vd-dist-page .marquee{-webkit-mask:none;mask:none}
body.vd-dist-page .marquee__track{animation:none!important;flex-wrap:wrap;width:auto}
body.vd-dist-page .marquee__track [aria-hidden="true"]{display:none}
}
/* раскрыватель «все бренды» */
body.vd-dist-page .allbrands{margin-top:16px;border:1px solid var(--card-border);border-radius:20px;background:var(--card-bg);
box-shadow:var(--dp-shadow-sm);overflow:hidden}
body.vd-dist-page .allbrands summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
padding:16px 20px;font-weight:650;font-size:.98rem;letter-spacing:-.01em}
body.vd-dist-page .allbrands summary::-webkit-details-marker{display:none}
body.vd-dist-page .allbrands .plus{flex:none;width:21px;height:21px;position:relative;transition:transform .32s var(--vd-apple-ease-out)}
body.vd-dist-page .allbrands .plus::before,body.vd-dist-page .allbrands .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2px}
body.vd-dist-page .allbrands .plus::before{top:50%;left:2px;right:2px;height:2px;transform:translateY(-50%)}
body.vd-dist-page .allbrands .plus::after{left:50%;top:2px;bottom:2px;width:2px;transform:translateX(-50%);transition:opacity .3s}
body.vd-dist-page .allbrands[open] .plus{transform:rotate(90deg)}
body.vd-dist-page .allbrands[open] .plus::after{opacity:0}
body.vd-dist-page .allbrands summary .cnt{margin-left:auto;font-size:.8rem;color:var(--text-tertiary);font-weight:500}
body.vd-dist-page .allbrands__body{padding:4px 20px 20px}
body.vd-dist-page .abgroup{margin-top:14px}
body.vd-dist-page .abgroup__t{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);font-weight:650;margin-bottom:10px}
body.vd-dist-page .abgrid{display:flex;flex-wrap:wrap;gap:8px}
body.vd-dist-page .abchip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:100px;background:var(--dp-surface-2);
border:1px solid var(--card-border);font-weight:600;font-size:.85rem;letter-spacing:-.008em;color:var(--text);
transition:transform .25s var(--vd-apple-ease-out),border-color .2s,background .2s}
body.vd-dist-page .abchip:hover{transform:translateY(-1px);border-color:var(--dp-accent-line);background:var(--dp-accent-soft)}
body.vd-dist-page .abchip.ru .abchip__n{color:var(--accent)}
body.vd-dist-page .abchip__c{font-size:.75rem;font-weight:500;color:var(--text-tertiary);font-variant-numeric:tabular-nums}
body.vd-dist-page .allbrands__note{font-size:.78rem;color:var(--text-tertiary);margin-top:16px}
/* ================= GEO ================= */
body.vd-dist-page .geo{display:grid;grid-template-columns:1fr 1.5fr;gap:16px}
@media(max-width:760px){body.vd-dist-page .geo{grid-template-columns:1fr}}
body.vd-dist-page .hqcard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r);box-shadow:var(--dp-shadow-sm);padding:22px}
body.vd-dist-page .hqcard .hk{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);font-weight:650;margin-bottom:10px}
body.vd-dist-page .hqcard .city{font-size:1.3rem;font-weight:650;letter-spacing:-.02em;margin-bottom:5px}
body.vd-dist-page .hqcard .addr{font-size:.92rem;color:var(--text-secondary);line-height:1.55}
body.vd-dist-page .hqcard .tel{margin-top:12px;font-size:.95rem;font-weight:600}
body.vd-dist-page .hqcard .tel a:hover{color:var(--accent)}
body.vd-dist-page .citygrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start}
@media(min-width:560px){body.vd-dist-page .citygrid{grid-template-columns:repeat(3,1fr)}}
body.vd-dist-page .citycard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r-sm);box-shadow:var(--dp-shadow-sm);
padding:15px 17px;display:flex;align-items:center;gap:11px;transition:transform .3s var(--vd-apple-ease-out),border-color .2s}
body.vd-dist-page .citycard:hover{transform:translateY(-2px);border-color:var(--dp-accent-line)}
body.vd-dist-page .citycard .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);opacity:.85;flex:none}
body.vd-dist-page .citycard .cn{font-weight:600;font-size:.95rem;letter-spacing:-.01em}
body.vd-dist-page .citycard .cs{font-size:.74rem;color:var(--text-tertiary)}
body.vd-dist-page .geo__note{grid-column:1/-1;font-size:.85rem;color:var(--text-tertiary);margin-top:2px}
body.vd-dist-page .geo__note b{color:var(--text-secondary)}
/* ================= CATEGORIES ================= */
body.vd-dist-page .cats{display:flex;flex-wrap:wrap;gap:9px}
body.vd-dist-page .cat{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:100px;background:var(--card-bg);
border:1px solid var(--card-border);box-shadow:var(--dp-shadow-sm);font-weight:500;font-size:.9rem;color:var(--text);
transition:transform .3s var(--vd-apple-ease-out),border-color .2s}
body.vd-dist-page .cat:hover{transform:translateY(-2px);border-color:var(--dp-accent-line)}
body.vd-dist-page .cat .n{color:var(--text-tertiary);font-size:.78rem}
/* ================= PROSE ================= */
body.vd-dist-page .prose{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r);box-shadow:var(--dp-shadow-sm);
padding:clamp(24px,4vw,38px)}
body.vd-dist-page .prose p{margin:0 0 1.05em;color:var(--text-secondary);font-size:1.04rem;line-height:1.72;max-width:68ch}
body.vd-dist-page .prose p:last-child{margin:0}
body.vd-dist-page .prose p b,body.vd-dist-page .prose p strong{color:var(--text);font-weight:600}
body.vd-dist-page .prose p:first-of-type::first-letter{font-size:3rem;font-weight:650;float:left;line-height:.83;margin:5px 11px 0 0;color:var(--accent)}
/* ================= WORK ================= */
body.vd-dist-page .work{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){body.vd-dist-page .work{grid-template-columns:1fr}}
body.vd-dist-page .wcard{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r-sm);box-shadow:var(--dp-shadow-sm);
padding:21px;transition:transform .35s var(--vd-apple-ease-out),box-shadow .35s var(--vd-apple-ease-out)}
body.vd-dist-page .wcard:hover{transform:translateY(-3px);box-shadow:var(--dp-shadow)}
body.vd-dist-page .wcard .ic{width:33px;height:33px;border-radius:10px;background:var(--dp-accent-soft);color:var(--accent);
display:flex;align-items:center;justify-content:center;margin-bottom:13px}
body.vd-dist-page .wcard .ic svg{width:18px;height:18px}
body.vd-dist-page .wcard h3{font-size:1.04rem;font-weight:650;letter-spacing:-.012em;margin:0 0 6px}
body.vd-dist-page .wcard p{margin:0;font-size:.91rem;color:var(--text-secondary);line-height:1.58}
body.vd-dist-page .wcard p a{color:var(--accent);font-weight:600}
/* ================= FAQ ================= */
body.vd-dist-page .faq{display:flex;flex-direction:column;gap:9px}
body.vd-dist-page details.qa{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--dp-r-sm);box-shadow:var(--dp-shadow-sm);overflow:hidden}
body.vd-dist-page details.qa[open]{border-color:var(--dp-accent-line)}
body.vd-dist-page .qa summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;
gap:14px;font-weight:600;font-size:1rem;letter-spacing:-.01em}
body.vd-dist-page .qa summary::-webkit-details-marker{display:none}
body.vd-dist-page .qa .plus{flex:none;width:21px;height:21px;position:relative;transition:transform .32s var(--vd-apple-ease-out)}
body.vd-dist-page .qa .plus::before,body.vd-dist-page .qa .plus::after{content:"";position:absolute;background:var(--accent);border-radius:2px}
body.vd-dist-page .qa .plus::before{top:50%;left:2px;right:2px;height:2px;transform:translateY(-50%)}
body.vd-dist-page .qa .plus::after{left:50%;top:2px;bottom:2px;width:2px;transform:translateX(-50%);transition:opacity .3s}
body.vd-dist-page .qa[open] .plus{transform:rotate(90deg)}
body.vd-dist-page .qa[open] .plus::after{opacity:0}
body.vd-dist-page .qa__a{padding:0 20px 18px;color:var(--text-secondary);font-size:.95rem;line-height:1.62;max-width:none}
/* ================= RELATED ================= */
body.vd-dist-page .relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
body.vd-dist-page .relcard{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:var(--card-bg);border:1px solid var(--card-border);
border-radius:var(--dp-r-sm);box-shadow:var(--dp-shadow-sm);padding:13px 16px;color:var(--text);
transition:transform .3s var(--vd-apple-ease-out),box-shadow .3s,border-color .2s}
body.vd-dist-page .relcard:hover{transform:translateY(-2px);border-color:var(--dp-accent-line);box-shadow:var(--dp-shadow)}
body.vd-dist-page .relcard .rn{font-weight:650;letter-spacing:-.01em;color:var(--text);min-width:0;line-height:1.32;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body.vd-dist-page .relcard__c{font-size:.78rem;color:var(--text-tertiary);white-space:nowrap;font-variant-numeric:tabular-nums}
/* ── Ссылки-чипы и карточки-ссылки: без UA-подчёркиваний и фиолетового :visited ── */
body.vd-dist-page a.bchip,body.vd-dist-page a.abchip,body.vd-dist-page a.cat,body.vd-dist-page a.relcard,
body.vd-dist-page a.bchip:hover,body.vd-dist-page a.abchip:hover,body.vd-dist-page a.cat:hover,body.vd-dist-page a.relcard:hover,
body.vd-dist-page a.bchip:visited,body.vd-dist-page a.abchip:visited,body.vd-dist-page a.cat:visited,body.vd-dist-page a.relcard:visited{text-decoration:none}
body.vd-dist-page a.bchip *,body.vd-dist-page a.abchip *,body.vd-dist-page a.cat *,body.vd-dist-page a.relcard *{text-decoration:none}
body.vd-dist-page a.bchip:visited{color:var(--text)}
body.vd-dist-page a.abchip:visited{color:var(--text)}
body.vd-dist-page a.abchip.ru:visited{color:var(--accent)}
body.vd-dist-page a.cat:visited{color:var(--text)}
body.vd-dist-page a.relcard:visited{color:var(--text)}
/* ================= DOCK ================= */
body.vd-dist-page .dock{position:fixed;left:0;right:0;bottom:0;z-index:45;transform:translateY(120%);transition:transform .45s var(--vd-apple-ease-out);
padding:11px 24px;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
background:color-mix(in srgb,var(--bg) 78%,transparent);border-top:1px solid var(--card-border)}
body.vd-dist-page .dock.show{transform:none}
/* у футера док уступает место (класс взводит inline-JS страницы; бьёт .show порядком в файле) */
body.vd-dist-page .dock.dock--yield{transform:translateY(120%)}
body.vd-dist-page .dock__in{max-width:var(--dp-maxw);margin:0 auto;display:flex;align-items:center;gap:14px}
body.vd-dist-page .dock__id{font-weight:650;letter-spacing:-.01em}
body.vd-dist-page .dock__id small{display:block;font-weight:400;font-size:.75rem;color:var(--text-tertiary)}
body.vd-dist-page .dock__cta{margin-left:auto;display:flex;gap:9px}
body.vd-dist-page .dock .btn{padding:10px 19px;font-size:.88rem}
body.vd-dist-page .dock .btn--primary{background:var(--accent);color:#fff}
body.vd-dist-page .dock .btn--primary:hover{background:var(--accent-hover)}
body.vd-dist-page .dock .btn--ghost{background:var(--card-bg);color:var(--text);border-color:var(--dp-border-2)}
@media(max-width:560px){body.vd-dist-page .dock__id small{display:none}body.vd-dist-page .dock .btn--ghost{display:none}}
/* ================= REVEAL (безопасный фолбэк) =================
Без JS секции ВИДИМЫ. Скрытое стартовое состояние включается только когда
скрипт страницы взводит класс dist-reveal-armed на body и затем
добавляет .in по IntersectionObserver (паттерн vd-scroll из seo-public-page.js). */
body.vd-dist-page.dist-reveal-armed .reveal{opacity:0;transform:translateY(16px)}
body.vd-dist-page .reveal.in{opacity:1;transform:none;transition:opacity .7s var(--vd-apple-ease-out),transform .7s var(--vd-apple-ease-out)}
@media (prefers-reduced-motion:reduce){
body.vd-dist-page .reveal{opacity:1;transform:none;transition:none}
body.vd-dist-page .leafbody{animation:none}
body.vd-dist-page .btn:hover,body.vd-dist-page .sig:hover,body.vd-dist-page .citycard:hover,body.vd-dist-page .bchip:hover,
body.vd-dist-page .cat:hover,body.vd-dist-page .wcard:hover,body.vd-dist-page .relcard:hover,body.vd-dist-page .abchip:hover{transform:none}
}
body.vd-dist-page :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* ==== Бенто: адаптивный состав (v2) — авто-поток без пустых зон (фолбэк без барометра) ==== */
/* Адрес и телефон офиса в карточке города (замечание 15.07: у регионалок были только города) */
body.vd-dist-page .citycard{align-items:flex-start}
body.vd-dist-page .citycard .dot{margin-top:6px}
body.vd-dist-page .citycard__t{min-width:0}
body.vd-dist-page .citycard .ca{font-size:.78rem;color:var(--text-secondary);line-height:1.45;margin-top:4px}
body.vd-dist-page .citycard .cp{font-size:.78rem;margin-top:3px;font-variant-numeric:tabular-nums}
body.vd-dist-page .citycard .cp a{color:var(--accent);font-weight:600}
/* Раскрыватель «все дистрибьюторы»: те же карточки с числом позиций, что и в сетке выше */
body.vd-dist-page .allbrands__body .relgrid{margin-top:2px}
/* Виды индикатора «море» и «шкала» (выбор в админке; флаг слева остаётся всегда) */
body.vd-dist-page .gaugecol--sea,body.vd-dist-page .gaugecol--scale{justify-content:center}
/* Конкурсные вью v2: море/шкала 320x56 (было 300x84/300x40), барометр-анероид 160x160.
Квадратному циферблату нельзя давать общий max-width:236px — раздует герой-карточку. */
body.vd-dist-page .mi-sea{width:100%;max-width:280px;height:56px;display:block}
body.vd-dist-page .mi-scale{width:100%;max-width:280px;height:auto;display:block}
body.vd-dist-page .gaugecol--barometer svg{max-width:152px}
/* ── «Что ищут у {дистри}»: спрос из нашей выдачи (относительная шкала) ── */
body.vd-dist-page .tskus{list-style:none;margin:0;padding:0;columns:1;column-gap:16px}
@media(min-width:820px){body.vd-dist-page .tskus{columns:2}}
body.vd-dist-page .tsku{break-inside:avoid;-webkit-column-break-inside:avoid;
display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-areas:"n b" ". bar";
gap:7px 12px;align-items:center;background:var(--card-bg);border:1px solid var(--card-border);
border-radius:13px;padding:11px 14px;margin-bottom:8px;min-width:0}
body.vd-dist-page .tsku__n{grid-area:n;width:24px;height:24px;border-radius:7px;
background:var(--dp-surface-2);color:var(--text-secondary);font-size:.76rem;font-weight:700;
display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
body.vd-dist-page .tsku__b{grid-area:b;min-width:0;display:flex;flex-direction:column;gap:3px}
body.vd-dist-page .tsku__t{font-size:.9rem;font-weight:650;letter-spacing:-.01em;line-height:1.28;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body.vd-dist-page .tsku__meta{display:flex;align-items:center;gap:9px;min-width:0}
body.vd-dist-page .tsku__pn{font-family:var(--dp-mono);font-size:.72rem;color:var(--text-tertiary);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.vd-dist-page a.tsku__v{font-size:.72rem;color:var(--accent);font-weight:600;white-space:nowrap;flex:none}
body.vd-dist-page a.tsku__v:visited{color:var(--accent)}
body.vd-dist-page .tsku__bar{grid-area:bar;height:5px;border-radius:100px;background:var(--dp-surface-3);overflow:hidden}
body.vd-dist-page .tsku__bar i{display:block;height:100%;border-radius:100px;
background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,transparent))}
body.vd-dist-page .tskus__note{font-size:.8rem;color:var(--text-tertiary);margin:14px 0 0;line-height:1.5}
/* ── «Сильные бренды»: место среди дистрибьюторов бренда (из снимка, без нового SQL) ── */
body.vd-dist-page .vranks{display:flex;flex-wrap:wrap;gap:10px}
body.vd-dist-page .vrank{display:inline-flex;align-items:center;gap:11px;padding:8px 16px 8px 8px;
border-radius:100px;background:var(--card-bg);border:1px solid var(--card-border);
box-shadow:var(--dp-shadow-sm);
transition:transform .3s var(--vd-apple-ease-out),border-color .2s,box-shadow .2s}
body.vd-dist-page a.vrank:hover{transform:translateY(-2px);box-shadow:var(--dp-shadow);border-color:var(--dp-accent-line)}
body.vd-dist-page a.vrank,body.vd-dist-page a.vrank:visited{color:var(--text)}
body.vd-dist-page .vrank__medal{width:30px;height:30px;border-radius:50%;flex:none;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.84rem;
font-variant-numeric:tabular-nums;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
body.vd-dist-page .vrank--g1 .vrank__medal{background:linear-gradient(150deg,#ffdd73,#e0a326);color:#5a3d00;box-shadow:0 2px 8px rgba(224,163,38,.4)}
body.vd-dist-page .vrank--g2 .vrank__medal{background:linear-gradient(150deg,#dfe5ee,#9aa7b8);color:#33414f}
body.vd-dist-page .vrank--g3 .vrank__medal{background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#000))}
body.vd-dist-page .vrank--g4 .vrank__medal{background:var(--dp-surface-3);color:var(--text-secondary);box-shadow:none}
body.vd-dist-page .vrank__b{display:flex;flex-direction:column;line-height:1.18;min-width:0}
body.vd-dist-page .vrank__v{font-weight:650;font-size:.9rem;letter-spacing:-.01em}
body.vd-dist-page .vrank__of{font-weight:500;font-size:.72rem;color:var(--text-tertiary)}
/* ── «Бренды и наличие»: таблица из снимка (добор тем же GROUP BY) ── */
body.vd-dist-page .bswrap{overflow-x:auto;border:1px solid var(--card-border);
border-radius:var(--dp-r);background:var(--card-bg);box-shadow:var(--dp-shadow-sm)}
body.vd-dist-page .bstab{border-collapse:collapse;width:100%;min-width:520px;font-size:.9rem}
body.vd-dist-page .bstab th,body.vd-dist-page .bstab td{padding:11px 16px;text-align:left;
border-bottom:1px solid var(--card-border)}
body.vd-dist-page .bstab thead th{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--text-tertiary);font-weight:650;background:var(--dp-surface-2);position:sticky;top:0}
body.vd-dist-page .bstab tbody tr:last-child td{border-bottom:0}
body.vd-dist-page .bs__v{font-weight:600;letter-spacing:-.01em;white-space:nowrap}
body.vd-dist-page .bstab .bs__v a{color:var(--accent);text-decoration:none}
body.vd-dist-page .bstab .bs__v a:visited{color:var(--accent)}
body.vd-dist-page .bs__n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
body.vd-dist-page .bs__stock{color:var(--dp-stock);font-weight:650}
body.vd-dist-page .bs__tr{color:var(--dp-transit);font-weight:600}
body.vd-dist-page th.bs__rk,body.vd-dist-page td.bs__rk{width:34px;padding-left:16px;padding-right:6px;
text-align:center;color:var(--text-tertiary);font-weight:700;font-variant-numeric:tabular-nums}
body.vd-dist-page tbody tr:first-child .bs__rk{color:var(--dp-transit)}
body.vd-dist-page .bs__bar{width:170px}
body.vd-dist-page .bs__stack{display:flex;height:8px;border-radius:100px;overflow:hidden;background:var(--dp-surface-3)}
body.vd-dist-page .bs__stack i{display:block;height:100%;min-width:0}
body.vd-dist-page .bs__stack .bs__s1{background:var(--dp-stock)}
body.vd-dist-page .bs__stack .bs__s2{background:var(--dp-transit)}
body.vd-dist-page .bs__stack .bs__s3{background:transparent}
body.vd-dist-page .bs__lg{display:inline-flex;align-items:center;gap:5px;text-transform:none;letter-spacing:0;
font-weight:600;font-size:.68rem;color:var(--text-tertiary)}
body.vd-dist-page .bs__lg i{width:9px;height:9px;border-radius:3px;display:inline-block;flex:none}
body.vd-dist-page .bs__lg .bs__s1{background:var(--dp-stock)}
body.vd-dist-page .bs__lg .bs__s2{background:var(--dp-transit);margin-left:6px}
body.vd-dist-page .bs__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:640px){body.vd-dist-page .bs__bar{display:none}
body.vd-dist-page .bstab{min-width:400px}}