@charset "UTF-8";
/**
 *	=========================================================================
 *	AW FIXES — правки по итогам технического аудита
 *	=========================================================================
 *	Отдельный файл, а не правка style.css, по двум причинам:
 *	  - style.css собирается Prepros из _DESIGN/_prepros/_scss и при пересборке
 *	    потеряет любые ручные изменения;
 *	  - так видно, что именно добавлено аудитом, и это легко откатить.
 *
 *	Подключается в view_index_head.tpl ПОСЛЕ style.css.
 */

/*	=========================================================================
	1. Заголовки страниц стали h1 вместо div
	=========================================================================
	Раньше заголовок страницы был обычным div, поэтому у карточки товара и всех
	разделов не было главного заголовка вовсе. Тег поменяли, класс оставили —
	осталось погасить собственные отступы h1 от Bootstrap, чтобы вид не изменился
	ни на пиксель. */

/*	Размеры НЕ задаём: они уже описаны в style.css у самого класса
	.app_content__title-div, причём на трёх брейкпоинтах (34/42 базово,
	25/30 при ≤767px и 18/20 с центрированием при ≤575px).
	Селектор по классу специфичнее, чем h1 из Bootstrap, поэтому размер
	наследуется как был. Гасим только собственные отступы заголовка —
	ради них правило и нужно.

	Так было не сразу: сначала здесь дублировались размеры с брейкпоинтом
	991px, из-за чего на 768–991px заголовок уменьшался до 25px вместо 34px,
	а на ≤575px, наоборот, вырастал до 25px вместо 18px и терял центрирование. */

h1.app_content__title-div,
h2.app_content__title-div,
h3.app_content__title-div {
	margin-top: 0;
	margin-bottom: 0;
}

/*	SEO-текст каталога: три h1 понижены до h2.
	Повторяем ровно то, что style.css задавал для .app_content__description h1,
	включая брейкпоинт 767px, — иначе текстовая часть под каталогом «поедет». */
.app_content__description h2 {
	margin: 0 0 5px;
	font-size: 34px;
	font-weight: 400;
	line-height: 42px;
}

@media (max-width: 767px) {
	.app_content__description h2 {
		font-size: 22px;
		line-height: 25px;
		font-weight: bold;
	}
}

/*	=========================================================================
	2. Доступность: кнопки каталога — это div без роли и без фокуса
	=========================================================================
	Кнопки «Подробнее», «Показать ещё», фильтры и переключатели сделаны
	элементами div. Клавиатурой до них было не добраться, а фокус не виден
	вовсе. Роль и tabindex проставляются в разметке, здесь — видимый фокус. */

.js-app_content__tires_list-item-more:focus-visible,
.js-app_content__tires_list-item_list-more:focus-visible,
.js--catalog-tire-load_more:focus-visible,
.js--search-show_more:focus-visible,
.class_button:focus-visible,
[role="button"]:focus-visible {
	outline: 3px solid #ff9f00;
	outline-offset: 2px;
	border-radius: 4px;
}

/*	Старым браузерам без :focus-visible — обычный :focus, но только
	для элементов, которые мы сами пометили ролью кнопки */
[role="button"]:focus {
	outline: 3px solid #ff9f00;
	outline-offset: 2px;
}

[role="button"]:focus:not(:focus-visible) {
	outline: none;
}

/*	Курсор — как у кнопки, раз это кнопка */
[role="button"] {
	cursor: pointer;
}

/*	=========================================================================
	3. Изображения не «прыгают» при загрузке
	=========================================================================
	Ни у одной картинки не заданы width/height, из-за чего вёрстка скачет,
	пока грузятся изображения. Пропорции через aspect-ratio дают браузеру
	возможность зарезервировать место заранее — без правки каждой картинки. */

.app_content__tires_list-item-div-logo img,
.app_content__product-image img,
.app_content__product-image-gallery img {
	aspect-ratio: 1 / 1;
	height: auto;
}