/*
 * Карточки товаров в списках на телефоне: каталог, «Похожие товары»,
 * «Рекомендуемые». Только узкие экраны — планшеты и десктоп не трогаем.
 *
 * Селекторы начинаются с body и местами идут с !important: стили
 * компонентов каталога подключаются позже этого файла и при равной
 * специфичности перебили бы правку.
 */

/* ---- Ровные ряды -------------------------------------------------------
 * Шаблон ставит карточки в ряд через float. Если у соседних карточек
 * разная высота (например, «Цена по запросу» переносится на две строки),
 * ряды съезжают ступенькой. Во flex-сетке карточки в ряду одной высоты,
 * а кнопки прижаты к низу и стоят на одной линии. */
@media (max-width: 767px) {

	body .items.productList {
		display: flex !important;
		flex-wrap: wrap;
	}

	body .items.productList > .item.product {
		float: none !important;
		display: flex !important;
	}

	/* служебные разделители шаблона в flex-сетке не нужны */
	body .items.productList > .clear {
		display: none;
	}

	body .items.productList > .item.product > .tabloid {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		padding-left: 6px;
		padding-right: 6px;
	}

	body .items.productList > .item.product .productTable {
		flex: 1 1 auto;
	}

	body .items.productList > .item.product .productColText {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
	}

	body .items.productList > .item.product .addCartContainer {
		margin-top: auto;
	}

	/* «Похожие товары» в карточке: у блока свой внутренний отступ 24px
	 * поверх отступа самой карточки, и на телефоне товары сжимались
	 * в полосу ~270px. */
	body #catalogElement #similar {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ---- Подписи кнопок ------------------------------------------------------
 * На экранах уже ~480px кнопка «Зарезервировать» не помещалась: на 390px
 * ей было доступно около 107px при 163px текста, на 430px (iPhone Pro Max)
 * тоже не хватало. Кнопки занимают всю ширину карточки, шрифт
 * подстраивается под экран — длинное слово не переносим, «Зарезер-вировать»
 * читается хуже, чем чуть меньший шрифт. Параметры подобраны с запасом,
 * чтобы текст не упирался в края при другом системном шрифте. */
@media (max-width: 540px) {

	body .items.productList > .item.product .addCartContainer .addCart,
	body .items.productList > .item.product .btn-simple.add-cart {
		box-sizing: border-box;
		width: 100% !important;
		padding-left: 4px !important;
		padding-right: 4px !important;
		font-size: clamp(12px, 3.2vw, 15px) !important;
		letter-spacing: -0.2px;
		white-space: nowrap;
		text-align: center;
	}

	/* иконка корзины рядом с «В корзину» — поменьше, чтобы хватило места */
	body .items.productList > .item.product .addCartContainer .addCart img {
		width: 16px;
		height: auto;
	}
}

/* Самые узкие телефоны (360px и меньше): на полях карточки и кнопки
 * экономим ещё несколько пикселей, иначе запас текста почти нулевой. */
@media (max-width: 380px) {

	body .items.productList > .item.product > .tabloid {
		padding-left: 4px;
		padding-right: 4px;
	}

	body .items.productList > .item.product .addCartContainer .addCart,
	body .items.productList > .item.product .btn-simple.add-cart {
		padding-left: 2px !important;
		padding-right: 2px !important;
	}
}

/* До 400px прячем иконки в кнопках карточек: они декоративные, а место
 * нужно тексту. Сдвигать блок «Похожие товары» за поля карточки нельзя —
 * контейнер карточки обрезает всё, что выходит за его края, и у крайних
 * товаров срезается первая буква названия. */
@media (max-width: 400px) {

	body .items.productList > .item.product .addCartContainer .addCart img {
		display: none;
	}
}