/* ==================== 404 (templates/404.html) ==================== */

/* main.catalog-page.not-found-page: head (H1 + крошки — как у страниц каталога, catalog.css)
   + блок webmaster/not-found → контент страницы «Страница 404» (Настройки → Чтение):
   group.not-found (contentOnly) > p.not-found__code «404» + p.not-found__text + buttons.not-found__buttons
   (__btn--outline — вторая кнопка). Селекторы без .not-found-page — так же выглядит и в редакторе страницы.
   Макета 404 в mytoy.pen нет — собрано из элементов страниц каталога. Размеры — --e404-*. */

.not-found{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e404-gap);
	padding: var(--e404-pad);
	text-align: center;
}

.not-found > *{
	margin: 0;
}

.not-found .not-found__code{
	font-size: var(--e404-code-size);
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--catalog-accent);
}

.not-found .not-found__text{
	max-width: var(--e404-text-width);
	font-size: var(--e404-text-size);
	line-height: 1.4;
	color: var(--catalog-ink);
}

.not-found a:not(.wp-block-button__link){
	color: var(--catalog-accent);
}

.not-found .not-found__buttons{
	justify-content: center;
	gap: 20px;
	width: 100%;
	margin-top: var(--e404-buttons-top);
}

.not-found .not-found__buttons .wp-block-button{
	width: var(--e404-btn-width);
	margin: 0;
}

.not-found .not-found__buttons .wp-block-button__link{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--e404-btn-height);
	padding: 0 24px;
	border: 1px solid var(--catalog-accent);
	border-radius: var(--catalog-btn-radius);
	background: var(--catalog-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.not-found .not-found__buttons .wp-block-button__link:hover{
	border-color: var(--catalog-accent-hover);
	background: var(--catalog-accent-hover);
}

.not-found .not-found__buttons .not-found__btn--outline .wp-block-button__link{
	background: transparent;
	color: var(--catalog-accent);
}

.not-found .not-found__buttons .not-found__btn--outline .wp-block-button__link:hover{
	background: var(--catalog-accent);
	color: #fff;
}