@layer components {
  /* Кнопки-пилюли (.btn / .btn-p / .btn-s / .btn-t / .btn-sm / .btn-ic в макетах) */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font: 600 17px/1.1 var(--font);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .btn--primary { background: var(--accent); color: #fff; }
  .btn--primary:hover { background: var(--accent-hover); color: #fff; }
  .btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
  .btn--secondary:hover { border-color: var(--accent); color: var(--ink); }
  .btn--text { background: transparent; color: var(--accent-ink); padding: 0 6px; min-height: 44px; }
  .btn--text:hover { text-decoration: underline; }
  .btn--sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
  /* Квадратная кнопка-иконка: «позвонить», «меню», «закрыть» */
  .btn--icon {
    width: 48px;
    min-height: 48px;
    padding: 0;
    border-radius: 14px;
    background: var(--soft);
    color: var(--accent-ink);
  }
  .btn--block { width: 100%; }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: default; }

  /* На телефоне кнопка не шире колонки: длинная подпись («Записаться на консультацию»
     в карточке с отступами 44px) переносится на вторую строку */
  @media (max-width: 820px) {
    .btn:not(.btn--icon) { max-width: 100%; white-space: normal; text-align: center; padding-block: 12px; }
  }
}