/* .btn--primary — красная кнопка с жёсткой тенью, «вдавливается» при нажатии.
   .btn--text — простая текстовая ссылка-кнопка. */
.btn { display: inline-flex; align-items: center; justify-content: center; }

.btn--primary {
  padding: .85rem 2.6rem;
  background: var(--red);
  color: #0d0d0d;
  font: 700 1.6rem/1 var(--font-main);
  text-transform: uppercase;
  letter-spacing: .06em;
  box-shadow: 6px 6px 0 var(--red-deep);
  transition: transform .08s, box-shadow .08s, background-color .08s;
}
.btn--primary:hover  { background: var(--text); transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--red-deep); }
.btn--primary:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--red-deep); }

.btn--text {
  color: var(--muted);
  text-decoration: underline dashed 1px;
  text-underline-offset: 5px;
  transition: color .15s;
}
.btn--text:hover { color: var(--text); }

/* Доп. варианты */
.btn--ghost { padding: .7rem 1.4rem; border: 2px solid var(--line); color: var(--text); font: 700 1rem/1 var(--font-main); text-transform: uppercase; letter-spacing: .06em; transition: border-color .15s, color .15s; }
.btn--ghost:hover { border-color: var(--red); color: var(--red); }
.btn--sm { padding: .5rem 1rem; font-size: .9rem; }
.btn--primary.btn--sm { padding: .6rem 1.4rem; font-size: 1.1rem; box-shadow: 4px 4px 0 var(--red-deep); }
.btn--primary.btn--sm:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--red-deep); }
.btn--dark { padding: .85rem 2.2rem; background: #0d0d0d; color: var(--text); font: 700 1.3rem/1 var(--font-main); text-transform: uppercase; letter-spacing: .06em; box-shadow: 5px 5px 0 var(--red-deep); transition: transform .08s, box-shadow .08s; }
.btn--dark:hover { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--red-deep); }
.is-disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }