/* Витрина брендов ventar-s.ru — 06.09.2026 */
.vb{--vb-bg:#f2f3f5;--vb-card:#fff;--vb-line:#c9cdd2;--vb-tx:#242629;--vb-mut:#6a7079;--vb-acc:#ff7f00;--vb-acc2:#fcab4a;--vb-blue:#0170b9;color:var(--vb-tx);font:15px/1.45 Roboto,system-ui,sans-serif;margin:0 0 12px}
.vb *,.vb *::before,.vb *::after{box-sizing:border-box}
.vb h1,.vb h2{font-family:'Exo 2',Roboto,sans-serif;margin:0;color:var(--vb-tx)}
.vb-hero{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:end;margin:0 0 18px}
.vb-hero h1{font-size:32px;font-weight:800;line-height:1.1}
.vb-lead{color:var(--vb-mut);margin:8px 0 14px;max-width:70ch;font-size:15px;line-height:1.6}
.vb-stats{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.vb-stat{background:var(--vb-card);border:1px solid var(--vb-line);border-radius:12px;padding:10px 14px;min-width:110px}
.vb-stat b{font:700 24px/1.1 'Exo 2',sans-serif;display:block;font-variant-numeric:tabular-nums;color:var(--vb-tx)}
.vb-stat span{font-size:12px;color:var(--vb-mut)}
.vb-bar{position:sticky;top:0;z-index:5;background:var(--vb-bg);padding:10px 0 12px;border-bottom:1px solid var(--vb-line);margin:0 0 20px}
.vb-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.vb-row+.vb-row{margin-top:8px}
.vb-chip{font:500 14px/1.2 Roboto,sans-serif;background:var(--vb-card);color:var(--vb-tx);border:1px solid var(--vb-line);border-radius:999px;padding:8px 14px;cursor:pointer;margin:0;text-transform:none;letter-spacing:0;box-shadow:none;transition:background .15s,border-color .15s}
.vb-chip b{font-weight:500;color:var(--vb-mut);margin-left:4px}
.vb-chip:hover{border-color:var(--vb-acc2)}
.vb-chip.is-on{background:var(--vb-acc);border-color:var(--vb-acc);color:#fff}
.vb-chip.is-on b{color:#fff}
.vb-seg{display:inline-flex;border:1px solid var(--vb-line);border-radius:999px;overflow:hidden;margin-left:auto;background:var(--vb-card)}
.vb-seg a{font:500 14px/1.2 Roboto,sans-serif;color:var(--vb-tx);text-decoration:none;padding:8px 14px;border:0}
.vb-seg a:hover{color:var(--vb-blue)}
.vb-seg a.is-on{background:var(--vb-blue);color:#fff}
.vb-search{flex:1 1 220px;max-width:320px;font:14px Roboto,sans-serif;height:38px;padding:0 14px;border:1px solid var(--vb-line);border-radius:999px;background:var(--vb-card);color:var(--vb-tx);margin:0}
.vb-search:focus{outline:2px solid var(--vb-acc);outline-offset:-1px}
.vb-sec{margin:0 0 34px;padding:0;border:0;background:none}
.vb-h2{font-size:24px;font-weight:600;display:flex;align-items:center;gap:10px;margin:0}
.vb-h2 svg{width:30px;height:30px;padding:5px;border-radius:8px;background:var(--vb-blue);fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vb-cnt{font:500 13px/1.2 Roboto,sans-serif;color:var(--vb-mut);border:1px solid var(--vb-line);border-radius:999px;padding:2px 9px}
.vb-desc{color:var(--vb-mut);margin:4px 0 14px;font-size:14px}
.vb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:12px}
.vb-card{background:var(--vb-card);border:1px solid var(--vb-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s;margin:0}
.vb-card:hover{border-color:var(--vb-acc2);box-shadow:0 6px 18px rgba(36,38,41,.08)}
.vb-logo{display:flex;align-items:center;justify-content:center;height:76px;background:#fff;border:1px solid var(--vb-line);border-radius:8px;padding:8px}
.vb-logo img{max-width:82%;max-height:52px;width:auto;height:auto;display:block}
.vb-head{display:flex;flex-direction:column;gap:2px}
.vb-name{font:700 17px/1.25 'Exo 2',sans-serif;color:var(--vb-tx);text-decoration:none}
.vb-name:hover{color:var(--vb-blue)}
.vb-meta{font-size:13px;color:var(--vb-mut);font-variant-numeric:tabular-nums}
.vb-subs{display:flex;flex-direction:column;gap:4px}
.vb-sub{font-size:13px;line-height:1.35;color:var(--vb-tx);text-decoration:none;background:var(--vb-bg);border-radius:8px;padding:5px 9px;display:flex;justify-content:space-between;gap:8px}
.vb-sub:hover{color:var(--vb-blue)}
.vb-sub i{font-style:normal;color:var(--vb-mut);font-variant-numeric:tabular-nums;flex:none}
.vb-more{margin-top:auto;font:500 14px/1.3 Roboto,sans-serif;color:var(--vb-blue);text-decoration:none}
.vb-more::after{content:" \2192"}
.vb-more i{font-style:normal;font-weight:400;color:var(--vb-mut)}
.vb-card[hidden],.vb-sec[hidden],.vb-empty[hidden]{display:none}
.vb-empty{color:var(--vb-mut);padding:30px 0;text-align:center}
.vb a:focus-visible,.vb button:focus-visible,.vb input:focus-visible{outline:2px solid var(--vb-acc);outline-offset:2px}
.vb-top{margin:0 0 8px}
.vb-text{font-size:14.5px;line-height:1.75;color:#22364f;max-width:900px;margin:26px 0 0}
.vb-text h2{font-family:'Exo 2',sans-serif;font-size:20px;font-weight:800;color:#12294d;margin:22px 0 10px}
.vb-text h3{font-family:'Exo 2',sans-serif;font-size:16px;font-weight:700;margin:16px 0 6px}
.vb-text p,.vb-text ul,.vb-text ol{margin:0 0 10px}
.vb-text li{margin:4px 0}
@media (max-width:760px){
 .vb-hero{grid-template-columns:1fr}.vb-hero h1{font-size:26px}
 .vb-stats{justify-content:flex-start}.vb-stat{min-width:0;flex:1;padding:8px 10px}.vb-stat b{font-size:20px}
 .vb-row--chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .vb-row--chips::-webkit-scrollbar{display:none}
 .vb-row--chips .vb-chip{white-space:nowrap;flex:0 0 auto}
 .vb-seg{margin-left:0}
 .vb-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
 .vb-subs{display:none}.vb-logo{height:64px}
}
@media (prefers-reduced-motion:reduce){.vb-card,.vb-chip{transition:none}}

/* === Навигация по брендам: алфавит, подсказки, компактный вид. 11.09.2026 === */
.vb-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:10px 0 0;padding-top:10px;border-top:1px dashed var(--vb-line)}
.vb-abcl{font:700 11.5px/1 Roboto,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--vb-mut);margin-right:2px}
.vb-abc{appearance:none;border:1px solid transparent;background:transparent;color:var(--vb-tx);min-width:27px;height:27px;padding:0 5px;border-radius:7px;font:700 12.5px/1 Roboto,sans-serif;cursor:pointer;transition:.13s}
.vb-abc:hover:not(:disabled){background:var(--vb-soft,#e8f2fa);color:var(--vb-acc,#0170b9)}
.vb-abc.is-on{background:var(--vb-acc,#0170b9);color:#fff}
.vb-abc:disabled{color:var(--vb-line);cursor:default}
.vb-abcsep{width:1px;align-self:stretch;background:var(--vb-line);margin:3px 5px}
.vb-found{margin-left:auto;font:13px Roboto,sans-serif;color:var(--vb-mut);font-variant-numeric:tabular-nums}
.vb-view{display:inline-flex;border:1px solid var(--vb-line);border-radius:999px;overflow:hidden;background:var(--vb-card)}
.vb-view button{appearance:none;border:0;background:transparent;color:var(--vb-tx);font:600 13px Roboto,sans-serif;padding:8px 14px;cursor:pointer}
.vb-view button+button{border-left:1px solid var(--vb-line)}
.vb-view button.is-on{background:var(--vb-acc,#0170b9);color:#fff}
.vb-sbox{position:relative;flex:1 1 260px;max-width:360px}
.vb-sbox .vb-search{max-width:none;width:100%}
.vb-sug{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--vb-card);border:1px solid var(--vb-line);border-radius:12px;box-shadow:0 18px 40px -22px rgba(18,41,77,.55);overflow:hidden;z-index:9200;display:none}
.vb-sug.is-on{display:block}
.vb-sug a{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:11px;align-items:center;padding:8px 12px;text-decoration:none;color:var(--vb-tx);border-bottom:1px solid var(--vb-line)}
.vb-sug a:last-child{border-bottom:0}
.vb-sug a:hover,.vb-sug a.is-hot{background:var(--vb-soft,#e8f2fa)}
.vb-sug img{max-width:60px;max-height:22px;object-fit:contain;display:block;margin:0 auto}
.vb-sug .vb-sn{font:700 14px Roboto,sans-serif;line-height:1.25}
.vb-sug .vb-ss{font:12px Roboto,sans-serif;color:var(--vb-mut)}
.vb-sug .vb-sq{font:700 13px Roboto,sans-serif;color:var(--vb-acc,#0170b9);font-variant-numeric:tabular-nums;white-space:nowrap}
.vb-sug .vb-snone{padding:18px;text-align:center;color:var(--vb-mut);font:13.5px Roboto,sans-serif}
/* компактный вид: только логотип, имя и количество */
.vb--compact .vb-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:10px}
.vb--compact .vb-card{padding:10px 8px 9px;gap:7px;min-height:108px;justify-content:center;align-items:center}
.vb--compact .vb-logo{height:40px;border:0;background:transparent;padding:0;width:100%}
.vb--compact .vb-logo img{max-height:34px;max-width:96px}
.vb--compact .vb-head{flex-direction:column;align-items:center;gap:2px;text-align:center}
.vb--compact .vb-name{font-size:13px;line-height:1.25}
.vb--compact .vb-meta{font-size:11.5px}
.vb--compact .vb-subs,.vb--compact .vb-more,.vb--compact .vb-desc{display:none}
.vb--compact .vb-h2{margin-bottom:8px}
@media(max-width:640px){
  .vb-sbox{max-width:none;flex:1 1 100%}
  .vb-found{margin-left:0;width:100%}
  .vb-abc{min-width:34px;height:34px;font-size:13px}
  .vb-view button{padding:9px 15px}
  .vb-sug{max-height:min(58vh,430px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .vb-sug a{grid-template-columns:52px minmax(0,1fr) auto;gap:9px}
  .vb-sug img{max-width:48px}
  .vb--compact .vb-grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr))}
}