/* Страница «Ответы на частые вопросы». Figma: FAQ/pc 611:4965 (1920×2527), FAQ/mb 611:4872 (390×4451).
   Секция идёт сразу под шапкой (pc 89, mb 82) и кончается там, где начинается
   «Обратите внимание» (pc 1322, mb 1565).
   Переведена в вертикальный flex-поток: крошки → H1 → аккордеон.
   Зазоры выведены из фактических замеров границ в макете:
   - крошки до H1: 120.67px в pc (223 − 102.33), 61px в mb (157 − 96);
   - H1 до аккордеона: 72.67px в pc (381 − 308.33), 36px в mb (259 − 223);
   - аккордеон до блока «Обратите внимание»: padding-bottom 74.67px в pc (1322 − 1247.33),
     184px в mb (1565 − 1381).
   Декоративные блобы остаются на абсолютном позиционировании.
   Аккордеон — общий блок css/acc.css, крошки — css/crumbs.css, маркеры — css/dot-list.css.
   Спека со всеми значениями — log-figma.md §24–25. */
.faq {
  position: relative;
  padding-bottom: 74.67px;       /* зазор от низа аккордеона до блока «Обратите внимание» (1322 − 1247.33) */
}

/* Контейнер страницы в вертикальном потоке: крошки, H1 и аккордеон */
.faq .container {
  display: flex;
  flex-direction: column;
}

/* Блоб Ellipse 15 (611:4966): 1880×1472 на (20, 359) страницы → центр (960, 1095).
   SVG 2680×2272 (поле 400 под blur 200), центр (1340, 1136).
   Тот же файл, что у блоба каталога на главной и странице товара. */
.faq__blob {
  left: 50%;
  top: -130px;                   /* (1095 − 89) − 1136 */
  width: 2680px;
  height: 2272px;
  margin-left: -1340px;
}

/* Блоб mb-фрейма (611:4879) — только в mb */
.faq__blob--mb {
  display: none;
}

/* H1 (611:4968): 261/223, Rubik Bold 36px, жёсткий перенос после «частые».
   В потоке: margin-top 120.67px от низа крошек (223 − 102.33),
   margin-bottom 72.67px до аккордеона (381 − 308.33).
   white-space: normal, чтобы удлинение заголовка переносило строки и двигало аккордеон. */
.faq__h1 {
  margin: 120.67px 0 72.67px 0;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
}

/* В pc заголовок раскрытой строки в одну строку — переносы только в mb */
.faq__br {
  display: none;
}

/* Заголовок-«полка» внутри раскрытой строки (611:4989). В потоке: отступы задаёт
   .acc__body, здесь только типографика. */
.faq__eyebrow {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: var(--black);
}

/* Список (611:4990): в макете боксы пунктов имеют вертикальный зазор 10 и отступ
   маркера 27. В потоке это flex-колонка с gap, ширина строки — по контейнеру ответа. */
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0 0 0 27px;
}

.faq__list li {
  position: relative;
  font-size: 18px;
  line-height: 24px;
  color: var(--black);
}

/* Слайдер раскрытой строки есть только в mb */
.faq__slider {
  display: none;
}

@media (max-width: 1199px) {
  .faq {
    padding-bottom: 184px;       /* в mb зазор от низа аккордеона до «Обратите внимание» (1565 − 1381) */
  }

  .faq__blob {
    display: none;
  }

  /* Блоб Ellipse 14 (611:4879): 390×5946 на (0, 234) → центр (195, 3207).
     SVG 1190×6746 (rx 195, ry 2973), центр (595, 3373). Тот же файл, что на странице товара. */
  .faq__blob--mb {
    display: block;
    left: 50%;
    top: -248px;                 /* (3207 − 82) − 3373 */
    width: 1190px;
    height: 6746px;
    margin-left: -595px;
  }

  /* H1 (611:4874): 28/157 → 14 от контейнера, Rubik Bold 28px.
     В потоке: margin-top 61px от крошек (157 − 96), margin-bottom 36px до аккордеона (259 − 223),
     margin-left 14px от края контейнера (28 − 14). */
  .faq__h1 {
    margin: 61px 0 36px 14px;
    font-size: 28px;
  }

  /* Заголовки строк в mb переносятся по ширине, объявленной в инстансах:
     611:4882 → 237, 611:4885 → 184, 611:4888 → 218, 611:4891 → 179 */
  .acc__title {
    white-space: normal;
  }

  .acc__row:nth-child(1) .acc__title { width: 237px; }
  .acc__row:nth-child(2) .acc__title { width: 184px; }
  .acc__row:nth-child(3) .acc__title { width: 218px; }
  .acc__row:nth-child(4) .acc__title { width: 179px; }


  /* В mb заголовок раскрытой строки разбит на три строки жёсткими переносами (611:4894) */
  .faq__br {
    display: inline;
  }

  /* Заголовок-«полка» (611:4898): в mb переносится на две строки */
  .faq__eyebrow {
    max-width: 220px;
  }

  /* Список (611:4899): в mb отступ маркера 21, кегль 14/20 */
  .faq__list {
    gap: 16px;
    padding-left: 21px;
  }

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

  /* Слайдер (611:4897) в mb стоит под содержимым ответа, по центру блока */
  .faq__slider {
    display: block;
    width: 74px;
    height: 10px;
    margin: 4px auto 0;
  }
}