/* ============================================================
   notfound-widget.css — единый виджет «Не нашли то, что искали?» + форма.
   Подключается самим виджетом (widgets/notfoundform_index.html), поэтому
   вид одинаков на всех страницах, где стоит {widget_show alias='notfoundform'}.

   Фикс (a): заголовок в колонке по ширине формы (600px, по центру над
             центрированной .order-box), текст остаётся выровнен влево.
   Фикс (b): заметный воздух сверху — блок больше не «прилипает» к контенту выше.
   ============================================================ */

.tg-notfound{
	/* Блок идёт последним перед футером (после FAQ/контента):
	   симметричный ритм секций; снизу + padding-top футера 56px = нет слипания */
	margin: 64px 0;
}

/* Заголовок-колонка ровно над формой (.order-box = 600px, margin:0 auto) */
.tg-notfound .not-found{
	width: 600px;
	max-width: 100%;
	margin: 0 auto;                /* та же колонка, что и у формы */
	padding: 0;
	text-align: left;              /* фикс (a): текст слева внутри колонки */
	background: none;              /* единый вид: без legacy-фона «лупы» */
	font-style: normal;
	font-size: 18px;
	line-height: 25px;
	color: #34495e;
}
.tg-notfound .not-found::before{ display: none !important; }
.tg-notfound .not-found span{
	display: block;
	color: #e74c3c;
}

.tg-notfound__form{
	margin-top: 24px;
}

/* ── Ссылки-табы: подчёркивание-переключатель (появляется по умолчанию, гаснет на hover) ──
   Восстанавливаем hover-toggle: глобальный extension.css задаёт .tab-call border-bottom
   с !important, из-за чего hover-правило new-theme.css (без !important) не срабатывало.
   Здесь scoped-правила с достаточной специфичностью + !important, файл грузится последним. */
.tg-notfound .not-found .tab-call{
	border-bottom: 2px dashed #000 !important;
	color: #000 !important;
	text-decoration: none !important;
	transition: border-color .2s ease, opacity .2s ease;
}
.tg-notfound .not-found .tab-call.active{
	border-bottom-style: solid !important;
}
.tg-notfound .not-found .tab-call:hover,
.tg-notfound .not-found .tab-call:focus{
	border-bottom-color: transparent !important;
	opacity: .75;
}

/* Мобайл ≤639px */
@media screen and (max-width: 639px){
	.tg-notfound{ margin: 40px 0; }
	.tg-notfound .not-found{ width: 100%; }
	.tg-notfound__form{ margin-top: 18px; }
}

/* Modifier .tg-notfound-left: on product pages (typography_product.html)
   the block is left-aligned instead of centered. The class sits on the
   .col-xs-12 wrapper around {widget_show alias=notfoundform} only there.
   List pages (/product/, /karta-sajta/, etc.) stay centered. Width = 600px (base). */
.tg-notfound-left .tg-notfound .not-found{
	margin-left: 0;
	margin-right: auto;
}

/* Same modifier: the form container (.order-box) carries its own
   margin:0 auto, so left-aligning only .not-found would split the block
   (heading left, form centered). Pin the form to the left edge too. */
.tg-notfound-left .tg-notfound__form .order-box{
	margin-left: 0;
	margin-right: auto;
}