/* Аккордеон (Figma «Screen 4/pc»: 611:4124 на странице товара, 611:4973 на FAQ).
   Строка — белая плашка 88 высотой, padding 34/16, заголовок Rubik Bold 18,
   стрелка 56×56 у правого края с шевроном вниз. У раскрытой строки стрелка смотрит влево.
   Под MODX — отдельный чанк. Позицию блока и содержимое строк задаёт страница.

   Содержимое строк лежит в ПОТОКЕ (flex), а не абсолютом: высота раскрытой строки
   зависит от объёма ответа. Аккордеон в ПОТОКЕ: позиционируется в flex-колонке
   контейнера страницы, ширина 100%, высота по содержимому. Раскрытие строк
   увеличивает высоту блока и отодвигает элементы снизу. Абсолют остаётся только
   у стрелки внутри строки (атом UI-кита). */
.acc {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.acc__row {
  position: relative;
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* Кликабельная шапка строки. Это <button>, поэтому сбрасываем стили кнопки.
   Высота 88 из макета держится min-height, а не height: заголовок в mb переносится
   на две строки и должен уметь раздвинуть шапку. */
.acc__head {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 16px 90px 16px 34px;  /* справа место под стрелку 56 + 34 */
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.acc__title {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: var(--black);
}

/* В pc заголовки строк в макете в одну строку */
.acc__row:not(.acc__row--open) .acc__title {
  white-space: nowrap;
}

.acc__arrow {
  top: 16px;
  right: 34px;
  transform: rotate(90deg);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Раскрытая строка: стрелка смотрит направо. Иконка Alt Arrow Right в исходном
   виде направлена вправо, поэтому поворот снимается. */
.acc__row--open .acc__arrow {
  transform: rotate(0deg);
}

/* Панель ответа. Закрыта — grid-строка 0fr, открыта — 1fr: так анимируется переход
   к высоте по содержимому, чего height: auto не умеет. Fallback для браузеров без
   interpolate-size не нужен: grid-template-rows анимируется во всех целевых. */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

.acc__row--open .acc__panel {
  grid-template-rows: 1fr;
}

/* Внутренняя обёртка обязательна: анимируемая grid-строка не может иметь padding,
   иначе в закрытом состоянии останется его высота. */
.acc__panel-inner {
  overflow: hidden;
}

/* Содержимое ответа: отступы из макета (левый 44 = 34 padding строки + 10,
   низ 33 как у раскрытой строки в Figma). */
.acc__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 34px 33px 44px;
  opacity: 0;
  transition: opacity 0.28s ease 0.04s;
}

.acc__row--open .acc__body {
  opacity: 1;
}

/* Абзац ответа: типографика из макета раскрытой строки */
.acc__text {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

@media (max-width: 1199px) {
  /* mb: блок по ширине контейнера (362), зазор 10 */
  .acc {
    width: 100%;
    gap: 10px;
  }

  /* mb: заголовок переносится, шапка ниже; padding справа под стрелку 56 + 16 */
  .acc__head {
    padding: 16px 72px 16px 34px;
  }

  .acc__row:not(.acc__row--open) .acc__title {
    white-space: normal;
  }

  /* В mb стрелка стоит на 16 (611:4809, 611:4896) */
  .acc__arrow {
    top: 16px;
    right: 16px;
  }

  .acc__body {
    gap: 16px;
    padding: 0 16px 24px 34px;
  }

  .acc__text {
    font-size: 14px;
    line-height: 20px;
  }
}