/**
 * Собранные информационные страницы: «Доставка и оплата» и её родня.
 *
 * Отличие от .rich-text одно, но принципиальное: там текст читают подряд,
 * здесь его выхватывают взглядом. Поэтому карточки, крупные числа и иконки —
 * не украшение, а способ ответить на вопрос до того, как человек начнёт читать.
 */

.info-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ── Шапка страницы ──────────────────────────────────── */

.info-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);

  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.info-hero__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
}

@media (min-width: 768px) {
  .info-hero__title { font-size: var(--fs-4xl); }
}

/* Вступление держим узким: длинная строка через всю карточку читается
   тяжело, а картинка справа и так забирает половину ширины */
.info-hero__lead {
  margin: 0;
  max-width: 34rem;
  color: var(--color-text-soft);
  line-height: var(--lh-normal);
}

/* 24rem при исходных 620 px — полуторный запас на плотных экранах.
   Прежние 15rem остались от квадратного знака: широкая сюжетная
   иллюстрация в них ужималась до нечитаемой марки */
.info-hero__img {
  width: 24rem;
  max-width: 100%;
  height: auto;
}

/* Фото вместо рисунка: крупнее и с запасом на растушёванный край —
   у него по периметру ~10% прозрачности, и в прежние 24rem кадр
   ужимался до «рисунка в рамке из воздуха». */
.info-hero__img--photo {
  width: 32rem;
  margin: calc(var(--space-6) * -1) calc(var(--space-5) * -1);
}

/* Подзаголовок шапки — это обещание страницы, ради него сюда и зашли.
   Кегль между H1 и текстом: спорить с заголовком он не должен, но и
   потеряться среди абзацев ему нельзя. */
.info-hero__sub {
  margin: 0 0 var(--space-4);
  max-width: 34rem;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.info-hero__lead + .info-hero__lead {
  margin-top: var(--space-3);
}

/* ── Три опоры (страница «О компании») ───────────────── */

.info-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.info-pillar {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* margin-inline: auto обязателен. В base.css у svg стоит display: block,
   и text-align: center у карточки на него уже не действует — знак уезжает
   к левому краю, а заголовок с текстом остаются по центру */
.info-pillar__icon {
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto var(--space-4);
  color: var(--color-primary);
}

.info-pillar__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.info-pillar__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ── Заголовок с линейками ───────────────────────────── */

/* Линейки рисуем на псевдоэлементах гибкой ширины: заголовок остаётся
   обычным текстом, а не картинкой, и переносится как надо */
.info-rule {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

.info-rule::before,
.info-rule::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--color-primary-light);
}

/* ── Основания доверия ───────────────────────────────── */

.info-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* По центру, а не по верху: текст здесь в одну-две строки, и прижатый к верху
   знак висел бы над пустотой — карточка читалась бы кривой */
.info-fact {
  display: flex;
  align-items: center;
  gap: var(--space-5);

  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/*
 * Знак крупный и без плашки. В тонированном квадрате он был вдвое мельче
 * и читался как служебная иконка списка, а это единственная картинка
 * в карточке — ей и держать внимание. Начертание облегчаем: у материальных
 * знаков штрих по умолчанию толще линии, которой нарисованы иконки выше,
 * и рядом они выглядели бы из разных наборов.
 */
.info-fact__icon {
  display: grid;
  place-items: center;
  flex: none;
  color: var(--color-primary);
}

.info-fact__icon svg {
  width: 2.75rem;
  height: 2.75rem;
}

.info-fact__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.info-fact__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* ── Плашка с картинкой ──────────────────────────────── */

.info-banner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
}

.info-banner__img {
  flex: none;
  width: 8rem;
  height: 8rem;
}

.info-banner__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

.info-banner p {
  margin: 0;
  color: var(--color-text-soft);
  line-height: var(--lh-normal);
}

/* ── Контакты и призыв ───────────────────────────────── */

.info-block--tint {
  background: var(--color-primary-light);
  border-color: transparent;
}

.info-block__text {
  margin: 0 0 var(--space-5);
  color: var(--color-text-soft);
  line-height: var(--lh-normal);
}

.info-contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-contacts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.info-contacts__icon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-primary);
}

.info-contacts a {
  color: var(--color-primary);
}

.info-contacts a:hover {
  text-decoration: underline;
}

.info-contacts__strong {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

/* ── Предупреждение ──────────────────────────────────── */

/* Не красная плашка: это обязательная оговорка, а не тревога. Красным
   она кричала бы громче самого содержания страницы. */
.info-warning {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);

  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.info-warning__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-primary);
}

/* ── Гарантия и сервис ───────────────────────────────── */

.info-section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

/* Срок гарантии плашкой: в абзаце цифра терялась между «зависит от модели»
   и «указан в талоне», а ищут глазами именно её */
.info-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);

  margin: 0 0 var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
}

.info-badge__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-primary);
}

.info-badge__label {
  display: block;
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
}

.info-badge__value {
  display: block;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-primary);
}

/* ── Что сохранить ───────────────────────────────────── */

.info-saves {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.info-save {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.info-save__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-primary);
}

.info-save__title {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.info-save__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ── Покрывает / не покрывает ────────────────────────── */

/*
 * Правая колонка не красная, а тёплая: красным кричат об ошибке, а здесь
 * просто перечень случаев, за которые не платит производитель. Слишком
 * яркая колонка читалась бы как отказ ещё до покупки.
 */
.info-block--yes {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
}

.info-block--no {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
}

.info-marks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-marks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-soft);
  line-height: var(--lh-snug);
}

.info-marks__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.15em;
}

.info-block--yes .info-marks__icon { color: var(--color-success); }
.info-block--no .info-marks__icon { color: var(--color-accent-dark); }

/* ── Шаги ────────────────────────────────────────────── */

.info-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.info-step {
  position: relative;
  text-align: center;
}

/* Пунктир между шагами рисуем псевдоэлементом соседа, а не отдельной
   разметкой: у последнего шага его быть не должно, и это единственное
   место, где такое условие выражается без лишнего <span> */
/*
 * Пунктир тянем от кружка к кружку, а не от края колонки к краю: колонки
 * широкие, кружки узкие, и по краям получались бы четыре коротких чёрточки
 * далеко от знаков — связи между шагами они не читали.
 * Отсчёт: центр соседнего кружка левее на «половину своей колонки + зазор
 * + половину этой», минус радиус самого кружка (4.5rem / 2) и немного воздуха.
 */
.info-step + .info-step::before {
  content: '';
  position: absolute;
  top: 2.25rem;
  left: calc(-50% - var(--space-5) + 2.75rem);
  right: calc(50% + 2.75rem);
  border-top: 2px dotted var(--color-border-strong);
}

.info-step__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto var(--space-3);

  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}

.info-step__mark svg {
  width: 2rem;
  height: 2rem;
}

.info-step__num {
  position: absolute;
  top: -0.375rem;
  left: -0.375rem;

  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;

  background: var(--color-primary);
  border-radius: var(--radius-full);
  box-shadow: 0 0 0 3px var(--color-surface);
  color: var(--color-text-invert);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.info-step__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.info-step__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* ── Строка со сроком ────────────────────────────────── */

.info-term-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  margin: 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);

  color: var(--color-text-soft);
  line-height: var(--lh-snug);
}

.info-term-line__icon {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
}

.info-term-line strong {
  color: var(--color-text);
}

/* ── Блок помощи ─────────────────────────────────────── */

.info-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);

  padding: var(--space-6) var(--space-8);
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
}

.info-help__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
}

.info-help__text p {
  margin: 0;
  color: var(--color-text-soft);
  line-height: var(--lh-normal);
}

.info-help__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.info-help__phone svg {
  width: 1.5rem;
  height: 1.5rem;
}

.info-help__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.info-help__img {
  flex: none;
  width: 11rem;
  height: 11rem;
}

/* ── Переход на соседнюю страницу ────────────────────── */

.info-next {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.info-next:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow);
}

.info-next__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}

.info-next__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.info-next__body {
  flex: 1;
}

.info-next__title {
  display: block;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.info-next__text {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.info-next__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* ── Сроки ───────────────────────────────────────────── */

.info-terms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.info-term {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* 3rem: штриховая иконка держит форму и на мелком, в отличие от растровой,
   которой раньше нужны были все 4rem, чтобы не превратиться в кашу */
.info-term__icon {
  flex: none;
  width: 3rem;
  height: 3rem;
}

.info-term__title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

/* Срок — главное на карточке, поэтому он крупнее заголовка и цветной:
   его ищут глазами, а «Москва и МО» только подсказывает, куда смотреть */
.info-term__value {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.info-term__label {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-faint);
}

/* ── Две колонки: стоимость и оплата ─────────────────── */

.info-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.info-block {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.info-block__title {
  margin: 0 0 var(--space-5);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

/* Порог бесплатной доставки — единственная цифра, ради которой сюда заходят.
   Отдельная плашка, потому что в списке она терялась третьей строкой. */
.info-free {
  display: flex;
  align-items: center;
  gap: var(--space-4);

  margin: 0 0 var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
}

.info-free__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-primary);
}

.info-free__text {
  display: flex;
  flex-direction: column;
  line-height: var(--lh-tight);
}

.info-free__strong {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}

.info-free__from {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}

.info-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: var(--color-text-soft);
  line-height: var(--lh-snug);
}

.info-checks__mark {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;   /* к первой строке, а не к её середине */
  color: var(--color-primary);
}

.info-checks strong {
  color: var(--color-text);
}

/* ── Способы оплаты ──────────────────────────────────── */

.info-pays {
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-pay {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border-soft);
}

/* Первую строку не подчёркиваем сверху: там уже заголовок блока */
.info-pay:first-child {
  padding-top: 0;
  border-top: 0;
}

.info-pay:last-child {
  padding-bottom: 0;
}

.info-pay__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  background: var(--color-primary-light);
  border-radius: var(--radius);
  color: var(--color-primary);
}

.info-pay__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.info-pay__title,
.info-pay__text {
  display: block;
}

.info-pay__title {
  font-weight: var(--fw-semibold);
}

.info-pay__text {
  margin-top: 0.125rem;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* ── Проверка и возврат ──────────────────────────────── */

.info-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);

  padding: var(--space-6);
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
}

.info-note__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  color: var(--color-text-invert);
}

.info-note__icon svg {
  width: 2rem;
  height: 2rem;
}

.info-note__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

.info-note__body p {
  margin: 0 0 var(--space-1);
  color: var(--color-text-soft);
  line-height: var(--lh-normal);
}

.info-note__body p:last-child {
  margin-bottom: 0;
}

.info-note__body a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
}

.info-note__body a:hover {
  text-decoration: underline;
}

/* ── Нижняя лента обещаний ───────────────────────────── */

.info-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);

  margin: 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.info-strip__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.info-strip__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
}

/* ── Планшет ─────────────────────────────────────────── */

@media (max-width: 63.9375rem) {
  .info-terms {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  }

  .info-cols,
  .info-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-pillars,
  .info-saves {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .info-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }

  /* В две строки пунктир между шагами соединял бы четвёртый со вторым
     через весь блок — убираем */
  .info-step + .info-step::before {
    display: none;
  }

  .info-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── Телефон ─────────────────────────────────────────── */

/* Правило ниже базового намеренно: при равной специфичности выигрывает
   последнее, и перенесённый выше @media молча перестал бы работать */
@media (max-width: 47.9375rem) {
  .info-page {
    gap: var(--space-4);
  }

  .info-saves,
  .info-steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Шаги в колонку: знак слева, текст справа — иначе четыре центрированных
     блока подряд читаются как четыре отдельные карточки, а это один путь */
  .info-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    text-align: left;
  }

  .info-step__mark {
    grid-row: 1 / 3;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
  }

  .info-step__mark svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .info-term-line,
  .info-help {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .info-help__title {
    font-size: var(--fs-2xl);
  }

  .info-help__img {
    align-self: center;
    width: 8rem;
    height: 8rem;
  }

  .info-next {
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-5);
  }

  .info-next__go {
    width: 100%;
    justify-content: flex-end;
  }

  .info-badge,
  .info-section-title {
    width: 100%;
  }

  .info-section-title {
    font-size: var(--fs-xl);
  }

  /* Картинку убираем, а не ужимаем: на 375 px она отъедает экран, а вся
     польза страницы — в цифрах под ней */
  .info-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-6) var(--space-5);
  }

  .info-hero__img {
    display: none;
  }

  .info-terms {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-term {
    padding: var(--space-4) var(--space-5);
  }

  .info-block {
    padding: var(--space-5);
  }

  .info-note {
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .info-note__icon {
    width: 3rem;
    height: 3rem;
    font-size: 1.5rem;
  }

  .info-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .info-hero__sub {
    font-size: var(--fs-xl);
  }

  .info-pillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-pillar {
    padding: var(--space-5);
  }

  /* Заголовок с линейками по бокам на узком экране остаётся без них:
     на две линейки и текст ширины уже нет, и линейки схлопываются в точки */
  .info-rule {
    font-size: var(--fs-xl);
  }

  .info-rule::before,
  .info-rule::after {
    display: none;
  }

  /* Картинка над текстом, а не сбоку: в строку они ужимают друг друга
     до нечитаемого */
  .info-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-5);
  }

  .info-banner__img {
    width: 5rem;
    height: 5rem;
  }
}

/* ── Контакты ────────────────────────────────────────── */

.info-channels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.info-channel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);

  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}

.info-channel__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-2);
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}

.info-channel__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.info-channel__title {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

/* Значение крупнее заголовка: заголовок подсказывает канал, а номер и адрес —
   то, ради чего сюда пришли. Перенос внутри слова, иначе длинная почта
   вылезает за карточку */
.info-channel__value {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.info-channel__note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* Кнопка прижата к низу: у карточек разное число строк, и без этого
   три кнопки стояли бы лесенкой */
.info-channel__btn {
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Карточка мессенджеров: WhatsApp, MAX и Telegram (23.09.2026).
   Три обычные кнопки друг под другом растянули бы карточку вдвое против
   соседних, поэтому они стоят в ряд и по высоте занимают место одной.
   auto-fit, а не repeat(3): если у продавца останется один мессенджер,
   кнопка растянется на всю ширину сама, без отдельного правила. */
.info-channel__apps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-3);
}

/* Значок над подписью, а не рядом: «WhatsApp» в колонке шириной в треть
   карточки рядом со значком переносится по буквам. */
.info-channel__app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);

  min-height: 3.5rem;
  padding: var(--space-2) var(--space-1);
  background: var(--color-primary);
  border-radius: var(--radius);
  color: var(--color-text-invert);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  text-decoration: none;
  transition: background-color var(--transition, 0.15s ease);
}

.info-channel__app:hover,
.info-channel__app:focus-visible {
  background: var(--color-primary-dark);
  color: var(--color-text-invert);
}

.info-channel__app-mark {
  display: grid;
  place-items: center;
}

.info-channel__app-mark svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Адрес ───────────────────────────────────────────── */

.info-address {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);

  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.info-address__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  background: var(--color-primary-light);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}

.info-address__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.info-address__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.info-address__value {
  margin: 0;
  line-height: var(--lh-snug);
}

.info-address__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.info-address__note-icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-primary);
}

.info-address__route {
  flex: none;
  gap: var(--space-2);
  white-space: nowrap;
}

.info-address__route svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Реквизиты ───────────────────────────────────────── */

.info-legal {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.info-legal__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.info-legal__title {
  margin: 0;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

.info-legal__copy {
  gap: var(--space-2);
}

.info-legal__copy svg {
  width: 1.125rem;
  height: 1.125rem;
}

.info-legal__list {
  margin: 0;
}

.info-legal__row {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);

  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
}

.info-legal__row:first-child {
  border-top: 0;
}

.info-legal__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.info-legal__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-primary);
}

.info-legal__value {
  margin: 0;
  font-weight: var(--fw-medium);
  overflow-wrap: anywhere;
}

.info-legal__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;

  background: none;
  border: 0;
  border-radius: var(--radius);
  color: var(--color-text-faint);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.info-legal__btn:hover {
  background: var(--color-surface-subtle);
  color: var(--color-primary);
}

.info-legal__btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Подтверждение копирования: без него непонятно, сработало ли нажатие */
.info-legal__btn.is-copied,
.info-legal__copy.is-copied {
  color: var(--color-success);
}

/* ── Как сделать заказ ───────────────────────────────── */

.info-order {
  padding: var(--space-6);
  background: var(--color-primary-light);
  border-radius: var(--radius-xl);
}

.info-steps--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-order .info-step__mark {
  background: var(--color-surface);
}

.info-order__cta {
  margin: var(--space-6) 0 0;
  text-align: center;
}

/* ── Форма и чем поможем ─────────────────────────────── */

.info-write {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

/* Поля в одну колонку: форма стоит в половине ширины, и её собственная
   раскладка в два столбца ужала бы каждое поле до нечитаемого */
.info-write .lead__grid {
  grid-template-columns: minmax(0, 1fr);
}

.info-write .lead-section {
  margin-block: 0;
}

.info-write__aside {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.info-write__img {
  display: block;
  width: 9rem;
  height: 9rem;
  margin: 0 auto var(--space-5);
}

.info-write__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-write__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.info-write__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--color-primary-light);
  border-radius: var(--radius);
  color: var(--color-primary);
}

.info-write__icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.info-write__title {
  display: block;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.info-write__text {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

@media (max-width: 63.9375rem) {
  .info-channels,
  .info-write {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-address {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .info-address__route {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .info-legal__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .info-legal__label {
    grid-column: 1 / -1;
  }
}

@media (max-width: 47.9375rem) {
  .info-steps--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-order,
  .info-legal,
  .info-address,
  .info-write__aside {
    padding: var(--space-5);
  }

  .info-address {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-address__icon {
    display: none;   /* на 375 px кружок съедает треть строки адреса */
  }
}

/* ── Возврат и обмен ─────────────────────────────────── */

.info-hero--tint {
  background: var(--color-primary-light);
  border-color: transparent;
}

/* Сроки плашками в шапке: цифра — то, за чем сюда пришли, и в абзаце
   «в течение семи дней» она читается втрое дольше */
.info-terms-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-terms-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius);
  line-height: var(--lh-snug);
}

.info-terms-list__icon {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-primary);
}

.info-terms-list strong {
  font-size: var(--fs-lg);
}

/* ── Два сценария ────────────────────────────────────── */

.info-case {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.info-case__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-full);
  color: var(--color-text-invert);
}

.info-case__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Разный цвет кружка — единственное, что отличает два столбца с первого
   взгляда: заголовки длинные и читаются вторыми */
.info-case__icon--good { background: var(--color-primary); }
.info-case__icon--fix { background: var(--color-accent-dark); }

.info-case__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
}

.info-case__lead {
  margin: 0 0 var(--space-5);
  color: var(--color-text-soft);
  line-height: var(--lh-normal);
}

.info-claims {
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-claims li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border-soft);
  line-height: var(--lh-snug);
}

.info-claims li:first-child {
  border-top: 0;
  padding-top: 0;
}

.info-claims__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-primary);
}

.info-claims__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* ── Предупреждение о медизделиях ────────────────────── */

.info-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);

  padding: var(--space-5) var(--space-6);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-lg);
}

.info-alert__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-warning);
}

.info-alert__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.info-alert p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* Контакты внутри шага: без них первый шаг просит связаться и не говорит как */
.info-step__contacts {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0 0 var(--space-1);
}

.info-step__contacts a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.info-step__contacts a:hover {
  text-decoration: underline;
}

@media (max-width: 47.9375rem) {
  .info-terms-list li {
    width: 100%;
    padding: var(--space-3) var(--space-4);
  }

  .info-case {
    padding: var(--space-5);
  }

  .info-alert {
    padding: var(--space-4) var(--space-5);
  }
}