:root {
  --bq-accent:#1976d2;          /* галочки, лінії-акценти */
  --bq-accent-soft: #eef5fb;     /* підкладка плиток і шапки таблиці застосування */
  --bq-ink: #1f2430;             /* основний текст */
  --bq-muted: #6b7280;           /* другорядний текст, ліва колонка таблиць */
  --bq-line: #e6e8ec;            /* лінії таблиць */
  --bq-zebra: #fbfbfc;           /* смужка парних рядків */
  --bq-head: #f6f7f9;            /* шапка таблиці характеристик */
  --bq-radius: 12px;
}

/* ── короткий опис: чек-лист вигод ─────────────────────────────── */
.bq-usp { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: .55em; }
.bq-usp li { position: relative; padding-left: 1.9em; line-height: 1.5; color: var(--bq-ink); }

/* Галочка малюється двома псевдоелементами, а не картинкою: масштабується
   разом зі шрифтом і не тягне зайвий запит. */
.bq-usp li::before {
  content: ""; position: absolute; left: 0; top: .15em;
  width: 1.25em; height: 1.25em; border-radius: 50%;
  background: var(--bq-accent-soft);
}
.bq-usp li::after {
  content: ""; position: absolute; left: .4em; top: .42em;
  width: .42em; height: .72em;
  border: solid var(--bq-accent); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.bq-usp strong { color: var(--bq-ink); font-weight: 600; }

/* ── повний опис ───────────────────────────────────────────────── */
.bq-desc { color: var(--bq-ink); line-height: 1.65; }
.bq-desc h2 {
  font-size: 1.24em; line-height: 1.3; margin: 1.9em 0 .7em;
  padding-left: .65em; border-left: 3px solid var(--bq-accent); font-weight: 650;
}
.bq-desc h2:first-child { margin-top: 0; }
.bq-desc p { margin: 0 0 .9em; }
.bq-desc ul { margin: 0 0 1em; padding-left: 1.2em; }
.bq-desc li { margin: .3em 0; }

/* ── плитки з ключовими цифрами ────────────────────────────────── */
.bq-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6em; margin: 0 0 1.6em; padding: 0; list-style: none;
}
.bq-stat {
  background: var(--bq-accent-soft); border-radius: var(--bq-radius);
  padding: .75em .9em; display: flex; flex-direction: column; gap: .15em;
}
.bq-stat b { font-size: 14px; font-weight: 650; line-height: 1.25; }
.bq-stat span { font-size: .82em; color: var(--bq-muted); }

/* ── обгортки-маркери ──────────────────────────────────────────── */
/* За цими двома класами mu-plugin знаходить таблиці в описі і виносить їх у
   вкладки. Коли поля ACF заповнені, тема показує таблиці сама і сюди справа
   не доходить. Коли ні — блоки лишаються в описі, і їм потрібен відступ. */
.bq-specs,
.bq-usage { margin: 1.8em 0 0; }
.bq-specs > h2:first-child,
.bq-usage > h2:first-child { margin-top: 0; }

/* ── таблиця характеристик ─────────────────────────────────────── */
.bq-spec { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95em; }
.bq-spec th {
  text-align: left; font-weight: 600; padding: .6em .8em;
  background: var(--bq-head); border-bottom: 1px solid var(--bq-line);
}
.bq-spec td { padding: .58em .8em; border-bottom: 1px solid var(--bq-line); vertical-align: top; }
.bq-spec tbody tr:nth-child(odd) { background: var(--bq-zebra); }
.bq-spec td:first-child { color: var(--bq-muted); width: 44%; }
.bq-spec td:last-child { font-weight: 550; }

/* таблиця застосування — інший акцент, щоб вкладки не зливались */
.bq-spec-use th { background: var(--bq-accent-soft); }
.bq-spec-use td:first-child { width: 38%; }

/* ── застереження ──────────────────────────────────────────────── */
.bq-note {
  margin: 1.6em 0 0; padding: .85em 1em;
  border-left: 3px solid var(--bq-accent);
  background: var(--bq-head);
  border-radius: 0 var(--bq-radius) var(--bq-radius) 0;
  font-size: .92em; color: var(--bq-muted);
}
.bq-note strong { color: var(--bq-ink); }

@media (max-width: 600px) {
  .bq-stats { grid-template-columns: 1fr 1fr; }
  .bq-spec td:first-child { width: 50%; }
}