/* ============================================
   СТРАНИЦА «ЗАПРЕЩЁННЫЕ И ОГРАНИЧЕННЫЕ ТОВАРЫ»
   Два блока: что нельзя совсем и что можно,
   но только после согласования с менеджером.
   ============================================ */

.cats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Ограниченные категории идут по три — в них есть пояснение */
.cats--limited {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: 18px;
  background: #F1F1F4;
  font-size: 0.96875rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
  /* Длинные слова вроде «легковоспламеняющиеся» иначе
     вылезают за плитку на узком экране */
  overflow-wrap: break-word;
}

/* Ограниченные — белые с обводкой, чтобы отличались от запрещённых */
.cat--limited {
  background: var(--color-surface);
  border: 1.5px solid #E7EAF2;
}

.cat__note {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: var(--fw-regular);
  line-height: 1.45;
  color: var(--color-ink-soft);
}

.cats-note {
  margin: var(--space-5) 0 0;
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* --------------------------------------------
   Чёрная карточка «Не уверены по своему товару?»
   -------------------------------------------- */
.ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10);
}

.ask__title {
  margin: 0;
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.ask__text {
  margin: var(--space-3) 0 0;
  max-width: 660px;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-on-brand-muted);
}

/* ============================================
   АДАПТИВ
   ============================================ */

@media (max-width: 1100px) {
  .cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cats,
  .cats--limited {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Кнопка уезжает под текст, иначе она сжимается в полоску */
  .ask {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }
}

@media (max-width: 768px) {
  .cat {
    padding: var(--space-4);
    font-size: 0.90625rem;
  }

  .cat svg {
    width: 44px;
    height: 44px;
  }

  .ask .btn {
    width: 100%;
  }
}

@media (max-width: 420px) {
  /* На самых узких экранах две колонки рвут слова —
     оставляем один столбец */
  .cats,
  .cats--limited {
    grid-template-columns: 1fr;
  }
}