Блок «Вопрос-ответ» для сайта салона красоты

<section class="vbvds">
  <div class="vbvds-wrap">
    <div class="vbvds-head">
      <h2 class="vbvds-h2">Восемь вопросов о записи и визите</h2>
      <p class="vbvds-lead">Здесь то, что чаще всего уточняют администратору по телефону. Если вопрос остался, напишите в мессенджер салона, отвечаем до конца рабочего дня.</p>
    </div>

    <ul class="vbvds-list">
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">01</i><span>Как записаться и можно ли выбрать конкретного мастера?</span></button></h3>
        <div class="vbvds-a"><div><p>Запись открыта по телефону, в мессенджере и через виджет на сайте. Мастера выбираете сами: у каждого в профиле указаны специализация и свободные окна на две недели вперёд. Если мастер занят, администратор предложит ближайшее время у коллеги с той же квалификацией.</p></div></div>
      </li>
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">02</i><span>За сколько часов нужно предупредить о переносе?</span></button></h3>
        <div class="vbvds-a"><div><p>За 4 часа до начала визита, для окрашивания и сложных услуг за сутки: под них мастер резервирует несколько часов подряд и заранее заказывает состав. Перенос в эти сроки бесплатный и без ограничений по количеству.</p></div></div>
      </li>
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">03</i><span>Что будет, если я опоздаю на 15 минут?</span></button></h3>
        <div class="vbvds-a"><div><p>Придержим место 20 минут, дальше решает расписание мастера. Когда следом записан другой гость, услугу выполним в сокращённом объёме или предложим перенос на ближайшее окно. Позвоните по дороге, и мы посмотрим, что можно сдвинуть.</p></div></div>
      </li>
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">04</i><span>Делаете ли тест на аллергию перед окрашиванием?</span></button></h3>
        <div class="vbvds-a"><div><p>Да, для первого окрашивания и при смене марки красителя. Тест занимает 48 часов: состав наносится на сгиб локтя, реакцию проверяем перед процедурой. Предупредите администратора о хронических реакциях и приёме лекарств, это влияет на выбор состава.</p></div></div>
      </li>
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">05</i><span>Можно прийти со своими материалами?</span></button></h3>
        <div class="vbvds-a"><div><p>Со своим красителем работаем по запросу, стоимость услуги в этом случае снижается на цену состава. Гарантию на результат в такой работе мастер дать не сможет, потому что поведение чужого продукта на волосах предсказать сложно. Шампунь и уход приносить можно всегда.</p></div></div>
      </li>
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">06</i><span>Можно прийти с ребёнком?</span></button></h3>
        <div class="vbvds-a"><div><p>Да, в зале есть детский уголок с книгами и раскрасками рядом с зоной ожидания. Для долгих услуг лучше выбрать утро буднего дня: в это время в салоне тихо и свободнее места. Детей стрижём с трёх лет, запись к мастеру с детским опытом.</p></div></div>
      </li>
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">07</i><span>Какие способы оплаты принимаете?</span></button></h3>
        <div class="vbvds-a"><div><p>Карта, перевод по номеру телефона и наличные. Оплата принимается после услуги, предоплату просим только за сложные окрашивания дороже 10 000 рублей и за групповые сборы. Чек приходит на почту или в мессенджер по вашему выбору.</p></div></div>
      </li>
      <li class="vbvds-item">
        <h3><button type="button" class="vbvds-q" aria-expanded="false"><i class="vbvds-num" aria-hidden="true">08</i><span>Как работают подарочные сертификаты?</span></button></h3>
        <div class="vbvds-a"><div><p>Сертификат выпускается на сумму от 3 000 рублей, срок действия год с даты покупки. Потратить его можно на любые услуги и уход с витрины, остаток сохраняется на балансе до следующего визита. Владельца можно поменять до первого списания, достаточно сообщить администратору.</p></div></div>
      </li>
    </ul>
  </div>
</section>

<style>
.vbvds, .vbvds *, .vbvds *::before, .vbvds *::after { box-sizing: border-box; }
.vbvds {
  --acc: #7d5a86; --ink: #2a2430; --muted: #6f6673; --line: #ece5ef; --soft: #f8f4f9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: #fff; color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbvds-wrap { max-width: 840px; margin: 0 auto; }
.vbvds-head { text-align: center; max-width: 34em; margin: 0 auto clamp(24px, 3.2vw, 40px); }
.vbvds-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbvds-lead { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0; }

.vbvds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vbvds-item { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: border-color .2s ease, background .2s ease; }
.vbvds-item.is-open { border-color: var(--acc); background: var(--soft); }
.vbvds-item h3 { margin: 0; font-size: inherit; font-weight: inherit; }
.vbvds-q { display: flex; align-items: flex-start; gap: 14px; width: 100%; border: 0; margin: 0; -webkit-appearance: none; appearance: none;
  background: none !important; color: var(--ink) !important; cursor: pointer; font: inherit; text-align: left;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 26px); transition: color .18s ease; }
.vbvds-q:hover { color: var(--acc) !important; }
.vbvds-num { flex: 0 0 auto; font-style: normal; font-size: 12px; font-weight: 600; color: var(--acc); padding-top: 4px; letter-spacing: .04em; }
.vbvds-q > span { font-family: var(--fh); font-size: clamp(16px, 1.4vw, 18.5px); font-weight: 600; line-height: 1.4; }
.vbvds-q::after { content: ''; flex: 0 0 18px; width: 18px; height: 18px; margin-left: auto; margin-top: 3px;
  background: linear-gradient(var(--acc), var(--acc)) center/100% 2px no-repeat, linear-gradient(var(--acc), var(--acc)) center/2px 100% no-repeat;
  transition: transform .3s cubic-bezier(.22,1,.36,1); }
.vbvds-q[aria-expanded="true"]::after { transform: rotate(135deg); }
.vbvds-a { max-height: 0; overflow: hidden; transition: max-height .34s cubic-bezier(.22,1,.36,1); }
.vbvds-a > div { padding: 0 clamp(18px, 2.2vw, 26px) clamp(18px, 2.2vw, 24px) clamp(44px, 4.4vw, 52px); }
.vbvds-a p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--muted); }

@media (max-width: 520px) { .vbvds-a > div { padding-left: clamp(18px, 2.2vw, 26px); } }
@media (prefers-reduced-motion: reduce) { .vbvds-a, .vbvds-q::after, .vbvds-item { transition: none !important; } }
</style>

<script>
(function () {
  var OPEN_INDEX = 0;   /* какой ответ раскрыт при загрузке; -1 закрывает все */
  var ONE_OPEN = true;  /* true оставляет открытым только один ответ */

  var roots = document.querySelectorAll('.vbvds');
  for (var i = 0; i < roots.length; i++) init(roots[i]);

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var items = Array.prototype.slice.call(root.querySelectorAll('.vbvds-item'));

    function close(item) {
      item.classList.remove('is-open');
      item.querySelector('.vbvds-q').setAttribute('aria-expanded', 'false');
      item.querySelector('.vbvds-a').style.maxHeight = '0px';
    }
    function open(item) {
      item.classList.add('is-open');
      item.querySelector('.vbvds-q').setAttribute('aria-expanded', 'true');
      var pane = item.querySelector('.vbvds-a');
      pane.style.maxHeight = pane.scrollHeight + 'px';
    }

    items.forEach(function (item) {
      item.querySelector('.vbvds-q').addEventListener('click', function () {
        var isOpen = item.classList.contains('is-open');
        if (ONE_OPEN) items.forEach(close); else close(item);
        if (!isOpen) open(item);
      });
    });

    if (items[OPEN_INDEX]) open(items[OPEN_INDEX]);

    var t = null;
    window.addEventListener('resize', function () {
      clearTimeout(t);
      t = setTimeout(function () {
        items.forEach(function (item) {
          if (!item.classList.contains('is-open')) return;
          var pane = item.querySelector('.vbvds-a');
          pane.style.maxHeight = pane.scrollHeight + 'px';
        });
      }, 120);
    });
  }
})();
</script>

Вставляется целиком в блок T123 «HTML-код». Внутри уже есть стили и скрипт, подключать ничего не нужно.