/**
 * Ряд «С этим покупают».
 *
 * Своей карточки и своей сетки у блока нет — он берёт каталожные. Здесь
 * только то, чего в них не хватает: отбивка от того, что стоит выше, и
 * тонкая черта, чтобы в корзине ряд читался как отдельный разговор,
 * а не как продолжение списка покупок.
 */

.cross-sell {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

/* Подпись у заголовка длинная, и на среднем экране она вжимала заголовок
   в две строки — с этой ширины ставим их друг под друга */
@media (max-width: 61.9375rem) {
  .cross-sell .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 47.9375rem) {
  .cross-sell {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
  }

  .cross-sell .section-head__title {
    font-size: var(--fs-2xl);
  }
}