Прайс-лист автосервиса для сайта

<section class="vbpra">
  <div class="vbpra-wrap">
    <div class="vbpra-head">
      <h2 class="vbpra-h2">Прайс на работы</h2>
      <p class="vbpra-lead">Цены за работу без стоимости запчастей. Нормо-час — 1 800 ₽, итог по вашей машине считает мастер-приёмщик.</p>
      <div class="vbpra-search">
        <svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><circle cx="9" cy="9" r="6" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M13.5 13.5L17 17" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
        <input type="search" id="vbpra-q" placeholder="Найти работу: ГРМ, тормоза, сцепление" aria-label="Поиск по прайсу">
      </div>
      <p class="vbpra-count" id="vbpra-count" aria-live="polite"></p>
    </div>

    <div class="vbpra-body" id="vbpra-body"></div>
    <p class="vbpra-empty" id="vbpra-empty" hidden>Такой работы в прайсе нет. Позвоните — посчитаем по вашей машине.</p>
  </div>
</section>

<style>
.vbpra, .vbpra *, .vbpra *::before, .vbpra *::after { box-sizing: border-box; }
.vbpra {
  --acc: #ff8a1f; --bg: #fff; --panel: #f6f6f7; --ink: #17191c; --muted: #62676e; --line: #e4e6e9;
  --f: var(--t-text-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  --fh: var(--t-headline-font, var(--f));
  background: var(--bg); color: var(--ink); font-family: var(--f); padding: clamp(36px, 5vw, 80px) 20px;
}
.vbpra-wrap { max-width: 1000px; margin: 0 auto; padding: 0 clamp(0px, 2vw, 40px); }
.vbpra-head { margin-bottom: 24px; }
.vbpra-h2 { font-family: var(--fh); font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; font-weight: 700; letter-spacing: -.02em; margin: 0 0 12px; }
.vbpra-lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; max-width: 42em; }
.vbpra-search { position: relative; }
.vbpra-search svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.vbpra-search input { width: 100%; height: 54px; padding: 0 18px 0 48px; font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); }
.vbpra-search input:focus { outline: 2px solid var(--acc); outline-offset: -2px; background: var(--bg); }
.vbpra-count { margin: 10px 0 0; font-size: 13px; color: var(--muted); min-height: 18px; }

.vbpra-sec { margin-bottom: 26px; }
.vbpra-sec[hidden] { display: none; }
.vbpra-sec h3 { font-family: var(--fh); font-size: 17px; font-weight: 700; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid var(--ink); }
.vbpra-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line); }
.vbpra-row[hidden] { display: none; }
.vbpra-row__n { font-size: 15px; }
.vbpra-row__h { font-size: 13px; color: var(--muted); white-space: nowrap; }
.vbpra-row__p { font-family: var(--fh); font-size: 16px; font-weight: 700; white-space: nowrap; min-width: 92px; text-align: right; }
.vbpra-hl { background: #ffe9c9; border-radius: 3px; padding: 0 2px; }
.vbpra-empty { text-align: center; font-size: 16px; color: var(--muted); padding: 30px 0; }

@media (max-width: 560px) {
  .vbpra-row { grid-template-columns: minmax(0, 1fr) auto; }
  .vbpra-row__h { grid-column: 1; font-size: 12px; }
  .vbpra-row__p { grid-row: 1 / 3; grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .vbpra * { transition: none !important; } }
</style>

<script>
(function () {
  var RATE = 1800;   /* стоимость нормо-часа, ₽ */

  /* ── ПРАЙС: раздел → работы [название, нормо-часы] ── */
  var PRICE = {
    'Двигатель': [
      ['Замена масла и масляного фильтра', 0.5], ['Замена ремня ГРМ с роликами', 5.5],
      ['Замена цепи ГРМ', 8], ['Замена помпы', 3.5], ['Замена прокладки клапанной крышки', 2],
      ['Замена свечей зажигания', 0.8], ['Промывка форсунок на стенде', 2.5], ['Компьютерная диагностика', 1]
    ],
    'Трансмиссия': [
      ['Замена масла в МКПП', 1], ['Замена масла в АКПП частичная', 2],
      ['Замена масла в АКПП аппаратная', 3.5], ['Замена сцепления', 6],
      ['Замена ШРУСа наружного', 2], ['Замена сальника привода', 1.5]
    ],
    'Ходовая часть': [
      ['Замена передних стоек, пара', 3], ['Замена задних амортизаторов, пара', 2.5],
      ['Замена стоек стабилизатора, пара', 1], ['Замена рычага передней подвески', 2],
      ['Замена ступичного подшипника', 2.5], ['Развал-схождение, 3D-стенд', 1.5],
      ['Замена сайлентблоков рычага', 3]
    ],
    'Тормозная система': [
      ['Замена передних тормозных колодок', 1], ['Замена задних тормозных колодок', 1.2],
      ['Замена тормозных дисков, пара', 2], ['Замена тормозной жидкости', 1],
      ['Замена суппорта', 2], ['Прокачка тормозов', 0.8]
    ],
    'Электрика': [
      ['Замена аккумулятора', 0.3], ['Замена генератора', 3], ['Замена стартера', 3.5],
      ['Поиск утечки тока', 2], ['Ремонт проводки, участок', 2.5], ['Замена ламп головного света', 0.5]
    ],
    'Кузов и салон': [
      ['Полировка кузова абразивная', 8], ['Удаление вмятины без покраски, элемент', 3],
      ['Покраска элемента', 6], ['Замена лобового стекла', 3], ['Химчистка салона полная', 6],
      ['Замена салонного фильтра', 0.5]
    ]
  };

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

  function init(root) {
    if (root.__vb) return; root.__vb = 1;
    var body = root.querySelector('#vbpra-body'), input = root.querySelector('#vbpra-q');
    var count = root.querySelector('#vbpra-count'), empty = root.querySelector('#vbpra-empty');
    function fmt(n) { return String(Math.round(n / 10) * 10).replace(/\B(?=(\d{3})+(?!\d))/g, ' '); }

    body.innerHTML = Object.keys(PRICE).map(function (sec) {
      return '<section class="vbpra-sec"><h3>' + sec + '<\/h3>' +
        PRICE[sec].map(function (w) {
          return '<div class="vbpra-row"><span class="vbpra-row__n">' + w[0] + '<\/span>' +
            '<span class="vbpra-row__h">' + String(w[1]).replace('.', ',') + ' н/ч<\/span>' +
            '<span class="vbpra-row__p">' + fmt(w[1] * RATE) + ' ₽<\/span><\/div>';
        }).join('') + '<\/section>';
    }).join('');

    var rows = Array.prototype.slice.call(body.querySelectorAll('.vbpra-row'));
    rows.forEach(function (r) {
      r.__el = r.querySelector('.vbpra-row__n');
      r.__html = r.__el.innerHTML;
      r.__text = r.__el.textContent.toLowerCase();
    });
    var secs = Array.prototype.slice.call(body.querySelectorAll('.vbpra-sec'));

    function escRe(s) { return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); }

    function render() {
      var q = (input.value || '').trim().toLowerCase();
      var shown = 0;
      rows.forEach(function (r) {
        var ok = !q || r.__text.indexOf(q) !== -1;
        r.hidden = !ok;
        if (ok) {
          shown++;
          r.__el.innerHTML = q ? r.__html.replace(new RegExp('(' + escRe(q) + ')', 'gi'), '<mark class="vbpra-hl">$1<\/mark>') : r.__html;
        }
      });
      secs.forEach(function (s) {
        s.hidden = !s.querySelectorAll('.vbpra-row:not([hidden])').length;
      });
      empty.hidden = shown !== 0;
      count.textContent = q ? 'Найдено работ: ' + shown : 'Всего работ в прайсе: ' + rows.length;
    }

    var t;
    input.addEventListener('input', function () { clearTimeout(t); t = setTimeout(render, 130); });
    render();
  }
})();
</script>

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