/* =========================================================
   remont-auto-catalog.css  •  сетка карточек марок
========================================================= */
:root{
  --page-bg:#111;
  --card-bg:#222;
  --blue:#fff;
  --blue-hov:#0948b5;
  --txt-main:#eb5d1e; /* оранжевый текст по умолчанию */
  --txt-muted:#fff;
  --radius:12px;
  --gap-y:40px;
  --gap-x:28px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

body{margin:0;background:var(--page-bg);color:var(--txt-main)}

/* контейнер страницы */
.brand-page{
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}

/* ---------- Сетка ---------- */
.brand-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(225px,1fr));
  gap:var(--gap-y) var(--gap-x);
  padding:40px 0;                   /* отступы сверху/снизу */
}

/* ---------- Карточка ---------- */
.brand-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  transition:.25s;
  outline:none;
}
.brand-card:hover,
.brand-card.is-hover{
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transform:translateY(-4px);
}

/* изображение */
.brand-card__img{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;
}
.brand-card__img img{
  width:100%;height:100%;object-fit:cover;
}

/* текст */
.brand-card__body{padding:18px 22px 24px}
.brand-card__cat{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--txt-muted);
  margin-bottom:6px;
  padding-left:8px;
}
.brand-card__title{
  font:600 15px/1.35 sans-serif;
  color:var(--txt-main);            /* оранжевый */
  padding-left:8px;
  transition:color .2s;
}
.brand-card:hover .brand-card__title,
.brand-card.is-hover .brand-card__title{
  color:var(--blue);               /* синий при наведении */
}

/* ---------- Адаптив ---------- */
@media (max-width:640px){
  .brand-page{padding:0 20px}
  .brand-cards{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:32px 20px;
    padding:24px 0;
  }
}
@media (max-width:480px){
  .brand-cards{grid-template-columns:1fr;padding:16px 0}
  .brand-card{flex-direction:row}
  .brand-card__img{
    flex:0 0 120px;
    aspect-ratio:1/1;
    border-radius:var(--radius) 0 0 var(--radius);
  }
  .brand-card__body{padding:14px 16px}
}
/* ——— Жёстко принуждаем сетку только на каталоге марок ——— */
.brand-cards{
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) !important;
  width: 100% !important;          /* на случай, если теме задана узкая ширина */
}