/* Общие стили внутренних страниц */

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
  color: var(--muted);
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumbs a:hover {
  color: var(--brand);
}

.page-hero {
  padding: 40px 0 50px;
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.75rem;
}

.page-hero__text {
  font-family: var(--font-hero);
  font-size: 1.05rem;
  max-width: 560px;
  color: var(--muted);
}

.page-404-hero {
  min-height: calc(100svh - var(--header-h) - 120px);
  display: flex;
  align-items: center;
}

.page-404-hero__inner {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.page-404-hero__code {
  font-family: var(--font-nunito);
  font-size: clamp(4rem, 14vw, 7rem);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-light);
  margin-bottom: 0.5rem;
}

.page-404-hero .page-hero__text {
  margin-inline: auto;
}

.page-404-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.deco-heart--page-1 {
  top: 2%;
  right: 5%;
  opacity: 0.5;
}

.deco-heart--page-2 {
  bottom: 8%;
  left: 3%;
  opacity: 0.35;
}