/* ── компоненты, общие с другими страницами (раньше подключались чужими файлами целиком) ── */

.form .tip {
	margin-left:190px;
	padding-top:5px;
	font-size:14px;
	line-height:17px;	
}
@media (max-width:900px) {
	.form .tip { margin:0px; }
}


/* ── свои правила ── */
/* Fixim — страница производителей (/support). Основа — catalog.css. */

/* популярные производители */
.fx-brands-top { margin: 0 0 30px; }
.fx-brands-top h2 { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--fx-text); }
.fx-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fx-brand-tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--fx-text); text-decoration: none; }
.fx-brand-tile:hover { color: var(--fx-text); }
.fx-brand-mark {
	width: 40px; height: 40px;
	flex: none;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
}
.fx-brand-name { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.fx-brand-tile:hover .fx-brand-name { color: var(--fx-link); }
.fx-brand-count { display: block; font-size: 13px; color: var(--fx-muted); font-variant-numeric: tabular-nums; }
/* во время поиска — только результаты */
.fx-filtering-page .fx-brands-top, .fx-filtering-page .fx-abc, .fx-filtering-page .fx-brands-page .fx-catalog-grid { display: none; }
.fx-brand-results { margin: 0 0 26px; max-width: 560px; }
.fx-brand-results[hidden] { display: none; }
.fx-brand-found { margin: 0 0 10px; font-size: 14px; color: var(--fx-muted); }
#fx_brand_list { margin: 0; padding: 8px 18px; }
#fx_brand_list li { margin: 0 -10px; padding: 8px 10px; }

/* алфавит */
/* на /support: отдельный раздел «Все бренды по алфавиту» под популярными */
.fx-brands-page .fx-abc-title { margin: 14px 0 14px; padding-top: 30px; border-top: 1px solid #E3E9F0; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--fx-text); }
.fx-filtering-page .fx-abc-title { display: none; }
.fx-abc { display: flex; flex-direction: column; gap: 8px; margin: 0 0 26px; }
.fx-abc-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-abc a {
	min-width: 36px; height: 36px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #fff;
	border: 1px solid #E3E9F0;
	color: var(--fx-text);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fx-abc a:hover { background: var(--fx-navy2); border-color: var(--fx-navy2); color: #fff; }
.fx-abc span[aria-current] {
	min-width: 36px; height: 36px;
	padding: 0 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--fx-navy2);
	color: #fff;
	font-weight: 800;
	font-size: 15px;
}

/* группа буквы */
/* по алфавиту читается слева направо: обычная сетка по строкам вместо «кирпичной кладки» */
.fx-brands-page .fx-catalog-grid { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: start; }
.fx-brands-page .fx-catalog-sec { margin: 0; }
.fx-letter-ico { font-size: 20px; font-weight: 800; }
.fx-brands-page .fx-catalog-head { color: var(--fx-text); }
/* «Ещё N» — ссылка на страницу буквы */
.fx-letter-more { display: inline-block; margin: 6px 0 4px; font-size: 14px; font-weight: 600; color: var(--fx-link); text-decoration: none; }
.fx-letter-more:hover { text-decoration: underline; }

/* страница буквы: все бренды списком в колонки, соседние буквы */
.fx-letter-all-sec { margin: 0 0 24px; }
.fx-letter-all-sec h2 { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -0.015em; color: var(--fx-text); }
.fx-letter-list { columns: 3 240px; column-gap: 72px; column-rule: 1px solid #EEF2F6; margin: 0; padding: 14px 30px; } /* колонки явно раздельно: число не упирается в соседнее название */
.fx-letter-list li { break-inside: avoid; }
.fx-letter-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.fx-letter-pager a {
	padding: 10px 16px;
	border-radius: 11px;
	background: #fff;
	border: 1px solid #E3E9F0;
	color: var(--fx-text);
	font-weight: 600;
	text-decoration: none;
}
.fx-letter-pager a:hover { border-color: var(--fx-link); color: var(--fx-link); }
.fx-letter-prev:before { content: '‹'; margin-right: 8px; font-weight: 800; }
.fx-letter-next:after { content: '›'; margin-left: 8px; font-weight: 800; }
.fx-letter-up { margin: 0 auto; }

@media (max-width: 560px) {
	.fx-brands-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
	.fx-brand-tile { padding: 10px 12px; }
	.fx-abc a, .fx-abc span[aria-current] { min-width: 34px; height: 34px; }
	/* на телефоне каждая строка алфавита — лента с горизонтальной прокруткой, а не 8 строк кнопок */
	.fx-abc-row { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
	.fx-abc-row::-webkit-scrollbar { display: none; }
	.fx-abc a, .fx-abc span[aria-current] { flex: none; }
	.fx-letter-list { padding: 10px 18px; }
	.fx-letter-up { order: 3; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-abc a { transition: none; }
}