.no-products{
	height: 200px;
	display: flex
;
	align-items: center;
	justify-content: center;
	font-size: 29px;
	color: #1d1d1b75;
}
.d-f-c input{
	cursor: pointer;
}
.product-nav{
	margin-top: 73px;
	gap: 29px 0;
}

/* Карточки товара (каталог, избранное, главная, "также покупают", "вы смотрели"
   — общая вёрстка .product-grid .product-item-container, но в избранном тот же
   компонент рендерит карточку с корневым классом .product, а не .product-item-container
   — поэтому оба варианта): кнопка "В корзину" на одной высоте и одинаковой ширины
   у всех карточек в ряду.
   У товаров с выбором размера карточка выше (есть блок размеров), из-за чего
   кнопка проваливалась ниже, чем у карточек без размеров. Прижимаем блок
   с кнопкой к низу карточки и задаём кнопке фиксированную ширину вместо
   100%/по контенту.
   !important на display нужен только на главной: там виджет фильтра категорий
   (вкладки "Все/Протезы.../..." над сеткой) сам проставляет карточкам inline
   style="display: block" (видимым) или "display: none" (скрытым — их
   специально показывают не все, есть ссылка "ещё N изделий"). Инлайн-стиль
   всегда весит больше обычного селектора в css-файле, поэтому display:flex
   нужен с !important — но ТОЛЬКО для видимых карточек: :not([style*="display: none"])
   исключает скрытые, чтобы не разрушить фильтр (первая версия с
   !important на всех карточках по ошибке показывала вообще все 13 штук
   вместо 4). */
.product-grid .product-item-container:not([style*="display: none"]),
.product-grid .product:not([style*="display: none"]) {
	display: flex !important;
	flex-direction: column;
}
/* Раньше "пружина" (margin-top:auto) стояла на всей форме .product-action-new —
   это прижимало кнопку "В корзину" к низу карточки, но заодно утапливало
   блок размеров вниз у карточек с меньшим числом размеров (он оказывался
   не на одном уровне с соседними карточками в ряду). Переносим пружину
   ниже — на .product-action-foot, внутрь растянутой на всю высоту формы —
   тогда размеры стартуют сразу под названием одинаково у всех карточек, а
   кнопка всё так же прижата к низу. */
.product-grid .product-item-container .product-action-new,
.product-grid .product .product-action-new {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.product-grid .product-item-container .product-action-body,
.product-grid .product .product-action-body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.product-grid .product-item-container .product-action-foot,
.product-grid .product .product-action-foot {
	margin-top: auto;
}
.product-grid .product-item-container .product-action-foot,
.product-grid .product .product-action-foot {
	min-width: 0;
}
.product-grid .product-item-container .product-action-foot .btn,
.product-grid .product .product-action-foot .btn {
	flex: 0 1 auto;
	width: 180px;
	max-width: 100%;
	min-width: 0;
}

/* На мобильном табы категорий на главной (.product-nav) переносятся в
   столбец, и вертикальный отступ между ними (29px) выглядит слишком
   большим. Уменьшаем на 30% (29 * 0.7 = 20.3px), только на мобильном —
   на десктопе табы в одну строку, row-gap там не задействован. */
@media (max-width: 768px) {
	.product-nav {
		gap: 20.3px 0;
	}
}

/* На мобильном ручки ползунков числовых свойств умного фильтра (Цена,
   Длина, Высота и т.п.) обрезались по левому/правому краю — контейнер
   .bx-filter обрезает контент (overflow:hidden), а ручка (24px) выходит
   за пределы дорожки ползунка на её собственную половину ширины.
   Добавляем внутренний отступ, чтобы ручкам хватало места. */
@media (max-width: 768px) {
	.bx-filter {
		padding: 0 15px;
	}
}