/* RIDS EMPIRE — каталожные разделы. Один файл на все листинги, кешируется. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#F8FAFC;color:#0F172A;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
a{color:#1D4ED8;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid #1D4ED8;outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}

/* шапка */
.bar{background:#0F172A;color:#fff;position:sticky;top:0;z-index:20}
.bar .wrap{display:flex;align-items:center;gap:18px;height:56px}
.bar a{color:#fff}
.logo{font-weight:700;letter-spacing:.3px;font-size:16px;white-space:nowrap}
.logo span{color:#93C5FD;font-weight:500}
.bar nav{display:flex;gap:16px;font-size:13.5px;margin-left:auto;flex-wrap:wrap}
.bar nav a{color:#CBD5E1}
.bar .tel{font-weight:600;white-space:nowrap}

/* хлебные крошки */
.crumbs{font-size:12.5px;color:#64748B;padding:12px 0}
.crumbs a{color:#64748B}
.crumbs b{color:#0F172A;font-weight:600}

/* заголовок раздела */
.head{background:#fff;border:1px solid #E2E8F0;border-radius:12px;padding:22px 24px;margin-bottom:16px}
.head h1{margin:0 0 8px;font-size:clamp(21px,2.6vw,29px);line-height:1.2;letter-spacing:-.3px}
.head p{margin:0;color:#475569;font-size:14.5px;max-width:840px}
.head .meta{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px;font-size:12.5px}
.head .meta i{font-style:normal;background:#F1F5F9;border:1px solid #E2E8F0;
  border-radius:6px;padding:4px 10px;color:#334155}
.head .meta i b{color:#0F172A}

/* таблица-листинг */
.list{background:#fff;border:1px solid #E2E8F0;border-radius:12px;overflow:hidden}
.list table{width:100%;border-collapse:collapse;font-size:13.5px}
.list th{text-align:left;background:#F1F5F9;color:#475569;font-weight:600;
  font-size:11.5px;letter-spacing:.5px;text-transform:uppercase;
  padding:9px 14px;border-bottom:1px solid #E2E8F0;white-space:nowrap}
.list td{padding:9px 14px;border-bottom:1px solid #F1F5F9;vertical-align:top}
.list tr:last-child td{border-bottom:0}
.list tr:hover td{background:#F8FAFC}
.list .pn{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;color:#0F172A;white-space:nowrap}
.list .nm{color:#1D4ED8}
.list .br{color:#475569;white-space:nowrap}
.list .pr{text-align:right;white-space:nowrap;color:#0F172A;font-variant-numeric:tabular-nums}
.list .pr small{color:#94A3B8}

/* пагинация */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:18px 0 8px}
.pager a,.pager span{display:inline-block;min-width:36px;text-align:center;
  padding:7px 10px;border:1px solid #E2E8F0;border-radius:8px;background:#fff;
  font-size:13px;color:#334155}
.pager .cur{background:#0F172A;border-color:#0F172A;color:#fff;font-weight:600}
.pager .gap{border:0;background:transparent;color:#94A3B8;min-width:20px}

/* сетки ссылок */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:8px;margin:10px 0 4px}
.grid a{display:flex;justify-content:space-between;gap:8px;align-items:baseline;
  background:#fff;border:1px solid #E2E8F0;border-radius:9px;padding:10px 12px;
  font-size:13.5px;color:#0F172A}
.grid a:hover{border-color:#94A3B8;text-decoration:none}
.grid a em{font-style:normal;color:#94A3B8;font-size:12px;font-variant-numeric:tabular-nums}

h2.sec{font-size:17px;margin:26px 0 10px;letter-spacing:-.2px}

/* призыв к действию */
.cta{background:#0F172A;color:#fff;border-radius:12px;padding:22px 24px;margin:26px 0}
.cta h2{margin:0 0 6px;font-size:19px}
.cta p{margin:0 0 14px;color:#CBD5E1;font-size:14px;max-width:720px}
.cta a{display:inline-block;background:#2563EB;color:#fff;border-radius:8px;
  padding:10px 18px;font-weight:600;font-size:14px;margin-right:8px}
.cta a.alt{background:transparent;border:1px solid #475569}
.cta a:hover{text-decoration:none}

/* подвал */
footer{background:#0F172A;color:#94A3B8;margin-top:40px;padding:28px 0;font-size:13px}
footer a{color:#CBD5E1}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
footer b{color:#fff;display:block;margin-bottom:8px;font-size:13.5px}
footer .fl a{display:block;padding:2px 0}
footer .legal{border-top:1px solid #1E293B;margin-top:22px;padding-top:16px;font-size:12px}

@media(max-width:760px){
  .wrap{padding:0 14px}
  .bar .wrap{height:auto;padding-top:10px;padding-bottom:10px;flex-wrap:wrap;gap:10px}
  .bar nav{margin-left:0;width:100%;gap:12px}
  .head{padding:16px 16px}
  .list td,.list th{padding:8px 10px}
  .list .hide-s{display:none}
  .list table{font-size:13px}
}

/* ============================================================
   Раздел брендов — «указатель производителей»
   Тёмная витрина, алфавитный рейл, вес карточки от числа артикулов
   ============================================================ */
.bx{background:#0B1220;color:#E2E8F0;border-radius:16px;padding:30px 28px;margin:16px 0 22px;
  background-image:radial-gradient(600px 220px at 82% -12%,rgba(37,99,235,.30),transparent 62%),
                   radial-gradient(520px 200px at 6% 112%,rgba(234,179,8,.14),transparent 60%)}
.bx h1{margin:0 0 10px;font-size:clamp(23px,3vw,34px);color:#fff;letter-spacing:-.5px;line-height:1.14}
.bx p{margin:0;color:#94A3B8;font-size:14.5px;max-width:780px}
.bx .nums{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(148,163,184,.22)}
.bx .nums div{min-width:104px}
.bx .nums b{display:block;font-size:26px;color:#fff;line-height:1.1;
  font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.bx .nums span{display:block;font-size:11.5px;color:#93A3B8;margin-top:4px;
  text-transform:uppercase;letter-spacing:.8px}

/* алфавитный рейл */
.alpha{position:sticky;top:56px;z-index:10;background:#F8FAFC;
  padding:10px 0 9px;margin-bottom:6px;border-bottom:1px solid #E2E8F0;
  display:flex;flex-wrap:wrap;gap:4px}
.alpha a{display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;height:28px;padding:0 6px;border:1px solid #E2E8F0;border-radius:7px;
  background:#fff;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#334155}
.alpha a:hover{border-color:#2563EB;color:#1D4ED8;text-decoration:none}

.bgroup{margin:22px 0 4px;scroll-margin-top:104px}
.bgroup h2{display:flex;align-items:center;gap:12px;margin:0 0 10px;
  font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:#94A3B8;
  letter-spacing:2px}
.bgroup h2::after{content:"";flex:1;height:1px;background:#E2E8F0}

.brow{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:7px}
.brow a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  background:#fff;border:1px solid #E2E8F0;border-left:3px solid #CBD5E1;
  border-radius:9px;padding:10px 13px;color:#0F172A;font-size:13.5px;
  transition:border-color .14s,transform .14s}
.brow a:hover{border-color:#2563EB;border-left-color:#2563EB;transform:translateX(2px);
  text-decoration:none}
.brow a em{font-style:normal;color:#94A3B8;font-size:11.5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
/* вес по объёму номенклатуры */
.brow a.t1{border-left-color:#2563EB;background:linear-gradient(90deg,#EFF6FF,#fff 42%)}
.brow a.t1 em{color:#2563EB;font-weight:700}
.brow a.t2{border-left-color:#60A5FA}
.brow a.t2 em{color:#3B82F6}

/* паспорт бренда на его странице */
.bhead{background:#0B1220;color:#E2E8F0;border-radius:14px;padding:24px 26px;margin-bottom:14px;
  background-image:radial-gradient(520px 200px at 88% -20%,rgba(37,99,235,.28),transparent 60%)}
.bhead h1{margin:0 0 8px;color:#fff;font-size:clamp(22px,2.8vw,32px);letter-spacing:-.4px}
.bhead p{margin:0;color:#94A3B8;font-size:14.5px;max-width:820px}
.bhead .nums{display:flex;flex-wrap:wrap;gap:24px;margin-top:18px;padding-top:16px;
  border-top:1px solid rgba(148,163,184,.22)}
.bhead .nums b{display:block;font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.bhead .nums span{display:block;font-size:11px;color:#93A3B8;margin-top:3px;
  text-transform:uppercase;letter-spacing:.7px}

@media(max-width:760px){
  .bx{padding:20px 17px}.bx .nums{gap:16px}.bx .nums div{min-width:84px}
  .bx .nums b{font-size:21px}
  .alpha{top:0;overflow-x:auto;flex-wrap:nowrap}
  .bhead{padding:17px 16px}
}