/*
 * Доработки бэкенда поверх вёрстки. Подключается в base.html после main.css,
 * поэтому не затирается, если фронтенд пересоберёт main.css.
 */

/* ---------- Фото товаров: фиксированная рамка, фото любых пропорций вписывается без растягивания ---------- */
.catalog-item__img,
.best-price__item-img,
.compare__item-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 160px;
}

.catalog-item__img img,
.best-price__item-img img,
.compare__item-img img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: contain;
}

/* плитки категорий, серий и памяти */
.catalog-category-item {
	width: 100%;
}

.catalog-category-item__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 240px;
	aspect-ratio: 1 / 1;
}

.catalog-category-item__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* миниатюра в корзине */
.basket__product-img {
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
}

.basket__product-img img {
	height: 100%;
	object-fit: contain;
}

/* галерея на карточке товара */
.product__img {
	aspect-ratio: 1 / 1;
}

.product__img img,
.product__thumbs-img img {
	height: 100%;
	object-fit: contain;
}

/* ---------- Слайдер на главной: фиксированные пропорции (по макету), фото заполняет область ---------- */
.hero__img {
	aspect-ratio: 750 / 660;
	overflow: hidden;
}

.hero__img img {
	height: 100%;
	object-fit: cover;
}

@media (min-width: 767.98px) {
	.hero__img {
		aspect-ratio: 1536 / 680;
	}
}

@media (min-width: 1023.98px) {
	.hero__img {
		aspect-ratio: 2880 / 1200;
	}
}

/*
 * ---------- Высота шапки ----------
 * В вёрстке отступ страницы и положение мегаменю заданы числами (61 / 110 / 129px),
 * а реальная шапка на 1px ниже — отсюда белая полоса над слайдером и щель под меню.
 * shop.js пишет реальную высоту шапки в --header-height и ставит html.has-header-height;
 * без JS всё остаётся как в вёрстке.
 */
.has-header-height .page:not(.page-inner) {
	--p-top: var(--header-height);
}

/* ---------- Мегаменю (десктоп): высота по содержимому вместо «на весь экран» ---------- */
.has-header-height .header-catalog {
	top: var(--header-height);
	max-height: calc(100vh - var(--header-height));
}

.header-catalog {
	height: auto;
	max-height: calc(100vh - 129px);
	overflow-y: auto;
	/* затемнение страницы под меню; сверху обрезано, чтобы не темнить саму шапку */
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .25);
	clip-path: inset(0 -100vmax -100vmax -100vmax);
}

.header-catalog__block {
	height: auto;
}

.header-catalog__section {
	height: auto;
	overflow: visible;
}

/* ---------- Подсказки поиска: белая карточка вместо серого фона под цвет поля ---------- */
.searchbar__results-inner {
	background-color: var(--color-whte);
	border: 1px solid var(--color-gry-100);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* ---------- Кнопки «Избранное» / «Сравнить» на карточке товара: явное активное состояние ---------- */
.product__action-btn.is-active {
	border-color: var(--color-accent);
}

/*
 * ---------- Страховка от Reformat Code ----------
 * Форматтер PyCharm уже ломал в main.css «100dvh» на «100 dvh» — правило переставало работать
 * (мобильное меню, фильтр, прокрутка страницы). Дублируем здесь, чтобы это не повторилось.
 */
.header-menu {
	height: 100dvh;
}

/* только до 1024px: на десктопе фильтр — боковая колонка с height: auto из вёрстки */
@media only screen and (max-width: 1023.98px) {
	.catalog__filter,
	.catalog__filter-panel {
		height: 100dvh;
	}

	/* мобильный фильтр: прокручивается сама панель, страница под ней стоит на месте */
	.catalog__filter-panel {
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

@media only screen and (max-width: 991.98px) {
	.outer {
		height: 100dvh;
	}
}