/* ---------- страница брендов ---------- */
.brands-hero{
  overflow:hidden;
  padding-bottom:48px;
  color:#fff;
  background:
    radial-gradient(circle at 82% 22%,rgba(0,128,255,.24),transparent 34%),
    linear-gradient(135deg,#07111e 0%,#0b1c2d 62%,#0c2942 100%);
}
.brands-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(106,174,229,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(106,174,229,.06) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(90deg,transparent 25%,#000 100%);
}
.brands-hero::after{border-bottom-color:rgba(130,170,220,.15)}
.brands-hero__inner{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.brands-hero .crumbs{margin-bottom:26px;color:#8fa6bd}
.brands-hero .crumbs a{color:#b8c9da}
.brands-hero .crumbs a:hover{color:#fff}
.brands-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:14px;color:#62b9ff;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.brands-eyebrow::before{content:'';width:22px;height:2px;background:var(--blue);border-radius:2px}
.brands-hero h1{max-width:780px;margin:0;color:#fff;font-size:clamp(34px,4.4vw,56px);letter-spacing:.01em}
.brands-hero .lead{max-width:680px;margin-top:18px;color:#b4c5d6;font-size:13.5px;line-height:1.75}
.brands-hero__stat{flex:0 0 190px;display:flex;align-items:center;gap:16px;padding:18px 0 18px 24px;border-left:1px solid rgba(143,184,220,.25)}
.brands-hero__stat strong{font-family:var(--font-head);font-size:70px;font-weight:600;line-height:.9;color:#fff}
.brands-hero__stat span{color:#9db2c6;font-size:11px;line-height:1.55;text-transform:uppercase;letter-spacing:.06em}
.brands-catalog{padding:32px 0 82px;background:var(--bg)}
.brands-toolbar{display:flex;align-items:center;gap:18px;margin-bottom:22px}
.brands-search{position:relative;display:block;flex:1;max-width:520px}
.brands-search svg{position:absolute;left:17px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#6e8297;pointer-events:none}
.brands-search input{
  width:100%;height:50px;padding:0 18px 0 48px;background:#fff;border:1px solid var(--line2);border-radius:12px;
  font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s;
}
.brands-search input::placeholder{color:#8996a5}
.brands-search input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,128,255,.1)}
.brands-toolbar__count{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.brand-grid{list-style:none!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0}
.brand-grid>li{min-width:0;margin:0;padding:0}
.brand-grid>li[hidden]{display:none!important}
.brand-card{
  position:relative;height:100%;min-height:184px;padding:18px;display:flex;flex-direction:column;gap:18px;
  background:#fff;border:1px solid #e0e6ed;border-radius:14px;overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.brand-card::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.brand-card:hover{border-color:#a9cdef;box-shadow:0 14px 34px rgba(16,47,78,.1);transform:translateY(-3px)}
.brand-card:hover::before{transform:scaleX(1)}
.brand-logo{width:100%;height:84px;flex:none;display:flex;align-items:center;justify-content:center;padding:10px 12px;background:#fafcfd;border:1px solid #edf1f5;border-radius:10px;overflow:hidden}
.brand-logo img{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
.brand-logo--dark{padding:14px;background:linear-gradient(145deg,#101e2d,#060c14);border-color:#142739}
.brand-meta{min-width:0;margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.brand-name{min-width:0;font-family:var(--font-head);font-size:19px;font-weight:600;line-height:1.22;text-transform:uppercase;overflow-wrap:anywhere}
.brand-count{flex:none;color:var(--muted);font-size:10.5px;line-height:1.4;white-space:nowrap}
.brand-count::after{content:' →';color:var(--blue);font-size:14px}
.brand-empty{padding:44px 22px;text-align:center;background:#fff;border:1px dashed var(--line2);border-radius:14px}
.brand-empty[hidden]{display:none}
.brand-empty h2{font-size:24px;text-transform:none}
.brand-empty p{margin:8px 0 18px;color:var(--muted)}
.brands-help{
  position:relative;overflow:hidden;margin-top:34px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;
  color:#fff;background:linear-gradient(135deg,#091726,#10314e);border:1px solid #1d3b56;border-radius:16px;
}
.brands-help::after{content:'';position:absolute;right:18%;top:-90px;width:240px;height:240px;border-radius:50%;background:rgba(0,128,255,.12);pointer-events:none}
.brands-help__content{position:relative;z-index:1}
.brands-help h2{font-size:25px;text-transform:none;letter-spacing:.01em}
.brands-help p{max-width:640px;margin-top:8px;color:#adc1d4;font-size:12.5px;line-height:1.7}
.brands-help .btn{position:relative;z-index:1;flex:none;min-height:46px}
@media (max-width:1120px){.brand-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){
  .brands-hero__inner{align-items:flex-start;gap:28px}
  .brands-hero__stat{flex-basis:155px;padding-left:18px}
  .brands-hero__stat strong{font-size:56px}
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .brands-hero{padding-bottom:36px}
  .brands-hero__inner{display:block}
  .brands-hero .crumbs{margin-bottom:22px}
  .brands-hero h1{font-size:34px}
  .brands-hero .lead{font-size:12.5px}
  .brands-hero__stat{width:fit-content;margin-top:24px;padding:12px 0 0;border-left:0;border-top:1px solid rgba(143,184,220,.25)}
  .brands-hero__stat strong{font-size:44px}
  .brands-hero__stat span br{display:none}
  .brands-catalog{padding:22px 0 58px}
  .brands-toolbar{align-items:stretch;flex-direction:column;gap:10px;margin-bottom:16px}
  .brands-search{max-width:none}
  .brands-toolbar__count{margin-left:2px}
  .brand-grid{grid-template-columns:1fr;gap:10px}
  .brand-card{min-height:108px;padding:14px;flex-direction:row;align-items:center;gap:16px}
  .brand-logo{width:122px;height:66px;flex:0 0 122px;padding:8px}
  .brand-logo--dark{padding:11px}
  .brand-meta{margin-top:0;display:block}
  .brand-name{font-size:18px}
  .brand-count{display:block;margin-top:6px}
  .brands-help{padding:24px 20px;align-items:flex-start;flex-direction:column;gap:18px}
  .brands-help h2{font-size:22px}
  .brands-help .btn{width:100%;white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .brand-card,.brand-card::before,.brands-search input{transition:none}
  .brand-card:hover{transform:none}
}