/*
 * Список товаров раздела: карточка в стиле сайта (фото, название, цена, кнопка «Купить»), на телефоне две колонки.
 * Количество в списке не выбирается -- его можно изменить в корзине.
 */
.catalog-page-item { margin-bottom: 0; }
div.catalog-page-item div.box,
div.catalog-page-item div.box:hover {
	display: flex;
	flex-direction: column;
	padding: 16px;
	text-align: left;
	border: 1px solid #e5ebf8;
	border-radius: 18px;
	background: #fff;
}
div.catalog-page-item div.box {
	box-shadow: 0 6px 22px rgba(0, 30, 41, .07);
	transition: box-shadow .2s ease, transform .2s ease;
}
div.catalog-page-item div.box:hover {
	box-shadow: 0 10px 26px rgba(0, 52, 154, .16);
	transform: translateY(-2px);
}
div.catalog-page-item div.box > a:first-child {
	display: block;
	margin-bottom: 12px;
}
div.catalog-page-item div.box img.foto_item {
	display: block;
	width: 100%;
	height: 220px;
	max-height: none !important;
	object-fit: contain;
}
div.catalog-page-item div.box p[itemprop="name"] {
	margin: 0 0 10px;
}
div.catalog-page-item div.box a.item-link {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35 !important;
	color: #001e29;
	text-decoration: none;
}
div.catalog-page-item div.box a.item-link:hover { color: #00349a; }
div.catalog-page-item div.box > table { margin-top: auto; }
div.catalog-page-item div.box td.articul {
	padding: 6px 8px 6px 0;
	border-bottom: 0;
}
div.catalog-page-item div.box td.articul span {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: #001e29;
}
div.catalog-page-item div.box td.articul span strong {
	font-size: 20px;
	font-weight: 700;
}
div.catalog-page-item div.box td.articul:first-child,
div.catalog-page-item div.box td.articul:first-child strong {
	font-size: 12px;
	font-weight: 600;
	color: #5b6b76;
}
div.catalog-page-item div.box .amount-box { display: none; }
div.catalog-page-item div.box form.form-cart { margin: 10px 0 0; }
div.catalog-page-item div.box .amount-cart-box,
div.catalog-page-item div.box .amount-cart-box tbody,
div.catalog-page-item div.box .amount-cart-box tr,
div.catalog-page-item div.box .amount-cart-box td {
	display: block;
	width: 100%;
}
div.catalog-page-item div.box .to_shopping {
	width: 100%;
	height: 46px;
	border: 2px solid #fe9900;
	border-radius: 50px;
	background: #fe9900;
	font-family: 'Montserrat', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-transform: none;
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}
div.catalog-page-item div.box .to_shopping span { color: #fff; }
div.catalog-page-item div.box .to_shopping:hover {
	border-color: #00349a;
	background: #00349a;
}

@media (max-width: 575.98px) {
	[data-cl-grid].catalog-item-box { padding-left: 0; padding-right: 0; row-gap: 12px; }
	[data-cl-grid] > .catalog-page-item {
		flex: 0 0 50%;
		width: 50%;
		max-width: 50%;
		padding: 0 6px;
	}
	div.catalog-page-item div.box,
	div.catalog-page-item div.box:hover { padding: 10px; border-radius: 14px; }
	div.catalog-page-item div.box img.foto_item { height: 130px; }
	div.catalog-page-item div.box a.item-link { font-size: 13px; }
	div.catalog-page-item div.box td.articul span { font-size: 13px; }
	div.catalog-page-item div.box td.articul span strong { font-size: 16px; }
	div.catalog-page-item div.box td.articul:first-child,
	div.catalog-page-item div.box td.articul:first-child strong { font-size: 11px; }
	div.catalog-page-item div.box .to_shopping { height: 40px; font-size: 13px; }
}

/* Плитки разделов (.hub-tiles) на телефоне: лента с подсказкой прокрутки, карточки вертикальные */
@media (max-width: 575.98px) {
	.hub-tiles {
		display: flex;
		flex-wrap: nowrap;
		gap: 12px;
		margin-left: -12px;
		margin-right: -12px;
		padding: 4px 12px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 12px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.hub-tiles::-webkit-scrollbar { display: none; }
	.hub-tiles > * {
		display: flex;
		flex: 0 0 78%;
		width: 78%;
		max-width: 78%;
		padding: 0;
		scroll-snap-align: start;
	}
	.hub-tiles a.hub-card { flex: 1 1 auto; flex-direction: column; min-width: 0; }
	.hub-tiles .hub-card-photo { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
}

@media (max-width: 575.98px) {
	div.catalog-page-item div.box a.item-link { -webkit-line-clamp: 4; }
	div.catalog-page-item div.box > table,
	div.catalog-page-item div.box > table tbody,
	div.catalog-page-item div.box > table tr,
	div.catalog-page-item div.box > table td { display: block; width: 100%; padding-top: 0; padding-bottom: 0; }
}

/* Планшет: четыре колонки узкие -- меньше отступ и шрифт, длинные слова переносятся, а не обрезаются */
@media (min-width: 768px) and (max-width: 991.98px) {
	div.catalog-page-item div.box,
	div.catalog-page-item div.box:hover { padding: 12px; }
	div.catalog-page-item div.box a.item-link {
		font-size: 14px;
		overflow-wrap: break-word;
		hyphens: auto;
	}
}

/* Сетка карточек (список раздела, «Просмотренные товары», «Смотрите также»): одинаковые отступы 24 px по горизонтали и вертикали.
   Старое правило css.css обнуляло отступы колонок внутри каталога, поэтому карточки шли впритык. */
@media (min-width: 576px) {
	div.row.catalog-item-box {
		--bs-gutter-x: 1.5rem;
		--bs-gutter-y: 1.5rem;
		margin-top: calc(-1 * var(--bs-gutter-y));
		margin-right: calc(-.5 * var(--bs-gutter-x));
		margin-left: calc(-.5 * var(--bs-gutter-x));
		padding-right: 0;
		padding-left: 0;
	}
	div.row.catalog-item-box > div.catalog-page-item {
		margin-top: var(--bs-gutter-y);
		padding-right: calc(.5 * var(--bs-gutter-x));
		padding-left: calc(.5 * var(--bs-gutter-x));
	}
}

/* Телефон: те же отступы, но 12 px; перебивает обнуление из css.css (карточки в две колонки раньше касались друг друга) */
@media (max-width: 575.98px) {
	div.row.catalog-item-box {
		--bs-gutter-y: 12px;
		margin: calc(-1 * var(--bs-gutter-y)) -6px 0;
		padding: 0;
		row-gap: 0;
	}
	div.row.catalog-item-box > div.catalog-page-item {
		margin-top: var(--bs-gutter-y);
		padding: 0 6px;
	}
}