/* Блок «куди далі» для порожніх станів (404, порожній пошук, порожній кошик).
   Власник розмітки — inc/dead-end-help.php. Токени — з tokens.css, з fallback-літералами:
   на цих сторінках RUCSS так само може зрізати :root (той самий урок, що з кнопкою на головній). */

.tapki-help {
  margin: 28px 0 0;
  padding: 22px 24px;
  background: var(--tapki-gray-bg, #f9fafb);
  border: 1px solid var(--tapki-border, #e5e7eb);
  border-radius: var(--tapki-radius, 8px);
  max-width: 68ch;
}

.tapki-help__title {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--tapki-ink, #111827);
  font-family: var(--tapki-font-head, 'Montserrat', sans-serif);
}

.tapki-help__cats {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tapki-help__cats a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--tapki-border, #e5e7eb);
  border-radius: 999px;
  background: #fff;
  color: var(--tapki-text, #2d3436);
  text-decoration: none;
  font-size: .92rem;
  line-height: 1.3;
}

.tapki-help__cats a:hover {
  border-color: var(--tapki-green, #23856D);
  color: var(--tapki-green-tx, #1c6a57);
}

/* Лічильник товарів — приглушений: це підказка про наповненість, а не акцент. */
.tapki-help__count {
  color: var(--tapki-gray-mute, #8a8a8a);
  font-size: .82em;
}

.tapki-help__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Кнопки успадковують вигляд теми; тут лише прибираємо зайві відступи Flatsome в цьому блоці. */
.tapki-help__actions .button { margin: 0; }

@media (max-width: 549px) {
  .tapki-help { padding: 18px 16px; }
  .tapki-help__actions .button { width: 100%; text-align: center; }
}

/* Порожня видача пошуку — власний шаблон теми (search.php). Було inline-стилями просто в
   розмітці, разом із голим сірим #777 (той самий клас, що лікували в Mi2, лише поза inc/). */
.tapki-search-empty { padding: 30px 0 60px; }
.tapki-search-empty__lead {
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--tapki-text, #2d3436);
}
.tapki-search-empty .tapki-help { margin-top: 0; }

/* ⚠ Власна регресія, спіймана заміром контрасту 2026-08-05: кнопка .is-outline успадковувала
   від Flatsome світло-сірий текст (#c0c0c0) на світлому тлі блоку — 1.74:1, найгірший показник
   на сайті, і внесли його ми ж разом із цим блоком. Задаємо колір явно. */
.tapki-help__actions .button.is-outline {
  color: var(--tapki-green-600, #2e7564);
  border-color: var(--tapki-green-600, #2e7564);
}
.tapki-help__actions .button.is-outline:hover {
  background: var(--tapki-green-600, #2e7564);
  color: #fff;
}