/* Оформление витрины «Иринком».
 *
 * Повторяет визуальную айдентику прежнего сайта (палитра, шрифты, характер
 * блоков), но написано с нуля поверх стандартной темы OpenCart 4. Файлы
 * коммерческой темы newstore не используются — только фирменные цвета и
 * шрифты, которые принадлежат самому магазину.
 *
 * Цвета сняты пипеткой с фирменного логотипа (image/catalog/logo.png) и
 * с собственных значков старого сайта: красный #d70022 и тёмно-серый #464646.
 * Раньше здесь стоял оранжевый #fd6500 из схемы ocStore theme_3 — но сама
 * тема сайта перебивала его переменной --main-color: #d70022, что и видно
 * в её stylesheet.css. Красный — настоящий фирменный цвет.
 */

:root {
	--irincom-accent: #d70022;
	--irincom-accent-dark: #b20626;
	--irincom-accent-soft: #fdeef0;
	--irincom-text: #333333;
	--irincom-heading: #464646;
	--irincom-muted: #666666;
	--irincom-line: #e0e0e0;
	--irincom-dark: #363636;
	--irincom-darker: #2b2b2b;

	/* Единая шкала отступов. До сих пор в файле встречались 5, 8, 10, 12, 14,
	   15, 16, 20, 25, 26, 28, 30, 32, 36, 40 px вперемешку — из-за этого блоки
	   не выстраивались в общий ритм, и страница читалась как собранная из
	   кусков. Дальше пользуемся только этими значениями. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 16px;
	--sp-4: 24px;
	--sp-5: 40px;
	--sp-6: 64px;

	/* Тени вместо серых рамок. Рамка в один пиксель вокруг каждого блока —
	   примета старых шаблонов; глубину сегодня дают мягкой тенью, а рамку
	   оставляют там, где она действительно что-то разделяет. */
	--shadow-1: 0 1px 2px rgba(16, 18, 22, 0.04), 0 2px 8px rgba(16, 18, 22, 0.06);
	--shadow-2: 0 2px 4px rgba(16, 18, 22, 0.05), 0 8px 24px rgba(16, 18, 22, 0.10);
	--shadow-accent: 0 6px 20px rgba(215, 0, 34, 0.18);

	--radius: 8px;
	--radius-sm: 4px;

	/* Одна кривая на все переходы: разное ускорение у соседних элементов
	   читается как несогласованность. */
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* FuturaPT — шрифт прежнего сайта: в его теме им набрано всё, от текста до
   заголовков. Файлы взяты оттуда же (newstore/fonts/FuturaPT). Roboto
   Condensed оставлен запасным: он подхватится, пока грузится основной. */
@font-face {
	font-family: 'FuturaPT';
	src: url('../fonts/FuturaPT.woff2') format('woff2'),
	     url('../fonts/FuturaPT.woff') format('woff'),
	     url('../fonts/FuturaPT.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto Condensed';
	src: url('../fonts/RobotoCondensed-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}

/* Было 14px/20px — размер из тем середины десятых. Сегодня привычный размер
   основного текста 16px, а межстрочный задают множителем, а не пикселями:
   при 20px строки не расходились вслед за более крупным шрифтом в блоках,
   и текст выглядел сдавленным. Отсюда и ощущение старого сайта — сильнее,
   чем от любой анимации. */
body {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	color: var(--irincom-text);
	font-size: 16px;
	line-height: 1.6;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	color: var(--irincom-text);
}

/* Кегли заголовков — как в теме прежнего сайта: 33 / 27 / 21. */
h1 {
	font-size: 33px;
	margin-bottom: 1rem;
}

h2, .h2 {
	font-size: 27px;
}

h3, .h3 {
	font-size: 21px;
}

a {
	color: var(--irincom-text);
	text-decoration: none;
}

a:hover {
	color: var(--irincom-accent);
}

/* Верхней серой строки (#top) больше нет — её разметка удалена из
   header.twig, там же расписано, что в ней было. Стили сняты вместе с ней. */

/* ------------------------------------------------------------------- шапка */
/* Липкая шапка: телефон, поиск и корзина остаются под рукой на любой длине
   страницы, а в каталоге страницы длинные. position: sticky выбран намеренно
   вместо fixed — он не вынимает шапку из потока, поэтому содержимое под ней
   не подпрыгивает при загрузке (то самое смещение вёрстки, за которое
   поисковики снижают оценку страницы). */
header {
	position: sticky;
	top: 0;
	z-index: 1020;
	padding: 14px 0;
	background: #fff;
	transition: padding 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

/* Класс вешает скрипт, когда страницу прокрутили заметно вниз: шапка
   поджимается, логотип уменьшается, часы работы и почта уходят — остаётся
   то, чем пользуются на ходу. */
header.is-stuck {
	padding: 6px 0;
	box-shadow: var(--shadow-1);
}

header.is-stuck #logo img {
	height: 40px;
}

header.is-stuck .irincom-hours,
header.is-stuck .irincom-email {
	display: none;
}

header.is-stuck .irincom-phone {
	font-size: 16px;
}

/* На узком экране шапка вместе с поиском занимает пол-экрана — там она
   обычная, прокручивается вместе со страницей. */
@media (max-width: 991.98px) {
	header {
		position: static;
	}
}

@media (prefers-reduced-motion: reduce) {
	header {
		transition: none;
	}
}

/* Высоту задаём явно, а ширину выводим из пропорций. У логотипа в SVG нет
   атрибутов width/height — только viewBox, и при width:auto браузер считает
   ширину нулевой: картинка пропадает, а вместе с ней и ссылка на главную. */
#logo img {
	height: 56px;
	width: auto;
	max-width: 100%;
}

#logo a {
	display: inline-block;
}

/* Контактный блок: два телефона, часы работы, почта — как в прежней шапке. */
.irincom-contacts {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	line-height: 1.35;
}

.irincom-contacts .irincom-phone {
	display: block;
	font-size: 19px;
	font-weight: 700;
	color: var(--irincom-text);
	white-space: nowrap;
}

.irincom-contacts .irincom-phone:hover {
	color: var(--irincom-accent);
}

.irincom-contacts .irincom-hours,
.irincom-contacts .irincom-email {
	display: block;
	font-size: 13px;
	color: var(--irincom-muted);
}

.irincom-contacts .irincom-email:hover {
	color: var(--irincom-accent);
}

/* Кнопка «Заказать расчёт» — главный призыв старой шапки. */
.btn-irincom-quote {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	background: var(--irincom-accent);
	border: 1px solid var(--irincom-accent);
	padding: 9px 18px;
	white-space: nowrap;
}

.btn-irincom-quote:hover,
.btn-irincom-quote:focus {
	color: #fff;
	background: var(--irincom-accent-dark);
	border-color: var(--irincom-accent-dark);
}

/* -------------------------------------------------------------------- меню */
/* Полоса как на прежнем сайте: слева отдельная кнопка «Каталог» с деревом
   разделов, справа — информационные страницы. Категории в самой полосе не
   выводятся: их там и не было. */
#menu {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 18px;
}

.irincom-menubar {
	display: flex;
	align-items: stretch;
	gap: 14px;
	width: 100%;
}

.irincom-catalog-toggle {
	flex: 0 0 auto;
	width: 250px;
	max-width: 45%;
}

.irincom-catalog-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 11px 16px;
	background: var(--irincom-accent);
	border: 0;
	border-radius: 4px;
	color: #fff;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.irincom-catalog-btn:hover,
.irincom-catalog-btn:focus,
.irincom-catalog-btn.show {
	background: var(--irincom-accent-dark);
	color: #fff;
}

/* Стрелку Bootstrap убираем — у кнопки свой значок «бургера». */
.irincom-catalog-btn.dropdown-toggle::after {
	display: none;
}

.irincom-catalog-menu {
	width: 100%;
	min-width: 250px;
	margin-top: 2px;
	padding: 6px 0;
	border: 1px solid var(--irincom-line);
	border-radius: 4px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.irincom-catalog-menu > li {
	position: relative;
}

.irincom-catalog-menu .dropdown-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 16px;
	font-size: 14px;
	color: var(--irincom-text);
	white-space: normal;
}

.irincom-catalog-menu .dropdown-item:hover {
	background: var(--irincom-accent-soft);
	color: var(--irincom-accent);
}

.irincom-catalog-menu > li > a > i {
	font-size: 11px;
	color: #aaa;
}

/* Подраздел выезжает вбок на широких экранах и раскрывается списком на узких —
   на телефоне вложенное меню сбоку показывать некуда. */
.irincom-catalog-submenu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 6px 0;
}

@media (min-width: 992px) {
	.irincom-catalog-submenu {
		position: absolute;
		top: -6px;
		left: 100%;
		min-width: 260px;
		background: #fff;
		border: 1px solid var(--irincom-line);
		border-radius: 4px;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
		z-index: 5;
	}

	.irincom-has-children:hover > .irincom-catalog-submenu {
		display: block;
	}
}

@media (max-width: 991.98px) {
	.irincom-has-children:hover > .irincom-catalog-submenu,
	.irincom-has-children:focus-within > .irincom-catalog-submenu {
		display: block;
		background: #fafafa;
	}

	.irincom-catalog-submenu .dropdown-item {
		padding-left: 32px;
	}
}

.irincom-pages {
	flex: 1 1 auto;
	background: var(--irincom-accent);
	border-radius: 4px;
}

.irincom-pages .nav {
	flex-wrap: wrap;
}

.irincom-pages .nav-link {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	color: #fff;
	padding: 11px 15px;
}

.irincom-pages .nav-link:hover {
	background: rgba(0, 0, 0, 0.12);
	color: #fff;
}

/* Панель разделов слева от слайдера на главной. Раскрыта сразу, как было
   на прежнем сайте, и по высоте тянется вровень со слайдером. */
.irincom-catalog-panel {
	height: 100%;
	border: 1px solid var(--irincom-line);
	border-radius: 4px;
	background: #fff;
	overflow: visible;
}

.irincom-catalog-panel > ul {
	list-style: none;
	margin: 0;
	padding: 4px 0;
}

.irincom-catalog-panel > ul > li {
	position: relative;
}

.irincom-catalog-panel > ul > li > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 16px;
	font-size: 14px;
	color: var(--irincom-text);
}

.irincom-catalog-panel > ul > li > a:hover {
	background: var(--irincom-accent-soft);
	color: var(--irincom-accent);
}

.irincom-catalog-panel > ul > li > a > i {
	font-size: 11px;
	color: #aaa;
}

.irincom-catalog-panel .irincom-catalog-submenu .dropdown-item {
	display: block;
	padding: 7px 16px;
	font-size: 14px;
	color: var(--irincom-text);
	white-space: normal;
}

.irincom-catalog-panel .irincom-catalog-submenu .dropdown-item:hover {
	background: var(--irincom-accent-soft);
	color: var(--irincom-accent);
}

#menu .navbar-toggler {
	flex: 0 0 auto;
	background: var(--irincom-accent);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 8px 14px;
}

/* --------------------------------------------------------- кнопки и формы */
/* Раньше цвет у кнопок переключался мгновенно — от этого интерфейс кажется
   нарисованным, а не отзывчивым. Полсекунды не нужны: кнопка должна успевать
   за курсором, поэтому 0.2 с. Нажатие сдвигает кнопку на пиксель вниз — самый
   дешёвый способ дать понять, что клик засчитан. */
.btn {
	transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.1s var(--ease);
}

.btn:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}

	.btn:active {
		transform: none;
	}
}

.btn-primary,
.btn-primary:disabled {
	background: var(--irincom-accent);
	border-color: var(--irincom-accent);
	color: #fff;
}

.btn-primary:hover {
	box-shadow: var(--shadow-accent);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background: var(--irincom-accent-dark) !important;
	border-color: var(--irincom-accent-dark) !important;
	color: #fff;
}

.btn-light:hover {
	border-color: var(--irincom-accent);
	color: var(--irincom-accent);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--irincom-accent);
	box-shadow: 0 0 0 0.15rem rgba(215, 0, 34, 0.15);
}

/* ------------------------------------------------------------ карточка товара */
/* min-height вместо height: карточки в ряду должны быть одной высоты, но
   рамка обязана вмещать содержимое. Ядро ставит жёсткий height: 100%, и
   содержимое, не поместившись в высоту колонки, вылезало под нижнюю границу
   плитки — поэтому height сбрасываем явно, одного min-height мало. */
.product-thumb {
	height: auto;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow-1);
	overflow: hidden;
	transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.product-thumb:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-2);
}

@media (prefers-reduced-motion: reduce) {
	.product-thumb:hover {
		transform: none;
	}
}

.product-thumb .image {
	padding: 10px;
	text-align: center;
}

.product-thumb .image img {
	display: inline-block;
	max-height: 200px;
	width: auto;
}

.product-thumb .content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 0 12px 12px;
}

/* padding и margin-bottom обнуляем осознанно: в стандартной теме описание
   держит 15 px внутреннего поля и 45 px пустоты снизу — место под ряд кнопок,
   который там висит абсолютом. Отступы у нас даёт .content, а кнопки стоят
   в обычном потоке (см. ниже), так что запас снизу только рвёт карточку. */
.product-thumb .description {
	flex: 1 1 auto;
	padding: 0;
	margin-bottom: 0;
}

.product-thumb h4 {
	font-size: 15px;
	line-height: 1.3;
	margin-bottom: 8px;
}

.product-thumb h4 a {
	color: var(--irincom-text);
}

.product-thumb h4 a:hover {
	color: var(--irincom-accent);
}

/* Описание в карточке прежний сайт не показывал — цена и кнопки важнее. */
.product-thumb .description > p {
	display: none;
}

/* Цена — как в прежней теме: #444, 16 px, полужирный; акционная мягко-красная
   #e55b4c, а не фирменная #d70022, чтобы не спорить с кнопкой «В корзину». */
.product-thumb .price {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 17px;
	font-weight: 600;
	color: #444;
	margin-bottom: 10px;
}

.product-thumb .price-new {
	color: #e55b4c;
}

.product-thumb .price-old {
	font-size: 15px;
	font-weight: 400;
	color: #999;
	text-decoration: line-through;
	margin-left: 6px;
}

/* Кнопки ядро кладёт в форму внутри .content, так что боковые отступы им
   достаются от неё — своих не добавляем, иначе ряд сузится вдвое. */
.product-thumb .content > form {
	margin: 0;
}

/* Блок «Купить в 1 клик» идёт следом за формой и замыкает карточку. */
.product-thumb .irincom-oneclick {
	margin-top: 8px;
}

/* В стандартной теме ряд кнопок висит абсолютом по нижнему краю карточки
   (position: absolute; bottom: 0; width: 100%). Нам так нельзя: под кнопками
   идёт ещё блок «Купить в 1 клик» — абсолютный ряд накрывал его собой и
   вылезал за правую рамку, потому что 100 % считал от карточки, а не от формы
   с отступами. Возвращаем кнопки в обычный поток. */
.product-thumb .button {
	position: static;
	display: flex;
	gap: 6px;
	width: auto;
}

/* «В корзину» осталась в ряду одна — список желаний и сравнение из плитки
   убраны, поэтому кнопка занимает всю ширину. width задаём явно: ядро ставит
   33.33 % (расчёт на три кнопки), и без сброса оно уходит в flex-basis.
   line-height ядра (38 px) вместе с нашими полями давал кнопку в 54 px —
   задаём своё. */
.product-thumb .button button {
	flex: 1 1 auto;
	width: auto;
	border: 1px solid var(--irincom-accent);
	background: var(--irincom-accent);
	color: #fff;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	line-height: 22px;
	padding: 8px 0;
}

.product-thumb .button button:hover {
	background: var(--irincom-accent-dark);
	border-color: var(--irincom-accent-dark);
}

/* Кнопка «Купить в 1 клик» уже описана в irincom.css — здесь только палитра. */
.btn-oneclick {
	color: var(--irincom-accent);
	border-color: var(--irincom-accent);
}

.btn-oneclick:hover,
.btn-oneclick:focus {
	background: var(--irincom-accent);
	border-color: var(--irincom-accent);
}

/* ------------------------------------------------- заявка и звонок на главной */
/* Полоса из двух приглашений — «Заказать расчёт» и «Заказать звонок».
   Разметка в extension/irincom/.../module/cta.twig, формы открываются теми же
   кнопками, что и в шапке (data-irincom-quote / data-irincom-callback). */
.irincom-cta {
	margin: 40px 0 10px;
	padding: 36px 0;
	background: #f7f7f7;
	border-top: 1px solid var(--irincom-line);
	border-bottom: 1px solid var(--irincom-line);
}

.irincom-cta-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.irincom-cta-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--irincom-line);
	border-top: 4px solid var(--irincom-accent);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.irincom-cta-icon {
	margin-bottom: 14px;
	color: var(--irincom-accent);
	font-size: 30px;
	line-height: 1;
}

.irincom-cta-card h3 {
	margin: 0 0 10px;
	color: var(--irincom-heading);
	font-size: 1.25em;
	font-weight: 600;
}

/* flex: 1 у текста — кнопки в обеих карточках встают на одной высоте,
   даже если абзацы разной длины. */
.irincom-cta-card p {
	flex: 1 1 auto;
	margin: 0 0 20px;
	color: var(--irincom-muted);
	font-size: 0.95em;
	line-height: 1.6;
}

.irincom-cta-btn {
	align-self: flex-start;
	padding: 11px 26px;
	border: 1px solid var(--irincom-accent);
	border-radius: 3px;
	background: #fff;
	color: var(--irincom-accent);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.irincom-cta-btn:hover,
.irincom-cta-btn:focus {
	background: var(--irincom-accent);
	color: #fff;
}

/* Основное действие — заявка на расчёт: она заполненная, звонок рядом
   контурный, чтобы кнопки не спорили за внимание. */
.irincom-cta-btn-primary {
	background: var(--irincom-accent);
	color: #fff;
}

.irincom-cta-btn-primary:hover,
.irincom-cta-btn-primary:focus {
	background: var(--irincom-accent-dark);
	border-color: var(--irincom-accent-dark);
	color: #fff;
}

.irincom-cta-phone {
	margin-top: 20px;
	color: var(--irincom-muted);
	text-align: center;
}

.irincom-cta-phone a {
	color: var(--irincom-heading);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}

.irincom-cta-phone a:hover {
	color: var(--irincom-accent);
}

.irincom-cta-hours {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.9em;
}

@media (max-width: 767.98px) {
	.irincom-cta {
		margin-top: 30px;
		padding: 26px 0;
	}

	.irincom-cta-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.irincom-cta-card {
		padding: 22px 18px;
	}

	/* На узком экране кнопка во всю ширину — попасть пальцем проще. */
	.irincom-cta-btn {
		align-self: stretch;
		text-align: center;
	}

	.irincom-cta-hours {
		display: block;
		margin-left: 0;
	}
}

/* ------------------------------------------------------- боковая колонка */
aside .card,
.irincom-price-filter {
	border: 1px solid var(--irincom-line);
	border-radius: 0;
}

aside .card-header,
.irincom-price-filter .card-header {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 15px;
	background: #f5f5f5;
	border-bottom: 1px solid var(--irincom-line);
}

aside .list-group-item.active {
	background: var(--irincom-accent);
	border-color: var(--irincom-accent);
}

/* ------------------------------------------------------------------ подвал */
footer {
	margin-top: 40px;
	padding: 34px 0 18px;
	background: var(--irincom-dark);
	color: #c8ccd0;
	font-size: 13px;
}

footer h5 {
	font-size: 15px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 14px;
}

footer a {
	color: #c8ccd0;
}

footer a:hover {
	color: var(--irincom-accent);
}

/* Колонок стало четыре, и списки в них длиннее — строкам нужен воздух,
   иначе ссылки слипаются в сплошное серое пятно. */
footer .list-unstyled li {
	margin-bottom: 7px;
	line-height: 1.45;
}

footer .list-unstyled li:last-child {
	margin-bottom: 0;
}

footer hr {
	border-color: rgba(255, 255, 255, 0.12);
}

/* Контакты и реквизиты в подвале — как на прежнем сайте. */
.irincom-footer-contacts .irincom-phone {
	display: block;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
}

.irincom-footer-contacts .irincom-phone:hover {
	color: var(--irincom-accent);
}

.irincom-footer-legal {
	color: #8b9198;
	font-size: 12px;
	white-space: pre-line;
}

/* --------------------------------------------------- блок преимуществ */
.irincom-benefits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 14px;
	margin: 24px 0 30px;
}

.irincom-benefit {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid var(--irincom-line);
	background: #fff;
}

.irincom-benefit i {
	font-size: 26px;
	color: var(--irincom-accent);
	flex: 0 0 auto;
}

/* Значки — JPEG на белом фоне, поэтому карточка тоже белая: рамки вокруг
   картинки не видно. */
.irincom-benefit img {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.irincom-benefit strong {
	display: block;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.2;
}

.irincom-benefit span {
	font-size: 12px;
	color: var(--irincom-muted);
}

/* ------------------------------------------------------------- мелочи */
.breadcrumb {
	font-size: 13px;
	background: none;
	padding-left: 0;
}

.pagination .page-item.active .page-link {
	background: var(--irincom-accent);
	border-color: var(--irincom-accent);
}

.pagination .page-link {
	color: var(--irincom-text);
}

.pagination .page-link:hover {
	color: var(--irincom-accent);
}

@media (max-width: 767.98px) {
	.irincom-contacts {
		margin-top: 10px;
	}

	.product-thumb .image img {
		max-height: 150px;
	}
}

/* ------------------------------------------------------------- слайдер */
.irincom-slider {
	margin-bottom: 26px;
}

.irincom-slider img {
	width: 100%;
	height: auto;
	display: block;
}

.irincom-slider .carousel-caption {
	right: auto;
	left: 0;
	bottom: 0;
	padding: 0;
	text-align: left;
}

.irincom-slider .carousel-caption span {
	display: inline-block;
	padding: 10px 22px;
	background: rgba(215, 0, 34, 0.92);
	color: #fff;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
}

.irincom-slider .carousel-control-prev,
.irincom-slider .carousel-control-next {
	width: 6%;
	opacity: 0;
	transition: opacity 0.15s ease;
}

.irincom-slider:hover .carousel-control-prev,
.irincom-slider:hover .carousel-control-next {
	opacity: 0.85;
}

.irincom-slider .carousel-indicators [data-bs-target] {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, 0.75);
}

.irincom-slider .carousel-indicators .active {
	background: var(--irincom-accent);
}

/* ------------------------------------------- фильтры на узком экране */
/* Кнопка видна только до lg — выше боковая колонка открыта всегда. */
.irincom-filters-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	width: 100%;
	margin-bottom: var(--sp-3);
	padding: 12px 16px;
	border: 1px solid var(--irincom-accent);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--irincom-accent);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.irincom-filters-toggle:hover,
.irincom-filters-toggle:focus {
	background: var(--irincom-accent);
	color: #fff;
}

/* Стрелка вниз, когда блок свёрнут, и вверх, когда открыт. Состояние берём
   у самой кнопки — bootstrap держит его в aria-expanded. */
.irincom-filters-toggle::after {
	content: '\f078';
	font-family: 'Font Awesome 6 Free';
	font-size: 12px;
	font-weight: 900;
	transition: transform 0.2s var(--ease);
}

.irincom-filters-toggle[aria-expanded='true']::after {
	transform: rotate(180deg);
}

@media (max-width: 991.98px) {
	/* На телефоне колонка идёт над списком товаров и не должна занимать
	   больше, чем нужно кнопке. */
	.irincom-filters {
		margin-bottom: var(--sp-3);
	}
}

/* ------------------------------- цена за поддон и за метр в карточке */
.irincom-units {
	margin: 0 0 var(--sp-3);
	padding: var(--sp-2) 0 0;
	border-top: 1px solid var(--irincom-line);
	font-size: 15px;
}

.irincom-units li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: 6px;
}

.irincom-units-label {
	color: var(--irincom-muted);
}

.irincom-units b {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 17px;
	white-space: nowrap;
}

/* Оговорка мелко и без выключки по краям: это примечание, а не ещё одна
   строка расчёта. */
.irincom-units-note {
	display: block;
	margin: 0;
	color: var(--irincom-muted);
	font-size: 12px;
}

/* --------------------------------- памятка «доставка и оплата» в карточке */
.irincom-terms {
	margin-top: var(--sp-3);
	padding: var(--sp-3);
	border-radius: var(--radius);
	background: #f7f7f7;
	font-size: 14px;
	line-height: 1.5;
}

.irincom-terms-row {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	color: var(--irincom-muted);
}

.irincom-terms-row:last-child {
	margin-bottom: 0;
}

/* Значку задаём ширину, иначе строки не выстраиваются по левому краю:
   грузовик, счёт и наушники разной ширины. */
.irincom-terms-row i {
	flex: 0 0 18px;
	margin-top: 3px;
	color: var(--irincom-accent);
	text-align: center;
}

.irincom-terms-row a {
	color: var(--irincom-accent);
	white-space: nowrap;
}

.irincom-terms-row a:hover {
	text-decoration: underline;
}

/* ------------------------------------------- появление блоков при прокрутке */
/* Важно для поиска: прятать блок «по умолчанию» нельзя — робот увидел бы
   страницу с невидимым содержимым, а это подозрительный признак. Поэтому
   правило работает только при классе .irincom-js, который скрипт вешает на
   <html> в первых строках. Нет скрипта (или робот не исполняет js) — всё
   видно сразу, без единой лишней строки в разметке. */
.irincom-js .irincom-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
	/* Подсказка браузеру: элемент вот-вот поедет — не пересчитывай ради него
	   всю страницу. */
	will-change: opacity, transform;
}

.irincom-js .irincom-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	.irincom-js .irincom-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------- первый экран главной */
/* Пришёл на смену карусели баннеров: неподвижный блок с h1, коротким
   объяснением и тремя входами в самые большие разделы. */
.irincom-hero-band {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 420px;
	margin-bottom: var(--sp-5);
	padding: var(--sp-6) 0;
	border-radius: var(--radius);
	background: var(--irincom-darker);
	overflow: hidden;
}

.irincom-hero-photo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Затемнение поверх снимка: без него белый текст читается через раз —
   на фотографии есть и небо, и тень. Слева гуще, справа прозрачнее, чтобы
   сама фотография осталась видна. */
.irincom-hero-veil {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(100deg, rgba(20, 22, 26, 0.88) 0%, rgba(20, 22, 26, 0.72) 45%, rgba(20, 22, 26, 0.28) 100%);
}

.irincom-hero-text {
	position: relative;
	max-width: 720px;
	color: #fff;
}

/* Каталог занимает всю ширину контейнера, а не колонку с текстом: восемь
   кнопок в узкой колонке сбивались в левый нижний угол и последняя строка
   выходила рваной. */
.irincom-hero-catalog {
	position: relative;
	margin-top: var(--sp-5);
}

.irincom-hero-text h1 {
	margin: 0 0 var(--sp-3);
	color: #fff;
	font-size: 40px;
	line-height: 1.15;
}

.irincom-hero-lead {
	margin: 0 0 var(--sp-4);
	color: rgba(255, 255, 255, 0.88);
	font-size: 18px;
	line-height: 1.55;
}

.irincom-hero-label {
	margin: 0 0 var(--sp-2);
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Ровно четыре колонки, а не auto-fill: подбор по ширине давал на большом
   экране пять колонок, и восемь разделов ложились 5 + 3 — вторая строка
   обрывалась на середине. Фиксированные четыре дают две полные строки при
   любой ширине, а длинное название переносится внутри кнопки. */
.irincom-hero-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	/* Обе строки одной высоты. Сетка и так равняет кнопки внутри строки, но
	   между строками — нет: на планшете «Железобетонные изделия (ЖБИ)» уходит
	   на две строки, и его ряд становится выше соседнего. */
	grid-auto-rows: 1fr;
	gap: var(--sp-2);
}

/* Кнопок теперь восемь, а не три: держим их чуть плотнее, иначе первый экран
   разъезжается на три строки и заголовок уходит вверх за край.

   Заливка при наведении сделана фоновой картинкой, а не псевдоэлементом:
   у background-size анимируется ширина, и красное поле наезжает слева
   направо, не трогая ни рамку, ни текст. Псевдоэлемент пришлось бы класть
   на отрицательный z-index и городить контекст наложения. */
.irincom-hero-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 12px 16px;
	text-align: center;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-sm);
	background-color: rgba(255, 255, 255, 0.08);
	background-image: linear-gradient(var(--irincom-accent), var(--irincom-accent));
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 0 100%;
	color: #fff;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	transition:
		background-size 0.32s var(--ease),
		border-color 0.2s var(--ease),
		transform 0.2s var(--ease),
		box-shadow 0.2s var(--ease);
}

/* Название поверх заливки и чуть подаётся вперёд — движение видно даже на
   короткой кнопке вроде «Блоки», где заливка проходит мгновенно. */
.irincom-hero-link span {
	position: relative;
	transition: transform 0.2s var(--ease);
}

.irincom-hero-link:hover,
.irincom-hero-link:focus-visible {
	transform: translateY(-3px);
	border-color: var(--irincom-accent);
	background-size: 100% 100%;
	box-shadow: 0 10px 22px rgba(215, 0, 34, 0.32);
	color: #fff;
}

.irincom-hero-link:hover span,
.irincom-hero-link:focus-visible span {
	transform: scale(1.03);
}

.irincom-hero-link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.irincom-hero-link:active {
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.irincom-hero-link,
	.irincom-hero-link span {
		transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
	}

	.irincom-hero-link:hover,
	.irincom-hero-link:focus-visible {
		transform: none;
		background-color: var(--irincom-accent);
		box-shadow: none;
	}

	.irincom-hero-link:hover span,
	.irincom-hero-link:focus-visible span {
		transform: none;
	}
}

@media (max-width: 767.98px) {
	.irincom-hero-band {
		min-height: 0;
		padding: var(--sp-5) 0;
	}

	.irincom-hero-text h1 {
		font-size: 26px;
	}

	.irincom-hero-lead {
		font-size: 16px;
	}

	/* Затемнение сплошное: на узком экране текст лежит поверх всей картинки. */
	.irincom-hero-veil {
		background: rgba(20, 22, 26, 0.82);
	}

	.irincom-hero-catalog {
		margin-top: var(--sp-4);
	}

	.irincom-hero-link {
		min-height: 48px;
		padding: 10px 8px;
		font-size: 14px;
	}

	/* На узком экране заливку не гоняем: на кнопке в полэкрана она проезжает
	   заметно медленнее, чем палец успевает уйти. Красим сразу. */
	.irincom-hero-link:hover,
	.irincom-hero-link:focus-visible {
		background-color: var(--irincom-accent);
		background-size: 100% 100%;
		transform: none;
		box-shadow: none;
	}
}

/* На планшете четыре колонки становятся по 168 px, и «Железобетонные изделия
   (ЖБИ)» разъезжается на четыре строки. Два столбца — восемь кнопок ровно
   в четыре строки. */
@media (max-width: 991.98px) {
	.irincom-hero-links {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Единая подпись раздела на главной: «Каталог», «Популярные товары»,
   «Производители», «Статьи». Раньше каждый блок оформлял заголовок сам. */
.irincom-section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 2px solid var(--irincom-accent);
	font-size: 22px;
	text-transform: uppercase;
}

/* Воздух между блоками главной. Раньше отступы были у каждого блока свои
   (16, 25, 32 px), и страница читалась как склейка кусков. */
.irincom-popular {
	margin-bottom: var(--sp-5);
}

/* ------------------------------------------------- плитки категорий */
.irincom-tiles-heading {
	font-size: 22px;
	text-transform: uppercase;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--irincom-accent);
}

.irincom-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}

/* Рамки нет — глубину даёт тень. Под курсором плитка приподнимается:
   движение мелкое, но именно оно отличает «живой» интерфейс от картинки. */
.irincom-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow-1);
	overflow: hidden;
	transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.irincom-tile:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-2);
}

@media (prefers-reduced-motion: reduce) {
	.irincom-tile:hover {
		transform: none;
	}
}

/* Кликается картинка с названием, а не плитка целиком: внутри плитки лежат
   ссылки на подкатегории, и ссылку в ссылку вкладывать нельзя. */
.irincom-tile-link {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.irincom-tile-image {
	display: block;
	overflow: hidden;
}

/* Оборот картинки при наведении — как на прежнем сайте.
   Там это правило висело на .wall-cat-image в теме newstore:
   transform: rotateY(-360deg) и transition: all ease-in-out 0.4s.

   Длительность мы увеличили до 0.9s: полный оборот за 0.4 с — это 900° в
   секунду, картинка успевала мелькнуть и дёрнуться. Здесь единственное
   число, которым регулируется скорость: больше — медленнее.

   Ось перспективы намеренно не задаём: без неё картинка не улетает вглубь,
   а сплющивается и разворачивается обратно — ровно как на старом сайте.
   Раньше здесь было scale(1.04): движение было, но такое мелкое, что
   казалось, будто плитки неподвижны. */
.irincom-tile-image img {
	width: 100%;
	height: auto;
	display: block;
	transform: rotateY(0deg);
	transition: transform 0.9s ease-in-out;
}

.irincom-tile:hover .irincom-tile-image img,
.irincom-tile:focus-visible .irincom-tile-image img {
	transform: rotateY(-360deg);
}

/* Кому анимация мешает (настройка системы «уменьшить движение») — оставляем
   подсветку рамки и названия, без вращения. */
@media (prefers-reduced-motion: reduce) {
	.irincom-tile-image img {
		transition: none;
	}

	.irincom-tile:hover .irincom-tile-image img,
	.irincom-tile:focus-visible .irincom-tile-image img {
		transform: none;
	}
}

.irincom-tile-body {
	display: block;
	padding: 12px 14px;
	border-top: 1px solid var(--irincom-line);
}

.irincom-tile-body strong {
	display: block;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.25;
	color: var(--irincom-text);
}

.irincom-tile:hover .irincom-tile-body strong {
	color: var(--irincom-accent);
}

.irincom-tile-count {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--irincom-muted);
}

/* Подкатегории: накладка, которая разворачивается поверх плитки при
   наведении. На прежнем сайте такое было задумано в теме newstore
   (.item-sub-category, rotateY со -180° до 0), но выключено правилом
   display: none, поэтому вживую его не видно. Здесь оно работает.

   Накрываем плитку целиком, а не только картинку: высота полосы с названием
   зависит от длины названия, и подгонять её числом — значит однажды получить
   съехавшую накладку. Название раздела поэтому продублировано в самой
   накладке. */
.irincom-tile-subs {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
	padding: 14px;
	background: #fff;
	opacity: 0;
	transform: rotateY(-180deg);
	transition: opacity 0.45s ease-in-out, transform 0.45s ease-in-out;
	/* Пока накладка спрятана, она не должна перехватывать курсор. */
	pointer-events: none;
}

.irincom-tile:hover .irincom-tile-subs,
.irincom-tile:focus-within .irincom-tile-subs {
	opacity: 1;
	transform: rotateY(0deg);
	pointer-events: auto;
}

.irincom-tile-subs-title {
	display: block;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--irincom-line);
	color: var(--irincom-heading);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
}

.irincom-tile-subs-title:hover {
	color: var(--irincom-accent);
}

.irincom-tile-subs ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.irincom-tile-subs li {
	margin-bottom: 4px;
	line-height: 1.3;
}

.irincom-tile-subs li:last-child {
	margin-bottom: 0;
}

.irincom-tile-subs a {
	color: var(--irincom-text);
	font-size: 13px;
}

.irincom-tile-subs a:hover {
	color: var(--irincom-accent);
}

/* Список длинный (в «Смесях» и ЖБИ по десять подразделов) — полоса прокрутки
   внутри накладки должна быть неброской. */
.irincom-tile-subs::-webkit-scrollbar {
	width: 6px;
}

.irincom-tile-subs::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: #ccc;
}

/* На телефоне и планшете наведения нет: накладка не откроется никогда, а без
   этого правила она ещё и перехватывала бы касания. Убираем её совсем —
   плитка остаётся обычной ссылкой в раздел. */
@media (hover: none) {
	.irincom-tile-subs {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.irincom-tile-subs {
		transition: opacity 0.2s linear;
		transform: none;
	}

	.irincom-tile:hover .irincom-tile-subs,
	.irincom-tile:focus-within .irincom-tile-subs {
		transform: none;
	}
}

/* Ссылка «все …» справа в заголовке блока */
.irincom-tiles-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.irincom-heading-link {
	font-family: Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	color: var(--irincom-accent);
	white-space: nowrap;
}

.irincom-heading-link:hover {
	text-decoration: underline;
}

/* ------------------------------------------------ лента производителей */
/* Было: 24 логотипа, каждый в своей рамке, сетка из ячеек по 150×90. Два
   с половиной десятка обведённых прямоугольников читались как стена — самая
   заметная примета шаблонов середины десятых.

   Стало: лента без рамок и подложек. Логотип держится сам, ячейку обозначает
   только пустое место вокруг. Рамка нужна, когда логотипы разного размера и
   их надо выровнять насильно; после приведения файлов к единому холсту
   (normalize_brand_logos.php) выравнивать нечего — они уже одного веса. */
/* Колонок ровно шесть, а не «сколько влезет». Подбор по ширине давал восемь
   колонок на широком экране, и двенадцать логотипов ложились 8 + 4 — вторая
   строка обрывалась на середине. Шесть и три делят восемнадцать нацело, так
   что ряды полные и на десктопе, и на телефоне. Меняете число логотипов в
   настройке module_brands_limit — держите его кратным шести. */
.irincom-brands {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sp-4) var(--sp-3);
	margin-bottom: var(--sp-5);
}

@media (max-width: 991.98px) {
	.irincom-brands {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.irincom-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 0 var(--sp-2);
}

/* Логотипы в своём цвете. Раньше лента была обесцвечена и раскрашивалась под
   курсором — приём известный, но на этой странице он бил мимо: вокруг цветные
   карточки товаров и красные кнопки, а посреди них серая полоса, которая сама
   притягивала взгляд именно своей серостью. Ради спокойствия ряда осталась
   лёгкая приглушённость — восемь процентов прозрачности глазом не читаются
   как «выключено», но снимают пестроту чужих палитр.

   Движение при наведении сохранено: логотип наливается цветом и приподнимается.
   Тени нет намеренно — логотипы лежат на белом холсте, и тень обвела бы
   прямоугольник файла, а не сам знак. */
.irincom-brand img {
	max-width: 100%;
	max-height: 44px;
	width: auto;
	height: auto;
	opacity: 0.92;
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.irincom-brand:hover img,
.irincom-brand:focus-visible img {
	opacity: 1;
	transform: translateY(-3px) scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
	.irincom-brand:hover img,
	.irincom-brand:focus-visible img {
		transform: none;
	}
}

/* -------------------------------------------------------- блок статей */
.irincom-articles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
	margin-bottom: 32px;
}

.irincom-article {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--irincom-line);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.irincom-article:hover {
	border-color: var(--irincom-accent);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.irincom-article-image img {
	width: 100%;
	height: auto;
	display: block;
}

.irincom-article-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 14px 16px 16px;
}

.irincom-article-date {
	font-size: 12px;
	color: var(--irincom-muted);
}

.irincom-article-body h3 {
	font-size: 17px;
	line-height: 1.25;
	margin: 6px 0 8px;
}

.irincom-article-body p {
	flex: 1 1 auto;
	font-size: 13px;
	color: var(--irincom-muted);
	margin-bottom: 10px;
}

.irincom-article-more {
	align-self: flex-start;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--irincom-accent);
}

.irincom-article-more:hover {
	text-decoration: underline;
}

/* ------------------------------------------------ окно «Заявка на расчёт» */
.irincom-quote-modal .modal-header {
	background: var(--irincom-accent);
	color: #fff;
}

.irincom-quote-modal .modal-header .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
}

.irincom-quote-modal .btn-submit {
	color: #fff;
	background: var(--irincom-accent);
	border-color: var(--irincom-accent);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	padding: 10px;
}

.irincom-quote-modal .btn-submit:hover {
	background: var(--irincom-accent-dark);
	border-color: var(--irincom-accent-dark);
}

.irincom-quote-modal .form-label {
	font-size: 13px;
	margin-bottom: 3px;
	color: var(--irincom-muted);
}

/* ----------------------------------------- вкладка «Калькулятор» */
.irincom-calc-size {
	font-size: 13px;
	color: var(--irincom-muted);
	margin-bottom: 14px;
}

.irincom-calc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 12px 16px;
	margin-bottom: 18px;
}

.irincom-calc-field label {
	display: block;
	font-size: 12px;
	color: var(--irincom-muted);
	margin-bottom: 3px;
}

/* Кнопки-переключатели внутри поля не должны выглядеть выше соседних
   input-ов, иначе строка «съезжает». */
.irincom-calc-field .btn-group .btn {
	padding-top: 6px;
	padding-bottom: 6px;
}

.irincom-calc-field .btn-check:checked + .btn {
	background: var(--irincom-accent);
	border-color: var(--irincom-accent);
	color: #fff;
}

.irincom-calc-result {
	border: 1px solid var(--irincom-line);
	border-top: 3px solid var(--irincom-accent);
	background: var(--irincom-accent-soft);
	padding: 16px 18px;
}

.irincom-calc-total {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.irincom-calc-total span {
	font-size: 14px;
	color: var(--irincom-muted);
}

.irincom-calc-total strong {
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 28px;
	line-height: 1;
	color: var(--irincom-accent);
}

.irincom-calc-details {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	font-size: 13px;
	color: var(--irincom-muted);
}

.irincom-calc-details strong {
	color: var(--irincom-text);
}

.irincom-calc-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}

.irincom-calc-note {
	font-size: 12px;
	color: var(--irincom-muted);
}

/* --------------------------------- вкладка «Документы и сертификаты» */
.irincom-documents {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

@media (min-width: 768px) {
	.irincom-documents {
		grid-template-columns: 1fr 1fr;
	}
}

.irincom-document {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--irincom-line);
	border-radius: 3px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.irincom-document:hover {
	border-color: var(--irincom-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Значок типа файла — красный, как у PDF: документы в каталоге почти
   сплошь PDF и сканы, единый цвет читается как «файл». */
.irincom-document > i {
	flex: 0 0 auto;
	font-size: 22px;
	color: var(--irincom-accent);
}

.irincom-document a {
	flex: 1 1 auto;
	color: var(--irincom-text);
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.irincom-document a:hover {
	color: var(--irincom-accent);
	text-decoration: underline;
}

.irincom-document-meta {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 12px;
	color: var(--irincom-muted);
}

/* ------------------------------------------- соцсети и оплата в подвале */
.irincom-social {
	display: flex;
	gap: 8px;
}

.irincom-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 50%;
	color: #c8ccd0;
	font-size: 17px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.irincom-social-link:hover {
	color: #fff;
	background: var(--irincom-accent);
	border-color: var(--irincom-accent);
}

/* Фирменные цвета мессенджеров при наведении — узнаётся быстрее. */
.irincom-social-whatsapp:hover { background: #25d366; border-color: #25d366; }
.irincom-social-telegram:hover { background: #2aabee; border-color: #2aabee; }
.irincom-social-vk:hover       { background: #0077ff; border-color: #0077ff; }

.irincom-payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	justify-content: flex-start;
}

@media (min-width: 768px) {
	.irincom-payments {
		justify-content: flex-end;
	}
}

.irincom-payments-label {
	color: #8b9198;
	font-size: 12px;
}

/* Значки платёжных систем — родные картинки прежнего сайта, разной
   пропорции и с разным фоном (у наклейки Сбербанка он зелёный). Поэтому
   каждый кладём на общую белую подложку: так они читаются на тёмном
   подвале и выглядят одним рядом, а не набором случайных прямоугольников. */
.irincom-payment {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
	color: #dfe3e6;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.irincom-payment i {
	font-size: 17px;
}

/* Бейдж с картинкой: белая подложка и никакого внутреннего отступа по бокам,
   иначе узкий «Мир» и квадратная наклейка Сбербанка встают вразнобой.
   Подсветки при наведении нет — значок не ссылка, и намекать на нажатие
   ему незачем. */
.irincom-payment-image {
	padding: 4px 8px;
	background: #fff;
	border-color: #fff;
}

/* Ограничение по высоте, а не по ширине: значки сильно разной пропорции —
   Mastercard почти квадратный, «СберБанк» вытянут вшестеро. Общая высота
   выравнивает их в ряду, а ширине даём запас, иначе вытянутый логотип
   ужмётся по ширине и станет вдвое ниже соседей. */
.irincom-payment img {
	display: block;
	height: 26px;
	width: auto;
	max-width: 170px;
	object-fit: contain;
}

/* ------------------------------------- ленты товаров под карточкой */
/* «С этим товаром покупают» и «Просмотренные товары» — одинаковые заголовки
   с красной чертой, как у плиток разделов на главной. Ядро выводит их
   обычным <h3> без класса, поэтому цепляемся за контейнеры. */
.irincom-viewed h3,
#content > h3 {
	font-size: 22px;
	text-transform: uppercase;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--irincom-accent);
}

.irincom-viewed {
	margin-top: 32px;
}

/* --------------------------------------------------------- кнопка корзины */
/* Ядро вешает на кнопку корзины bootstrap-класс btn-dark — почти чёрный
   прямоугольник в шапке, к фирменной палитре отношения не имеющий. На прежнем
   сайте она была красной (#cart > .btn { background: var(--main-color) }).
   Перебиваем не сам фон, а переменные bootstrap: тогда наведение, нажатие и
   выключенное состояние пересчитаются сами и !important не понадобится. */
/* Кнопка корзины была растянута на всю колонку и увеличенного размера
   (bootstrap: .d-grid у обёртки + .btn-lg + .d-block) — она занимала треть
   шапки. Возвращаем обычный размер и ширину по содержимому. */
/* !important здесь вынужденный: классы .d-grid и .d-block — служебные
   утилиты bootstrap, и объявлены они сами с !important. Без него правило
   не перебьётся, каким бы точным ни был селектор. */
#cart .dropdown {
	display: inline-block !important;
}

#cart .btn-lg {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	width: auto;
	padding: 9px 16px;
	font-size: 14px;
	line-height: 1.2;
	white-space: nowrap;
}

#cart .btn-dark {
	--bs-btn-bg: var(--irincom-accent);
	--bs-btn-border-color: var(--irincom-accent);
	--bs-btn-hover-bg: var(--irincom-accent-dark);
	--bs-btn-hover-border-color: var(--irincom-accent-dark);
	--bs-btn-active-bg: var(--irincom-accent-dark);
	--bs-btn-active-border-color: var(--irincom-accent-dark);
	--bs-btn-disabled-bg: var(--irincom-accent);
	--bs-btn-disabled-border-color: var(--irincom-accent);
	--bs-btn-focus-shadow-rgb: 215, 0, 34;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	border-radius: 4px;
}

/* ------------------------------------------------- страница «Производители» */
/* Плитка бренда: квадрат под логотип и подпись под ним — так этот раздел
   выглядел на прежнем сайте. Высоту картинки фиксируем, иначе логотипы
   разной пропорции (от узкой полосы до квадрата) рвут ряд по высоте. */
.irincom-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	padding: 12px 8px;
	border: 1px solid var(--irincom-line);
	background: #fff;
	color: var(--irincom-text);
	text-align: center;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.irincom-brand-card:hover,
.irincom-brand-card:focus {
	border-color: var(--irincom-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	color: var(--irincom-accent);
}

/* Логотипу отдана площадка повыше: витрина плотная, и мелкий значок в ней
   теряется. Высоту фиксируем, чтобы плитки в ряду стояли ровно, — логотипы
   у заводов от узкой полосы до квадрата. */
.irincom-brand-card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 96px;
	margin-bottom: 10px;
}

.irincom-brand-card-image img {
	max-width: 100%;
	max-height: 96px;
	object-fit: contain;
}

.irincom-brand-card-name {
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
}

/* Якорь стоит на самой плитке, поэтому переход по букве упирал бы её
   в верхний край окна вплотную под шапку. Отступ сверху решает. */
.irincom-brand-card[id] {
	scroll-margin-top: 90px;
}

/* Алфавитный указатель — строка ссылок, а не сплошной текст. */
.irincom-brand-index a {
	display: inline-block;
	min-width: 26px;
	margin: 2px;
	padding: 2px 6px;
	border: 1px solid var(--irincom-line);
	text-align: center;
	text-decoration: none;
}

.irincom-brand-index a:hover {
	border-color: var(--irincom-accent);
	background: var(--irincom-accent-soft);
}

/* Логотип на странице отдельного бренда — над списком его товаров, как было
   на прежнем сайте: рамка-миниатюра слева, дальше обычная сетка. */
.irincom-brand-logo {
	margin: 0 0 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--irincom-line);
}

.irincom-brand-logo img {
	max-width: 100%;
	max-height: 80px;
	padding: 4px;
	border: 1px solid var(--irincom-line);
	background: #fff;
	object-fit: contain;
}

/* --------------------------------------------- кнопка «Посмотреть на карте» */
/* Ядро красит её bootstrap-классом btn-info — голубой, к фирменной палитре
   отношения не имеющий. Своя кнопка в тон остальным призывам на сайте. */
.btn-irincom-map {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--irincom-accent);
	border-radius: 4px;
	background: var(--irincom-accent);
	color: #fff;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-irincom-map:hover,
.btn-irincom-map:focus {
	background: var(--irincom-accent-dark);
	border-color: var(--irincom-accent-dark);
	color: #fff;
}

/* Карта в контактах. Высота задаётся здесь, а не в разметке: контейнер один
   и для карты, нарисованной через JavaScript API, и для виджета в iframe —
   у обоих собственных размеров нет, без высоты блок схлопнется в ноль.
   Серый фон виден те доли секунды, пока карта грузится. */
.irincom-map-section h3 {
	margin-bottom: 12px;
}

.irincom-map {
	position: relative;
	height: 380px;
	overflow: hidden;
	border: 1px solid var(--irincom-line);
	border-radius: 4px;
	background: #eceff1;
}

.irincom-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 575.98px) {
	.irincom-map {
		height: 280px;
	}
}

/* ─── Страница «О компании» ───────────────────────────────────────────────
   Стили лежат здесь, а не в тексте страницы: визуальный редактор в админке
   вырезает <style> при первом же сохранении, и вёрстка развалилась бы после
   любой правки текста. Красный берём из фирменной переменной — присланный
   в макете #e3001b на пару тонов ярче нашего #d70022 и рядом с шапкой
   выглядел бы как вторая, случайная красная. */
.about-wrapper {
	margin-top: 15px;
	line-height: 1.6;
	color: var(--irincom-text);
}

.about-header-img {
	display: block;
	width: 100%;
	/* Снимок 2000 px в ширину, и в разметке у него проставлены свои размеры —
	   без ограничения он вылезает за колонку. */
	max-width: 100%;
	height: 250px;
	margin-bottom: 30px;
	border-radius: 6px;
	object-fit: cover;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.about-intro {
	margin-bottom: 40px;
	font-size: 1.1em;
}

.about-intro h2 {
	margin: 0 0 15px;
	color: var(--irincom-heading);
}

.about-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.a-stat-card {
	padding: 25px 20px;
	border: 1px solid #eaeaea;
	border-top: 4px solid var(--irincom-accent);
	border-radius: 4px;
	background: #fff;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
	transition: transform 0.2s;
}

.a-stat-card:hover {
	transform: translateY(-5px);
}

.a-icon {
	margin-bottom: 15px;
	font-size: 2em;
}

.a-stat-card h3 {
	margin: 0 0 10px;
	color: var(--irincom-heading);
	font-size: 1.1em;
	font-weight: 600;
}

.a-stat-card p {
	margin: 0;
	color: var(--irincom-muted);
	font-size: 0.9em;
}

.about-mission {
	margin-bottom: 20px;
	padding: 25px;
	border-left: 5px solid var(--irincom-accent);
	border-radius: 4px;
	background: #f9f9f9;
}

.about-mission h3 {
	margin-top: 0;
	color: var(--irincom-heading);
}

.about-mission p {
	margin-bottom: 0;
}

/* На телефоне картинка-шапка в 250 px съедает пол-экрана. */
@media (max-width: 575.98px) {
	.about-header-img {
		height: 160px;
		margin-bottom: 20px;
	}

	.about-stats {
		gap: 12px;
	}
}

/* ─── Страница «Клиентам» ─────────────────────────────────────────────────
   Тот же приём, что и на «О компании»: стили здесь, разметка в тексте
   страницы, красный — из фирменной переменной вместо присланного #e3001b. */
.klientam-wrapper {
	margin-top: 15px;
	line-height: 1.6;
	color: var(--irincom-text);
}

.klientam-intro {
	margin-bottom: 30px;
	font-size: 1.1em;
}

.klientam-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.k-card {
	padding: 25px;
	border: 1px solid #eaeaea;
	border-top: 4px solid var(--irincom-accent);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.k-card h3 {
	margin: 0 0 15px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0f0f0;
	color: var(--irincom-heading);
	font-size: 1.25em;
	font-weight: 600;
}

.k-card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.k-card ul li {
	position: relative;
	margin-bottom: 12px;
	padding-left: 22px;
	font-size: 0.95em;
}

.k-card ul li:last-child {
	margin-bottom: 0;
}

.k-card ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--irincom-accent);
	font-weight: bold;
}

.k-contact-block {
	margin-bottom: 20px;
	padding: 25px;
	border-left: 5px solid var(--irincom-accent);
	border-radius: 4px;
	background: #f9f9f9;
	text-align: center;
}

.k-contact-block p {
	margin: 0 0 10px;
	font-size: 1.1em;
}

.k-phone {
	font-size: 1.4em;
	font-weight: bold;
}

/* Телефон — ссылка tel:, чтобы с телефона звонили в одно касание.
   Ссылки на витрине красные, но здесь номер набран крупно и жирно, и
   красным он спорил бы с полосой слева — оставляем цвет текста. */
.k-phone a {
	color: var(--irincom-heading);
	text-decoration: none;
}

.k-phone a:hover {
	color: var(--irincom-accent);
}

/* На узком экране карточки идут в одну колонку — лишние поля ни к чему. */
@media (max-width: 575.98px) {
	.klientam-cards {
		gap: 12px;
	}

	.k-card,
	.k-contact-block {
		padding: 20px 18px;
	}
}

/* ─── Страница «Доставка» ─────────────────────────────────────────────────
   Всё как на «О компании» и «Клиентам»: стили тут, разметка в тексте
   страницы, красный — из фирменной переменной вместо присланного #e3001b. */
.delivery-wrapper {
	margin-top: 15px;
	line-height: 1.6;
	color: var(--irincom-text);
}

.delivery-header-img {
	width: 100%;
	height: 300px;
	margin-bottom: 30px;
	border-radius: 6px;
	object-fit: cover;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.delivery-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-bottom: 40px;
}

.d-feature {
	padding: 20px;
	border-left: 4px solid var(--irincom-accent);
	border-radius: 6px;
	background: #f9f9f9;
}

.d-feature h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	color: var(--irincom-heading);
	font-size: 1.1em;
}

.d-feature p {
	margin: 0;
	color: var(--irincom-muted);
	font-size: 0.95em;
}

.d-table-title {
	margin-bottom: 15px;
	color: var(--irincom-heading);
}

/* Таблица не ужимается ниже 800 px, поэтому на телефоне её прокручивают
   вбок внутри этой обёртки — страница целиком при этом не едет. */
.d-table-container {
	overflow-x: auto;
	margin-bottom: 30px;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.d-table {
	width: 100%;
	min-width: 800px;
	border-collapse: collapse;
}

.d-table th,
.d-table td {
	padding: 15px;
	border-bottom: 1px solid #eaeaea;
	text-align: center;
}

.d-table th {
	background-color: #f2f2f2;
	color: var(--irincom-heading);
	font-weight: 600;
}

.d-table th:first-child,
.d-table td:first-child {
	background-color: #fafafa;
	text-align: left;
	font-weight: 600;
}

.d-table tr:hover td {
	background-color: #fdfdfd;
}

.d-note {
	padding: 15px;
	border: 1px dashed var(--irincom-accent);
	border-radius: 4px;
	background: #fff8f8;
	color: var(--irincom-muted);
	font-size: 0.9em;
}

.d-note a {
	color: var(--irincom-accent);
	white-space: nowrap;
}

/* На телефоне картинка-шапка в 300 px съедает пол-экрана — как и на
   «О компании», ужимаем её. */
@media (max-width: 575.98px) {
	.delivery-header-img {
		height: 160px;
		margin-bottom: 20px;
	}

	.delivery-features {
		gap: 12px;
	}
}

/* ─── Страница «Оплата» ───────────────────────────────────────────────────
   Стили тут, разметка в тексте страницы, красный — из фирменной переменной
   вместо присланного #e3001b. Карточки намеренно совпадают по виду с
   «Клиентам»: та же рамка, та же красная полоса сверху. */
.payment-wrapper {
	margin-top: 15px;
	line-height: 1.6;
	color: var(--irincom-text);
}

.payment-intro {
	margin-bottom: 30px;
	font-size: 1.1em;
}

.payment-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-bottom: 30px;
}

.p-card {
	padding: 25px;
	border: 1px solid #eaeaea;
	border-top: 4px solid var(--irincom-accent);
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.p-card h3 {
	margin: 0 0 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0f0f0;
	color: var(--irincom-heading);
	font-size: 1.25em;
	font-weight: 600;
}

.p-item {
	margin-bottom: 20px;
}

.p-item:last-child {
	margin-bottom: 0;
}

.p-item-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
	color: var(--irincom-heading);
	font-size: 1.05em;
	font-weight: 600;
}

.p-item-text {
	margin: 0;
	padding-left: 30px;
	color: var(--irincom-muted);
	font-size: 0.95em;
}

.p-image-wrapper {
	overflow: hidden;
	min-height: 250px;
	border-radius: 4px;
}

.p-image-wrapper img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-note {
	padding: 20px;
	border-left: 5px solid var(--irincom-accent);
	border-radius: 4px;
	background: #f9f9f9;
	font-size: 0.95em;
}

.p-note a {
	color: var(--irincom-accent);
	white-space: nowrap;
}

/* Три колонки в ряд помещаются только на широком экране. */
@media (max-width: 991.98px) {
	.payment-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 575.98px) {
	.payment-grid {
		gap: 12px;
	}

	.p-card {
		padding: 20px 18px;
	}
}

/* --------------------------------------------- кнопка «Заказать образец» */
/* Оформлена как «Купить в 1 клик», но спокойнее: образец — шаг вспомогательный,
   спорить с покупкой ему не нужно. */
.btn-sample {
	width: 100%;
	padding: 10px 16px;
	border: 1px solid var(--irincom-line);
	border-radius: var(--radius-sm);
	background: #fff;
	color: var(--irincom-muted);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
}

.btn-sample:hover,
.btn-sample:focus {
	border-color: var(--irincom-accent);
	background: #fff;
	color: var(--irincom-accent);
}

/* ------------------------------------------- «что нужно для задачи» */
.irincom-solutions {
	margin-bottom: var(--sp-5);
}

.irincom-solutions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: var(--sp-3);
}

.irincom-solution {
	display: flex;
	flex-direction: column;
	padding: var(--sp-4);
	border-radius: var(--radius);
	background: #fff;
	box-shadow: var(--shadow-1);
	transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.irincom-solution:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-2);
}

.irincom-solution-icon {
	margin-bottom: var(--sp-2);
	color: var(--irincom-accent);
	font-size: 26px;
	line-height: 1;
}

.irincom-solution h3 {
	margin: 0 0 var(--sp-2);
	color: var(--irincom-heading);
	font-size: 1.1em;
	font-weight: 600;
}

/* flex: 1 у текста — списки разделов начинаются на одной высоте, даже если
   подписи разной длины. */
.irincom-solution p {
	flex: 1 1 auto;
	margin: 0 0 var(--sp-3);
	color: var(--irincom-muted);
	font-size: 14px;
	line-height: 1.5;
}

.irincom-solution ul {
	margin: 0;
	padding: var(--sp-2) 0 0;
	border-top: 1px solid var(--irincom-line);
	list-style: none;
}

.irincom-solution li {
	margin-bottom: 5px;
	line-height: 1.35;
}

.irincom-solution li:last-child {
	margin-bottom: 0;
}

.irincom-solution a {
	color: var(--irincom-text);
	font-size: 14px;
}

.irincom-solution a::before {
	content: '→';
	margin-right: 6px;
	color: var(--irincom-accent);
}

.irincom-solution a:hover {
	color: var(--irincom-accent);
}

@media (prefers-reduced-motion: reduce) {
	.irincom-solution:hover {
		transform: none;
	}
}

/* ------------------------------------------- плавающая кнопка WhatsApp */
/* Правый нижний угол — привычное место, там её и ищут. Уведомления о корзине
   OpenCart показывает вверху, так что не пересекаются. */
.irincom-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1030;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	font-size: 28px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.irincom-whatsapp:hover,
.irincom-whatsapp:focus {
	transform: scale(1.06);
	background: #1fbe5a;
	color: #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 575.98px) {
	.irincom-whatsapp {
		right: 14px;
		bottom: 14px;
		width: 50px;
		height: 50px;
		font-size: 25px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.irincom-whatsapp {
		transition: none;
	}

	.irincom-whatsapp:hover {
		transform: none;
	}
}

/* ------------------------- «Клиентам»: условия для строительных компаний */
.k-b2b {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	padding: var(--sp-4);
	border-left: 5px solid var(--irincom-accent);
	border-radius: var(--radius);
	background: var(--irincom-accent-soft);
}

.k-b2b-text {
	flex: 1 1 320px;
}

.k-b2b-text strong {
	display: block;
	margin-bottom: 4px;
	color: var(--irincom-heading);
	font-size: 1.1em;
}

.k-b2b-text span {
	color: var(--irincom-muted);
	font-size: 0.95em;
}

.k-b2b-btn {
	padding: 12px 26px;
	border: 1px solid var(--irincom-accent);
	border-radius: var(--radius-sm);
	background: var(--irincom-accent);
	color: #fff;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.k-b2b-btn:hover,
.k-b2b-btn:focus {
	background: var(--irincom-accent-dark);
	border-color: var(--irincom-accent-dark);
	color: #fff;
}

@media (max-width: 575.98px) {
	.k-b2b {
		padding: var(--sp-3);
	}

	.k-b2b-btn {
		width: 100%;
		white-space: normal;
	}
}

/* ------------------------------------------- товары без заведённой цены */
.product-thumb .price.irincom-on-request {
	color: var(--irincom-muted);
	font-size: 15px;
	font-weight: 400;
}

/* Кнопка на месте корзины: та же форма и высота, но не красная — это
   не покупка, а вопрос менеджеру. */
.product-thumb .button .irincom-request-btn {
	flex: 1 1 auto;
	width: auto;
	padding: 8px 0;
	border: 1px solid var(--irincom-accent);
	background: #fff;
	color: var(--irincom-accent);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 22px;
}

.product-thumb .button .irincom-request-btn:hover {
	background: var(--irincom-accent);
	color: #fff;
}

/* Карточка товара без цены */
.irincom-on-request-price {
	margin-bottom: var(--sp-3);
	color: var(--irincom-muted);
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 22px;
}

.irincom-request-big {
	padding: 12px 28px;
	border: 1px solid var(--irincom-accent);
	border-radius: var(--radius-sm);
	background: var(--irincom-accent);
	color: #fff;
	font-family: 'FuturaPT', 'Roboto Condensed', Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
}

.irincom-request-big:hover,
.irincom-request-big:focus {
	background: var(--irincom-accent-dark);
	border-color: var(--irincom-accent-dark);
	color: #fff;
}