/* Стили только для тестовой страницы /test/.
   Подключается из /test/index.php через SetAdditionalCSS.

   Блок плашек-категорий на /test/ переиспользует классы .catalog / .catalog__card
   из компонента pingvinstudio:catalog.discounts.block (см. его template.php),
   но сам компонент на странице не вызывается — там жёстко зашиты 2 карточки,
   а нужно 3. Поэтому нужные правила из его style.css продублированы здесь
   (иначе плашки останутся без оформления). Третья плашка (.catalog__card--wide)
   растянута на всю ширину под первыми двумя, чтобы не оставалось пустого места. */

.catalog,
.catalog * {
	box-sizing: border-box;
}

.catalog {
	color: var(--text, #191c1e);
	font-family: var(--font-main, "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	font-size: 16px;
	line-height: 1.5;
}

.catalog.slider-section--muted {
	background: var(--surface-low, #f2f4f7);
}

.catalog.section-space {
	padding-top: 56px;
	padding-bottom: 8px;
}

.catalog .container {
	width: min(100% - 48px, var(--container, 1536px));
	margin: 0 auto;
}

.catalog a {
	color: inherit;
	text-decoration: none;
}

.catalog h2,
.catalog h3,
.catalog p {
	margin: 0;
}

.catalog h2,
.catalog h3 {
	font-family: var(--font-head, "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
	letter-spacing: -0.04em;
	line-height: 1.12;
}

.catalog h2 {
	margin-bottom: 22px;
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 700;
}

.catalog__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.catalog__grid--three {
	grid-template-columns: 1fr 1fr;
}

.catalog__card--wide {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.catalog__card--wide .catalog__card-text {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.catalog__card--wide .catalog__card-text p:not(.eyebrow) {
	max-width: 44ch;
}

.catalog__card {
	display: block;
	padding: 22px;
	border: 1px solid var(--surface-container, #eceef1);
	border-radius: var(--radius-md, 16px);
	background: var(--surface-lowest, #ffffff);
	box-shadow: var(--shadow-soft, 0 20px 40px rgba(25, 28, 30, 0.06));
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 768px) {
	.catalog__card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 175px;
		padding: 28px;
	}
}

.catalog__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 55px rgba(25, 28, 30, 0.1);
}

.catalog .eyebrow {
	display: block;
	margin-bottom: 8px;
	color: var(--accent, #76777D);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.catalog .eyebrow--light {
	color: rgba(255, 255, 255, 0.72);
}

.catalog__card h3 {
	margin-bottom: 8px;
	font-size: clamp(17px, 1.6vw, 21px);
	font-weight: 600;
}

.catalog__card p:not(.eyebrow) {
	margin-bottom: 14px;
	font-size: 0.88rem;
	color: var(--text-soft, #45474c);
}

@media (min-width: 768px) {
	.catalog .eyebrow {
		margin-bottom: 18px;
	}

	.catalog__card h3 {
		margin-bottom: 8px;
		font-size: clamp(17px, 1.7vw, 23px);
	}

	.catalog__card p:not(.eyebrow) {
		margin-bottom: 10px;
		font-size: 14px;
	}
}

.catalog__card span {
	color: var(--accent, #ba1a1a);
	font-weight: 600;
}

.catalog__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.catalog__link img {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

.catalog__card--dark {
	border-color: transparent;
	background: var(--primary, #000000);
	color: var(--white, #ffffff);
}

.catalog__card--dark h3 {
	color: var(--white, #ffffff);
}

.catalog__card--dark p:not(.eyebrow) {
	color: rgba(255, 255, 255, 0.84);
}

.catalog__card--dark span {
	color: var(--white, #ffffff);
}

.catalog__card--dark .catalog__link img {
	filter: brightness(0) invert(1);
}

/* Блок "20 лет на рынке" (.trust) сразу после каталога на главной — уменьшаем
   его верхний отступ только здесь (селектор через смежного соседа .catalog),
   чтобы не задеть тот же .trust на странице /opt/, где перед ним другой блок. */
.catalog + .trust {
	padding-top: 12px;
}

/* Отступ сверху для блока "Новинки" (раньше стоял впритык к баннеру) и
   уменьшенные карточки товаров (были слишком крупные/высокие). Компонент
   ferrus_recommended_section_block переиспользуется на карточке товара
   ("С этим товаром покупают"), поэтому его общий style.css не трогаем —
   правила скопированы через обёртку .test-novinki, которая есть только
   на этой странице (см. test/index.php). */
.test-novinki .slider-section.popular-products {
	padding-top: 48px;
}

@media (min-width: 768px) {
	.test-novinki .popular-products .cards-track {
		grid-auto-columns: calc((100% - 36px) / 3);
	}
}

@media (min-width: 1200px) {
	.test-novinki .popular-products .cards-track {
		grid-auto-columns: calc((100% - 72px) / 5);
	}
}

/* Убираем хлебную крошку "Главная" над баннером на этой черновой странице —
   баннер должен начинаться сразу под шапкой, без лишнего отступа сверху.
   !important нужен, т.к. test-overrides.css подключается раньше основного
   template_styles.css, где .breadcrumbs уже задан. */
.breadcrumbs {
	display: none !important;
}

@media (max-width: 767px) {
	.catalog.section-space {
		padding-top: 36px;
		padding-bottom: 16px;
	}

	.catalog .container {
		width: min(100% - 28px, var(--container, 1536px));
	}

	.catalog__grid,
	.catalog__grid--three {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.catalog__card {
		padding: 14px;
	}

	.catalog__card h3 {
		font-size: 1.1rem;
	}

	.catalog__card p:not(.eyebrow) {
		display: none;
	}

	.catalog__link {
		font-size: 0.8rem;
	}
}